2026-03-03 18:57:17 +00:00
3 changed files with 196 additions and 45 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,54 +1,18 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import { Poppins } from "next/font/google";
-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. No code, no compromise. Native Line turns your ideas into native Swift apps instantly.",  keywords: "native app builder, iOS development, app generator, no-code, 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 turns your ideas into native 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. No code, no compromise.",    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 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} ${poppins.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body>
+        {children}
+      
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1416,7 +1380,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,7 +11,8 @@ 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 { Sparkles, Zap, Lightbulb, Rocket, Users, Star, HelpCircle, Download, Moon, Sun } from 'lucide-react';
+import { Sparkles, Zap, Lightbulb, Rocket, Users, Star, HelpCircle, Download, MessageCircle, CheckCircle2, Loader } from 'lucide-react';
+import AnimatedChatDemo from '@/components/sections/demo/AnimatedChatDemo';

 export default function LandingPage() {
  const [isDarkMode, setIsDarkMode] = useState(false);
@@ -90,6 +91,10 @@ export default function LandingPage() {
        />
      </div>

+      <div id="chatDemo" data-section="chatDemo">
+        <AnimatedChatDemo />
+      </div>
+
      <div id="features" data-section="features">
        <FeatureCardNineteen
          title="Why Choose Native Line"
--- a/src/components/sections/demo/AnimatedChatDemo.tsx
+++ b/src/components/sections/demo/AnimatedChatDemo.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { MessageCircle, CheckCircle2, Loader, Sparkles } from "lucide-react";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+const appIdeas = [
+  "Weather forecast app with beautiful UI",  "Habit tracking app with reminders",  "Expense manager with analytics",  "Meditation guide with daily lessons",  "Recipe collection app with ratings"
+];
+
+const processStages = [
+  { label: "Design", icon: "🎨" },
+  { label: "Planning", icon: "📋" },
+  { label: "Coding", icon: "💻" }
+];
+
+const AnimatedChatDemo: React.FC = () => {
+  const [currentIdea, setCurrentIdea] = useState(0);
+  const [animationPhase, setAnimationPhase] = useState(0);
+  const [showProcessFlow, setShowProcessFlow] = useState(false);
+  const [showFinishedApp, setShowFinishedApp] = useState(false);
+
+  useEffect(() => {
+    // Auto-cycle through app ideas
+    const ideaCycle = setInterval(() => {
+      setCurrentIdea((prev) => (prev + 1) % appIdeas.length);
+    }, 4000);
+
+    return () => clearInterval(ideaCycle);
+  }, []);
+
+  useEffect(() => {
+    // Animate through phases
+    const phaseTimeline = gsap.timeline({ repeat: -1, repeatDelay: 1 });
+
+    phaseTimeline
+      .to({}, { duration: 2 }, 0)
+      .to({}, { onComplete: () => setAnimationPhase(1) }, 2)
+      .to({}, { duration: 1 }, 2)
+      .to({}, { onComplete: () => setShowProcessFlow(true) }, 3)
+      .to({}, { duration: 2 }, 3)
+      .to({}, { onComplete: () => setShowFinishedApp(true) }, 5)
+      .to({}, { duration: 3 }, 5);
+
+    return () => phaseTimeline.kill();
+  }, []);
+
+  return (
+    <section className="py-16 md:py-24 relative overflow-hidden">
+      <div className="w-full max-w-7xl mx-auto px-4 md:px-6">
+        <div className="text-center mb-12 md:mb-16">
+          <div className="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-primary-cta/10">
+            <Sparkles className="w-4 h-4 text-primary-cta" />
+            <span className="text-sm font-medium text-primary-cta">AI-Powered Magic</span>
+          </div>
+          <h2 className="text-3xl md:text-5xl font-bold mb-4">See It In Action</h2>
+          <p className="text-lg text-foreground/70 max-w-2xl mx-auto">
+            Watch how Native Line transforms your app ideas into production-ready code in real-time
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center">
+          {/* Chat Box - Left Side */}
+          <div className="flex flex-col h-96 md:h-[500px] bg-card rounded-2xl border border-accent/20 overflow-hidden shadow-lg">
+            {/* Chat Header */}
+            <div className="bg-gradient-to-r from-primary-cta to-primary-cta/80 px-4 md:px-6 py-3 md:py-4 flex items-center gap-2">
+              <MessageCircle className="w-5 h-5 text-primary-cta-text" />
+              <span className="text-primary-cta-text font-semibold">Native Line Assistant</span>
+            </div>
+
+            {/* Chat Messages */}
+            <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-4 flex flex-col justify-end">
+              {/* Initial Message */}
+              <div className="flex justify-start">
+                <div className="bg-background/80 px-4 py-2 rounded-lg max-w-xs md:max-w-sm text-sm md:text-base">
+                  <p className="text-foreground">What app would you like to build today?</p>
+                </div>
+              </div>
+
+              {/* Auto-filling User Input */}
+              <div className="flex justify-end gap-2 items-end">
+                <div className="bg-primary-cta text-primary-cta-text px-4 py-2 rounded-lg max-w-xs md:max-w-sm text-sm md:text-base">
+                  <p className="min-h-6">
+                    {appIdeas[currentIdea].split("").map((char, i) => (
+                      <span
+                        key={i}
+                        className={`inline-block transition-opacity duration-100 ${
+                          i < appIdeas[currentIdea].length * (animationPhase / 3)
+                            ? "opacity-100"
+                            : "opacity-0"
+                        }`}
+                      >
+                        {char}
+                      </span>
+                    ))}
+                  </p>
+                </div>
+                {animationPhase >= 1 && (
+                  <div className="animate-pulse">
+                    <CheckCircle2 className="w-5 h-5 text-green-500" />
+                  </div>
+                )}
+              </div>
+
+              {/* Response Message with Loading */}
+              {animationPhase >= 1 && (
+                <div className="flex justify-start gap-2 items-end">
+                  {animationPhase < 2 ? (
+                    <div className="flex gap-2">
+                      <Loader className="w-5 h-5 text-primary-cta animate-spin" />
+                      <span className="text-sm text-foreground/60">Generating your app...</span>
+                    </div>
+                  ) : (
+                    <div className="bg-background/80 px-4 py-2 rounded-lg text-sm text-foreground/80">
+                      ✨ App generation complete! Processing stages...
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Process Flow & Finished App - Right Side */}
+          <div className="flex flex-col gap-6">
+            {/* Process Flow */}
+            {showProcessFlow && (
+              <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-700">
+                <h3 className="text-lg font-semibold text-foreground">Processing Stages</h3>
+                <div className="space-y-3">
+                  {processStages.map((stage, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center gap-3 p-3 bg-background/40 rounded-lg border border-accent/20 animate-in fade-in slide-in-from-left-4"
+                      style={{
+                        animationDelay: `${index * 0.2}s`,
+                        animationFillMode: "both"
+                      }}
+                    >
+                      <div className="text-2xl">{stage.icon}</div>
+                      <span className="font-medium text-foreground text-sm md:text-base">{stage.label}</span>
+                      {index <= 2 && (
+                        <div className="ml-auto">
+                          <CheckCircle2 className="w-5 h-5 text-green-500" />
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Finished App Preview */}
+            {showFinishedApp && (
+              <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-700">
+                <h3 className="text-lg font-semibold text-foreground">Your App is Ready!</h3>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="aspect-square bg-gradient-to-br from-primary-cta/20 to-accent/20 rounded-lg border border-accent/30 p-4 flex flex-col items-center justify-center text-center">
+                    <div className="text-3xl mb-2">📱</div>
+                    <span className="text-xs font-medium text-foreground">iOS App</span>
+                  </div>
+                  <div className="aspect-square bg-gradient-to-br from-accent/20 to-primary-cta/20 rounded-lg border border-accent/30 p-4 flex flex-col items-center justify-center text-center">
+                    <div className="text-3xl mb-2">🖥️</div>
+                    <span className="text-xs font-medium text-foreground">macOS App</span>
+                  </div>
+                </div>
+                <div className="bg-background/60 rounded-lg border border-accent/30 p-4">
+                  <p className="text-sm text-foreground/80">
+                    <span className="font-semibold text-primary-cta">100% Native Swift</span> • Ready to deploy • Full source code included
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AnimatedChatDemo;