Spaces:
Sleeping
Sleeping
| 'use client'; | |
| import { motion } from 'framer-motion'; | |
| import Link from 'next/link'; | |
| import { | |
| Brain, | |
| Sparkles, | |
| Target, | |
| MessageSquare, | |
| BarChart3, | |
| Zap, | |
| Shield, | |
| Clock, | |
| ArrowRight, | |
| Star, | |
| CheckCircle2, | |
| } from 'lucide-react'; | |
| const features = [ | |
| { | |
| icon: Brain, | |
| title: 'AI-Powered Questions', | |
| description: 'Dynamic question generation tailored to your role, difficulty level, and performance.', | |
| color: 'var(--primary)', | |
| gradient: 'var(--gradient-primary)', | |
| }, | |
| { | |
| icon: MessageSquare, | |
| title: 'Real-Time Chat Interface', | |
| description: 'Natural conversation flow with AI interviewer that adapts to your responses.', | |
| color: 'var(--secondary)', | |
| gradient: 'var(--gradient-secondary)', | |
| }, | |
| { | |
| icon: Target, | |
| title: 'Deep Evaluation', | |
| description: 'Multi-dimensional scoring across relevance, clarity, accuracy, and confidence.', | |
| color: 'var(--accent)', | |
| gradient: 'var(--gradient-accent)', | |
| }, | |
| { | |
| icon: BarChart3, | |
| title: 'Performance Analytics', | |
| description: 'Comprehensive session summaries with category breakdowns and improvement paths.', | |
| color: 'var(--success)', | |
| gradient: 'linear-gradient(135deg, #00b894, #55efc4)', | |
| }, | |
| { | |
| icon: Zap, | |
| title: 'Instant Feedback', | |
| description: 'Get immediate, actionable feedback with sample answers after each response.', | |
| color: 'var(--warning)', | |
| gradient: 'linear-gradient(135deg, #fdcb6e, #f39c12)', | |
| }, | |
| { | |
| icon: Shield, | |
| title: '8+ Interview Roles', | |
| description: 'Practice for Software Engineer, Data Scientist, Product Manager, and more.', | |
| color: 'var(--primary-light)', | |
| gradient: 'linear-gradient(135deg, #a29bfe, #6c5ce7)', | |
| }, | |
| ]; | |
| const stats = [ | |
| { value: '8+', label: 'Interview Roles' }, | |
| { value: '3', label: 'Difficulty Levels' }, | |
| { value: '5D', label: 'Evaluation Metrics' }, | |
| { value: 'AI', label: 'Powered by Gemini' }, | |
| ]; | |
| const steps = [ | |
| { step: '01', title: 'Choose Your Role', description: 'Select from 8+ professional roles and set your difficulty level.' }, | |
| { step: '02', title: 'Answer Questions', description: 'AI generates tailored questions. Answer naturally in the chat interface.' }, | |
| { step: '03', title: 'Get AI Feedback', description: 'Receive instant scoring, suggestions, and sample answers for each response.' }, | |
| { step: '04', title: 'Review & Improve', description: 'Access comprehensive analytics and actionable recommendations.' }, | |
| ]; | |
| export default function HomePage() { | |
| return ( | |
| <div className="relative"> | |
| {/* Hero Section */} | |
| <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden px-6"> | |
| <div className="max-w-6xl mx-auto text-center"> | |
| {/* Badge */} | |
| <motion.div | |
| initial={{ opacity: 0, y: 20 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.5 }} | |
| className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-8" | |
| style={{ | |
| background: 'rgba(108, 92, 231, 0.1)', | |
| border: '1px solid rgba(108, 92, 231, 0.2)', | |
| }} | |
| > | |
| <Sparkles className="w-4 h-4" style={{ color: 'var(--primary-light)' }} /> | |
| <span className="text-sm font-medium" style={{ color: 'var(--primary-light)' }}> | |
| Powered by Google Gemini AI | |
| </span> | |
| </motion.div> | |
| {/* Heading */} | |
| <motion.h1 | |
| initial={{ opacity: 0, y: 30 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.6, delay: 0.1 }} | |
| className="text-5xl sm:text-6xl md:text-7xl font-bold leading-tight mb-6" | |
| > | |
| Master Your Next | |
| <br /> | |
| <span className="text-gradient">Interview with AI</span> | |
| </motion.h1> | |
| {/* Subtitle */} | |
| <motion.p | |
| initial={{ opacity: 0, y: 30 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.6, delay: 0.2 }} | |
| className="text-lg sm:text-xl max-w-2xl mx-auto mb-10 leading-relaxed" | |
| style={{ color: 'var(--muted-light)' }} | |
| > | |
| Practice with an AI interviewer that adapts to your role, evaluates your responses | |
| in real-time, and provides actionable feedback to help you land your dream job. | |
| </motion.p> | |
| {/* CTA Buttons */} | |
| <motion.div | |
| initial={{ opacity: 0, y: 30 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.6, delay: 0.3 }} | |
| className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16" | |
| > | |
| <Link href="/interview" className="btn-primary flex items-center gap-2 text-lg px-8 py-4"> | |
| Start Interview | |
| <ArrowRight className="w-5 h-5" /> | |
| </Link> | |
| <Link href="/settings" className="btn-secondary flex items-center gap-2 text-lg px-8 py-4"> | |
| Configure API Key | |
| </Link> | |
| </motion.div> | |
| {/* Stats */} | |
| <motion.div | |
| initial={{ opacity: 0, y: 30 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.6, delay: 0.4 }} | |
| className="grid grid-cols-2 sm:grid-cols-4 gap-6 max-w-2xl mx-auto" | |
| > | |
| {stats.map((stat, i) => ( | |
| <div key={i} className="flex flex-col items-center gap-1"> | |
| <span className="text-2xl sm:text-3xl font-bold text-gradient">{stat.value}</span> | |
| <span className="text-xs sm:text-sm" style={{ color: 'var(--muted)' }}>{stat.label}</span> | |
| </div> | |
| ))} | |
| </motion.div> | |
| </div> | |
| </section> | |
| {/* Features Section */} | |
| <section className="py-24 px-6" id="features"> | |
| <div className="max-w-6xl mx-auto"> | |
| <motion.div | |
| initial={{ opacity: 0, y: 20 }} | |
| whileInView={{ opacity: 1, y: 0 }} | |
| viewport={{ once: true }} | |
| className="text-center mb-16" | |
| > | |
| <h2 className="text-3xl sm:text-4xl font-bold mb-4"> | |
| Everything You Need to <span className="text-gradient">Ace Your Interview</span> | |
| </h2> | |
| <p className="text-lg max-w-2xl mx-auto" style={{ color: 'var(--muted-light)' }}> | |
| Our AI-powered platform provides a complete interview preparation experience | |
| with advanced features designed to maximize your confidence and performance. | |
| </p> | |
| </motion.div> | |
| <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| {features.map((feature, i) => ( | |
| <motion.div | |
| key={i} | |
| initial={{ opacity: 0, y: 30 }} | |
| whileInView={{ opacity: 1, y: 0 }} | |
| viewport={{ once: true }} | |
| transition={{ delay: i * 0.1 }} | |
| className="card group cursor-default" | |
| > | |
| <div | |
| className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110" | |
| style={{ background: `${feature.color}15` }} | |
| > | |
| <feature.icon className="w-6 h-6" style={{ color: feature.color }} /> | |
| </div> | |
| <h3 className="text-lg font-semibold mb-2">{feature.title}</h3> | |
| <p className="text-sm leading-relaxed" style={{ color: 'var(--muted-light)' }}> | |
| {feature.description} | |
| </p> | |
| </motion.div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| {/* How It Works Section */} | |
| <section className="py-24 px-6"> | |
| <div className="max-w-5xl mx-auto"> | |
| <motion.div | |
| initial={{ opacity: 0, y: 20 }} | |
| whileInView={{ opacity: 1, y: 0 }} | |
| viewport={{ once: true }} | |
| className="text-center mb-16" | |
| > | |
| <h2 className="text-3xl sm:text-4xl font-bold mb-4"> | |
| How It <span className="text-gradient-secondary">Works</span> | |
| </h2> | |
| <p className="text-lg max-w-2xl mx-auto" style={{ color: 'var(--muted-light)' }}> | |
| Get started in minutes. Our streamlined process makes interview practice effortless. | |
| </p> | |
| </motion.div> | |
| <div className="grid md:grid-cols-2 gap-8"> | |
| {steps.map((step, i) => ( | |
| <motion.div | |
| key={i} | |
| initial={{ opacity: 0, x: i % 2 === 0 ? -30 : 30 }} | |
| whileInView={{ opacity: 1, x: 0 }} | |
| viewport={{ once: true }} | |
| transition={{ delay: i * 0.15 }} | |
| className="flex gap-5 p-6 rounded-2xl transition-all duration-300 group" | |
| style={{ | |
| background: 'rgba(255,255,255,0.02)', | |
| border: '1px solid var(--border)', | |
| }} | |
| onMouseEnter={(e) => { | |
| e.currentTarget.style.borderColor = 'var(--primary)'; | |
| e.currentTarget.style.background = 'rgba(108, 92, 231, 0.03)'; | |
| }} | |
| onMouseLeave={(e) => { | |
| e.currentTarget.style.borderColor = 'var(--border)'; | |
| e.currentTarget.style.background = 'rgba(255,255,255,0.02)'; | |
| }} | |
| > | |
| <div | |
| className="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center font-bold text-lg" | |
| style={{ | |
| background: 'var(--gradient-primary)', | |
| color: 'white', | |
| }} | |
| > | |
| {step.step} | |
| </div> | |
| <div> | |
| <h3 className="text-lg font-semibold mb-1">{step.title}</h3> | |
| <p className="text-sm" style={{ color: 'var(--muted-light)' }}> | |
| {step.description} | |
| </p> | |
| </div> | |
| </motion.div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| {/* CTA Section */} | |
| <section className="py-24 px-6"> | |
| <div className="max-w-3xl mx-auto"> | |
| <motion.div | |
| initial={{ opacity: 0, scale: 0.95 }} | |
| whileInView={{ opacity: 1, scale: 1 }} | |
| viewport={{ once: true }} | |
| className="relative rounded-3xl p-12 text-center overflow-hidden" | |
| style={{ | |
| background: 'var(--gradient-primary)', | |
| }} | |
| > | |
| {/* Decorative */} | |
| <div | |
| className="absolute inset-0 opacity-10" | |
| style={{ | |
| backgroundImage: 'radial-gradient(circle at 20% 50%, white 1px, transparent 1px), radial-gradient(circle at 80% 50%, white 1px, transparent 1px)', | |
| backgroundSize: '40px 40px', | |
| }} | |
| /> | |
| <div className="relative z-10"> | |
| <div className="flex justify-center mb-4"> | |
| {[0, 1, 2, 3, 4].map((i) => ( | |
| <Star key={i} className="w-6 h-6 text-yellow-300 fill-yellow-300" /> | |
| ))} | |
| </div> | |
| <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4"> | |
| Ready to Ace Your Interview? | |
| </h2> | |
| <p className="text-lg text-white/80 mb-8 max-w-xl mx-auto"> | |
| Join thousands of professionals who have improved their interview skills | |
| with our AI-powered platform. | |
| </p> | |
| <Link | |
| href="/interview" | |
| className="inline-flex items-center gap-2 bg-white text-gray-900 font-bold px-8 py-4 rounded-xl text-lg transition-all duration-300 hover:shadow-lg hover:scale-105" | |
| > | |
| Start Free Practice | |
| <ArrowRight className="w-5 h-5" /> | |
| </Link> | |
| <div className="flex flex-wrap justify-center gap-6 mt-8"> | |
| {['No signup required', 'Instant AI feedback', '8+ roles available'].map((item, i) => ( | |
| <div key={i} className="flex items-center gap-2 text-white/90 text-sm"> | |
| <CheckCircle2 className="w-4 h-4" /> | |
| <span>{item}</span> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </motion.div> | |
| </div> | |
| </section> | |
| {/* Footer */} | |
| <footer | |
| className="py-8 px-6 text-center" | |
| style={{ borderTop: '1px solid var(--border)' }} | |
| > | |
| <p className="text-sm" style={{ color: 'var(--muted)' }}> | |
| Built with Next.js, Tailwind CSS & Google Gemini AI •{' '} | |
| <span className="text-gradient">InterviewAI</span> © {new Date().getFullYear()} | |
| </p> | |
| </footer> | |
| </div> | |
| ); | |
| } | |