Update src/app/page.tsx

Merge version_6 into main

src/app/globals.css

@@ -1,5 +1,145 @@
-@import "tailwindcss";
-@import "./styles/variables.css";
-@import "./styles/theme.css";
-@import "./styles/utilities.css";
-@import "./styles/base.css";
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+@layer base {
+  * {
+    @apply m-0 p-0 box-border;
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    @apply bg-background text-foreground overflow-x-hidden;
+    font-family: var(--font-inter), sans-serif;
+    font-weight: 400;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: inherit;
+  }
+}
+
+@layer utilities {
+  .rounded-theme {
+    @apply rounded-md;
+  }
+
+  .rounded-theme-capped {
+    @apply rounded-2xl;
+  }
+
+  .rounded-theme-sharp {
+    @apply rounded-none;
+  }
+
+  .rounded-theme-pill {
+    @apply rounded-full;
+  }
+
+  .p-content {
+    @apply px-6 sm:px-8 lg:px-10 py-8 sm:py-12 lg:py-16;
+  }
+
+  .w-content-width {
+    width: var(--width-content-width);
+  }
+
+  .max-w-content-width {
+    max-width: var(--width-content-width);
+  }
+
+  .animate-in {
+    animation: fadeInUp 0.6s ease-out forwards;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 0.5s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .slide-in-from-bottom-2 {
+    animation: slideInFromBottom2 0.4s ease-out;
+  }
+
+  @keyframes slideInFromBottom2 {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .slide-in-from-bottom-4 {
+    animation: slideInFromBottom4 0.5s ease-out;
+  }
+
+  @keyframes slideInFromBottom4 {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .slide-in-from-left-4 {
+    animation: slideInFromLeft4 0.6s ease-out;
+  }
+
+  @keyframes slideInFromLeft4 {
+    from {
+      opacity: 0;
+      transform: translateX(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .slide-in-from-right-4 {
+    animation: slideInFromRight4 0.6s ease-out;
+  }
+
+  @keyframes slideInFromRight4 {
+    from {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

src/app/layout.tsx

@@ -1,46 +1,26 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Poppins } from "next/font/google";
+import "./styles/variables.css";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
+const poppins = Poppins({
+  variable: "--font-poppins",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });
 
 export const metadata: Metadata = {
-  title: "Native Line - Build Native Apps Just Talk",  description: "Create production-ready iOS, iPad, and Mac apps with conversational AI. Native Line generates pure Swift apps instantly.",  keywords: "native app builder, iOS development, app generator, Swift, indie developers, app creation, AI, macOS",  metadataBase: new URL("https://nativeline.app"),
-  alternates: {
-    canonical: "https://nativeline.app"
-  },
-  openGraph: {
-    title: "Native Line - Build Native Apps Just Talk",    description: "Create production-ready iOS, iPad, and Mac apps with conversational AI. Native Line generates pure Swift apps instantly.",    url: "https://nativeline.app",    siteName: "Native Line",    type: "website",    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-sleek-macos-application-window-showing-1772522998510-05a82eb5.png",        alt: "Native Line App Builder Interface"
-      }
-    ]
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Native Line - Build Native Apps Just Talk",    description: "Create production-ready iOS, iPad, and Mac apps with conversational AI.",    images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-sleek-macos-application-window-showing-1772522998510-05a82eb5.png"]
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
-};
+  title: "Native Line - Build Native Apps Just Talk",  description: "Turn your ideas into production-ready iOS, iPad, and Mac apps instantly. Pure native Swift, beautifully designed, completely yours."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body className={`${inter.variable} antialiased`}>
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={poppins.variable}>
+        {children}
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1408,7 +1388,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
 import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
@@ -10,25 +11,24 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
-import { Sparkles, Zap, Lightbulb, Rocket, Users, Star, HelpCircle, Download, Moon, Sun } from 'lucide-react';
-import { useState } from 'react';
+import { Sparkles, Zap, Lightbulb, Rocket, Users, Star, HelpCircle, Download } from 'lucide-react';
+import AnimatedChatDemo from '@/components/sections/demo/AnimatedChatDemo';
 
 export default function LandingPage() {
   const [isDarkMode, setIsDarkMode] = useState(false);
 
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="small"
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
       sizing="mediumLargeSizeLargeTitles"
-      background="noise"
-      cardStyle="soft-shadow"
-      primaryButtonStyle="flat"
-      secondaryButtonStyle="layered"
-      headingFontWeight="extrabold"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
@@ -48,8 +48,8 @@ export default function LandingPage() {
 
       <div id="hero" data-section="hero">
         <HeroSplitDoubleCarousel
-          title="Build Native Apps. Just Talk."
-          description="Turn your ideas into production-ready iOS, iPad, and Mac apps instantly. Pure native Swift, beautifully designed, entirely yours."
+          title="Build Native Apps Just Talk"
+          description="Turn your ideas into production-ready iOS, iPad, and Mac apps instantly. Pure native Swift, beautifully designed, completely yours."
           tag="macOS App"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
@@ -84,16 +84,20 @@ export default function LandingPage() {
           ]}
           carouselPosition="right"
           buttons={[
-            { text: "Get Started", href: "https://example.com/download" },
+            { text: "Download", href: "https://example.com/download" },
             { text: "Watch Demo", href: "https://example.com/demo" }
           ]}
           buttonAnimation="slide-up"
         />
       </div>
 
+      <div id="chatDemo" data-section="chatDemo">
+        <AnimatedChatDemo />
+      </div>
+
       <div id="features" data-section="features">
         <FeatureCardNineteen
-          title="Why Developers Choose Native Line"
+          title="Why Choose Native Line"
           description="Experience the future of app development—where conversational AI meets native power."
           tag="Key Benefits"
           tagIcon={Zap}
@@ -103,19 +107,19 @@ export default function LandingPage() {
           features={[
             {
               id: 1,
-              tag: "Speed",              title: "Idea to App in Minutes",              subtitle: "Ship faster than ever",              description: "Describe your app conversationally. Native Line generates production-ready Swift code instantly. Minutes, not weeks.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-first-step-of-n-1772522998713-3d093734.png?_wi=2",              imageAlt: "Fast app generation"
+              tag: "Speed",              title: "From Idea to App in Minutes",              subtitle: "Ship faster than ever",              description: "Describe your app idea and get production-ready Swift code instantly. Minutes from concept to deployment.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-first-step-of-n-1772522998713-3d093734.png?_wi=2",              imageAlt: "Fast app generation"
             },
             {
               id: 2,
-              tag: "Quality",              title: "Pure Native. Zero Compromise.",              subtitle: "Production-ready from day one",              description: "Genuine native iOS, iPad, and Mac code. No web wrappers. No JavaScript. No performance penalties. Premium experience.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-finished-ios-app-screenshot-showing-a--1772522998285-77be74a6.png?_wi=2",              imageAlt: "Native iOS quality"
+              tag: "Quality",              title: "Pure Native Swift Code",              subtitle: "Production-ready quality",              description: "Genuine native iOS, iPad, and Mac code. No wrappers, no JavaScript. Premium experience from day one.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-finished-ios-app-screenshot-showing-a--1772522998285-77be74a6.png?_wi=2",              imageAlt: "Native iOS quality"
             },
             {
               id: 3,
-              tag: "Control",              title: "Full Source Code Ownership",              subtitle: "Your code, your rules",              description: "Get complete Swift source code. No vendor lock-in. Modify, extend, and maintain with full freedom and control.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-mac-app-screenshot-displaying-a-native-1772523000039-25334e88.png?_wi=2",              imageAlt: "Source code control"
+              tag: "Control",              title: "Full Source Code Ownership",              subtitle: "Your code, your rules",              description: "Get complete Swift source code. No vendor lock-in, no subscription dependency. Modify and maintain freely.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-mac-app-screenshot-displaying-a-native-1772523000039-25334e88.png?_wi=2",              imageAlt: "Source code control"
             },
             {
               id: 4,
-              tag: "Accessibility",              title: "Conversational Interface",              subtitle: "No technical knowledge required",              description: "You don't need Swift, Xcode, or iOS experience. Just talk to Native Line. AI handles the complexity.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-sleek-macos-application-window-showing-1772522998510-05a82eb5.png?_wi=2",              imageAlt: "Conversational interface"
+              tag: "Accessible",              title: "Conversational Interface",              subtitle: "No coding experience needed",              description: "Just describe what you want. No Swift, no Xcode knowledge required. Conversational AI handles the complexity.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-sleek-macos-application-window-showing-1772522998510-05a82eb5.png?_wi=2",              imageAlt: "Conversational interface"
             }
           ]}
         />
@@ -127,8 +131,8 @@ export default function LandingPage() {
           tagIcon={Lightbulb}
           tagAnimation="slide-up"
           title="Democratizing App Development"
-          description="Native Line empowers indie developers, entrepreneurs, and creators to build native apps without hiring teams of engineers."
-          subdescription="We believe anyone with an idea deserves the ability to ship production-quality apps instantly."
+          description="Native Line enables indie developers, entrepreneurs, and creators to ship production-quality native apps."
+          subdescription="We believe anyone with an idea deserves the ability to create native apps without hiring a team of engineers."
           icon={Rocket}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-lifestyle-photo-showing-an-indie-devel-1772522999346-c2d8c8e5.png"
           imageAlt="Developer using Native Line"
@@ -138,51 +142,41 @@ export default function LandingPage() {
       </div>
 
       <div id="process" data-section="process">
-        <TimelineHorizontalCardStack
-          title="How Native Line Works"
-          description="Three simple steps from conversation to production app."
+        <FeatureCardNineteen
+          title="How It Works"
+          description="Three simple steps from idea to production."
           tag="Process"
           tagIcon={Users}
           tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          mediaItems={[
+          features={[
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-first-step-of-n-1772522998713-3d093734.png?_wi=3",              imageAlt: "Step 1: Conversational input"
+              id: 1,
+              tag: "Step 1",              title: "Describe Your Idea",              subtitle: "Tell Native Line what to build",              description: "Open the app and describe your idea conversationally. Share features, design preferences, and user flows. Refine your vision through chat.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-first-step-of-n-1772522998713-3d093734.png?_wi=3",              imageAlt: "Conversational input step"
             },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-native-line-process-1772522998677-8404a04b.png?_wi=2",              imageAlt: "Step 2: AI processing"
+              id: 2,
+              tag: "Step 2",              title: "AI Generates Your App",              subtitle: "See it come to life",              description: "Our AI generates complete Swift code with real-time previews. Iterate and refine until it's perfect. See exactly what you're building.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-native-line-process-1772522998677-8404a04b.png?_wi=2",              imageAlt: "AI processing and generation"
             },
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-final-output-a--1772522999316-ac7823d9.png?_wi=2",              imageAlt: "Step 3: Ready-to-deploy app"
+              id: 3,
+              tag: "Step 3",              title: "Deploy to App Store",              subtitle: "Ship in minutes",              description: "Export complete, signed app code ready for submission. Native Line handles all the complexity. Your app is ready to monetize.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-screenshot-showing-the-final-output-a--1772522999316-ac7823d9.png?_wi=2",              imageAlt: "Ready-to-deploy app"
             }
           ]}
-        >
-          <div>
-            <h3 className="font-semibold text-lg">Describe Your Idea</h3>
-            <p className="text-sm mt-1">Tell Native Line what you want to build. Chat to refine your vision.</p>
-          </div>
-          <div>
-            <h3 className="font-semibold text-lg">AI Generates Your App</h3>
-            <p className="text-sm mt-1">Complete Swift code generated instantly. Real-time previews. Iterate and refine.</p>
-          </div>
-          <div>
-            <h3 className="font-semibold text-lg">Deploy to App Store</h3>
-            <p className="text-sm mt-1">Export signed app code ready for submission. Fully yours to maintain.</p>
-          </div>
-        </TimelineHorizontalCardStack>
+        />
       </div>
 
       <div id="socialProof" data-section="socialProof">
         <SocialProofOne
-          title="Trusted by the Developer Community"
-          description="Used by thousands of indie developers and studios building production apps."
+          title="Trusted by Indie Creators"
+          description="Used by thousands of developers and agencies building production apps."
           tag="Partners"
           tagIcon={Users}
           tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          names={["AppFlow", "DesignLab", "Venture Studio", "Indie Makers", "App Hub", "CloudInfra", "Developers", "Design Pro"]}
+          names={["AppFlow", "DesignLab", "Venture Studio", "Indie Makers", "App Distribution Hub", "CloudInfra", "Developer Collective", "Design Agency Pro"]}
           speed={40}
           showCard={true}
         />
@@ -191,7 +185,7 @@ export default function LandingPage() {
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFive
           title="What Developers Say"
-          description="Hear from creators who've shipped with Native Line."
+          description="Hear from creators shipping with Native Line."
           tag="Testimonials"
           tagIcon={Star}
           tagAnimation="slide-up"
@@ -199,22 +193,22 @@ export default function LandingPage() {
           useInvertedBackground={false}
           testimonials={[
             {
-              id: "1",              name: "Sarah Chen, Developer",              date: "January 15, 2025",              title: "First app in 48 hours",              quote: "I wanted to build an app but was intimidated by Swift. Native Line made it effortless. Production-ready in two days. Indistinguishable from apps I'd hire developers to build.",              tag: "Early Access",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png",              avatarAlt: "Sarah Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png?_wi=1",              imageAlt: "Sarah Chen testimonial"
+              id: "1",              name: "Sarah Chen, Indie Developer",              date: "15 January 2025",              title: "Shipped my first app in 48 hours",              quote: "I wanted to build an app but was intimidated by Swift. Native Line made it effortless. I described my idea and had a production-ready app within two days.",              tag: "Early Access",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png",              avatarAlt: "Sarah Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png?_wi=1",              imageAlt: "Sarah Chen testimonial"
             },
             {
-              id: "2",              name: "Marcus Johnson, Agency Founder",              date: "January 12, 2025",              title: "Game-changer for prototyping",              quote: "We now deliver native app prototypes to clients immediately. No more explaining timelines. We control the process and maintain code ownership. This is our competitive advantage.",              tag: "Agency",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png",              avatarAlt: "Marcus Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png?_wi=1",              imageAlt: "Marcus Johnson testimonial"
+              id: "2",              name: "Marcus Johnson, Founder",              date: "12 January 2025",              title: "Game-changer for prototyping",              quote: "As a design agency, Native Line lets us deliver functional native prototypes to clients immediately. No more timelines or external dev teams. We control the process and maintain full code ownership.",              tag: "Agency",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png",              avatarAlt: "Marcus Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png?_wi=1",              imageAlt: "Marcus Johnson testimonial"
             },
             {
-              id: "3",              name: "Elena Rodriguez, Designer",              date: "January 8, 2025",              title: "Build without developers",              quote: "I've always collaborated with engineers to bring ideas to life. Native Line changes everything. I prototype real native apps now. Conversational interface feels natural.",              tag: "Design",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-a-designer-or-1772522998331-d9e779d1.png",              avatarAlt: "Elena Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-a-designer-or-1772522998331-d9e779d1.png",              imageAlt: "Elena Rodriguez testimonial"
+              id: "3",              name: "Elena Rodriguez, Designer",              date: "8 January 2025",              title: "I can build without developers",              quote: "I always needed engineers to bring ideas to life. Native Line changes everything. I can prototype real native apps now. The conversational interface feels natural.",              tag: "Design",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-a-designer-or-1772522998331-d9e779d1.png",              avatarAlt: "Elena Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-a-designer-or-1772522998331-d9e779d1.png",              imageAlt: "Elena Rodriguez testimonial"
             },
             {
-              id: "4",              name: "David Park, Solopreneur",              date: "January 5, 2025",              title: "Shipping apps quickly",              quote: "Five ideas sat in my notes because I didn't want to hire developers. No more excuses. Fast validation. I've shipped three apps in three weeks.",              tag: "Solopreneur",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-another-start-1772522998549-425ed9d6.png",              avatarAlt: "David Park",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-another-start-1772522998549-425ed9d6.png",              imageAlt: "David Park testimonial"
+              id: "4",              name: "David Park, Solopreneur",              date: "5 January 2025",              title: "No more excuses—shipping apps",              quote: "I had ideas sitting in my notes for months. With Native Line, there's no excuse anymore. I can validate ideas fast instead of overthinking them. I've shipped three apps in three weeks.",              tag: "Solopreneur",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-another-start-1772522998549-425ed9d6.png",              avatarAlt: "David Park",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-of-another-start-1772522998549-425ed9d6.png",              imageAlt: "David Park testimonial"
             },
             {
-              id: "5",              name: "Lisa Wong, Consultant",              date: "January 2, 2025",              title: "Future of app development",              quote: "I recommend Native Line to all startup founders. It's enabling creators. Native quality is exceptional and code is production-ready from day one.",              tag: "Consultant",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png",              avatarAlt: "Lisa Wong",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png?_wi=2",              imageAlt: "Lisa Wong testimonial"
+              id: "5",              name: "Lisa Wong, Consultant",              date: "2 January 2025",              title: "The future of app development",              quote: "I consult with startups on app strategy. Native Line is instantly becoming my first recommendation. It's not replacing developers—it's enabling creators. The native quality is exceptional.",              tag: "Consultant",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png",              avatarAlt: "Lisa Wong",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-confi-1772522998773-448b63b6.png?_wi=2",              imageAlt: "Lisa Wong testimonial"
             },
             {
-              id: "6",              name: "James Mitchell, Entrepreneur",              date: "December 30, 2024",              title: "80% faster to market",              quote: "My SaaS app usually takes months. With Native Line, native companion app shipped in weeks. Speed advantage let us get feedback months earlier than competitors.",              tag: "Founder",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png",              avatarAlt: "James Mitchell",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png?_wi=2",              imageAlt: "James Mitchell testimonial"
+              id: "6",              name: "James Mitchell, Founder",              date: "30 December 2024",              title: "80% faster time to market",              quote: "Building my SaaS app used to take months. With Native Line, I have a native companion app shipped in weeks. The speed advantage let us get feedback months earlier than competitors.",              tag: "Founder",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png",              avatarAlt: "James Mitchell",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQRMtx5ZUGLrwvjDcVIYHeaKiH/a-professional-headshot-photo-of-a-diffe-1772522999720-62e43383.png?_wi=2",              imageAlt: "James Mitchell testimonial"
             }
           ]}
         />
@@ -232,34 +226,34 @@ export default function LandingPage() {
           faqsAnimation="slide-up"
           faqs={[
             {
-              id: "1",              title: "What does Native Line generate?",              content: "Complete, production-ready Swift source code for iOS, iPad, and macOS. Genuine native code—not web wrappers. Full code ownership. Ready for App Store submission."
+              id: "1",              title: "What does Native Line generate?",              content: "Complete, production-ready Swift source code for iOS, iPad, and macOS. Genuine native code—not wrappers. You get full control and can modify, extend, or maintain it yourself. Ready for App Store submission."
             },
             {
-              id: "2",              title: "Do I need to know Swift?",              content: "No. Native Line is designed for non-technical users. Describe your app conversationally. Swift developers can always review and modify the generated code if needed."
+              id: "2",              title: "Do I need to know Swift?",              content: "No. Describe your app conversationally and Native Line handles the complexity. You never need to write Swift if you don't want to. However, developers can always review and modify the generated code."
             },
             {
-              id: "3",              title: "Can I own and modify the code?",              content: "Yes. You own 100% of the code. No vendor lock-in. Modify, extend, and maintain however you want. Hire developers to continue working if needed."
+              id: "3",              title: "Do I own the code?",              content: "Yes, 100%. No vendor lock-in. You can modify, extend, and maintain your apps however you want. Hire developers to continue working on it if needed. It's completely yours."
             },
             {
-              id: "4",              title: "What's the pricing model?",              content: "Native Line is a macOS app with flexible licensing. Currently in early access. You own all apps you generate regardless of subscription status."
+              id: "4",              title: "What's the pricing model?",              content: "Native Line is a desktop macOS application with flexible licensing. We're in early access with fair pricing for indie creators. You own the apps you generate regardless of subscription status."
             },
             {
-              id: "5",              title: "Will there be backend services?",              content: "Native Line Cloud coming soon. Optional backend infrastructure (authentication, database, APIs) for your generated apps. Completely optional—use any backend you prefer."
+              id: "5",              title: "Is Native Line Cloud available?",              content: "Coming soon. Optional backend infrastructure services (auth, database, APIs) for your generated apps. Completely optional—use any backend you prefer or build your own."
             },
             {
-              id: "6",              title: "Can I generate for multiple platforms?",              content: "Yes. iOS, iPad, and macOS. Each is true native code for its platform. Generate separate apps for each or unified apps across all three."
+              id: "6",              title: "Can I build for multiple platforms?",              content: "Yes. Native Line generates for iOS, iPad, and macOS. Each app is true native code for its platform. Build separate apps for each or unified apps working across all three."
             },
             {
-              id: "7",              title: "How long does generation take?",              content: "Simple apps: minutes. Complex apps with multiple features: 15-45 minutes. Real-time previews as your app is generated. Iterate as needed."
+              id: "7",              title: "How long does generation take?",              content: "Simple apps generate in minutes. Complex apps with multiple features take longer (typically 15-45 minutes). Watch real-time previews and iterate until perfect."
             },
             {
-              id: "8",              title: "Can agencies use it?",              content: "Yes. Perfect for agencies and studios. Generate apps for clients, deliver source code, or maintain yourself. Commercial use supported. Whitelabel options available."
+              id: "8",              title: "Can I use it for client projects?",              content: "Yes. Perfect for agencies and studios. Generate apps for clients, deliver source code, or maintain yourself. Licensing supports commercial use. Whitelabel options available."
             },
             {
-              id: "9",              title: "How do I monetize my apps?",              content: "Your apps are fully yours. Submit to App Store, set pricing, use in-app purchases, or offer free. We don't take revenue share."
+              id: "9",              title: "Can I monetize my apps?",              content: "Your apps are fully yours to monetize. Submit to the App Store, set pricing, use in-app purchases, or offer free. We don't take any revenue share."
             },
             {
-              id: "10",              title: "What if I need help later?",              content: "You own the source code. Modify it yourself, hire developers, or share with your team. Standard Swift code—any developer can work with it. Documentation and community support included."
+              id: "10",              title: "What if I need developer support later?",              content: "You own the source code, so modify it yourself or hire developers. The code is standard Swift using familiar iOS patterns. We provide documentation and community support."
             }
           ]}
         />
@@ -267,26 +261,26 @@ export default function LandingPage() {
 
       <div id="contact" data-section="contact">
         <ContactFaq
-          ctaTitle="Ready to Ship Your App?"
-          ctaDescription="Download Native Line for macOS and build your first app in hours."
+          ctaTitle="Ready to Build?"
+          ctaDescription="Download Native Line for macOS today and ship your first app in hours."
           ctaButton={{
-            text: "Get Started",            href: "https://example.com/download"
+            text: "Download",            href: "https://example.com/download"
           }}
           ctaIcon={Download}
           useInvertedBackground={false}
           animationType="slide-up"
           faqs={[
             {
-              id: "1",              title: "Available for Windows or Linux?",              content: "Currently macOS only. We focus on the best native Apple experience. Exploring other platforms for future releases."
+              id: "1",              title: "Available on Windows or Linux?",              content: "Native Line is currently macOS only. We're focused on providing the best native experience on Apple's ecosystem. Other platforms coming soon."
             },
             {
-              id: "2",              title: "Early access available?",              content: "Yes. Download today for immediate early access. Beta testers get special pricing and direct team access."
+              id: "2",              title: "Early access or beta?",              content: "Yes. Download Native Line today for immediate access. Beta testers get special pricing and direct team access for feedback."
             },
             {
-              id: "3",              title: "Free trial?",              content: "Yes. 7-day free trial. Generate a complete app and see the power of Native Line. No credit card required."
+              id: "3",              title: "Free trial available?",              content: "Yes. Try free for 7 days. Generate a complete app and see the power firsthand. No credit card required."
             },
             {
-              id: "4",              title: "Need help?",              content: "Community Discord, email support, and comprehensive documentation. Enterprise customers get direct support and consultation."
+              id: "4",              title: "Need help?",              content: "We have community Discord, email support, and comprehensive docs. Enterprise customers get direct support and consultation."
             }
           ]}
         />
@@ -300,12 +294,12 @@ export default function LandingPage() {
                 { label: "Download", href: "https://example.com/download" },
                 { label: "Features", href: "#features" },
                 { label: "How It Works", href: "#process" },
-                { label: "Cloud", href: "#" }
+                { label: "Native Line Cloud", href: "#" }
               ]
             },
             {
               title: "Resources",              items: [
-                { label: "Docs", href: "https://docs.example.com" },
+                { label: "Documentation", href: "https://docs.example.com" },
                 { label: "Community", href: "https://discord.example.com" },
                 { label: "Blog", href: "https://blog.example.com" },
                 { label: "Roadmap", href: "#" }
@@ -313,7 +307,7 @@ export default function LandingPage() {
             },
             {
               title: "Company",              items: [
-                { label: "About", href: "#about" },
+                { label: "About Us", href: "#about" },
                 { label: "Contact", href: "#contact" },
                 { label: "Privacy", href: "#" },
                 { label: "Terms", href: "#" }

src/app/styles/base.css

@@ -1,28 +1,7 @@
-* {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
-html {
-  overscroll-behavior: none;
-  overscroll-behavior-y: none;
-}
-
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
-  position: relative;
-  min-height: 100vh;
-  overscroll-behavior: none;
-  overscroll-behavior-y: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+@layer base {
+  body {
+    font-family: var(--font-poppins), sans-serif;
+  }
 }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f3f0;;
-  --card: #faf9f8;;
-  --foreground: #2d2520;;
-  --primary-cta: #8b6f47;;
-  --secondary-cta: #faf9f8;;
-  --accent: #d4ccc4;;
-  --background-accent: #c9bfb6;; */
+  /* --background: #ffffff;;;
+  --card: #f9f9f9;;;
+  --foreground: #000612e6;;;
+  --primary-cta: #106EFB;;;
+  --secondary-cta: #f9f9f9;;;
+  --accent: #e2e2e2;;;
+  --background-accent: #106EFB;;; */
 
-  --background: #f5f3f0;;
-  --card: #faf9f8;;
-  --foreground: #2d2520;;
-  --primary-cta: #8b6f47;;
-  --primary-cta-text: #ffffff;;
-  --secondary-cta: #faf9f8;;
-  --secondary-cta-text: #120a00e6;;
-  --accent: #d4ccc4;;
-  --background-accent: #c9bfb6;;
+  --background: #ffffff;;;
+  --card: #f9f9f9;;;
+  --foreground: #000612e6;;;
+  --primary-cta: #106EFB;;;
+  --primary-cta-text: #ffffff;;;
+  --secondary-cta: #f9f9f9;;;
+  --secondary-cta-text: #000612e6;;;
+  --accent: #e2e2e2;;;
+  --background-accent: #106EFB;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/sections/animated-chat-demo/AnimatedChatDemo.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Send } from "lucide-react";
+
+interface ChatMessage {
+  id: string;
+  text: string;
+  isUser: boolean;
+  isComplete?: boolean;
+}
+
+interface AppIdea {
+  id: string;
+  title: string;
+  description: string;
+}
+
+const appIdeas: AppIdea[] = [
+  {
+    id: "1",    title: "Weather Dashboard",    description: "A beautiful real-time weather app with hourly forecasts and weather alerts"
+  },
+  {
+    id: "2",    title: "Todo Manager",    description: "A productivity app with task organization, categories, and smart reminders"
+  },
+  {
+    id: "3",    title: "Budget Tracker",    description: "Personal finance app with spending analytics and budget goals tracking"
+  }
+];
+
+export default function AnimatedChatDemo() {
+  const [stage, setStage] = useState<"chat" | "process" | "finished">("chat");
+  const [currentIdeaIndex, setCurrentIdeaIndex] = useState(0);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [processSteps, setProcessSteps] = useState<Array<{ name: string; active: boolean }>>([]);
+  const [finishedApp, setFinishedApp] = useState<AppIdea | null>(null);
+  const [isAutoPlaying, setIsAutoPlaying] = useState(true);
+
+  // Stage 1: Chat simulation with auto-filling and sending
+  useEffect(() => {
+    if (stage !== "chat" || !isAutoPlaying) return;
+
+    let timeoutId: NodeJS.Timeout;
+    const currentIdea = appIdeas[currentIdeaIndex];
+
+    // Clear messages and start fresh
+    if (messages.length === 0) {
+      timeoutId = setTimeout(() => {
+        // Add user message character by character
+        const userMessage = currentIdea.description;
+        let charIndex = 0;
+        const typeInterval = setInterval(() => {
+          if (charIndex <= userMessage.length) {
+            setMessages((prev) => {
+              if (prev.length === 0 || !prev[prev.length - 1].isUser) {
+                return [
+                  ...prev,
+                  {
+                    id: `user-${Date.now()}`,
+                    text: userMessage.substring(0, charIndex),
+                    isUser: true,
+                    isComplete: false
+                  }
+                ];
+              } else {
+                const updated = [...prev];
+                updated[updated.length - 1].text = userMessage.substring(0, charIndex);
+                return updated;
+              }
+            });
+            charIndex++;
+          } else {
+            clearInterval(typeInterval);
+            // Mark message as complete and move to next stage
+            setTimeout(() => {
+              setMessages((prev) => {
+                const updated = [...prev];
+                if (updated.length > 0) {
+                  updated[updated.length - 1].isComplete = true;
+                }
+                return updated;
+              });
+              // Auto-send and transition to process
+              setTimeout(() => {
+                setStage("process");
+              }, 800);
+            }, 500);
+          }
+        }, 30);
+      }, 500);
+    }
+
+    return () => clearTimeout(timeoutId);
+  }, [stage, currentIdeaIndex, messages.length, isAutoPlaying]);
+
+  // Stage 2: Process flow animation
+  useEffect(() => {
+    if (stage !== "process" || !isAutoPlaying) return;
+
+    const steps = [
+      { name: "Design", active: false },
+      { name: "Planning", active: false },
+      { name: "Coding", active: false }
+    ];
+    setProcessSteps(steps);
+
+    let stepIndex = 0;
+    const stepInterval = setInterval(() => {
+      if (stepIndex < steps.length) {
+        setProcessSteps((prev) =>
+          prev.map((step, idx) => ({
+            ...step,
+            active: idx === stepIndex
+          }))
+        );
+        stepIndex++;
+      } else {
+        clearInterval(stepInterval);
+        // Transition to finished
+        setTimeout(() => {
+          setStage("finished");
+          setFinishedApp(appIdeas[currentIdeaIndex]);
+        }, 1000);
+      }
+    }, 1200);
+
+    return () => clearInterval(stepInterval);
+  }, [stage, currentIdeaIndex, isAutoPlaying]);
+
+  // Stage 3: Finished app display and loop
+  useEffect(() => {
+    if (stage !== "finished" || !isAutoPlaying) return;
+
+    const loopTimeout = setTimeout(() => {
+      const nextIndex = (currentIdeaIndex + 1) % appIdeas.length;
+      setCurrentIdeaIndex(nextIndex);
+      setStage("chat");
+      setMessages([]);
+      setProcessSteps([]);
+      setFinishedApp(null);
+    }, 4000);
+
+    return () => clearTimeout(loopTimeout);
+  }, [stage, currentIdeaIndex, isAutoPlaying]);
+
+  return (
+    <div className="w-full py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-background via-background to-background-accent/10">
+      <div className="max-w-4xl mx-auto">
+        {/* Section Header */}
+        <div className="text-center mb-16 opacity-0 animate-in fade-in slide-in-from-bottom-4 duration-700">
+          <p className="text-sm font-semibold text-primary-cta mb-2">INTERACTIVE DEMO</p>
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">See It In Action</h2>
+          <p className="text-base sm:text-lg text-foreground/70 max-w-2xl mx-auto">
+            Watch how Native Line transforms your ideas into complete apps in real-time
+          </p>
+        </div>
+
+        {/* Main Demo Container */}
+        <div className="relative">
+          {/* Chat Stage */}
+          {stage === "chat" && (
+            <div className="animate-in fade-in duration-500">
+              <div className="bg-card border border-accent/20 rounded-lg p-6 sm:p-8 shadow-lg">
+                <div className="space-y-4 mb-6 h-40 flex flex-col justify-center">
+                  {messages.map((msg) => (
+                    <div
+                      key={msg.id}
+                      className={`flex ${msg.isUser ? "justify-end" : "justify-start"} animate-in fade-in slide-in-from-bottom-2 duration-300`}
+                    >
+                      <div
+                        className={`px-4 py-2 rounded-lg max-w-xs ${
+                          msg.isUser
+                            ? "bg-primary-cta text-white"
+                            : "bg-background text-foreground border border-accent/30"
+                        }`}
+                      >
+                        <p className="text-sm">{msg.text}</p>
+                        {msg.isComplete && msg.isUser && (
+                          <div className="mt-2 flex justify-end">
+                            <Send className="w-4 h-4" />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Process Flow Stage */}
+          {stage === "process" && (
+            <div className="animate-in fade-in duration-500">
+              <div className="flex justify-center items-center gap-2 sm:gap-4 h-40 flex-wrap">
+                {processSteps.map((step, idx) => (
+                  <div key={idx} className="flex items-center">
+                    <div
+                      className={`w-16 sm:w-20 h-16 sm:h-20 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-500 ${
+                        step.active
+                          ? "bg-primary-cta text-white scale-110 shadow-lg animate-pulse"
+                          : "bg-background border-2 border-accent/30 text-foreground"
+                      }`}
+                    >
+                      {step.name}
+                    </div>
+                    {idx < processSteps.length - 1 && (
+                      <div
+                        className={`w-8 sm:w-12 h-1 mx-1 sm:mx-2 transition-all duration-500 ${
+                          processSteps[idx + 1].active ? "bg-primary-cta" : "bg-accent/20"
+                        }`}
+                      />
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Finished App Stage */}
+          {stage === "finished" && finishedApp && (
+            <div className="animate-in fade-in duration-700">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+                {/* App Image - Right */}
+                <div className="order-2 md:order-2 h-64 sm:h-80 bg-gradient-to-br from-primary-cta/10 to-accent/10 rounded-lg border border-accent/30 flex items-center justify-center animate-in fade-in slide-in-from-right-4 duration-700">
+                  <div className="text-center">
+                    <div className="w-20 h-20 sm:w-24 sm:h-24 bg-primary-cta/20 rounded-full mx-auto mb-4 flex items-center justify-center">
+                      <div className="w-16 h-16 sm:w-20 sm:h-20 bg-primary-cta rounded-full" />
+                    </div>
+                    <p className="text-sm text-foreground/50">App Preview</p>
+                  </div>
+                </div>
+
+                {/* App Details - Left */}
+                <div className="order-1 md:order-1 animate-in fade-in slide-in-from-left-4 duration-700 space-y-4">
+                  <div>
+                    <h3 className="text-2xl sm:text-3xl font-bold mb-2">{finishedApp.title}</h3>
+                    <p className="text-foreground/70 text-sm sm:text-base">{finishedApp.description}</p>
+                  </div>
+                  <div className="space-y-2 pt-4">
+                    <p className="text-xs sm:text-sm font-semibold text-primary-cta">✓ Production-Ready Code</p>
+                    <p className="text-xs sm:text-sm font-semibold text-primary-cta">✓ Ready to Deploy</p>
+                    <p className="text-xs sm:text-sm font-semibold text-primary-cta">✓ Fully Yours to Modify</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Loop Indicator */}
+        <div className="mt-12 flex justify-center gap-2">
+          {appIdeas.map((idea, idx) => (
+            <button
+              key={idea.id}
+              onClick={() => {
+                setCurrentIdeaIndex(idx);
+                setStage("chat");
+                setMessages([]);
+                setProcessSteps([]);
+                setFinishedApp(null);
+              }}
+              className={`w-2 h-2 rounded-full transition-all duration-300 ${
+                idx === currentIdeaIndex ? "bg-primary-cta w-8" : "bg-accent/30"
+              }`}
+              aria-label={`Show ${idea.title}`}
+            />
+          ))}
+        </div>
+
+        {/* Auto-play Toggle */}
+        <div className="mt-8 flex justify-center">
+          <button
+            onClick={() => setIsAutoPlaying(!isAutoPlaying)}
+            className="px-4 py-2 text-sm rounded-full border border-accent/30 hover:bg-card transition-colors"
+          >
+            {isAutoPlaying ? "Pause" : "Play"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/sections/demo/AnimatedChatDemo.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Send } from "lucide-react";
+import gsap from "gsap";
+
+interface ChatMessage {
+  id: string;
+  text: string;
+  isUser: boolean;
+  isComplete?: boolean;
+}
+
+interface AppIdea {
+  id: string;
+  title: string;
+  description: string;
+}
+
+const appIdeas: AppIdea[] = [
+  {
+    id: "1",    title: "Weather Dashboard",    description: "A beautiful real-time weather app with hourly forecasts and weather alerts"
+  },
+  {
+    id: "2",    title: "Todo Manager",    description: "A productivity app with task organization, categories, and smart reminders"
+  },
+  {
+    id: "3",    title: "Budget Tracker",    description: "Personal finance app with spending analytics and budget goals tracking"
+  }
+];
+
+export default function AnimatedChatDemo() {
+  const [stage, setStage] = useState<"chat" | "process" | "finished">("chat");
+  const [currentIdeaIndex, setCurrentIdeaIndex] = useState(0);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [processSteps, setProcessSteps] = useState<Array<{ name: string; active: boolean }>>([]);
+  const [finishedApp, setFinishedApp] = useState<AppIdea | null>(null);
+  const [isAutoPlaying, setIsAutoPlaying] = useState(true);
+  const timelineRef = useRef<gsap.core.Timeline | null>(null);
+
+  // Stage 1: Chat simulation with auto-filling and sending
+  useEffect(() => {
+    if (stage !== "chat" || !isAutoPlaying) return;
+
+    let timeoutId: NodeJS.Timeout;
+    const currentIdea = appIdeas[currentIdeaIndex];
+
+    // Clear messages and start fresh
+    if (messages.length === 0) {
+      timeoutId = setTimeout(() => {
+        // Add user message character by character
+        const userMessage = currentIdea.description;
+        let charIndex = 0;
+        const typeInterval = setInterval(() => {
+          if (charIndex <= userMessage.length) {
+            setMessages((prev) => {
+              if (prev.length === 0 || !prev[prev.length - 1].isUser) {
+                return [
+                  ...prev,
+                  {
+                    id: `user-${Date.now()}`,
+                    text: userMessage.substring(0, charIndex),
+                    isUser: true,
+                    isComplete: false
+                  }
+                ];
+              } else {
+                const updated = [...prev];
+                updated[updated.length - 1].text = userMessage.substring(0, charIndex);
+                return updated;
+              }
+            });
+            charIndex++;
+          } else {
+            clearInterval(typeInterval);
+            // Mark message as complete and move to next stage
+            setTimeout(() => {
+              setMessages((prev) => {
+                const updated = [...prev];
+                if (updated.length > 0) {
+                  updated[updated.length - 1].isComplete = true;
+                }
+                return updated;
+              });
+              // Auto-send and transition to process
+              setTimeout(() => {
+                setStage("process");
+              }, 800);
+            }, 500);
+          }
+        }, 30);
+      }, 500);
+    }
+
+    return () => clearTimeout(timeoutId);
+  }, [stage, currentIdeaIndex, messages.length, isAutoPlaying]);
+
+  // Stage 2: Process flow animation
+  useEffect(() => {
+    if (stage !== "process" || !isAutoPlaying) return;
+
+    const steps = [
+      { name: "Design", active: false },
+      { name: "Planning", active: false },
+      { name: "Coding", active: false }
+    ];
+    setProcessSteps(steps);
+
+    let stepIndex = 0;
+    const stepInterval = setInterval(() => {
+      if (stepIndex < steps.length) {
+        setProcessSteps((prev) =>
+          prev.map((step, idx) => ({
+            ...step,
+            active: idx === stepIndex
+          }))
+        );
+        stepIndex++;
+      } else {
+        clearInterval(stepInterval);
+        // Transition to finished
+        setTimeout(() => {
+          setStage("finished");
+          setFinishedApp(appIdeas[currentIdeaIndex]);
+        }, 1000);
+      }
+    }, 1200);
+
+    return () => clearInterval(stepInterval);
+  }, [stage, currentIdeaIndex, isAutoPlaying]);
+
+  // Stage 3: Finished app display and loop
+  useEffect(() => {
+    if (stage !== "finished" || !isAutoPlaying) return;
+
+    const loopTimeout = setTimeout(() => {
+      const nextIndex = (currentIdeaIndex + 1) % appIdeas.length;
+      setCurrentIdeaIndex(nextIndex);
+      setStage("chat");
+      setMessages([]);
+      setProcessSteps([]);
+      setFinishedApp(null);
+    }, 4000);
+
+    return () => clearTimeout(loopTimeout);
+  }, [stage, currentIdeaIndex, isAutoPlaying]);
+
+  return (
+    <div className="w-full py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-background via-background to-background-accent/10">
+      <div className="max-w-4xl mx-auto">
+        {/* Section Header */}
+        <div className="text-center mb-16 opacity-0 animate-in fade-in slide-in-from-bottom-4 duration-700">
+          <p className="text-sm font-semibold text-primary-cta mb-2">INTERACTIVE DEMO</p>
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">See It In Action</h2>
+          <p className="text-base sm:text-lg text-foreground/70 max-w-2xl mx-auto">
+            Watch how Native Line transforms your ideas into complete apps in real-time
+          </p>
+        </div>
+
+        {/* Main Demo Container */}
+        <div className="relative">
+          {/* Chat Stage */}
+          {stage === "chat" && (
+            <div className="animate-in fade-in duration-500">
+              <div className="bg-card border border-accent/20 rounded-lg p-6 sm:p-8 shadow-lg">
+                <div className="space-y-4 mb-6 h-40 flex flex-col justify-center">
+                  {messages.map((msg) => (
+                    <div
+                      key={msg.id}
+                      className={`flex ${msg.isUser ? "justify-end" : "justify-start"} animate-in fade-in slide-in-from-bottom-2 duration-300`}
+                    >
+                      <div
+                        className={`px-4 py-2 rounded-lg max-w-xs ${
+                          msg.isUser
+                            ? "bg-primary-cta text-white"
+                            : "bg-background text-foreground border border-accent/30"
+                        }`}
+                      >
+                        <p className="text-sm">{msg.text}</p>
+                        {msg.isComplete && msg.isUser && (
+                          <div className="mt-2 flex justify-end">
+                            <Send className="w-4 h-4" />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Process Flow Stage */}
+          {stage === "process" && (
+            <div className="animate-in fade-in duration-500">
+              <div className="flex justify-center items-center gap-2 sm:gap-4 h-40 flex-wrap">
+                {processSteps.map((step, idx) => (
+                  <div key={idx} className="flex items-center">
+                    <div
+                      className={`w-16 sm:w-20 h-16 sm:h-20 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-500 ${
+                        step.active
+                          ? "bg-primary-cta text-white scale-110 shadow-lg animate-pulse"
+                          : "bg-background border-2 border-accent/30 text-foreground"
+                      }`}
+                    >
+                      {step.name}
+                    </div>
+                    {idx < processSteps.length - 1 && (
+                      <div
+                        className={`w-8 sm:w-12 h-1 mx-1 sm:mx-2 transition-all duration-500 ${
+                          processSteps[idx + 1].active ? "bg-primary-cta" : "bg-accent/20"
+                        }`}
+                      />
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Finished App Stage */}
+          {stage === "finished" && finishedApp && (
+            <div className="animate-in fade-in duration-700">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+                {/* App Image - Right */}
+                <div className="order-2 md:order-2 h-64 sm:h-80 bg-gradient-to-br from-primary-cta/10 to-accent/10 rounded-lg border border-accent/30 flex items-center justify-center animate-in fade-in slide-in-from-right-4 duration-700">
+                  <div className="text-center">
+                    <div className="w-20 h-20 sm:w-24 sm:h-24 bg-primary-cta/20 rounded-full mx-auto mb-4 flex items-center justify-center">
+                      <div className="w-16 h-16 sm:w-20 sm:h-20 bg-primary-cta rounded-full" />
+                    </div>
+                    <p className="text-sm text-foreground/50">App Preview</p>
+                  </div>
+                </div>
+
+                {/* App Details - Left */}
+                <div className="order-1 md:order-1 animate-in fade-in slide-in-from-left-4 duration-700 space-y-4">
+                  <div>
+                    <h3 className="text-2xl sm:text-3xl font-bold mb-2">{finishedApp.title}</h3>
+                    <p className="text-foreground/70 text-sm sm:text-base">{finishedApp.description}</p>
+                  </div>
+                  <div className="space-y-2 pt-4">
+                    <p className="text-xs sm:text-sm font-semibold text-primary-cta">✓ Production-Ready Code</p>
+                    <p className="text-xs sm:text-sm font-semibold text-primary-cta">✓ Ready to Deploy</p>
+                    <p className="text-xs sm:text-sm font-semibold text-primary-cta">✓ Fully Yours to Modify</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Loop Indicator */}
+        <div className="mt-12 flex justify-center gap-2">
+          {appIdeas.map((idea, idx) => (
+            <button
+              key={idea.id}
+              onClick={() => {
+                setCurrentIdeaIndex(idx);
+                setStage("chat");
+                setMessages([]);
+                setProcessSteps([]);
+                setFinishedApp(null);
+              }}
+              className={`w-2 h-2 rounded-full transition-all duration-300 ${
+                idx === currentIdeaIndex ? "bg-primary-cta w-8" : "bg-accent/30"
+              }`}
+              aria-label={`Show ${idea.title}`}
+            />
+          ))}
+        </div>
+
+        {/* Auto-play Toggle */}
+        <div className="mt-8 flex justify-center">
+          <button
+            onClick={() => setIsAutoPlaying(!isAutoPlaying)}
+            className="px-4 py-2 text-sm rounded-full border border-accent/30 hover:bg-card transition-colors"
+          >
+            {isAutoPlaying ? "Pause" : "Play"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}