[V0_FILE]typescriptreact:file="components/cta.tsx" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { ArrowRight, FileText, CheckCircle, Brain } from "lucide-react" export default function CTA() { return (

{/* Floating elements */}

Ready to Transform Your Grading Process?

Join thousands of educators who are saving time and providing better feedback with our AI-powered grading tool.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Facebook, Twitter, Instagram, Linkedin, Send } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "GradeAI - AI-Powered Automatic Grading Tool", description: "Grade assignments in seconds, not hours with our AI-powered automatic grading tool for educators.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", violet: { 50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd", 400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9", 800: "#5b21b6", 900: "#4c1d95", 950: "#2e1065", }, 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)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/navbar.tsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { Brain, Menu, X } from "lucide-react" import { useMediaQuery } from "@/hooks/use-mobile" const navLinks = [ { name: "Features", href: "#features" }, { name: "How It Works", href: "#how-it-works" }, { name: "Testimonials", href: "#testimonials" }, { name: "Pricing", href: "#pricing" }, { name: "FAQ", href: "#faq" }, ] export default function Navbar() { const [isScrolled, setIsScrolled] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const isMobile = useMediaQuery("(max-width: 768px)") useEffect(() => { const handleScroll = () => { if (window.scrollY > 10) { setIsScrolled(true) } else { setIsScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) return (

{/* Logo */}

GradeAI {/* Desktop Navigation */}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {mobileMenuOpen && isMobile && (

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import Hero from "@/components/hero" import Features from "@/components/features" import HowItWorks from "@/components/how-it-works" import Testimonials from "@/components/testimonials" import Pricing from "@/components/pricing" import FAQ from "@/components/faq" import CTA from "@/components/cta" import Footer from "@/components/footer" import Navbar from "@/components/navbar" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isQuickEdit="true" "use client" import { Button } from "@/components/ui/button" import { motion } from "framer-motion" import { ArrowRight, FileText, CheckCircle, Brain, Sparkles } from "lucide-react" import { useEffect, useState } from "react" export default function Hero() { const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) return null return (

{/* Floating elements */}

{/* Paper 1 */}

{/* Paper 2 */}

{/* Brain */}

{/* Sparkles */} {/* Grade A+ */}

A+

AI-Powered Grading Grade Assignments in Seconds, Not Hours Our AI-powered grading tool helps educators save time, provide consistent feedback, and focus on what matters most: teaching.

AI Grading in Progress

Analyzing 24 submissions 85%

) } [V0_FILE]typescriptreact:file="components/features.tsx" isQuickEdit="true" "use client" import { motion } from "framer-motion" import { Brain, Clock, BarChart, MessageSquare, Zap, Shield } from "lucide-react" const features = [ { icon: , title: "AI-Powered Analysis", description: "Our advanced AI analyzes student work with human-like understanding and provides detailed feedback.", }, { icon: , title: "Save Hours of Time", description: "Grade hundreds of assignments in minutes instead of hours, giving you back valuable teaching time.", }, { icon: , title: "Detailed Analytics", description: "Get insights into student performance, identify knowledge gaps, and track progress over time.", }, { icon: , title: "Personalized Feedback", description: "Provide consistent, detailed feedback to every student automatically.", }, { icon: , title: "Instant Results", description: "Students receive immediate feedback, allowing them to learn and improve faster.", }, { icon: , title: "Secure & Private", description: "Your data is encrypted and protected. We never share student information with third parties.", }, ] export default function Features() { const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 }, }, } return (

Powerful Features for Modern Educators

Our AI-powered grading tool is designed to make your life easier and help your students succeed.

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/how-it-works.tsx" isQuickEdit="true" "use client" import { motion } from "framer-motion" import { Upload, Cpu, CheckCircle, ArrowRight } from "lucide-react" const steps = [ { icon: , title: "Upload Assignments", description: "Simply upload student assignments in various formats including PDF, Word, or plain text.", }, { icon: , title: "AI Analysis", description: "Our AI analyzes the content, comparing it against rubrics and learning objectives.", }, { icon: , title: "Review & Approve", description: "Review AI-generated grades and feedback, make adjustments if needed, and approve.", }, ] export default function HowItWorks() { return (

How It Works

Our platform makes grading simple, fast, and accurate in just three easy steps.

{/* Connection line */}

{steps.map((step, index) => (

{/* Floating number */}

{index + 1}

{step.title}

{step.description}

{step.icon}

{/* Arrow for desktop */} {index < steps.length - 1 && (

)}

))}

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isQuickEdit="true" "use client" import { motion } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { Quote } from "lucide-react" const testimonials = [ { quote: "This tool has saved me countless hours of grading. I can now focus more on actually teaching and less on administrative work.", author: "Dr. Sarah Johnson", title: "Professor of English, Stanford University", }, { quote: "The AI feedback is remarkably accurate and helpful. My students appreciate getting detailed feedback so quickly.", author: "Michael Chen", title: "High School Science Teacher", }, { quote: "I was skeptical at first, but this platform has transformed how I manage my classroom. Highly recommended!", author: "Emily Rodriguez", title: "Middle School Math Teacher", }, ] export default function Testimonials() { return (

Loved by Educators

See what teachers and professors are saying about our AI grading tool.

{testimonials.map((testimonial, index) => (

{testimonial.quote}

{testimonial.author}

{testimonial.title}

))}

) } [V0_FILE]typescriptreact:file="components/pricing.tsx" isQuickEdit="true" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Check } from "lucide-react" const plans = [ { name: "Free", price: "$0", description: "Perfect for trying out the platform", features: ["Grade up to 50 assignments/month", "Basic feedback templates", "Email support", "1 user"], }, { name: "Pro", price: "$29", period: "/month", description: "Ideal for individual teachers", features: [ "Grade up to 500 assignments/month", "Advanced feedback customization", "Priority support", "Detailed analytics", "3 users", ], popular: true, }, { name: "School", price: "$99", period: "/month", description: "For schools and departments", features: [ "Unlimited assignments", "Custom rubrics", "24/7 dedicated support", "Advanced analytics & reporting", "Unlimited users", "API access", ], }, ] export default function Pricing() { return (

Simple, Transparent Pricing

Choose the plan that works best for you or your institution.

{plans.map((plan, index) => ( {plan.popular && (

{plan.name}

{plan.price} {plan.period && {plan.period}}

{plan.description}

{feature}

))}

) } [V0_FILE]typescriptreact:file="components/faq.tsx" isQuickEdit="true" "use client" import { motion } from "framer-motion" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" const faqs = [ { question: "How accurate is the AI grading?", answer: "Our AI grading system has been trained on millions of assignments and achieves over 95% accuracy compared to human graders. The system continues to learn and improve over time.", }, { question: "Can I customize the grading rubrics?", answer: "Yes! You can create custom rubrics for each assignment type, specifying criteria, point values, and feedback templates. The AI will follow your rubric guidelines when grading.", }, { question: "What file formats are supported?", answer: "We support a wide range of formats including PDF, DOCX, Google Docs, plain text, and even handwritten assignments via image uploads. Our AI can process and grade all these formats.", }, { question: "Is student data kept private and secure?", answer: "Absolutely. We take data privacy very seriously. All data is encrypted both in transit and at rest. We are FERPA compliant and never share student data with third parties.", }, { question: "Can I override the AI's grades?", answer: "Yes, teachers always have the final say. You can review all AI-generated grades and feedback before releasing them to students, and make any adjustments as needed.", }, { question: "Is there a limit to how many assignments I can grade?", answer: "The number of assignments you can grade depends on your plan. Our Free plan allows up to 50 assignments per month, Pro plan allows 500, and School plan offers unlimited grading.", }, ] export default function FAQ() { return (

Frequently Asked Questions

Find answers to common questions about our AI grading platform.

{faqs.map((faq, index) => ( {faq.question} {faq.answer} ))}

) } [V0_FILE]typescript:file="hooks/use-mobile.ts" isQuickEdit="true" "use client" import { useState, useEffect } from "react" export const useMediaQuery = (query: string): boolean => { const [matches, setMatches] = useState(false) useEffect(() => { const mediaQuery = window.matchMedia(query) const handleMatch = (event: MediaQueryListEvent) => { setMatches(event.matches) } setMatches(mediaQuery.matches) mediaQuery.addEventListener("change", handleMatch) return () => { mediaQuery.removeEventListener("change", handleMatch) } }, [query]) return matches }