src/components/sections/About.tsx

@@ -0,0 +1,10 @@
+export default function About() {
+  return (
+    <section id="about" className="relative w-full py-24 bg-transparent">
+      <div className="max-w-6xl mx-auto px-6 text-center">
+        <h2 className="text-5xl font-bold text-foreground">About Us</h2>
+        <p className="text-lg text-foreground/80 mt-4 max-w-3xl mx-auto">We are at the forefront of the AI revolution.</p>
+      </div>
+    </section>
+  );
+}

src/components/sections/Contact.tsx

@@ -0,0 +1,10 @@
+export default function Contact() {
+  return (
+    <section id="contact" className="relative w-full py-24 bg-transparent">
+      <div className="max-w-6xl mx-auto px-6 text-center">
+        <h2 className="text-5xl font-bold text-foreground">Get in Touch</h2>
+        <p className="text-lg text-foreground/80 mt-4 max-w-3xl mx-auto">Let's build the future together.</p>
+      </div>
+    </section>
+  );
+}

src/components/sections/FAQ.tsx

@@ -0,0 +1,10 @@
+export default function FAQ() {
+  return (
+    <section id="faq" className="relative w-full py-24 bg-transparent">
+      <div className="max-w-6xl mx-auto px-6 text-center">
+        <h2 className="text-5xl font-bold text-foreground">Frequently Asked Questions</h2>
+        <p className="text-lg text-foreground/80 mt-4 max-w-3xl mx-auto">Your questions, answered.</p>
+      </div>
+    </section>
+  );
+}

src/components/sections/Features.tsx

@@ -0,0 +1,10 @@
+export default function Features() {
+  return (
+    <section id="features" className="relative w-full py-24 bg-transparent">
+      <div className="max-w-6xl mx-auto px-6 text-center">
+        <h2 className="text-5xl font-bold text-foreground">Features</h2>
+        <p className="text-lg text-foreground/80 mt-4 max-w-3xl mx-auto">Discover what makes mekkahAI unique.</p>
+      </div>
+    </section>
+  );
+}

src/components/sections/Footer.tsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer className="relative w-full py-12 bg-transparent border-t border-card">
+      <div className="max-w-6xl mx-auto px-6 text-center">
+        <p className="text-foreground/60">© 2024 mekkahAI. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+}

src/components/sections/Hero.tsx

@@ -0,0 +1,10 @@
+export default function Hero() {
+  return (
+    <section className="relative w-full py-48 bg-transparent text-center overflow-hidden">
+      <div className="max-w-4xl mx-auto px-6">
+        <h2 className="text-7xl font-bold text-foreground animate-fade-in-up">Crafting the Future with Sentient AI</h2>
+        <p className="text-xl text-foreground/80 mt-6 animate-fade-in-up" style={{animationDelay: '0.2s'}}>We build intelligent systems that learn, adapt, and create. Experience the new era of AI-powered solutions.</p>
+      </div>
+    </section>
+  );
+}

src/components/sections/Metrics.tsx

@@ -0,0 +1,10 @@
+export default function Metrics() {
+  return (
+    <section id="metrics" className="relative w-full py-24 bg-transparent">
+      <div className="max-w-6xl mx-auto px-6 text-center">
+        <h2 className="text-5xl font-bold text-foreground">Our Impact in Numbers</h2>
+        <p className="text-lg text-foreground/80 mt-4 max-w-3xl mx-auto">We deliver tangible results.</p>
+      </div>
+    </section>
+  );
+}

src/components/sections/Nav.tsx

@@ -0,0 +1,17 @@
+export default function Nav() {
+  return (
+    <nav className="sticky top-0 z-50 w-full py-4 bg-background/80 backdrop-blur-sm border-b border-card">
+      <div className="max-w-6xl mx-auto px-6 flex justify-between items-center">
+        <h1 className="text-2xl font-bold text-foreground">mekkahAI</h1>
+        <div className="hidden md:flex gap-8 items-center">
+          <a href="#about" className="hover:text-accent transition-colors">About</a>
+          <a href="#features" className="hover:text-accent transition-colors">Features</a>
+          <a href="#pricing" className="hover:text-accent transition-colors">Pricing</a>
+        </div>
+        <div>
+          <a href="#contact" className="px-4 py-2 rounded-md bg-primary-cta text-primary-cta-text font-semibold">Get Started</a>
+        </div>
+      </div>
+    </nav>
+  );
+}

src/components/sections/Pricing.tsx

@@ -0,0 +1,10 @@
+export default function Pricing() {
+  return (
+    <section id="pricing" className="relative w-full py-24 bg-transparent">
+      <div className="max-w-6xl mx-auto px-6 text-center">
+        <h2 className="text-5xl font-bold text-foreground">Pricing Plans</h2>
+        <p className="text-lg text-foreground/80 mt-4 max-w-3xl mx-auto">Simple, transparent pricing for teams of all sizes.</p>
+      </div>
+    </section>
+  );
+}

src/components/sections/SocialProof.tsx

@@ -0,0 +1,9 @@
+export default function SocialProof() {
+  return (
+    <section className="relative w-full py-24 bg-transparent">
+      <div className="max-w-6xl mx-auto px-6 text-center">
+        <h3 className="text-2xl font-semibold text-foreground/80">Trusted by the world's most innovative companies</h3>
+      </div>
+    </section>
+  );
+}

src/components/sections/Testimonials.tsx

@@ -0,0 +1,10 @@
+export default function Testimonials() {
+  return (
+    <section id="testimonials" className="relative w-full py-24 bg-transparent">
+      <div className="max-w-6xl mx-auto px-6 text-center">
+        <h2 className="text-5xl font-bold text-foreground">What Our Clients Say</h2>
+        <p className="text-lg text-foreground/80 mt-4 max-w-3xl mx-auto">Real stories from real partners.</p>
+      </div>
+    </section>
+  );
+}

src/index.css

@@ -4,15 +4,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayBlueAccent */
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffffe6;
-  --primary-cta: #e6e6e6;
-  --primary-cta-text: #0a0a0a;
+  --background: #02010a;
+  --card: #110f24;
+  --foreground: #f0f0f0e6;
+  --primary-cta: #8a2be2;
+  --primary-cta-text: #ffffff;
   --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --secondary-cta-text: #f0f0f0e6;
+  --accent: #ff69b4;
+  --background-accent: #1a1a1a;
 
   /* @layout/border-radius/rounded */
   --radius: 9999px;
@@ -133,13 +133,15 @@ html {
 
 body {
   margin: 0;
-  background-color: var(--background);
+  background: linear-gradient(180deg, #1e0a3c 0%, #02010a 30%);
   color: var(--foreground);
   font-family: "Inter", sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
   overscroll-behavior-y: none;
+  animation: background-pan 20s linear infinite;
+  background-size: 100% 200%;
 }
 
 h1,

src/styles/animations.css

@@ -156,3 +156,53 @@
 .animate-marquee-horizontal-reverse {
   animation: marquee-horizontal-reverse 15s linear infinite;
 }
+
+@keyframes background-pan {
+  from {
+    background-position: 0% 0%;
+  }
+  to {
+    background-position: 0% 100%;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.8s ease-out forwards;
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-left {
+  animation: slide-in-left 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.animate-slide-in-right {
+  animation: slide-in-right 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+}