Update src/app/styles/variables.css

Merge version_1 into main

src/app/live-queue/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function LiveQueuePage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Live Queue", id: "/live-queue" },
+    { name: "Services", id: "#services" },
+    { name: "Gallery", id: "#gallery" },
+    { name: "Reviews", id: "#social-proof" },
+    { name: "Contact", id: "#contact" },
+    { name: "Book Queue", id: "/book-queue" },
+    { name: "Why Choose Us", id: "#why-choose-us" },
+    { name: "Process", id: "#process" },
+    { name: "About", id: "#about" },
+    { name: "FAQ", id: "#faq" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="noise"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="UNCLE ALI BARBERSHOP"
+          logoSrc="http://img.b2bpic.net/free-photo/barbershop-logo-template-with-crossed-razors_23-2148496472.jpg"
+          logoAlt="Uncle Ali Barbershop Logo"
+          navItems={navItems}
+          button={{
+            text: "Book Your Cut", href: "/book-queue"
+          }}
+        />
+      </div>
+      <main className="relative z-10 py-20 px-4">
+        <div className="container mx-auto text-center">
+          <h1 className="text-4xl font-extrabold mb-4">Live Queue Status</h1>
+          <p className="text-lg text-gray-700">Check the current wait times and queue status here.</p>
+          <p className="mt-8 text-gray-500">Content for Live Queue will be added soon.</p>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -13,6 +13,7 @@ import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { CheckCircle, DollarSign, Star, Users } from "lucide-react";
+import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
 
 export default function LandingPage() {
   return (
@@ -180,6 +181,8 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           ariaLabel="Before and After Gallery"
+          imageClassName="w-full h-full object-cover aspect-[4/3]"
+          uniformGridCustomHeightClasses="min-h-[22rem] md:min-h-[28rem] lg:min-h-[35rem]"
         />
       </div>
 
@@ -287,6 +290,15 @@ export default function LandingPage() {
           ariaLabel="Site footer"
         />
       </div>
+
+      <div className="fixed bottom-4 right-4 z-50 md:hidden">
+        <ButtonBounceEffect
+          text="Get Queue Number"
+          href="#contact"
+          bgClassName="bg-gradient-to-br from-yellow-400 to-amber-500 text-white shadow-lg font-semibold"
+          className="px-6 py-3 text-lg rounded-full"
+        />
+      </div>
     </ThemeProvider>
   );
 }

src/app/styles/base.css

@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-libre-baskerville), serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #F8F8F8;
-  --card: #F8F8F8;
-  --foreground: #1B1B1B;
-  --primary-cta: #D4AF37;
-  --primary-cta-text: #0F0F0F;
-  --secondary-cta: #1B1B1B;
-  --secondary-cta-text: #F8F8F8;
-  --accent: #1B1B1B;
-  --background-accent: #0F0F0F;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);