added landing page

frontend/src/components/landing/About.tsx

@@ -0,0 +1,42 @@
+import { motion } from 'framer-motion';
+
+export function About() {
+    return (
+        <section className="py-24 px-6 bg-zinc-950">
+            <div className="max-w-4xl mx-auto text-center">
+                <motion.span
+                    initial={{ opacity: 0 }}
+                    whileInView={{ opacity: 1 }}
+                    viewport={{ once: true }}
+                    className="text-electric-400 font-semibold tracking-wider text-sm uppercase mb-4 block"
+                >
+                    About The Project
+                </motion.span>
+
+                <motion.h2
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    className="text-3xl md:text-5xl font-bold text-white mb-8"
+                >
+                    An Open Source AI Coding Workspace
+                </motion.h2>
+
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ delay: 0.1 }}
+                    className="p-8 rounded-2xl bg-zinc-900/50 border border-zinc-800 backdrop-blur-sm"
+                >
+                    <p className="text-lg md:text-xl text-zinc-400 leading-relaxed">
+                        <strong className="text-white">Bolty</strong> is a community-driven clone inspired by <em className="text-white">bolt.new</em>.
+                        It empowers developers to build, run, and deploy full-stack applications without leaving the browser.
+                        By leveraging advanced AI models, Bolty turns natural language prompts into production-ready code,
+                        making rapid prototyping and development accessible to everyone.
+                    </p>
+                </motion.div>
+            </div>
+        </section>
+    );
+}

frontend/src/components/landing/Features.tsx

