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>
   );
-}
+}

src/app/vendor-login/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import { useRouter } from "next/navigation";
+
+export default function VendorLoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const router = useRouter();
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Simulated authentication session
+    localStorage.setItem("vendor_authenticated", "true");
+    router.push("/dashboard");
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="floatingGradient"
+        cardStyle="inset"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <div className="min-h-screen flex flex-col">
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Restaurants", id: "/restaurants" },
+              { name: "Process", id: "/features" },
+              { name: "Vendor Login", id: "/vendor-login" },
+            ]}
+            brandName="FoodMarket"
+          />
+        </div>
+
+        <main className="flex-1 flex items-center justify-center p-8">
+          <div className="w-full max-w-md bg-card p-8 rounded-3xl border border-border">
+            <h1 className="text-3xl font-bold mb-6">Vendor Login</h1>
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div>
+                <label className="block text-sm mb-2">Email</label>
+                <input 
+                  type="email" 
+                  required
+                  className="w-full p-3 rounded-xl border bg-background"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+              <div>
+                <label className="block text-sm mb-2">Password</label>
+                <input 
+                  type="password" 
+                  required
+                  className="w-full p-3 rounded-xl border bg-background"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              <button type="submit" className="w-full p-3 rounded-xl bg-primary-cta text-foreground font-semibold">
+                Sign In
+              </button>
+            </form>
+          </div>
+        </main>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/vendor-menu/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { useState } from "react";
+
+export default function VendorMenuPage() {
+  const [items, setItems] = useState([
+    { id: "1", name: "Margherita Pizza", category: "Pizzas", price: "$12" },
+    { id: "2", name: "Cheeseburger", category: "Burgers", price: "$10" }
+  ]);
+
+  return (
+    <ThemeProvider>
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Vendor Menu", id: "/vendor-menu" },
+            ]}
+            brandName="FoodMarket"
+          />
+        </div>
+
+        <div className="min-h-screen pt-32 px-6 max-w-4xl mx-auto">
+          <h1 className="text-4xl font-bold mb-8">Menu Management</h1>
+          <div className="bg-card p-6 rounded-xl border border-border space-y-4">
+            {items.map((item) => (
+              <div key={item.id} className="flex justify-between items-center p-4 border-b border-border">
+                <div>
+                  <h3 className="font-semibold">{item.name}</h3>
+                  <p className="text-sm text-muted-foreground">{item.category} • {item.price}</p>
+                </div>
+                <div className="flex gap-2">
+                  <button className="text-sm text-primary">Edit</button>
+                  <button className="text-sm text-red-500">Delete</button>
+                </div>
+              </div>
+            ))}
+            <button className="mt-4 px-4 py-2 bg-primary text-white rounded-lg">+ Add New Item</button>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="FoodMarket"
+            columns={[
+              { title: "Marketplace", items: [{ label: "Home", href: "/" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/vendor-registration/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import { useState } from "react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function VendorRegistrationPage() {
+  const [formData, setFormData] = useState({ name: "", email: "", restaurantName: "" });
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="floatingGradient"
+        cardStyle="inset"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Restaurants", id: "/restaurants" },
+                { name: "Process", id: "/process" },
+                { name: "Contact", id: "/contact" },
+                { name: "Register", id: "/vendor-registration" },
+              ]}
+              brandName="FoodMarket"
+            />
+        </div>
+
+        <div id="contact" data-section="contact" className="py-20">
+            <ContactSplitForm
+              useInvertedBackground={false}
+              title="Register Your Restaurant"
+              description="Join our marketplace and start reaching thousands of hungry customers today. Fill out the form below to get started."
+              inputs={[
+                { name: "ownerName", type: "text", placeholder: "Full Name", required: true },
+                { name: "email", type: "email", placeholder: "Business Email", required: true },
+                { name: "restaurantName", type: "text", placeholder: "Restaurant Name", required: true },
+              ]}
+              onSubmit={(data) => console.log("Form Submitted:", data)}
+              imageSrc="http://img.b2bpic.net/free-photo/professional-chef-preparing-food-kitchen_23-2149727961.jpg"
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="FoodMarket"
+            columns={[
+              { title: "Marketplace", items: [{ label: "Home", href: "/" }, { label: "Restaurants", href: "/restaurants" }] },
+              { title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "Register", href: "/vendor-registration" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}