[V0_FILE]markdown:file="README.md" isMerged="true" # [CodeGuru - Online Learning Platform](https://v0.app/chat/next-js-landing-page-mbFN2R89z7v?b=v0-preview-b_2T7CfPdUVpn&f=1&path=%2F) CodeGuru is a comprehensive online learning platform designed to help students master modern development technologies. With over 10,000+ active students and a 4.9/5 star rating, we provide hands-on courses with expert instructors and real-world projects. ### Key Features - **Professional Courses**: React, Node.js, Next.js, TypeScript, Web Design, and more - **Expert Instructors**: Learn from industry professionals with years of experience - **Real-World Projects**: Build portfolio-worthy applications - **Community Support**: Join a thriving community of learners and developers - **Responsive Design**: Seamless experience on all devices - **Dark Mode Ready**: Modern UI with gradient accents (Red to Cyan) ## Courses Offered 1. **React Mastery** - Build scalable web applications 2. **Node.js Backend** - Master server-side development 3. **Web Design Pro** - Create stunning UX/UI designs 4. **Next.js Full Stack** - Build complete applications 5. **TypeScript Advanced** - Become a TypeScript expert ## 🛠️ Tech Stack ### Core Framework - **Next.js 16.0.3** - React framework for production - **React 19.2.0** - UI library - **TypeScript 5** - Type-safe JavaScript ### Styling & UI - **Tailwind CSS 4.1.9** - Utility-first CSS framework - **Radix UI Components** - Accessible component library - **Lucide React** - Icon library ## 🚀 Getting Started ### Prerequisites - Node.js 18+ - pnpm (recommended) or npm ### Installation ```bash # Clone the repository git clone https://github.com/ravikanttarare95/code-guru.git cd code-guru # Install dependencies pnpm install # or npm install ``` ### Development ```bash # Start development server pnpm dev # or npm run dev ``` The application will be available at `http://localhost:3000` ### Build for Production ```bash # Build the project pnpm build # Start production server pnpm start ``` ## 📁 Project Structure ``` code-guru/ . ├── app │ ├── globals.css │ ├── layout.tsx │ └── page.tsx │ ├── components │ ├── button.tsx │ ├── contact-info-card.tsx │ ├── course-card.tsx │ ├── feature-card.tsx │ ├── footer.tsx │ ├── navbar.tsx │ └── theme-provider.tsx │ ├── config │ ├── contactInfo.ts │ ├── courses.ts │ ├── features.ts │ └── testimonials.ts │ ├── lib │ └── utils.ts │ ├── public │ └── (static assets like images, icons, etc.) │ ├── styles │ └── (custom global styles) │ ├── views │ ├── contact.tsx │ ├── courses.tsx │ ├── features.tsx │ ├── hero.tsx │ └── testimonials.tsx │ ├── components.json ├── next.config.mjs ├── package.json ├── postcss.config.mjs ├── tsconfig.json └── README.md [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" // updated metadata and added Inter font import type { Metadata } from "next" import { Geist, Geist_Mono, Inter } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) const _inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "CodeGuru - Master Modern Development", description: "Learn web development from industry experts. Master React, Node.js, and more with our comprehensive courses.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/button.tsx" isMerged="true" import type React from "react" interface ButtonProps { children: React.ReactNode variant?: "primary" | "secondary" | "outline" size?: "sm" | "md" | "lg" className?: string [key: string]: any } export default function Button({ children, variant = "primary", size = "md", className = "", ...props }: ButtonProps) { const baseStyles = "font-semibold rounded-lg transition cursor-pointer flex items-center justify-center gap-2" const variantStyles = { primary: "bg-gradient-to-br from-red-600 to-red-500 hover:shadow-sm hover:shadow-red-500/50", secondary: "bg-gradient-to-br from-red-500/80 to-red-500/80 hover:from-red-500/90 hover:to-red-500/90", outline: "border border-slate-700 hover:bg-slate-900", } const sizeStyles = { sm: "px-4 py-2 text-sm", md: "px-6 py-3 text-base", lg: "px-8 py-4 text-lg", } return ( ) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Menu, X } from "lucide-react" import Button from "@/components/button" export default function Navbar() { const [isOpen, setIsOpen] = useState(false) return (

