diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx index 3a45f5d..a966c62 100644 --- a/app/(root)/page.tsx +++ b/app/(root)/page.tsx @@ -1,18 +1,309 @@ -import { Button } from "@/components/ui/button"; +"use client"; import Link from "next/link"; +import { useState, useEffect, useRef, useCallback } 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, MoreVertical } from "lucide-react"; + +interface NavbarProps { + darkMode: boolean; + toggleDarkMode: () => void; + isOpen: boolean; + setIsOpen: (open: boolean) => void; +} + +function Navbar({ darkMode, toggleDarkMode, isOpen, setIsOpen }: NavbarProps) { + const [searchTerm, setSearchTerm] = useState(""); + const [dropdownOpen, setDropdownOpen] = useState(false); + const searchInputRef = useRef(null); + + 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]); + + useEffect(() => { + if (isOpen && searchInputRef.current) { + searchInputRef.current.focus(); + } + }, [isOpen]); + + const toggleDropdown = () => { + setDropdownOpen((prev) => !prev); + }; + + const handleDropdownItemClick = () => { + 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 ( + + ); +} export default function Home() { + const [darkMode, setDarkMode] = useState(false); + const [isOpen, setIsOpen] = useState(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) => { + const newMode = !prevMode; + localStorage.setItem("darkMode", JSON.stringify(newMode)); + return newMode; + }); + }; + return ( -
-

ML4E

-

- Machine Learning for Everyone is a collection of resources to help you learn machine learning. -

- - - -
+
+ +
+ {/* Add your main content here */} +
+

Welcome to ML4E

+

+ Explore the world of Machine Learning with easy-to-understand + tutorials, datasets, and a vibrant community. +

+ + + +
+
+
); } diff --git a/app/about/layout.tsx b/app/about/layout.tsx new file mode 100644 index 0000000..6add61c --- /dev/null +++ b/app/about/layout.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Metadata } from 'next'; +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 ( + +
+ {children} +
+ ) +} + 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 ( +
this is about page
+ ) +} + +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..93ff9bb --- /dev/null +++ b/app/community/layout.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Metadata } from 'next'; + +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 ( + +
+ {children} +
+ ) +} + 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 ( +
this is community page
+ ) +} + +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..93ff9bb --- /dev/null +++ b/app/datasets/layout.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Metadata } from 'next'; + +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 ( + +
+ {children} +
+ ) +} + 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 ( +
this is dataset page
+ ) +} + +export default page \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index eaabbe8..a037927 100644 --- a/app/globals.css +++ b/app/globals.css @@ -79,3 +79,110 @@ } } +.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; +} + +.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; + 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 */ +} diff --git a/app/models/layout.tsx b/app/models/layout.tsx new file mode 100644 index 0000000..93ff9bb --- /dev/null +++ b/app/models/layout.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Metadata } from 'next'; + +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 ( + +
+ {children} +
+ ) +} + 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 ( +
this is models page
+ ) +} + +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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +DialogContent.displayName = DialogPrimitive.Content.displayName + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogHeader.displayName = "DialogHeader" + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogFooter.displayName = "DialogFooter" + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogTitle.displayName = DialogPrimitive.Title.displayName + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +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