Spaces:

bahgatbigo
/

vibes

Running

App Files Files Community

bahgatbigo commited on Jul 19, 2025

Commit

372ea35

verified ·

1 Parent(s): f20d674

404 This page could not be found. - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +336 -595

index.html CHANGED Viewed

@@ -1,696 +1,437 @@
 <!DOCTYPE html>
-<html lang="en" class="scroll-smooth">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vibe Studio - Building the next generation of intuitive technology</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --primary-600: #7c3aed;
-            --primary-700: #6d28d9;
-            --accent-400: #f59e0b;
-            --accent-500: #d97706;
-            --neutral-800: #1f2937;
-            --neutral-900: #111827;
         }
-        body {
-            font-family: 'Inter', sans-serif;
-            background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
-        }
-        .font-mono {
-            font-family: 'JetBrains Mono', monospace;
-        }
-        .hero-headline {
-            opacity: 0;
-            transform: translateY(30px);
-        }
-        .hero-subtext {
-            opacity: 0;
-            transform: translateY(30px);
-        }
-        .hero-cta {
-            opacity: 0;
-            transform: translateY(30px);
-        }
-        .fade-in {
-            opacity: 0;
-            transform: translateY(30px);
-        }
-        .slide-in {
-            opacity: 0;
-            transform: translateX(-30px);
-        }
-        .vibe-card {
-            background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
-            border: 1px solid rgba(124, 58, 237, 0.2);
-            backdrop-filter: blur(10px);
-            transition: all 0.3s ease;
-        }
-        .vibe-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(124, 58, 237, 0.3);
         }
