Spaces:
Paused
Paused
| import React from "react"; | |
| import { motion } from "framer-motion"; | |
| import { ArrowRight, Zap, Brain, Zap as FastIcon, Layers } from "lucide-react"; | |
| import { Button, Card } from "@/components/common"; | |
| import Header from "@/components/sections/Header"; | |
| import Footer from "@/components/sections/Footer"; | |
| interface HomePageProps { | |
| onGetStarted?: () => void; | |
| onSettingsClick?: () => void; | |
| } | |
| const HomePage: React.FC<HomePageProps> = ({ | |
| onGetStarted, | |
| onSettingsClick, | |
| }) => { | |
| const features = [ | |
| { | |
| icon: Zap, | |
| title: "Smart Job Scraping", | |
| description: | |
| "Automatically search and collect job listings from LinkedIn", | |
| }, | |
| { | |
| icon: Brain, | |
| title: "AI-Powered Analysis", | |
| description: "Extract key skills and requirements from job descriptions", | |
| }, | |
| { | |
| icon: FastIcon, | |
| title: "CV Tailoring", | |
| description: "Automatically customize your CV for each job application", | |
| }, | |
| { | |
| icon: Layers, | |
| title: "Batch Processing", | |
| description: "Generate multiple tailored CVs for different jobs at once", | |
| }, | |
| ]; | |
| const containerVariants = { | |
| hidden: { opacity: 0 }, | |
| visible: { | |
| opacity: 1, | |
| transition: { | |
| staggerChildren: 0.1, | |
| delayChildren: 0.2, | |
| }, | |
| }, | |
| }; | |
| const itemVariants = { | |
| hidden: { opacity: 0, y: 20 }, | |
| visible: { | |
| opacity: 1, | |
| y: 0, | |
| transition: { duration: 0.5 }, | |
| }, | |
| }; | |
| return ( | |
| <div className="min-h-screen bg-gradient-saas"> | |
| <Header onSettingsClick={onSettingsClick} /> | |
| {/* Hero Section */} | |
| <motion.section | |
| initial={{ opacity: 0 }} | |
| animate={{ opacity: 1 }} | |
| transition={{ duration: 0.6 }} | |
| className="relative px-4 sm:px-6 lg:px-8 py-20 lg:py-32 max-w-7xl mx-auto" | |
| > | |
| {/* Background gradient orbs */} | |
| <div className="absolute top-0 left-1/4 w-96 h-96 bg-emerald-500/20 rounded-full blur-3xl -z-10" /> | |
| <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl -z-10" /> | |
| <div className="text-center mb-16"> | |
| <motion.div | |
| variants={itemVariants} | |
| className="mb-6 inline-flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/30 rounded-full px-4 py-2" | |
| > | |
| <Zap className="w-4 h-4 text-emerald-400" /> | |
| <span className="text-sm font-medium text-emerald-200"> | |
| Powered by AI | |
| </span> | |
| </motion.div> | |
| <motion.h1 | |
| variants={itemVariants} | |
| className="text-5xl lg:text-7xl font-bold text-white mb-6 leading-tight" | |
| > | |
| Get Your Dream Job | |
| <br /> | |
| <span className="bg-gradient-emerald bg-clip-text text-transparent"> | |
| Faster | |
| </span> | |
| </motion.h1> | |
| <motion.p | |
| variants={itemVariants} | |
| className="text-xl text-slate-300 max-w-2xl mx-auto mb-8" | |
| > | |
| Automate your job application process with intelligent CV tailoring. | |
| Search jobs, analyze requirements, and generate tailored | |
| applications in minutes. | |
| </motion.p> | |
| <motion.div | |
| variants={itemVariants} | |
| className="flex flex-col sm:flex-row gap-4 justify-center" | |
| > | |
| <Button | |
| size="lg" | |
| onClick={onGetStarted} | |
| icon={<ArrowRight className="w-5 h-5" />} | |
| > | |
| Get Started | |
| </Button> | |
| <Button size="lg" variant="outline" onClick={onSettingsClick}> | |
| Learn More | |
| </Button> | |
| </motion.div> | |
| </div> | |
| </motion.section> | |
| {/* Features Section */} | |
| <motion.section | |
| variants={containerVariants} | |
| initial="hidden" | |
| whileInView="visible" | |
| viewport={{ once: true, margin: "-100px" }} | |
| className="px-4 sm:px-6 lg:px-8 py-20 max-w-7xl mx-auto" | |
| > | |
| <div className="text-center mb-16"> | |
| <h2 className="text-4xl font-bold text-white mb-4"> | |
| Why Choose SkillSync? | |
| </h2> | |
| <p className="text-slate-400 max-w-2xl mx-auto"> | |
| Leverage cutting-edge AI and automation to transform your job search | |
| experience. | |
| </p> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| {features.map((feature, index) => ( | |
| <motion.div key={index} variants={itemVariants}> | |
| <Card hover glow innerGlow> | |
| <div className="mb-4"> | |
| <div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center"> | |
| <feature.icon className="w-6 h-6 text-emerald-400" /> | |
| </div> | |
| </div> | |
| <h3 className="text-lg font-semibold text-white mb-2"> | |
| {feature.title} | |
| </h3> | |
| <p className="text-slate-400 text-sm">{feature.description}</p> | |
| </Card> | |
| </motion.div> | |
| ))} | |
| </div> | |
| </motion.section> | |
| {/* Stats Section */} | |
| <motion.section | |
| initial={{ opacity: 0 }} | |
| whileInView={{ opacity: 1 }} | |
| viewport={{ once: true }} | |
| className="px-4 sm:px-6 lg:px-8 py-20 max-w-7xl mx-auto" | |
| > | |
| <Card | |
| glow | |
| className="bg-gradient-to-br from-emerald-500/10 to-slate-900" | |
| > | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> | |
| {[ | |
| { number: "10K+", label: "Jobs Processed" }, | |
| { number: "95%", label: "Success Rate" }, | |
| { number: "45min", label: "Avg Time Saved" }, | |
| ].map((stat, index) => ( | |
| <div key={index}> | |
| <motion.p | |
| className="text-4xl font-bold text-emerald-400 mb-2" | |
| initial={{ opacity: 0, y: 10 }} | |
| whileInView={{ opacity: 1, y: 0 }} | |
| transition={{ delay: index * 0.1 }} | |
| > | |
| {stat.number} | |
| </motion.p> | |
| <p className="text-slate-400">{stat.label}</p> | |
| </div> | |
| ))} | |
| </div> | |
| </Card> | |
| </motion.section> | |
| <Footer /> | |
| </div> | |
| ); | |
| }; | |
| export default HomePage; | |