@@ -0,0 +1,80 @@
+import { motion } from 'framer-motion';
+
+// Shadcn-like minimal card with Hover Effect
+function FeatureCard({ title, description, className = "" }: any) {
+    return (
+        <div className={`group relative p-6 rounded-xl border border-zinc-800 bg-zinc-950/20 transition-all duration-300 hover:-translate-y-1 hover:border-zinc-700/50 hover:bg-zinc-900/40 hover:shadow-2xl hover:shadow-electric-500/10 ${className}`}>
+
+            {/* Hover Gradient Border/Glow */}
+            <div className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
+                <div className="absolute inset-x-0 -top-px h-px bg-gradient-to-r from-transparent via-electric-500/50 to-transparent" />
+                <div className="absolute inset-x-0 -bottom-px h-px bg-gradient-to-r from-transparent via-electric-500/10 to-transparent" />
+                <div className="absolute inset-y-0 -left-px w-px bg-gradient-to-b from-transparent via-electric-500/10 to-transparent" />
+                <div className="absolute inset-y-0 -right-px w-px bg-gradient-to-b from-transparent via-electric-500/10 to-transparent" />
+            </div>
+
+            <h3 className="text-lg font-semibold text-white mb-2 tracking-tight group-hover:text-electric-400 transition-colors">{title}</h3>
+            <p className="text-sm text-zinc-400 leading-relaxed group-hover:text-zinc-300 transition-colors">
+                {description}
+            </p>
+        </div>
+    );
+}
+
+const features = [
+    {
+        title: "AI Architect",
+        description: "Intelligent code generation that understands project context and dependencies."
+    },
+    {
+        title: "Full Stack",
+        description: "Generate React frontends and Node.js backends in a single unified workflow."
+    },
+    {
+        title: "Instant Preview",
+        description: "Zero-latency live preview. See your changes update in real-time as you code."
+    },
+    {
+        title: "WebContainers",
+        description: "Browser-native Node.js environment. secure, fast, and sandboxed execution."
+    },
+    {
+        title: "Enterprise Security",
+        description: "Built-in security best practices. Your code runs locally in the browser."
+    },
+    {
+        title: "Smart Optimize",
+        description: "AI automatically refactors and optimizes your code for production performance."
+    }
+];
+
+export function Features() {
+    return (
+        <section className="py-24 px-6 bg-zinc-950 border-t border-zinc-900">
+            <div className="max-w-7xl mx-auto">
+                <div className="mb-16">
+                    <h2 className="text-3xl font-bold tracking-tight text-white mb-4">
+                        Built for modern development
+                    </h2>
+                    <p className="text-zinc-400 max-w-2xl text-lg">
+                        The speed of AI with the control of a traditional IDE.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {features.map((feature, i) => (
+                        <motion.div
+                            key={i}
+                            initial={{ opacity: 0, y: 10 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ delay: i * 0.05 }}
+                        >
+                            <FeatureCard {...feature} />
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

frontend/src/components/landing/Footer.tsx

@@ -0,0 +1,26 @@
+// Footer component with simple links
+
+export function Footer() {
+    return (
+        <footer className="py-12 px-6 bg-zinc-950 border-t border-zinc-900">
+            <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
+                <div className="flex items-center gap-2">
+                    {/* Logo placeholder - using text for now if logo component isnt available in scope easily, 
+              but we can use the same svg from Home if we want or just text */}
+                    <span className="text-xl font-bold text-white tracking-tight">Boltly</span>
+                    <span className="px-2 py-0.5 rounded-full bg-zinc-800 text-xs text-zinc-400">v1.0.0</span>
+                </div>
+
+                <div className="flex items-center gap-8 text-sm text-zinc-500">
+                    <a href="https://github.com/hackice20/boltly" target="_blank" rel="noreferrer" className="hover:text-white transition-colors">GitHub</a>
+                    <a href="#" className="hover:text-white transition-colors">License</a>
+                    <a href="#" className="hover:text-white transition-colors">Privacy</a>
+                </div>
+
+                <div className="text-zinc-600 text-sm">
+                    © {new Date().getFullYear()} Boltly. Open Source.
+                </div>
+            </div>
+        </footer>
+    );
+}

frontend/src/components/landing/Hero.tsx

@@ -0,0 +1,108 @@
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { ArrowRight, Terminal } from 'lucide-react';
+
+export function Hero() {
+    const navigate = useNavigate();
+
+    return (
+        <section className="relative pt-32 pb-40 px-6 overflow-hidden flex flex-col items-center justify-center min-h-[90vh]">
+
+            {/* Mesh Gradient Background */}
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[500px] opacity-30 pointer-events-none">
+                <div className="w-full h-full aurora-gradient rounded-full blur-[100px] animate-aurora"></div>
+            </div>
+
+            <div className="relative z-10 max-w-5xl mx-auto text-center space-y-10">
+
+                {/* Badge */}
+                <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-sm text-zinc-400 backdrop-blur-md"
+                >
+                    <span className="w-2 h-2 rounded-full bg-electric-500 animate-pulse"></span>
+                    <span>v1.0 Now Public</span>
+                </motion.div>
+
+                {/* Headline */}
+                <motion.h1
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.5 }}
+                    className="text-6xl md:text-8xl font-bold tracking-tight text-white leading-[1.1]"
+                >
+                    Build apps at the <br />
+                    <span className="text-zinc-500">speed of thought.</span>
+                </motion.h1>
+
+                {/* Subheadline */}
+                <motion.p
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.2 }}
+                    className="text-xl text-zinc-400 max-w-2xl mx-auto leading-relaxed"
+                >
+                    The open-source AI web builder. Prompt, generate, and deploy full-stack React & Node.js apps directly from your browser.
+                </motion.p>
+
+                {/* CTAs */}
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.3 }}
+                    className="flex flex-col sm:flex-row items-center justify-center gap-4"
+                >
+                    <button
+                        onClick={() => navigate('/builder')}
+                        className="group flex items-center gap-2 bg-white text-zinc-950 px-8 py-4 rounded-full text-lg font-bold hover:bg-zinc-200 transition-all hover:scale-105"
+                    >
+                        Start Building
+                        <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                    </button>
+                    <a
+                        href="https://github.com/hackice20/boltly"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="flex items-center gap-2 px-8 py-4 rounded-full border border-zinc-800 bg-zinc-900/50 text-white hover:bg-zinc-900 transition-all hover:border-zinc-700"
+                    >
+                        <Terminal className="w-5 h-5 text-zinc-500" />
+                        <span>Documentation</span>
+                    </a>
+                </motion.div>
+
+                {/* Floating Code Preview (Subtle) */}
+                <motion.div
+                    initial={{ opacity: 0, y: 40 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.5, duration: 0.8 }}
+                    className="mt-12 mx-auto max-w-4xl"
+                >
+                    <div className="rounded-xl border border-white/10 bg-zinc-950/80 backdrop-blur-xl shadow-2xl p-2">
+                        <div className="flex items-center gap-2 px-4 py-2 border-b border-white/5 bg-white/5 rounded-t-lg">
+                            <div className="flex gap-1.5">
+                                <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
+                                <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
+                                <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
+                            </div>
+                            <div className="ml-4 text-xs text-zinc-500 font-mono">terminal — boltly-cli</div>
+                        </div>
+                        <div className="p-6 font-mono text-sm text-zinc-400 text-left">
+                            <div className="flex gap-2">
+                                <span className="text-electric-500">$</span>
+                                <span className="text-white">boltly create</span>
+                                <span className="text-zinc-500">"a personal portfolio with a blog"</span>
+                            </div>
+                            <div className="mt-2 text-zinc-500">
+                                Analyzing requirements... <span className="text-green-500">Done</span><br />
+                                Generating database schema... <span className="text-green-500">Done</span><br />
+                                Scaffolding Next.js project... <span className="text-green-500">Done</span><br />
+                                <span className="text-white mt-2 block">Application ready at http://localhost:3000 🚀</span>
+                            </div>
+                        </div>
+                    </div>
+                </motion.div>
+            </div>
+        </section>
+    );
+}

