Update src/app/styles/variables.css

Merge version_5 into main

src/app/admin/page.tsx

@@ -6,65 +6,61 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { useState } from 'react';
 
-export default function AdminDashboardPage() {
-  const [appointments, setAppointments] = useState([
-    { id: "1", client: "John Doe", service: "Precision Fade", time: "10:00 AM", status: "Confirmed" },
-    { id: "2", client: "Mike Smith", service: "Hot Towel Shave", time: "11:30 AM", status: "Confirmed" },
-  ]);
-
-  const handleCancel = (id: string) => {
-    setAppointments(appointments.filter(app => app.id !== id));
-  };
-
+export default function AdminDashboard() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="background-highlight"
-      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="floatingGradient"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="normal"
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="smallMedium"
+        sizing="large"
+        background="floatingGradient"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[{ name: "Home", id: "/" }, { name: "Admin", id: "/admin" }]}
-          brandName="Elite Grooming"
-        />
-        <main className="pt-32 pb-20 px-6 max-w-5xl mx-auto min-h-screen">
-          <h1 className="text-4xl font-bold mb-8">Appointment Management</h1>
-          <div className="bg-card p-6 rounded-lg border shadow-sm">
-            <table className="w-full text-left">
-              <thead>
-                <tr className="border-b">
-                  <th className="pb-4">Client</th>
-                  <th className="pb-4">Service</th>
-                  <th className="pb-4">Time</th>
-                  <th className="pb-4">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {appointments.map((app) => (
-                  <tr key={app.id} className="border-b last:border-0">
-                    <td className="py-4">{app.client}</td>
-                    <td className="py-4">{app.service}</td>
-                    <td className="py-4">{app.time}</td>
-                    <td className="py-4">
-                      <button onClick={() => handleCancel(app.id)} className="text-red-500 hover:underline">Cancel</button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Admin", id: "/admin" }
+              ]}
+              brandName="Elite Grooming"
+            />
+        </div>
+
+        <main className="container mx-auto px-4 py-24 min-h-screen">
+          <h1 className="text-4xl font-bold mb-8">Admin Dashboard</h1>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="p-6 border rounded-lg shadow-sm">
+                <h2 className="text-xl font-semibold">Scheduling</h2>
+                <p>Manage operating hours.</p>
+            </div>
+            <div className="p-6 border rounded-lg shadow-sm">
+                <h2 className="text-xl font-semibold">Calendar View</h2>
+                <p>View upcoming bookings.</p>
+            </div>
+            <div className="p-6 border rounded-lg shadow-sm">
+                <h2 className="text-xl font-semibold">Appointments</h2>
+                <p>Active booking requests.</p>
+            </div>
+            <div className="p-6 border rounded-lg shadow-sm">
+                <h2 className="text-xl font-semibold">Settings</h2>
+                <p>Booking administration.</p>
+            </div>
           </div>
         </main>
-        <FooterBase
-          logoText="Elite Grooming"
-          columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }] }]}
-        />
+
+        <div id="footer" data-section="footer">
+            <FooterBase
+              logoText="Elite Grooming"
+              columns={[
+                { title: "Navigation", items: [{ label: "Home", href: "/" }] }
+              ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -11,11 +11,11 @@
   --background-accent: #ffffff; */
 
   --background: #000000;
-  --card: #121212;
-  --foreground: #ffffff;
+  --card: #1A1A1A;
+  --foreground: #FFFFFF;
   --primary-cta: #FFD700;
   --primary-cta-text: #000000;
-  --secondary-cta: #1A1A1A;
+  --secondary-cta: #262626;
   --secondary-cta-text: #FFFFFF;
   --accent: #B8860B;
   --background-accent: #262626;