docs feedback, new quickstart

app/components/Navbar.tsx

@@ -52,18 +52,18 @@ export default function NavbarComponent() {
 
   const sdkOptions = [
     { href: "/docs/react-sdk", label: "React", subpath: '/', icons: <FaReact /> },
-    { href: "/docs/react-native-sdk", label: "React Native (Coming Soon)", subpath: '/', icons: <TbBrandReactNative /> },
-    { href: "/docs/flutter-sdk", label: "Flutter (Coming Soon)", subpath: '/', icons: <SiFlutter /> },
-    { href: "/docs", label: "Unity (Coming Soon)", subpath: '/unity-sdk', icons: <FaUnity /> },
+    { href: "/docs/react-native-sdk", label: "React Native", subpath: '/', icons: <TbBrandReactNative /> },
+    // { href: "/docs/flutter-sdk", label: "Flutter (Coming Soon)", subpath: '/', icons: <SiFlutter /> },
+    // { href: "/docs", label: "Unity (Coming Soon)", subpath: '/unity-sdk', icons: <FaUnity /> },
     { href: "/docs/typescript-sdk", label: "Typescript", subpath: '/', icons: <SiTypescript /> },
   ];
 
   const getFrameworkLabel = () => {
     if (pathname.startsWith('/docs/typescript-sdk')) return 'Typescript';
     if (pathname.startsWith('/docs/react-sdk')) return 'React';
     if (pathname.startsWith('/docs/react-native-sdk')) return 'React Native';
-    if (pathname.startsWith('/docs/flutter-sdk')) return 'Flutter';
-    if (pathname.startsWith('/docs/unity-sdk')) return 'Unity';
+    // if (pathname.startsWith('/docs/flutter-sdk')) return 'Flutter';
+    // if (pathname.startsWith('/docs/unity-sdk')) return 'Unity';
     return 'SDKs';
   };
 

app/components/mdx/CollapsibleCallout.tsx

@@ -0,0 +1,80 @@
+"use client";
+import React, { useState } from "react";
+import { ChevronRight, Info, AlertTriangle, Lightbulb, BookOpen } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface CollapsibleCalloutProps {
+  title: string;
+  type?: "info" | "warning" | "tip" | "note";
+  children: React.ReactNode;
+}
+
+const typeStyles: { [key: string]: string } = {
+  info: "border-blue-500/20 bg-blue-50/50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300",
+  warning: "border-yellow-500/20 bg-yellow-50/50 text-yellow-700 dark:border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300",
+  tip: "border-green-500/20 bg-green-50/50 text-green-700 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300",
+  note: "border-gray-500/20 bg-gray-50/50 text-gray-700 dark:border-gray-500/30 dark:bg-gray-500/10 dark:text-gray-300",
+};
+
+const typeIcons = {
+  info: Info,
+  warning: AlertTriangle,
+  tip: Lightbulb,
+  note: BookOpen,
+};
+
+const typeTitles = {
+  info: "Info",
+  warning: "Warning",
+  tip: "Tip",
+  note: "Note",
+};
+
+export default function CollapsibleCallout({
+  title,
+  type = "info",
+  children,
+}: CollapsibleCalloutProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleOpen = () => setIsOpen(!isOpen);
+  const Icon = typeIcons[type];
+
+  return (
+    <div className={cn(
+      "border rounded-lg transition-all duration-200",
+      "my-2 overflow-hidden",
+      `border-${type === 'info' ? 'blue' : type === 'warning' ? 'yellow' : type === 'tip' ? 'green' : 'gray'}-500/20 dark:border-${type === 'info' ? 'blue' : type === 'warning' ? 'yellow' : type === 'tip' ? 'green' : 'gray'}-500/30`
+    )}>
+      <div
+        className={cn(
+          "flex justify-between items-center cursor-pointer py-2 px-3 select-none",
+          typeStyles[type]
+        )}
+        onClick={toggleOpen}
+      >
+        <div className="flex items-center gap-1.5">
+          <ChevronRight 
+            className={cn(
+              "h-3.5 w-3.5 transition-transform duration-200",
+              isOpen && "transform rotate-90"
+            )} 
+          />
+          <Icon className="h-3.5 w-3.5" />
+          <span className="text-sm font-medium">{typeTitles[type]}:</span>
+          <span className="text-sm">{title}</span>
+        </div>
+        <span className="text-xs opacity-60">
+          {isOpen ? "Hide" : "Show"}
+        </span>
+      </div>
+      <div className={cn(
+        "transition-all duration-200 overflow-hidden bg-white dark:bg-zinc-900",
+        isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
+      )}>
+        <div className="px-3 pb-2 text-sm text-zinc-800 dark:text-zinc-200">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/mdx/ExternalLink.tsx

@@ -0,0 +1,27 @@
+"use client";
+import React from "react";
+
+interface ExternalLinkProps {
+  href?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const ExternalLink: React.FC<ExternalLinkProps> = ({ 
+  href = "#", 
+  children, 
+  className = "" 
+}) => {
+  return (
+    <a 
+      href={href} 
+      target="_blank" 
+      rel="noopener noreferrer"
+      className={className}
+    >
+      {children}
+    </a>
+  );
+};
+
+export default ExternalLink;

app/components/mdx/FeatureCard.tsx

@@ -0,0 +1,27 @@
+import { LucideIcon } from "lucide-react";
+
+interface FeatureCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  iconColor?: string;
+}
+
+export default function FeatureCard({
+  icon,
+  title,
+  description,
+  iconColor = "text-blue-500",
+}: FeatureCardProps) {
+  return (
+    <div className="px-4 py-4 rounded-lg border border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 transition-all">
+      <div className="flex flex-col">
+        <div className="flex items-start gap-3">
+          <div className={`${iconColor} flex-shrink-0`}>{icon}</div>
+          <h3 className="text-sm font-bold m-0">{title}</h3>
+        </div>
+        <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400 m-0">{description}</p>
+      </div>
+    </div>
+  );
+}

app/components/mdx/QuickStartBanner.tsx

@@ -1,34 +1,70 @@
 import { FaReact } from "react-icons/fa6";
-import { TbBrandNextjs } from "react-icons/tb";
+import { TbBrandNextjs, TbBrandReactNative } from "react-icons/tb";
 import { SiTypescript } from "react-icons/si";
-import Link from 'next/link';
+import Link from "next/link";
 
 export default function QuickStartBanner() {
   return (
-    <div className="flex items-center justify-between px-4 mb-8 bg-gradient-to-r from-zinc-50 to-zinc-100 dark:from-zinc-900 dark:to-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 transition-all">
-      <div className="flex-1 pr-4">
-        <p className="text-zinc-800 dark:text-zinc-200">
-        Get straight to building your Okto-powered app with our Quickstart Guides.
+    <div className="flex flex-col lg:flex-row items-center justify-between px-6 py-4 mb-8 bg-gradient-to-r from-zinc-50 to-zinc-100 dark:from-zinc-900 dark:to-zinc-800 rounded-lg border-2 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 transition-all shadow-sm">
+      <div className="flex-1 pr-4 mb-6 lg:mb-0">
+        <h2 className="text-xl font-bold text-zinc-800 dark:text-zinc-200 mb-2 mt-2">
+          Quick Start Guides
+        </h2>
+        <p className="text-zinc-600 dark:text-zinc-400 m-0">
+          Get straight to building your Okto-powered app with our Quickstart Guides.
         </p>
       </div>
-      <div className="flex gap-6 items-center">
-        <Link 
-          href="/docs/react-sdk/quickstart/new-okto-react-setup" 
-          className="no-underline p-2 rounded-md border border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
+      <div className="flex gap-6 items-center flex-wrap justify-center">
+        <Link
+          href="/docs/react-sdk/quickstart/new-okto-react-setup"
+          className="relative group no-underline p-3 rounded-md border-2 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
         >
-          <FaReact size={32} className="text-zinc-600 dark:text-zinc-400" />
+          <FaReact
+            size={36}
+            className="text-zinc-600 dark:text-zinc-400 transition-transform transition-colors duration-200 ease-in-out group-hover:scale-110 group-hover:text-[#61dafb]"
+          />
+          <span className="absolute left-1/2 transform -translate-x-1/2 top-full mt-2 w-max px-2 py-1 text-xs text-white bg-zinc-900 dark:bg-zinc-200 dark:text-black rounded-md opacity-0 group-hover:opacity-100 transition-opacity">
+            React Quickstart
+          </span>
         </Link>
-        <Link 
-          href="/docs/react-sdk/quickstart/new-okto-nextjs-setup" 
-          className="no-underline p-2 rounded-md border border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
+
+        <Link
+          href="/docs/react-sdk/quickstart/new-okto-nextjs-setup"
+          className="relative group no-underline p-3 rounded-md border-2 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
         >
-          <TbBrandNextjs size={32} className="text-zinc-600 dark:text-zinc-400" />
+          <TbBrandNextjs
+            size={36}
+            className="text-zinc-600 dark:text-zinc-400 transition-transform transition-colors duration-200 ease-in-out group-hover:scale-110 group-hover:text-black dark:group-hover:text-white"
+          />
+          <span className="absolute left-1/2 transform -translate-x-1/2 top-full mt-2 w-max px-2 py-1 text-xs text-white bg-zinc-900 dark:bg-zinc-200 dark:text-black rounded-md opacity-0 group-hover:opacity-100 transition-opacity">
+            Next.js Quickstart
+          </span>
         </Link>
-        <Link 
-          href="/docs/typescript-sdk/quickstart" 
-          className="no-underline p-2 rounded-md border border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
+
+        <Link
+          href="/docs/react-native-sdk/getting-started/quickstart"
+          className="relative group no-underline p-3 rounded-md border-2 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
+        >
+          <TbBrandReactNative
+            size={36}
+            className="text-zinc-600 dark:text-zinc-400 transition-transform transition-colors duration-200 ease-in-out group-hover:scale-110 group-hover:text-purple-500"
+          />
+          <span className="absolute left-1/2 transform -translate-x-1/2 top-full mt-2 w-max px-2 py-1 text-xs text-white bg-zinc-900 dark:bg-zinc-200 dark:text-black rounded-md opacity-0 group-hover:opacity-100 transition-opacity">
+            React Native Quickstart
+          </span>
+        </Link>
+
+        <Link
+          href="/docs/typescript-sdk/quickstart"
+          className="relative group no-underline p-3 rounded-md border-2 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
         >
-          <SiTypescript size={32} className="text-zinc-600 dark:text-zinc-400" />
+          <SiTypescript
+            size={36}
+            className="text-zinc-600 dark:text-zinc-400 transition-transform transition-colors duration-200 ease-in-out group-hover:scale-110 group-hover:text-[#3178c6]"
+          />
+          <span className="absolute left-1/2 transform -translate-x-1/2 top-full mt-2 w-max px-2 py-1 text-xs text-white bg-zinc-900 dark:bg-zinc-200 dark:text-black rounded-md opacity-0 group-hover:opacity-100 transition-opacity">
+            TypeScript Quickstart
+          </span>
         </Link>
       </div>
     </div>

app/components/mdx/TechnologyCard.tsx

@@ -10,9 +10,16 @@ interface TechnologyCardProps {
     title: string
     subtitle: string
     link: string
+    className?: string
 }
 
-export default function TechnologyCard({ icon, title, subtitle, link }: TechnologyCardProps = {
+export default function TechnologyCard({ 
+    icon, 
+    title, 
+    subtitle, 
+    link,
+    className = ""
+}: TechnologyCardProps = {
     icon: <div className="w-6 h-6 bg-black rounded-full" />,
     title: "Technology",
     subtitle: "for something",
@@ -21,9 +28,9 @@ export default function TechnologyCard({ icon, title, subtitle, link }: Technolo
     return (
         <Link
             href={link}
-            className="block no-underline w-full max-w-sm group"
+            className={`block no-underline w-full max-w-sm group ${className}`}
         >
-            <Card className="hover:bg-[#e7eafd] bg-[#F5F6FE] dark:bg-gray-800 transition-colors duration-300 rounded-xl shadow-sm hover:shadow-md border-none">
+            <Card className="hover:bg-[#e7eafd] bg-[#F5F6FE] dark:bg-gray-800 transition-colors duration-300 rounded-xl shadow-sm hover:shadow-md border-none h-full">
                 <CardContent className="flex items-center justify-between p-4">
                     <div className="flex items-center space-x-4">
                         <div className="p-2 rounded-lg text-[#161616] dark:text-white">
@@ -38,7 +45,7 @@ export default function TechnologyCard({ icon, title, subtitle, link }: Technolo
                             </div>
                         </div>
                     </div>
-                    <ArrowUpRight className="text-[#5166EE] dark:text-[#7C8FFF] shrink-0" /> {/* Added shrink-0 */}
+                    <ArrowUpRight className="text-[#5166EE] dark:text-[#7C8FFF] shrink-0" />
                 </CardContent>
             </Card>
         </Link>

app/global.css

@@ -161,4 +161,9 @@ html {
   src: url('/fonts/FunnelDisplay.ttf') format('ttf');
   font-weight: bold;
   font-style: normal;
+}
+
+/* Add this rule to make the "About Okto" link bold in the sidebar */
+#nd-docs-layout aside a[href="/"] {
+  font-weight: bold;
 }

content/docs/flutter-sdk/meta.json

@@ -1,7 +1,7 @@
 {
     "title": "Flutter (Coming Soon)",
     "pages": [
-        "[About Okto](/)",
+        "[← Back to Home](/)",
         "index",
         "getting-started",
         "authentication",