Merge version_4 into main

Merge version_4 into main

src/app/admin/dashboard/page.tsx

@@ -3,72 +3,55 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import { useState } from 'react';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function AdminDashboardPage() {
-  const [orders, setOrders] = useState([
-    { id: '1', product: 'Berber Rug', customer: 'Amira M.', city: 'Casablanca', status: 'pending' },
-    { id: '2', product: 'Ceramic Tagine', customer: 'Youssef K.', city: 'Marrakech', status: 'confirmed' },
-    { id: '3', product: 'Brass Lantern', customer: 'Sarah D.', city: 'Rabat', status: 'delivered' },
-  ]);
-
-  const updateStatus = (id: string, newStatus: string) => {
-    setOrders(orders.map(o => o.id === id ? { ...o, status: newStatus } : o));
-  };
-
   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"
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumLargeSizeLargeTitles"
+        background="floatingGradient"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
-        <NavbarStyleApple 
-          navItems={[{ name: "Home", id: "/" }, { name: "Dashboard", id: "/admin/dashboard" }]} 
-          brandName="RoseSouk Admin" 
-        />
-        <main className="pt-32 pb-20 px-8 container mx-auto">
-          <h1 className="text-4xl font-bold mb-8">Order Management</h1>
-          <div className="overflow-x-auto">
-            <table className="w-full text-left border-collapse">
-              <thead>
-                <tr className="border-b">
-                  <th className="p-4">Product</th>
-                  <th className="p-4">Customer</th>
-                  <th className="p-4">City</th>
-                  <th className="p-4">Status</th>
-                </tr>
-              </thead>
-              <tbody>
-                {orders.map(order => (
-                  <tr key={order.id} className="border-b">
-                    <td className="p-4">{order.product}</td>
-                    <td className="p-4">{order.customer}</td>
-                    <td className="p-4">{order.city}</td>
-                    <td className="p-4">
-                      <select 
-                        value={order.status} 
-                        onChange={(e) => updateStatus(order.id, e.target.value)}
-                        className="p-2 border rounded bg-transparent"
-                      >
-                        <option value="pending">Pending</option>
-                        <option value="confirmed">Confirmed</option>
-                        <option value="delivered">Delivered</option>
-                      </select>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </main>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+                navItems={[
+                  { name: "Home", id: "/" },
+                  { name: "Dashboard", id: "/admin/dashboard" }
+                ]}
+                brandName="RoseSouk Admin"
+            />
+        </div>
+        <div className="min-h-[60vh] flex flex-col items-center justify-center p-12">
+          <h1 className="text-4xl font-bold mb-6">Admin Dashboard</h1>
+          <p className="text-lg text-muted-foreground">Welcome to the site-wide management console.</p>
+        </div>
+        <div id="contact" data-section="contact">
+            <ContactCTA
+                useInvertedBackground={false}
+                background={{ variant: "plain" }}
+                tag="Support"
+                title="Need Help?"
+                description="Contact the development team for any technical issues regarding the admin interface."
+                buttons={[{ text: "System Support", href: "#" }]}
+            />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Navigation", items: [{ label: "Home", href: "/" }] }
+            ]}
+            logoText="RoseSouk"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/notifications/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { useState } from "react";
+
+export default function NotificationsPage() {
+  const [notifications] = useState([
+    { id: "n1", title: "Order Status Update", message: "Your artisan rug is now in production.", time: "2 hours ago" },
+    { id: "n2", title: "Shipping Alert", message: "Your ceramic tagine has been dispatched.", time: "1 day ago" }
+  ]);
+
+  return (
+    <ThemeProvider 
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/#products" },
+            { name: "About", id: "/#about" },
+            { name: "Contact", id: "/#contact" },
+            { name: "Admin", id: "/admin/dashboard" },
+            { name: "Notifications", id: "/notifications" },
+          ]} 
+          brandName="RoseSouk"
+        />
+      </div>
+      <main className="container mx-auto py-20 min-h-screen">
+        <h1 className="text-4xl font-bold mb-8">Status Change Alerts</h1>
+        <div className="space-y-4">
+          {notifications.map((n) => (
+            <div key={n.id} className="p-6 rounded-xl border border-border/40 shadow-sm">
+              <h2 className="font-semibold text-lg">{n.title}</h2>
+              <p className="text-muted-foreground">{n.message}</p>
+              <span className="text-xs text-muted-foreground/60">{n.time}</span>
+            </div>
+          ))}
+        </div>
+      </main>
+      <FooterBase 
+        columns={[
+            { title: "Navigation", items: [{ label: "Home", href: "/" }] },
+            { title: "Support", items: [{ label: "Notifications", href: "/notifications" }] }
+        ]}
+        logoText="RoseSouk" 
+      />
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -34,6 +34,7 @@ export default function LandingPage() {
         { name: "About", id: "about" },
         { name: "Contact", id: "contact" },
         { name: "Admin", id: "/admin/dashboard" },
+        { name: "Notifications", id: "/notifications" },
       ]}
       brandName="RoseSouk"
     />
@@ -63,12 +64,12 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       products={[
-        { id: "p1", brand: "Souk", name: "Berber Rug", price: "$150", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/luxury-vintage-broadcast-radio-receiver-flowers_23-2148695306.jpg" },
-        { id: "p2", brand: "Souk", name: "Ceramic Tagine", price: "$45", rating: 4, reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-photo/view-essentials-pottery-studio_23-2150164937.jpg" },
-        { id: "p3", brand: "Souk", name: "Brass Lantern", price: "$85", rating: 5, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/old-metal-lamp-candlestick-hangs-flea-market_169016-10818.jpg" },
-        { id: "p4", brand: "Souk", name: "Leather Babouche", price: "$30", rating: 4, reviewCount: "31", imageSrc: "http://img.b2bpic.net/free-photo/concentrated-shoemaker-workshop-making-shoes_171337-12254.jpg" },
-        { id: "p5", brand: "Souk", name: "Organic Argan Oil", price: "$25", rating: 5, reviewCount: "55", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292038.jpg" },
-        { id: "p6", brand: "Souk", name: "Raffia Tote", price: "$40", rating: 4, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetics-bag-still-life_23-2151141477.jpg" },
+        { id: "p1", brand: "Souk | Marrakesh, Morocco", name: "Berber Rug", price: "$150", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/luxury-vintage-broadcast-radio-receiver-flowers_23-2148695306.jpg" },
+        { id: "p2", brand: "Souk | Fez, Morocco", name: "Ceramic Tagine", price: "$45", rating: 4, reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-photo/view-essentials-pottery-studio_23-2150164937.jpg" },
+        { id: "p3", brand: "Souk | Casablanca, Morocco", name: "Brass Lantern", price: "$85", rating: 5, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/old-metal-lamp-candlestick-hangs-flea-market_169016-10818.jpg" },
+        { id: "p4", brand: "Souk | Marrakesh, Morocco", name: "Leather Babouche", price: "$30", rating: 4, reviewCount: "31", imageSrc: "http://img.b2bpic.net/free-photo/concentrated-shoemaker-workshop-making-shoes_171337-12254.jpg" },
+        { id: "p5", brand: "Souk | Agadir, Morocco", name: "Organic Argan Oil", price: "$25", rating: 5, reviewCount: "55", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-still-life-with-herbal-medicine_23-2149292038.jpg" },
+        { id: "p6", brand: "Souk | Essaouira, Morocco", name: "Raffia Tote", price: "$40", rating: 4, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/mediterranean-aesthetics-bag-still-life_23-2151141477.jpg" },
       ]}
       title="Marketplace"
       description="Our handpicked collection of traditional crafts."

src/app/track-order/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function TrackOrderPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumLargeSizeLargeTitles"
+        background="floatingGradient"
+        cardStyle="layered-gradient"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <NavbarStyleApple
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Products", id: "/#products" },
+          { name: "Order Tracking", id: "/track-order" },
+          { name: "About", id: "/#about" },
+          { name: "Contact", id: "/#contact" },
+          { name: "Admin", id: "/admin/dashboard" },
+        ]}
+        brandName="RoseSouk"
+      />
+      
+      <main className="min-h-screen pt-32 pb-20 px-6">
+        <div className="max-w-3xl mx-auto space-y-8">
+          <h1 className="text-4xl font-bold">Track Your Order</h1>
+          <div className="bg-white/50 p-8 rounded-xl shadow-sm border border-black/10">
+            <p className="mb-6">Enter your order number to see the current status of your shipment.</p>
+            <div className="flex gap-4">
+              <input 
+                type="text" 
+                placeholder="Order Number (e.g. RS-12345)" 
+                className="flex-grow p-3 rounded border border-gray-300"
+              />
+              <button className="px-6 py-3 bg-black text-white rounded font-medium hover:bg-black/80">
+                Track
+              </button>
+            </div>
+          </div>
+
+          <div className="mt-12">
+            <h2 className="text-2xl font-semibold mb-6">Timeline</h2>
+            <div className="space-y-4">
+              {['Order Placed', 'Processing', 'In Transit', 'Out for Delivery', 'Delivered'].map((step, idx) => (
+                <div key={step} className="flex items-center gap-4 p-4 border-b">
+                  <div className="w-8 h-8 rounded-full bg-black/10 flex items-center justify-center font-bold text-sm">
+                    {idx + 1}
+                  </div>
+                  <span className="font-medium">{step}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <FooterBase
+        columns={[
+          {
+            title: "Navigation",            items: [
+              { label: "Home", href: "/" },
+              { label: "Products", href: "/#products" },
+              { label: "Order Tracking", href: "/track-order" },
+              { label: "About", href: "/#about" },
+            ],
+          },
+          {
+            title: "Support",            items: [
+              { label: "FAQ", href: "/#faq" },
+              { label: "WhatsApp", href: "https://wa.me/1234567890" },
+            ],
+          },
+        ]}
+        logoText="RoseSouk"
+      />
+    </ThemeProvider>
+  );
+}