docs: add comprehensive V5 Calls SDK documentation

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.kiro
 
 .kiro/
 

.mintlifyignore

@@ -0,0 +1 @@
+.github

calls.mdx

@@ -0,0 +1,166 @@
+---
+mode: "custom"
+title: "Voice & Video Calling"
+description: "Add real-time voice and video calling to your apps in minutes with WebRTC-powered SDKs."
+canonical: "https://cometchat.com/docs"
+---
+
+import { CardGroup, Card, Steps, Columns, AccordionGroup, Accordion, Callout } from 'mintlify';
+
+{/* Hero Section */}
+<div className="relative w-full flex items-center justify-center" style={{ height: '20rem', overflow: 'hidden' }}>
+<div className="absolute inset-0 bg-primary dark:bg-primary-light" style={{ opacity: 0.05 }}/>
+
+<div style={{maxWidth: '70rem', marginLeft: 'auto', marginRight: 'auto', paddingLeft: '1.25rem', paddingRight: '1.25rem' }}> 
+  <Columns cols={2} className="items-center gap-x-12">
+    <div className="flex flex-col justify-center h-full text-center md:text-left">
+      <h1 className="text-gray-700 dark:text-white" style={{ fontSize: '2.2rem', fontWeight: '600' }}>Voice & Video Calling</h1>
+      <p className="text-lg text-gray-600">
+        Add high-quality, real-time voice and video calls to any app. Built on WebRTC with drop-in UI components.
+      </p> 
+    </div>
+    <div className="flex flex-col items-center justify-center h-full">
+      <img 
+        src="/images/voice-video-banner.png" 
+        alt="Voice & Video Calling UI Preview" 
+        className="w-full max-w-[380px]"
+      />
+    </div>
+  </Columns>
+</div>
+
+</div>
+
+<div style={{marginTop: '2rem', marginBottom: '2rem', maxWidth: '70rem', marginLeft: 'auto', marginRight: 'auto', paddingLeft: '1.25rem', paddingRight: '1.25rem' }}>
+
+<div className="mb-12">
+  <h2 className="text-gray-700 dark:text-white text-2xl font-semibold mb-4">What is CometChat Calls?</h2>
+  <p className="text-gray-600 dark:text-gray-300 mb-4">The CometChat Calls SDK provides a complete voice and video calling solution built on WebRTC.</p>
+
+  <div className="flex gap-3 mb-6">
+    <a href="https://calls.cometchat.io/" target="_blank" className="inline-flex items-center px-4 py-2 rounded-lg bg-primary text-white font-medium hover:opacity-90 transition-opacity">
+      Try Live Demo →
+    </a>
+    <a href="/calls/platform/features" className="inline-flex items-center px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+      View Features →
+    </a>
+  </div>
+
+<CardGroup cols={2}>
+  <Card title="Built-in UI" icon="window">
+    Pre-built call screens, controls, and participant views
+  </Card>
+  <Card title="Rich Call Controls" icon="sliders">
+    Mute, screen share, recording, layouts, and more
+  </Card>
+  <Card title="Cross-Platform" icon="layer-group">
+    Web, iOS, Android, React Native, and Flutter
+  </Card>
+  <Card title="Scalable Infrastructure" icon="server">
+    Enterprise-grade media servers handle all complexity
+  </Card>
+</CardGroup>
+</div>
+
+<div className="mb-12">
+  <h2 className="text-gray-700 dark:text-white text-2xl font-semibold mb-4">Choose Your Platform</h2>
+  <p className="text-gray-600 dark:text-gray-300 mb-4">Get started with the Calls SDK on your preferred platform. Each SDK provides the same core calling features with platform-specific optimizations.</p>
+
+<AccordionGroup>
+  <Accordion title="How It Works">
+    <Steps>
+      <Step title="Install the SDK">
+        Add the Calls SDK to your project via npm, CocoaPods, Gradle, or pub.
+      </Step>
+      <Step title="Initialize & Authenticate">
+        Configure with your App ID and Region, then log in users with their CometChat credentials.
+      </Step>
+      <Step title="Join a Call Session">
+        Generate a session token and join—the SDK renders a complete call UI automatically.
+      </Step>
+      <Step title="Customize as Needed">
+        Adjust layouts, controls, and styling to match your app's design.
+      </Step>
+    </Steps>
+  </Accordion>
+  <Accordion title="Why It's Great">
+    <Steps>
+      <Step title="Built-in UI">Pre-built call screens, controls, and participant views—no UI work required.</Step>
+      <Step title="WebRTC Powered">Enterprise-grade media infrastructure handles all the complexity.</Step>
+      <Step title="Cross-Platform Consistency">Same features and API patterns across all platforms.</Step>
+      <Step title="Easy Integration">Get up and running in minutes with simple setup and clear documentation.</Step>
+    </Steps>
+  </Accordion>
+</AccordionGroup>
+
+<CardGroup cols={3}>
+  <Card title="JavaScript" icon={<img src="/docs/images/icons/js.svg" alt="JavaScript" />} href="/calls/javascript/overview">
+    Vanilla JS or any web framework
+  </Card>
+  <Card title="React" icon={<img src="/docs/images/icons/react.svg" alt="React" />} href="/calls/javascript/react-integration">
+    React web applications
+  </Card>
+  <Card title="Angular" icon={<img src="/docs/images/icons/angular.svg" alt="Angular" />} href="/calls/javascript/angular-integration">
+    Angular web applications
+  </Card>
+  <Card title="Vue" icon={<img src="/docs/images/icons/vuejs.svg" alt="Vue" />} href="/calls/javascript/vue-integration">
+    Vue.js web applications
+  </Card>
+  <Card title="Next.js" icon={<img src="/docs/images/icons/nextjs.svg" alt="Next.js" />} href="/calls/javascript/nextjs-integration">
+    Next.js with SSR support
+  </Card>
+  <Card title="Ionic" icon={<img src="/docs/images/icons/ionic.svg" alt="Ionic" />} href="/calls/javascript/ionic-integration">
+    Ionic hybrid mobile apps
+  </Card>
+  <Card title="React Native" icon={<img src="/docs/images/icons/react.svg" alt="React Native" />} href="/calls/react-native/overview">
+    Cross-platform mobile apps
+  </Card>
+  <Card title="iOS" icon={<img src="/docs/images/icons/swift.svg" alt="iOS" />} href="/calls/ios/overview">
+    Native Swift/Objective-C apps
+  </Card>
+  <Card title="Android" icon={<img src="/docs/images/icons/android.svg" alt="Android" />} href="/calls/android/overview">
+    Native Kotlin/Java apps
+  </Card>
+  <Card title="Flutter" icon={<img src="/docs/images/icons/flutter.svg" alt="Flutter" />} href="/calls/flutter/overview">
+    Cross-platform with Dart
+  </Card>
+</CardGroup>
+</div>
+
+<div className="mb-12">
+  <h2 className="text-gray-700 dark:text-white text-2xl font-semibold mb-4">Sample Apps</h2>
+  <p className="text-gray-600 dark:text-gray-300 mb-4">Explore our open-source sample apps to see the Calls SDK in action. Clone, run, and customize for your needs.</p>
+
+<CardGroup cols={3}>
+  <Card title="JavaScript" icon="github" href="https://github.com/cometchat/calls-sdk-javascript">
+    Web calling with React, Vue, and vanilla JS
+  </Card>
+  <Card title="Android" icon="github" href="https://github.com/cometchat/calls-sdk-android">
+    Native Android with Kotlin/Java
+  </Card>
+  <Card title="iOS" icon="github" href="https://github.com/cometchat/calls-sdk-ios">
+    Native iOS with Swift
+  </Card>
+  <Card title="React Native" icon="github" href="https://github.com/cometchat/calls-sdk-react-native">
+    Cross-platform mobile app
+  </Card>
+  <Card title="Flutter" icon="github" href="https://github.com/cometchat/calls-sdk-flutter">
+    Cross-platform with Dart
+  </Card>
+</CardGroup>
+</div>
+
+<div className="mb-12">
+  <h2 className="text-gray-700 dark:text-white text-2xl font-semibold mb-4">Resources</h2>
+
+<CardGroup cols={2}>
+  <Card title="Platform Overview" icon="list-check" href="/calls/platform/overview">
+    Features, compatibility, and platform comparison
+  </Card>
+  <Card title="Help Center" icon="circle-question" href="https://help.cometchat.com/">
+    Troubleshooting guides and FAQs
+  </Card>
+</CardGroup>
+</div>
+
+</div>