fix: logo should render and get started button works

components/Footer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Twitter } from 'lucide-react';
+import logo from '@/assets/images/icon.png';
 
 interface FooterProps {
   onPrivacyClick?: (e: React.MouseEvent) => void;
@@ -14,7 +15,7 @@ const Footer: React.FC<FooterProps> = ({ onPrivacyClick }) => {
           <div className="col-span-1">
             <div className="flex items-center gap-2 mb-4">
               <img
-                src="/assets/images/icon.png" 
+                src={logo}
                 alt="Nemia Logo"
                 className="w-6 h-6 rounded object-contain"
               />

components/Navbar.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { Menu, X } from 'lucide-react';
+import logo from '@/assets/images/icon.png';
+import WaitlistModal from './WaitlistModal';
 
 interface NavbarProps {
   onLogoClick?: (e: React.MouseEvent) => void;
@@ -7,62 +9,79 @@ interface NavbarProps {
 
 const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
 
   return (
-    <nav className="fixed w-full z-50 bg-background-dark/80 backdrop-blur-md border-b border-gray-800">
+    <>
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <nav className="fixed w-full z-50 bg-background-dark/80 backdrop-blur-md border-b border-gray-800">
-        <div className="flex justify-between h-16 items-center">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          {/* Logo */}
+          <div className="flex justify-between h-16 items-center">
-          <div 
+            {/* Logo */}
-            className="flex items-center gap-2 cursor-pointer" 
+            <div
-            onClick={onLogoClick}
+              className="flex items-center gap-2 cursor-pointer"
-          >
+              onClick={onLogoClick}
-            <img 
-              src="/assets/images/icon.png" 
-              alt="Nemia Logo" 
-              className="w-8 h-8 rounded-lg object-contain"
-            />
-            <span className="font-display font-bold text-xl tracking-tight text-white">
-              Nemia
-            </span>
-          </div>
-
-          {/* Desktop Nav */}
-          <div className="hidden md:flex items-center space-x-8">
-            <a href="#features" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Features</a>
-            <a href="#how-it-works" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">How it Works</a>
-            <a href="#pricing" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Pricing</a>
-            <button className="bg-primary text-gray-900 px-5 py-2 rounded-full font-semibold text-sm hover:brightness-110 transition-all shadow-glow">
-              Get Started
-            </button>
-          </div>
-
-          {/* Mobile Menu Button */}
-          <div className="md:hidden flex items-center">
-            <button 
-              onClick={() => setIsOpen(!isOpen)}
-              className="text-gray-300 hover:text-white transition-colors"
             >
-              {isOpen ? <X size={24} /> : <Menu size={24} />}
+              <img
-            </button>
+                src={logo}
-          </div>
+                alt="Nemia Logo"
-        </div>
+                className="w-8 h-8 rounded-lg object-contain"
-      </div>
+              />
+              <span className="font-display font-bold text-xl tracking-tight text-white">
+                Nemia
+              </span>
+            </div>
 
-      {/* Mobile Menu */}
+            {/* Desktop Nav */}
-      {isOpen && (
+            <div className="hidden md:flex items-center space-x-8">
-        <div className="md:hidden bg-surface-dark border-b border-gray-800">
+              <a href="#features" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Features</a>
-          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+              <a href="#how-it-works" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">How it Works</a>
-            <a href="#features" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Features</a>
+              <a href="#pricing" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Pricing</a>
-            <a href="#how-it-works" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">How it Works</a>
+              <button
-            <a href="#pricing" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Pricing</a>
+                onClick={() => setIsWaitlistOpen(true)}
-            <button className="w-full mt-4 bg-primary text-gray-900 px-5 py-3 rounded-xl font-bold hover:brightness-110 transition-all">
+                className="bg-primary text-gray-900 px-5 py-2 rounded-full font-semibold text-sm hover:brightness-110 transition-all shadow-glow"
-              Get Started
+              >
-            </button>
+                Get Started
+              </button>
+            </div>
+
+            {/* Mobile Menu Button */}
+            <div className="md:hidden flex items-center">
+              <button
+                onClick={() => setIsOpen(!isOpen)}
+                className="text-gray-300 hover:text-white transition-colors"
+              >
+                {isOpen ? <X size={24} /> : <Menu size={24} />}
+              </button>
+            </div>
           </div>
         </div>
-      )}
+
-    </nav>
+        {/* Mobile Menu */}
+        {isOpen && (
+          <div className="md:hidden bg-surface-dark border-b border-gray-800">
+            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+              <a href="#features" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Features</a>
+              <a href="#how-it-works" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">How it Works</a>
+              <a href="#pricing" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Pricing</a>
+              <button
+                onClick={() => {
+                  setIsOpen(false);
+                  setIsWaitlistOpen(true);
+                }}
+                className="w-full mt-4 bg-primary text-gray-900 px-5 py-3 rounded-xl font-bold hover:brightness-110 transition-all"
+              >
+                Get Started
+              </button>
+            </div>
+          </div>
+        )}
+      </nav>
+
+      <WaitlistModal
+        isOpen={isWaitlistOpen}
+        onClose={() => setIsWaitlistOpen(false)}
+      />
+    </>
   );
 };
 

components/WaitlistModal.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { X, Mail } from 'lucide-react';
+
+interface WaitlistModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const WaitlistModal: React.FC<WaitlistModalProps> = ({ isOpen, onClose }) => {
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+            {/* Backdrop */}
+            <div
+                className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+                onClick={onClose}
+            />
+
+            {/* Modal Content */}
+            <div className="relative bg-surface-dark border border-gray-800 rounded-3xl p-8 max-w-md w-full shadow-2xl animate-fade-in-up">
+                <button
+                    onClick={onClose}
+                    className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
+                >
+                    <X size={24} />
+                </button>
+
+                <div className="text-center mb-8">
+                    <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <Mail className="text-primary" size={24} />
+                    </div>
+                    <h3 className="text-2xl font-display font-bold text-white mb-2">
+                        Join the Waitlist
+                    </h3>
+                    <p className="text-gray-400">
+                        Be the first to experience focus-driven learning. We'll notify you when we launch!
+                    </p>
+                </div>
+
+                <form
+                    action="https://getlaunchlist.com/s/pAqdup"
+                    method="POST"
+                    className="space-y-4"
+                >
+                    <div className="relative">
+                        <Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={20} />
+                        <input
+                            type="email"
+                            name="email"
+                            placeholder="Enter your email"
+                            required
+                            autoFocus
+                            className="w-full bg-background-dark border border-gray-700 rounded-xl py-4 pl-12 pr-4 text-white placeholder:text-gray-600 focus:outline-none focus:border-primary transition-colors"
+                        />
+                    </div>
+
+                    <button
+                        type="submit"
+                        className="w-full bg-primary text-gray-900 py-4 rounded-xl font-bold text-lg hover:brightness-110 transition-all shadow-glow"
+                    >
+                        Join Waitlist
+                    </button>
+                </form>
+
+                <p className="mt-6 text-center text-xs text-gray-600">
+                    No credit card required. Unsubscribe at any time.
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default WaitlistModal;

vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />