From 5c583098047de9224b2f0d2633aad92631fb2ea6 Mon Sep 17 00:00:00 2001
From: Tejas1771 <136698267+Tejas1771@users.noreply.github.com>
Date: Thu, 15 Jan 2026 19:29:24 +0530
Subject: [PATCH] added landing page

---
 frontend/src/components/landing/About.tsx     |  42 +++
 frontend/src/components/landing/Features.tsx  |  80 +++++
 frontend/src/components/landing/Footer.tsx    |  26 ++
 frontend/src/components/landing/Hero.tsx      | 108 +++++++
 .../src/components/landing/HowItWorks.tsx     |  69 ++++
 frontend/src/components/landing/Navbar.tsx    |  40 +++
 .../src/components/landing/OpenSource.tsx     |  52 +++
 frontend/src/components/landing/WhyBoltly.tsx |  68 ++++
 frontend/src/index.css                        | 259 +++------------
 frontend/src/pages/Home.tsx                   | 297 ++----------------
 frontend/tailwind.config.ts                   |  42 ++-
 frontend/vite.config.ts                       |   1 +
 12 files changed, 573 insertions(+), 511 deletions(-)
 create mode 100644 frontend/src/components/landing/About.tsx
 create mode 100644 frontend/src/components/landing/Features.tsx
 create mode 100644 frontend/src/components/landing/Footer.tsx
 create mode 100644 frontend/src/components/landing/Hero.tsx
 create mode 100644 frontend/src/components/landing/HowItWorks.tsx
 create mode 100644 frontend/src/components/landing/Navbar.tsx
 create mode 100644 frontend/src/components/landing/OpenSource.tsx
 create mode 100644 frontend/src/components/landing/WhyBoltly.tsx

