Feature/fix homepage padding alignment

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;

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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>
+  )
+}

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({
@@ -106,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"
@@ -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">

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" />