From d2ad50c54b535a2221ff69f1999fb6a6479cb1d3 Mon Sep 17 00:00:00 2001
From: Aayush Kumar Bhat <kumarbhataayush@gmail.com>
Date: Wed, 30 Oct 2024 19:06:28 +0530
Subject: [PATCH 1/6] Add feature: Navbar

---
 app/(root)/page.tsx      | 151 +++++++++++++++++++++++++++++++++++----
 app/about/layout.tsx     |  19 +++++
 app/about/page.tsx       |   9 +++
 app/community/layout.tsx |  19 +++++
 app/community/page.tsx   |   9 +++
 app/datasets/layout.tsx  |  19 +++++
 app/datasets/page.tsx    |   9 +++
 app/models/layout.tsx    |  19 +++++
 app/models/page.tsx      |   9 +++
 components/ui/dialog.tsx | 122 +++++++++++++++++++++++++++++++
 package-lock.json        |   2 -
 {app => public}/icon.ico | Bin
 12 files changed, 373 insertions(+), 14 deletions(-)
 create mode 100644 app/about/layout.tsx
 create mode 100644 app/about/page.tsx
 create mode 100644 app/community/layout.tsx
 create mode 100644 app/community/page.tsx
 create mode 100644 app/datasets/layout.tsx
 create mode 100644 app/datasets/page.tsx
 create mode 100644 app/models/layout.tsx
 create mode 100644 app/models/page.tsx
 create mode 100644 components/ui/dialog.tsx
 rename {app => public}/icon.ico (100%)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index 3a45f5d..0eedcca 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -1,18 +1,145 @@
-import { Button } from "@/components/ui/button";
+'use client';
 import Link from "next/link";
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import Image from "next/image";
+import { Search, Moon, Sun, Menu } from "lucide-react"; // Import Menu icon from Lucide
+
+const commands = [
+  { label: "Home", href: "/" },
+  { label: "Datasets", href: "/datasets" },
+  { label: "Models", href: "/models" },
+  { label: "Learn", href: "/learn" },
+  { label: "Community", href: "/community" },
+  { label: "About", href: "/about" },
+];
+
+// Define props type for Navbar
+interface NavbarProps {
+  darkMode: boolean;
+  toggleDarkMode: () => void;
+}
+
+function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    // Add event listener for keydown
+    window.addEventListener("keydown", handleKeyDown);
+    
+    return () => {
+      // Cleanup the event listener
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <nav className={`p-4 fixed w-full z-10 shadow-lg ${darkMode ? 'bg-gray-800' : 'bg-violet-700'} text-white`}>
+      <div className="container mx-auto flex justify-between items-center">
+        {/* Left Section: Logo */}
+        <Link href="/" className="flex items-center space-x-2">
+          <Image 
+            src="/icon.ico" 
+            width={40}
+            height={40}
+            alt="ML4E"
+            priority
+            quality={90}
+          />
+          <span className="text-2xl font-bold tracking-wider">ML4E</span>
+        </Link>
+
+        {/* Right Section: Search, Dark Mode Toggle, Mobile Menu */}
+        <div className="flex items-center space-x-4">
+          {/* ShadCN Search Dialog */}
+          <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogTrigger asChild>
+              <Button variant="outline" className="hidden md:flex items-center w-full max-w-xs w-60 h-10 rounded-lg" onClick={() => setIsOpen(true)}>
+                <Search className="text-violet-700" />
+                <span className="ml-auto text-gray-400">Command + K</span>
+              </Button>
+            </DialogTrigger>
+            <DialogContent className={`bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl mx-auto ${isOpen ? 'backdrop-blur-md' : ''}`}>
+              {/* Dialog Title for Accessibility */}
+              <DialogTitle className="sr-only">Search</DialogTitle>
+
+              <div className="relative">
+                <input 
+                  type="text" 
+                  placeholder="Search..." 
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-700"
+                />
+                <button className="absolute right-3 top-3 text-violet-700">
+                  <Search />
+                </button>
+              </div>
+    
+              {/* Command List */}
+              <ul className="mt-4 w-full">
+                {commands.map(command => (
+                  <li key={command.label} className="p-2 hover:bg-gray-200 rounded">
+                    <Link href={command.href}>{command.label}</Link>
+                  </li>
+                ))}
+              </ul>
+            </DialogContent>
+          </Dialog>
 
+          {/* Dark/Light Mode Toggle */}
+          <button 
+            onClick={toggleDarkMode}
+            className="hidden md:flex p-2 rounded-full hover:bg-violet-500 focus:outline-none"
+          >
+            {darkMode ? <Sun className="text-yellow-500" /> : <Moon className="text-blue-500" />}
+          </button>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="md:hidden focus:outline-none"
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <Menu className="text-white" /> {/* Menu icon from Lucide */}
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+// Define props type for Home
 export default function Home() {
+  const [isOpen, setIsOpen] = useState<boolean>(false); // To control the dialog state
+  const [darkMode, setDarkMode] = useState<boolean>(false); // State for dark mode
+
+  const toggleDarkMode = () => {
+    setDarkMode(prevMode => !prevMode);
+  };
+
   return (
-    <main className="flex justify-center items-center flex-col min-h-screen">
-      <h1 className="font-bold text-violet-700 text-4xl pb-3 tracking-wide">ML4E</h1>
-      <p className="font-light text-2xl">
-        Machine Learning for Everyone is a collection of resources to help you learn machine learning.
-      </p>
-      <Link href="/learn">
-        <Button className="mt-5">
-          Start Learning
-        </Button>
-      </Link>
-    </main>
+    <div className={`${darkMode ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'} ${isOpen ? 'blur-sm' : ''}`}>
+      <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+      <main className="flex justify-center items-center flex-col min-h-screen pt-16">
+        <h1 className="font-bold text-4xl pb-3 tracking-wide">
+          ML4E
+        </h1>
+        <p className="font-light text-2xl px-4 text-center">
+          Machine Learning for Everyone is a collection of resources to help you
+          learn machine learning.
+        </p>
+        <Link href="/learn">
+          <Button className="mt-5">Start Learning</Button>
+        </Link>
+      </main>
+    </div>
   );
 }
diff --git a/app/about/layout.tsx b/app/about/layout.tsx
new file mode 100644
index 0000000..0dae3b3
--- /dev/null
+++ b/app/about/layout.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Metadata } from 'next';
+import { SidebarProvider } from "@/components/ui/sidebar"
+import AppSidebar from "@/components/custom/AppSidebar";
+
+export const metadata: Metadata = {
+    title: "Learn - ML4E",
+    description: "ML4E - Machine Learning for Everyone is a collection of resources to help you learn machine learning.",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return (
+    
+        <main>
+          {children}
+        </main>
+    )
+}
+  
diff --git a/app/about/page.tsx b/app/about/page.tsx
new file mode 100644
index 0000000..e407959
--- /dev/null
+++ b/app/about/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>this is about page</div>
+  )
+}
+
+export default page
\ No newline at end of file
diff --git a/app/community/layout.tsx b/app/community/layout.tsx
new file mode 100644
index 0000000..0dae3b3
--- /dev/null
+++ b/app/community/layout.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Metadata } from 'next';
+import { SidebarProvider } from "@/components/ui/sidebar"
+import AppSidebar from "@/components/custom/AppSidebar";
+
+export const metadata: Metadata = {
+    title: "Learn - ML4E",
+    description: "ML4E - Machine Learning for Everyone is a collection of resources to help you learn machine learning.",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return (
+    
+        <main>
+          {children}
+        </main>
+    )
+}
+  
diff --git a/app/community/page.tsx b/app/community/page.tsx
new file mode 100644
index 0000000..ae7ba16
--- /dev/null
+++ b/app/community/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>this is community page</div>
+  )
+}
+
+export default page
\ No newline at end of file
diff --git a/app/datasets/layout.tsx b/app/datasets/layout.tsx
new file mode 100644
index 0000000..0dae3b3
--- /dev/null
+++ b/app/datasets/layout.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Metadata } from 'next';
+import { SidebarProvider } from "@/components/ui/sidebar"
+import AppSidebar from "@/components/custom/AppSidebar";
+
+export const metadata: Metadata = {
+    title: "Learn - ML4E",
+    description: "ML4E - Machine Learning for Everyone is a collection of resources to help you learn machine learning.",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return (
+    
+        <main>
+          {children}
+        </main>
+    )
+}
+  
diff --git a/app/datasets/page.tsx b/app/datasets/page.tsx
new file mode 100644
index 0000000..039a248
--- /dev/null
+++ b/app/datasets/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>this is dataset page</div>
+  )
+}
+
+export default page
\ No newline at end of file
diff --git a/app/models/layout.tsx b/app/models/layout.tsx
new file mode 100644
index 0000000..0dae3b3
--- /dev/null
+++ b/app/models/layout.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Metadata } from 'next';
+import { SidebarProvider } from "@/components/ui/sidebar"
+import AppSidebar from "@/components/custom/AppSidebar";
+
+export const metadata: Metadata = {
+    title: "Learn - ML4E",
+    description: "ML4E - Machine Learning for Everyone is a collection of resources to help you learn machine learning.",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return (
+    
+        <main>
+          {children}
+        </main>
+    )
+}
+  
diff --git a/app/models/page.tsx b/app/models/page.tsx
new file mode 100644
index 0000000..156f494
--- /dev/null
+++ b/app/models/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const page = () => {
+  return (
+    <div>this is models page</div>
+  )
+}
+
+export default page
\ No newline at end of file
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..95b0d38
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/package-lock.json b/package-lock.json
index a600581..7b19b13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1009,7 +1009,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
       "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
