diff --git a/src/components/AIBackends.tsx b/src/components/AIBackends.tsx
index 89a1eb6..53c3c59 100644
--- a/src/components/AIBackends.tsx
+++ b/src/components/AIBackends.tsx
@@ -1,9 +1,72 @@
-import { GlowingEffectDemo } from "@/components/ui/glowing-effect-demo";
+import { Box, Lock, Search, Settings, Sparkles } from "lucide-react";
+
+const features = [
+  {
+    icon: Box,
+    title: "Multiple AI Backends",
+    description: "Choose from Claude, GPT-4, Gemini, or any OpenAI-compatible API. Switch between models seamlessly based on your project needs."
+  },
+  {
+    icon: Settings,
+    title: "Fully Customizable",
+    description: "Configure every aspect of your AI assistant. From prompt templates to response formats, make it work exactly how you want."
+  },
+  {
+    icon: Lock,
+    title: "Data Privacy",
+    description: "Self-hosted option available. Your code never leaves your environment when using local models or private API endpoints."
+  },
+  {
+    icon: Sparkles,
+    title: "Advanced Modes",
+    description: "Beyond basic chat - Debug Mode for troubleshooting, Architect Mode for planning, and Async Mode for autonomous development."
+  },
+  {
+    icon: Search,
+    title: "Enterprise Security",
+    description: "Built with security in mind. Audit logs, role-based access, and compliance features for enterprise development teams."
+  }
+];
 
 export default function AIBackends() {
   return (
     <section id="ai-backends" className="py-20 bg-transparent">
-      <GlowingEffectDemo />
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            Your Control, Your Rules
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Complete flexibility to choose your AI backend, customize your workflow, and maintain full control over your development process.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 md:gap-8">
+          {features.map((feature, index) => {
+            const Icon = feature.icon;
+            return (
+              <div
+                key={index}
+                className="p-6 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:shadow-md dark:hover:shadow-lg transition-shadow duration-200"
+              >
+                <div className="flex items-start gap-4">
+                  <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-800 flex-shrink-0">
+                    <Icon className="w-6 h-6 text-gray-700 dark:text-gray-300" />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                      {feature.title}
+                    </h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
     </section>
   );
 }
diff --git a/src/components/EnhancedRoadmap.tsx b/src/components/EnhancedRoadmap.tsx
index 802c61a..b0eb32f 100644
--- a/src/components/EnhancedRoadmap.tsx
+++ b/src/components/EnhancedRoadmap.tsx
@@ -1,59 +1,129 @@
 "use client";
 import React from "react";
-import { RoadmapTimeline } from "@/components/ui/roadmap-timeline";
+import { CheckCircle2 } from "lucide-react";
+
+const roadmapPhases = [
+  {
+    phase: "Phase 1",
+    title: "Foundation",
+    status: "In Progress",
+    items: [
+      "Debug Mode - Interactive debugging assistance",
+      "Ask Mode - Natural language code queries",
+      "Documentation Mode - Auto-generate docs",
+      "Architect Mode - System design planning"
+    ]
+  },
+  {
+    phase: "Phase 2",
+    title: "Automation",
+    status: "Planned",
+    items: [
+      "Async Mode - Autonomous task chaining",
+      "PR Creation & Review - Automated pull requests",
+      "Intelligent Code Suggestions",
+      "Multi-language support"
+    ]
+  },
+  {
+    phase: "Phase 3",
+    title: "DevOps",
+    status: "Planned",
+    items: [
+      "CI/CD Integration - GitHub Actions & GitLab",
+      "Docker Containerization",
+      "Kubernetes Orchestration",
+      "Automated Deployment Pipelines"
+    ]
+  },
+  {
+    phase: "Phase 4",
+    title: "Platform",
+    status: "Planned",
+    items: [
+      "Web-based IDE Integration",
+      "Plugin Architecture",
+      "Team Collaboration Features",
+      "Analytics Dashboard"
+    ]
+  }
+];
 
 export default function EnhancedRoadmap() {
   return (
     <section id="roadmap" className="py-20 bg-transparent">
-      <div className="max-w-6xl mx-auto px-6">
-        {/* Section Header */}
+      <div className="max-w-7xl mx-auto px-6">
         <div className="text-center mb-16">
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
             Development Roadmap
           </h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8">
+          <p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
             Our vision for the future of AI-powered development. Track our progress and see what&apos;s coming next.
           </p>
-          <div className="inline-flex items-center space-x-2 bg-white dark:bg-gray-800 px-4 py-2 rounded-full border border-gray-200 dark:border-gray-700">
-            <span className="text-gray-600 dark:text-gray-300 text-sm font-medium">
-              🎯 Version 0.1.0 Target
-            </span>
-          </div>
         </div>
 
-        {/* Enhanced Timeline Component */}
-        <div className="relative -mx-6">
-          <RoadmapTimeline />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+          {roadmapPhases.map((phase, index) => (
+            <div
+              key={index}
+              className="p-8 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900"
+            >
+              <div className="flex items-start justify-between mb-6">
+                <div>
+                  <div className="text-sm font-medium text-blue-600 dark:text-blue-400 mb-1">
+                    {phase.phase}
+                  </div>
+                  <h3 className="text-2xl font-bold text-gray-900 dark:text-white">
+                    {phase.title}
+                  </h3>
+                </div>
+                <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-800">
+                  <div className={`w-2 h-2 rounded-full ${phase.status === 'In Progress' ? 'bg-blue-500' : 'bg-gray-400'}`} />
+                  <span className="text-xs font-medium text-gray-600 dark:text-gray-300">
+                    {phase.status}
+                  </span>
+                </div>
+              </div>
+              <ul className="space-y-3">
+                {phase.items.map((item, itemIndex) => (
+                  <li key={itemIndex} className="flex items-start gap-3">
+                    <CheckCircle2 className="w-5 h-5 text-gray-300 dark:text-gray-700 flex-shrink-0 mt-0.5" />
+                    <span className="text-sm text-gray-600 dark:text-gray-300">
+                      {item}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
         </div>
 
-        {/* Community Section */}
-        <div className="mt-20 text-center">
-          <div className="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-8 shadow-lg">
-            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+        <div className="bg-gradient-to-r from-blue-50 to-transparent dark:from-blue-950/20 dark:to-transparent rounded-xl border border-blue-200 dark:border-blue-800/50 p-8">
+          <div className="max-w-2xl mx-auto text-center">
+            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
               Help Shape the Future
             </h3>
-            <p className="text-gray-600 dark:text-gray-300 mb-6 max-w-2xl mx-auto">
-              Async Coder is built with and for the open-source community. Your feedback, 
-              contributions, and feature requests directly influence our roadmap.
+            <p className="text-gray-600 dark:text-gray-300 mb-6">
+              Async Coder is built with and for the open-source community. Your feedback, contributions, and feature requests directly influence our roadmap.
             </p>
-            <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
+            <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-6">
               <a
                 href="https://github.com/your-org/async-coder/discussions"
-                className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:shadow-lg transition-all duration-200"
+                className="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200"
               >
-                💬 Join Discussions
+                Discussions
               </a>
               <a
                 href="https://github.com/your-org/async-coder/issues"
-                className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200"
+                className="px-6 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200"
               >
-                🐛 Report Issues
+                Report Issues
               </a>
               <a
                 href="https://github.com/your-org/async-coder"
-                className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200"
+                className="px-6 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200"
               >
-                ⭐ Star on GitHub
+                GitHub
               </a>
             </div>
           </div>
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index bb41d62..dac33cb 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -1,66 +1,72 @@
-import { BentoDemo } from "@/components/ui/bento-demo";
+import { Bug, MessageCircle, FileText, Blocks, GitPullRequest, Rocket } from "lucide-react";
 
-export default function Features() {
+const features = [
+  {
+    icon: Bug,
+    title: "Debug Mode",
+    description: "Automatically detects bugs, generates fixes, and adds intelligent logging for better runtime insights."
+  },
+  {
+    icon: MessageCircle,
+    title: "Ask Mode",
+    description: "Ask anything about your codebase or a specific file. Fetches relevant context and provides real-world examples."
+  },
+  {
+    icon: FileText,
+    title: "Documentation",
+    description: "Generates and updates project documentation, inline code comments, and API references."
+  },
+  {
+    icon: Blocks,
+    title: "Architect Mode",
+    description: "Designs scalable architectures, proposes best practices, and outlines your technical roadmap."
+  },
+  {
+    icon: GitPullRequest,
+    title: "PR Review",
+    description: "Creates new PRs or reviews incoming ones, offering detailed review comments and automated test suggestions."
+  },
+  {
+    icon: Rocket,
+    title: "Async Mode",
+    description: "The most advanced mode. Autonomously chains all other modes to handle your project end-to-end."
+  }
+];
 
+export default function Features() {
   return (
     <section id="features" className="py-20 bg-transparent">
       <div className="max-w-7xl mx-auto px-6">
-        {/* Section Header */}
         <div className="text-center mb-16">
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
-            Multi-Mode AI Assistance
+            Comprehensive AI Modes
           </h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
-            Specialized modes for every stage of your development cycle. From debugging to deployment,
-            Async Coder has the right mode for your needs.
+          <p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Specialized modes for every stage of your development cycle. From debugging to autonomous development,
+            choose the mode that fits your workflow.
           </p>
         </div>
 
-        {/* BentoGrid Features */}
-        <BentoDemo />
-
-        {/* Additional Features */}
-        <div className="mt-20">
-          <h3 className="text-2xl font-bold text-center text-gray-900 dark:text-white mb-12">
-            In-Built Development Tools
-          </h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {[
-              {
-                icon: "🧪",
-                title: "Automated Test Generation",
-                description: "Unit tests, integration tests, and coverage reports"
-              },
-              {
-                icon: "📊",
-                title: "Intelligent Logging", 
-                description: "Inserts optimized logging for easier debugging"
-              },
-              {
-                icon: "🔍",
-                title: "Code Review Assistant",
-                description: "Detects anti-patterns and suggests clean refactors"
-              },
-              {
-                icon: "🧠",
-                title: "Continuous Learning",
-                description: "Stores bug-fix patterns and reusable templates"
-              }
-            ].map((tool, index) => (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+          {features.map((feature, index) => {
+            const Icon = feature.icon;
+            return (
               <div
                 key={index}
-                className="text-center p-6 bg-gray-50 dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700"
+                className="group flex flex-col p-6 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-blue-300 dark:hover:border-blue-700 transition-colors duration-200"
               >
-                <div className="text-3xl mb-3">{tool.icon}</div>
-                <h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
-                  {tool.title}
-                </h4>
-                <p className="text-gray-600 dark:text-gray-300 text-sm">
-                  {tool.description}
+                <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-800 group-hover:bg-blue-50 dark:group-hover:bg-blue-950 transition-colors duration-200 mb-4">
+                  <Icon className="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200" />
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {feature.title}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+                  {feature.description}
                 </p>
               </div>
-            ))}
-          </div>
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 1a0ed18..aa43976 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,147 @@
-import { Component } from "@/components/ui/footer-taped-design";
+import Link from "next/link";
+import { Github, Twitter, Linkedin } from "lucide-react";
 
 export default function Footer() {
-  return <Component />;
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-950">
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+          <div className="col-span-1">
+            <Link
+              href="/"
+              className="flex items-center gap-2 mb-4"
+            >
+              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+                <span className="text-white font-bold text-sm">AC</span>
+              </div>
+              <span className="font-bold text-gray-900 dark:text-white">
+                Async Coder
+              </span>
+            </Link>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              The last AI assistant you&apos;ll ever need for coding.
+            </p>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-gray-900 dark:text-white mb-4 text-sm uppercase tracking-wide">
+              Product
+            </h4>
+            <ul className="space-y-2">
+              <li>
+                <Link href="#features" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  Features
+                </Link>
+              </li>
+              <li>
+                <Link href="#ai-backends" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  AI Backends
+                </Link>
+              </li>
+              <li>
+                <Link href="#quick-start" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  Quick Start
+                </Link>
+              </li>
+              <li>
+                <Link href="#roadmap" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  Roadmap
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-gray-900 dark:text-white mb-4 text-sm uppercase tracking-wide">
+              Community
+            </h4>
+            <ul className="space-y-2">
+              <li>
+                <a href="https://github.com/your-org/async-coder" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  GitHub
+                </a>
+              </li>
+              <li>
+                <a href="https://github.com/your-org/async-coder/discussions" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  Discussions
+                </a>
+              </li>
+              <li>
+                <a href="https://github.com/your-org/async-coder/issues" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  Issues
+                </a>
+              </li>
+              <li>
+                <a href="https://twitter.com/asynccoder" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  Twitter
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-gray-900 dark:text-white mb-4 text-sm uppercase tracking-wide">
+              Legal
+            </h4>
+            <ul className="space-y-2">
+              <li>
+                <a href="https://github.com/your-org/async-coder/blob/main/LICENSE" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  License (Apache 2.0)
+                </a>
+              </li>
+              <li>
+                <Link href="/privacy" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  Privacy Policy
+                </Link>
+              </li>
+              <li>
+                <Link href="/terms" className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
+                  Terms of Service
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="border-t border-gray-200 dark:border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+          <div className="text-sm text-gray-600 dark:text-gray-400">
+            <p>
+              © {currentYear} Async Coder. All rights reserved.
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            <a
+              href="https://github.com/your-org/async-coder"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+              aria-label="GitHub"
+            >
+              <Github className="w-5 h-5" />
+            </a>
+            <a
+              href="https://twitter.com/asynccoder"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+              aria-label="Twitter"
+            >
+              <Twitter className="w-5 h-5" />
+            </a>
+            <a
+              href="https://linkedin.com/company/async-coder"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+              aria-label="LinkedIn"
+            >
+              <Linkedin className="w-5 h-5" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
 }
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
deleted file mode 100644
index 977456d..0000000
--- a/src/components/Hero.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import Link from "next/link";
-
-export default function Hero() {
-  return (
-    <section className="min-h-screen flex items-center justify-center bg-transparent">
-      <div className="max-w-6xl mx-auto px-6 py-20 text-center">
-        <div className="space-y-8">
-          {/* Logo/Brand */}
-          <div className="inline-flex items-center space-x-3 mb-8">
-            <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
-              <span className="text-white font-bold text-xl">AC</span>
-            </div>
-            <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              Async Coder
-            </h1>
-          </div>
-
-          {/* Main Tagline */}
-          <h2 className="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white leading-tight">
-            The last{" "}
-            <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
-              AI assistant
-            </span>
-            <br />
-            you&apos;ll ever need for coding.
-          </h2>
-
-          {/* Description */}
-          <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-4xl mx-auto leading-relaxed">
-            An <strong>open-source, end-to-end AI coding assistant</strong> built to empower developers with full control, 
-            unmatched flexibility, and an <strong>autonomous development pipeline</strong>. Think of it as your{" "}
-            <strong>developer co-pilot on steroids</strong>.
-          </p>
-
-          {/* Key Features Pills */}
-          <div className="flex flex-wrap justify-center gap-4 text-sm">
-            {[
-              "🔍 Debug Mode",
-              "💬 Ask Mode", 
-              "📚 Documentation",
-              "🏗️ Architect Planner",
-              "🔄 PR Review",
-              "🚀 Async Mode"
-            ].map((feature) => (
-              <span
-                key={feature}
-                className="px-4 py-2 bg-white dark:bg-gray-800 rounded-full border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 shadow-sm"
-              >
-                {feature}
-              </span>
-            ))}
-          </div>
-
-          {/* CTA Buttons */}
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-8">
-            <Link
-              href="/sign-up"
-              className="px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-lg"
-            >
-              Get Started Now
-            </Link>
-            <Link
-              href="https://github.com/your-org/async-coder"
-              className="px-8 py-4 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 text-lg"
-            >
-              View on GitHub
-            </Link>
-          </div>
-
-          {/* Stats or Social Proof */}
-          <div className="pt-12 text-gray-500 dark:text-gray-400">
-            <p className="text-sm">
-              Open source • Apache 2.0 License • Built for developers, by developers
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/components/QuickStart.tsx b/src/components/QuickStart.tsx
index 83e3f2a..67c9867 100644
--- a/src/components/QuickStart.tsx
+++ b/src/components/QuickStart.tsx
@@ -1,35 +1,68 @@
-import { FeatureSteps } from "@/components/ui/feature-section";
+import { Download, Settings, Rocket } from "lucide-react";
 
-const features = [
+const steps = [
   {
-    step: "Step 1",
+    number: "01",
+    icon: Download,
     title: "Install Async Coder",
-    content: "Get started by installing Async Coder CLI tool with simple pip command. Works on Windows, macOS, and Linux.",
-    image: "https://images.unsplash.com/photo-1629904853716-f0bc54eea481?q=80&w=2070&auto=format&fit=crop"
+    description: "Get started by installing Async Coder CLI tool with a simple pip command. Works on Windows, macOS, and Linux."
   },
   {
-    step: "Step 2", 
-    title: "Configure API Keys",
-    content: "Set up your AI backend preferences by adding API keys for Claude, Gemini, OpenAI, or other supported models.",
-    image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2070&auto=format&fit=crop"
+    number: "02",
+    icon: Settings,
+    title: "Configure Your Setup",
+    description: "Set up your AI backend preferences by adding API keys for Claude, GPT-4, Gemini, or other supported models."
   },
   {
-    step: "Step 3",
-    title: "Start Coding with AI",
-    content: "Begin using powerful AI modes like Debug, Ask, Documentation, Architect, or let Async Mode handle everything autonomously.",
-    image: "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?q=80&w=2069&auto=format&fit=crop"
+    number: "03",
+    icon: Rocket,
+    title: "Start Developing",
+    description: "Begin using powerful AI modes like Debug, Ask, Documentation, Architect, or let Async Mode handle everything autonomously."
   }
 ];
 
 export default function QuickStart() {
   return (
     <section id="quick-start" className="py-20 bg-transparent">
-      <FeatureSteps 
-        features={features}
-        title="Quick Start Guide"
-        autoPlayInterval={4000}
-        imageHeight="h-[400px]"
-      />
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+            Get Started in 3 Steps
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Set up Async Coder in minutes and start leveraging AI-powered development immediately.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {steps.map((step, index) => {
+            const Icon = step.icon;
+            return (
+              <div key={index} className="relative">
+                <div className="flex flex-col h-full p-8 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+                  <div className="flex items-center gap-4 mb-6">
+                    <div className="text-3xl font-bold text-gray-300 dark:text-gray-700">
+                      {step.number}
+                    </div>
+                    <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-blue-50 dark:bg-blue-950">
+                      <Icon className="w-6 h-6 text-blue-600 dark:text-blue-400" />
+                    </div>
+                  </div>
+                  <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
+                    {step.title}
+                  </h3>
+                  <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+                    {step.description}
+                  </p>
+                </div>
+                {index < steps.length - 1 && (
+                  <div className="hidden md:block absolute top-16 -right-4 w-8 h-0.5 bg-gradient-to-r from-blue-300 to-transparent dark:from-blue-700" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
     </section>
   );
 }
diff --git a/src/components/Roadmap.tsx b/src/components/Roadmap.tsx
deleted file mode 100644
index 6c0f7e1..0000000
--- a/src/components/Roadmap.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-export default function Roadmap() {
-  const roadmapItems = [
-    {
-      title: "Core modes (Debug, Ask, Documentation, Architect)",
-      description: "Foundation modes for debugging, questioning, documentation generation, and architecture planning",
-      status: "in-progress",
-      progress: 25
-    },
-    {
-      title: "Async Mode (autonomous chaining)",
-      description: "Autonomous mode that chains multiple AI modes to handle end-to-end project development",
-      status: "planned",
-      progress: 0
-    },
-    {
-      title: "PR creation and review",
-      description: "Automated pull request creation, review, and intelligent code suggestions",
-      status: "planned", 
-      progress: 0
-    },
-    {
-      title: "CI/CD integrations (GitHub Actions, GitLab)",
-      description: "Seamless integration with popular CI/CD platforms for automated workflows",
-      status: "planned",
-      progress: 0
-    },
-    {
-      title: "Containerized DevOps Mode (Docker + Kubernetes)",
-      description: "Full DevOps automation including containerization and orchestration setup",
-      status: "planned",
-      progress: 0
-    },
-    {
-      title: "GUI Dashboard for Non-CLI Users",
-      description: "Web-based interface for developers who prefer graphical tools over command-line",
-      status: "planned",
-      progress: 0
-    },
-    {
-      title: "AI Model Plugins (easily add new backends)",
-      description: "Plugin system to easily integrate new AI models and backends",
-      status: "research",
-      progress: 0
-    }
-  ];
-
-  const getStatusConfig = (status: string) => {
-    switch (status) {
-      case "completed":
-        return {
-          color: "bg-green-500",
-          text: "text-green-700 dark:text-green-300",
-          bg: "bg-green-50 dark:bg-green-900",
-          label: "Completed"
-        };
-      case "in-progress": 
-        return {
-          color: "bg-blue-500",
-          text: "text-blue-700 dark:text-blue-300",
-          bg: "bg-blue-50 dark:bg-blue-900",
-          label: "In Progress"
-        };
-      case "planned":
-        return {
-          color: "bg-gray-400",
-          text: "text-gray-700 dark:text-gray-300",
-          bg: "bg-gray-50 dark:bg-gray-800",
-          label: "Planned"
-        };
-      case "research":
-        return {
-          color: "bg-purple-500",
-          text: "text-purple-700 dark:text-purple-300",
-          bg: "bg-purple-50 dark:bg-purple-900",
-          label: "Research"
-        };
-      default:
-        return {
-          color: "bg-gray-400",
-          text: "text-gray-700 dark:text-gray-300",
-          bg: "bg-gray-50 dark:bg-gray-800",
-          label: "Planned"
-        };
-    }
-  };
-
-  return (
-    <section id="roadmap" className="py-20 bg-transparent">
-      <div className="max-w-6xl mx-auto px-6">
-        {/* Section Header */}
-        <div className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
-            Development Roadmap
-          </h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-8">
-            Our vision for the future of AI-powered development. Track our progress and see what&apos;s coming next.
-          </p>
-          <div className="inline-flex items-center space-x-2 bg-white dark:bg-gray-800 px-4 py-2 rounded-full border border-gray-200 dark:border-gray-700">
-            <span className="text-gray-600 dark:text-gray-300 text-sm font-medium">
-              🎯 Version 0.1.0 Target
-            </span>
-          </div>
-        </div>
-
-        {/* Roadmap Timeline */}
-        <div className="relative">
-          {/* Vertical Line */}
-          <div className="absolute left-4 md:left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-400 via-purple-400 to-pink-400"></div>
-
-          {/* Roadmap Items */}
-          <div className="space-y-8">
-            {roadmapItems.map((item, index) => {
-              const statusConfig = getStatusConfig(item.status);
-              return (
-                <div key={index} className="relative flex items-start space-x-8">
-                  {/* Timeline Dot */}
-                  <div className="relative z-10 flex-shrink-0">
-                    <div className={`w-8 h-8 ${statusConfig.color} rounded-full flex items-center justify-center shadow-lg`}>
-                      <div className="w-3 h-3 bg-white rounded-full"></div>
-                    </div>
-                  </div>
-
-                  {/* Content */}
-                  <div className="flex-1 pb-8">
-                    <div className={`p-6 ${statusConfig.bg} rounded-2xl border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow duration-200`}>
-                      <div className="flex items-start justify-between mb-3">
-                        <h3 className="text-xl font-bold text-gray-900 dark:text-white pr-4">
-                          {item.title}
-                        </h3>
-                        <span className={`px-3 py-1 text-xs font-medium rounded-full ${statusConfig.text} ${statusConfig.bg}`}>
-                          {statusConfig.label}
-                        </span>
-                      </div>
-                      
-                      <p className="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
-                        {item.description}
-                      </p>
-
-                      {/* Progress Bar */}
-                      {item.progress > 0 && (
-                        <div className="mb-3">
-                          <div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-300 mb-2">
-                            <span>Progress</span>
-                            <span>{item.progress}%</span>
-                          </div>
-                          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-                            <div
-                              className={`h-2 rounded-full ${statusConfig.color} transition-all duration-300`}
-                              style={{ width: `${item.progress}%` }}
-                            ></div>
-                          </div>
-                        </div>
-                      )}
-
-                      {/* Checkboxes for visual representation */}
-                      <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
-                        <input 
-                          type="checkbox" 
-                          checked={item.status === "completed"}
-                          readOnly
-                          className="mr-2 rounded"
-                        />
-                        <span>
-                          {item.status === "completed" ? "Completed" : 
-                           item.status === "in-progress" ? "In Development" :
-                           item.status === "research" ? "Research Phase" : "Planned for v0.1.0"}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* Community Section */}
-        <div className="mt-20 text-center">
-          <div className="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-8 shadow-lg">
-            <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-              Help Shape the Future
-            </h3>
-            <p className="text-gray-600 dark:text-gray-300 mb-6 max-w-2xl mx-auto">
-              Async Coder is built with and for the open-source community. Your feedback, 
-              contributions, and feature requests directly influence our roadmap.
-            </p>
-            <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
-              <a
-                href="https://github.com/your-org/async-coder/discussions"
-                className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:shadow-lg transition-all duration-200"
-              >
-                💬 Join Discussions
-              </a>
-              <a
-                href="https://github.com/your-org/async-coder/issues"
-                className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200"
-              >
-                🐛 Report Issues
-              </a>
-              <a
-                href="https://github.com/your-org/async-coder"
-                className="px-6 py-3 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200"
-              >
-                ⭐ Star on GitHub
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/components/demo-luma.tsx b/src/components/demo-luma.tsx
deleted file mode 100644
index e2c1d8c..0000000
--- a/src/components/demo-luma.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Component } from "@/components/ui/luma-spin";
-
-export default function DemoOne() {
-  return <Component />;
-}
\ No newline at end of file
diff --git a/src/components/demo.tsx b/src/components/demo.tsx
deleted file mode 100644
index 4734466..0000000
--- a/src/components/demo.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Component } from "@/components/ui/raycast-animated-background";
-
-export default function DemoOne() {
-  return <Component />;
-}
\ No newline at end of file
diff --git a/src/components/ui/bento-demo.tsx b/src/components/ui/bento-demo.tsx
deleted file mode 100644
index 870cef4..0000000
--- a/src/components/ui/bento-demo.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import {
-  Bug,
-  MessageCircle,
-  FileText,
-  Blocks,
-  GitPullRequest,
-  Rocket,
-} from "lucide-react";
-
-import { BentoCard, BentoGrid } from "@/components/ui/bento-grid";
-
-const features = [
-  {
-    Icon: Bug,
-    name: "Debug Mode",
-    description: "Automatically detects bugs, generates fixes, and adds intelligent logging for better runtime insights.",
-    href: "#debug",
-    cta: "Start Debugging",
-    background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-red-500/20 to-orange-500/20">
-        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop&auto=format')] bg-cover bg-center opacity-30" />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-      </div>
-    ),
-    className: "lg:row-start-1 lg:row-end-3 lg:col-start-1 lg:col-end-2",
-  },
-  {
-    Icon: MessageCircle,
-    name: "Ask Mode",
-    description: "Ask anything about your codebase or a specific file. Fetches relevant context and provides real-world examples.",
-    href: "#ask",
-    cta: "Ask Questions",
-    background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-cyan-500/20">
-        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1531498860502-7c67cf02f657?w=400&h=300&fit=crop&auto=format')] bg-cover bg-center opacity-30" />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-      </div>
-    ),
-    className: "lg:row-start-1 lg:row-end-4 lg:col-start-2 lg:col-end-3",
-  },
-  {
-    Icon: FileText,
-    name: "Documentation Mode",
-    description: "Generates and updates project documentation, inline code comments, and API references.",
-    href: "#docs",
-    cta: "Generate Docs",
-    background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20">
-        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop&auto=format')] bg-cover bg-center opacity-30" />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-      </div>
-    ),
-    className: "lg:row-start-3 lg:row-end-4 lg:col-start-1 lg:col-end-2",
-  },
-  {
-    Icon: Blocks,
-    name: "Architect Planner Mode",
-    description: "Designs scalable architectures, proposes best practices, and outlines your technical roadmap.",
-    href: "#architect",
-    cta: "Plan Architecture",
-    background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-violet-500/20">
-        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=400&h=300&fit=crop&auto=format')] bg-cover bg-center opacity-30" />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-      </div>
-    ),
-    className: "lg:col-start-3 lg:col-end-4 lg:row-start-1 lg:row-end-2",
-  },
-  {
-    Icon: GitPullRequest,
-    name: "PR Review Mode",
-    description: "Creates new PRs or reviews incoming ones, offering detailed review comments and automated test suggestions.",
-    href: "#pr-review",
-    cta: "Review Code",
-    background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/20 to-blue-600/20">
-        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=300&fit=crop&auto=format')] bg-cover bg-center opacity-30" />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-      </div>
-    ),
-    className: "lg:col-start-3 lg:col-end-4 lg:row-start-2 lg:row-end-3",
-  },
-  {
-    Icon: Rocket,
-    name: "Async Mode (Autonomous)",
-    description: "The most advanced mode. Autonomously chains all other modes to handle your project end-to-end.",
-    href: "#async",
-    cta: "Go Autonomous",
-    background: (
-      <div className="absolute inset-0 bg-gradient-to-br from-pink-500/20 to-rose-500/20">
-        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?w=400&h=300&fit=crop&auto=format')] bg-cover bg-center opacity-30" />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-        <div className="absolute top-4 left-4">
-          <span className="bg-gradient-to-r from-pink-600 to-rose-600 text-white px-2 py-1 rounded-full text-xs font-medium">
-            Most Advanced
-          </span>
-        </div>
-      </div>
-    ),
-    className: "lg:col-start-3 lg:col-end-4 lg:row-start-3 lg:row-end-4",
-  },
-];
-
-function BentoDemo() {
-  return (
-    <BentoGrid className="lg:grid-rows-3">
-      {features.map((feature) => (
-        <BentoCard key={feature.name} {...feature} />
-      ))}
-    </BentoGrid>
-  );
-}
-
-export { BentoDemo };
diff --git a/src/components/ui/bento-grid.tsx b/src/components/ui/bento-grid.tsx
deleted file mode 100644
index f9b9109..0000000
--- a/src/components/ui/bento-grid.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { ReactNode } from "react";
-import { ArrowRightIcon } from "@radix-ui/react-icons";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-const BentoGrid = ({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}) => {
-  return (
-    <div
-      className={cn(
-        "grid w-full auto-rows-[22rem] grid-cols-3 gap-4",
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-const BentoCard = ({
-  name,
-  className,
-  background,
-  Icon,
-  description,
-  href,
-  cta,
-}: {
-  name: string;
-  className: string;
-  background: ReactNode;
-  Icon: React.ComponentType<{className?: string}>;
-  description: string;
-  href: string;
-  cta: string;
-}) => (
-  <div
-    key={name}
-    className={cn(
-      "group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl",
-      // light styles
-      "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
-      // dark styles
-      "transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
-      className,
-    )}
-  >
-    <div>{background}</div>
-    <div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
-      <Icon className="h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75" />
-      <h3 className="text-xl font-semibold text-neutral-700 dark:text-neutral-300">
-        {name}
-      </h3>
-      <p className="max-w-lg text-neutral-400">{description}</p>
-    </div>
-
-    <div
-      className={cn(
-        "pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100",
-      )}
-    >
-      <Button variant="ghost" asChild size="sm" className="pointer-events-auto">
-        <a href={href}>
-          {cta}
-          <ArrowRightIcon className="ml-2 h-4 w-4" />
-        </a>
-      </Button>
-    </div>
-    <div className="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10" />
-  </div>
-);
-
-export { BentoCard, BentoGrid };
diff --git a/src/components/ui/feature-section.tsx b/src/components/ui/feature-section.tsx
deleted file mode 100644
index 81fa22d..0000000
--- a/src/components/ui/feature-section.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client"
-
-import React, { useState, useEffect } from "react"
-import { motion, AnimatePresence } from "framer-motion"
-import Image from "next/image"
-import { cn } from "@/lib/utils"
-
-interface Feature {
-  step: string
-  title?: string
-  content: string
-  image: string
-}
-
-interface FeatureStepsProps {
-  features: Feature[]
-  className?: string
-  title?: string
-  autoPlayInterval?: number
-  imageHeight?: string
-}
-
-export function FeatureSteps({
-  features,
-  className,
-  title = "How to get Started",
-  autoPlayInterval = 3000,
-}: FeatureStepsProps) {
-  const [currentFeature, setCurrentFeature] = useState(0)
-  const [progress, setProgress] = useState(0)
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      if (progress < 100) {
-        setProgress((prev) => prev + 100 / (autoPlayInterval / 100))
-      } else {
-        setCurrentFeature((prev) => (prev + 1) % features.length)
-        setProgress(0)
-      }
-    }, 100)
-
-    return () => clearInterval(timer)
-  }, [progress, features.length, autoPlayInterval])
-
-  return (
-    <div className={cn("p-8 md:p-12", className)}>
-      <div className="max-w-7xl mx-auto w-full">
-        <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-10 text-center text-gray-900 dark:text-white">
-          {title}
-        </h2>
-
-        <div className="flex flex-col md:grid md:grid-cols-2 gap-6 md:gap-10">
-          <div className="order-2 md:order-1 space-y-8">
-            {features.map((feature, index) => (
-              <motion.div
-                key={index}
-                className="flex items-center gap-6 md:gap-8"
-                initial={{ opacity: 0.3 }}
-                animate={{ opacity: index === currentFeature ? 1 : 0.3 }}
-                transition={{ duration: 0.5 }}
-              >
-                <motion.div
-                  className={cn(
-                    "w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center border-2 transition-all duration-300",
-                    index === currentFeature
-                      ? "bg-gradient-to-r from-blue-600 to-purple-600 border-blue-600 text-white scale-110"
-                      : "bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-300",
-                  )}
-                >
-                  {index <= currentFeature ? (
-                    <span className="text-lg font-bold">✓</span>
-                  ) : (
-                    <span className="text-lg font-semibold">{index + 1}</span>
-                  )}
-                </motion.div>
-
-                <div className="flex-1">
-                  <h3 className="text-xl md:text-2xl font-semibold text-gray-900 dark:text-white">
-                    {feature.title || feature.step}
-                  </h3>
-                  <p className="text-sm md:text-lg text-gray-600 dark:text-gray-300">
-                    {feature.content}
-                  </p>
-                </div>
-              </motion.div>
-            ))}
-          </div>
-
-          <div
-            className={cn(
-              "order-1 md:order-2 relative h-[200px] md:h-[300px] lg:h-[400px] overflow-hidden rounded-lg shadow-lg"
-            )}
-          >
-            <AnimatePresence mode="wait">
-              {features.map(
-                (feature, index) =>
-                  index === currentFeature && (
-                    <motion.div
-                      key={index}
-                      className="absolute inset-0 rounded-lg overflow-hidden"
-                      initial={{ y: 100, opacity: 0, rotateX: -20 }}
-                      animate={{ y: 0, opacity: 1, rotateX: 0 }}
-                      exit={{ y: -100, opacity: 0, rotateX: 20 }}
-                      transition={{ duration: 0.5, ease: "easeInOut" }}
-                    >
-                      <Image
-                        src={feature.image}
-                        alt={feature.step}
-                        className="w-full h-full object-cover transition-transform transform"
-                        width={1000}
-                        height={500}
-                      />
-                      <div className="absolute bottom-0 left-0 right-0 h-2/3 bg-gradient-to-t from-white/80 dark:from-gray-900/80 via-white/50 dark:via-gray-900/50 to-transparent" />
-                    </motion.div>
-                  ),
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/src/components/ui/footer-taped-design.tsx b/src/components/ui/footer-taped-design.tsx
deleted file mode 100644
index 4ebbeed..0000000
--- a/src/components/ui/footer-taped-design.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import Link from 'next/link'
-import { Linkedin, Twitter, Github } from 'lucide-react';
-
-const tape = <svg xmlns="http://www.w3.org/2000/svg" width="95" height="80" viewBox="0 0 95 80" fill="none">
-<path d="M1 45L70.282 5L88.282 36.1769L19 76.1769L1 45Z" fill="#222222"/>
-</svg>
-
-export const Component = () => {
-  const currentYear = new Date().getFullYear();
-
-  return (
-   <footer className="my-8 px-4 max-w-5xl text-gray-900 dark:text-white mx-auto">
-      <div className="relative bg-white dark:bg-gray-900 rounded-3xl max-w-5xl mx-auto px-4 py-10 flex flex-col md:flex-row justify-between items-center gap-6 border border-gray-200 dark:border-gray-700">
-        <div className="hidden md:block absolute -top-4 -left-8 w-[80px] h-[36px] scale-75">
-          {tape}
-        </div>
-        <div className="hidden md:block absolute -top-4 -right-8 rotate-90 w-[80px] h-[36px] scale-75">
-          {tape}
-        </div>
-        <div className="flex flex-col md:flex-row items-start justify-between gap-4 md:gap-10 px-2 md:px-8 flex-1">
-          <div className='flex flex-col items-start gap-2'>
-            <Link
-              href="/"
-              className="flex flex-row gap-3 items-center justify-start text-2xl font-bold text-gray-900 dark:text-white"
-            >
-              <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
-                <span className="text-white font-bold text-sm">AC</span>
-              </div>
-              <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-                Async Coder
-              </span>
-            </Link>
-            <p className='text-gray-600 dark:text-gray-300 font-medium text-base w-full md:w-4/5'>
-              The last AI assistant you&apos;ll ever need for coding. Open-source, autonomous development with full control.
-            </p>
-          </div>
-
-          <div className='flex flex-col md:mx-4 md:flex-row gap-2 md:gap-20 items-start md:items-start'>
-            <div className='flex flex-col gap-1 md:gap-4'>
-              <h4 className='uppercase font-bold text-md text-gray-500 dark:text-gray-400 font-semibold'>Product</h4>
-              <div className="flex flex-wrap md:flex-col gap-2 text-sm text-gray-700 dark:text-gray-300 items-start ">
-                <Link className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="#features">Features</Link>
-                <Link className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="#ai-backends">AI Backends</Link>
-                <Link className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="#quick-start">Quick Start</Link>
-                <Link className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="#roadmap">Roadmap</Link>
-                <a className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="https://github.com/your-org/async-coder">Documentation</a>
-              </div>
-            </div>
-
-            <div className='hidden md:flex flex-col gap-1 md:gap-4'>
-              <h4 className='uppercase whitespace-nowrap font-bold text-md text-gray-500 dark:text-gray-400 font-semibold'>Community</h4>
-              <div className="flex gap-2 flex-wrap md:flex-col text-sm text-gray-700 dark:text-gray-300 items-start ">
-                <a className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="https://github.com/your-org/async-coder/discussions">Discussions</a>
-                <a className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="https://github.com/your-org/async-coder/issues">Issues</a>
-                <a className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="https://discord.gg/asynccoder">Discord</a>
-                <a className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="https://twitter.com/asynccoder">Twitter</a>
-              </div>
-            </div>
-            
-            <div className='hidden md:flex flex-col gap-1 md:gap-4'>
-              <h4 className='uppercase whitespace-nowrap font-bold text-md text-gray-500 dark:text-gray-400 font-semibold'>Legal</h4>
-              <div className="flex flex-col gap-2 text-sm text-gray-700 dark:text-gray-300 items-start ">
-                <a className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="https://github.com/your-org/async-coder/blob/main/LICENSE">Apache 2.0</a>
-                <Link className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="/privacy">Privacy Policy</Link>
-                <Link className='text-gray-600 dark:text-gray-300 whitespace-nowrap font-medium hover:text-blue-600 dark:hover:text-blue-400' href="/terms">Terms of Service</Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <div className="my-3 px-4 md:px-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 text-sm text-gray-600 dark:text-gray-300">
-        <div className="flex flex-col sm:flex-row gap-2 sm:gap-8 items-start sm:items-center">
-          <p className="whitespace-nowrap">
-            ©{currentYear} Async Coder. All rights reserved.
-          </p>
-          <div className="flex flex-row gap-4">
-            <span className="flex items-center space-x-2">
-              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
-              <span>Open Source</span>
-            </span>
-            <span className="flex items-center space-x-2">
-              <span>🚀</span>
-              <span>v0.1.0-alpha</span>
-            </span>
-          </div>
-        </div>
-
-        <div className="flex gap-4 items-center">
-          <a
-            href="https://github.com/your-org/async-coder"
-            target="_blank"
-            rel="nofollow noopener"
-            aria-label="GitHub"
-            className="hover:text-blue-600 dark:hover:text-blue-400"
-          >
-            <Github className="w-5 h-5" />
-          </a>
-          <a
-            href="https://www.linkedin.com/company/async-coder"
-            target="_blank"
-            rel="nofollow noopener"
-            aria-label="LinkedIn"
-            className="hover:text-blue-600 dark:hover:text-blue-400"
-          >
-            <Linkedin className="w-5 h-5" />
-          </a>
-          <a
-            href="https://twitter.com/asynccoder"
-            target="_blank"
-            rel="nofollow noopener"
-            aria-label="Twitter"
-            className="hover:text-blue-600 dark:hover:text-blue-400"
-          >
-            <Twitter className="w-5 h-5" />
-          </a>
-        </div>
-      </div>
-    </footer>
-  );
-};
\ No newline at end of file
diff --git a/src/components/ui/glowing-effect-demo.tsx b/src/components/ui/glowing-effect-demo.tsx
deleted file mode 100644
index 0a14535..0000000
--- a/src/components/ui/glowing-effect-demo.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-
-import { Box, Lock, Search, Settings, Sparkles } from "lucide-react";
-import { GlowingEffect } from "@/components/ui/glowing-effect";
-import { cn } from "@/lib/utils";
-
-export function GlowingEffectDemo() {
-  return (
-    <div className="max-w-7xl mx-auto px-6">
-      <div className="text-center mb-16">
-        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
-          Your Choice. Your Rules.
-        </h2>
-        <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
-          Complete freedom to choose your AI backend, customize your workflow, and maintain full control over your development process.
-        </p>
-      </div>
-      
-      <ul className="grid grid-cols-1 grid-rows-none gap-4 md:grid-cols-12 md:grid-rows-3 lg:gap-4 xl:max-h-[34rem] xl:grid-rows-2">
-        <GridItem
-          area="md:[grid-area:1/1/2/7] xl:[grid-area:1/1/2/5]"
-          icon={<Box className="h-4 w-4" />}
-          title="Multiple AI Backends"
-          description="Choose from Claude, GPT-4, Gemini, or any OpenAI-compatible API. Switch between models seamlessly based on your project needs."
-        />
-        <GridItem
-          area="md:[grid-area:1/7/2/13] xl:[grid-area:2/1/3/5]"
-          icon={<Settings className="h-4 w-4" />}
-          title="Fully Customizable Workflow"
-          description="Configure every aspect of your AI assistant. From prompt templates to response formats, make it work exactly how you want."
-        />
-        <GridItem
-          area="md:[grid-area:2/1/3/7] xl:[grid-area:1/5/3/8]"
-          icon={<Lock className="h-4 w-4" />}
-          title="Your Data Stays Private"
-          description="Self-hosted option available. Your code never leaves your environment when using local models or private API endpoints."
-        />
-        <GridItem
-          area="md:[grid-area:2/7/3/13] xl:[grid-area:1/8/2/13]"
-          icon={<Sparkles className="h-4 w-4" />}
-          title="Advanced AI Modes"
-          description="Beyond basic chat - Debug Mode for troubleshooting, Architect Mode for planning, and Async Mode for autonomous development."
-        />
-        <GridItem
-          area="md:[grid-area:3/1/4/13] xl:[grid-area:2/8/3/13]"
-          icon={<Search className="h-4 w-4" />}
-          title="Enterprise-Ready Security"
-          description="Built with security in mind. Audit logs, role-based access, and compliance features for enterprise development teams."
-        />
-      </ul>
-    </div>
-  );
-}
-
-interface GridItemProps {
-  area: string;
-  icon: React.ReactNode;
-  title: string;
-  description: React.ReactNode;
-}
-
-const GridItem = ({ area, icon, title, description }: GridItemProps) => {
-  return (
-    <li className={cn("min-h-[14rem] list-none", area)}>
-      <div className="relative h-full rounded-[1.25rem] border-[0.75px] border-gray-200 dark:border-gray-700 p-2 md:rounded-[1.5rem] md:p-3">
-        <GlowingEffect
-          spread={40}
-          glow={true}
-          disabled={false}
-          proximity={64}
-          inactiveZone={0.01}
-          borderWidth={3}
-        />
-        <div className="relative flex h-full flex-col justify-between gap-6 overflow-hidden rounded-xl border-[0.75px] bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-6 shadow-sm dark:shadow-[0px_0px_27px_0px_rgba(45,45,45,0.3)] md:p-6">
-          <div className="relative flex flex-1 flex-col justify-between gap-3">
-            <div className="w-fit rounded-lg border-[0.75px] border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 p-2">
-              {icon}
-            </div>
-            <div className="space-y-3">
-              <h3 className="pt-0.5 text-xl leading-[1.375rem] font-semibold font-sans tracking-[-0.04em] md:text-2xl md:leading-[1.875rem] text-balance text-gray-900 dark:text-white">
-                {title}
-              </h3>
-              <p className="font-sans text-sm leading-[1.125rem] md:text-base md:leading-[1.375rem] text-gray-600 dark:text-gray-300">
-                {description}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </li>
-  );
-};
\ No newline at end of file
diff --git a/src/components/ui/glowing-effect.tsx b/src/components/ui/glowing-effect.tsx
deleted file mode 100644
index 1644a82..0000000
--- a/src/components/ui/glowing-effect.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-"use client";
-
-import { memo, useCallback, useEffect, useRef } from "react";
-import { cn } from "@/lib/utils";
-import { animate } from "motion/react";
-
-interface GlowingEffectProps {
-  blur?: number;
-  inactiveZone?: number;
-  proximity?: number;
-  spread?: number;
-  variant?: "default" | "white";
-  glow?: boolean;
-  className?: string;
-  disabled?: boolean;
-  movementDuration?: number;
-  borderWidth?: number;
-}
-const GlowingEffect = memo(
-  ({
-    blur = 0,
-    inactiveZone = 0.7,
-    proximity = 0,
-    spread = 20,
-    variant = "default",
-    glow = false,
-    className,
-    movementDuration = 2,
-    borderWidth = 1,
-    disabled = true,
-  }: GlowingEffectProps) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const lastPosition = useRef({ x: 0, y: 0 });
-    const animationFrameRef = useRef<number>(0);
-
-    const handleMove = useCallback(
-      (e?: MouseEvent | { x: number; y: number }) => {
-        if (!containerRef.current) return;
-
-        if (animationFrameRef.current) {
-          cancelAnimationFrame(animationFrameRef.current);
-        }
-
-        animationFrameRef.current = requestAnimationFrame(() => {
-          const element = containerRef.current;
-          if (!element) return;
-
-          const { left, top, width, height } = element.getBoundingClientRect();
-          const mouseX = e?.x ?? lastPosition.current.x;
-          const mouseY = e?.y ?? lastPosition.current.y;
-
-          if (e) {
-            lastPosition.current = { x: mouseX, y: mouseY };
-          }
-
-          const center = [left + width * 0.5, top + height * 0.5];
-          const distanceFromCenter = Math.hypot(
-            mouseX - center[0],
-            mouseY - center[1]
-          );
-          const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone;
-
-          if (distanceFromCenter < inactiveRadius) {
-            element.style.setProperty("--active", "0");
-            return;
-          }
-
-          const isActive =
-            mouseX > left - proximity &&
-            mouseX < left + width + proximity &&
-            mouseY > top - proximity &&
-            mouseY < top + height + proximity;
-
-          element.style.setProperty("--active", isActive ? "1" : "0");
-
-          if (!isActive) return;
-
-          const currentAngle =
-            parseFloat(element.style.getPropertyValue("--start")) || 0;
-          const targetAngle =
-            (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) /
-              Math.PI +
-            90;
-
-          const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180;
-          const newAngle = currentAngle + angleDiff;
-
-          animate(currentAngle, newAngle, {
-            duration: movementDuration,
-            ease: [0.16, 1, 0.3, 1],
-            onUpdate: (value) => {
-              element.style.setProperty("--start", String(value));
-            },
-          });
-        });
-      },
-      [inactiveZone, proximity, movementDuration]
-    );
-
-    useEffect(() => {
-      if (disabled) return;
-
-      const handleScroll = () => handleMove();
-      const handlePointerMove = (e: PointerEvent) => handleMove(e);
-
-      window.addEventListener("scroll", handleScroll, { passive: true });
-      document.body.addEventListener("pointermove", handlePointerMove, {
-        passive: true,
-      });
-
-      return () => {
-        if (animationFrameRef.current) {
-          cancelAnimationFrame(animationFrameRef.current);
-        }
-        window.removeEventListener("scroll", handleScroll);
-        document.body.removeEventListener("pointermove", handlePointerMove);
-      };
-    }, [handleMove, disabled]);
-
-    return (
-      <>
-        <div
-          className={cn(
-            "pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity",
-            glow && "opacity-100",
-            variant === "white" && "border-white",
-            disabled && "!block"
-          )}
-        />
-        <div
-          ref={containerRef}
-          style={
-            {
-              "--blur": `${blur}px`,
-              "--spread": spread,
-              "--start": "0",
-              "--active": "0",
-              "--glowingeffect-border-width": `${borderWidth}px`,
-              "--repeating-conic-gradient-times": "5",
-              "--gradient":
-                variant === "white"
-                  ? `repeating-conic-gradient(
-                  from 236.84deg at 50% 50%,
-                  var(--black),
-                  var(--black) calc(25% / var(--repeating-conic-gradient-times))
-                )`
-                  : `radial-gradient(circle, #dd7bbb 10%, #dd7bbb00 20%),
-                radial-gradient(circle at 40% 40%, #d79f1e 5%, #d79f1e00 15%),
-                radial-gradient(circle at 60% 60%, #5a922c 10%, #5a922c00 20%), 
-                radial-gradient(circle at 40% 60%, #4c7894 10%, #4c789400 20%),
-                repeating-conic-gradient(
-                  from 236.84deg at 50% 50%,
-                  #dd7bbb 0%,
-                  #d79f1e calc(25% / var(--repeating-conic-gradient-times)),
-                  #5a922c calc(50% / var(--repeating-conic-gradient-times)), 
-                  #4c7894 calc(75% / var(--repeating-conic-gradient-times)),
-                  #dd7bbb calc(100% / var(--repeating-conic-gradient-times))
-                )`,
-            } as React.CSSProperties
-          }
-          className={cn(
-            "pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity",
-            glow && "opacity-100",
-            blur > 0 && "blur-[var(--blur)] ",
-            className,
-            disabled && "!hidden"
-          )}
-        >
-          <div
-            className={cn(
-              "glow",
-              "rounded-[inherit]",
-              'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]',
-              "after:[border:var(--glowingeffect-border-width)_solid_transparent]",
-              "after:[background:var(--gradient)] after:[background-attachment:fixed]",
-              "after:opacity-[var(--active)] after:transition-opacity after:duration-300",
-              "after:[mask-clip:padding-box,border-box]",
-              "after:[mask-composite:intersect]",
-              "after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]"
-            )}
-          />
-        </div>
-      </>
-    );
-  }
-);
-
-GlowingEffect.displayName = "GlowingEffect";
-
-export { GlowingEffect };
\ No newline at end of file
diff --git a/src/components/ui/roadmap-timeline.tsx b/src/components/ui/roadmap-timeline.tsx
deleted file mode 100644
index 5e79d47..0000000
--- a/src/components/ui/roadmap-timeline.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-"use client";
-import React from "react";
-import Image from "next/image";
-import { Timeline } from "@/components/ui/timeline";
-import { CheckCircle, Clock, Search, Wrench } from "lucide-react";
-
-export function RoadmapTimeline() {
-  // Define roadmap data with proper status indicators and content
-  const roadmapData = [
-    {
-      title: "Phase 1 - Foundation",
-      content: (
-        <div>
-          <p className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8">
-            Core modes foundation including Debug, Ask, Documentation, and Architecture planning capabilities
-          </p>
-          
-          <div className="mb-8 space-y-3">
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <CheckCircle className="w-4 h-4 text-green-500" />
-              <span>Debug Mode - Interactive debugging assistance</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Clock className="w-4 h-4 text-orange-500" />
-              <span>Ask Mode - Natural language code queries (25% complete)</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Wrench className="w-4 h-4 text-blue-500" />
-              <span>Documentation Mode - Auto-generate docs</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Search className="w-4 h-4 text-purple-500" />
-              <span>Architect Mode - System design planning</span>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Image
-              src="https://images.unsplash.com/photo-1555949963-aa79dcee981c"
-              alt="Code debugging interface"
-              width={500}
-              height={300}
-              className="rounded-lg object-cover h-32 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
-            />
-            <Image
-              src="https://images.unsplash.com/photo-1517180102446-f3ece451e9d8"
-              alt="Architecture planning"
-              width={500}
-              height={300}
-              className="rounded-lg object-cover h-32 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
-            />
-          </div>
-        </div>
-      ),
-    },
-    {
-      title: "Phase 2 - Automation",
-      content: (
-        <div>
-          <p className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8">
-            Autonomous chaining capabilities and intelligent PR management for seamless development workflows
-          </p>
-          
-          <div className="mb-8 space-y-3">
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Clock className="w-4 h-4 text-blue-500" />
-              <span>Async Mode - Autonomous task chaining</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Clock className="w-4 h-4 text-blue-500" />
-              <span>PR Creation & Review - Automated pull requests</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Clock className="w-4 h-4 text-blue-500" />
-              <span>Intelligent Code Suggestions</span>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Image
-              src="https://images.unsplash.com/photo-1618477388954-7852f32655ec"
-              alt="Automated workflows"
-              width={500}
-              height={300}
-              className="rounded-lg object-cover h-32 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
-            />
-            <Image
-              src="https://images.unsplash.com/photo-1556075798-4825dfaaf498"
-              alt="Pull request automation"
-              width={500}
-              height={300}
-              className="rounded-lg object-cover h-32 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
-            />
-          </div>
-        </div>
-      ),
-    },
-    {
-      title: "Phase 3 - DevOps",
-      content: (
-        <div>
-          <p className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8">
-            Full DevOps integration with CI/CD pipelines, containerization, and Kubernetes orchestration
-          </p>
-          
-          <div className="mb-8 space-y-3">
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Clock className="w-4 h-4 text-purple-500" />
-              <span>CI/CD Integration - GitHub Actions & GitLab</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Clock className="w-4 h-4 text-purple-500" />
-              <span>Docker Containerization</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Clock className="w-4 h-4 text-purple-500" />
-              <span>Kubernetes Orchestration</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Clock className="w-4 h-4 text-purple-500" />
-              <span>Automated Deployment Pipelines</span>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Image
-              src="https://images.unsplash.com/photo-1667372393119-3d4c48d07fc9"
-              alt="DevOps automation"
-              width={500}
-              height={300}
-              className="rounded-lg object-cover h-32 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
-            />
-            <Image
-              src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31"
-              alt="Container orchestration"
-              width={500}
-              height={300}
-              className="rounded-lg object-cover h-32 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
-            />
-          </div>
-        </div>
-      ),
-    },
-    {
-      title: "Phase 4 - Platform",
-      content: (
-        <div>
-          <p className="text-neutral-800 dark:text-neutral-200 text-xs md:text-sm font-normal mb-8">
-            User-friendly interfaces and extensible plugin architecture for broad accessibility and customization
-          </p>
-          
-          <div className="mb-8 space-y-3">
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Search className="w-4 h-4 text-indigo-500" />
-              <span>GUI Dashboard - Web-based interface</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Search className="w-4 h-4 text-indigo-500" />
-              <span>AI Model Plugin System</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Search className="w-4 h-4 text-indigo-500" />
-              <span>Custom Backend Integration</span>
-            </div>
-            <div className="flex gap-3 items-center text-neutral-700 dark:text-neutral-300 text-xs md:text-sm">
-              <Search className="w-4 h-4 text-indigo-500" />
-              <span>Community Extensions Marketplace</span>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <Image
-              src="https://images.unsplash.com/photo-1551288049-bebda4e38f71"
-              alt="Dashboard interface"
-              width={500}
-              height={300}
-              className="rounded-lg object-cover h-32 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
-            />
-            <Image
-              src="https://images.unsplash.com/photo-1518364538800-6bae3c2ea0f2"
-              alt="Plugin architecture"
-              width={500}
-              height={300}
-              className="rounded-lg object-cover h-32 md:h-44 lg:h-60 w-full shadow-[0_0_24px_rgba(34,_42,_53,_0.06),_0_1px_1px_rgba(0,_0,_0,_0.05),_0_0_0_1px_rgba(34,_42,_53,_0.04),_0_0_4px_rgba(34,_42,_53,_0.08),_0_16px_68px_rgba(47,_48,_55,_0.05),_0_1px_0_rgba(255,_255,_255,_0.1)_inset]"
-            />
-          </div>
-        </div>
-      ),
-    },
-  ];
-
-  return (
-    <div className="w-full bg-transparent">
-      <div className="w-full">
-        <Timeline data={roadmapData} />
-      </div>
-    </div>
-  );
-}
\ No newline at end of file