Spaces:

mattchx
/

vibe-coding-landing

Running

App Files Files Community

mattchx commited on Apr 2, 2025

Commit

439e433

verified ·

1 Parent(s): 18743a3

Initial commit

Browse files

Files changed (1) hide show

index.html +586 -18

index.html CHANGED Viewed

@@ -1,19 +1,587 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vibe Code - Learn to Code with Good Vibes</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>
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+        .floating {
+            animation: float 6s ease-in-out infinite;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            background-size: 300% 300%;
+            animation: gradient 8s ease infinite;
+        }
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .code-block {
+            font-family: 'Courier New', monospace;
+            position: relative;
+        }
+        .code-block::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 4px;
+            height: 100%;
+            background: linear-gradient(to bottom, #ff8a00, #e52e71);
+            border-radius: 4px 0 0 4px;
+        }
+        .vibe-wave {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            overflow: hidden;
+            line-height: 0;
+        }
+        .vibe-wave svg {
+            position: relative;
+            display: block;
+            width: calc(100% + 1.3px);
+            height: 150px;
+        }
+        .vibe-wave .shape-fill {
+            fill: #F3F4F6;
+        }
+        .card-hover:hover {
+            transform: translateY(-10px) rotate(2deg);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .typewriter {
+            overflow: hidden;
+            border-right: .15em solid orange;
+            white-space: nowrap;
+            margin: 0 auto;
+            letter-spacing: .15em;
+            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: orange; }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm 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-code text-2xl text-purple-500 mr-2"></i>
+                        <span class="text-xl font-bold gradient-text">VibeCode</span>
+                    </div>
+                </div>
+                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
+                    <a href="#home" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Home</a>
+                    <a href="#courses" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Courses</a>
+                    <a href="#community" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Community</a>
+                    <a href="#about" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">About</a>
+                    <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-md text-sm font-medium hover:from-purple-600 hover:to-pink-600 transition duration-300">
+                        Start Vibing
+                    </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-purple-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 -->
+    <section id="home" class="relative overflow-hidden">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
+            <div class="lg:grid lg:grid-cols-12 lg:gap-8">
+                <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
+                    <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+                        <span class="block">Learn to</span>
+                        <span class="block gradient-text">Vibe Code</span>
+                    </h1>
+                    <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+                        Where coding meets creativity and good vibes. Our approach makes learning to code feel like jamming with friends, not studying.
+                    </p>
+                    <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
+                        <div class="space-y-4 sm:space-y-0 sm:inline-grid sm:grid-cols-2 sm:gap-5">
+                            <a href="#" class="flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 shadow-lg hover:shadow-xl transition duration-300">
+                                Get Started
+                                <i class="fas fa-arrow-right ml-2"></i>
+                            </a>
+                            <a href="#" class="flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200 transition duration-300">
+                                <i class="fas fa-play-circle mr-2"></i>
+                                Watch Demo
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
+                    <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
+                        <div class="relative block w-full bg-white overflow-hidden rounded-lg">
+                            <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-pink-500 opacity-20 rounded-lg"></div>
+                            <div class="relative p-8">
+                                <div class="code-block bg-gray-900 text-gray-100 p-6 rounded-lg overflow-x-auto">
+                                    <pre><code class="text-sm">
+<span class="text-purple-400">function</span> <span class="text-yellow-300">vibeCheck</span>() {
+  <span class="text-purple-400">const</span> <span class="text-blue-300">goodVibes</span> = <span class="text-green-400">true</span>;
+  <span class="text-purple-400">if</span> (<span class="text-blue-300">goodVibes</span>) {
+    <span class="text-blue-300">console</span>.<span class="text-yellow-300">log</span>(<span class="text-orange-300">'✨ You're in the zone! ✨'</span>);
+    <span class="text-purple-400">return</span> <span class="text-orange-300">'Keep coding with those good vibes!'</span>;
+  } <span class="text-purple-400">else</span> {
+    <span class="text-blue-300">console</span>.<span class="text-yellow-300">log</span>(<span class="text-orange-300">'☕ Maybe take a break?'</span>);
+    <span class="text-purple-400">return</span> <span class="text-orange-300">'Time for some self-care!'</span>;
+  }
+}
+                                    </code></pre>
+                                </div>
+                                <div class="mt-6 flex items-center">
+                                    <div class="flex-shrink-0">
+                                        <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
+                                    </div>
+                                    <div class="ml-3">
+                                        <p class="text-sm font-medium text-gray-900">Jamie Coder</p>
+                                        <p class="text-sm text-gray-500">Vibe Coding Instructor</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="vibe-wave">
+            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+            </svg>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="bg-gray-100 py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:text-center">
+                <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Vibe Coding</h2>
+                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+                    A better way to learn code
+                </p>
+                <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
+                    Our unique approach combines technical skills with mindfulness and creativity.
+                </p>
+            </div>
+            <div class="mt-20">
+                <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
+                    <div class="relative bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 card-hover">
+                        <div class="absolute -top-6 left-6 bg-purple-500 text-white rounded-full p-3">
+                            <i class="fas fa-heart text-xl"></i>
+                        </div>
+                        <div class="mt-6">
+                            <h3 class="text-lg font-medium text-gray-900">Mindful Coding</h3>
+                            <p class="mt-2 text-base text-gray-500">
+                                Learn to code in a stress-free environment that encourages flow state and creativity.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="relative bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 card-hover">
+                        <div class="absolute -top-6 left-6 bg-pink-500 text-white rounded-full p-3">
+                            <i class="fas fa-users text-xl"></i>
+                        </div>
+                        <div class="mt-6">
+                            <h3 class="text-lg font-medium text-gray-900">Community Vibes</h3>
+                            <p class="mt-2 text-base text-gray-500">
+                                Join our supportive community where everyone lifts each other up.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="relative bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 card-hover">
+                        <div class="absolute -top-6 left-6 bg-yellow-500 text-white rounded-full p-3">
+                            <i class="fas fa-music text-xl"></i>
+                        </div>
+                        <div class="mt-6">
+                            <h3 class="text-lg font-medium text-gray-900">Coding Playlists</h3>
+                            <p class="mt-2 text-base text-gray-500">
+                                Curated music playlists to match your coding mood and boost productivity.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="relative bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 card-hover">
+                        <div class="absolute -top-6 left-6 bg-green-500 text-white rounded-full p-3">
+                            <i class="fas fa-lightbulb text-xl"></i>
+                        </div>
+                        <div class="mt-6">
+                            <h3 class="text-lg font-medium text-gray-900">Creative Projects</h3>
+                            <p class="mt-2 text-base text-gray-500">
+                                Build fun, artistic projects that make coding feel like play.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Courses Section -->
+    <section id="courses" class="py-16 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
+                    Our Vibe Coding Courses
+                </h2>
+                <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
+                    Choose your coding adventure. All courses come with good vibes included.
+                </p>
+            </div>
+            <div class="mt-16 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
+                <div class="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-purple-500 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
+                    <div class="rounded-lg overflow-hidden">
+                        <div class="aspect-w-3 aspect-h-2 bg-gradient-to-r from-purple-400 to-pink-400 group-hover:from-purple-500 group-hover:to-pink-500 transition duration-300 h-48 flex items-center justify-center">
+                            <i class="fas fa-laptop-code text-white text-6xl"></i>
+                        </div>
+                    </div>
+                    <div class="mt-6">
+                        <div class="flex items-center">
+                            <span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">Beginner</span>
+                            <span class="ml-2 text-sm text-gray-500">4 weeks</span>
+                        </div>
+                        <h3 class="mt-2 text-lg font-medium text-gray-900">
+                            <a href="#" class="focus:outline-none">
+                                <span class="absolute inset-0" aria-hidden="true"></span>
+                                Web Dev Vibes
+                            </a>
+                        </h3>
+                        <p class="mt-2 text-sm text-gray-500">
+                            Learn HTML, CSS, and JavaScript while creating colorful, interactive web experiences.
+                        </p>
+                    </div>
+                    <div class="mt-6 flex items-center justify-between">
+                        <span class="text-2xl font-bold text-gray-900">$99</span>
+                        <button class="px-4 py-2 bg-purple-100 text-purple-700 rounded-md hover:bg-purple-200 transition duration-300">
+                            Enroll Now
+                        </button>
+                    </div>
+                </div>
+                <div class="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-purple-500 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
+                    <div class="rounded-lg overflow-hidden">
+                        <div class="aspect-w-3 aspect-h-2 bg-gradient-to-r from-blue-400 to-teal-400 group-hover:from-blue-500 group-hover:to-teal-500 transition duration-300 h-48 flex items-center justify-center">
+                            <i class="fas fa-mobile-alt text-white text-6xl"></i>
+                        </div>
+                    </div>
+                    <div class="mt-6">
+                        <div class="flex items-center">
+                            <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Intermediate</span>
+                            <span class="ml-2 text-sm text-gray-500">6 weeks</span>
+                        </div>
+                        <h3 class="mt-2 text-lg font-medium text-gray-900">
+                            <a href="#" class="focus:outline-none">
+                                <span class="absolute inset-0" aria-hidden="true"></span>
+                                App Flow State
+                            </a>
+                        </h3>
+                        <p class="mt-2 text-sm text-gray-500">
+                            Build mobile apps with React Native while maintaining your creative flow.
+                        </p>
+                    </div>
+                    <div class="mt-6 flex items-center justify-between">
+                        <span class="text-2xl font-bold text-gray-900">$149</span>
+                        <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 transition duration-300">
+                            Enroll Now
+                        </button>
+                    </div>
+                </div>
+                <div class="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-purple-500 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 transform hover:-translate-y-2">
+                    <div class="rounded-lg overflow-hidden">
+                        <div class="aspect-w-3 aspect-h-2 bg-gradient-to-r from-yellow-400 to-orange-400 group-hover:from-yellow-500 group-hover:to-orange-500 transition duration-300 h-48 flex items-center justify-center">
+                            <i class="fas fa-gamepad text-white text-6xl"></i>
+                        </div>
+                    </div>
+                    <div class="mt-6">
+                        <div class="flex items-center">
+                            <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded">Advanced</span>
+                            <span class="ml-2 text-sm text-gray-500">8 weeks</span>
+                        </div>
+                        <h3 class="mt-2 text-lg font-medium text-gray-900">
+                            <a href="#" class="focus:outline-none">
+                                <span class="absolute inset-0" aria-hidden="true"></span>
+                                Creative Coding Jam
+                            </a>
+                        </h3>
+                        <p class="mt-2 text-sm text-gray-500">
+                            Create generative art and interactive experiences with JavaScript and p5.js.
+                        </p>
+                    </div>
+                    <div class="mt-6 flex items-center justify-between">
+                        <span class="text-2xl font-bold text-gray-900">$199</span>
+                        <button class="px-4 py-2 bg-yellow-100 text-yellow-700 rounded-md hover:bg-yellow-200 transition duration-300">
+                            Enroll Now
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="bg-purple-50 py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
+                    Vibe Check from Our Students
+                </h2>
+                <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
+                    Don't just take our word for it. Here's what our community says.
+                </p>
+            </div>
+            <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center">
+                        <div class="flex-shrink-0">
+                            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt="">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="text-lg font-medium text-gray-900">Sarah K.</h4>
+                            <div class="flex text-yellow-400">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <p class="text-gray-600 italic">
+                            "I used to dread coding, but Vibe Code made it fun! The creative projects and chill community helped me actually enjoy learning."
+                        </p>
+                    </div>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center">
+                        <div class="flex-shrink-0">
+                            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="text-lg font-medium text-gray-900">Marcus T.</h4>
+                            <div class="flex text-yellow-400">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <p class="text-gray-600 italic">
+                            "The coding playlists are genius! I never knew I could get in the zone so easily. Finished my first web app in just 3 weeks."
+                        </p>
+                    </div>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow-md">
+                    <div class="flex items-center">
+                        <div class="flex-shrink-0">
+                            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/63.jpg" alt="">
+                        </div>
+                        <div class="ml-4">
+                            <h4 class="text-lg font-medium text-gray-900">Priya M.</h4>
+                            <div class="flex text-yellow-400">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star-half-alt"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <p class="text-gray-600 italic">
+                            "As a designer, I was intimidated by code. The visual approach made everything click. Now I can prototype my own ideas!"
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="bg-gradient-to-r from-purple-600 to-pink-600 py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
+                    Ready to Code with Good Vibes?
+                </h2>
+                <p class="mt-3 max-w-2xl mx-auto text-xl text-purple-100 sm:mt-4">
+                    Join thousands of developers who've found their coding flow.
+                </p>
+                <div class="mt-8 flex justify-center">
+                    <div class="inline-flex rounded-md shadow">
+                        <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-white hover:bg-purple-50 transition duration-300">
+                            Start Free Trial
+                            <i class="fas fa-arrow-right ml-3"></i>
+                        </a>
+                    </div>
+                    <div class="ml-3 inline-flex">
+                        <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-700 bg-opacity-60 hover:bg-opacity-70 transition duration-300">
+                            <i class="fas fa-question-circle mr-3"></i>
+                            Learn More
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white pt-16 pb-8">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold">VibeCode</h3>
+                    <p class="mt-4 text-gray-400">
+                        Making coding education more human, creative, and enjoyable.
+                    </p>
+                    <div class="mt-4 flex space-x-6">
+                        <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-github"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold">Courses</h3>
+                    <ul class="mt-4 space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Web Dev Vibes</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">App Flow State</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Creative Coding Jam</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Data Visualization Groove</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold">Resources</h3>
+                    <ul class="mt-4 space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Coding Playlists</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Vibe Check Tool</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Free Workshops</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold">Company</h3>
+                    <ul class="mt-4 space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
+                <p class="text-gray-400 text-sm">
+                    &copy; 2023 VibeCode. All rights reserved.
+                </p>
+                <div class="mt-4 md:mt-0">
+                    <p class="text-gray-400 text-sm">
+                        Made with <i class="fas fa-heart text-pink-500"></i> and good vibes.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Simple typewriter effect for demo purposes
+        document.addEventListener('DOMContentLoaded', function() {
+            const phrases = [
+                "Coding should feel like jamming with friends.",
+                "Good vibes only in this codebase.",
+                "Creativity meets technical skills.",
+                "Find your coding flow state."
+            ];
+            let currentPhrase = 0;
+            const typewriterElement = document.createElement('div');
+            typewriterElement.className = 'typewriter text-xl text-purple-600 font-medium mt-4';
+            document.querySelector('#home .lg\\:text-left').appendChild(typewriterElement);
+            function typeWriter() {
+                if (currentPhrase >= phrases.length) currentPhrase = 0;
+                const text = phrases[currentPhrase];
+                let i = 0;
+                typewriterElement.innerHTML = '';
+                typewriterElement.style.width = '0';
+                function typing() {
+                    if (i < text.length) {
+                        typewriterElement.innerHTML += text.charAt(i);
+                        i++;
+                        setTimeout(typing, 100);
+                    } else {
+                        setTimeout(erase, 2000);
+                    }
+                }
+                function erase() {
+                    if (i > 0) {
+                        typewriterElement.innerHTML = text.substring(0, i-1);
+                        i--;
+                        setTimeout(erase, 50);
+                    } else {
+                        currentPhrase++;
+                        setTimeout(typeWriter, 500);
+                    }
+                }
+                typing();
+            }
+            typeWriter();
+            // Mobile menu toggle
+            const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
+            mobileMenuButton.addEventListener('click', function() {
+                const expanded = this.getAttribute('aria-expanded') === 'true';
+                this.setAttribute('aria-expanded', !expanded);
+                // You would toggle your mobile menu here
+                alert("Mobile menu would open here in a full implementation!");
+            });
+        });
+    </script>
+</body>
 </html>