Merge version_4 into main

Merge version_4 into main

src/app/chat/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+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 { MessageSquare, User } from "lucide-react";
+
+export default function ChatPage() {
+  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: "Chat", id: "/chat" },
+                { name: "Contact", id: "/#contact" },
+              ]}
+              brandName="FoodMarket"
+            />
+        </div>
+
+        <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: "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/login/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function LoginPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleFullscreen
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Login", id: "/login" },
+          { name: "Register", id: "/register" },
+        ]}
+        brandName="FoodMarket"
+      />
+      <main className="min-h-screen flex items-center justify-center p-8">
+        <ContactSplitForm
+          title="Vendor Login"
+          description="Log in to manage your restaurant orders and settings."
+          inputs={[
+            { name: "email", type: "email", placeholder: "Email address", required: true },
+            { name: "password", type: "password", placeholder: "Password", required: true },
+          ]}
+          buttonText="Login"
+          useInvertedBackground={false}
+        />
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/manage-menu/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import { Plus, Trash2, Edit2, Check } from "lucide-react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function ManageMenuPage() {
+  const [menuItems, setMenuItems] = useState([
+    { id: "1", name: "Margherita Pizza", price: "15.00" },
+    { id: "2", name: "Classic Burger", price: "12.00" },
+  ]);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editPrice, setEditPrice] = useState("");
+
+  const addItem = () => {
+    const newItem = { id: Date.now().toString(), name: "New Item", price: "0.00" };
+    setMenuItems([...menuItems, newItem]);
+  };
+
+  const deleteItem = (id: string) => {
+    setMenuItems(menuItems.filter(item => item.id !== id));
+  };
+
+  const startEdit = (item: { id: string, name: string, price: string }) => {
+    setEditingId(item.id);
+    setEditName(item.name);
+    setEditPrice(item.price);
+  };
+
+  const saveEdit = (id: string) => {
+    setMenuItems(menuItems.map(item => item.id === id ? { ...item, name: editName, price: editPrice } : item));
+    setEditingId(null);
+  };
+
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleFullscreen
+        navItems={[{ name: "Home", id: "/" }, { name: "Menu Management", id: "/manage-menu" }]}
+        brandName="FoodMarket"
+      />
+      <main className="pt-32 pb-16 px-6 max-w-4xl mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold">Menu Management</h1>
+          <button onClick={addItem} className="flex items-center gap-2 bg-primary px-4 py-2 rounded-full text-white">
+            <Plus size={18} /> Add Item
+          </button>
+        </div>
+        <div className="space-y-4">
+          {menuItems.map(item => (
+            <div key={item.id} className="flex items-center gap-4 bg-card p-4 rounded-xl border">
+              {editingId === item.id ? (
+                <>
+                  <input value={editName} onChange={e => setEditName(e.target.value)} className="flex-1 p-2 border rounded" />
+                  <input value={editPrice} onChange={e => setEditPrice(e.target.value)} className="w-24 p-2 border rounded" />
+                  <button onClick={() => saveEdit(item.id)} className="p-2 text-green-500"><Check /></button>
+                </>
+              ) : (
+                <>
+                  <span className="flex-1 font-medium">{item.name}</span>
+                  <span className="font-bold">${item.price}</span>
+                  <button onClick={() => startEdit(item)} className="p-2 text-blue-500"><Edit2 size={18} /></button>
+                  <button onClick={() => deleteItem(item.id)} className="p-2 text-red-500"><Trash2 size={18} /></button>
+                </>
+              )}
+            </div>
+          ))}
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -37,6 +37,7 @@ export default function LandingPage() {
         { name: "Home", id: "hero" },
         { name: "Restaurants", id: "restaurants" },
         { name: "Process", id: "features" },
+        { name: "Chat", id: "/chat" },
         { name: "Contact", id: "contact" },
       ]}
       brandName="FoodMarket"