CodeGuru {/* Desktop Navigation */}

Courses Why Us Reviews Contact

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isOpen && (

Courses Why Us Reviews Contact

)}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" isMerged="true" [V0_FILE]jpg:file="public/backend-architecture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/5L24qan4tZZjjki-1LYYRB/public/backend-architecture.jpg" isMerged="true" [V0_FILE]jpg:file="public/backend-server-architecture-nodejs.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/evuLghtWsGcskfJBDu-xEl/public/backend-server-architecture-nodejs.jpg" isMerged="true" [V0_FILE]jpg:file="public/female-instructor-avatar-emma.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/HudmZexL7wiGr_l_wLwnpE/public/female-instructor-avatar-emma.jpg" isMerged="true" [V0_FILE]jpg:file="public/female-instructor-avatar-lisa.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/KXjCa_qhGaEiGI3uGc7d0-/public/female-instructor-avatar-lisa.jpg" isMerged="true" [V0_FILE]jpg:file="public/female-instructor-avatar-sarah.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/LEgA4kRS_ebqx9Jxh021Eg/public/female-instructor-avatar-sarah.jpg" isMerged="true" [V0_FILE]jpg:file="public/female-student-avatar-maya.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/LrQzbipitBINo1FIu7_14F/public/female-student-avatar-maya.jpg" isMerged="true" [V0_FILE]jpg:file="public/full-stack-development-nextjs.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/VovjBpu9j76Kmflw3Q6DwO/public/full-stack-development-nextjs.jpg" isMerged="true" [V0_FILE]jpg:file="public/full-stack-development.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/2GckBXmrer6DLBPfcs9xhz/public/full-stack-development.jpg" isMerged="true" [V0_FILE]jpg:file="public/hero-section-interactive-learning-platform-dashboa.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/K6nMeeYbYHTznkGT4CkOM_/public/hero-section-interactive-learning-platform-dashboa.jpg" isMerged="true" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" isMerged="true" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" isMerged="true" [V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true" [V0_FILE]jpg:file="public/male-instructor-avatar-alex.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/jNxmnSjrjEn8Q-L2ApIwEN/public/male-instructor-avatar-alex.jpg" isMerged="true" [V0_FILE]jpg:file="public/male-instructor-avatar-mike.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/g53N1DjRolKR46U9iQaQ85/public/male-instructor-avatar-mike.jpg" isMerged="true" [V0_FILE]jpg:file="public/male-student-avatar-alex.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/3WwtlwtEhYhkrFHKWCErlG/public/male-student-avatar-alex.jpg" isMerged="true" [V0_FILE]jpg:file="public/male-student-avatar-james.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/ItjyerCOISJco3OoxIBESI/public/male-student-avatar-james.jpg" isMerged="true" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true" [V0_FILE]jpg:file="public/react-dashboard-web-development.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/abPLVFe9DAPt_HCpKVLVsQ/public/react-dashboard-web-development.jpg" isMerged="true" [V0_FILE]jpg:file="public/react-dashboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/E1VwghlO-RxCCj0hX67Wp8/public/react-dashboard.jpg" isMerged="true" [V0_FILE]png:file="public/typescript-code.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/tsh4pUuc79zy520759tlE4/public/typescript-code.png" isMerged="true" [V0_FILE]jpg:file="public/web-design-ui-ux-interface.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/stjMW3eQjKDc-YDuwuzaAk/public/web-design-ui-ux-interface.jpg" isMerged="true" [V0_FILE]jpg:file="public/web-design-ui.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_hR615fxBqOoZkFAJMZdgpOpBaH1B/cDBqvIvPyfOydYf83_sv9P/public/web-design-ui.jpg" isMerged="true" [V0_FILE]plaintext:file="views/.gitkeep" isMerged="true" [V0_FILE]typescript:file="config/courses.ts" isMerged="true" export const coursesData = [ { title: "React Mastery", description: "Build scalable web applications with React", price: 1499, oldPrice: 2499, tag: "Popular", startDate: "Jan 15", instructor: "Sarah Chen", instructorImage: "/female-instructor-avatar-sarah.jpg", image: "/react-dashboard-web-development.jpg", }, { title: "Node.js Backend", description: "Master server-side development with Node.js", price: 1299, oldPrice: 2199, tag: "Bestseller", startDate: "Jan 20", instructor: "Mike Johnson", instructorImage: "/male-instructor-avatar-mike.jpg", image: "/backend-server-architecture-nodejs.jpg", }, { title: "Web Design Pro", description: "Create stunning UX/UI designs", price: 1199, oldPrice: 1999, tag: "New", startDate: "Jan 25", instructor: "Emma Davis", instructorImage: "/female-instructor-avatar-emma.jpg", image: "/web-design-ui-ux-interface.jpg", }, { title: "Next.js Full Stack", description: "Build complete applications with Next.js", price: 1599, oldPrice: 2699, tag: "Advanced", startDate: "Feb 1", instructor: "Alex Kumar", instructorImage: "/male-instructor-avatar-alex.jpg", image: "/full-stack-development-nextjs.jpg", }, { title: "TypeScript Advanced", description: "Become a TypeScript expert", price: 1099, oldPrice: 1899, tag: "Featured", startDate: "Feb 5", instructor: "Lisa Wong", instructorImage: "/female-instructor-avatar-lisa.jpg", image: "/typescript-code.png", }, ] [V0_FILE]typescript:file="config/features.ts" isMerged="true" import { Code2, Zap, Users } from "lucide-react" export const featuresData = [ { icon: Code2, title: "Hands-On Projects", description: "Build real-world applications and add them to your portfolio", }, { icon: Zap, title: "Expert Instructors", description: "Learn from industry professionals with years of experience", }, { icon: Users, title: "Community Support", description: "Join a thriving community of learners and developers", }, ] [V0_FILE]typescript:file="config/testimonials.ts" isMerged="true" export const testimonialsData = [ { quote: "This course completely transformed my career. I landed a job at a top tech company within 3 months!", rating: 5, name: "James Wilson", role: "Senior Developer", company: "Tech Corp", studentImage: "/male-student-avatar-james.jpg", }, { quote: "The instructors are exceptional and the projects are real-world relevant. Best investment I've made!", rating: 5, name: "Maya Patel", role: "Full Stack Engineer", company: "StartupXYZ", studentImage: "/female-student-avatar-maya.jpg", }, { quote: "Comprehensive curriculum with amazing community support. Highly recommended!", rating: 5, name: "Alex Rodriguez", role: "Frontend Developer", company: "Digital Solutions", studentImage: "/male-student-avatar-alex.jpg", }, ] [V0_FILE]typescript:file="config/contactInfo.ts" isMerged="true" import { Mail, Phone, MessageSquare } from "lucide-react" export const contactInfoData = [ { icon: Mail, title: "Email Support", value: "support@codeguru.com", description: "We respond within 24 hours", }, { icon: Phone, title: "Phone Support", value: "+1 (555) 123-4567", description: "Mon-Fri, 9am-6pm EST", }, { icon: MessageSquare, title: "Live Chat", value: "Available on our platform", description: "Instant responses from our team", }, ] [V0_FILE]typescriptreact:file="components/course-card.tsx" isMerged="true" import { Star } from "lucide-react" import Button from "@/components/button" interface CourseCardProps { title: string description: string price: number oldPrice: number tag: string startDate: string instructor: string instructorImage: string image: string } export default function CourseCard({ title, description, price, oldPrice, tag, startDate, instructor, instructorImage, image, }: CourseCardProps) { return (

