Merge version_3 into main

Merge version_3 into main

src/app/chat/page.tsx

@@ -0,0 +1,91 @@
+"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";
+import { Send, User, MessageSquare, Phone } from "lucide-react";
+
+export default function ChatPage() {
+  const [message, setMessage] = useState("");
+
+  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>
+
+        <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 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" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,31 @@
+"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>
+      <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"
+        />
+      </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>
+      <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"
@@ -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,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 RegisterPage() {
+  return (
+    <ThemeProvider>
+      <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"
+        />
+      </main>
+    </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>
+  );
+}