src/app/admin/page.tsx

@@ -6,9 +6,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { useState } from 'react';
 
-export default function AdminDashboardPage() {
-  const [activeTab, setActiveTab] = useState('appointments');
-
+export default function AdminDashboard() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -24,36 +22,46 @@ export default function AdminDashboardPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarStyleFullscreen
-            navItems={[
-              { name: "Home", id: "/" },
-              { name: "Appointments", id: "appointments" },
-              { name: "Schedule", id: "schedule" },
-              { name: "Services", id: "services" },
-              { name: "Customers", id: "customers" }
-            ]}
-            brandName="Admin Panel"
-          />
+            <NavbarStyleFullscreen
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Admin", id: "/admin" }
+              ]}
+              brandName="Elite Grooming"
+            />
         </div>
 
-        <main className="pt-32 pb-20 px-6 min-h-screen container mx-auto">
-          <h1 className="text-4xl font-bold mb-8">Dashboard: {activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}</h1>
-          <div className="grid gap-8">
-            <div className="p-8 bg-card rounded-xl border border-border shadow-sm">
-              <p className="text-muted-foreground">Admin management tools for {activeTab} will be implemented here.</p>
+        <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>
 
         <div id="footer" data-section="footer">
-          <FooterBase
-            logoText="Elite Grooming"
-            columns={[
-              { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Dashboard", href: "/admin" }] }
-            ]}
-          />
+            <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;