-        .portfolio-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 1.5rem;
-        }
-        .portfolio-item {
-            background: rgba(17, 24, 39, 0.8);
-            border: 1px solid rgba(124, 58, 237, 0.3);
-            border-radius: 12px;
-            overflow: hidden;
-            transition: all 0.3s ease;
-        }
-        .portfolio-item:hover {
-            transform: scale(1.02);
-            box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
-        }
-        .gradient-text {
-            background: linear-gradient(135deg, #7c3aed, #f59e0b);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .btn-primary {
-            background: linear-gradient(135deg, #7c3aed, #6d28d9);
-            transition: all 0.3s ease;
-        }
-        .btn-primary:hover {
-            background: linear-gradient(135deg, #6d28d9, #5b21b6);
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
-        }
-        .nav-link {
             position: relative;
-            transition: color 0.3s ease;
         }
-        .nav-link::after {
             content: '';
             position: absolute;
-            bottom: -4px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: linear-gradient(90deg, #7c3aed, #f59e0b);
-            transition: width 0.3s ease;
-        }
-        .nav-link:hover::after {
             width: 100%;
         }
-        .mobile-menu {
-            transform: translateX(-100%);
-            transition: transform 0.3s ease;
-        }
-        .mobile-menu.active {
-            transform: translateX(0);
-        }
-        .typing-effect {
-            border-right: 2px solid #7c3aed;
-            animation: blink 1s infinite;
-        }
-        @keyframes blink {
-            0%, 50% { border-color: #7c3aed; }
-            51%, 100% { border-color: transparent; }
-        }
-        .process-step {
-            position: relative;
-            padding: 2rem;
-            border-radius: 12px;
-            background: rgba(17, 24, 39, 0.6);
-            border: 1px solid rgba(124, 58, 237, 0.2);
-            transition: all 0.3s ease;
         }
-        .process-step:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 15px 35px rgba(124, 58, 237, 0.3);
         }
-        .process-step::before {
-            content: attr(data-step);
-            position: absolute;
-            top: -10px;
-            left: 20px;
-            background: linear-gradient(135deg, #7c3aed, #f59e0b);
-            color: white;
-            padding: 0.5rem 1rem;
-            border-radius: 20px;
-            font-size: 0.875rem;
-            font-weight: 600;
         }
     </style>
 </head>
-<body class="text-white">
     <!-- Navigation -->
-    <nav class="fixed top-0 w-full z-50 bg-black/20 backdrop-blur-md border-b border-white/10">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
                 <div class="flex items-center">
-                    <span class="text-2xl font-bold gradient-text">Vibe Studio</span>
                 </div>
-                <!-- Desktop Navigation -->
-                <div class="hidden md:flex space-x-8">
-                    <a href="#home" class="nav-link text-gray-300 hover:text-white">Home</a>
-                    <a href="#thesis" class="nav-link text-gray-300 hover:text-white">Our Vibe</a>
-                    <a href="#portfolio" class="nav-link text-gray-300 hover:text-white">Portfolio</a>
-                    <a href="#careers" class="nav-link text-gray-300 hover:text-white">Join Us</a>
-                    <a href="#insights" class="nav-link text-gray-300 hover:text-white">Insights</a>
                 </div>
-                <!-- Mobile Menu Button -->
-                <button id="mobile-menu-btn" class="md:hidden">
-                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-                    </svg>
-                </button>
-            </div>
-        </div>
-        <!-- Mobile Menu -->
-        <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-black/95 z-40 md:hidden">
-            <div class="flex flex-col items-center justify-center h-full space-y-8">
-                <a href="#home" class="text-2xl text-gray-300 hover:text-white">Home</a>
-                <a href="#thesis" class="text-2xl text-gray-300 hover:text-white">Our Vibe</a>
-                <a href="#portfolio" class="text-2xl text-gray-300 hover:text-white">Portfolio</a>
-                <a href="#careers" class="text-2xl text-gray-300 hover:text-white">Join Us</a>
-                <a href="#insights" class="text-2xl text-gray-300 hover:text-white">Insights</a>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
-    <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden">
-        <!-- Background Elements -->
-        <div class="absolute inset-0">
-            <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl animate-pulse"></div>
-            <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-amber-500/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
-        </div>
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
-            <h1 class="hero-headline text-5xl md:text-7xl font-bold mb-6">
-                <span class="block">We don't just build startups,</span>
-                <span class="gradient-text">we build vibes</span>
-            </h1>
-            <p class="hero-subtext text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
-                Vibe Startup Studio: Where ideas meet execution with the right energy
-            </p>
-            <div class="hero-cta flex flex-col sm:flex-row gap-4 justify-center">
-                <button class="btn-primary px-8 py-4 rounded-lg font-semibold text-white">
-                    Explore Our Vibe
-                </button>
-                <button class="border border-purple-600 text-purple-400 px-8 py-4 rounded-lg font-semibold hover:bg-purple-600/20 transition-all">
-                    View Portfolio
-                </button>
-            </div>
-            <!-- Process Steps -->
-            <div class="mt-20 grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
-                <div class="process-step fade-in" data-step="01">
-                    <h3 class="text-xl font-bold mb-2">Ideate</h3>
-                    <p class="text-gray-400">Transform ideas into viable products with AI-powered validation</p>
-                </div>
-                <div class="process-step fade-in" data-step="02">
-                    <h3 class="text-xl font-bold mb-2">Build</h3>
-                    <p class="text-gray-400">Rapid development with cutting-edge AI tools and frameworks</p>
-                </div>
-                <div class="process-step fade-in" data-step="03">
-                    <h3 class="text-xl font-bold mb-2">Launch</h3>
-                    <p class="text-gray-400">Deploy, scale, and optimize for maximum impact</p>
                 </div>
             </div>
         </div>
-    </section>
-    <!-- Our Vibe Section -->
-    <section id="thesis" class="py-20 md:py-32">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">Our Vibe: The Philosophy</h2>
-                <p class="text-xl text-gray-300 max-w-3xl mx-auto fade-in">
-                    We believe technology should be intuitive, human, and positively impactful
-                </p>
-            </div>
-            <div class="grid md:grid-cols-2 gap-12 items-center">
-                <div class="fade-in">
-                    <h3 class="text-3xl font-bold mb-6">The Future We're Building</h3>
-                    <p class="text-gray-300 mb-6 text-lg">
-                        At Vibe Studio, we're not just creating companies—we're crafting experiences that redefine how humans interact with technology. Our focus spans three revolutionary domains:
-                    </p>
-                    <div class="space-y-4">
-                        <div class="vibe-card p-6 rounded-lg">
-                            <h4 class="text-xl font-bold text-purple-400 mb-2">Future of Work</h4>
-                            <p class="text-gray-300">AI-powered tools that augment human creativity and productivity</p>
-                        </div>
-                        <div class="vibe-card p-6 rounded-lg">
-                            <h4 class="text-xl font-bold text-amber-400 mb-2">Digital Wellness</h4>
-                            <p class="text-gray-300">Mental health solutions powered by empathetic AI</p>
-                        </div>
-                        <div class="vibe-card p-6 rounded-lg">
-                            <h4 class="text-xl font-bold text-purple-400 mb-2">Creative AI</h4>
-                            <p class="text-gray-300">Tools that empower creators to push boundaries</p>
-                        </div>
-                    </div>
                 </div>
-                <div class="fade-in">
-                    <div class="relative">
-                        <div class="bg-gradient-to-br from-purple-600/20 to-amber-500/20 rounded-2xl p-8">
-                            <h4 class="text-2xl font-bold mb-4">Our Core Beliefs</h4>
-                            <ul class="space-y-4 text-gray-300">
-                                <li class="flex items-start">
-                                    <span class="text-purple-400 mr-3">→</span>
-                                    Technology should amplify human potential, not replace it
-                                </li>
-                                <li class="flex items-start">
-                                    <span class="text-amber-400 mr-3">→</span>
-                                    Every product must have a soul and purpose
-                                </li>
-                                <li class="flex items-start">
-                                    <span class="text-purple-400 mr-3">→</span>
-                                    AI should be a creative partner, not just a tool
-                                </li>
-                                <li class="flex items-start">
-                                    <span class="text-amber-400 mr-3">→</span>
-                                    Build for the future, but stay grounded in human needs
-                                </li>
-                            </ul>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-    <!-- Portfolio Section -->
-    <section id="portfolio" class="py-20 md:py-32 bg-gray-900/50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">Our Portfolio</h2>
-                <p class="text-xl text-gray-300 max-w-3xl mx-auto fade-in">
-                    From concept to launch, these are the startups we've built with the right vibe
-                </p>
-            </div>
-            <div class="portfolio-grid">
-                <!-- Featured Projects -->
-                <div class="portfolio-item fade-in">
-                    <div class="p-6">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-xl font-bold">3aqlmasr.com</h3>
-                            <span class="text-purple-400 text-sm">AI Platform</span>
-                        </div>
-                        <p class="text-gray-400 mb-4">AI-powered platform for Egyptian public figures and insights</p>
-                        <a href="https://3aqlmasr.com" class="text-purple-400 hover:text-purple-300">Explore →</a>
-                    </div>
                 </div>
-                <div class="portfolio-item fade-in">
-                    <div class="p-6">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-xl font-bold">7al.app</h3>
-                            <span class="text-amber-400 text-sm">Healthcare AI</span>
-                        </div>
-                        <p class="text-gray-400 mb-4">AI-driven medical diagnosis and health companion</p>
-                        <a href="https://7al.app" class="text-purple-400 hover:text-purple-300">Explore →</a>
                     </div>
-                </div>
-                <div class="portfolio-item fade-in">
-                    <div class="p-6">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-xl font-bold">aigame.diy</h3>
-                            <span class="text-purple-400 text-sm">Game Dev</span>
                         </div>
-                        <p class="text-gray-400 mb-4">AI tool to create personalized video games instantly</p>
-                        <a href="https://aigame.diy" class="text-purple-400 hover:text-purple-300">Explore →</a>
                     </div>
                 </div>
-                <div class="portfolio-item fade-in">
-                    <div class="p-6">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-xl font-bold">bahgat.ai</h3>
-                            <span class="text-amber-400 text-sm">Personal AI</span>
-                        </div>
-                        <p class="text-gray-400 mb-4">Your personalized AI assistant by Bahgat</p>
-                        <a href="https://bahgat.ai" class="text-purple-400 hover:text-purple-300">Explore →</a>
-                    </div>
                 </div>
-                <div class="portfolio-item fade-in">
-                    <div class="p-6">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-xl font-bold">mo7amy.live</h3>
-                            <span class="text-purple-400 text-sm">Legal AI</span>
-                        </div>
-                        <p class="text-gray-400 mb-4">Live AI legal assistance in Arabic</p>
-                        <a href="https://mo7amy.live" class="text-purple-400 hover:text-purple-300">Explore →</a>
                     </div>
-                </div>
-                <div class="portfolio-item fade-in">
-                    <div class="p-6">
-                        <div class="flex items-center justify-between mb-4">
-                            <h3 class="text-xl font-bold">bebsata.live</h3>
-                            <span class="text-amber-400 text-sm">Streaming</span>
                         </div>
-                        <p class="text-gray-400 mb-4">AI-powered live streaming platform for simple content</p>
-                        <a href="https://bebsata.live" class="text-purple-400 hover:text-purple-300">Explore →</a>
                     </div>
                 </div>
             </div>
-            <div class="text-center mt-12">
-                <button class="btn-primary px-8 py-3 rounded-lg font-semibold">
-                    View All 50+ Projects
-                </button>
-            </div>
         </div>
-    </section>
-    <!-- Careers Section -->
-    <section id="careers" class="py-20 md:py-32">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">Join Our Vibe</h2>
-                <p class="text-xl text-gray-300 max-w-3xl mx-auto fade-in">
-                    We're not hiring employees—we're seeking co-creators of the future
                 </p>
             </div>
-            <div class="grid md:grid-cols-2 gap-12">
-                <div class="fade-in">
-                    <h3 class="text-3xl font-bold mb-6">Founders in Residence Program</h3>
-                    <p class="text-gray-300 mb-6 text-lg">
-                        Join our 12-month program to build your startup with full support:
                     </p>
-                    <ul class="space-y-3 text-gray-300">
-                        <li class="flex items-start">
-                            <span class="text-purple-400 mr-3">✓</span>
-                            Full funding and resources
-                        </li>
-                        <li class="flex items-start">
-                            <span class="text-purple-400 mr-3">✓</span>
-                            AI-powered development tools
-                        </li>
-                        <li class="flex items-start">
-                            <span class="text-purple-400 mr-3">✓</span>
-                            Access to our network of experts
-                        </li>
-                        <li class="flex items-start">
-                            <span class="text-purple-400 mr-3">✓</span>
-                            Equity partnership model
-                        </li>
-                    </ul>
-                    <button class="btn-primary px-6 py-3 rounded-lg font-semibold mt-6">
-                        Apply as Founder
-                    </button>
                 </div>
-                <div class="fade-in">
-                    <h3 class="text-3xl font-bold mb-6">Engineers & Designers</h3>
-                    <p class="text-gray-300 mb-6 text-lg">
-                        Shape the future with cutting-edge AI technology. We're looking for:
                     </p>
-                    <div class="grid grid-cols-2 gap-4">
-                        <div class="vibe-card p-4 rounded-lg text-center">
-                            <h4 class="font-bold">AI Engineers</h4>
-                            <p class="text-sm text-gray-400">ML/LLM specialists</p>
                         </div>
-                        <div class="vibe-card p-4 rounded-lg text-center">
-                            <h4 class="font-bold">Product Designers</h4>
-                            <p class="text-sm text-gray-400">AI-native experiences</p>
                         </div>
-                        <div class="vibe-card p-4 rounded-lg text-center">
-                            <h4 class="font-bold">Full-stack Devs</h4>
-                            <p class="text-sm text-gray-400">Next.js & Python</p>
                         </div>
-                        <div class="vibe-card p-4 rounded-lg text-center">
-                            <h4 class="font-bold">Growth Hackers</h4>
-                            <p class="text-sm text-gray-400">AI-first growth</p>
                         </div>
                     </div>
-                    <button class="border border-purple-600 text-purple-400 px-6 py-3 rounded-lg font-semibold hover:bg-purple-600/20 transition-all mt-6">
-                        View Open Positions
-                    </button>
                 </div>
             </div>
         </div>
-    </section>
-    <!-- Insights Section -->
-    <section id="insights" class="py-20 md:py-32 bg-gray-900/50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-5xl font-bold mb-6 fade-in">The Vibe Magazine</h2>
-                <p class="text-xl text-gray-300 max-w-3xl mx-auto fade-in">
-                    Our digital publication exploring startup culture, tech trends, and founder stories
                 </p>
             </div>
-            <div class="grid md:grid-cols-3 gap-8">
-                <article class="vibe-card p-6 rounded-lg fade-in">
-                    <img src="https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=200&fit=crop" alt="AI Future" class="w-full h-48 object-cover rounded-lg mb-4">
-                    <h3 class="text-xl font-bold mb-2">The Future of AI-First Startups</h3>
-                    <p class="text-gray-400 mb-4">How AI is reshaping the startup landscape and what it means for founders.</p>
-                    <a href="#" class="text-purple-400 hover:text-purple-300">Read More →</a>
-                </article>
-                <article class="vibe-card p-6 rounded-lg fade-in">
-                    <img src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=400&h=200&fit=crop" alt="Digital Wellness" class="w-full h-48 object-cover rounded-lg mb-4">
-                    <h3 class="text-xl font-bold mb-2">Digital Wellness in the AI Age</h3>
-                    <p class="text-gray-400 mb-4">Exploring how AI can enhance rather than harm our mental wellbeing.</p>
-                    <a href="#" class="text-purple-400 hover:text-purple-300">Read More →</a>
-                </article>
-                <article class="vibe-card p-6 rounded-lg fade-in">
-                    <img src="https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?w=400&h=200&fit=crop" alt="Creative AI" class="w-full h-48 object-cover rounded-lg mb-4">
-                    <h3 class="text-xl font-bold mb-2">Creative AI: Beyond Automation</h3>
-                    <p class="text-gray-400 mb-4">How AI is becoming a creative partner rather than just a tool.</p>
-                    <a href="#" class="text-purple-400 hover:text-purple-300">Read More →</a>
-                </article>
-            </div>
-            <div class="text-center mt-12">
-                <button class="btn-primary px-8 py-3 rounded-lg font-semibold">
-                    Subscribe to Vibe Report
-                </button>
             </div>
         </div>
-    </section>
     <!-- Footer -->
-    <footer class="py-16 bg-black/50 border-t border-white/10">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid md:grid-cols-4 gap-8">
                 <div>
-                    <h3 class="text-2xl font-bold gradient-text mb-4">Vibe Studio</h3>
-                    <p class="text-gray-400">Building the next generation of intuitive technology.</p>
                 </div>
                 <div>
-                    <h4 class="font-bold mb-4">Ventures</h4>
-                    <ul class="space-y-2 text-gray-400">
-                        <li><a href="#" class="hover:text-white">AI Platforms</a></li>
-                        <li><a href="#" class="hover:text-white">Healthcare AI</a></li>
-                        <li><a href="#" class="hover:text-white">Creative Tools</a></li>
-                        <li><a href="#" class="hover:text-white">E-commerce AI</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="font-bold mb-4">Company</h4>
-                    <ul class="space-y-2 text-gray-400">
-                        <li><a href="#" class="hover:text-white">Our Vibe</a></li>
-                        <li><a href="#" class="hover:text-white">Careers</a></li>
-                        <li><a href="#" class="hover:text-white">Blog</a></li>
-                        <li><a href="#" class="hover:text-white">Contact</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="font-bold mb-4">Connect</h4>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white">Twitter</a>
-                        <a href="#" class="text-gray-400 hover:text-white">LinkedIn</a>
-                        <a href="#" class="text-gray-400 hover:text-white">GitHub</a>
                     </div>
-                    <div class="mt-4">
-                        <h5 class="font-semibold text-sm mb-2">Domain Setup</h5>
-                        <p class="text-xs text-gray-500">For Namecheap domains:</p>
-                        <ol class="text-xs text-gray-400 space-y-1 mt-1">
-                            <li>1. Log in to Namecheap account</li>
-                            <li>2. Go to Domain List → Manage</li>
-                            <li>3. Under Nameservers select "Custom DNS"</li>
-                            <li>4. Enter your hosting provider's nameservers</li>
-                        </ol>
                     </div>
                 </div>
             </div>
-            <div class="mt-12 pt-8 border-t border-white/10 text-center text-gray-400">
-                <p>&copy; 2024 Vibe Studio. Building the future, one vibe at a time.</p>
             </div>
         </div>
     </footer>
     <script>
-        // Mobile Menu Toggle
-        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
-        const mobileMenu = document.getElementById('mobile-menu');
-        mobileMenuBtn.addEventListener('click', () => {
-            mobileMenu.classList.toggle('active');
-        });
-        // Close mobile menu when clicking a link
-        mobileMenu.querySelectorAll('a').forEach(link => {
-            link.addEventListener('click', () => {
-                mobileMenu.classList.remove('active');
-            });
-        });
-        // Smooth scrolling for navigation links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    target.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
-                    });
-                }
-            });
-        });
-        // GSAP Animations
-        if (typeof gsap !== 'undefined') {
-            gsap.registerPlugin(ScrollTrigger);
-            // Hero animations
-            gsap.timeline()
-                .to('.hero-headline', { opacity: 1, y: 0, duration: 1, ease: "power2.out" })
-                .to('.hero-subtext', { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, "-=0.5")
-                .to('.hero-cta', { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, "-=0.5");
-            // Scroll-triggered animations
-            gsap.utils.toArray('.fade-in').forEach(element => {
-                gsap.fromTo(element, {
-                    opacity: 0,
-                    y: 30
-                }, {
-                    opacity: 1,
-                    y: 0,
-                    duration: 1,
-                    ease: "power2.out",
-                    scrollTrigger: {
-                        trigger: element,
-                        start: "top 95%",
-                        toggleActions: "play none none reverse"
                     }
                 });
-            });
-            gsap.utils.toArray('.slide-in').forEach(element => {
-                gsap.fromTo(element, {
-                    opacity: 0,
-                    x: -30
-                }, {
-                    opacity: 1,
-                    x: 0,
-                    duration: 1,
-                    ease: "power2.out",
-                    scrollTrigger: {
-                        trigger: element,
-                        start: "top 95%",
-                        toggleActions: "play none none reverse"
-                    }
-                });
             });
-        }
-        // Typing effect
-        const typingElement = document.getElementById('typing');
-        const words = ['vibes', 'dreams', 'futures', 'realities'];
-        let wordIndex = 0;
-        let charIndex = 0;
-        let isDeleting = false;
-        function typeWriter() {
-            const currentWord = words[wordIndex];
-            if (isDeleting) {
-                typingElement.textContent = currentWord.substring(0, charIndex - 1);
-                charIndex--;
-            } else {
-                typingElement.textContent = currentWord.substring(0, charIndex + 1);
-                charIndex++;
-            }
-            if (!isDeleting && charIndex === currentWord.length) {
-                setTimeout(() => isDeleting = true, 2000);
-            } else if (isDeleting && charIndex === 0) {
-                isDeleting = false;
-                wordIndex = (wordIndex + 1) % words.length;
-            }
-            setTimeout(typeWriter, isDeleting ? 100 : 150);
-        }
-        typeWriter();
-        // Portfolio filtering functionality (enhanced)
-        const portfolioItems = document.querySelectorAll('.portfolio-item');
-        // Add hover effects
-        portfolioItems.forEach(item => {
-            item.addEventListener('mouseenter', () => {
-                item.style.transform = 'translateY(-10px) scale(1.02)';
-            });
-            item.addEventListener('mouseleave', () => {
-                item.style.transform = 'translateY(0) scale(1)';
-            });
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bahgatbigo/vibes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Idea.startup | Marketplace for Startup Ideas</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
+        .idea-card:hover {
             transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
+        .animated-underline {
             position: relative;
+            display: inline-block;
         }
+        .animated-underline::after {
             content: '';
             position: absolute;
             width: 100%;
+            transform: scaleX(0);
+            height: 2px;
+            bottom: 0;
+            left: 0;
+            background-color: #667eea;
+            transform-origin: bottom right;
+            transition: transform 0.25s ease-out;
         }
+        .animated-underline:hover::after {
+            transform: scaleX(1);
+            transform-origin: bottom left;
         }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
         }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
         }
     </style>
 </head>
+<body class="font-sans antialiased text-gray-800">
     <!-- Navigation -->
+    <nav class="bg-white shadow-lg sticky top-0 z-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
                 <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <i class="fas fa-lightbulb text-indigo-600 text-2xl mr-2"></i>
+                        <span class="text-xl font-bold text-indigo-600">Idea.startup</span>
+                    </div>
+                    <div class="hidden md:ml-10 md:flex md:space-x-8">
+                        <a href="/discover" class="text-indigo-600 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium">Discover</a>
+                        <a href="/submit-idea" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Sell Idea</a>
+                        <a href="/invest" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Invest</a>
+                        <a href="/dashboard" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Dashboard</a>
+                        <a href="/about" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">About</a>
+                        <a href="/contact" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Contact</a>
+                    </div>
                 </div>
+                <div class="hidden md:ml-6 md:flex md:items-center">
+                    <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</button>
+                </div>
+                <div class="-mr-2 flex items-center md:hidden">
+                    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
+                        <span class="sr-only">Open main menu</span>
+                        <i class="fas fa-bars"></i>
+                    </button>
                 </div>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
+    <div class="gradient-bg text-white">
+        <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
+                    <span class="block">Turn Ideas Into</span>
+                    <span class="block">Successful Startups</span>
+                </h1>
+                <p class="mt-3 max-w-md mx-auto text-base sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
+                    Buy, sell, or invest in the next big startup idea. Join our marketplace of innovators and investors.
+                </p>
+                <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
+                    <div class="rounded-md shadow">
+                        <a href="/discover" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
+                            Explore Ideas
+                        </a>
+                    </div>
+                    <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+                        <a href="/submit-idea" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
+                            Sell Your Idea
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
+    </div>
+    <!-- Featured Ideas -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div class="text-center mb-12">
+            <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
+                Featured <span class="text-indigo-600">Startup Ideas</span>
+            </h2>
+            <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
+                Browse through our curated selection of high-potential startup ideas
+            </p>
+        </div>
+        <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            <!-- Idea Card 1 -->
+            <div class="bg-white rounded-lg shadow-md overflow-hidden idea-card transition-all duration-300 ease-in-out">
+                <div class="relative h-48 overflow-hidden">
+                    <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AI Startup">
+                    <div class="absolute top-2 right-2 bg-indigo-100 text-indigo-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Tech</div>
                 </div>
+                <div class="p-6">
+                    <div class="flex items-center justify-between mb-2">
+                        <h3 class="text-xl font-bold text-gray-900">AI-Powered Personal Assistant</h3>
+                        <span class="text-indigo-600 font-bold">$25,000</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">An AI assistant that learns your habits and preferences to automate daily tasks and decision making.</p>
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <span class="text-gray-700">4.8</span>
+                            <span class="mx-2 text-gray-300">|</span>
+                            <span class="text-gray-500">12 bids</span>
                         </div>
+                        <a href="/idea/ai-powered-assistant" class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</a>
                     </div>
                 </div>
             </div>
+            <!-- Idea Card 2 -->
+            <div class="bg-white rounded-lg shadow-md overflow-hidden idea-card transition-all duration-300 ease-in-out">
+                <div class="relative h-48 overflow-hidden">
+                    <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sustainability Startup">
+                    <div class="absolute top-2 right-2 bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Sustainability</div>
                 </div>
+                <div class="p-6">
+                    <div class="flex items-center justify-between mb-2">
+                        <h3 class="text-xl font-bold text-gray-900">Urban Vertical Farming Network</h3>
+                        <span class="text-indigo-600 font-bold">$50,000</span>
                     </div>
+                    <p class="text-gray-600 mb-4">A network of vertical farms in urban areas providing fresh produce with minimal environmental impact.</p>
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <span class="text-gray-700">4.9</span>
+                            <span class="mx-2 text-gray-300">|</span>
+                            <span class="text-gray-500">24 bids</span>
                         </div>
+                        <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button>
                     </div>
                 </div>
+            </div>
+            <!-- Idea Card 3 -->
+            <div class="bg-white rounded-lg shadow-md overflow-hidden idea-card transition-all duration-300 ease-in-out">
+                <div class="relative h-48 overflow-hidden">
+                    <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Finance Startup">
+                    <div class="absolute top-2 right-2 bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Finance</div>
                 </div>
+                <div class="p-6">
+                    <div class="flex items-center justify-between mb-2">
+                        <h3 class="text-xl font-bold text-gray-900">Micro-Investment Platform</h3>
+                        <span class="text-indigo-600 font-bold">$15,000</span>
                     </div>
+                    <p class="text-gray-600 mb-4">A platform that allows users to invest spare change from everyday purchases into diversified portfolios.</p>
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>
+                            <span class="text-gray-700">4.7</span>
+                            <span class="mx-2 text-gray-300">|</span>
+                            <span class="text-gray-500">8 bids</span>
                         </div>
+                        <button class="text-indigo-600 hover:text-indigo-800 font-medium">View Details</button>
                     </div>
                 </div>
             </div>
         </div>
+        <div class="mt-10 text-center">
+            <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
+                Browse All Ideas
+                <i class="fas fa-arrow-right ml-2"></i>
+            </a>
+        </div>
+    </div>
+    <!-- How It Works -->
+    <div class="bg-gray-50 py-16">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
+                    How <span class="text-indigo-600">Idea.startup</span> Works
+                </h2>
+                <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
+                    Simple steps to buy, sell, or invest in startup ideas
                 </p>
             </div>
+            <div class="grid grid-cols-1 gap-8 sm:grid-cols-3">
+                <!-- Step 1 -->
+                <div class="bg-white p-6 rounded-lg shadow-sm text-center">
+                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
+                        <span class="text-xl font-bold">1</span>
+                    </div>
+                    <h3 class="text-lg font-medium text-gray-900 mb-2">Submit or Browse Ideas</h3>
+                    <p class="text-gray-500">
+                        Creators can submit their startup ideas with detailed business plans. Investors browse through vetted ideas.
                     </p>
                 </div>
+                <!-- Step 2 -->
+                <div class="bg-white p-6 rounded-lg shadow-sm text-center">
+                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
+                        <span class="text-xl font-bold">2</span>
+                    </div>
+                    <h3 class="text-lg font-medium text-gray-900 mb-2">Connect & Negotiate</h3>
+                    <p class="text-gray-500">
+                        Interested parties connect through our secure platform to discuss terms and negotiate deals.
+                    </p>
+                </div>
+                <!-- Step 3 -->
+                <div class="bg-white p-6 rounded-lg shadow-sm text-center">
+                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
+                        <span class="text-xl font-bold">3</span>
+                    </div>
+                    <h3 class="text-lg font-medium text-gray-900 mb-2">Secure Transaction</h3>
+                    <p class="text-gray-500">
+                        Our escrow service ensures secure transactions when buying ideas or investing in startups.
                     </p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Testimonials -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div class="text-center mb-12">
+            <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
+                Success <span class="text-indigo-600">Stories</span>
+            </h2>
+            <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
+                Hear from entrepreneurs and investors who found success through Idea.startup
+            </p>
+        </div>
+        <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
+            <!-- Testimonial 1 -->
+            <div class="bg-white p-6 rounded-lg shadow-sm">
+                <div class="flex items-start">
+                    <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
+                    <div class="ml-4">
+                        <div class="flex items-center">
+                            <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
+                            <span class="ml-2 text-xs text-gray-500">Founder, AI Assist</span>
                         </div>
+                        <div class="flex items-center mt-1">
+                            <i class="fas fa-star text-yellow-400 text-sm"></i>
+                            <i class="fas fa-star text-yellow-400 text-sm ml-1"></i>
+                            <i class="fas fa-star text-yellow-400 text-sm ml-1"></i>
+                            <i class="fas fa-star text-yellow-400 text-sm ml-1"></i>
+                            <i class="fas fa-star text-yellow-400 text-sm ml-1"></i>
                         </div>
+                        <p class="mt-2 text-gray-600">
+                            "I sold my AI assistant concept on Idea.startup for $25,000. The platform connected me with the perfect investor who had the resources to bring my vision to life. Today, AI Assist is valued at $5M."
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <!-- Testimonial 2 -->
+            <div class="bg-white p-6 rounded-lg shadow-sm">
+                <div class="flex items-start">
+                    <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
+                    <div class="ml-4">
+                        <div class="flex items-center">
+                            <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
+                            <span class="ml-2 text-xs text-gray-500">Investor</span>
                         </div>
+                        <div class="flex items-center mt-1">
+                            <i class="fas fa-star text-yellow-400 text-sm"></i>
+                            <i class="fas fa-star text-yellow-400 text-sm ml-1"></i>
+                            <i class="fas fa-star text-yellow-400 text-sm ml-1"></i>
+                            <i class="fas fa-star text-yellow-400 text-sm ml-1"></i>
+                            <i class="fas fa-star text-yellow-400 text-sm ml-1"></i>
                         </div>
+                        <p class="mt-2 text-gray-600">
+                            "As an angel investor, Idea.startup has been invaluable for discovering unique opportunities. I've invested in 3 ideas through the platform, all showing promising growth. The vetting process gives me confidence in the ideas I evaluate."
+                        </p>
                     </div>
                 </div>
             </div>
         </div>
+    </div>
+    <!-- CTA Section -->
+    <div class="gradient-bg text-white">
+        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
+            <div class="lg:w-1/2">
+                <h2 class="text-3xl font-extrabold tracking-tight sm:text-4xl">
+                    <span class="block">Ready to dive in?</span>
+                    <span class="block">Start exploring ideas today.</span>
+                </h2>
+                <p class="mt-3 max-w-3xl text-lg">
+                    Join thousands of entrepreneurs and investors in our growing community.
                 </p>
             </div>
+            <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+                <div class="inline-flex rounded-md shadow">
+                    <a href="/signup" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
+                        Get Started
+                    </a>
+                </div>
+                <div class="ml-3 inline-flex rounded-md shadow">
+                    <a href="/about" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70">
+                        Learn More
+                    </a>
+                </div>
             </div>
         </div>
+    </div>
     <!-- Footer -->
+    <footer class="bg-gray-800 text-white">
+        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                 <div>
+                    <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Marketplace</h3>
+                    <ul class="mt-4 space-y-4">
+                        <li><a href="#" class="text-base text-gray-400 hover:text-white animated-underline">All Ideas</a></li>
+                        <li><a href="#" class="text-base text-gray-400 hover:text-white animated-underline">Trending</a></li>
+                        <li><a href="#" class="text-base text-gray-400 hover:text-white animated-underline">Newest</a></li>
+                        <li><a href="#" class="text-base text-gray-400 hover:text-white animated-underline">Categories</a></li>
+                    </ul>
                 </div>
                 <div>
+                    <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Resources</h3>
+                    <ul class="mt-4 space-y-4">
+                        <li><a href="#" class="text-base text-gray-400 hover:text-white animated-underline">Blog</a></li>
+                        <li><a href="#" class="text-base text-gray-400 hover:text-white animated-underline">Guides</a></li>
+                        <li><a href="#" class="text-base text-gray-400 hover:text-white animated-underline">Webinars</a></li>
+                        <li><a href="#" class="text-base text-gray-400 hover:text-white animated-underline">Startup Tools</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3>
+                    <ul class="mt-4 space-y-4">
+                        <li><a href="/about" class="text-base text-gray-400 hover:text-white animated-underline">About</a></li>
+                        <li><a href="/careers" class="text-base text-gray-400 hover:text-white animated-underline">Careers</a></li>
+                        <li><a href="/press" class="text-base text-gray-400 hover:text-white animated-underline">Press</a></li>
+                        <li><a href="/contact" class="text-base text-gray-400 hover:text-white animated-underline">Contact</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
+                    <div class="mt-4 flex space-x-6">
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
                     </div>
+                    <div class="mt-6">
+                        <h4 class="text-sm font-medium text-gray-300">Subscribe to our newsletter</h4>
+                        <div class="mt-2 flex">
+                            <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md text-gray-800 w-full focus:outline-none">
+                            <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-md">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
+            <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between">
+                <p class="text-base text-gray-400">
+                    &copy; 2023 Idea.startup. All rights reserved.
+                </p>
+                <div class="mt-4 md:mt-0 flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
+                    <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
+                    <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a>
+                </div>
             </div>
         </div>
     </footer>
+    <!-- Floating action button -->
+    <div class="fixed bottom-6 right-6">
+        <button class="floating bg-indigo-600 hover:bg-indigo-700 text-white rounded-full p-4 shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+            <i class="fas fa-comment-dots text-xl"></i>
+        </button>
+    </div>
     <script>
+        // Simple animation for idea cards on scroll
+        document.addEventListener('DOMContentLoaded', function() {
+            const ideaCards = document.querySelectorAll('.idea-card');
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
                     }
                 });
+            }, { threshold: 0.1 });
+            ideaCards.forEach(card => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(20px)';
+                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+                observer.observe(card);
             });
+            // Mobile menu toggle would go here
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bahgatbigo/vibes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>