|
| 1 | +import { useNavigate, Link } from "react-router-dom"; |
| 2 | +import { useAuth } from "../context/AuthContext"; |
| 3 | +import { Code2, Zap, Cloud, Users, ArrowRight, Github } from "lucide-react"; |
| 4 | +import { useEffect } from "react"; |
| 5 | +import { motion } from "framer-motion"; |
| 6 | +import ideScreenshot from "../assets/ide-screenshot.png"; |
| 7 | + |
| 8 | +function LandingPage() { |
| 9 | + const { user, logInWithGithub, loading } = useAuth(); |
| 10 | + const navigate = useNavigate(); |
| 11 | + |
| 12 | + // Redirect to dashboard if already logged in |
| 13 | + useEffect(() => { |
| 14 | + if (user && !loading) { |
| 15 | + navigate("/dashboard"); |
| 16 | + } |
| 17 | + }, [user, loading, navigate]); |
| 18 | + |
| 19 | + const handleGetStarted = async () => { |
| 20 | + try { |
| 21 | + await logInWithGithub(); |
| 22 | + } catch (error) { |
| 23 | + console.error("Login failed:", error); |
| 24 | + } |
| 25 | + }; |
| 26 | + |
| 27 | + return ( |
| 28 | + <div className="min-h-screen bg-slate-900 text-slate-100 overflow-x-hidden selection:bg-blue-500/30"> |
| 29 | + {/* Header */} |
| 30 | + <header className="fixed top-0 left-0 right-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-slate-800/50"> |
| 31 | + <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> |
| 32 | + <Link to="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity"> |
| 33 | + <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/20"> |
| 34 | + <span className="text-white font-bold text-sm"></></span> |
| 35 | + </div> |
| 36 | + <span className="text-xl font-bold tracking-tight">CodeSplit</span> |
| 37 | + </Link> |
| 38 | + <button |
| 39 | + onClick={handleGetStarted} |
| 40 | + disabled={loading} |
| 41 | + className="px-4 py-2 text-sm font-medium bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700/50 rounded-lg transition-all flex items-center gap-2 disabled:opacity-50 hover:border-slate-600 hover:text-white" |
| 42 | + > |
| 43 | + <Github className="w-4 h-4" /> |
| 44 | + Sign in |
| 45 | + </button> |
| 46 | + </div> |
| 47 | + </header> |
| 48 | + |
| 49 | + {/* Hero Section */} |
| 50 | + <main className="relative pt-32 pb-20 px-6"> |
| 51 | + {/* Background Gradient */} |
| 52 | + <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-slate-900 via-[#0a0a0a] to-black z-0" /> |
| 53 | + |
| 54 | + {/* Content */} |
| 55 | + <div className="relative z-10 max-w-7xl mx-auto flex flex-col items-center text-center"> |
| 56 | + |
| 57 | + {/* Badge */} |
| 58 | + <motion.div |
| 59 | + initial={{ opacity: 0, y: 20 }} |
| 60 | + animate={{ opacity: 1, y: 0 }} |
| 61 | + transition={{ duration: 0.5 }} |
| 62 | + className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm mb-8 backdrop-blur-sm" |
| 63 | + > |
| 64 | + <Zap className="w-4 h-4" /> |
| 65 | + <span className="font-medium">v2.0 Now Available</span> |
| 66 | + </motion.div> |
| 67 | + |
| 68 | + {/* Headline */} |
| 69 | + <motion.h1 |
| 70 | + initial={{ opacity: 0, y: 20 }} |
| 71 | + animate={{ opacity: 1, y: 0 }} |
| 72 | + transition={{ duration: 0.5, delay: 0.1 }} |
| 73 | + className="text-5xl sm:text-7xl font-extrabold mb-8 leading-tight tracking-tight" |
| 74 | + > |
| 75 | + Code. Preview.{" "} |
| 76 | + <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent animate-gradient-x"> |
| 77 | + Ship. |
| 78 | + </span> |
| 79 | + </motion.h1> |
| 80 | + |
| 81 | + {/* Subheadline */} |
| 82 | + <motion.p |
| 83 | + initial={{ opacity: 0, y: 20 }} |
| 84 | + animate={{ opacity: 1, y: 0 }} |
| 85 | + transition={{ duration: 0.5, delay: 0.2 }} |
| 86 | + className="text-xl text-slate-400 mb-10 max-w-2xl mx-auto leading-relaxed" |
| 87 | + > |
| 88 | + The lightweight browser IDE for rapid prototyping. |
| 89 | + Write HTML, CSS, and JS with instant live preview. No setup required. |
| 90 | + </motion.p> |
| 91 | + |
| 92 | + {/* Buttons */} |
| 93 | + <motion.div |
| 94 | + initial={{ opacity: 0, y: 20 }} |
| 95 | + animate={{ opacity: 1, y: 0 }} |
| 96 | + transition={{ duration: 0.5, delay: 0.3 }} |
| 97 | + className="flex flex-col sm:flex-row items-center gap-4 mb-20" |
| 98 | + > |
| 99 | + <button |
| 100 | + onClick={handleGetStarted} |
| 101 | + disabled={loading} |
| 102 | + className="group relative inline-flex items-center gap-2 px-8 py-4 text-lg font-bold text-white bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 hover:-translate-y-0.5 transition-all disabled:opacity-50 overflow-hidden" |
| 103 | + > |
| 104 | + <span className="relative z-10 flex items-center gap-2"> |
| 105 | + Launch Editor |
| 106 | + <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" /> |
| 107 | + </span> |
| 108 | + <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity" /> |
| 109 | + </button> |
| 110 | + |
| 111 | + <a |
| 112 | + href="https://github.com/CyberSphinxxx/Interactive_Code_Editor" |
| 113 | + target="_blank" |
| 114 | + rel="noopener noreferrer" |
| 115 | + className="inline-flex items-center gap-2 px-8 py-4 text-lg font-semibold text-slate-300 bg-slate-800/50 border border-slate-700 hover:border-slate-500 hover:text-white rounded-xl transition-all hover:-translate-y-0.5" |
| 116 | + > |
| 117 | + <Github className="w-5 h-5" /> |
| 118 | + Star on GitHub |
| 119 | + </a> |
| 120 | + </motion.div> |
| 121 | + |
| 122 | + {/* Screenshot Hero Image */} |
| 123 | + <motion.div |
| 124 | + initial={{ opacity: 0, y: 100, rotateX: 20 }} |
| 125 | + animate={{ opacity: 1, y: 0, rotateX: 0 }} |
| 126 | + transition={{ duration: 0.8, delay: 0.4, type: "spring", stiffness: 100 }} |
| 127 | + style={{ perspective: 1000 }} |
| 128 | + className="relative w-full max-w-6xl mx-auto" |
| 129 | + > |
| 130 | + <motion.div |
| 131 | + animate={{ y: [0, -20, 0] }} |
| 132 | + transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }} |
| 133 | + className="relative rounded-xl overflow-hidden shadow-2xl shadow-blue-500/20 border border-slate-800 bg-slate-900" |
| 134 | + > |
| 135 | + <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent z-10 opacity-50" /> |
| 136 | + <img |
| 137 | + src={ideScreenshot} |
| 138 | + alt="CodeSplit IDE Interface" |
| 139 | + className="w-full h-auto object-cover" |
| 140 | + /> |
| 141 | + |
| 142 | + {/* Glowing Reflection Effect */} |
| 143 | + <div className="absolute -inset-1 bg-gradient-to-r from-blue-500/20 to-purple-500/20 blur-2xl -z-10" /> |
| 144 | + </motion.div> |
| 145 | + </motion.div> |
| 146 | + |
| 147 | + </div> |
| 148 | + |
| 149 | + {/* Features Grid */} |
| 150 | + <div className="relative z-10 max-w-6xl mx-auto mt-32 grid sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
| 151 | + <FeatureCard |
| 152 | + icon={<Code2 className="w-6 h-6" />} |
| 153 | + title="Monaco Editor" |
| 154 | + description="VS Code's powerful editor with syntax highlighting and IntelliSense type checking." |
| 155 | + delay={0.5} |
| 156 | + /> |
| 157 | + <FeatureCard |
| 158 | + icon={<Zap className="w-6 h-6" />} |
| 159 | + title="Live Preview" |
| 160 | + description="See your changes instantly as you type with our blazing fast refresh engine." |
| 161 | + delay={0.6} |
| 162 | + /> |
| 163 | + <FeatureCard |
| 164 | + icon={<Cloud className="w-6 h-6" />} |
| 165 | + title="Cloud Sync" |
| 166 | + description="Your projects are automatically saved and synced across all your devices." |
| 167 | + delay={0.7} |
| 168 | + /> |
| 169 | + <FeatureCard |
| 170 | + icon={<Users className="w-6 h-6" />} |
| 171 | + title="Easy Sharing" |
| 172 | + description="Share your code with a single link." |
| 173 | + delay={0.8} |
| 174 | + /> |
| 175 | + </div> |
| 176 | + </main> |
| 177 | + |
| 178 | + {/* Footer */} |
| 179 | + <footer className="relative z-10 border-t border-slate-800 bg-slate-900/50 backdrop-blur-xl py-12 px-6"> |
| 180 | + <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-sm text-slate-500"> |
| 181 | + <div className="flex items-center gap-2"> |
| 182 | + <div className="w-6 h-6 rounded bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"> |
| 183 | + <span className="text-white font-bold text-xs"></></span> |
| 184 | + </div> |
| 185 | + <span className="font-semibold text-slate-400">CodeSplit</span> |
| 186 | + </div> |
| 187 | + <span>© 2024 CodeSplit. Open Source.</span> |
| 188 | + <div className="flex items-center gap-6"> |
| 189 | + <a href="#" className="hover:text-slate-300 transition-colors">Privacy</a> |
| 190 | + <a href="#" className="hover:text-slate-300 transition-colors">Terms</a> |
| 191 | + <a |
| 192 | + href="https://github.com/CyberSphinxxx/Interactive_Code_Editor" |
| 193 | + target="_blank" |
| 194 | + rel="noopener noreferrer" |
| 195 | + className="hover:text-slate-300 transition-colors flex items-center gap-2" |
| 196 | + > |
| 197 | + <Github className="w-4 h-4" /> |
| 198 | + GitHub |
| 199 | + </a> |
| 200 | + </div> |
| 201 | + </div> |
| 202 | + </footer> |
| 203 | + </div> |
| 204 | + ); |
| 205 | +} |
| 206 | + |
| 207 | +// Feature Card Component with Animation |
| 208 | +function FeatureCard({ |
| 209 | + icon, |
| 210 | + title, |
| 211 | + description, |
| 212 | + delay = 0, |
| 213 | +}: { |
| 214 | + icon: React.ReactNode; |
| 215 | + title: string; |
| 216 | + description: string; |
| 217 | + delay?: number; |
| 218 | +}) { |
| 219 | + return ( |
| 220 | + <motion.div |
| 221 | + initial={{ opacity: 0, y: 20 }} |
| 222 | + animate={{ opacity: 1, y: 0 }} |
| 223 | + transition={{ duration: 0.5, delay }} |
| 224 | + className="p-8 rounded-2xl bg-slate-800/30 border border-slate-700/50 hover:bg-slate-800/50 hover:border-slate-600 transition-all group" |
| 225 | + > |
| 226 | + <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-blue-500/10 flex items-center justify-center text-blue-400 mb-6 group-hover:scale-110 transition-transform duration-300"> |
| 227 | + {icon} |
| 228 | + </div> |
| 229 | + <h3 className="text-xl font-bold mb-3 text-slate-100">{title}</h3> |
| 230 | + <p className="text-slate-400 text-sm leading-relaxed">{description}</p> |
| 231 | + </motion.div> |
| 232 | + ); |
| 233 | +} |
| 234 | + |
| 235 | +export default LandingPage; |
0 commit comments