Update src/app/chat/page.tsx

src/app/chat/page.tsx

@@ -3,13 +3,11 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { useState } from "react";
-import { Send, User, MessageSquare, Phone } from "lucide-react";
+import { MessageSquare, User } from "lucide-react";
 
 export default function ChatPage() {
-  const [message, setMessage] = useState("");
-
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
@@ -25,67 +23,48 @@ export default function ChatPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarStyleFullscreen
-            navItems={[
-              { name: "Home", id: "/" },
-              { name: "Restaurants", id: "/#restaurants" },
-              { name: "Chat", id: "/chat" },
-              { name: "Contact", id: "/#contact" },
-            ]}
-            brandName="FoodMarket"
-          />
+            <NavbarStyleFullscreen
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Restaurants", id: "/#restaurants" },
+                { name: "Chat", id: "/chat" },
+                { name: "Contact", id: "/#contact" },
+              ]}
+              brandName="FoodMarket"
+            />
         </div>
 
-        <main className="min-h-screen pt-32 pb-16 px-4 md:px-8">
-          <div className="max-w-4xl mx-auto bg-card p-6 rounded-3xl shadow-sm border">
-            <div className="flex items-center gap-4 mb-6 border-b pb-4">
-              <div className="p-3 bg-accent/10 rounded-full">
-                <User className="w-6 h-6 text-accent" />
-              </div>
-              <div>
-                <h1 className="text-xl font-bold">Customer Support</h1>
-                <p className="text-sm text-muted">Active now</p>
-              </div>
-            </div>
-
-            <div className="space-y-4 h-96 overflow-y-auto mb-6 pr-2">
-              <div className="flex justify-start">
-                <div className="bg-accent text-accent-foreground p-4 rounded-2xl rounded-bl-none max-w-[80%]">
-                  Hello! How can I help you with your order today?
-                </div>
-              </div>
-              <div className="flex justify-end">
-                <div className="bg-primary text-primary-foreground p-4 rounded-2xl rounded-br-none max-w-[80%]">
-                  Hi, I wanted to ask if I can add extra garlic to my pasta order?
-                </div>
-              </div>
-            </div>
-
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={message}
-                onChange={(e) => setMessage(e.target.value)}
-                placeholder="Type a message..."
-                className="flex-1 bg-background border rounded-full px-6 py-3 outline-none focus:ring-2 focus:ring-accent/20"
-              />
-              <button className="bg-accent text-accent-foreground p-3 rounded-full hover:opacity-90 transition">
-                <Send className="w-5 h-5" />
-              </button>
-            </div>
-          </div>
-        </main>
+        <div className="min-h-screen pt-32 pb-20 px-6">
+            <FeatureBento
+                animationType="slide-up"
+                textboxLayout="split"
+                useInvertedBackground={false}
+                title="Customer Support & Messaging"
+                description="Communicate with vendors in real-time, review message history, and manage your orders seamlessly."
+                features={[
+                    {
+                        title: "Live Chat Interface",                        description: "Direct communication channel with your current vendor for order customization.",                        bentoComponent: "chat",                        aiIcon: MessageSquare,
+                        userIcon: User,
+                        exchanges: [
+                            { userMessage: "Is my order ready?", aiResponse: "Hi there! Your order is being packed now." },
+                            { userMessage: "Can you add extra napkins?", aiResponse: "Of course, I've added a note to the packing team." }
+                        ],
+                        placeholder: "Type your message here..."
+                    }
+                ]}
+            />
+        </div>
 
         <div id="footer" data-section="footer">
-          <FooterBaseCard
-            logoText="FoodMarket"
-            columns={[
-              { title: "Marketplace", items: [{ label: "Restaurants", href: "/#restaurants" }, { label: "About Us", href: "#" }] },
-              { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Chat", href: "/chat" }] },
-            ]}
-          />
+            <FooterBaseCard
+                logoText="FoodMarket"
+                columns={[
+                    { title: "Marketplace", items: [{ label: "Home", href: "/" }, { label: "Restaurants", href: "/#restaurants" }] },
+                    { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Contact", href: "/#contact" }, { label: "Chat", href: "/chat" }] },
+                ]}
+            />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}