Merge pull request #207 from okto-hq/main

sdk page restructing for onboarding widget

app/components/Navbar.tsx

@@ -51,9 +51,9 @@ export default function NavbarComponent() {
   ];
 
   const sdkOptions = [
-    { href: "/docs/react-sdk", label: "React", subpath: '/getting-started/overview-okto-react', icons: <FaReact /> },
-    { href: "/docs/react-native-sdk", label: "React Native", subpath: '/getting-started/overview-okto-react-native', icons: <TbBrandReactNative /> },
-    { href: "/docs/flutter-sdk", label: "Flutter", subpath: '/getting-started/overview-okto-flutter', icons: <SiFlutter /> },
+    { href: "/docs/react-sdk", label: "React", subpath: '/', icons: <FaReact /> },
+    { href: "/docs/react-native-sdk", label: "React Native", subpath: '/', icons: <TbBrandReactNative /> },
+    { href: "/docs/flutter-sdk", label: "Flutter", subpath: '/', icons: <SiFlutter /> },
     { href: "/docs", label: "Unity", subpath: '/unity-sdk', icons: <FaUnity /> },
   ];
 

content/blogs/building-the-future-with-okto-sdk.mdx

@@ -92,9 +92,9 @@ You can start building with Okto in just **3 simple steps**:
 
 3. **Choose Your Platform:**  
    Select a platform for your application from the various SDKs we offer:  