@@ -54,7 +55,7 @@ export default function LandingPage() {
         { imageSrc: "http://img.b2bpic.net/free-photo/top-view-dishes-with-soup-cherry-tomatoes_23-2148460204.jpg", imageAlt: "Hero Scene 2" },
         { imageSrc: "http://img.b2bpic.net/free-photo/delicious-food-table-view_23-2149139520.jpg", imageAlt: "Hero Scene 3" },
         { imageSrc: "http://img.b2bpic.net/free-photo/young-female-courier-with-delivery-coffee-food-package-yellow_179666-39039.jpg", imageAlt: "Hero Scene 4" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/woman-checking-her-delivery-groceries_23-2149950116.jpg", imageAlt: "Hero Scene 5" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ci5FZm27s19lpaZrOnJGcgcb5c/uploaded-1776859091811-t7zrnc1n.png", imageAlt: "Hero Scene 5" },
         { imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-courier-red-uniform-black-gloves-red-cap-holding-food-packages-boxes_140725-17862.jpg", imageAlt: "Hero Scene 6" },
       ]}
     />
@@ -191,11 +192,11 @@ export default function LandingPage() {
       logoText="FoodMarket"
       columns={[
         { title: "Marketplace", items: [{ label: "Restaurants", href: "#restaurants" }, { label: "About Us", href: "#" }, { label: "Careers", href: "#" }] },
-        { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Contact", href: "#contact" }, { label: "Privacy Policy", href: "#" }] },
+        { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Contact", href: "#contact" }, { label: "Chat", href: "/chat" }, { label: "Privacy Policy", href: "#" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/register/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+
+export default function RegisterPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleFullscreen
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Login", id: "/login" },
+          { name: "Register", id: "/register" },
+        ]}
+        brandName="FoodMarket"
+      />
+      <main className="min-h-screen flex items-center justify-center p-8">
+        <ContactSplitForm
+          title="Vendor Registration"
+          description="Sign up to start selling on FoodMarket."
+          inputs={[
+            { name: "restaurantName", type: "text", placeholder: "Restaurant Name", required: true },
+            { name: "email", type: "email", placeholder: "Email address", required: true },
+            { name: "password", type: "password", placeholder: "Password", required: true },
+          ]}
+          buttonText="Register"
+          useInvertedBackground={false}
+        />
+      </main>
+    </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,69 @@
+"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 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <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-orders/page.tsx

@@ -0,0 +1,79 @@
+"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 FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Check, X, Clock } from "lucide-react";
+
+export default function VendorOrdersPage() {
+  const [orders, setOrders] = useState([
+    { id: "1", customer: "Sarah J.", items: "Gourmet Pizza x1", status: "Pending" },
+    { id: "2", customer: "Michael R.", items: "Burger Barn Combo x2", status: "Pending" },
+  ]);
+
+  const handleAction = (id: string, action: "Accepted" | "Rejected") => {
+    setOrders(prev => prev.filter(o => o.id !== id));
+  };
+
+  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: "Orders", id: "/vendor-orders" },
+            ]}
+            brandName="FoodMarket"
+          />
+        </div>
+
+        <div className="min-h-screen py-24 px-6">
+          <h1 className="text-4xl font-bold mb-12 text-center">Incoming Orders</h1>
+          <div className="max-w-4xl mx-auto space-y-4">
+            {orders.length === 0 ? (
+              <p className="text-center text-muted">No pending orders.</p>
+            ) : (
+              orders.map(order => (
+                <div key={order.id} className="p-6 rounded-2xl border bg-card flex justify-between items-center">
+                  <div>
+                    <h3 className="font-semibold text-lg">{order.customer}</h3>
+                    <p className="text-sm text-muted">{order.items}</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <button onClick={() => handleAction(order.id, "Accepted")} className="p-2 rounded-full bg-green-500/10 text-green-500">
+                      <Check className="w-5 h-5" />
+                    </button>
+                    <button onClick={() => handleAction(order.id, "Rejected")} className="p-2 rounded-full bg-red-500/10 text-red-500">
+                      <X className="w-5 h-5" />
+                    </button>
+                  </div>
+                </div>
+              ))
+            )}
+          </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>
+  );
+}