Update src/app/page.tsx

Merge version_1 into main

src/app/layout.tsx

@@ -1420,4 +1420,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -10,9 +10,27 @@ import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCa
 import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { Award, CheckCircle, Github, HelpCircle, Linkedin, MessageCircle, Shield, Sparkles, Star, TrendingUp, Twitter, Users, Zap } from "lucide-react";
+import FeatureBento from "@/components/sections/feature/FeatureBento";
+import { Award, CheckCircle, Github, HelpCircle, Linkedin, MessageCircle, Shield, Sparkles, Star, TrendingUp, Twitter, Users, Zap, Lock, AlertCircle, Settings, Brain } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [chatMessages, setChatMessages] = useState<Array<{ type: 'user' | 'ai', text: string }>>([]);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSendMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (inputValue.trim()) {
+      setChatMessages([...chatMessages, { type: 'user', text: inputValue }]);
+      setInputValue('');
+      
+      // Simulate AI response
+      setTimeout(() => {
+        setChatMessages(prev => [...prev, { type: 'ai', text: 'Thank you for your message. I\'m here to help! How can I assist you further?' }]);
+      }, 500);
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -99,6 +117,40 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="chat-demo" data-section="chat-demo">
+        <FeatureBento
+          title="Try Interactive Chat"
+          description="Experience our AI chatbot in action with real-time conversation"
+          tag="Live Demo"
+          tagIcon={Brain}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          carouselMode="buttons"
+          features={[
+            {
+              title: "Interactive Chat",              description: "Start a conversation with our AI chatbot",              bentoComponent: 'chat',
+              aiIcon: Brain,
+              userIcon: Users,
+              exchanges: [
+                {
+                  userMessage: "Hello, can you help me with my order?",                  aiResponse: "Of course! I'd be happy to help. Could you please provide your order number?"
+                },
+                {
+                  userMessage: "It's ORD-2024-12345",                  aiResponse: "Thank you! I found your order. It was shipped yesterday and should arrive in 2-3 business days."
+                },
+                {
+                  userMessage: "Great! Can I track it?",                  aiResponse: "Absolutely! You'll receive tracking updates via email. You can also track it anytime in your account dashboard."
+                }
+              ],
+              placeholder: "Type your message..."
+            }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
       <div id="capabilities" data-section="capabilities">
         <MetricCardThree
           title="By The Numbers"
@@ -234,4 +286,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}