From ef1a002a034096c6a5dbd9b7bb17bb2c95f34dee Mon Sep 17 00:00:00 2001
From: kubanjaelijaheldred <kubanjaelijah2037@gmail.com>
Date: Fri, 14 Nov 2025 17:41:30 +0300
Subject: [PATCH 1/7]   Created Login Page with Links to ClyCites Submodules
 #25

---
 ClyCites/app/globals.css         |   72 ++
 ClyCites/app/login/page.tsx      |   75 ++
 ClyCites/app/signup/page.tsx     |   72 ++
 ClyCites/app/submodules/page.tsx |   84 +++
 ClyCites/components/Navbar.tsx   |    8 +-
 ClyCites/components/header.tsx   |   17 +-
 package-lock.json                | 1184 ------------------------------
 package.json                     |   16 -
 8 files changed, 320 insertions(+), 1208 deletions(-)
 create mode 100644 ClyCites/app/login/page.tsx
 create mode 100644 ClyCites/app/signup/page.tsx
 create mode 100644 ClyCites/app/submodules/page.tsx
 delete mode 100644 package-lock.json
 delete mode 100644 package.json

diff --git a/ClyCites/app/globals.css b/ClyCites/app/globals.css
index e8d347a..2a2f6f7 100644
--- a/ClyCites/app/globals.css
+++ b/ClyCites/app/globals.css
@@ -6,6 +6,78 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Theme tokens used by Tailwind (bg-background, text-foreground, card, input, etc.) */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 /* Global Reset */
 * {
   margin: 0;
diff --git a/ClyCites/app/login/page.tsx b/ClyCites/app/login/page.tsx
new file mode 100644
index 0000000..9a3cef0
--- /dev/null
+++ b/ClyCites/app/login/page.tsx
@@ -0,0 +1,75 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+
+export default function LoginPage() {
+  const router = useRouter()
+  // Mock login function
+  const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    // In a real app, you would validate credentials here
+    // For now, we'll just redirect to the submodules page
+    router.push('/submodules')
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Or{' '}
+            <Link href="/" className="font-medium text-blue-600 hover:text-blue-500">
+              return to homepage
+            </Link>
+          </p>
+        </div>
+        <Card className="w-full max-w-md">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl font-bold text-center">Welcome back</CardTitle>
+            <CardDescription className="text-center">
+              Enter your email and password to sign in
+            </CardDescription>
+          </CardHeader>
+          <form onSubmit={handleLogin}>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  placeholder="m@example.com"
+                  required
+                  type="email"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="password">Password</Label>
+                  <Link href="/forgot-password" className="text-sm text-blue-600 hover:underline">
+                    Forgot password?
+                  </Link>
+                </div>
+                <Input id="password" required type="password" />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-4">
+              <Button type="submit" className="w-full">
+                Sign in
+              </Button>
+              <div className="text-sm text-center text-gray-600">
+                Don't have an account?{' '}
+                <Link href="/signup" className="text-blue-600 hover:underline">
+                  Sign up
+                </Link>
+              </div>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/ClyCites/app/signup/page.tsx b/ClyCites/app/signup/page.tsx
new file mode 100644
index 0000000..ddf87b4
--- /dev/null
+++ b/ClyCites/app/signup/page.tsx
@@ -0,0 +1,72 @@
+"use client"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export default function SignupPage() {
+  const router = useRouter()
+
+  const handleSignup = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    // Mock signup success, redirect to login
+    router.push("/login")
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-white py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">Create your account</h2>
+          <p className="mt-2 text-sm text-gray-600">
+            Or{" "}
+            <Link href="/login" className="font-medium text-blue-600 hover:text-blue-500">
+              sign in to your account
+            </Link>
+          </p>
+        </div>
+        <Card className="w-full max-w-md">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl font-bold text-center">Sign up</CardTitle>
+            <CardDescription className="text-center">
+              Enter your details to create an account
+            </CardDescription>
+          </CardHeader>
+          <form onSubmit={handleSignup}>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">Full name</Label>
+                <Input id="name" placeholder="Jane Doe" required type="text" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" placeholder="m@example.com" required type="email" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input id="password" required type="password" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">Confirm password</Label>
+                <Input id="confirmPassword" required type="password" />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-4">
+              <Button type="submit" className="w-full">
+                Create account
+              </Button>
+              <div className="text-sm text-center text-gray-600">
+                Already have an account?{" "}
+                <Link href="/login" className="text-blue-600 hover:underline">
+                  Sign in
+                </Link>
+              </div>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/ClyCites/app/submodules/page.tsx b/ClyCites/app/submodules/page.tsx
new file mode 100644
index 0000000..5d0b9ae
--- /dev/null
+++ b/ClyCites/app/submodules/page.tsx
@@ -0,0 +1,84 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import Link from "next/link"
+
+type Submodule = {
+  title: string
+  description: string
+  icon: string
+  href: string
+  color: string
+}
+
+const submodules: Submodule[] = [
+  {
+    title: "🌱 Agriculture E-Market",
+    description: "Access the agricultural marketplace for buying and selling farm produce and inputs.",
+    icon: "🌱",
+    href: "#",
+    color: "bg-green-100 hover:bg-green-200"
+  },
+  {
+    title: "📊 Agric-Assistant",
+    description: "Get AI-powered assistance for your farming needs, from crop selection to pest control.",
+    icon: "📊",
+    href: "#",
+    color: "bg-blue-100 hover:bg-blue-200"
+  },
+  {
+    title: "🧑‍🔬 Expert Portal",
+    description: "Connect with agricultural experts for consultation and advice.",
+    icon: "🧑‍🔬",
+    href: "#",
+    color: "bg-purple-100 hover:bg-purple-200"
+  },
+  {
+    title: "📈 Data & Analytics",
+    description: "Access agricultural data, trends, and analytics to make informed decisions.",
+    icon: "📈",
+    href: "#",
+    color: "bg-yellow-100 hover:bg-yellow-200"
+  }
+]
+
+export default function SubmodulesPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-12">
+          <h1 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
+            Welcome to ClyCites
+          </h1>
+          <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
+            Select a module to get started
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {submodules.map((module, index) => (
+            <Link href={module.href} key={index} className="block h-full">
+              <Card className={`h-full flex flex-col transition-all duration-200 hover:shadow-lg ${module.color} hover:-translate-y-1`}>
+                <CardHeader>
+                  <div className="text-4xl mb-2">{module.icon}</div>
+                  <CardTitle className="text-xl">{module.title}</CardTitle>
+                </CardHeader>
+                <CardContent className="flex-grow">
+                  <CardDescription className="text-gray-700">
+                    {module.description}
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+        
+        <div className="mt-12 text-center">
+          <Link href="/login">
+            <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+              Sign out
+            </button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/ClyCites/components/Navbar.tsx b/ClyCites/components/Navbar.tsx
index 809df9d..3866629 100644
--- a/ClyCites/components/Navbar.tsx
+++ b/ClyCites/components/Navbar.tsx
@@ -195,9 +195,15 @@ const Navbar = () => {
 
       {/* Action Buttons */}
       <div className="flex gap-4">
+        <Link
+          href="/login"
+          className="bg-white border border-blue-600 text-blue-600 hover:bg-blue-50 font-medium py-2 px-4 rounded-md transition-colors"
+        >
+          Log in
+        </Link>
         <button
           type="button"
-          className="ml-4 bg-blue-100 hover:bg-green-700 text-black font-bold py-2 px-4 rounded"
+          className="bg-blue-100 hover:bg-green-700 text-black font-bold py-2 px-4 rounded"
         >
           Get Involved
           <img src="/user.svg" alt="icon" className="inline-block w-4 h-4 ml-2" />
diff --git a/ClyCites/components/header.tsx b/ClyCites/components/header.tsx
index 8f0882f..af41417 100644
--- a/ClyCites/components/header.tsx
+++ b/ClyCites/components/header.tsx
@@ -21,6 +21,7 @@ export function Header() {
   const [isScrolled, setIsScrolled] = React.useState(false)
   const { setTheme, theme } = useTheme()
   const [showGetStartedDialog, setShowGetStartedDialog] = React.useState(false)
+  const [mounted, setMounted] = React.useState(false)
 
   React.useEffect(() => {
     const handleScroll = () => {
@@ -30,8 +31,12 @@ export function Header() {
     return () => window.removeEventListener("scroll", handleScroll)
   }, [])
 
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
   return (
-    <header className={cn("w-full fixed top-0 z-50 bg-white dark:bg-gray-900 border-b shadow-sm")}>
+    <header className={cn("w-full fixed top-0 z-50 bg-white dark:bg-gray-900 border-b shadow-sm")}> 
       {/* Top Bar */}
       <div className="bg-emerald-900 dark:bg-emerald-950 text-white py-1.5 px-3">
         <div className="container flex items-center justify-between text-sm">
@@ -46,7 +51,7 @@ export function Header() {
               Login
             </Link>
             <span className="text-emerald-500">|</span>
-            <Link href="/register" className="text-emerald-100 hover:text-white transition-colors">
+            <Link href="/signup" className="text-emerald-100 hover:text-white transition-colors">
               Register
             </Link>
           </div>
@@ -94,11 +99,9 @@ export function Header() {
                   className="rounded-full"
                   onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
                 >
-                  {theme === "dark" ? (
-                    <Sun className="h-4 w-4 text-yellow-500" />
-                  ) : (
-                    <Moon className="h-4 w-4 text-gray-700" />
-                  )}
+                  {/* Render both icons and toggle visibility via CSS to avoid SSR/CSR mismatch */}
+                  <Sun className="h-4 w-4 text-yellow-500 hidden dark:block" />
+                  <Moon className="h-4 w-4 text-gray-700 block dark:hidden" />
                   <span className="sr-only">Toggle theme</span>
                 </Button>
               </TooltipTrigger>
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 6cb84cc..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,1184 +0,0 @@
-{
-  "name": "ClyCites-Frontend",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "@radix-ui/react-alert-dialog": "^1.1.11",
-        "@radix-ui/react-aspect-ratio": "^1.1.4",
-        "@radix-ui/react-avatar": "^1.1.7",
-        "@radix-ui/react-dialog": "^1.1.11",
-        "@radix-ui/react-dropdown-menu": "^2.1.12",
-        "@radix-ui/react-label": "^2.1.4",
-        "@radix-ui/react-popover": "^1.1.11",
-        "@radix-ui/react-select": "^2.2.2",
-        "@radix-ui/react-switch": "^1.2.2",
-        "@radix-ui/react-tabs": "^1.1.9",
-        "@radix-ui/react-toast": "^1.2.11",
-        "@radix-ui/react-tooltip": "^1.2.4"
-      }
-    },
-    "node_modules/@floating-ui/core": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
-      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.9"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.6.13",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
-      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.9"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
-      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
-      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
-      "license": "MIT"
-    },
-    "node_modules/@radix-ui/number": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
-      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
-      "license": "MIT"
-    },
-    "node_modules/@radix-ui/primitive": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
-      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
-      "license": "MIT"
-    },
-    "node_modules/@radix-ui/react-alert-dialog": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.11.tgz",
-      "integrity": "sha512-4KfkwrFnAw3Y5Jeoq6G+JYSKW0JfIS3uDdFC/79Jw9AsMayZMizSSMxk1gkrolYXsa/WzbbDfOA7/D8N5D+l1g==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dialog": "1.1.11",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-slot": "1.2.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-arrow": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.4.tgz",
-      "integrity": "sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-aspect-ratio": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.4.tgz",
-      "integrity": "sha512-ie2mUDtM38LBqVU+Xn+GIY44tWM5yVbT5uXO+th85WZxUUsgEdWNNZWecqqGzkQ4Af+Fq1mYT6TyQ/uUf5gfcw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-avatar": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.7.tgz",
-      "integrity": "sha512-V7ODUt4mUoJTe3VUxZw6nfURxaPALVqmDQh501YmaQsk3D8AZQrOPRnfKn4H7JGDLBc0KqLhT94H79nV88ppNg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-is-hydrated": "0.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-collection": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.4.tgz",
-      "integrity": "sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-slot": "1.2.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-context": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
-      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.11.tgz",
-      "integrity": "sha512-yI7S1ipkP5/+99qhSI6nthfo/tR6bL6Zgxi/+1UO6qPa6UeM6nlafWcQ65vB4rU2XjgjMfMhI3k9Y5MztA62VQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.7",
-        "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.4",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-portal": "1.1.6",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-slot": "1.2.0",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-direction": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
-      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.7.tgz",
-      "integrity": "sha512-j5+WBUdhccJsmH5/H0K6RncjDtoALSEr6jbkaZu+bjw6hOPOhHycr6vEUujl+HBK8kjUfWcoCJXxP6e4lUlMZw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-escape-keydown": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-dropdown-menu": {
-      "version": "2.1.12",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.12.tgz",
-      "integrity": "sha512-VJoMs+BWWE7YhzEQyVwvF9n22Eiyr83HotCVrMQzla/OwRovXCgah7AcaEr4hMNj4gJxSdtIbcHGvmJXOoJVHA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-menu": "2.1.12",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
-      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.4.tgz",
-      "integrity": "sha512-r2annK27lIW5w9Ho5NyQgqs0MmgZSTIKXWpVCJaLC1q2kZrZkcqnmHkCHMEmv8XLvsLlurKMPT+kbKkRkm/xVA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-use-callback-ref": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-id": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
-      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-label": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.4.tgz",
-      "integrity": "sha512-wy3dqizZnZVV4ja0FNnUhIWNwWdoldXrneEyUcVtLYDAt8ovGS4ridtMAOGgXBBIfggL4BOveVWsjXDORdGEQg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-menu": {
-      "version": "2.1.12",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.12.tgz",
-      "integrity": "sha512-+qYq6LfbiGo97Zz9fioX83HCiIYYFNs8zAsVCMQrIakoNYylIzWuoD/anAD3UzvvR6cnswmfRFJFq/zYYq/k7Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.4",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.7",
-        "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.4",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.4",
-        "@radix-ui/react-portal": "1.1.6",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-roving-focus": "1.1.7",
-        "@radix-ui/react-slot": "1.2.0",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-popover": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.11.tgz",
-      "integrity": "sha512-yFMfZkVA5G3GJnBgb2PxrrcLKm1ZLWXrbYVgdyTl//0TYEIHS9LJbnyz7WWcZ0qCq7hIlJZpRtxeSeIG5T5oJw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.7",
-        "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.4",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.4",
-        "@radix-ui/react-portal": "1.1.6",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-slot": "1.2.0",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-popper": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.4.tgz",
-      "integrity": "sha512-3p2Rgm/a1cK0r/UVkx5F/K9v/EplfjAeIFCGOPYPO4lZ0jtg4iSQXt/YGTSLWaf4x7NG6Z4+uKFcylcTZjeqDA==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.1.4",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-layout-effect": "1.1.1",
-        "@radix-ui/react-use-rect": "1.1.1",
-        "@radix-ui/react-use-size": "1.1.1",
-        "@radix-ui/rect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-portal": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.6.tgz",
-      "integrity": "sha512-XmsIl2z1n/TsYFLIdYam2rmFwf9OC/Sh2avkbmVMDuBZIe7hSpM0cYnWPAo7nHOVx8zTuwDZGByfcqLdnzp3Vw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-presence": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
-      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-primitive": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.0.tgz",
-      "integrity": "sha512-/J/FhLdK0zVcILOwt5g+dH4KnkonCtkVJsa2G6JmvbbtZfBEI1gMsO3QMjseL4F/SwfAMt1Vc/0XKYKq+xJ1sw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-slot": "1.2.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-roving-focus": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.7.tgz",
-      "integrity": "sha512-C6oAg451/fQT3EGbWHbCQjYTtbyjNO1uzQgMzwyivcHT3GKNEmu1q3UuREhN+HzHAVtv3ivMVK08QlC+PkYw9Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.4",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-select": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.2.tgz",
-      "integrity": "sha512-HjkVHtBkuq+r3zUAZ/CvNWUGKPfuicGDbgtZgiQuFmNcV5F+Tgy24ep2nsAW2nFgvhGPJVqeBZa6KyVN0EyrBA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/number": "1.1.1",
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.4",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.7",
-        "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.4",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.4",
-        "@radix-ui/react-portal": "1.1.6",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-slot": "1.2.0",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1",
-        "@radix-ui/react-use-previous": "1.1.1",
-        "@radix-ui/react-visually-hidden": "1.2.0",
-        "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
-      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-switch": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.2.tgz",
-      "integrity": "sha512-7Z8n6L+ifMIIYZ83f28qWSceUpkXuslI2FJ34+kDMTiyj91ENdpdQ7VCidrzj5JfwfZTeano/BnGBbu/jqa5rQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-use-previous": "1.1.1",
-        "@radix-ui/react-use-size": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-tabs": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.9.tgz",
-      "integrity": "sha512-KIjtwciYvquiW/wAFkELZCVnaNLBsYNhTNcvl+zfMAbMhRkcvNuCLXDDd22L0j7tagpzVh/QwbFpwAATg7ILPw==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-roving-focus": "1.1.7",
-        "@radix-ui/react-use-controllable-state": "1.2.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-toast": {
-      "version": "1.2.11",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.11.tgz",
-      "integrity": "sha512-Ed2mlOmT+tktOsu2NZBK1bCSHh/uqULu1vWOkpQTVq53EoOuZUZw7FInQoDB3uil5wZc2oe0XN9a7uVZB7/6AQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.4",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.7",
-        "@radix-ui/react-portal": "1.1.6",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1",
-        "@radix-ui/react-visually-hidden": "1.2.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-tooltip": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.4.tgz",
-      "integrity": "sha512-DyW8VVeeMSSLFvAmnVnCwvI3H+1tpJFHT50r+tdOoMse9XqYDBCcyux8u3G2y+LOpt7fPQ6KKH0mhs+ce1+Z5w==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.7",
-        "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.4",
-        "@radix-ui/react-portal": "1.1.6",
-        "@radix-ui/react-presence": "1.1.4",
-        "@radix-ui/react-primitive": "2.1.0",
-        "@radix-ui/react-slot": "1.2.0",
-        "@radix-ui/react-use-controllable-state": "1.2.2",
-        "@radix-ui/react-visually-hidden": "1.2.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
-      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
-      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-effect-event": "0.0.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-effect-event": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
-      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
-      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-callback-ref": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-is-hydrated": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
-      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.5.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
-      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-previous": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
-      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-rect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
-      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/rect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-size": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
-      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-visually-hidden": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.0.tgz",
-      "integrity": "sha512-rQj0aAWOpCdCMRbI6pLQm8r7S2BM3YhTa0SzOYD55k+hJA8oo9J+H+9wLM9oMlZWOX/wJWPTzfDfmZkf7LvCfg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/rect": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
-      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
-      "license": "MIT"
-    },
-    "node_modules/aria-hidden": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
-      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/detect-node-es": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
-      "license": "MIT"
-    },
-    "node_modules/get-nonce": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
-      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/react": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
-      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
-      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "scheduler": "^0.26.0"
-      },
-      "peerDependencies": {
-        "react": "^19.1.0"
-      }
-    },
-    "node_modules/react-remove-scroll": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
-      "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
-      "license": "MIT",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.7",
-        "react-style-singleton": "^2.2.3",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.3",
-        "use-sidecar": "^1.1.3"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
-      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
-      "license": "MIT",
-      "dependencies": {
-        "react-style-singleton": "^2.2.2",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-style-singleton": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
-      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
-      "license": "MIT",
-      "dependencies": {
-        "get-nonce": "^1.0.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-    },
-    "node_modules/use-callback-ref": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
-      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-sidecar": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
-      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
-      "license": "MIT",
-      "dependencies": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-sync-external-store": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
-      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    }
-  }
-}
diff --git a/package.json b/package.json
deleted file mode 100644
index 9c3fd43..0000000
--- a/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.11",
-    "@radix-ui/react-aspect-ratio": "^1.1.4",
-    "@radix-ui/react-avatar": "^1.1.7",
-    "@radix-ui/react-dialog": "^1.1.11",
-    "@radix-ui/react-dropdown-menu": "^2.1.12",
-    "@radix-ui/react-label": "^2.1.4",
-    "@radix-ui/react-popover": "^1.1.11",
-    "@radix-ui/react-select": "^2.2.2",
-    "@radix-ui/react-switch": "^1.2.2",
-    "@radix-ui/react-tabs": "^1.1.9",
-    "@radix-ui/react-toast": "^1.2.11",
-    "@radix-ui/react-tooltip": "^1.2.4"
-  }
-}

From b7a29ca6c9f1c3a522d816aabc956c2913ae5ea4 Mon Sep 17 00:00:00 2001
From: kubanjaelijaheldred <kubanjaelijah2037@gmail.com>
Date: Fri, 14 Nov 2025 18:09:30 +0300
Subject: [PATCH 2/7] Auth: add /signup and fix header hydration; Styling: add
 shadcn theme tokens; Homepage: new shadcn SearchBar and /search results page

---
 ClyCites/app/search/page.tsx   |  39 +++++++++++++
 ClyCites/components/Hero.tsx   |   4 ++
 ClyCites/components/Search.tsx | 103 +++++++++++++++++++++++++++++++++
 3 files changed, 146 insertions(+)
 create mode 100644 ClyCites/app/search/page.tsx
 create mode 100644 ClyCites/components/Search.tsx

diff --git a/ClyCites/app/search/page.tsx b/ClyCites/app/search/page.tsx
new file mode 100644
index 0000000..8d8979a
--- /dev/null
+++ b/ClyCites/app/search/page.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link"
+
+export default function SearchResults({
+  searchParams,
+}: {
+  searchParams: { q?: string }
+}) {
+  const q = (searchParams?.q || "").toString()
+
+  return (
+    <div className="container mx-auto px-4 py-12">
+      <div className="max-w-3xl">
+        <h1 className="text-3xl font-bold text-gray-900">Search results</h1>
+        <p className="mt-2 text-gray-600">
+          {q ? (
+            <>Showing results for <span className="font-semibold text-gray-900">“{q}”</span></>
+          ) : (
+            <>Type a query in the search bar on the homepage.</>
+          )}
+        </p>
+
+        <div className="mt-8 space-y-4">
+          {!q && (
+            <div className="text-gray-500">No query provided.</div>
+          )}
+          {q && (
+            <div className="rounded-lg border bg-card p-6">
+              <div className="text-sm text-muted-foreground">Demo</div>
+              <div className="mt-1 text-gray-900">You searched for: {q}</div>
+              <div className="mt-4">
+                <Link href="/" className="text-emerald-600 hover:underline">Back to home</Link>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/ClyCites/components/Hero.tsx b/ClyCites/components/Hero.tsx
index 67911b2..cece782 100644
--- a/ClyCites/components/Hero.tsx
+++ b/ClyCites/components/Hero.tsx
@@ -6,6 +6,7 @@ import { motion, useAnimation } from "framer-motion"
 import { useInView } from "react-intersection-observer"
 
 import { Button } from "@/components/ui/button"
+import { SearchBar } from "@/components/Search"
 
 export function Hero() {
   const { ref, inView } = useInView({
@@ -135,6 +136,9 @@ export function Hero() {
               digitally. It helps farmers to market and sell their farm produces digitally at the comfort of their farm
               and communicate with potential customers.
             </motion.p>
+            <motion.div variants={itemVariants} className="mt-6 max-w-xl">
+              <SearchBar />
+            </motion.div>
             <motion.div variants={itemVariants} className="mt-10 flex flex-col sm:flex-row gap-4">
               <Button asChild size="lg" className="rounded-full group">
                 <Link href="/get-started">
diff --git a/ClyCites/components/Search.tsx b/ClyCites/components/Search.tsx
new file mode 100644
index 0000000..cf9bf2c
--- /dev/null
+++ b/ClyCites/components/Search.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { Search, X } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+
+type Suggestion = {
+  label: string
+  value: string
+}
+
+const defaultSuggestions: Suggestion[] = [
+  { label: "Maize prices in Kampala", value: "maize prices kampala" },
+  { label: "Nearest produce markets", value: "markets near me" },
+  { label: "Farming news", value: "news" },
+]
+
+export function SearchBar({
+  placeholder = "Search products, markets, or news...",
+  onSearch,
+}: {
+  placeholder?: string
+  onSearch?: (q: string) => void
+}) {
+  const [query, setQuery] = React.useState("")
+  const [open, setOpen] = React.useState(false)
+  const router = useRouter()
+
+  const handleSubmit = (e?: React.FormEvent) => {
+    e?.preventDefault()
+    const q = query.trim()
+    if (!q) return
+    onSearch ? onSearch(q) : console.log("search:", q)
+    // Navigate to results page for testing
+    router.push(`/search?q=${encodeURIComponent(q)}`)
+    setOpen(false)
+  }
+
+  const clear = () => setQuery("")
+
+  const filtered = defaultSuggestions.filter((s) =>
+    s.label.toLowerCase().includes(query.toLowerCase())
+  )
+
+  return (
+    <div className="w-full">
+      <form onSubmit={handleSubmit} className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <Input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onFocus={() => setOpen(true)}
+            placeholder={placeholder}
+            aria-label="Search"
+            className="h-12 bg-white text-gray-900 placeholder:text-gray-400 pr-10"
+          />
+          {query && (
+            <button
+              type="button"
+              aria-label="Clear search"
+              onClick={clear}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+        <Button type="submit" size="lg" className="h-12 px-5 rounded-full">
+          <Search className="mr-2 h-4 w-4" />
+          Search
+        </Button>
+      </form>
+
+      {/* Suggestions (optional) */}
+      {open && (
+        <div className="mt-2">
+          <Command className="rounded-lg border bg-white">
+            <CommandInput placeholder="Type to filter suggestions..." value={query} onValueChange={setQuery} />
+            <CommandList>
+              <CommandEmpty>No suggestions found.</CommandEmpty>
+              <CommandGroup heading="Suggestions">
+                {filtered.map((s) => (
+                  <CommandItem
+                    key={s.value}
+                    onSelect={() => {
+                      setQuery(s.value)
+                      handleSubmit()
+                    }}
+                  >
+                    {s.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </div>
+      )}
+    </div>
+  )
+}

From e18b488fea6a5ade153bb3c2cd9fa0e786c5e8cd Mon Sep 17 00:00:00 2001
From: kubanjaelijaheldred <kubanjaelijah2037@gmail.com>
Date: Fri, 14 Nov 2025 18:19:22 +0300
Subject: [PATCH 3/7] Homepage: standardize container padding and alignment
 (Hero, Impact, BusinessModel, CTA) for consistent left/right spacing; ensure
 responsiveness

---
 ClyCites/components/Hero.tsx           | 2 +-
 ClyCites/components/business-model.tsx | 2 +-
 ClyCites/components/impact.tsx         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ClyCites/components/Hero.tsx b/ClyCites/components/Hero.tsx
index cece782..6b04058 100644
--- a/ClyCites/components/Hero.tsx
+++ b/ClyCites/components/Hero.tsx
@@ -107,7 +107,7 @@ export function Hero() {
         </svg>
       </div>
 
-      <div className="relative z-10 mt-0 md:mt-[-120px] px-4 md:px-8">
+      <div className="relative z-10 mt-0 md:mt-[-120px] container mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           ref={ref}
           initial="hidden"
diff --git a/ClyCites/components/business-model.tsx b/ClyCites/components/business-model.tsx
index 4b8205c..902b688 100644
--- a/ClyCites/components/business-model.tsx
+++ b/ClyCites/components/business-model.tsx
@@ -348,7 +348,7 @@ export function BusinessModel() {
 
   return (
     <section className="py-20 sm:py-32 bg-gradient-to-br from-background to-muted">
-      <div className="container px-4 sm:px-6 lg:px-8">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           ref={ref}
           initial="hidden"
diff --git a/ClyCites/components/impact.tsx b/ClyCites/components/impact.tsx
index 764ce57..a3244b9 100644
--- a/ClyCites/components/impact.tsx
+++ b/ClyCites/components/impact.tsx
@@ -145,7 +145,7 @@ export function Impact() {
 
   return (
     <section className="py-20 sm:py-32 bg-gradient-to-br from-emerald-50 to-white dark:from-emerald-950 dark:to-gray-950">
-      <div className="container px-4 sm:px-6 lg:px-8">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           ref={ref}
           initial="hidden"

From c02a9ebd6cc2e54edf676858100e24d08b18dcab Mon Sep 17 00:00:00 2001
From: kubanjaelijaheldred <kubanjaelijah2037@gmail.com>
Date: Fri, 14 Nov 2025 19:17:38 +0300
Subject: [PATCH 4/7] i18n: add locales (en, fr, es), I18nProvider,
 LanguageSwitcher; wire provider in layout; translate header and search
 placeholder; fix program page client directive

---
 ClyCites/app/layout.tsx                  |  9 ++++--
 ClyCites/app/program/page.tsx            |  1 +
 ClyCites/components/I18nProvider.tsx     |  8 +++++
 ClyCites/components/LanguageSwitcher.tsx | 40 ++++++++++++++++++++++++
 ClyCites/components/Search.tsx           |  6 ++--
 ClyCites/components/cta.tsx              |  2 +-
 ClyCites/components/header.tsx           | 16 ++++++----
 ClyCites/locales/en/translation.json     | 12 +++++++
 ClyCites/locales/es/translation.json     | 12 +++++++
 ClyCites/locales/fr/translation.json     | 12 +++++++
 10 files changed, 106 insertions(+), 12 deletions(-)
 create mode 100644 ClyCites/components/I18nProvider.tsx
 create mode 100644 ClyCites/components/LanguageSwitcher.tsx
 create mode 100644 ClyCites/locales/en/translation.json
 create mode 100644 ClyCites/locales/es/translation.json
 create mode 100644 ClyCites/locales/fr/translation.json

diff --git a/ClyCites/app/layout.tsx b/ClyCites/app/layout.tsx
index a53b6ed..d553ee9 100644
--- a/ClyCites/app/layout.tsx
+++ b/ClyCites/app/layout.tsx
@@ -5,6 +5,7 @@ import "./globals.css"
 import { Header } from "@/components/header"
 import { Footer } from "@/components/Footer"
 import { ThemeProvider } from "@/components/theme-provider"
+import { I18nProvider } from "@/components/I18nProvider"
 
 export const metadata: Metadata = {
   title: "ClyCites - Digital Agriculture Platform",
@@ -20,9 +21,11 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className="min-h-screen bg-background font-sans antialiased">
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
-          <Header />
-          <main className="relative overflow-hidden pt-[104px]">{children}</main>
-          <Footer />
+          <I18nProvider>
+            <Header />
+            <main className="relative overflow-hidden pt-[104px]">{children}</main>
+            <Footer />
+          </I18nProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/ClyCites/app/program/page.tsx b/ClyCites/app/program/page.tsx
index b58faf2..e190d09 100644
--- a/ClyCites/app/program/page.tsx
+++ b/ClyCites/app/program/page.tsx
@@ -1,3 +1,4 @@
+"use client"
 import Image from "next/image"
 import Link from "next/link"
 import { ArrowRight, Calendar, MapPin, Users, Award, BookOpen, Sparkles } from "lucide-react"
diff --git a/ClyCites/components/I18nProvider.tsx b/ClyCites/components/I18nProvider.tsx
new file mode 100644
index 0000000..e4201bc
--- /dev/null
+++ b/ClyCites/components/I18nProvider.tsx
@@ -0,0 +1,8 @@
+"use client"
+import React from "react"
+import { I18nextProvider } from "react-i18next"
+import i18n from "@/i18n"
+
+export function I18nProvider({ children }: { children: React.ReactNode }) {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+}
diff --git a/ClyCites/components/LanguageSwitcher.tsx b/ClyCites/components/LanguageSwitcher.tsx
new file mode 100644
index 0000000..a09f99c
--- /dev/null
+++ b/ClyCites/components/LanguageSwitcher.tsx
@@ -0,0 +1,40 @@
+"use client"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+
+const languages = [
+  { code: "en", label: "English" },
+  { code: "fr", label: "Français" },
+  { code: "es", label: "Español" }
+]
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation()
+  const [current, setCurrent] = useState(i18n.language || "en")
+
+  const change = async (lng: string) => {
+    await i18n.changeLanguage(lng)
+    setCurrent(lng)
+  }
+
+  const currentLabel = languages.find(l => l.code === current)?.label ?? "English"
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="rounded-full">
+          {currentLabel}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {languages.map((l) => (
+          <DropdownMenuItem key={l.code} onClick={() => change(l.code)}>
+            {l.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/ClyCites/components/Search.tsx b/ClyCites/components/Search.tsx
index cf9bf2c..d470b82 100644
--- a/ClyCites/components/Search.tsx
+++ b/ClyCites/components/Search.tsx
@@ -6,6 +6,7 @@ import { Search, X } from "lucide-react"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+import { useTranslation } from "react-i18next"
 
 type Suggestion = {
   label: string
@@ -19,12 +20,13 @@ const defaultSuggestions: Suggestion[] = [
 ]
 
 export function SearchBar({
-  placeholder = "Search products, markets, or news...",
+  placeholder,
   onSearch,
 }: {
   placeholder?: string
   onSearch?: (q: string) => void
 }) {
+  const { t } = useTranslation()
   const [query, setQuery] = React.useState("")
   const [open, setOpen] = React.useState(false)
   const router = useRouter()
@@ -53,7 +55,7 @@ export function SearchBar({
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onFocus={() => setOpen(true)}
-            placeholder={placeholder}
+            placeholder={placeholder ?? t("search.placeholder")}
             aria-label="Search"
             className="h-12 bg-white text-gray-900 placeholder:text-gray-400 pr-10"
           />
diff --git a/ClyCites/components/cta.tsx b/ClyCites/components/cta.tsx
index 54dcce7..2107a86 100644
--- a/ClyCites/components/cta.tsx
+++ b/ClyCites/components/cta.tsx
@@ -77,7 +77,7 @@ export function CTA() {
 
   return (
     <section className={`py-20 sm:py-32 ${currentTheme.bg} duration-500`}>
-      <div className="container px-4 sm:px-6 lg:px-8">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <div className="absolute top-4 right-4 sm:top-8 sm:right-8">
           <Button
             variant="outline"
diff --git a/ClyCites/components/header.tsx b/ClyCites/components/header.tsx
index af41417..3123662 100644
--- a/ClyCites/components/header.tsx
+++ b/ClyCites/components/header.tsx
@@ -15,6 +15,8 @@ import { MainNav } from "@/components/main-nav"
 import { SearchCommand } from "@/components/search-command"
 import { Badge } from "@/components/ui/badge"
 import { GetStartedDialog } from "@/components/get-started-dialog"
+import { useTranslation } from "react-i18next"
+import { LanguageSwitcher } from "@/components/LanguageSwitcher"
 
 export function Header() {
   const pathname = usePathname()
@@ -22,6 +24,7 @@ export function Header() {
   const { setTheme, theme } = useTheme()
   const [showGetStartedDialog, setShowGetStartedDialog] = React.useState(false)
   const [mounted, setMounted] = React.useState(false)
+  const { t } = useTranslation()
 
   React.useEffect(() => {
     const handleScroll = () => {
@@ -48,11 +51,11 @@ export function Header() {
           </div>
           <div className="flex items-center space-x-4">
             <Link href="/login" className="text-emerald-100 hover:text-white transition-colors">
-              Login
+              {t("header.login")}
             </Link>
             <span className="text-emerald-500">|</span>
             <Link href="/signup" className="text-emerald-100 hover:text-white transition-colors">
-              Register
+              {t("header.register")}
             </Link>
           </div>
         </div>
@@ -105,7 +108,7 @@ export function Header() {
                   <span className="sr-only">Toggle theme</span>
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Change theme</TooltipContent>
+              <TooltipContent>{t("header.changeTheme")}</TooltipContent>
             </Tooltip>
 
             <Tooltip>
@@ -115,17 +118,18 @@ export function Header() {
                   <span className="sr-only">Notifications</span>
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Notifications</TooltipContent>
+              <TooltipContent>{t("header.notifications")}</TooltipContent>
             </Tooltip>
+            <LanguageSwitcher />
             <div className="hidden md:flex items-center gap-4">
               <Button asChild variant="outline" className="rounded-full">
-                <Link href="/login">Login</Link>
+                <Link href="/login">{t("header.login")}</Link>
               </Button>
               <Button
                 className="rounded-full bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600"
                 onClick={() => setShowGetStartedDialog(true)}
               >
-                Get Started
+                {t("header.getStarted")}
               </Button>
             </div>
           </TooltipProvider>
diff --git a/ClyCites/locales/en/translation.json b/ClyCites/locales/en/translation.json
new file mode 100644
index 0000000..eb751c9
--- /dev/null
+++ b/ClyCites/locales/en/translation.json
@@ -0,0 +1,12 @@
+{
+  "header": {
+    "login": "Login",
+    "register": "Register",
+    "changeTheme": "Change theme",
+    "notifications": "Notifications",
+    "getStarted": "Get Started"
+  },
+  "search": {
+    "placeholder": "Search products, markets, or news..."
+  }
+}
diff --git a/ClyCites/locales/es/translation.json b/ClyCites/locales/es/translation.json
new file mode 100644
index 0000000..1b2765b
--- /dev/null
+++ b/ClyCites/locales/es/translation.json
@@ -0,0 +1,12 @@
+{
+  "header": {
+    "login": "Iniciar sesión",
+    "register": "Registrarse",
+    "changeTheme": "Cambiar tema",
+    "notifications": "Notificaciones",
+    "getStarted": "Comenzar"
+  },
+  "search": {
+    "placeholder": "Buscar productos, mercados o noticias..."
+  }
+}
diff --git a/ClyCites/locales/fr/translation.json b/ClyCites/locales/fr/translation.json
new file mode 100644
index 0000000..4060b64
--- /dev/null
+++ b/ClyCites/locales/fr/translation.json
@@ -0,0 +1,12 @@
+{
+  "header": {
+    "login": "Se connecter",
+    "register": "S'inscrire",
+    "changeTheme": "Changer le thème",
+    "notifications": "Notifications",
+    "getStarted": "Commencer"
+  },
+  "search": {
+    "placeholder": "Rechercher des produits, marchés ou actualités..."
+  }
+}

From 1174768c5d4dbf6f3678d62ba99b1a5a6ef39458 Mon Sep 17 00:00:00 2001
From: kubanjaelijaheldred <kubanjaelijah2037@gmail.com>
Date: Sat, 15 Nov 2025 10:10:44 +0300
Subject: [PATCH 5/7] docs: update README - remove env variables and reflect
 current frontend structure

- Remove environment variables section as requested in issue #21
- Update project structure to match actual app directory layout
- Enhance tech stack with accurate versions and dependencies
- Simplify installation and setup instructions
- Update table of contents and available scripts sections
---
 README.md | 161 +++++++++++++++++++++---------------------------------
 1 file changed, 61 insertions(+), 100 deletions(-)

diff --git a/README.md b/README.md
index 6b9c804..2225d95 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,6 @@
 - [Tech Stack](#tech-stack)
 - [Project Structure](#project-structure)
 - [Getting Started](#getting-started)
-- [Environment Variables](#environment-variables)
 - [Available Scripts](#available-scripts)
 - [Contributing](#contributing)
 - [License](#license)
@@ -57,22 +56,34 @@ The platform addresses critical challenges in the agricultural sector by providi
 
 ### Styling & UI
 - **Tailwind CSS 3.4.17** - Utility-first CSS framework
-- **Radix UI** - Accessible component primitives
+- **Radix UI** - Accessible component primitives (multiple components)
 - **Framer Motion 12.9.1** - Animation library
-- **Lucide React** - Icon library
-- **next-themes** - Theme switching
+- **Lucide React 0.503.0** - Icon library
+- **next-themes 0.4.6** - Theme switching
+- **Tailwind CSS Animate** - Animation utilities
+- **Tailwind Merge 3.2.0** - Utility class merging
+- **Class Variance Authority 0.7.1** - Component variant styling
+- **Clsx 2.1.1** - Conditional class names
+
+### Form & Data Handling
+- **React Hook Form** - Form handling (via dependencies)
+- **Zod** - Schema validation (via dependencies)
+- **Sonner 1.5.0** - Toast notifications
+- **Recharts 2.15.3** - Chart components
+- **React Day Picker 9.6.7** - Date picker component
+- **Embla Carousel 8.6.0** - Carousel components
+
+### Internationalization & Utilities
+- **i18next 23.15.1** - Internationalization
+- **react-i18next 15.0.1** - React i18n bindings
+- **React Intersection Observer 9.16.0** - Intersection detection
+- **Cmdk 1.1.1** - Command palette component
 
 ### Development Tools
 - **ESLint** - Code linting
-- **PostCSS** - CSS processing
-- **Autoprefixer** - CSS vendor prefixing
-
-### Additional Libraries
-- **Recharts** - Chart components
-- **React Hook Form** - Form handling
-- **Zod** - Schema validation
-- **Axios** - HTTP client
-- **i18next** - Internationalization
+- **PostCSS 8.5.3** - CSS processing
+- **Autoprefixer 10.4.21** - CSS vendor prefixing
+- **TypeScript 5** - Type-safe JavaScript
 
 ## 📁 Project Structure
 
@@ -81,22 +92,42 @@ ClyCites-Frontend/
 ├── ClyCites/                    # Main frontend application
 │   ├── app/                     # Next.js app directory
 │   │   ├── about/              # About page
+│   │   ├── community-resources/ # Community resources page
 │   │   ├── contact/            # Contact page
-│   │   ├── disease/            # Disease detection
-│   │   ├── nutrition/          # Nutrition resources
-│   │   ├── program/            # Program information
-│   │   └── resources/          # General resources
+│   │   ├── disease/            # Disease detection page
+│   │   ├── developer-resources/ # Developer resources page
+│   │   ├── get-started/        # Getting started page
+│   │   ├── login/              # Login page
+│   │   ├── nutrition/          # Nutrition resources page
+│   │   ├── partner-signup/     # Partner signup page
+│   │   ├── policy-resources/   # Policy resources page
+│   │   ├── program/            # Program information page
+│   │   ├── research-tools/     # Research tools page
+│   │   ├── resources/          # General resources page
+│   │   ├── search/             # Search functionality
+│   │   ├── signup/             # Signup page
+│   │   ├── submodules/         # Submodule integrations
+│   │   ├── layout.tsx          # Root layout component
+│   │   ├── page.tsx            # Home page
+│   │   └── globals.css         # Global styles
 │   ├── components/             # React components
-│   │   ├── ui/                # Reusable UI components
-│   │   ├── Hero.tsx           # Hero section
-│   │   ├── Features.tsx       # Features showcase
-│   │   └── ...                # Other components
-│   ├── lib/                   # Utility functions
-│   ├── public/                # Static assets
-│   └── types/                 # TypeScript definitions
-├── ClyCites-Emarket/          # E-Market sub-application
-├── ClyCites-AgricAssis/       # Agricultural Assistant
-├── ClyCites-Expertportal/     # Expert Portal
+│   │   ├── ui/                # Reusable UI components (Radix UI based)
+│   │   ├── BelowHero/         # Below hero section components
+│   │   ├── Features/          # Feature showcase components
+│   │   ├── Hero/              # Hero section components
+│   │   └── ...                # Other feature components
+│   ├── lib/                   # Utility functions and configurations
+│   ├── public/                # Static assets (images, icons, etc.)
+│   ├── types/                 # TypeScript type definitions
+│   ├── constants/             # Application constants
+│   ├── locales/               # Internationalization files
+│   └── assets/                # Additional assets
+├── ClyCites-AgricAssis/       # Agricultural Assistant (sub-application)
+├── ClyCites-Emarket/          # E-Market (sub-application)
+├── ClyCites-Expertportal/     # Expert Portal (sub-application)
+├── ClyCites-accounts/         # Accounts management (sub-application)
+├── .github/                   # GitHub workflows and templates
+├── assets/                    # Project-wide assets
 └── README.md                  # This file
 ```
 
@@ -118,23 +149,12 @@ Make sure you have the following installed on your machine:
    cd ClyCites-Frontend
    ```
 
-2. **Install dependencies for the main application**
+2. **Install dependencies**
    ```bash
    cd ClyCites
    npm install
    ```
 
-3. **Install dependencies for sub-applications (optional)**
-   ```bash
-   # E-Market
-   cd ../ClyCites-Emarket
-   npm install
-   
-   # Agricultural Assistant
-   cd ../ClyCites-AgricAssis
-   npm install
-   ```
-
 ### Running the Application
 
 1. **Start the development server**
@@ -153,69 +173,8 @@ npm run build
 npm start
 ```
 
-## 🔧 Environment Variables
-
-Create a `.env.local` file in the root of each sub-application with the following variables:
-
-### Main Application (ClyCites)
-```env
-# API Configuration
-NEXT_PUBLIC_API_URL=http://localhost:8000
-NEXT_PUBLIC_APP_URL=http://localhost:3000
-
-# Authentication
-NEXTAUTH_SECRET=your-secret-key
-NEXTAUTH_URL=http://localhost:3000
-
-# External Services
-NEXT_PUBLIC_WEATHER_API_KEY=your-weather-api-key
-NEXT_PUBLIC_MAPS_API_KEY=your-maps-api-key
-```
-
-### E-Market Application
-```env
-# Database
-DATABASE_URL="postgresql://username:password@localhost:5432/clycites_emarket"
-
-# Authentication
-NEXTAUTH_SECRET=your-secret-key
-NEXTAUTH_URL=http://localhost:3001
-
-# File Upload
-UPLOADTHING_SECRET=your-uploadthing-secret
-UPLOADTHING_APP_ID=your-uploadthing-app-id
-```
-
-### Agricultural Assistant
-```env
-# API Configuration
-NEXT_PUBLIC_API_URL=http://localhost:8000
-NEXT_PUBLIC_WEATHER_API_KEY=your-weather-api-key
-
-# Authentication
-NEXTAUTH_SECRET=your-secret-key
-NEXTAUTH_URL=http://localhost:3002
-```
-
 ## 📜 Available Scripts
 
-### Main Application
-```bash
-npm run dev          # Start development server
-npm run build        # Build for production
-npm run start        # Start production server
-npm run lint         # Run ESLint
-```
-
-### E-Market Application
-```bash
-npm run dev          # Start development server with Turbopack
-npm run build        # Build for production
-npm run start        # Start production server
-npm run lint         # Run ESLint
-```
-
-### Agricultural Assistant
 ```bash
 npm run dev          # Start development server
 npm run build        # Build for production
@@ -265,8 +224,10 @@ We welcome contributions from the community! Please read our [Code of Conduct](C
 - **Code Style**: Follow the existing ESLint configuration
 - **TypeScript**: Use strict TypeScript for all new code
 - **Components**: Use Radix UI primitives for accessibility
+- **Styling**: Use Tailwind CSS with component variants
 - **Testing**: Add tests for new features and bug fixes
 - **Documentation**: Update README and component documentation
+- **Internationalization**: Use i18next for multi-language support
 
 ### Issue Reporting
 

From 83d5f01fbad3f3ff7648c4ead0ac449b79c56bd6 Mon Sep 17 00:00:00 2001
From: kubanjaelijaheldred <kubanjaelijah2037@gmail.com>
Date: Sat, 15 Nov 2025 10:25:00 +0300
Subject: [PATCH 6/7] docs: add comprehensive README for ClyCites E-Market -
 Issue #18

- Add detailed module overview explaining E-Market functionality
- Document key features for customer-facing and administrative interfaces
- Include complete tech stack with accurate versions from package.json
- Provide detailed folder structure matching actual project layout
- Add comprehensive setup instructions with database configuration
- Include environment variables guide with examples
- Document available scripts and additional Prisma commands
- Add contribution guidelines specific to E-Market development
- Include component organization and code style standards

This addresses issue #18 by providing a complete README for the ClyCites E-Market module
to help contributors understand the structure and integration with the main application.
---
 ClyCites-Emarket/README.md | 306 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 305 insertions(+), 1 deletion(-)

diff --git a/ClyCites-Emarket/README.md b/ClyCites-Emarket/README.md
index cba1122..3bdcc6a 100644
--- a/ClyCites-Emarket/README.md
+++ b/ClyCites-Emarket/README.md
@@ -1,2 +1,306 @@
-# ClyCites-Emarket
+<div align="center">
+  <img src="../public/logo.png" alt="ClyCites E-Market Logo" width="200">
+  <h1>ClyCites E-Market</h1>
+  <p>A comprehensive agricultural marketplace platform connecting farmers directly with buyers</p>
+  
+  <div>
+    <img src="https://img.shields.io/badge/Next.js-15.1.5-black?style=for-the-badge&logo=next.js" alt="Next.js">
+    <img src="https://img.shields.io/badge/React-19-blue?style=for-the-badge&logo=react" alt="React">
+    <img src="https://img.shields.io/badge/TypeScript-5-blue?style=for-the-badge&logo=typescript" alt="TypeScript">
+    <img src="https://img.shields.io/badge/Tailwind_CSS-3.3.2-06B6D4?style=for-the-badge&logo=tailwindcss" alt="Tailwind CSS">
+    <img src="https://img.shields.io/badge/Prisma-6.6.0-black?style=for-the-badge&logo=prisma" alt="Prisma">
+  </div>
+</div>
+
+## 📋 Table of Contents
+
+- [Module Overview](#module-overview)
+- [Key Features](#key-features)
+- [Tech Stack](#tech-stack)
+- [Folder Structure](#folder-structure)
+- [Setup Instructions](#setup-instructions)
+- [Environment Variables](#environment-variables)
+- [Available Scripts](#available-scripts)
+- [Contribution Guidelines](#contribution-guidelines)
+
+## 🌱 Module Overview
+
+ClyCites E-Market is a dedicated marketplace module within the ClyCites ecosystem that enables farmers to sell their agricultural products directly to buyers. This module eliminates intermediaries, ensuring fair pricing and better market access for farmers while providing buyers with fresh, locally-sourced produce.
+
+The platform features both a customer-facing storefront and an administrative back-office, creating a complete e-commerce solution tailored for agricultural products.
+
+## 🚀 Key Features
+
+### Customer-Facing Features
+- **🏪 Product Marketplace**: Browse and search agricultural products by category, location, and season
+- **🛒 Shopping Cart**: Add to cart, manage quantities, and checkout seamlessly
+- **👤 User Authentication**: Secure login and registration for buyers and farmers
+- **📱 Farmer Profiles**: Dedicated dashboards for farmers to manage their products and orders
+- **🎯 Local Markets**: Discover and connect with local agricultural markets
+- **📦 Order Management**: Track orders, delivery status, and purchase history
+- **💬 Customer Support**: Integrated support system for buyer and seller assistance
+
+### Administrative Features
+- **📊 Analytics Dashboard**: Comprehensive sales, product, and user analytics
+- **👥 User Management**: Manage buyers, farmers, and administrative users
+- **📋 Product Management**: Approve, feature, and manage product listings
+- **💰 Payment Integration**: Secure payment processing and transaction management
+- **📈 Market Insights**: Data-driven insights for market trends and pricing
+
+### Technical Features
+- **📱 Responsive Design**: Mobile-first approach with full device compatibility
+- **🌙 Dark/Light Theme**: Built-in theme switching capability
+- **🔍 Advanced Search**: Filter products by category, location, price, and more
+- **📤 File Upload**: Image and document upload for product listings
+- **🔄 Real-time Updates**: Live inventory and order status updates
+
+## 🛠️ Tech Stack
+
+### Frontend Framework
+- **Next.js 15.1.5** - React framework with App Router and Turbopack
+- **React 19** - Modern UI library with latest features
+- **TypeScript 5** - Type-safe JavaScript development
+
+### Database & ORM
+- **Prisma 6.6.0** - Modern database toolkit and ORM
+- **PostgreSQL** - Primary database (configured via DATABASE_URL)
+
+### Authentication & Security
+- **NextAuth 4.24.11** - Complete authentication solution
+- **bcrypt** - Password hashing and security
+
+### UI & Styling
+- **Tailwind CSS 3.3.2** - Utility-first CSS framework
+- **Radix UI** - Accessible component primitives
+- **Lucide React 0.473.0** - Modern icon library
+- **Sass 1.89.1** - CSS preprocessor for advanced styling
+
+### E-commerce & Forms
+- **React Hook Form 7.54.2** - Performant form handling
+- **Uploadthing 7.5.2** - File upload solution
+- **React Quill 2.0.0** - Rich text editor for product descriptions
+
+### Data Visualization
+- **Chart.js 4.4.7** - Charts and analytics
+- **React Chart.js 2 5.3.0** - React integration for Chart.js
+
+### Utilities & Libraries
+- **Faker 9.4.0** - Data generation for development
+- **clsx & tailwind-merge** - Conditional class utilities
+- **React Hot Toast 2.5.1** - Notification system
+- **Embla Carousel 8.6.0** - Carousel components
+
+## 📁 Folder Structure
+
+```
+ClyCites-Emarket/
+├── app/                        # Next.js app directory
+│   ├── (front-end)/           # Customer-facing application
+│   │   ├── (buyer-dashboard)/ # Buyer dashboard pages
+│   │   ├── (farmer-dashboard)/# Farmer dashboard pages
+│   │   ├── about/             # About page
+│   │   ├── careers/           # Careers page
+│   │   ├── cart/              # Shopping cart functionality
+│   │   ├── customer-support/  # Customer support pages
+│   │   ├── faq/               # Frequently asked questions
+│   │   ├── farmer-onboarding/ # Farmer registration flow
+│   │   ├── features/          # Feature showcase
+│   │   ├── how-it-works/      # How it works guide
+│   │   ├── login/             # Login page
+│   │   ├── markets/           # Local markets listing
+│   │   ├── products/          # Product pages and listings
+│   │   ├── register/          # User registration
+│   │   ├── shop/              # Main shop interface
+│   │   └── page.jsx           # Homepage
+│   ├── (back-office)/         # Administrative interface
+│   │   ├── dashboard/         # Admin dashboard pages
+│   │   └── layout.js          # Admin layout
+│   ├── api/                   # API routes
+│   ├── layout.tsx             # Root layout
+│   └── favicon.ico            # Favicon
+├── components/                 # React components
+│   ├── frontend/              # Customer-facing components
+│   ├── backend/               # Admin components
+│   └── ui/                    # Reusable UI components
+├── context/                   # React context providers
+│   └── Providers.jsx          # Main context provider
+├── lib/                       # Utility functions
+│   ├── apiRequest.js          # API request utilities
+│   ├── db.js                  # Database connection
+│   ├── uploadthing.js         # File upload configuration
+│   └── utils.ts               # General utilities
+├── prisma/                    # Database schema and migrations
+├── public/                    # Static assets
+├── styles/                    # Global styles
+│   └── main.scss              # Main stylesheet
+├── data.json                  # Sample data for development
+├── package.json               # Dependencies and scripts
+├── tailwind.config.js         # Tailwind configuration
+├── tsconfig.json              # TypeScript configuration
+└── README.md                  # This file
+```
+
+## 🚀 Setup Instructions
+
+### Prerequisites
+
+Make sure you have the following installed:
+- [Node.js](https://nodejs.org/) (version 18 or higher)
+- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
+- [PostgreSQL](https://www.postgresql.org/) (for database)
+- [Git](https://git-scm.com/)
+
+### Installation
+
+1. **Clone the repository** (if not already done)
+   ```bash
+   git clone https://github.com/Saga211/ClyCites-Frontend.git
+   cd ClyCites-Frontend/ClyCites-Emarket
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Set up the database**
+   ```bash
+   # Ensure PostgreSQL is running
+   # Create database (replace with your credentials)
+   createdb clycites_emarket
+   
+   # Run Prisma migrations
+   npx prisma migrate dev
+   
+   # Generate Prisma client
+   npx prisma generate
+   ```
+
+4. **Configure environment variables** (see Environment Variables section below)
+
+5. **Start the development server**
+   ```bash
+   npm run dev
+   ```
+
+6. **Access the application**
+   - Frontend: [http://localhost:3000](http://localhost:3000)
+   - The app will automatically detect and route to front-end or back-office based on URL
+
+## 🔧 Environment Variables
+
+Create a `.env.local` file in the root of the ClyCites-Emarket directory:
+
+```env
+# Database
+DATABASE_URL="postgresql://username:password@localhost:5432/clycites_emarket"
+
+# Authentication
+NEXTAUTH_SECRET="your-super-secret-key-here"
+NEXTAUTH_URL="http://localhost:3000"
+
+# Uploadthing (for file uploads)
+UPLOADTHING_SECRET="your-uploadthing-secret"
+UPLOADTHING_APP_ID="your-uploadthing-app-id"
+
+# Optional: External services
+# NEXT_PUBLIC_API_URL="http://localhost:8000"
+```
+
+### Getting Environment Variables
+
+1. **Database URL**: Set up your PostgreSQL database and use the connection string
+2. **NEXTAUTH_SECRET**: Generate a secure random string:
+   ```bash
+   openssl rand -base64 32
+   ```
+3. **Uploadthing**: Create an account at [uploadthing.com](https://uploadthing.com) to get your credentials
+
+## 📜 Available Scripts
+
+```bash
+npm run dev          # Start development server with Turbopack
+npm run build        # Build for production
+npm run start        # Start production server
+npm run lint         # Run ESLint for code quality
+```
+
+### Additional Scripts
+
+```bash
+npx prisma studio    # Open Prisma Studio for database management
+npx prisma migrate dev # Run database migrations
+npx prisma generate   # Generate Prisma client
+```
+
+## 🤝 Contribution Guidelines
+
+### Development Workflow
+
+1. **Create a feature branch**
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+2. **Follow coding standards**
+   - Use TypeScript for all new code
+   - Follow ESLint configuration
+   - Use Tailwind CSS for styling
+   - Write meaningful component names
+
+3. **Database changes**
+   - Modify Prisma schema for database changes
+   - Run `npx prisma migrate dev` to create migrations
+   - Update TypeScript types if needed
+
+4. **Testing**
+   - Test all functionality before submitting
+   - Ensure responsive design works on mobile devices
+   - Verify database operations work correctly
+
+### Component Guidelines
+
+- **Frontend Components**: Place in `components/frontend/`
+- **Backend Components**: Place in `components/backend/`
+- **UI Components**: Place in `components/ui/` for reusable elements
+- **API Routes**: Place in `app/api/` following RESTful conventions
+
+### Code Style
+
+- **Components**: Use functional components with hooks
+- **Styling**: Prefer Tailwind CSS classes over custom CSS
+- **State Management**: Use React Context for global state
+- **Forms**: Use React Hook Form for form handling
+- **API Calls**: Use the provided `apiRequest.js` utility
+
+### Submitting Changes
+
+1. **Commit with descriptive messages**
+   ```bash
+   git commit -m "feat: add farmer dashboard analytics"
+   ```
+
+2. **Push to your branch**
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+
+3. **Create a Pull Request**
+   - Provide clear description of changes
+   - Include screenshots for UI changes
+   - Request review from maintainers
+
+## 📞 Support
+
+For questions or issues related to the E-Market module:
+- Create an issue in the main repository
+- Contact the development team
+- Check existing documentation in the main ClyCites repository
+
+---
+
+<div align="center">
+  <p>Built with ❤️ for the agricultural community</p>
+  <p>Empowering farmers through digital marketplace solutions</p>
+</div>
  

From a656eb123c54c13ce15ab217199d14d40072e3e4 Mon Sep 17 00:00:00 2001
From: kubanjaelijaheldred <kubanjaelijah2037@gmail.com>
Date: Sat, 15 Nov 2025 19:46:43 +0300
Subject: [PATCH 7/7] feat: improve responsiveness of BelowHero component

- Implement responsive grid layout for all screen sizes
- Enhance mobile experience with better spacing and typography
- Add smooth hover and scroll animations
- Improve visual hierarchy and accessibility
---
 ClyCites/components/BelowHero/index.tsx | 72 +++++++++++--------------
 1 file changed, 31 insertions(+), 41 deletions(-)

diff --git a/ClyCites/components/BelowHero/index.tsx b/ClyCites/components/BelowHero/index.tsx
index d0d2dc9..32f4d37 100644
--- a/ClyCites/components/BelowHero/index.tsx
+++ b/ClyCites/components/BelowHero/index.tsx
@@ -31,20 +31,16 @@ const AboutSectionLife2 = () => {
           }, []);
 
   return (
-    <section className="top-0 bg-gray-100">
-            <div className="container  -my-4">
-                  <div className="container mx-auto">
-                        <div className="flex flex-wrap items-center justify-center al -mx-6 gap-2 lg:gap-6">
-                              <div className={`w-full px-4 lg:w-1/2 xl:w-1/6 transition-transform duration-300 lg:hover:scale-105 cursor-pointer rounded bg-gray-300 ${animate ?"slider-up slide-up-faster":"" }`}>
-                                    <div className="wow fadeInUp relative mx-auto mb-6 aspect-[25/24] lg:m-0 flex flex-col justify-center items-center text-center" data-wow-delay=".15s ">
-
-                                          {/* <FaWpforms className="w-10 h-8  text-black dark:text-white items-center"/> */}
-
-                                          <h3 className="mb-2 mt-3 text-xl font-bold text-black sm:text-2xl lg:text-xl xl:text-2xl">
-                                          8+
+    <section className="w-full bg-gray-100 py-4 md:py-8">
+            <div className="container mx-auto px-4">
+                  <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-3 md:gap-4 lg:gap-6">
+                        <div className={`transition-transform duration-300 hover:scale-105 cursor-pointer rounded-lg bg-white shadow-sm hover:shadow-md ${animate ? "slider-up slide-up-faster" : ""}`}>
+                                    <div className="relative p-4 md:p-6 flex flex-col justify-center items-center text-center h-full">
+                                          <h3 className="text-2xl md:text-3xl font-bold text-emerald-700">
+                                            8+
                                           </h3>
-                                          <p className="mb-4 text-base text-black ">
-                                          African Cities
+                                          <p className="mt-2 text-sm md:text-base text-gray-600">
+                                            African Cities
                                           </p>
                                           {/* <Link href="https://apply.bugemauniv.ac.ug/">
                                                 <button className="px-6 py-2 text-white bg-[#e72725] rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
@@ -52,17 +48,14 @@ const AboutSectionLife2 = () => {
                                                 </button>
                                           </Link> */}
                                     </div>
-                              </div>
-                              <div className={`w-full px-4 lg:w-1/2 xl:w-1/6 transition-transform duration-300 lg:hover:scale-105 cursor-pointer rounded bg-gray-300 ${animate ?"slider-up slide-up-faster":"" }`}>
-                                    <div className="wow fadeInUp relative mx-auto mb-6 aspect-[25/24] lg:m-0 flex flex-col justify-center items-center text-center" data-wow-delay=".15s ">
-
-                                          {/* <FaWpforms className="w-10 h-8  text-black dark:text-white items-center"/> */}
-
-                                          <h3 className="mb-2 mt-3 text-xl font-bold text-black sm:text-2xl lg:text-xl xl:text-2xl">
-                                          1500+
+                        </div>
+                        <div className={`transition-transform duration-300 hover:scale-105 cursor-pointer rounded-lg bg-white shadow-sm hover:shadow-md ${animate ? "slider-up slide-up-faster" : ""}`}>
+                                    <div className="relative p-4 md:p-6 flex flex-col justify-center items-center text-center h-full">
+                                          <h3 className="text-2xl md:text-3xl font-bold text-emerald-700">
+                                            1500+
                                           </h3>
-                                          <p className="mb-4 text-base text-black ">
-                                          Community Champions
+                                          <p className="mt-2 text-sm md:text-base text-gray-600">
+                                            Community Champions
                                           </p>
                                           {/* <Link href="https://apply.bugemauniv.ac.ug/">
                                                 <button className="px-6 py-2 text-white bg-[#e72725] rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
@@ -70,15 +63,14 @@ const AboutSectionLife2 = () => {
                                                 </button>
                                           </Link> */}
                                     </div>
-                              </div>
-                              <div className={`w-full px-4 lg:w-1/2 xl:w-1/6 transition-transform duration-300 lg:hover:scale-105 cursor-pointer rounded bg-gray-300 ${animate ?"slider-up slide-up-fast":"" } `}>
-                                    <div className="wow fadeInUp relative mx-auto mb-6 aspect-[25/24] lg:m-0 flex flex-col justify-center items-center text-center" data-wow-delay=".15s">
-                                          {/* <FaMoneyCheckDollar className="w-10 h-8 text-black dark:text-white items-center"/> */}
-                                          <h3 className="mb-2 mt-3 text-xl font-bold text-black sm:text-2xl lg:text-xl xl:text-2xl">
-                                                67+
+                        </div>
+                        <div className={`transition-transform duration-300 hover:scale-105 cursor-pointer rounded-lg bg-white shadow-sm hover:shadow-md ${animate ? "slider-up slide-up-fast" : ""}`}>
+                                    <div className="relative p-4 md:p-6 flex flex-col justify-center items-center text-center h-full">
+                                          <h3 className="text-2xl md:text-3xl font-bold text-emerald-700">
+                                            67+
                                           </h3>
-                                          <p className="mb-4 text-base text-black">
-                                          Data Records
+                                          <p className="mt-2 text-sm md:text-base text-gray-600">
+                                            Data Records
                                           </p>
                                     
                                           {/* <Link href="/finances.pdf" target="_blank" rel="noopener noreferrer">
@@ -87,15 +79,14 @@ const AboutSectionLife2 = () => {
                                                 </button>
                                           </Link> */}
                                     </div>
-                              </div>
-                              <div className={`w-full px-4 lg:w-1/2 xl:w-1/6 transition-transform duration-300 lg:hover:scale-105 cursor-pointer rounded bg-gray-300 ${animate ?"slider-up slide-up-slow":"" }`}>
-                                    <div className="wow fadeInUp relative mx-auto mb-6 aspect-[25/24] lg:m-0 flex flex-col justify-center items-center text-center" data-wow-delay=".15s">
-                                          {/* <IoBookOutline className="w-10 h-8 text-black dark:text-white items-center"/> */}
-                                          <h3 className="mb-2 mt-3 text-xl font-bold text-black sm:text-2xl lg:text-xl xl:text-2xl">
-                                          10+
+                        </div>
+                        <div className={`transition-transform duration-300 hover:scale-105 cursor-pointer rounded-lg bg-white shadow-sm hover:shadow-md ${animate ? "slider-up slide-up-slow" : ""}`}>
+                                    <div className="relative p-4 md:p-6 flex flex-col justify-center items-center text-center h-full">
+                                          <h3 className="text-2xl md:text-3xl font-bold text-emerald-700">
+                                            10+
                                           </h3>
-                                          <p className="mb-4 text-base text-black dark:text-gray-300">
-                                          Research Papers
+                                          <p className="mt-2 text-sm md:text-base text-gray-600">
+                                            Research Papers
                                           </p>
                                           {/* <Link href="https://erms.bugemauniv.ac.ug/student/">
                                                 <button className="px-6 py-2 text-white bg-[#e72725] rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
@@ -104,7 +95,7 @@ const AboutSectionLife2 = () => {
                                           </Link> */}
                                           
                                     </div>
-                              </div>
+                        </div>
                               <div className={`w-full px-4 lg:w-1/2 xl:w-1/6 transition-transform duration-300 lg:hover:scale-105 cursor-pointer rounded bg-gray-300 ${animate ?"slider-up slide-up-slower":"" } `}>
                                     <div className="wow fadeInUp relative mx-auto mb-12 aspect-[25/24] lg:m-0 flex flex-col justify-center items-center text-center" data-wow-delay=".15s">
                                           {/* <FaScroll className="w-10 h-8 text-black dark:text-white "/> */}
@@ -121,7 +112,6 @@ const AboutSectionLife2 = () => {
                                           </Link> */}
                                           
                                     </div>
-                              </div>
                         </div>
                   </div>
             </div>