-      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.0",
         "@radix-ui/react-compose-refs": "1.1.0",
@@ -4555,7 +4554,6 @@
       "version": "0.454.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz",
       "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
-      "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
diff --git a/app/icon.ico b/public/icon.ico
similarity index 100%
rename from app/icon.ico
rename to public/icon.ico

From d4f11f661e32c12ca41bb275f37f7cf23bdfe886 Mon Sep 17 00:00:00 2001
From: Aayush Kumar Bhat <kumarbhataayush@gmail.com>
Date: Wed, 30 Oct 2024 20:10:19 +0530
Subject: [PATCH 2/6] fixed

---
 app/about/layout.tsx     | 3 ---
 app/community/layout.tsx | 2 --
 app/datasets/layout.tsx  | 2 --
 app/models/layout.tsx    | 2 --
 4 files changed, 9 deletions(-)

diff --git a/app/about/layout.tsx b/app/about/layout.tsx
index 0dae3b3..6add61c 100644
--- a/app/about/layout.tsx
+++ b/app/about/layout.tsx
@@ -1,8 +1,5 @@
 import React from 'react';
 import { Metadata } from 'next';
-import { SidebarProvider } from "@/components/ui/sidebar"
-import AppSidebar from "@/components/custom/AppSidebar";
-
 export const metadata: Metadata = {
     title: "Learn - ML4E",
     description: "ML4E - Machine Learning for Everyone is a collection of resources to help you learn machine learning.",
diff --git a/app/community/layout.tsx b/app/community/layout.tsx
index 0dae3b3..93ff9bb 100644
--- a/app/community/layout.tsx
+++ b/app/community/layout.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import { Metadata } from 'next';
-import { SidebarProvider } from "@/components/ui/sidebar"
-import AppSidebar from "@/components/custom/AppSidebar";
 
 export const metadata: Metadata = {
     title: "Learn - ML4E",
diff --git a/app/datasets/layout.tsx b/app/datasets/layout.tsx
index 0dae3b3..93ff9bb 100644
--- a/app/datasets/layout.tsx
+++ b/app/datasets/layout.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import { Metadata } from 'next';
-import { SidebarProvider } from "@/components/ui/sidebar"
-import AppSidebar from "@/components/custom/AppSidebar";
 
 export const metadata: Metadata = {
     title: "Learn - ML4E",
diff --git a/app/models/layout.tsx b/app/models/layout.tsx
index 0dae3b3..93ff9bb 100644
--- a/app/models/layout.tsx
+++ b/app/models/layout.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import { Metadata } from 'next';
-import { SidebarProvider } from "@/components/ui/sidebar"
-import AppSidebar from "@/components/custom/AppSidebar";
 
 export const metadata: Metadata = {
     title: "Learn - ML4E",

From 79f61127f64362aaf5bb86b72eb21a070ea30b6d Mon Sep 17 00:00:00 2001
From: Aayush Kumar Bhat <kumarbhataayush@gmail.com>
Date: Wed, 30 Oct 2024 20:18:12 +0530
Subject: [PATCH 3/6] small fix

---
 app/(root)/page.tsx | 30 ++++++++----------------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index 0eedcca..d08c94a 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import Image from "next/image";
-import { Search, Moon, Sun, Menu } from "lucide-react"; // Import Menu icon from Lucide
+import { Search, Moon, Sun, Menu } from "lucide-react";
 
 const commands = [
   { label: "Home", href: "/" },
@@ -15,14 +15,14 @@ const commands = [
   { label: "About", href: "/about" },
 ];
 
-// Define props type for Navbar
 interface NavbarProps {
   darkMode: boolean;
   toggleDarkMode: () => void;
+  isOpen: boolean; // Add isOpen as a prop
+  setIsOpen: (open: boolean) => void; // Add setIsOpen as a prop
 }
 
-function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
   const [searchTerm, setSearchTerm] = useState<string>("");
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -32,11 +32,9 @@ function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
   };
 
   useEffect(() => {
-    // Add event listener for keydown
     window.addEventListener("keydown", handleKeyDown);
     
     return () => {
-      // Cleanup the event listener
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
@@ -44,7 +42,6 @@ function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
   return (
     <nav className={`p-4 fixed w-full z-10 shadow-lg ${darkMode ? 'bg-gray-800' : 'bg-violet-700'} text-white`}>
       <div className="container mx-auto flex justify-between items-center">
-        {/* Left Section: Logo */}
         <Link href="/" className="flex items-center space-x-2">
           <Image 
             src="/icon.ico" 
@@ -57,9 +54,7 @@ function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
           <span className="text-2xl font-bold tracking-wider">ML4E</span>
         </Link>
 
-        {/* Right Section: Search, Dark Mode Toggle, Mobile Menu */}
         <div className="flex items-center space-x-4">
-          {/* ShadCN Search Dialog */}
           <Dialog open={isOpen} onOpenChange={setIsOpen}>
             <DialogTrigger asChild>
               <Button variant="outline" className="hidden md:flex items-center w-full max-w-xs w-60 h-10 rounded-lg" onClick={() => setIsOpen(true)}>
@@ -68,9 +63,7 @@ function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
               </Button>
             </DialogTrigger>
             <DialogContent className={`bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl mx-auto ${isOpen ? 'backdrop-blur-md' : ''}`}>
-              {/* Dialog Title for Accessibility */}
               <DialogTitle className="sr-only">Search</DialogTitle>
-
               <div className="relative">
                 <input 
                   type="text" 
@@ -83,8 +76,6 @@ function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
                   <Search />
                 </button>
               </div>
-    
-              {/* Command List */}
               <ul className="mt-4 w-full">
                 {commands.map(command => (
                   <li key={command.label} className="p-2 hover:bg-gray-200 rounded">
@@ -95,7 +86,6 @@ function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
             </DialogContent>
           </Dialog>
 
-          {/* Dark/Light Mode Toggle */}
           <button 
             onClick={toggleDarkMode}
             className="hidden md:flex p-2 rounded-full hover:bg-violet-500 focus:outline-none"
@@ -103,12 +93,11 @@ function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
             {darkMode ? <Sun className="text-yellow-500" /> : <Moon className="text-blue-500" />}
           </button>
 
-          {/* Mobile Menu Button */}
           <button
             className="md:hidden focus:outline-none"
             onClick={() => setIsOpen(!isOpen)}
           >
-            <Menu className="text-white" /> {/* Menu icon from Lucide */}
+            <Menu className="text-white" />
           </button>
         </div>
       </div>
@@ -116,10 +105,9 @@ function Navbar({ darkMode, toggleDarkMode }: NavbarProps) {
   );
 }
 
-// Define props type for Home
 export default function Home() {
-  const [isOpen, setIsOpen] = useState<boolean>(false); // To control the dialog state
   const [darkMode, setDarkMode] = useState<boolean>(false); // State for dark mode
+  const [isOpen, setIsOpen] = useState<boolean>(false); // To control the dialog state
 
   const toggleDarkMode = () => {
     setDarkMode(prevMode => !prevMode);
@@ -127,11 +115,9 @@ export default function Home() {
 
   return (
     <div className={`${darkMode ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'} ${isOpen ? 'blur-sm' : ''}`}>
-      <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+      <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} isOpen={isOpen} setIsOpen={setIsOpen} />
       <main className="flex justify-center items-center flex-col min-h-screen pt-16">
-        <h1 className="font-bold text-4xl pb-3 tracking-wide">
-          ML4E
-        </h1>
+        <h1 className="font-bold text-4xl pb-3 tracking-wide">ML4E</h1>
         <p className="font-light text-2xl px-4 text-center">
           Machine Learning for Everyone is a collection of resources to help you
           learn machine learning.

From 8bd40a033429fc2fded92c22fe417e8ad9854494 Mon Sep 17 00:00:00 2001
From: Aayush Kumar Bhat <kumarbhataayush@gmail.com>
Date: Wed, 30 Oct 2024 22:50:57 +0530
Subject: [PATCH 4/6] UI changes

---
 app/(root)/page.tsx | 175 ++++++++++++++++++++++++++++++--------------
 app/globals.css     |  84 +++++++++++++++++++++
 2 files changed, 206 insertions(+), 53 deletions(-)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index d08c94a..257242e 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -1,30 +1,28 @@
-'use client';
+"use client";
 import Link from "next/link";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react"; // Import useRef
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import Image from "next/image";
 import { Search, Moon, Sun, Menu } from "lucide-react";
 
-const commands = [
-  { label: "Home", href: "/" },
-  { label: "Datasets", href: "/datasets" },
-  { label: "Models", href: "/models" },
-  { label: "Learn", href: "/learn" },
-  { label: "Community", href: "/community" },
-  { label: "About", href: "/about" },
-];
-
 interface NavbarProps {
   darkMode: boolean;
   toggleDarkMode: () => void;
-  isOpen: boolean; // Add isOpen as a prop
-  setIsOpen: (open: boolean) => void; // Add setIsOpen as a prop
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
 }
 
 function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
   const [searchTerm, setSearchTerm] = useState<string>("");
 
+  const searchInputRef = useRef<HTMLInputElement | null>(null); // Create a ref for the input
+
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === "Escape") {
       setIsOpen(false);
@@ -33,64 +31,105 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
 
   useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
-    
+
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
 
+  // Effect to autofocus the input when the modal opens
+  useEffect(() => {
+    if (isOpen && searchInputRef.current) {
+      searchInputRef.current.focus(); // Autofocus the input
+    }
+  }, [isOpen]);
+
   return (
-    <nav className={`p-4 fixed w-full z-10 shadow-lg ${darkMode ? 'bg-gray-800' : 'bg-violet-700'} text-white`}>
+    <nav
+      className={`border-gray-400 p-2 fixed w-full z-10 shadow-lg ${
+        darkMode ? "bg-[#020611]" : "bg-violet-700"
+      } text-white`}
+    >
       <div className="container mx-auto flex justify-between items-center">
         <Link href="/" className="flex items-center space-x-2">
-          <Image 
-            src="/icon.ico" 
+          <Image
+            src="/icon.ico"
             width={40}
             height={40}
             alt="ML4E"
             priority
             quality={90}
           />
-          <span className="text-2xl font-bold tracking-wider">ML4E</span>
+          <span className="text-xl font-bold tracking-wider">ML4E</span>
         </Link>
 
         <div className="flex items-center space-x-4">
+          {/* New navigation links */}
+          <Link href="/about" className="hidden md:block">About</Link>
+          <Link href="/community" className="hidden md:block">Community</Link>
+          <Link href="/datasets" className="hidden md:block">Datasets</Link>
+          <Link href="/learn" className="hidden md:block">Learn</Link>
+          <Link href="/models" className="hidden md:block">Models</Link>
+
           <Dialog open={isOpen} onOpenChange={setIsOpen}>
             <DialogTrigger asChild>
-              <Button variant="outline" className="hidden md:flex items-center w-full max-w-xs w-60 h-10 rounded-lg" onClick={() => setIsOpen(true)}>
-                <Search className="text-violet-700" />
-                <span className="ml-auto text-gray-400">Command + K</span>
+              <Button
+                variant="outline"
+                className="hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl bg-[#1f2937] border-none outline-none hover:bg-[#425167]"
+                onClick={() => setIsOpen(true)}
+              >
+                <Search
+                  className={darkMode ? "text-gray-400" : "text-violet-700"}
+                />
+                <span className="ml-2 text-[#999595]">Search</span>
+                <span className="ml-24 text-gray-400 text-sm">Command + K</span>
               </Button>
             </DialogTrigger>
-            <DialogContent className={`bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl mx-auto ${isOpen ? 'backdrop-blur-md' : ''}`}>
+            <DialogContent
+              className={`p-6 rounded-lg shadow-lg w-full max-w-2xl outline-none border-none mb-12 max-h-full ${
+                darkMode ? "bg-[#020611]" : "bg-white"
+              }`}
+              style={{ marginTop: "20px", position: "absolute", top: "60px" }} // Adjust top position
+            >
               <DialogTitle className="sr-only">Search</DialogTitle>
-              <div className="relative">
-                <input 
-                  type="text" 
-                  placeholder="Search..." 
+              <div className="relative flex items-center w-full ">
+                <button className="absolute left-3 text-gray-400">
+                  <Search />
+                </button>
+                <input
+                  type="text"
+                  placeholder="Search..."
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
-                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-700"
+                  ref={searchInputRef}
+                  className={`w-[95%] pl-10 pr-12 ml-2 border rounded-lg focus:outline-none focus:ring-0 bg-inherit outline-none border-none text-lg ${
+                    darkMode
+                      ? "text-white bg-[#1f2937] border-gray-600"
+                      : "text-gray-900 bg-white border-gray-300"
+                  }`}
+                  style={{
+                    transition: "color 0.3s ease, background-color 0.3s ease",
+                  }}
                 />
-                <button className="absolute right-3 top-3 text-violet-700">
-                  <Search />
+                <button
+                  className="w-[5%] p-2 text-gray-400 hover:text-gray-500"
+                  onClick={() => setIsOpen(false)}
+                >
+                  Esc
                 </button>
               </div>
-              <ul className="mt-4 w-full">
-                {commands.map(command => (
-                  <li key={command.label} className="p-2 hover:bg-gray-200 rounded">
-                    <Link href={command.href}>{command.label}</Link>
-                  </li>
-                ))}
-              </ul>
             </DialogContent>
           </Dialog>
 
-          <button 
+          <button
             onClick={toggleDarkMode}
             className="hidden md:flex p-2 rounded-full hover:bg-violet-500 focus:outline-none"
           >
-            {darkMode ? <Sun className="text-yellow-500" /> : <Moon className="text-blue-500" />}
+            {darkMode ? (
+              <Sun className="text-yellow-500" />
+            ) : (
+              <Moon className="text-blue-500" />
+            )}
           </button>
 
           <button
@@ -106,25 +145,55 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
 }
 
 export default function Home() {
-  const [darkMode, setDarkMode] = useState<boolean>(false); // State for dark mode
-  const [isOpen, setIsOpen] = useState<boolean>(false); // To control the dialog state
+  const [darkMode, setDarkMode] = useState<boolean>(true);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const toggleDarkMode = () => {
-    setDarkMode(prevMode => !prevMode);
+    setDarkMode((prevMode) => !prevMode);
   };
 
   return (
-    <div className={`${darkMode ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'} ${isOpen ? 'blur-sm' : ''}`}>
-      <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} isOpen={isOpen} setIsOpen={setIsOpen} />
-      <main className="flex justify-center items-center flex-col min-h-screen pt-16">
-        <h1 className="font-bold text-4xl pb-3 tracking-wide">ML4E</h1>
-        <p className="font-light text-2xl px-4 text-center">
-          Machine Learning for Everyone is a collection of resources to help you
-          learn machine learning.
-        </p>
-        <Link href="/learn">
-          <Button className="mt-5">Start Learning</Button>
-        </Link>
+    <div
+      className={`${
+        darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
+      } ${isOpen ? "blur-sm" : ""}`}
+    >
+      <Navbar
+        darkMode={darkMode}
+        toggleDarkMode={toggleDarkMode}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+      />
+      <main
+        className={`${
+          darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
+        } flex justify-center items-center flex-col min-h-screen pt-16`}
+      >
+        {/* Hero Section with Grid Background */}
+        <section className="custom-grid w-full flex justify-center items-center flex-col h-[75vh] relative">
+          <p className="font-bold">The road to knowledge starts from here.</p>
+          <div className="relative grid grid-cols-1 grid-rows-1 p-4 text-center z-10">
+            <p className="font-bold text-6xl mt-4 ">
+              Learn in-depth Machine Learning with ML4E
+            </p>
+          </div>
+          <Link href="/learn">
+            <Button className="learn-button mt-8 z-10 p-6 bg-white text-black text-2xl relative overflow-hidden">
+              <span className="learn-text transition-transform duration-300">
+                Learn Now
+              </span>
+              <span className="learn-emoji absolute inset-0 flex items-center justify-center transition-transform duration-300 transform translate-x-full opacity-0">
+                👨‍💻
+              </span>
+            </Button>
+          </Link>
+
+          {/* Dark/Light mode background grid */}
+          <div className="absolute inset-0 pointer-events-none grid-background"></div>
+          {/* Flare Effect */}
+          <div className="flare-effect"></div>
+          <div className="flare-effect-1"></div>
+        </section>
       </main>
     </div>
   );
diff --git a/app/globals.css b/app/globals.css
index eaabbe8..fff683c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -79,3 +79,87 @@
   }
 }
 
+.grid-background {
+  background-image: 
+    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+  background-size: 40px 40px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+  /* position: relative; Ensure the parent element is positioned */
+  overflow: hidden;   /* Clip any overflow to maintain the circular shape */
+}
+
+.grid-background::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 150px; /* Adjust the width for the area to blur */
+  height: 200px; /* Match the height to width for a quarter circle */
+  backdrop-filter: blur(5px); /* Add the blur effect */
+  -webkit-backdrop-filter: blur(10px); /* Safari support */
+  z-index: 1; /* Ensure it applies to the background only */
+  pointer-events: none; /* Prevent interaction */
+  
+  /* Create the quarter circle effect */
+  border-top-left-radius: 200px; /* Set radius to create a quarter circle */
+}
+/* .flare-effect {
+  content: '';
+  position: absolute;
+  top: 0; /* Start from the top */
+  /* left: 0; Start from the left */
+  /* width: 150%; Extend beyond the container */
+  /* height: 150%; Extend beyond the container */
+  /* background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), rgba(128, 0, 128, 0.4)); */
+  /* filter: blur(60px); Add blur for a softer effect */
+  /* z-index: 0; Place it behind other content */
+/* } */ 
+.flare-effect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px; /* Adjust width */
+  height: 1000px; /* Adjust height */
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(128, 0, 128, 0.4) 100%);
+  filter: blur(60px); /* Adjust blur radius */
+  opacity: 0.5; /* Adjust opacity */
+  pointer-events: none; /* Prevent interaction */
+  z-index: 0; /* Set behind other elements */
+  rotate:125deg;
+  margin-left: 400px;
+  margin-top: -400px;
+}
+.flare-effect-1{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px; /* Adjust width */
+  height: 800px; /* Adjust height */
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(128, 0, 128, 0.4) 100%);
+  filter: blur(60px); /* Adjust blur radius */
+  opacity: 0.5; /* Adjust opacity */
+  pointer-events: none; /* Prevent interaction */
+  z-index: 0; /* Set behind other elements */
+  rotate:125deg;
+  margin-left: 50px;
+  margin-top: -400px;
+}
+.learn-button {
+  position: relative;
+  cursor: pointer;
+}
+
+.learn-button:hover .learn-text {
+  transform: translateX(100%); /* Move text to the right */
+  opacity: 0; /* Make text invisible */
+}
+
+.learn-button:hover .learn-emoji {
+  transform: translateX(0); /* Move emoji into place */
+  opacity: 1; /* Show emoji */
+}

From e9920b83297334e33dc4dd0c2fc94cd1c0b95a42 Mon Sep 17 00:00:00 2001
From: Aayush Kumar Bhat <kumarbhataayush@gmail.com>
Date: Thu, 31 Oct 2024 09:51:41 +0530
Subject: [PATCH 5/6] Light Mode Changes

---
 app/(root)/page.tsx | 200 ++++++++++++++++++++++++++++++--------------
 app/globals.css     |  27 +++++-
 2 files changed, 160 insertions(+), 67 deletions(-)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index 257242e..08ef14c 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Link from "next/link";
-import { useState, useEffect, useRef } from "react"; // Import useRef
+import { useState, useEffect, useRef, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -9,7 +9,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import Image from "next/image";
-import { Search, Moon, Sun, Menu } from "lucide-react";
+import { Search, Moon, Sun, MoreVertical } from "lucide-react";
 
 interface NavbarProps {
   darkMode: boolean;
@@ -20,67 +20,82 @@ interface NavbarProps {
 
 function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
   const [searchTerm, setSearchTerm] = useState<string>("");
+  const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
 
-  const searchInputRef = useRef<HTMLInputElement | null>(null); // Create a ref for the input
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      setIsOpen(false);
-    }
-  };
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+        setDropdownOpen(false);
+      }
+    },
+    [setIsOpen, setDropdownOpen]
+  );
 
   useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
-
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, []);
+  }, [handleKeyDown]);
 
-  // Effect to autofocus the input when the modal opens
   useEffect(() => {
     if (isOpen && searchInputRef.current) {
-      searchInputRef.current.focus(); // Autofocus the input
+      searchInputRef.current.focus();
     }
   }, [isOpen]);
 
+  const toggleDropdown = () => {
+    setDropdownOpen((prev) => !prev);
+  };
+
+  const handleDropdownItemClick = () => {
+    setDropdownOpen(false);
+  };
+
   return (
     <nav
       className={`border-gray-400 p-2 fixed w-full z-10 shadow-lg ${
-        darkMode ? "bg-[#020611]" : "bg-violet-700"
-      } text-white`}
+        darkMode ? "bg-[#020611] text-white" : "bg-white text-black"
+      }`}
     >
       <div className="container mx-auto flex justify-between items-center">
-        <Link href="/" className="flex items-center space-x-2">
-          <Image
-            src="/icon.ico"
-            width={40}
-            height={40}
-            alt="ML4E"
-            priority
-            quality={90}
-          />
-          <span className="text-xl font-bold tracking-wider">ML4E</span>
-        </Link>
-
-        <div className="flex items-center space-x-4">
-          {/* New navigation links */}
-          <Link href="/about" className="hidden md:block">About</Link>
-          <Link href="/community" className="hidden md:block">Community</Link>
-          <Link href="/datasets" className="hidden md:block">Datasets</Link>
-          <Link href="/learn" className="hidden md:block">Learn</Link>
-          <Link href="/models" className="hidden md:block">Models</Link>
+        {/* logo */}
+        <div className="flex items-center space-x-6">
+          <Link href="/" className="flex items-center space-x-2">
+            <Image
+              src="/icon.ico"
+              width={40}
+              height={40}
+              alt="ML4E"
+              priority
+              quality={90}
+            />
+            <span className="text-xl font-bold tracking-wider">ML4E</span>
+          </Link>
+          <Link href="/learn" className="hidden md:block">
+            Learn
+          </Link>
+          <Link href="/datasets" className="hidden md:block">
+            Datasets
+          </Link>
+          <Link href="/community" className="hidden md:block">
+            Community
+          </Link>
+        </div>
 
+        <div className="flex items-center justify-start space-x-4">
           <Dialog open={isOpen} onOpenChange={setIsOpen}>
             <DialogTrigger asChild>
               <Button
                 variant="outline"
-                className="hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl bg-[#1f2937] border-none outline-none hover:bg-[#425167]"
+                className={`hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl ${
+                  darkMode ? "bg-[#1f2937]" : "bg-[#f0f0f0]"
+                } border-none outline-none hover:bg-[#425167]`}
                 onClick={() => setIsOpen(true)}
               >
-                <Search
-                  className={darkMode ? "text-gray-400" : "text-violet-700"}
-                />
+                <Search className={darkMode ? "text-gray-400" : "text-black"} />
                 <span className="ml-2 text-[#999595]">Search</span>
                 <span className="ml-24 text-gray-400 text-sm">Command + K</span>
               </Button>
@@ -89,10 +104,10 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
               className={`p-6 rounded-lg shadow-lg w-full max-w-2xl outline-none border-none mb-12 max-h-full ${
                 darkMode ? "bg-[#020611]" : "bg-white"
               }`}
-              style={{ marginTop: "20px", position: "absolute", top: "60px" }} // Adjust top position
+              style={{ marginTop: "20px", position: "absolute", top: "60px" }}
             >
               <DialogTitle className="sr-only">Search</DialogTitle>
-              <div className="relative flex items-center w-full ">
+              <div className="relative flex items-center w-full">
                 <button className="absolute left-3 text-gray-400">
                   <Search />
                 </button>
@@ -102,10 +117,10 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
                   ref={searchInputRef}
-                  className={`w-[95%] pl-10 pr-12 ml-2 border rounded-lg focus:outline-none focus:ring-0 bg-inherit outline-none border-none text-lg ${
+                  className={`w-[95%] pl-10 pr-12 ml-2 border rounded-lg focus:outline-none focus:ring-0 bg-inherit text-lg ${
                     darkMode
                       ? "text-white bg-[#1f2937] border-gray-600"
-                      : "text-gray-900 bg-white border-gray-300"
+                      : "text-black bg-white border-gray-300"
                   }`}
                   style={{
                     transition: "color 0.3s ease, background-color 0.3s ease",
@@ -120,24 +135,79 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
               </div>
             </DialogContent>
           </Dialog>
+          <button
+            onClick={() => setIsOpen(true)}
+            className={`md:hidden p-2 rounded-full ${
+              darkMode ? "text-white" : "text-black"
+            }`}
+          >
+            <Search />
+          </button>
+          <button
+            className="md:hidden focus:outline-none"
+            onClick={toggleDropdown}
+          >
+            <MoreVertical className="text-black" />
+          </button>
+          {/* Dropdown Menu for Small Screens */}
+          {dropdownOpen && (
+            <div
+              className={`absolute right-1 top-12 w-48 rounded-lg shadow-lg z-20 p-2 ${
+                darkMode ? "bg-[#1f2937] text-white" : "bg-white text-black"
+              }`}
+            >
+              <Link
+                href="/"
+                onClick={handleDropdownItemClick}
+                className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+              >
+                Home
+              </Link>
+              <Link
+                href="/learn"
+                onClick={handleDropdownItemClick}
+                className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+              >
+                Learn
+              </Link>
+              <Link
+                href="/about"
+                onClick={handleDropdownItemClick}
+                className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+              >
+                About
+              </Link>
+              <div className="flex items-center justify-between w-full px-4 py-2">
+                <span>Theme</span>
+                <button
+                  onClick={() => {
+                    handleDropdownItemClick();
+                    toggleDarkMode();
+                  }}
+                  className="p-1"
+                >
+                  {darkMode ? (
+                    <Sun className="text-yellow-500" />
+                  ) : (
+                    <Moon className="text-blue-500" />
+                  )}
+                </button>
+              </div>
+            </div>
+          )}
 
+          {/* Theme Toggle Button for Large Screens */}
           <button
             onClick={toggleDarkMode}
-            className="hidden md:flex p-2 rounded-full hover:bg-violet-500 focus:outline-none"
+            className="hidden md:flex items-center p-2 rounded-full hover:bg-gray-200 focus:outline-none"
           >
+            <span className="mr-2">Theme</span>
             {darkMode ? (
               <Sun className="text-yellow-500" />
             ) : (
               <Moon className="text-blue-500" />
             )}
           </button>
-
-          <button
-            className="md:hidden focus:outline-none"
-            onClick={() => setIsOpen(!isOpen)}
-          >
-            <Menu className="text-white" />
-          </button>
         </div>
       </div>
     </nav>
@@ -156,8 +226,16 @@ export default function Home() {
     <div
       className={`${
         darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
-      } ${isOpen ? "blur-sm" : ""}`}
+      } ${isOpen ? "blur-sm" : ""} relative`}
+      style={{ overflowX: "hidden" }} // Prevent horizontal overflow
     >
+      <div className="grid-background"></div> {/* Add the grid background */}
+      <div
+        className={`flare-effect ${darkMode ? "dark-flare" : "light-flare"}`}
+      ></div>
+      <div
+        className={`flare-effect-1 ${darkMode ? "dark-flare" : "light-flare"}`}
+      ></div>
       <Navbar
         darkMode={darkMode}
         toggleDarkMode={toggleDarkMode}
@@ -169,7 +247,6 @@ export default function Home() {
           darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
         } flex justify-center items-center flex-col min-h-screen pt-16`}
       >
-        {/* Hero Section with Grid Background */}
         <section className="custom-grid w-full flex justify-center items-center flex-col h-[75vh] relative">
           <p className="font-bold">The road to knowledge starts from here.</p>
           <div className="relative grid grid-cols-1 grid-rows-1 p-4 text-center z-10">
@@ -178,21 +255,14 @@ export default function Home() {
             </p>
           </div>
           <Link href="/learn">
-            <Button className="learn-button mt-8 z-10 p-6 bg-white text-black text-2xl relative overflow-hidden">
-              <span className="learn-text transition-transform duration-300">
-                Learn Now
-              </span>
-              <span className="learn-emoji absolute inset-0 flex items-center justify-center transition-transform duration-300 transform translate-x-full opacity-0">
-                👨‍💻
-              </span>
+            <Button
+              className={`learn-button mt-8 z-10 hover:shadow-2xl ${
+                darkMode ? "bg-[#020617] text-white" : "bg-[#28292d] text-white"
+              } text-lg px-8 py-4 rounded-lg`}
+            >
+              Start Learning
             </Button>
           </Link>
-
-          {/* Dark/Light mode background grid */}
-          <div className="absolute inset-0 pointer-events-none grid-background"></div>
-          {/* Flare Effect */}
-          <div className="flare-effect"></div>
-          <div className="flare-effect-1"></div>
         </section>
       </main>
     </div>
diff --git a/app/globals.css b/app/globals.css
index fff683c..a037927 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -89,10 +89,33 @@
   height: 100%;
   z-index: 0;
   pointer-events: none;
-  /* position: relative; Ensure the parent element is positioned */
-  overflow: hidden;   /* Clip any overflow to maintain the circular shape */
 }
 
+.dark .grid-background {
+  background-image: 
+    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+}
+
+.light .grid-background {
+  background-image: 
+    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+}
+
+.flare-effect, .flare-effect-1 {
+  /* Existing flare-effect styling */
+}
+
+.dark .flare-effect, .dark .flare-effect-1 {
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(128, 0, 128, 0.4) 100%);
+}
+
+.light .flare-effect, .light .flare-effect-1 {
+  background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(128, 128, 255, 0.4) 100%);
+}
+
+
 .grid-background::before {
   content: '';
   position: absolute;

From 65d13e017301f9d61e5d7f6089b45bb8a62756bb Mon Sep 17 00:00:00 2001
From: Aayush Kumar Bhat <kumarbhataayush@gmail.com>
Date: Thu, 31 Oct 2024 23:47:39 +0530
Subject: [PATCH 6/6] Navbar

---
 app/(root)/page.tsx | 319 +++++++++++++++++++++++++-------------------
 1 file changed, 179 insertions(+), 140 deletions(-)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index 08ef14c..a966c62 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -54,13 +54,25 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
     setDropdownOpen(false);
   };
 
+  const handleToggleDarkMode = () => {
+    if (!darkMode) {
+      toggleDarkMode(); // Only toggle if currently light mode
+    }
+  };
+
+  const handleToggleLightMode = () => {
+    if (darkMode) {
+      toggleDarkMode(); // Only toggle if currently dark mode
+    }
+  };
+
   return (
     <nav
-      className={`border-gray-400 p-2 fixed w-full z-10 shadow-lg ${
+      className={`p-2 fixed w-full flex z-10 shadow-lg ${
         darkMode ? "bg-[#020611] text-white" : "bg-white text-black"
       }`}
     >
-      <div className="container mx-auto flex justify-between items-center">
+      <div className="container justify-between items-center w-full">
         {/* logo */}
         <div className="flex items-center space-x-6">
           <Link href="/" className="flex items-center space-x-2">
@@ -84,129 +96,146 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
             Community
           </Link>
         </div>
-
-        <div className="flex items-center justify-start space-x-4">
-          <Dialog open={isOpen} onOpenChange={setIsOpen}>
-            <DialogTrigger asChild>
-              <Button
-                variant="outline"
-                className={`hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl ${
-                  darkMode ? "bg-[#1f2937]" : "bg-[#f0f0f0]"
-                } border-none outline-none hover:bg-[#425167]`}
-                onClick={() => setIsOpen(true)}
-              >
-                <Search className={darkMode ? "text-gray-400" : "text-black"} />
-                <span className="ml-2 text-[#999595]">Search</span>
-                <span className="ml-24 text-gray-400 text-sm">Command + K</span>
-              </Button>
-            </DialogTrigger>
-            <DialogContent
-              className={`p-6 rounded-lg shadow-lg w-full max-w-2xl outline-none border-none mb-12 max-h-full ${
-                darkMode ? "bg-[#020611]" : "bg-white"
-              }`}
-              style={{ marginTop: "20px", position: "absolute", top: "60px" }}
+      </div>
+      <div className="flex items-center justify-end space-x-4">
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+          <DialogTrigger asChild>
+            <Button
+              variant="outline"
+              className={`hidden md:flex items-center w-full max-w-xs h-10 rounded-2xl ${
+                darkMode ? "bg-[#1f2937]" : "bg-[#f0f0f0]"
+              } border-none outline-none hover:bg-[#425167]`}
+              onClick={() => setIsOpen(true)}
             >
-              <DialogTitle className="sr-only">Search</DialogTitle>
-              <div className="relative flex items-center w-full">
-                <button className="absolute left-3 text-gray-400">
-                  <Search />
-                </button>
-                <input
-                  type="text"
-                  placeholder="Search..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  ref={searchInputRef}
-                  className={`w-[95%] pl-10 pr-12 ml-2 border rounded-lg focus:outline-none focus:ring-0 bg-inherit text-lg ${
-                    darkMode
-                      ? "text-white bg-[#1f2937] border-gray-600"
-                      : "text-black bg-white border-gray-300"
-                  }`}
-                  style={{
-                    transition: "color 0.3s ease, background-color 0.3s ease",
-                  }}
-                />
-                <button
-                  className="w-[5%] p-2 text-gray-400 hover:text-gray-500"
-                  onClick={() => setIsOpen(false)}
-                >
-                  Esc
-                </button>
-              </div>
-            </DialogContent>
-          </Dialog>
-          <button
-            onClick={() => setIsOpen(true)}
-            className={`md:hidden p-2 rounded-full ${
-              darkMode ? "text-white" : "text-black"
+              <Search className={darkMode ? "text-gray-400" : "text-black"} />
+              <span className="ml-2 text-[#999595]">Search</span>
+              <span className="ml-24 text-gray-400 text-sm">Command + K</span>
+            </Button>
+          </DialogTrigger>
+          <DialogContent
+            className={`[&>button]:hidden p-6 rounded-lg shadow-lg w-full max-w-2xl outline-none border-none mb-12 max-h-full ${
+              darkMode ? "bg-[#020611]" : "bg-white"
             }`}
+            style={{ marginTop: "20px", position: "absolute", top: "60px" }}
           >
-            <Search />
-          </button>
-          <button
-            className="md:hidden focus:outline-none"
-            onClick={toggleDropdown}
+            <DialogTitle className="sr-only">Search</DialogTitle>
+            <div className="relative flex items-center w-full">
+              <button className="absolute left-3 text-gray-400">
+                <Search />
+              </button>
+              <input
+                type="text"
+                placeholder="Search..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                ref={searchInputRef}
+                className={`w-[95%] pl-10 pr-12 ml-2 border rounded-lg focus:outline-none focus:ring-0 bg-inherit text-lg ${
+                  darkMode
+                    ? "text-white bg-[#1f2937] border-gray-600"
+                    : "text-black bg-white border-gray-300"
+                }`}
+                style={{
+                  transition: "color 0.3s ease, background-color 0.3s ease",
+                }}
+              />
+              <button
+                className="w-[5%] p-2 text-gray-400 hover:text-gray-500"
+                onClick={() => setIsOpen(false)}
+              >
+                Esc
+              </button>
+            </div>
+          </DialogContent>
+        </Dialog>
+        <button
+          onClick={() => setIsOpen(true)}
+          className={`md:hidden p-2 rounded-full ${
+            darkMode ? "text-white" : "text-black"
+          }`}
+        >
+          <Search />
+        </button>
+        <button
+          className="md:hidden focus:outline-none"
+          onClick={toggleDropdown}
+        >
+          <MoreVertical className={darkMode ? "text-white" : "text-black"} />
+        </button>
+        {/* Dropdown Menu for Small Screens */}
+        {dropdownOpen && (
+          <div
+            className={`absolute right-1 top-12 w-48 rounded-lg shadow-lg z-20 p-2 ${
+              darkMode ? "bg-[#1f2937] text-white" : "bg-white text-black"
+            }`}
           >
-            <MoreVertical className="text-black" />
-          </button>
-          {/* Dropdown Menu for Small Screens */}
-          {dropdownOpen && (
-            <div
-              className={`absolute right-1 top-12 w-48 rounded-lg shadow-lg z-20 p-2 ${
-                darkMode ? "bg-[#1f2937] text-white" : "bg-white text-black"
-              }`}
+            <Link
+              href="/"
+              onClick={handleDropdownItemClick}
+              className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
             >
-              <Link
-                href="/"
-                onClick={handleDropdownItemClick}
-                className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
-              >
-                Home
-              </Link>
-              <Link
-                href="/learn"
-                onClick={handleDropdownItemClick}
-                className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
-              >
-                Learn
-              </Link>
-              <Link
-                href="/about"
-                onClick={handleDropdownItemClick}
-                className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
-              >
-                About
-              </Link>
-              <div className="flex items-center justify-between w-full px-4 py-2">
-                <span>Theme</span>
+              Home
+            </Link>
+            <Link
+              href="/learn"
+              onClick={handleDropdownItemClick}
+              className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+            >
+              Learn
+            </Link>
+            <Link
+              href="/about"
+              onClick={handleDropdownItemClick}
+              className="block w-full px-4 py-2 hover:bg-gray-200 rounded-lg"
+            >
+              About
+            </Link>
+            <div className="flex items-center justify-between w-full px-4 py-2">
+              <span>Theme</span>
+              <div className="flex space-x-2">
+                {/* Sun Button for Light Mode */}
+                <button
+                  onClick={handleToggleLightMode}
+                  className={`p-2 rounded-full ${
+                    !darkMode ? "bg-[#e4e0e0]" : ""
+                  }`}
+                  aria-label="Switch to Light Mode"
+                >
+                  <Sun />
+                </button>
+
+                {/* Moon Button for Dark Mode */}
                 <button
-                  onClick={() => {
-                    handleDropdownItemClick();
-                    toggleDarkMode();
-                  }}
-                  className="p-1"
+                  onClick={handleToggleDarkMode}
+                  className={`p-2 rounded-full ${
+                    darkMode ? "bg-[#686868]" : ""
+                  }`}
+                  aria-label="Switch to Dark Mode"
                 >
-                  {darkMode ? (
-                    <Sun className="text-yellow-500" />
-                  ) : (
-                    <Moon className="text-blue-500" />
-                  )}
+                  <Moon />
                 </button>
               </div>
             </div>
-          )}
+          </div>
+        )}
 
-          {/* Theme Toggle Button for Large Screens */}
+        {/* Theme Toggle Button for Large Screens */}
+        <div className="hidden md:flex items-center space-x-0.5">
+          {/* Sun Button for Light Mode */}
           <button
-            onClick={toggleDarkMode}
-            className="hidden md:flex items-center p-2 rounded-full hover:bg-gray-200 focus:outline-none"
+            onClick={handleToggleLightMode}
+            className={`p-2 rounded-full ${!darkMode ? "bg-[#e4e0e0]" : ""}`}
+            aria-label="Switch to Light Mode"
           >
-            <span className="mr-2">Theme</span>
-            {darkMode ? (
-              <Sun className="text-yellow-500" />
-            ) : (
-              <Moon className="text-blue-500" />
-            )}
+            <Sun />
+          </button>
+
+          {/* Moon Button for Dark Mode */}
+          <button
+            onClick={handleToggleDarkMode}
+            className={`p-2 rounded-full ${darkMode ? "bg-[#686868]" : ""}`}
+            aria-label="Switch to Dark Mode"
+          >
+            <Moon />
           </button>
         </div>
       </div>
@@ -215,27 +244,30 @@ function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) {
 }
 
 export default function Home() {
-  const [darkMode, setDarkMode] = useState<boolean>(true);
+  const [darkMode, setDarkMode] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  // Load theme from localStorage on mount
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("darkMode");
+    if (savedTheme) {
+      setDarkMode(JSON.parse(savedTheme));
+    }
+  }, []);
+
+  // Toggle theme and save it to localStorage
   const toggleDarkMode = () => {
-    setDarkMode((prevMode) => !prevMode);
+    setDarkMode((prevMode) => {
+      const newMode = !prevMode;
+      localStorage.setItem("darkMode", JSON.stringify(newMode));
+      return newMode;
+    });
   };
 
   return (
     <div
-      className={`${
-        darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
-      } ${isOpen ? "blur-sm" : ""} relative`}
-      style={{ overflowX: "hidden" }} // Prevent horizontal overflow
+      className={darkMode ? "bg-[#020611] text-white" : "bg-white text-black"}
     >
-      <div className="grid-background"></div> {/* Add the grid background */}
-      <div
-        className={`flare-effect ${darkMode ? "dark-flare" : "light-flare"}`}
-      ></div>
-      <div
-        className={`flare-effect-1 ${darkMode ? "dark-flare" : "light-flare"}`}
-      ></div>
       <Navbar
         darkMode={darkMode}
         toggleDarkMode={toggleDarkMode}
@@ -245,25 +277,32 @@ export default function Home() {
       <main
         className={`${
           darkMode ? "bg-[#030712] text-white" : "bg-white text-gray-900"
-        } flex justify-center items-center flex-col min-h-screen pt-16`}
+        } pt-20 transition-colors duration-300 `}
+        style={{
+          minHeight: "100vh",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
       >
-        <section className="custom-grid w-full flex justify-center items-center flex-col h-[75vh] relative">
-          <p className="font-bold">The road to knowledge starts from here.</p>
-          <div className="relative grid grid-cols-1 grid-rows-1 p-4 text-center z-10">
-            <p className="font-bold text-6xl mt-4 ">
-              Learn in-depth Machine Learning with ML4E
-            </p>
-          </div>
+        {/* Add your main content here */}
+        <div className="p-4 text-center max-w-2xl">
+          <h1 className="text-4xl font-bold">Welcome to ML4E</h1>
+          <p className="mt-4">
+            Explore the world of Machine Learning with easy-to-understand
+            tutorials, datasets, and a vibrant community.
+          </p>
           <Link href="/learn">
-            <Button
-              className={`learn-button mt-8 z-10 hover:shadow-2xl ${
-                darkMode ? "bg-[#020617] text-white" : "bg-[#28292d] text-white"
-              } text-lg px-8 py-4 rounded-lg`}
-            >
-              Start Learning
+            <Button className="learn-button mt-8 z-10 p-6 bg-white text-black text-2xl relative overflow-hidden">
+              <span className="learn-text transition-transform duration-300">
+                Learn Now
+              </span>
+              <span className="learn-emoji absolute inset-0 flex items-center justify-center transition-transform duration-300 transform translate-x-full opacity-0">
+                👨‍💻
+              </span>
             </Button>
           </Link>
-        </section>
+        </div>
       </main>
     </div>
   );