diff --git a/app/_components/Header.tsx b/app/_components/Header.tsx new file mode 100644 index 0000000..db87d24 --- /dev/null +++ b/app/_components/Header.tsx @@ -0,0 +1,129 @@ +import Image from 'next/image' +import React from 'react' +import { Button } from "@/components/ui/button"; +import Link from "next/link"; + +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, +} from "@/components/ui/navigation-menu"; + +const courses = [ + { + id: 1, + name: 'HTML', + desc: 'Learn the fundamentals of HTML and build the structure of modern web pages.', + path: '/course/1/detail' + }, + { + id: 2, + name: 'CSS', + desc: 'Master CSS to style and design responsive, visually appealing web layouts.', + path: '/course/2/detail' + }, + { + id: 3, + name: 'React', + desc: 'Build dynamic and interactive web applications using the React JavaScript library.', + path: '/course/3/detail' + }, + { + id: 4, + name: 'React Advanced', + desc: 'Deep dive into advanced React concepts including hooks, state management, performance optimization, and architectural patterns.', + path: '/course/4/detail' + }, + { + id: 5, + name: 'Python', + desc: 'Learn Python programming from basics to intermediate level, covering logic building, functions, and real-world applications.', + path: '/course/5/detail' + }, + { + id: 6, + name: 'Python Advanced', + desc: 'Master advanced Python concepts such as OOP, modules, APIs, data processing, and automation.', + path: '/course/6/detail' + }, + { + id: 7, + name: 'Generative AI', + desc: 'Explore prompt engineering, LLMs, embeddings, image generation, and build GenAI-powered applications.', + path: '/course/7/detail' + }, + { + id: 8, + name: 'Machine Learning', + desc: 'Understand ML concepts, algorithms, data preprocessing, model training, evaluation, and deployment.', + path: '/course/8/detail' + }, + { + id: 9, + name: 'JavaScript', + desc: 'Learn core JavaScript concepts, asynchronous programming, DOM manipulation, and modern ES6+ features.', + path: '/course/9/detail' + } +]; + + + +function Header() { + return ( +
+
+ logo +

CodeBox

+
+ + + + + {/* Item with dropdown */} + + Item One + + +
    + {courses.map((course,index)=>( +
    +

    {course.name}

    +

    {course.desc}

    +
    + ))} +
+ + + + + {/* Direct link item */} + + + Projects + + + + + Pricing + + + + + Contact + + + + + + + +
+ ) +} + +export default Header; diff --git a/app/_components/Hero.tsx b/app/_components/Hero.tsx new file mode 100644 index 0000000..b002ebb --- /dev/null +++ b/app/_components/Hero.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import Image from 'next/image' +import { Button } from '@/components/ui/button' + +function Hero() { + return ( +
+ hero +
+

Start Your

+

Coding Adventure

+ +

Beginner friendly coding course and Projects

+ + +
+
+ ) +} + +export default Hero \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 86fc709..9123c94 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono, Inter , Pixelify_Sans} from "next/font/google"; +import { Geist, Geist_Mono, Inter, Pixelify_Sans,Jersey_10 } from "next/font/google"; import "./globals.css"; +import { ThemeProvider } from "next-themes"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -12,15 +13,16 @@ const geistMono = Geist_Mono({ subsets: ["latin"], }); -const GameFont = Pixelify_Sans({ - variable : "--font-game", - subsets: ["latin"] +const gameFont = Jersey_10({ + variable: "--font-game", + subsets: ["latin"], + weight: ['400'] }); const inter = Inter({ variable: "--font-inter", - subsets :["latin"] -}) + subsets: ["latin"], +}); export const metadata: Metadata = { title: "Create Next App", @@ -29,16 +31,22 @@ export const metadata: Metadata = { export default function RootLayout({ children, -}: Readonly<{ +}: { children: React.ReactNode; -}>) { +}) { return ( - + - {children} + + {children} + ); diff --git a/app/page.tsx b/app/page.tsx index 8586606..b54cb73 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,9 +1,14 @@ import Image from "next/image"; +import Header from "./_components/Header"; +import Hero from "./_components/Hero"; export default function Home() { return ( -
-

HEllo Please chall jao na

+
+
+ + +
); } diff --git a/app/provider.tsx b/app/provider.tsx new file mode 100644 index 0000000..0c97054 --- /dev/null +++ b/app/provider.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { ThemeProvider as NextThemesProvider } from "next-themes" + +function Provider( { + children, + ...props + }: React.ComponentProps) { + return ( + + {children} + + ) +} + +export default Provider \ No newline at end of file diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 21409a0..f732ce1 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -19,6 +19,10 @@ const buttonVariants = cva( ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", link: "text-primary underline-offset-4 hover:underline", + pixel: + "bg-yellow-400 text-black border-2 border-black shadow-[0px_0px_0_0_#c69405,2px_2px_0_0_#c69405] active:shadow-[0_0_0_0_#000] hover:brightness-105", + + }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", diff --git a/public/banner.gif b/public/banner.gif new file mode 100644 index 0000000..2403f8b Binary files /dev/null and b/public/banner.gif differ diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..c11b449 Binary files /dev/null and b/public/logo.png differ