-   - **[React SDK](https://docs.okto.tech/docs/react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup):** For web applications built with React.  
-   - **[React Native SDK](https://docs.okto.tech/docs/react-native-sdk/getting-started/quickstart-okto-react-native/new-okto-react-setup):** For mobile apps using React Native.  
-   - **[Flutter SDK](https://docs.okto.tech/docs/flutter-sdk/getting-started/quickstart-okto-flutter/new-okto-flutter-setup):** For cross-platform mobile development with Flutter.  
+   - **[React SDK](https://docs.okto.tech/docs/react-sdk/getting-started/new-okto-react-setup):** For web applications built with React.  
+   - **[React Native SDK](https://docs.okto.tech/docs/react-native-sdk/getting-started/new-okto-react-native-setup):** For mobile apps using React Native.  
+   - **[Flutter SDK](https://docs.okto.tech/docs/flutter-sdk/getting-started/new-okto-flutter-setup):** For cross-platform mobile development with Flutter.  
    - **[Unity SDK](https://docs.okto.tech/docs/unity-sdk):** For game developers using Unity.  
 
    Alternatively, you can directly invoke our **[APIs](https://docs.okto.tech/api-docs)** for more flexibility.

content/blogs/getting-started-with-okto.mdx

@@ -96,22 +96,22 @@ Now that you’ve completed the prerequisites, let’s take a closer look at the
 
 If you’re building a web application with React, the <strong>Okto React SDK</strong> is your go-to solution. It streamlines the integration of Web3 functionalities, allowing you to onboard users into the Web3 ecosystem effortlessly. With minimal setup, you can start providing users with a seamless Web3 experience.
 
-1. <strong>Learn More:</strong> [Okto React SDK Overview](https://docs.okto.tech/docs/react-sdk/getting-started/overview-okto-react)
-2. <strong>Quick Start Guide:</strong> [Get Started with Okto React SDK](https://docs.okto.tech/docs/react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup)
+1. <strong>Learn More:</strong> [Okto React SDK Overview](https://docs.okto.tech/docs/react-sdk)
+2. <strong>Quick Start Guide:</strong> [Get Started with Okto React SDK](https://docs.okto.tech/docs/react-sdk/getting-started/new-okto-react-setup)
 
 ### 2. Okto Flutter SDK
 
 For developers using Flutter, the <strong>Okto Flutter SDK</strong> provides a straightforward way to add Web3 features to your app. It’s designed to minimize setup time so you can focus on delivering a smooth and engaging user experience, all while taking advantage of Flutter’s cross-platform capabilities.
 
-1. <strong>Learn More:</strong> [Okto Flutter SDK Overview](https://docs.okto.tech/docs/flutter-sdk/getting-started/overview-okto-flutter)
-2. <strong>Quick Start Guide:</strong> [Get Started with Okto Flutter SDK](https://docs.okto.tech/docs/flutter-sdk/getting-started/quickstart-okto-flutter/new-okto-flutter-setup)
+1. <strong>Learn More:</strong> [Okto Flutter SDK Overview](https://docs.okto.tech/docs/flutter-sdk)
+2. <strong>Quick Start Guide:</strong> [Get Started with Okto Flutter SDK](https://docs.okto.tech/docs/flutter-sdk/getting-started/new-okto-flutter-setup)
 
 ### 3. Okto React Native SDK
 
 Mobile app developers working with React Native will find the <strong>Okto React Native SDK</strong> invaluable. It simplifies the process of integrating Web3 functionalities into your mobile applications, providing users with a smooth Web3 journey from any device.
 
-1. <strong>Learn More:</strong> [Okto React Native SDK Overview](https://docs.okto.tech/react-native-sdk)
-2. <strong>Quick Start Guide:</strong> [Get Started with Okto React Native SDK](https://docs.okto.tech/docs/react-native-sdk/getting-started/quickstart-okto-react-native/new-okto-react-setup)
+1. <strong>Learn More:</strong> [Okto React Native SDK Overview](https://docs.okto.tech/docs/react-native-sdk)
+2. <strong>Quick Start Guide:</strong> [Get Started with Okto React Native SDK](https://docs.okto.tech/docs/react-native-sdk/getting-started/new-okto-react-native-setup)
 
 ### 4. Okto Unity SDK
 

content/docs/flutter-sdk/getting-started/meta.json

@@ -1,7 +1,7 @@
 {
     "title": "Getting Started",
     "pages": [
-        "overview-okto-flutter",
-        "quickstart-okto-flutter"
+        "prerequisites",
+        "new-okto-flutter-setup"
     ]
 }

content/docs/flutter-sdk/index.mdx

@@ -0,0 +1,107 @@
+---
+title: Okto Flutter SDK Documentation
+description: A complete guide to integrating Okto into your Flutter projects.
+full: false
+---
+
+import TechnologyCard from 'app/components/mdx/TechnologyCard';
+import { IoCodeSlashOutline } from "react-icons/io5";
+
+## Introduction to the Okto Flutter SDK
+
+**Okto Flutter SDK** is your all-in-one toolkit for adding Web3 functionality to any Flutter application. With minimal setup time, you can effortlessly onboard your users to the Web3 ecosystem and provide them with a seamless experience.
+<div className="my-6">
+  <TechnologyCard
+    icon={<IoCodeSlashOutline size={"1.5rem"} />}
+    title="GitHub Repository"
+    subtitle="View Source Code"
+    link="https://github.com/okto-hq/okto-sdk-flutter"
+  />
+</div>
+
+## Key Features
+
+- **Out-of-the-Box Chain Support**  
+  Integrate with a wide range of blockchain networks, including:
+  - **EVM Chains**: Ethereum, Polygon, Binance Smart Chain, and other EVM-compatible networks.
+  - **Non-EVM Chains**: Solana and Aptos.
+  - **Upcoming Support**: Cosmos will be supported soon, expanding your app's capabilities further.
+
+
+- **Customizable UI**  
+  Tailor the onboarding experience to fit your app’s design and user flow. The SDK offers various UI components and configurations to progressively onboard users, making it easy to guide them through the Web3 integration process.
+
+
+- **Comprehensive Toolkit**  
+  - **Tokens**: Easily manage token balances, transfers, and other operations.  
+  - **NFTs**: Mint, transfer, and display NFTs without leaving your Flutter codebase.  
+  - **Advanced Contract Interactions**: Execute and interact with smart contracts directly from your app.
+
+- **Multiple Authentication Methods**  
+  Secure user logins with Google OAuth, Email OTP or Phone OTP. Whatever fits your users and use case best.
+
+---
+
+## Navigating the Flutter SDK Docs
+
+Below is an overview of the main sections in our Flutter SDK documentation, guiding you from basic setup to advanced, production-ready features.
+
+### 1. Getting Started
+
+Begin your journey with the Okto Flutter SDK by learning the essentials. This section is perfect for first-time users and covers the initial steps required to get the SDK integrated into your Flutter Project.
+
+
+- [**Prerequisites**](/docs/flutter-sdk/getting-started/prerequisites)  
+  Ensure you have the necessary Flutter environment, Okto API key, and Google OAuth credentials (if required).
+
+- [**Quickstart Guide**](/docs/flutter-sdk/getting-started/new-okto-flutter-setup)  
+  Follow a step-by-step tutorial to install the SDK, configure authentication, and deploy your first Okto-powered app in under 10 minutes.
+
+---
+
+### 2. Advanced SDK Configurations
+
+Discover how to unlock the SDK’s powerful features, from multi-chain wallet management to raw transaction execution.
+
+- [**Chains and Tokens**](/docs/flutter-sdk/advanced-sdk-config/chains-tokens/supported-networks)  
+  Learn how to retrieve network and token information using the Okto SDK.
+
+- [**Authenticate Users**](/docs/flutter-sdk/advanced-sdk-config/authenticate-users/google-oauth/learn)  
+  Implement secure authentication flows—Google OAuth, phone or email OTP, plus session management.
+
+- [**Okto Embedded Wallet**](/docs/flutter-sdk/advanced-sdk-config/okto-embedded-wallet/setup-embedded-wallets/create-embedded-wallets)  
+  Build a robust in-app wallet experience with multi-chain token/NFT support, raw transactions, and custom UI screens.
+
+---
+
+### 3. Example Apps
+
+Learn by examining practical, real-world implementations of the Okto Flutter SDK.
+
+- [**Template App**](/docs/flutter-sdk/example-apps/template-app)  
+  A starter Flutter project showing best practices for authentication, wallet usage, and cross-chain operations.
+
+- [**Example Repos**](/docs/flutter-sdk/example-apps/example-repos)  
+  Check out some of the example repos to see what others have been building using Okto.
+
+---
+
+### 4. Troubleshooting & FAQ
+
+Find solutions to common issues, debug errors, and learn how to get help when needed.
+
+- [**Common Issues and Error Codes**](/docs/flutter-sdk/troubleshooting-faq/sdk-error-warnings)  
+  A comprehensive list of errors, warnings, and their resolutions. 
+
+- [**Contact Us**](/docs/flutter-sdk/troubleshooting-faq/contact-us)  
+  Reach out to our support team for personalized assistance or additional resources.
+
+---
+
+## Get Started
+
+Ready to integrate Okto into your Flutter app? Begin with our [**Getting Started guide**](/docs/flutter-sdk/getting-started/new-okto-flutter-setup) to set up your environment, obtain your Okto API key, and create a simple app. From there, explore advanced features like raw transactions, cross-chain NFT management, or UI customizations.
+
+For additional questions or direct support, check out our [**Contact Us**](/docs/flutter-sdk/troubleshooting-faq/contact-us) page or email us at `[email protected]`.
+
+**Happy Building!**

content/docs/flutter-sdk/meta.json

@@ -1,6 +1,7 @@
 {
     "title": "Flutter",
     "pages": [
+        "index",
         "getting-started",
         "!using-flutter-features",
         "advanced-sdk-config",

content/docs/index.mdx

@@ -65,21 +65,21 @@ Pick the right SDK for your platform and start integrating Web3 features:
       icon={<FaReact size={"3rem"} />}
       title="React"
       subtitle="for web"
-      link="/docs/react-sdk/getting-started/overview-okto-react"
+      link="/docs/react-sdk"
   />
 
   <TechnologyCard
       icon={<TbBrandReactNative size={"3rem"} />}
       title="React Native"
       subtitle="for mobile"
-      link="/docs/react-native-sdk/getting-started/overview-okto-react-native"
+      link="/docs/react-native-sdk"
   />
 
   <TechnologyCard
       icon={<SiFlutter size={"3rem"} />}
       title="Flutter"
       subtitle="for Android and iOS"
-      link="/docs/flutter-sdk/getting-started/overview-okto-flutter"
+      link="/docs/flutter-sdk"
   />
 
   <TechnologyCard 

content/docs/introduction-to-okto/future-sdk-scope.mdx

@@ -13,7 +13,7 @@ Okto is working on creating a seamless connection between the main Okto app and
 
 To link the Okto app profile with the SDK:
 
-1. **Setup SDK**: Integrate the Okto SDK into your application by following the setup instructions provided in the [Okto SDK Documentation](/docs/react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup).  
+1. **Setup SDK**: Integrate the Okto SDK into your application by following the setup instructions provided in the [Okto SDK Documentation](/docs/react-sdk/getting-started/new-okto-react-setup).  
 2. **Authenticate Profile**: Use the SDK to authenticate users and link their profiles with the Okto app. This involves passing user credentials and ensuring secure communication between the app and the SDK.  
 3. **Synchronize Data**: Ensure that user wallet data and profile information are consistently updated across both platforms.
 

content/docs/introduction-to-okto/overview.mdx

@@ -24,21 +24,21 @@ import { IoDocumentOutline } from "react-icons/io5";
       icon={<FaReact size={"3rem"} />}
       title="React"
       subtitle="for web"
-      link="/docs/react-sdk/getting-started/overview-okto-react"
+      link="/docs/react-sdk"
   />
 
   <TechnologyCard
       icon={<TbBrandReactNative size={"3rem"} />}
       title="React Native"
       subtitle="for mobile"
-      link="/docs/react-native-sdk/getting-started/overview-okto-react-native"
+      link="/docs/react-native-sdk"
   />
 
   <TechnologyCard
       icon={<SiFlutter size={"3rem"} />}
       title="Flutter"
       subtitle="for Android and iOS"
-      link="/docs/flutter-sdk/getting-started/overview-okto-flutter"
+      link="/docs/flutter-sdk"
   />
 
   <TechnologyCard 

content/docs/introduction-to-okto/use-cases.mdx

@@ -146,7 +146,7 @@ You run an established Web2 service (e.g., e-commerce, a streaming platform, or
    - Check the [SDK Overview](/docs/sdk-overview) for a breakdown of each supported framework.  
    - Dive into the [API Reference](/api-docs) for details on methods like `transferTokens` and `transferNft`.
 2. **Build a Proof of Concept:**  
-   - Use one of our [quickstart templates](https://github.com/okto-hq/okto-sdk-react-template-app) or read the [React Setup Guide](/docs/react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup).  
+   - Use one of our [quickstart templates](https://github.com/okto-hq/okto-sdk-react-template-app) or read the [React Setup Guide](/docs/react-sdk/getting-started/new-okto-react-setup).  
    - Experiment with a single chain or a single feature to see how Okto simplifies everything.
 3. **Iterate and Expand:**  
    - Add more features (NFT minting, bridging) or more chains. Okto easily scales with you.  

content/docs/overview.mdx

@@ -27,21 +27,21 @@ import { IoDocumentOutline } from "react-icons/io5";
       icon={<FaReact size={"3rem"} />}
       title="React"
       subtitle="for web"
-      link="/docs/react-sdk/getting-started/overview-okto-react"
+      link="/docs/react-sdk"
   />
 
   <TechnologyCard
       icon={<TbBrandReactNative size={"3rem"} />}
       title="React Native"
       subtitle="for mobile"
-      link="/docs/react-native-sdk/getting-started/overview-okto-react-native"
+      link="/docs/react-native-sdk"
   />
 
   <TechnologyCard
       icon={<SiFlutter size={"3rem"} />}
       title="Flutter"
       subtitle="for Android and iOS"
-      link="/docs/flutter-sdk/getting-started/overview-okto-flutter"
+      link="/docs/flutter-sdk"
   />
 
   <TechnologyCard 

content/docs/quickstart/meta.json

@@ -1,9 +1,9 @@
 {
     "title": "Quickstart",
     "pages": [
-        "../react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup",
-        "../react-native-sdk/getting-started/quickstart-okto-react-native/new-okto-react-setup",
-        "../flutter-sdk/getting-started/quickstart-okto-flutter/new-okto-flutter-setup"
+        "../react-sdk/getting-started/new-okto-react-setup",
+        "../react-native-sdk/getting-started/new-okto-react-native-setup",
+        "../flutter-sdk/getting-started/new-okto-flutter-setup"
     ],
     "icon": "Rocket"
 }

content/docs/react-native-sdk/getting-started/meta.json

@@ -1,7 +1,7 @@
 {
   "title": "Getting Started",
   "pages": [
-    "overview-okto-react-native",
-    "quickstart-okto-react-native"
+    "prerequisites",
+    "new-okto-react-native-setup"
   ]
 }