diff --git a/frontend/src/components/landing/About.tsx b/frontend/src/components/landing/About.tsx
new file mode 100644
index 0000000..2d896ce
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/frontend/src/components/landing/Features.tsx b/frontend/src/components/landing/Features.tsx
new file mode 100644
index 0000000..3f860e5
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/frontend/src/components/landing/Footer.tsx b/frontend/src/components/landing/Footer.tsx
new file mode 100644
index 0000000..b0fb0ac
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/frontend/src/components/landing/Hero.tsx b/frontend/src/components/landing/Hero.tsx
new file mode 100644
index 0000000..29a1867
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/frontend/src/components/landing/HowItWorks.tsx b/frontend/src/components/landing/HowItWorks.tsx
new file mode 100644
index 0000000..3b9d879
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/frontend/src/components/landing/Navbar.tsx b/frontend/src/components/landing/Navbar.tsx
new file mode 100644
index 0000000..6a3eb4b
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/frontend/src/components/landing/OpenSource.tsx b/frontend/src/components/landing/OpenSource.tsx
new file mode 100644
index 0000000..db33629
--- /dev/null
+++ b/frontend/src/components/landing/OpenSource.tsx
@@ -0,0 +1,52 @@
+import { motion } from 'framer-motion';
+import { Github, Star, GitFork } from 'lucide-react';
+
+export function OpenSource() {
+    return (
+        <section className="py-24 px-6 relative overflow-hidden">
+            {/* Background Gradient */}
+            <div className="absolute inset-0 bg-gradient-to-br from-electric-900 via-zinc-950 to-zinc-950 opacity-50" />
+
+            <div className="max-w-4xl mx-auto relative z-10 text-center">
+                <motion.div
+                    initial={{ opacity: 0, scale: 0.95 }}
+                    whileInView={{ opacity: 1, scale: 1 }}
+                    viewport={{ once: true }}
+                    className="p-12 rounded-3xl bg-zinc-900/50 border border-electric-500/20 backdrop-blur-xl"
+                >
+                    <Github className="w-16 h-16 text-white mx-auto mb-6" />
+                    <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+                        Proudly Open Source
+                    </h2>
+                    <p className="text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
+                        Bolty is free and open for everyone. Join our community of developers
+                        building the future of AI-assisted coding.
+                    </p>
+
+                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                        <a
+                            href="https://github.com/hackice20/boltly"
+                            target="_blank"
+                            rel="noreferrer"
+                            className="group flex items-center gap-3 px-8 py-4 rounded-xl bg-white text-zinc-950 font-bold text-lg hover:bg-zinc-200 transition-all hover:scale-105"
+                        >
+                            <Github className="w-6 h-6" />
+                            <span>Star on GitHub</span>
+                        </a>
+
+                        <div className="flex gap-4 text-zinc-400 font-mono text-sm ml-0 sm:ml-4">
+                            <div className="flex items-center gap-1">
+                                <Star className="w-4 h-4 text-yellow-500" />
+                                <span>Star us</span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                                <GitFork className="w-4 h-4 text-electric-400" />
+                                <span>Fork us</span>
+                            </div>
+                        </div>
+                    </div>
+                </motion.div>
+            </div>
+        </section>
+    );
+}
diff --git a/frontend/src/components/landing/WhyBoltly.tsx b/frontend/src/components/landing/WhyBoltly.tsx
new file mode 100644
index 0000000..db9bfac
--- /dev/null
+++ b/frontend/src/components/landing/WhyBoltly.tsx
@@ -0,0 +1,68 @@
+import { motion } from 'framer-motion';
+import { Timer, Trophy, Users } from 'lucide-react';
+
+export function WhyBoltly() {
+    return (
+        <section className="py-24 px-6 bg-zinc-900 border-y border-zinc-800">
+            <div className="max-w-7xl mx-auto">
+                <div className="text-center mb-16">
+                    <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
+                        Why developers choose <span className="text-electric-400">Boltly</span>
+                    </h2>
+                </div>
+
+                <div className="grid md:grid-cols-3 gap-8">
+                    <motion.div
+                        initial={{ opacity: 0, x: -20 }}
+                        whileInView={{ opacity: 1, x: 0 }}
+                        viewport={{ once: true }}
+                        className="p-8 rounded-2xl bg-zinc-950 border border-zinc-800"
+                    >
+                        <div className="mb-6 inline-flex p-3 rounded-lg bg-blue-500/10 text-blue-400">
+                            <Timer className="w-8 h-8" />
+                        </div>
+                        <h3 className="text-xl font-bold text-white mb-3">Faster Prototyping</h3>
+                        <p className="text-zinc-400">
+                            Skip the boilerplate. Get straight to the logic.
+                            Boltly handles the mundane setup so you can focus on the unique features of your app.
+                        </p>
+                    </motion.div>
+
+                    <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-950 border border-zinc-800"
+                    >
+                        <div className="mb-6 inline-flex p-3 rounded-lg bg-yellow-500/10 text-yellow-400">
+                            <Trophy className="w-8 h-8" />
+                        </div>
+                        <h3 className="text-xl font-bold text-white mb-3">Hackathon Ready</h3>
+                        <p className="text-zinc-400">
+                            Perfect for hackathons where every minute counts.
+                            Generate a working MVP in minutes and spend the rest of your time polishing.
+                        </p>
+                    </motion.div>
+
+                    <motion.div
+                        initial={{ opacity: 0, x: 20 }}
+                        whileInView={{ opacity: 1, x: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ delay: 0.2 }}
+                        className="p-8 rounded-2xl bg-zinc-950 border border-zinc-800"
+                    >
+                        <div className="mb-6 inline-flex p-3 rounded-lg bg-green-500/10 text-green-400">
+                            <Users className="w-8 h-8" />
+                        </div>
+                        <h3 className="text-xl font-bold text-white mb-3">Community Driven</h3>
+                        <p className="text-zinc-400">
+                            Built by developers, for developers.
+                            Boltly is fully open source, transparent, and constantly evolving with community contributions.
+                        </p>
+                    </motion.div>
+                </div>
+            </div>
+        </section>
+    );
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5bef098..3880ae0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,250 +1,77 @@
 @import "tailwindcss";
 
-/* CSS Custom Properties for Glassmorphic Design */
-:root {
-    /* Glass effect values */
-    --glass-bg: rgba(24, 24, 27, 0.7);
-    --glass-bg-light: rgba(39, 39, 42, 0.6);
-    --glass-border: rgba(255, 255, 255, 0.1);
-    --glass-border-strong: rgba(255, 255, 255, 0.15);
-
-    /* Shadows */
-    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-    --shadow-glass-lg: 0 12px 48px 0 rgba(0, 0, 0, 0.5);
-    --shadow-glass-sm: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
-
-    /* Primary accent */
-    --primary: #f17013;
-    --primary-light: #f48d32;
-    --primary-dark: #e25809;
+@font-face {
+    font-family: 'Geist Mono';
+    src: url('https://assets.vercel.com/font/geist-mono.woff2') format('woff2');
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: normal;
 }
 
-/* Base styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+/* CSS Custom Properties for Boltly Design */
+:root {
+    --electric-primary: #3b82f6;
+    --neon-accent: #22c55e;
 }
 
+/* Base styles */
 body {
-    font-family: 'Inter', sans-serif;
-    background: #18181b;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    background: #09090b;
+    /* Zinc 950 base */
     color: #fafafa;
     overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+}
+
+code,
+pre,
+.font-mono {
+    font-family: 'Geist Mono', 'Fira Code', monospace;
 }
 
-/* Custom Scrollbar Styles - Slim and Blended */
+/* Custom Scrollbar Styles - Slim and Dark */
 ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
 }
 
 ::-webkit-scrollbar-track {
-    background: rgba(39, 39, 42, 0.3);
-    border-radius: 4px;
+    background: #09090b;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(115, 115, 115, 0.5);
-    border-radius: 4px;
-    transition: background 0.2s ease;
+    background: #27272a;
+    border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba(163, 163, 163, 0.7);
-}
-
-/* Firefox scrollbar */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(115, 115, 115, 0.5) rgba(39, 39, 42, 0.3);
-}
-
-/* Glass Container Utility Classes */
-.glass-container {
-    background: var(--glass-bg);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid var(--glass-border);
-    box-shadow: var(--shadow-glass);
-    border-radius: 1rem;
-}
-
-.glass-container-light {
-    background: var(--glass-bg-light);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    border: 1px solid var(--glass-border);
-    box-shadow: var(--shadow-glass-sm);
-    border-radius: 0.75rem;
+    background: #3f3f46;
 }
 
