[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "KidLearn - Educational Platform for Teachers", description: "Create interactive worksheets, games, and activities that kids love. Join thousands of educators transforming their classrooms!", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", xl: "1rem", }, fontFamily: { sans: ["Comic Sans MS", "Chalkboard SE", "Comic Neue", "sans-serif"], }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --primary: #6a5acd; --secondary: #ff6b6b; --accent: #ffd166; --success: #4caf50; --background: #f9f5ff; } body { font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Add animated background patterns */ @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Add more playful cursor */ body { cursor: url("data:image/svg+xml;utf8,") 12 12, auto; } /* Add some animation to various elements */ h1, h2, h3 { position: relative; } h1::after, h2::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #ff6b6b, #ffd166, #4caf50, #6a5acd); opacity: 0.3; } /* Add a paper texture to the background */ .bg-\[\#f9f5ff\] { background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%236A5ACD' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"), linear-gradient(to bottom, #f9f5ff, #fff5f5); } /* Add more playful button styles */ button, a[href] { transition: all 0.2s ease; } button:hover, a[href]:hover { transform: scale(1.05); } /* Add notebook paper lines to white backgrounds */ .bg-white { background-image: linear-gradient(#f1f1f1 1px, transparent 1px); background-size: 100% 20px; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import Image from "next/image" import Link from "next/link" import { Star, Check, ChevronRight, Facebook, Twitter, Instagram, Linkedin } from "lucide-react" export default function Home() { return (

{/* Background decorative elements */}

{/* Stars */} {Array.from({ length: 30 }).map((_, i) => (

★

))} {/* Triangles */} {Array.from({ length: 15 }).map((_, i) => (

))} {/* Circles */} {Array.from({ length: 20 }).map((_, i) => (

))} {/* Squiggly lines */} {Array.from({ length: 10 }).map((_, i) => (

))} {/* Confetti */} {Array.from({ length: 40 }).map((_, i) => (

))}

{/* Header */}

KidLearn

{/* Hero Section */}

{/* Decorative elements */}

{/* Zigzag border */}

{/* Polka dots */} {Array.from({ length: 20 }).map((_, i) => (

))} {/* Squiggly decorations */}

#1 Educational Platform for Kids

★

Make Learning Fun and{" "} Engaging! ✨ ♥

KidLearn helps teachers create interactive worksheets, games, and activities that kids actually love. Join thousands of educators transforming their classrooms! ✓

Start Free Trial

Watch Demo ★

A+

100%

{/* Features Section */}

{/* Decorative elements */}

{/* Scribbles */} {/* Ruler marks */}

{Array.from({ length: 20 }).map((_, i) => (

))}

{Array.from({ length: 20 }).map((_, i) => (

))}

Amazing Features for Educators
✏️

Everything you need to create engaging educational content that kids will love

{[ { title: "Interactive Worksheets", description: "Create colorful worksheets with drag-and-drop elements that make learning fun", icon: "📝", color: "#FF6B6B", }, { title: "Educational Games", description: "Build custom games that reinforce learning concepts through play", icon: "🎮", color: "#4CAF50", }, { title: "Progress Tracking", description: "Monitor student progress with detailed analytics and reports", icon: "📊", color: "#FFD166", }, { title: "Resource Library", description: "Access thousands of pre-made templates and educational resources", icon: "📚", color: "#6A5ACD", }, ].map((feature, index) => (

{/* Corner decorations */}

{/* Random decorative elements */}

★

♥

{feature.icon}

{feature.title}

{feature.description}

))}

{/* Testimonials Section */}

{/* Decorative elements */}

{/* Notebook spiral */}

{Array.from({ length: 30 }).map((_, i) => (

))}

{/* Notebook spiral right */}

{Array.from({ length: 30 }).map((_, i) => (

))}

{/* Scattered stars */} {Array.from({ length: 15 }).map((_, i) => (

★

))} {/* Crayon scribbles */}

📣

Teachers Love KidLearn

See what educators are saying about our platform

{/* Decorative underline */}

{[ { quote: "KidLearn has transformed my classroom. My students are more engaged than ever!", name: "Ms. Johnson", role: "2nd Grade Teacher", stars: 5, color: "#FF6B6B", }, { quote: "The interactive worksheets save me hours of prep time and my students actually look forward to them!", name: "Mr. Rodriguez", role: "4th Grade Teacher", stars: 5, color: "#4CAF50", }, { quote: "The resource library is incredible. I've found so many creative ways to teach difficult concepts.", name: "Mrs. Thompson", role: "Special Education Teacher", stars: 5, color: "#FFD166", }, ].map((testimonial, index) => (

{/* Decorative elements */}

{/* Paper clip */}

{Array(testimonial.stars) .fill(0) .map((_, i) => ( ))}

"{testimonial.quote}" ✓

{testimonial.name.charAt(0)}

{testimonial.name}

{testimonial.role}

{/* Sticker */}

A+

))}

{/* Decorative bottom elements */}

{Array.from({ length: 5 }).map((_, i) => (

))}

{/* Pricing Section */}

{/* Decorative elements */}

{/* Price tags */} {/* Dollar signs */} {Array.from({ length: 10 }).map((_, i) => (

))} {/* Checkmarks */} {Array.from({ length: 8 }).map((_, i) => (

✓

))}

💰

Simple, Transparent Pricing

Choose the plan that works best for you and your classroom

{/* Decorative scissors and cut line */}

✂️

{[ { name: "Starter", price: "$9", description: "Perfect for individual teachers", features: ["50 Interactive Worksheets", "10 Educational Games", "Basic Analytics", "Email Support"], color: "#6A5ACD", popular: false, }, { name: "Professional", price: "$19", description: "Ideal for active educators", features: [ "Unlimited Worksheets", "Unlimited Games", "Advanced Analytics", "Priority Support", "Resource Library Access", ], color: "#FF6B6B", popular: true, }, { name: "School", price: "$49", description: "Best for entire schools", features: [ "Everything in Professional", "Up to 25 Teacher Accounts", "School-wide Analytics", "Admin Dashboard", "Training Sessions", ], color: "#4CAF50", popular: false, }, ].map((plan, index) => (

{/* Corner decorations */}

{plan.popular && (

{plan.name}

{plan.price} /month {/* Price tag */}

SALE

{plan.description} ✓

{feature} {/* Highlight marker effect */} {i % 2 === 0 && (
)}

Get Started {/* Button decoration */}

{/* Sticker */} {plan.popular && (

BEST VALUE

)}

))}

{/* CTA Section */}

{/* Decorative elements */}

{/* Zigzag border */}

{/* Scattered stars and shapes */} {Array.from({ length: 20 }).map((_, i) => (

{["★", "♥", "●", "■"][Math.floor(Math.random() * 4)]}

))} {/* Confetti */} {Array.from({ length: 30 }).map((_, i) => (

))}

{/* Decorative elements */}

Ready to Transform Your Classroom? ✨ 🎨

Join thousands of teachers who are making learning fun and engaging with KidLearn

No credit card required. 14-day free trial. Cancel anytime. 🎓

{/* Decorative stickers */}

FREE!

WOW!

{/* Footer */}

) }

Make Learning Fun and{" "} Engaging! ✨ ♥

Amazing Features for Educators ✏️

{feature.title}

Teachers Love KidLearn

Simple, Transparent Pricing

{plan.name}

Ready to Transform Your Classroom? ✨ 🎨

Amazing Features for Educators
✏️