{tag}

{title}

{description}

{[...Array(5)].map((_, i) => ( ))}

(248)

₹{price} ₹{oldPrice} {Math.round((1 - price / oldPrice) * 100)}% off

{instructor}

📅 Starts {startDate}

) } [V0_FILE]typescriptreact:file="components/feature-card.tsx" isMerged="true" interface FeatureCardProps { icon: any title: string description: string } export default function FeatureCard({ icon: Icon, title, description }: FeatureCardProps) { return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="components/contact-info-card.tsx" isMerged="true" interface ContactInfoCardProps { icon: any title: string value: string description: string } export default function ContactInfoCard({ icon: Icon, title, value, description }: ContactInfoCardProps) { return (

{title}

{value}

{description}

) } [V0_FILE]typescriptreact:file="views/hero.tsx" isMerged="true" "use client" import Button from "@/components/button" import Link from "next/link" export default function Hero() { return (

{/* Left Content */}

Start Learning Today

Master Modern{" "} Development

Learn from industry experts and unlock your potential. Build real-world projects and advance your career in tech.

{/* Buttons */} {/* Trusted By */}

Trusted by 10,000+ students

{["⭐ 4.9/5", "📚 500+ Hours", "🚀 98% Success"].map((badge, i) => (

{badge}

))}

{/* Right Hero Image */}

{/* Gradient background */}

{/* Hero Image */} Interactive Learning Experience

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import Navbar from "@/components/navbar" import Hero from "@/views/hero" import Features from "@/views/features" import Courses from "@/views/courses" import Testimonials from "@/views/testimonials" import Contact from "@/views/contact" import Footer from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/section-header.tsx" isMerged="true" interface SectionHeaderProps { title: string description: string } export default function SectionHeader({ title, description }: SectionHeaderProps) { return (

{title}

{description}

) } [V0_FILE]typescriptreact:file="views/features.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import FeatureCard from "@/components/feature-card" import { featuresData } from "@/config/features" import SectionHeader from "@/components/section-header" export default function Features() { return (

{featuresData.map((feature, i) => ( ))}

) } [V0_FILE]typescriptreact:file="views/courses.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import CourseCard from "@/components/course-card" import { coursesData } from "@/config/courses" import SectionHeader from "@/components/section-header" export default function Courses() { return (

