From 60e5eaee78fd3cb7d4de7d9271dbc04dba1d295d Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 3 Mar 2026 19:20:52 +0000 Subject: [PATCH 1/2] Update src/app/page.tsx --- src/app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index b5d9d73..6ea2980 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -12,7 +12,7 @@ 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 AnimatedChatDemo from '@/components/sections/animated-chat-demo/AnimatedChatDemo'; +import AnimatedChatDemo from '@/components/sections/demo/AnimatedChatDemo'; export default function LandingPage() { const [isDarkMode, setIsDarkMode] = useState(false); -- 2.49.1 From d87ad0467b9d2df5f039c8a4ae17ecc2def8dc88 Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 3 Mar 2026 19:20:53 +0000 Subject: [PATCH 2/2] Update src/components/sections/demo/AnimatedChatDemo.tsx --- .../sections/demo/AnimatedChatDemo.tsx | 405 +++++++++++------- 1 file changed, 253 insertions(+), 152 deletions(-) diff --git a/src/components/sections/demo/AnimatedChatDemo.tsx b/src/components/sections/demo/AnimatedChatDemo.tsx index 36c9d73..508cdfd 100644 --- a/src/components/sections/demo/AnimatedChatDemo.tsx +++ b/src/components/sections/demo/AnimatedChatDemo.tsx @@ -1,183 +1,284 @@ "use client"; -import React, { useState, useEffect } from "react"; -import { MessageCircle, CheckCircle2, Loader, Sparkles } from "lucide-react"; +import React, { useState, useEffect, useRef } from "react"; +import { Send } from "lucide-react"; import gsap from "gsap"; -import ScrollTrigger from "gsap/ScrollTrigger"; -gsap.registerPlugin(ScrollTrigger); +interface ChatMessage { + id: string; + text: string; + isUser: boolean; + isComplete?: boolean; +} -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" +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" + } ]; -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); +export default function AnimatedChatDemo() { + const [stage, setStage] = useState<"chat" | "process" | "finished">("chat"); + const [currentIdeaIndex, setCurrentIdeaIndex] = useState(0); + const [messages, setMessages] = useState([]); + const [processSteps, setProcessSteps] = useState>([]); + const [finishedApp, setFinishedApp] = useState(null); + const [isAutoPlaying, setIsAutoPlaying] = useState(true); + const timelineRef = useRef(null); + // Stage 1: Chat simulation with auto-filling and sending useEffect(() => { - // Auto-cycle through app ideas - const ideaCycle = setInterval(() => { - setCurrentIdea((prev) => (prev + 1) % appIdeas.length); + 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 () => 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 () => clearTimeout(loopTimeout); + }, [stage, currentIdeaIndex, isAutoPlaying]); return ( -
-
-
-
- - AI-Powered Magic -
-

See It In Action

-

- Watch how Native Line transforms your app ideas into production-ready code in real-time +

+
+ {/* Section Header */} +
+

INTERACTIVE DEMO

+

See It In Action

+

+ Watch how Native Line transforms your ideas into complete apps in real-time

-
- {/* Chat Box - Left Side */} -
- {/* Chat Header */} -
- - Native Line Assistant -
- - {/* Chat Messages */} -
- {/* Initial Message */} -
-
-

What app would you like to build today?

-
-
- - {/* Auto-filling User Input */} -
-
-

- {appIdeas[currentIdea].split("").map((char, i) => ( - + {/* Chat Stage */} + {stage === "chat" && ( +

+
+
+ {messages.map((msg) => ( +
+
- {char} - - ))} -

-
- {animationPhase >= 1 && ( -
- -
- )} -
- - {/* Response Message with Loading */} - {animationPhase >= 1 && ( -
- {animationPhase < 2 ? ( -
- - Generating your app... -
- ) : ( -
- ✨ App generation complete! Processing stages... -
- )} -
- )} -
-
- - {/* Process Flow & Finished App - Right Side */} -
- {/* Process Flow */} - {showProcessFlow && ( -
-

Processing Stages

-
- {processStages.map((stage, index) => ( -
-
{stage.icon}
- {stage.label} - {index <= 2 && ( -
- -
- )} +

{msg.text}

+ {msg.isComplete && msg.isUser && ( +
+ +
+ )} +
))}
- )} +
+ )} - {/* Finished App Preview */} - {showFinishedApp && ( -
-

Your App is Ready!

-
-
-
📱
- iOS App + {/* Process Flow Stage */} + {stage === "process" && ( +
+
+ {processSteps.map((step, idx) => ( +
+
+ {step.name} +
+ {idx < processSteps.length - 1 && ( +
+ )}
-
-
🖥️
- macOS App + ))} +
+
+ )} + + {/* Finished App Stage */} + {stage === "finished" && finishedApp && ( +
+
+ {/* App Image - Right */} +
+
+
+
+
+

App Preview

-
-

- 100% Native Swift • Ready to deploy • Full source code included -

+ + {/* App Details - Left */} +
+
+

{finishedApp.title}

+

{finishedApp.description}

+
+
+

✓ Production-Ready Code

+

✓ Ready to Deploy

+

✓ Fully Yours to Modify

+
- )} -
+
+ )} +
+ + {/* Loop Indicator */} +
+ {appIdeas.map((idea, idx) => ( +
+ + {/* Auto-play Toggle */} +
+
-
+ ); -}; - -export default AnimatedChatDemo; +} -- 2.49.1