-/* Glass Button Base */
-.glass-button {
-    background: var(--glass-bg-light);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    border: 1px solid var(--glass-border-strong);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.glass-button:hover {
-    background: rgba(39, 39, 42, 0.8);
-    border-color: rgba(255, 255, 255, 0.25);
-    box-shadow: 0 0 20px rgba(241, 112, 19, 0.2);
-}
-
-/* Glass Input */
-.glass-input {
-    background: rgba(24, 24, 27, 0.5);
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
-    border: 1px solid var(--glass-border);
-    border-bottom: 2px solid var(--glass-border-strong);
-    transition: all 0.2s ease;
-}
-
-.glass-input:focus {
-    outline: none;
-    border-color: var(--primary);
-    box-shadow: 0 0 15px rgba(241, 112, 19, 0.15);
-    background: rgba(24, 24, 27, 0.7);
-}
-
-/* Textarea placeholder - ensure visibility */
-textarea::placeholder {
-    color: rgb(113, 113, 122);
-    opacity: 1;
-}
-
-/* Text Selection */
+/* Selection */
 ::selection {
-    background: rgba(241, 112, 19, 0.3);
-    color: #fafafa;
+    background: rgba(59, 130, 246, 0.3);
+    /* Electric Blue */
+    color: #fff;
 }
 
-/* Smooth Transitions */
-.transition-glass {
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+/* Utilities */
+.glass-panel {
+    background: rgba(24, 24, 27, 0.6);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-/* Subtle background texture/noise */
-.bg-noise {
-    background-image:
-        radial-gradient(at 40% 20%, rgba(241, 112, 19, 0.05) 0px, transparent 50%),
-        radial-gradient(at 80% 0%, rgba(39, 39, 42, 0.8) 0px, transparent 50%);
+.aurora-gradient {
+    background-image: repeating-linear-gradient(100deg, #3b82f6 0%, #4338ca 50%, #22c55e 100%);
+    background-size: 350% 350%;
+    filter: blur(10px);
 }
 
-/* Italic Gradient Text - Boltly Orange Brand */
-.text-gradient-italic {
-    font-style: italic;
-    background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
+.text-gradient {
+    background: linear-gradient(to right, #60a5fa, #4ade80);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-}
-
-/* Clean Input Container - Bolt.new style */
-.input-container-clean {
-    background: rgba(39, 39, 42, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 1rem;
-    transition: all 0.2s ease;
-}
-
-.input-container-clean:hover,
-.input-container-clean:focus-within {
-    border-color: rgba(255, 255, 255, 0.15);
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-/* Ghost Button - Like Bolt.new "Plan" */
-.btn-ghost {
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    color: #a1a1aa;
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    font-size: 0.875rem;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    transition: all 0.2s ease;
-    cursor: pointer;
-}
-
-.btn-ghost:hover {
-    background: rgba(255, 255, 255, 0.05);
-    color: #e4e4e7;
-    border-color: rgba(255, 255, 255, 0.2);
-}
-
-/* Primary Action Button - Bolt.new style */
-.btn-primary-action {
-    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-    color: white;
-    padding: 0.5rem 1.25rem;
-    border-radius: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    border: none;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn-primary-action:hover {
-    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
-    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
-}
-
-.btn-primary-action:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-/* Import link style */
-.import-link {
-    color: #71717a;
-    font-size: 0.875rem;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    transition: color 0.2s ease;
-}
-
-.import-link:hover {
-    color: #a1a1aa;
-}
-
-/* Animations */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.animate-fade-in-up {
-    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.animate-slide-up-fade {
-    opacity: 0;
-    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.delay-100 {
-    animation-delay: 100ms;
-}
-
-.delay-200 {
-    animation-delay: 200ms;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index ec13fa7..5a5a566 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,285 +1,24 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Plus, ArrowRight, Lightbulb, Sun, Moon } from 'lucide-react';
-
-// Minimal geometric lightning bolt logo
-function BoltLogo({ fill = 'black' }: { fill?: string }) {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
-      <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" fill={fill} />
-    </svg>
-  );
-}
+import { Navbar } from '../components/landing/Navbar';
+import { Hero } from '../components/landing/Hero';
+import { About } from '../components/landing/About';
+import { Features } from '../components/landing/Features';
+import { HowItWorks } from '../components/landing/HowItWorks';
+import { WhyBoltly } from '../components/landing/WhyBoltly';
+import { OpenSource } from '../components/landing/OpenSource';
+import { Footer } from '../components/landing/Footer';
 
 export function Home() {
-  const [prompt, setPrompt] = useState('');
-  const [isFocused, setIsFocused] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(true);
-  const navigate = useNavigate();
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (prompt.trim()) {
-      navigate('/builder', { state: { prompt } });
-    }
-  };
-
-  const suggestions = [
-    'Modern portfolio',
-    'SaaS landing page',
-    'Admin dashboard',
-    'E-commerce store',
-  ];
-
   return (
-    <div
-      style={{
-        minHeight: '100vh',
-        backgroundColor: isDarkMode ? '#000000' : '#fafafa',
-        position: 'relative',
-        overflow: 'hidden',
-        transition: 'background-color 0.3s ease',
-      }}
-    >
-      {/* Grid Background */}
-      <div
-        className="absolute inset-0 transition-opacity duration-500 ease-in-out"
-        style={{
-          backgroundImage: `
-            linear-gradient(${isDarkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)'} 1px, transparent 1px),
-            linear-gradient(90deg, ${isDarkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)'} 1px, transparent 1px)
-          `,
-          backgroundSize: '40px 40px',
-          maskImage: 'radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%)',
-          WebkitMaskImage: 'radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%)',
-        }}
-      />
-
-      <div className="relative z-10 min-h-screen flex flex-col">
-
-        {/* ========== NAVIGATION ========== */}
-        <header
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 50,
-            padding: '24px 32px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          {/* Logo - Left */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
-            <div
-              style={{
-                width: '32px',
-                height: '32px',
-                backgroundColor: isDarkMode ? 'white' : '#18181b',
-                borderRadius: '8px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <BoltLogo fill={isDarkMode ? 'black' : 'white'} />
-            </div>
-            <span style={{ fontSize: '16px', fontWeight: 600, color: isDarkMode ? 'white' : '#18181b' }}>Boltly</span>
-          </div>
-
-          {/* Theme Toggle - Right */}
-          <button
-            onClick={() => setIsDarkMode(!isDarkMode)}
-            style={{
-              width: '40px',
-              height: '40px',
-              borderRadius: '50%',
-              backgroundColor: isDarkMode ? '#27272a' : '#e4e4e7',
-              border: 'none',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              cursor: 'pointer',
-              transition: 'all 0.2s ease',
-            }}
-            aria-label="Toggle theme"
-          >
-            {isDarkMode ? (
-              <Sun style={{ width: '20px', height: '20px', color: '#fbbf24' }} />
-            ) : (
-              <Moon style={{ width: '20px', height: '20px', color: '#3b82f6' }} />
-            )}
-          </button>
-        </header>
-
-        {/* ========== MAIN CONTENT ========== */}
-        <main className="flex-1 flex items-center justify-center px-4 pt-20 pb-24">
-          <div className="w-full max-w-2xl">
-
-            {/* ===== HERO TEXT ===== */}
-            <div style={{ textAlign: 'center', marginBottom: '40px' }}>
-              <h1
-                style={{
-                  fontSize: '3rem',
-                  fontWeight: 500,
-                  letterSpacing: '-0.02em',
-                  color: isDarkMode ? 'white' : '#18181b',
-                  marginBottom: '12px',
-                }}
-              >
-                What will you build today?
-              </h1>
-              <p style={{ color: isDarkMode ? '#a1a1aa' : '#71717a', fontSize: '1.125rem' }}>
-                Describe your idea and watch it come to life.
-              </p>
-            </div>
-
-            {/* ===== INPUT BOX - ALL INLINE STYLES ===== */}
-            <form onSubmit={handleSubmit} style={{ marginBottom: '32px' }}>
-              <div
-                style={{
-                  borderRadius: '24px',
-                  backgroundColor: isDarkMode ? '#18181b' : '#ffffff',
-                  border: isFocused
-                    ? `1px solid ${isDarkMode ? '#52525b' : '#a1a1aa'}`
-                    : `1px solid ${isDarkMode ? '#27272a' : '#e4e4e7'}`,
-                  overflow: 'hidden',
-                  boxShadow: isFocused
-                    ? `0 25px 50px -12px ${isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.15)'}`
-                    : `0 10px 15px -3px ${isDarkMode ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.08)'}`,
-                  transition: 'all 0.2s ease',
-                }}
-              >
-                {/* TEXT AREA WRAPPER */}
-                <div style={{ padding: '24px 24px 16px 24px' }}>
-                  <textarea
-                    value={prompt}
-                    onChange={(e) => setPrompt(e.target.value)}
-                    onFocus={() => setIsFocused(true)}
-                    onBlur={() => setIsFocused(false)}
-                    placeholder="Describe your project..."
-                    rows={3}
-                    style={{
-                      width: '100%',
-                      minHeight: '80px',
-                      backgroundColor: 'transparent',
-                      color: isDarkMode ? 'white' : '#18181b',
-                      fontSize: '16px',
-                      lineHeight: '1.6',
-                      border: 'none',
-                      outline: 'none',
-                      resize: 'none',
-                      fontFamily: 'inherit',
-                    }}
-                  />
-                </div>
-
-                {/* ACTION BAR */}
-                <div
-                  style={{
-                    padding: '0 20px 20px 20px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  {/* + BUTTON */}
-                  <button
-                    type="button"
-                    aria-label="Add attachment"
-                    style={{
-                      width: '40px',
-                      height: '40px',
-                      borderRadius: '50%',
-                      backgroundColor: isDarkMode ? '#3f3f46' : '#e4e4e7',
-                      border: 'none',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      cursor: 'pointer',
-                    }}
-                  >
-                    <Plus style={{ width: '20px', height: '20px', color: isDarkMode ? '#a1a1aa' : '#52525b' }} />
-                  </button>
-
-                  {/* RIGHT BUTTONS */}
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                    {/* PLAN */}
-                    <button
-                      type="button"
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '6px',
-                        padding: '8px 16px',
-                        backgroundColor: 'transparent',
-                        border: 'none',
-                        color: isDarkMode ? '#a1a1aa' : '#52525b',
-                        fontSize: '14px',
-                        cursor: 'pointer',
-                      }}
-                    >
-                      <Lightbulb style={{ width: '16px', height: '16px' }} />
-                      <span>Plan</span>
-                    </button>
-
-                    {/* BUILD NOW */}
-                    <button
-                      type="submit"
-                      disabled={!prompt.trim()}
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '8px',
-                        padding: '10px 20px',
-                        borderRadius: '9999px',
-                        backgroundColor: prompt.trim() ? '#3b82f6' : '#3b82f6',
-                        opacity: prompt.trim() ? 1 : 0.4,
-                        border: 'none',
-                        color: 'white',
-                        fontSize: '14px',
-                        fontWeight: 500,
-                        cursor: prompt.trim() ? 'pointer' : 'not-allowed',
-                      }}
-                    >
-                      <span>Build now</span>
-                      <ArrowRight style={{ width: '16px', height: '16px' }} />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </form>
-
-            {/* ===== SUGGESTION CHIPS ===== */}
-            <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: '8px' }}>
-              <span style={{ fontSize: '12px', color: isDarkMode ? '#71717a' : '#a1a1aa', marginRight: '4px' }}>Try:</span>
-              {suggestions.map((suggestion, i) => (
-                <button
-                  key={i}
-                  type="button"
-                  onClick={() => setPrompt(suggestion)}
-                  style={{
-                    padding: '4px 12px',
-                    borderRadius: '8px',
-                    fontSize: '12px',
-                    color: isDarkMode ? '#a1a1aa' : '#52525b',
-                    backgroundColor: isDarkMode ? '#18181b' : '#ffffff',
-                    border: `1px solid ${isDarkMode ? '#27272a' : '#e4e4e7'}`,
-                    cursor: 'pointer',
-                    transition: 'all 0.2s ease',
-                  }}
-                >
-                  {suggestion}
-                </button>
-              ))}
-            </div>
-
-          </div>
-        </main>
-
-      </div>
+    <div className="min-h-screen bg-black text-white selection:bg-electric-500/30 font-sans">
+      <Navbar />
+      <Hero />
+      <Features />
+      {/* Keeping these sections as they fit the mood, maybe refactor later if requested */}
+      <About />
+      <HowItWorks />
+      <WhyBoltly />
+      <OpenSource />
+      <Footer />
     </div>
   );
 }
\ No newline at end of file
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 35d75f0..d44bd8d 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -19,25 +19,30 @@ const config: Config = {
                     border: 'rgba(255, 255, 255, 0.1)',
                     'border-strong': 'rgba(255, 255, 255, 0.15)',
                 },
-                // Primary accent: Burnt Orange
-                primary: {
-                    50: '#fef7ee',
-                    100: '#fdecd3',
-                    200: '#fad4a5',
-                    300: '#f7b66d',
-                    400: '#f48d32',
-                    500: '#f17013', // Main burnt orange
-                    600: '#e25809',
-                    700: '#bb420a',
-                    800: '#95350f',
-                    900: '#792d10',
+                // Primary accent: Electric Blue & Neon Green
+                electric: {
+                    50: '#eff6ff',
+                    100: '#dbeafe',
+                    200: '#bfdbfe',
+                    300: '#93c5fd',
+                    400: '#60a5fa',
+                    500: '#3b82f6', // Main Electric Blue
+                    600: '#2563eb',
+                    700: '#1d4ed8',
+                    800: '#1e40af',
+                    900: '#1e3a8a',
+                },
+                neon: {
+                    400: '#4ade80',
+                    500: '#22c55e', // Main Neon Green
+                    600: '#16a34a',
                 },
                 // Deep charcoal backgrounds
                 charcoal: {
-                    900: '#18181b',
-                    800: '#27272a',
-                    700: '#3f3f46',
-                    600: '#52525b',
+                    900: '#09090b', // Darker base
+                    800: '#18181b',
+                    700: '#27272a',
+                    600: '#3f3f46',
                 },
             },
             backdropBlur: {
@@ -55,6 +60,7 @@ const config: Config = {
                 'slide-up': 'slideUp 0.3s ease-out',
                 'slide-down': 'slideDown 0.3s ease-out',
                 'glass-shimmer': 'glassShimmer 2s ease-in-out infinite',
+                'aurora': 'aurora 6s linear infinite',
             },
             keyframes: {
                 fadeIn: {
@@ -73,6 +79,10 @@ const config: Config = {
                     '0%, 100%': { backgroundPosition: '0% 50%' },
                     '50%': { backgroundPosition: '100% 50%' },
                 },
+                aurora: {
+                    '0%': { backgroundPosition: '50% 50%, 50% 50%' },
+                    '100%': { backgroundPosition: '350% 50%, 350% 50%' },
+                },
             },
         },
     },
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 80dc95a..57f67a4 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -9,6 +9,7 @@ export default defineConfig({
     tailwindcss(),
   ],
   server: {
+    port: 3000,
     headers: {
       "Cross-Origin-Embedder-Policy": "require-corp",
       "Cross-Origin-Opener-Policy": "same-origin"