{coursesData.map((course, i) => ( ))}

) } [V0_FILE]typescriptreact:file="views/contact.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import type React from "react" import SectionHeader from "@/components/section-header" import Button from "@/components/button" import ContactInfoCard from "@/components/contact-info-card" import { contactInfoData } from "@/config/contactInfo" export default function Contact() { const [formData, setFormData] = useState({ name: "", email: "", message: "" }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() alert(`Thank you ${formData.name}! We'll get back to you soon.`) setFormData({ name: "", email: "", message: "" }) } return (

{/* Form */}

Name setFormData({ ...formData, name: e.target.value })} className="w-full px-4 py-2 bg-slate-900 border border-slate-700 rounded-lg focus:border-cyan-500 focus:outline-none transition" required />

Email setFormData({ ...formData, email: e.target.value })} className="w-full px-4 py-2 bg-slate-900 border border-slate-700 rounded-lg focus:border-cyan-500 focus:outline-none transition" required />

Message

setFormData({ ...formData, message: e.target.value })}
                  className="w-full px-4 py-2 bg-slate-900 border border-slate-700 rounded-lg focus:border-cyan-500 focus:outline-none transition resize-none h-32"
                  required
                />
              </div>
              <Button type="submit" className="w-full justify-center">
                Send Message
              </Button>
            </form>
          </div>