frontend/src/components/landing/HowItWorks.tsx

@@ -0,0 +1,69 @@
+import { motion } from 'framer-motion';
+import { MessageSquare, Zap, PenTool, Play } from 'lucide-react';
+
+const steps = [
+    {
+        icon: <MessageSquare className="w-6 h-6 text-white" />,
+        title: "1. Prompt",
+        description: "Describe your application idea in natural language."
+    },
+    {
+        icon: <Zap className="w-6 h-6 text-white" />,
+        title: "2. Generate",
+        description: "AI architects the structure and writes the initial code."
+    },
+    {
+        icon: <PenTool className="w-6 h-6 text-white" />,
+        title: "3. Edit",
+        description: "Refine definitions or edit code manually in the browser."
+    },
+    {
+        icon: <Play className="w-6 h-6 text-white" />,
+        title: "4. Run",
+        description: "Instantly deploy a live preview of your full-stack app."
+    }
+];
+
+export function HowItWorks() {
+    return (
+        <section className="py-24 px-6 bg-zinc-950 relative overflow-hidden">
+            {/* Background Decor */}
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[300px] bg-electric-900/20 blur-[100px] rounded-full pointer-events-none" />
+
+            <div className="max-w-7xl mx-auto relative z-10">
+                <div className="text-center mb-20">
+                    <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
+                        From idea to deployment <br />
+                        <span className="text-neon-400">in four simple steps.</span>
+                    </h2>
+                </div>
+
+                <div className="grid md:grid-cols-4 gap-8 relative">
+                    {/* Connecting Line (Desktop) */}
+                    <div className="hidden md:block absolute top-[2.5rem] left-0 right-0 h-0.5 bg-gradient-to-r from-zinc-800 via-electric-900 to-zinc-800 -z-10" />
+
+                    {steps.map((step, i) => (
+                        <motion.div
+                            key={i}
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ delay: i * 0.2 }}
+                            className="relative flex flex-col items-center text-center"
+                        >
+                            <div className="w-20 h-20 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center mb-6 shadow-lg shadow-black/50 z-10">
+                                <div className="p-3 bg-electric-600 rounded-lg">
+                                    {step.icon}
+                                </div>
+                            </div>
+                            <h3 className="text-xl font-bold text-white mb-3">{step.title}</h3>
+                            <p className="text-zinc-400 text-sm leading-relaxed max-w-[200px]">
+                                {step.description}
+                            </p>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

frontend/src/components/landing/Navbar.tsx

@@ -0,0 +1,40 @@
+import { Github, Zap } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+
+export function Navbar() {
+    const navigate = useNavigate();
+
+    return (
+        <nav className="fixed top-0 left-0 right-0 z-50 border-b border-white/5 bg-zinc-950/50 backdrop-blur-xl">
+            <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
+                <div className="flex items-center gap-2 cursor-pointer" onClick={() => navigate('/')}>
+                    <div className="p-1.5 rounded-lg bg-electric-500/10 text-electric-500">
+                        <Zap className="w-5 h-5 fill-current" />
+                    </div>
+                    <span className="text-xl font-bold tracking-tight text-white">Boltly</span>
+                </div>
+
+                <div className="flex items-center gap-4">
+                    <a
+                        href="https://github.com/hackice20/boltly"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="p-2 text-zinc-400 hover:text-white transition-colors"
+                    >
+                        <Github className="w-5 h-5" />
+                    </a>
+                    <button className="hidden sm:flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 hover:bg-white/5 transition-colors text-sm font-medium text-zinc-300">
+                        Sign In
+                    </button>
+                    <button
+                        onClick={() => navigate('/builder')}
+                        className="bg-white text-zinc-950 px-4 py-2 rounded-full text-sm font-bold hover:bg-zinc-200 transition-colors"
+                    >
+                        Get Started
+                    </button>
+                </div>
+            </div>
+        </nav>
+    );
+}