{/* Info */}
          <div className="space-y-6">
            {contactInfoData.map((info, i) => (
              <ContactInfoCard
                key={i}
                icon={info.icon}
                title={info.title}
                value={info.value}
                description={info.description}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="views/testimonials.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft, ChevronRight, Star } from "lucide-react"
import { testimonialsData } from "@/config/testimonials"
import SectionHeader from "@/components/section-header"

export default function Testimonials() {
  const [current, setCurrent] = useState(0)

const next = () => setCurrent((current + 1) % testimonialsData.length)
  const prev = () => setCurrent((current - 1 + testimonialsData.length) % testimonialsData.length)

return (
    <section id="testimonials" className="py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <SectionHeader title="Success Stories" description="Join thousands of satisfied students" />

<div className="grid md:grid-cols-3 gap-8">
          {/* Carousel */}
          <div className="md:col-span-2">
            <div className="relative">
              <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-xl p-8 min-h-64 flex flex-col justify-between">
                <div>
                  <div className="flex gap-1 mb-4">
                    {[...Array(testimonialsData[current].rating)].map((_, i) => (
                      <Star key={i} size={16} className="fill-yellow-400 text-yellow-400" />
                    ))}
                  </div>
                  <p className="text-lg text-slate-300 mb-6">"{testimonialsData[current].quote}"</p>
                </div>

<div className="flex items-center gap-4">
                  <img
                    src={testimonialsData[current].studentImage || "/placeholder.svg"}
                    alt={testimonialsData[current].name}
                    className="w-12 h-12 rounded-full object-cover"
                  />
                  <div>
                    <p className="font-semibold">{testimonialsData[current].name}</p>
                    <p className="text-sm text-slate-400">
                      {testimonialsData[current].role} at {testimonialsData[current].company}
                    </p>
                  </div>
                </div>
              </div>

{/* Navigation */}
              <div className="flex gap-2 mt-6">
                <button onClick={prev} className="p-2 bg-slate-800 rounded-lg hover:bg-slate-700 transition">
                  <ChevronLeft size={20} />
                </button>
                <button onClick={next} className="p-2 bg-slate-800 rounded-lg hover:bg-slate-700 transition">
                  <ChevronRight size={20} />
                </button>
              </div>

{/* Dots */}
              <div className="flex gap-2 mt-4">
                {testimonialsData.map((_, i) => (
                  <button
                    key={i}
                    onClick={() => setCurrent(i)}
                    className={`w-2 h-2 rounded-full transition ${i === current ? "bg-cyan-500" : "bg-slate-700"}`}
                  />
                ))}
              </div>
            </div>
          </div>

{/* Highlights */}
          <div className="space-y-4">
            <div className="bg-gradient-to-br from-red-500/10 to-cyan-500/10 border border-slate-700/50 rounded-xl p-6">
              <div className="text-3xl font-bold mb-2">10K+</div>
              <p className="text-slate-400">Active Students</p>
            </div>
            <div className="bg-gradient-to-br from-red-500/10 to-cyan-500/10 border border-slate-700/50 rounded-xl p-6">
              <div className="text-3xl font-bold mb-2">4.9⭐</div>
              <p className="text-slate-400">Average Rating</p>
            </div>
            <div className="bg-gradient-to-br from-red-500/10 to-cyan-500/10 border border-slate-700/50 rounded-xl p-6">
              <div className="text-3xl font-bold mb-2">98%</div>
              <p className="text-slate-400">Success Rate</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescript:file="config/footer.ts"
export const footerSections = [
  {
    id: "company",
    title: "CodeGuru",
    description: "Learn. Build. Master.",
    isMain: true,
  },
  {
    id: "courses",
    title: "Courses",
    links: [
      { label: "Browse All", href: "#courses" },
      { label: "React", href: "#courses" },
      { label: "Node.js", href: "#courses" },
    ],
  },
  {
    id: "company-links",
    title: "Company",
    links: [
      { label: "About", href: "#" },
      { label: "Blog", href: "#" },
      { label: "Careers", href: "#" },
    ],
  },
  {
    id: "legal",
    title: "Legal",
    links: [
      { label: "Privacy", href: "#" },
      { label: "Terms", href: "#" },
      { label: "Contact", href: "#" },
    ],
  },
]
[V0_FILE]typescriptreact:file="components/footer-section.tsx"
"use client"

interface FooterLink {
  label: string
  href: string
}

interface FooterSectionProps {
  id: string
  title: string
  description?: string
  links?: FooterLink[]
  isMain?: boolean
}

export function FooterSection({ id, title, description, links, isMain }: FooterSectionProps) {
  return (
    <div key={id}>
      {isMain ? (
        <>
          <h3 className="font-bold mb-4">{title}</h3>
          <p className="text-sm text-slate-400">{description}</p>
        </>
      ) : (
        <>
          <h4 className="font-semibold mb-4">{title}</h4>
          <ul className="space-y-2 text-sm text-slate-400">
            {links?.map((link) => (
              <li key={link.href}>
                <a href={link.href} className="hover:text-cyan-400 transition">
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true"
import { footerSections } from "@/config/footer"
import { FooterSection } from "./footer-section"

export default function Footer() {
  const year = new Date().getFullYear()

return (
    <footer className="bg-gradient-to-r from-red-500/5 to-cyan-500/5 border-t border-slate-800 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid md:grid-cols-4 gap-8 mb-8">
          {footerSections.map((section) => (
            <FooterSection key={section.id} {...section} />
          ))}
        </div>

<div className="border-t border-slate-800 pt-8 text-center text-sm text-slate-500">
          <p>© {year} CodeGuru. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}</article></body></html>