Update src/app/page.tsx

Merge version_6 into main

src/app/blog/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import BlogCardThree from '@/components/sections/blog/BlogCardThree';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; // Updated import
 
 const posts = [
   {
@@ -11,7 +11,7 @@ const posts = [
     category: 'Skincare',
     title: '5 Tips for a Glowing Complexion',
     excerpt: 'Discover our top secrets to achieving radiant, healthy-looking skin that glows from within.',
-    imageSrc: 'https://img.b2bpic.net/free-photo/minimal-assortment-beauty-products_23-2148961325.jpg',
+    imageSrc: 'https://img.b2bpic.net/free-photo/hand-holding-bottle-beauty-product_23-2148496466.jpg',
     authorName: 'Lee Coral',
     authorAvatar: 'https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg',
     date: 'Oct 20, 2023',
@@ -21,7 +21,7 @@ const posts = [
     category: 'Live Shows',
     title: 'What to Expect in Our Next Live Show',
     excerpt: 'Get a sneak peek into the exclusive bundles and new drops featured in our upcoming live event.',
-    imageSrc: 'https://img.b2bpic.net/free-photo/online-workshop-demontration-beauty-products_259150-60056.jpg?_wi=2',
+    imageSrc: 'https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=11',
     authorName: 'Ariel S.',
     authorAvatar: 'https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg',
     date: 'Oct 15, 2023',
@@ -31,9 +31,9 @@ const posts = [
     category: 'Cosmetics',
     title: 'The Ultimate Guide to Pro Cosmetics',
     excerpt: 'Learn how to use our professional cosmetic kits to create stunning looks for any occasion.',
-    imageSrc: 'https://img.b2bpic.net/free-photo/foundation-bottles-advertising-arrangement_23-2149511243.jpg?_wi=2',
+    imageSrc: 'https://img.b2bpic.net/free-photo/woman-holding-makeup-brush_23-2148496463.jpg',
     authorName: 'Glow Theory',
-    authorAvatar: 'https://img.b2bpic.net/free-photo/minimal-assortment-beauty-products_23-2148961325.jpg',
+    authorAvatar: 'https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg',
     date: 'Oct 10, 2023',
   }
 ];
@@ -42,16 +42,16 @@ export default function BlogPage() {
 
     return (
         <ThemeProvider
-            defaultButtonVariant="elastic-effect"
+            defaultButtonVariant="hover-magnetic"
             defaultTextAnimation="entrance-slide"
             borderRadius="rounded"
-            contentWidth="mediumLarge"
-            sizing="largeSmall"
-            background="noise"
-            cardStyle="gradient-mesh"
-            primaryButtonStyle="primary-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="medium"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="solid"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="bold"
         >
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingOverlay
@@ -59,8 +59,8 @@ export default function BlogPage() {
                     navItems={[
                         { name: "Home", id: "/" },
                         { name: "Live Shows", id: "/#live-shows" },
-                        { name: "Shop", id: "/shop" },
-                        { name: "Support", id: "/#contact-support" }
+                        { name: "Support", id: "/#contact-support" },
+                        { name: "Privacy", id: "/privacy" }
                     ]}
                     button={{ text: "Join Live", href: "/#live-shows" }}
                     className="py-4 px-6 md:px-8"
@@ -81,13 +81,22 @@ export default function BlogPage() {
             </div>
 
             <div id="footer" data-section="footer">
-                <FooterLogoReveal
-                    logoText="Glow Theory"
-                    leftLink={{ text: "Customer Support", href: "/#contact-support" }}
-                    rightLink={{ text: "Privacy Policy", href: "/privacy" }}
+                <FooterBaseReveal
+                    columns={[
+                        {
+                            title: "Support",                            items: [{ label: "Customer Support", href: "/#contact-support" }]
+                        },
+                        {
+                            title: "Company",                            items: [{ label: "Privacy Policy", href: "/privacy" }]
+                        },
+                        {
+                            title: "Resources",                            items: [{ label: "Home", href: "/" }]
+                        }
+                    ]}
+                    copyrightText={`© ${new Date().getFullYear()} Glow Theory`}
                     className="bg-[--background] text-[--foreground] py-6 px-4"
-                    linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
-                    logoClassName="text-2xl font-bold tracking-tight"
+                    columnTitleClassName="font-bold text-lg mb-2"
+                    columnItemClassName="text-md"
                 />
             </div>
         </ThemeProvider>

src/app/layout.tsx

@@ -1,24 +1,24 @@
 import type { Metadata } from "next";
-import { Plus_Jakarta_Sans } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
-const plusJakartaSans = Plus_Jakarta_Sans({
-  variable: "--font-plus-jakarta-sans",  subsets: ["latin"],
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
   title: "Glow Theory - Premium Beauty Wholesale Live Selling",  description: "Elevate your glow with Glow Theory, your Miami-based source for luxury beauty, skincare, fragrance, and cosmetic reseller bundles through live shows on Whatnot.",  openGraph: {
     title: "Glow Theory - Premium Beauty Wholesale Live Selling",    description: "Elevate your glow with Glow Theory, your Miami-based source for luxury beauty, skincare, fragrance, and cosmetic reseller bundles through live shows on Whatnot.",    url: "https://glowtheory.com",    siteName: "Glow Theory",    images: [
       {
-        url: "https://img.b2bpic.net/free-photo/minimal-assortment-beauty-products_23-2148961325.jpg",        alt: "Glow Theory beauty products with a soft pink glow"
+        url: "https://img.b2bpic.net/free-photo/hands-holding-face-cream_23-2149544901.jpg",        alt: "Glow Theory beauty products held in hands"
       }
     ],
     type: "website"
   },
   twitter: {
-    card: "summary_large_image",    title: "Glow Theory - Premium Beauty Wholesale Live Selling",    description: "Elevate your glow with Glow Theory, your Miami-based source for luxury beauty, skincare, fragrance, and cosmetic reseller bundles through live shows on Whatnot.",    images: ["https://img.b2bpic.net/free-photo/minimal-assortment-beauty-products_23-2148961325.jpg"]
+    card: "summary_large_image",    title: "Glow Theory - Premium Beauty Wholesale Live Selling",    description: "Elevate your glow with Glow Theory, your Miami-based source for luxury beauty, skincare, fragrance, and cosmetic reseller bundles through live shows on Whatnot.",    images: ["https://img.b2bpic.net/free-photo/hands-holding-face-cream_23-2149544901.jpg"]
   }
 };
 
@@ -31,7 +31,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${plusJakartaSans.variable} antialiased`}
+          className={`${inter.variable} antialiased`}
         >
           <Tag />
           {children}

src/app/page.tsx

@@ -2,28 +2,30 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
-import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { CalendarCheck, Mail, MessageSquare, Sparkles, Timer, Tv } from "lucide-react";
+import { CalendarCheck, Mail, MessageSquare, Quote, Timer, Tv } from "lucide-react";
+
+// New imports for replaced components
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import TextAbout from '@/components/sections/about/TextAbout';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="elastic-effect"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="mediumLarge"
-      sizing="largeSmall"
-      background="noise"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="radial-glow"
-      headingFontWeight="medium"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -31,8 +33,8 @@ export default function LandingPage() {
           navItems={[
             { name: "Home", id: "/" },
             { name: "Live Shows", id: "/#live-shows" },
-            { name: "Shop", id: "/shop" },
-            { name: "Support", id: "/#contact-support" }
+            { name: "Support", id: "/#contact-support" },
+            { name: "Privacy", id: "/privacy" }
           ]}
           button={{ text: "Join Live", href: "#live-shows" }}
           className="py-4 px-6 md:px-8"
@@ -42,16 +44,12 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardGallery
+        <HeroBillboard
           title="Glow Theory"
           description="Elevate Your Glow"
-          background={{ variant: "radial-gradient" }}
+          background={{ variant: "plain" }}
           buttons={[{ text: "Join Our Live Show", href: "https://www.whatnot.com/s/xeIJ5XNt" }]}
-          mediaItems={[
-            { imageSrc: "https://img.b2bpic.net/free-photo/minimal-assortment-beauty-products_23-2148961325.jpg?_wi=1", imageAlt: "Beauty products with a soft pink glow" },
-            { imageSrc: "https://img.b2bpic.net/free-photo/minimal-assortment-beauty-products_23-2148961325.jpg?_wi=2", imageAlt: "Beauty products with a soft pink glow" },
-            { imageSrc: "https://img.b2bpic.net/free-photo/minimal-assortment-beauty-products_23-2148961325.jpg?_wi=3", imageAlt: "Beauty products with a soft pink glow" }
-          ]}
+          imageSrc="https://img.b2bpic.net/free-photo/hands-holding-face-cream_23-2149544901.jpg?_wi=1"
           mediaAnimation="opacity"
           buttonAnimation="opacity"
           className="bg-[--background] text-[--foreground]"
@@ -64,37 +62,24 @@ export default function LandingPage() {
       </div>
 
       <div id="about" data-section="about">
-        <TestimonialAboutCard
+        <TextAbout
           tag="About Us"
-          title="Discover Glow Theory"
-          description="Glow Theory is your premier Miami-based destination for beauty wholesale live-selling. We specialize in curating exquisite reseller bundles featuring top-tier skincare, fragrance, and cosmetics, alongside daily product drops. Our mission is to empower beauty entrepreneurs with access to the most coveted products in the market."
-          subdescription="CEO: Lee Coral"
-          icon={Sparkles}
-          imageSrc="https://img.b2bpic.net/free-photo/beauty-products-arrangement-with-copy-space_23-2149021644.jpg"
-          imageAlt="Beauty products arrangement with copy space"
-          mediaAnimation="opacity"
+          title="Glow Theory is your premier Miami-based destination for beauty wholesale live-selling. We specialize in curating exquisite reseller bundles featuring top-tier skincare, fragrance, and cosmetics, alongside daily product drops. Our mission is to empower beauty entrepreneurs with access to the most coveted products in the market."
           useInvertedBackground={false}
-          className="bg-[--background] text-[--foreground]"
-          cardClassName="!bg-[--card] shadow-lg rounded-[--radius] p-8 md:p-12"
-          tagClassName="text-[--primary-cta] font-semibold"
+          className="bg-[--card] text-[--foreground]"
           titleClassName="text-3xl md:text-4xl lg:text-5xl font-thin tracking-wide"
-          descriptionClassName="text-md md:text-lg font-light mt-4"
-          subdescriptionClassName="text-sm md:text-md font-medium text-[--foreground] mt-2"
-          iconBoxClassName="!bg-[--primary-cta] text-[--primary-cta-text] rounded-full p-4 shadow-xl"
-          iconClassName="h-8 w-8"
-          mediaWrapperClassName="rounded-[--radius] overflow-hidden"
-          mediaClassName="object-cover h-full w-full"
+          buttons={[]} 
         />
       </div>
 
       <div id="live-shows" data-section="live-shows">
-        <FeatureBorderGlow
+        <FeatureCardTwentyFive
           title="Join Our Live Shows"
           description="Experience the thrill of live selling with daily product drops and exclusive reseller bundles on Whatnot. Don't miss out on the best deals and the latest beauty trends!"
           features={[
-            { icon: CalendarCheck, title: "Upcoming Shows", description: "Stay updated with our schedule and never miss a live event for the freshest drops." },
-            { icon: Tv, title: "Watch Us Live", description: "Tune in now to catch our current live broadcast and snag exclusive beauty bundles." },
-            { icon: Timer, title: "Countdown Timer", description: "See exactly when our next exciting live show is about to begin!" }
+            { icon: CalendarCheck, title: "Upcoming Shows", description: "Stay updated with our schedule and never miss a live event for the freshest drops.", mediaItems: [{ imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=1", imageAlt: "Upcoming Shows" }, { imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=2", imageAlt: "Upcoming Shows" }] },
+            { icon: Tv, title: "Watch Us Live", description: "Tune in now to catch our current live broadcast and snag exclusive beauty bundles.", mediaItems: [{ imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=3", imageAlt: "Watch Us Live" }, { imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=4", imageAlt: "Watch Us Live" }] },
+            { icon: Timer, title: "Countdown Timer", description: "See exactly when our next exciting live show is about to begin!", mediaItems: [{ imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=5", imageAlt: "Countdown Timer" }, { imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=6", imageAlt: "Countdown Timer" }] }
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -102,8 +87,8 @@ export default function LandingPage() {
           className="bg-[--background-accent] text-[--foreground]"
           textBoxTitleClassName="text-4xl md:text-5xl lg:text-6xl font-thin tracking-wide"
           textBoxDescriptionClassName="text-lg md:text-xl font-light max-w-2xl mx-auto"
-          cardClassName="rounded-[--radius] p-8 !bg-[--card] border border-[--accent] shadow-lg"
-          iconContainerClassName="!bg-[--primary-cta] !text-[--primary-cta-text] rounded-full p-4 shadow-md"
+          cardClassName="rounded-[--radius] !bg-[--card] border border-[--accent] shadow-lg"
+          cardIconWrapperClassName="!bg-[--primary-cta] text-[--primary-cta-text] rounded-full p-4 shadow-md"
           cardTitleClassName="text-xl md:text-2xl font-semibold mt-4"
           cardDescriptionClassName="text-md md:text-lg font-light text-balance"
         />
@@ -114,9 +99,9 @@ export default function LandingPage() {
           title="Featured Bundles"
           description="Discover our curated selection of reseller beauty bundles, perfect for elevating your inventory. Available exclusively on our live shows!"
           products={[
-            { id: "bundle-1", brand: "Glow Theory", name: "Skincare Essentials Bundle", price: "Live Show Price", rating: 5, reviewCount: "1.2K", imageSrc: "https://img.b2bpic.net/free-photo/still-life-cosmetics-with-pink-background_23-2148419330.jpg", imageAlt: "Still life cosmetics with pink background" },
-            { id: "bundle-2", brand: "Glow Theory", name: "Fragrance Discovery Set", price: "Live Show Price", rating: 5, reviewCount: "890", imageSrc: "https://img.b2bpic.net/free-photo/close-up-variety-cosmetic-products-desk-isolated_574295-5284.jpg", imageAlt: "Fragrance Discovery Set" },
-            { id: "bundle-3", brand: "Glow Theory", name: "Cosmetic Pro Kit", price: "Live Show Price", rating: 5, reviewCount: "2.5K", imageSrc: "https://img.b2bpic.net/free-photo/foundation-bottles-advertising-arrangement_23-2149511243.jpg?_wi=1", imageAlt: "Cosmetic Pro Kit" }
+            { id: "bundle-1", brand: "Glow Theory", name: "Skincare Essentials Bundle", price: "Live Show Price", rating: 5, reviewCount: "1.2K", imageSrc: "https://img.b2bpic.net/free-photo/woman-holding-face-cream_23-2148496464.jpg", imageAlt: "Hand holding face cream" },
+            { id: "bundle-2", brand: "Glow Theory", name: "Fragrance Discovery Set", price: "Live Show Price", rating: 5, reviewCount: "890", imageSrc: "https://img.b2bpic.net/free-photo/hand-showing-perfume-bottle_23-2148496465.jpg", imageAlt: "Hand showing perfume bottle" },
+            { id: "bundle-3", brand: "Glow Theory", name: "Cosmetic Pro Kit", price: "Live Show Price", rating: 5, reviewCount: "2.5K", imageSrc: "https://img.b2bpic.net/free-photo/woman-holding-foundation-bottle_23-2148496468.jpg", imageAlt: "Hand holding foundation bottle" }
           ]}
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
@@ -135,37 +120,38 @@ export default function LandingPage() {
       </div>
 
       <div id="reviews" data-section="reviews">
-        <TestimonialCardFifteen
-          testimonial="Glow Theory has completely transformed my reseller business! The bundles are always top-notch, and the live shows are so much fun and informative. Highly recommend joining the Glow Fam!"
-          rating={5}
-          author="Ariel S., Reseller Queen"
-          avatars={[
-            { src: "https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg", alt: "Generic Avatar 1" },
-            { src: "https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg", alt: "Generic Avatar 2" },
-            { src: "https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg", alt: "Generic Avatar 3" },
-            { src: "https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg", alt: "Generic Avatar 4" },
-            { src: "https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg", alt: "Generic Avatar 5" },
-            { src: "https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg", alt: "Generic Avatar 6" }
+        <TestimonialCardTwo
+          testimonials={[
+            {
+              id: "1",              name: "Ariel S.",              role: "Reseller Queen",              testimonial: "Glow Theory has completely transformed my reseller business! The bundles are always top-notch, and the live shows are so much fun and informative. Highly recommend joining the Glow Fam!",              icon: Quote
+            },
+            {
+              id: "2",              name: "Jessica P.",              role: "Beauty Entrepreneur",              testimonial: "The quality and variety of products in the Glow Theory bundles are unmatched. It has been a game-changer for my online store!",              icon: Quote
+            }
           ]}
-          ratingAnimation="slide-up"
-          avatarsAnimation="slide-up"
+          title="What Our Customers Say"
+          description="Hear from our happy resellers about their experience with Glow Theory."
+          animationType="slide-up"
+          textboxLayout="default"
           useInvertedBackground={false}
           className="bg-[--background-accent] text-[--foreground]"
-          testimonialClassName="text-3xl md:text-4xl lg:text-5xl font-light text-center leading-tight mb-8 max-w-4xl mx-auto"
-          starClassName="text-[--primary-cta]"
-          avatarGroupClassName="mt-8"
-          avatarClassName="ring-2 ring-[--card]"
-          containerClassName="max-w-7xl mx-auto py-16 md:py-24"
+          cardClassName="rounded-[--radius] !bg-[--card] border border-[--accent] shadow-lg p-8"
+          imageWrapperClassName="!bg-[--primary-cta] text-[--primary-cta-text] rounded-full p-4"
+          testimonialClassName="text-xl md:text-2xl font-light text-center leading-relaxed mb-4"
+          nameClassName="text-lg font-semibold"
+          roleClassName="text-md text-[--foreground] opacity-80"
+          textBoxTitleClassName="text-4xl md:text-5xl lg:text-6xl font-thin tracking-wide"
+          textBoxDescriptionClassName="text-lg md:text-xl font-light max-w-2xl mx-auto"
         />
       </div>
 
       <div id="contact-subscribe" data-section="contact-subscribe">
-        <FeatureBorderGlow
+        <FeatureCardTwentyFive
           title="Get Notified Before We Go Live!"
           description="Never miss a live show again! Join our Glow Fam community for exclusive alerts on upcoming bundles and daily drops."
           features={[
-            { icon: Mail, title: "Email Signup", description: "Receive email alerts directly to your inbox for new shows and products." },
-            { icon: MessageSquare, title: "SMS Signup", description: "Get instant text notifications when we go live with exciting new bundles." }
+            { icon: Mail, title: "Email Signup", description: "Receive email alerts directly to your inbox for new shows and products.", mediaItems: [{ imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=7", imageAlt: "Email Signup" }, { imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=8", imageAlt: "Email Signup" }] },
+            { icon: MessageSquare, title: "SMS Signup", description: "Get instant text notifications when we go live with exciting new bundles.", mediaItems: [{ imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=9", imageAlt: "SMS Signup" }, { imageSrc: "https://img.b2bpic.net/free-photo/hands-holding-various-cosmetics_23-2148496467.jpg?_wi=10", imageAlt: "SMS Signup" }] }
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -173,8 +159,8 @@ export default function LandingPage() {
           className="bg-[--background] text-[--foreground]"
           textBoxTitleClassName="text-4xl md:text-5xl lg:text-6xl font-thin tracking-wide"
           textBoxDescriptionClassName="text-lg md:text-xl font-light max-w-2xl mx-auto"
-          cardClassName="rounded-[--radius] p-8 !bg-[--card] border border-[--accent] shadow-lg"
-          iconContainerClassName="!bg-[--primary-cta] !text-[--primary-cta-text] rounded-full p-4 shadow-md"
+          cardClassName="rounded-[--radius] !bg-[--card] border border-[--accent] shadow-lg"
+          cardIconWrapperClassName="!bg-[--primary-cta] text-[--primary-cta-text] rounded-full p-4 shadow-md"
           cardTitleClassName="text-xl md:text-2xl font-semibold mt-4"
           cardDescriptionClassName="text-md md:text-lg font-light text-balance"
           buttons={[{ text: "Join The Glow Fam", href: "#contact-support" }]}
@@ -183,41 +169,45 @@ export default function LandingPage() {
       </div>
 
       <div id="contact-support" data-section="contact-support">
-        <ContactSplitForm
+        <ContactCenter
+          tag="Support"
           title="Customer Support"
-          description="Need help with your order, bundles, or live show purchases? Our support team is here to assist you.\n\nCall Us: 786-919-1243\nLocation: Miami, Florida"
-          inputs={[
-            { name: "fullName", type: "text", placeholder: "Full Name", required: true },
-            { name: "emailAddress", type: "email", placeholder: "Email Address", required: true },
-            { name: "orderNumber", type: "text", placeholder: "Order Number (Optional)", required: false }
-          ]}
-          textarea={{ name: "message", placeholder: "Type your message...", rows: 5, required: true }}
-          buttonText="Contact Support"
-          imageSrc="https://img.b2bpic.net/free-photo/simple-abstract-background-image_23-2149420836.jpg"
-          imageAlt="Abstract background image for contact section"
-          mediaAnimation="opacity"
-          mediaPosition="right"
+          description="Need help with your order, bundles, or live show purchases? Join our Glow Fam community or contact us directly. Call Us: 786-919-1243. Location: Miami, Florida."
+          background={{ variant: "plain" }}
+          inputPlaceholder="Enter your email"
+          buttonText="Sign Up for Alerts"
+          termsText="By signing up, you agree to receive promotional emails and SMS from Glow Theory. You can unsubscribe at any time."
+          onSubmit={(email) => console.log(`Subscribed with: ${email}`)}
           useInvertedBackground={false}
           className="bg-[--background-accent] text-[--foreground]"
-          formCardClassName="!bg-[--card] rounded-[--radius] shadow-lg p-8 md:p-12"
+          contentClassName="!bg-[--card] rounded-[--radius] shadow-lg p-8 md:p-12 max-w-2xl mx-auto"
+          tagClassName="text-[--primary-cta] font-semibold"
           titleClassName="text-4xl md:text-5xl lg:text-6xl font-thin tracking-wide"
           descriptionClassName="text-md md:text-lg font-light mt-4 mb-8 leading-relaxed"
           buttonClassName="min-w-[12rem] px-8 py-3 rounded-full shadow-lg !bg-[--primary-cta] !text-[--primary-cta-text] hover:!bg-[--primary-cta] hover:scale-105 transition-transform duration-300"
           buttonTextClassName="font-semibold"
-          mediaWrapperClassName="rounded-[--radius] overflow-hidden"
-          mediaClassName="object-cover h-full w-full"
-          contentClassName="grid-cols-1 md:grid-cols-2 gap-8 md:gap-12"
+          inputClassName="px-4 py-2 rounded-md border border-[--accent] focus:outline-none focus:ring-2 focus:ring-[--primary-cta] !bg-[--background]"
+          termsClassName="text-sm mt-4 opacity-75"
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterLogoReveal
-          logoText="Glow Theory"
-          leftLink={{ text: "Customer Support", href: "#contact-support" }}
-          rightLink={{ text: "Privacy Policy", href: "/privacy" }}
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Support",              items: [{ label: "Customer Support", href: "/#contact-support" }]
+            },
+            {
+              title: "Company",              items: [{ label: "Privacy Policy", href: "/privacy" }]
+            },
+            {
+              title: "Resources",              items: [{ label: "Home", href: "/" }]
+            }
+          ]}
+          copyrightText={`© ${new Date().getFullYear()} Glow Theory`}
           className="bg-[--background] text-[--foreground] py-6 px-4"
-          linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
-          logoClassName="text-2xl font-bold tracking-tight"
+          columnTitleClassName="font-bold text-lg mb-2"
+          columnItemClassName="text-md"
         />
       </div>
     </ThemeProvider>

src/app/privacy/page.tsx

@@ -3,21 +3,21 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import LegalSection from '@/components/legal/LegalSection';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; // Updated import
 
 export default function PrivacyPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="elastic-effect"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="mediumLarge"
-      sizing="largeSmall"
-      background="noise"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="radial-glow"
-      headingFontWeight="medium"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -25,8 +25,8 @@ export default function PrivacyPage() {
           navItems={[
             { name: "Home", id: "/" },
             { name: "Live Shows", id: "/#live-shows" },
-            { name: "Shop", id: "/shop" },
-            { name: "Support", id: "/#contact-support" }
+            { name: "Support", id: "/#contact-support" },
+            { name: "Privacy", id: "/privacy" }
           ]}
           button={{ text: "Join Live", href: "/#live-shows" }}
           className="py-4 px-6 md:px-8"
@@ -72,13 +72,22 @@ export default function PrivacyPage() {
       </div>
       
       <div id="footer" data-section="footer">
-        <FooterLogoReveal
-          logoText="Glow Theory"
-          leftLink={{ text: "Customer Support", href: "/#contact-support" }}
-          rightLink={{ text: "Home", href: "/" }}
+        <FooterBaseReveal
+          columns={[
+            {
+              title: "Support",              items: [{ label: "Customer Support", href: "/#contact-support" }]
+            },
+            {
+              title: "Company",              items: [{ label: "Privacy Policy", href: "/privacy" }]
+            },
+            {
+              title: "Resources",              items: [{ label: "Home", href: "/" }]
+            }
+          ]}
+          copyrightText={`© ${new Date().getFullYear()} Glow Theory`}
           className="bg-[--background] text-[--foreground] py-6 px-4"
-          linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
-          logoClassName="text-2xl font-bold tracking-tight"
+          columnTitleClassName="font-bold text-lg mb-2"
+          columnItemClassName="text-md"
         />
       </div>
     </ThemeProvider>

src/app/shop/[id]/page.tsx

@@ -4,12 +4,12 @@ import { Suspense, use, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductDetail } from "@/hooks/useProductDetail";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; // Updated import
 
 interface ProductPageProps {
     params: Promise<{ id: string }>;
@@ -76,16 +76,16 @@ function ProductPageContent({ params }: ProductPageProps) {
     if (isLoading) {
         return (
             <ThemeProvider
-                defaultButtonVariant="elastic-effect"
+                defaultButtonVariant="hover-magnetic"
                 defaultTextAnimation="entrance-slide"
                 borderRadius="rounded"
-                contentWidth="mediumLarge"
-                sizing="largeSmall"
-                background="noise"
-                cardStyle="gradient-mesh"
-                primaryButtonStyle="primary-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="medium"
+                contentWidth="medium"
+                sizing="medium"
+                background="none"
+                cardStyle="solid"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="glass"
+                headingFontWeight="bold"
             >
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
@@ -93,8 +93,8 @@ function ProductPageContent({ params }: ProductPageProps) {
                         navItems={[
                             { name: "Home", id: "/" },
                             { name: "Live Shows", id: "/#live-shows" },
-                            { name: "Shop", id: "/shop" },
-                            { name: "Support", id: "/#contact-support" }
+                            { name: "Support", id: "/#contact-support" },
+                            { name: "Privacy", id: "/privacy" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         className="py-4 px-6 md:px-8"
@@ -108,13 +108,22 @@ function ProductPageContent({ params }: ProductPageProps) {
                     </main>
                 </div>
                 <div id="footer" data-section="footer">
-                    <FooterLogoReveal
-                        logoText="Glow Theory"
-                        leftLink={{ text: "Customer Support", href: "/#contact-support" }}
-                        rightLink={{ text: "Privacy Policy", href: "/privacy" }}
+                    <FooterBaseReveal
+                        columns={[
+                            {
+                                title: "Support",                                items: [{ label: "Customer Support", href: "/#contact-support" }]
+                            },
+                            {
+                                title: "Company",                                items: [{ label: "Privacy Policy", href: "/privacy" }]
+                            },
+                            {
+                                title: "Resources",                                items: [{ label: "Home", href: "/" }]
+                            }
+                        ]}
+                        copyrightText={`© ${new Date().getFullYear()} Glow Theory`}
                         className="bg-[--background] text-[--foreground] py-6 px-4"
-                        linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
-                        logoClassName="text-2xl font-bold tracking-tight"
+                        columnTitleClassName="font-bold text-lg mb-2"
+                        columnItemClassName="text-md"
                     />
                 </div>
             </ThemeProvider>
@@ -124,16 +133,16 @@ function ProductPageContent({ params }: ProductPageProps) {
     if (!product) {
         return (
             <ThemeProvider
-                defaultButtonVariant="elastic-effect"
+                defaultButtonVariant="hover-magnetic"
                 defaultTextAnimation="entrance-slide"
                 borderRadius="rounded"
-                contentWidth="mediumLarge"
-                sizing="largeSmall"
-                background="noise"
-                cardStyle="gradient-mesh"
-                primaryButtonStyle="primary-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="medium"
+                contentWidth="medium"
+                sizing="medium"
+                background="none"
+                cardStyle="solid"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="glass"
+                headingFontWeight="bold"
             >
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
@@ -141,8 +150,8 @@ function ProductPageContent({ params }: ProductPageProps) {
                         navItems={[
                             { name: "Home", id: "/" },
                             { name: "Live Shows", id: "/#live-shows" },
-                            { name: "Shop", id: "/shop" },
-                            { name: "Support", id: "/#contact-support" }
+                            { name: "Support", id: "/#contact-support" },
+                            { name: "Privacy", id: "/privacy" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         className="py-4 px-6 md:px-8"
@@ -164,13 +173,22 @@ function ProductPageContent({ params }: ProductPageProps) {
                     </main>
                 </div>
                 <div id="footer" data-section="footer">
-                    <FooterLogoReveal
-                        logoText="Glow Theory"
-                        leftLink={{ text: "Customer Support", href: "/#contact-support" }}
-                        rightLink={{ text: "Privacy Policy", href: "/privacy" }}
+                    <FooterBaseReveal
+                        columns={[
+                            {
+                                title: "Support",                                items: [{ label: "Customer Support", href: "/#contact-support" }]
+                            },
+                            {
+                                title: "Company",                                items: [{ label: "Privacy Policy", href: "/privacy" }]
+                            },
+                            {
+                                title: "Resources",                                items: [{ label: "Home", href: "/" }]
+                            }
+                        ]}
+                        copyrightText={`© ${new Date().getFullYear()} Glow Theory`}
                         className="bg-[--background] text-[--foreground] py-6 px-4"
-                        linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
-                        logoClassName="text-2xl font-bold tracking-tight"
+                        columnTitleClassName="font-bold text-lg mb-2"
+                        columnItemClassName="text-md"
                     />
                 </div>
             </ThemeProvider>
@@ -179,16 +197,16 @@ function ProductPageContent({ params }: ProductPageProps) {
 
     return (
         <ThemeProvider
-            defaultButtonVariant="elastic-effect"
+            defaultButtonVariant="hover-magnetic"
             defaultTextAnimation="entrance-slide"
             borderRadius="rounded"
-            contentWidth="mediumLarge"
-            sizing="largeSmall"
-            background="noise"
-            cardStyle="gradient-mesh"
-            primaryButtonStyle="primary-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="medium"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="solid"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="bold"
         >
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingOverlay
@@ -196,8 +214,8 @@ function ProductPageContent({ params }: ProductPageProps) {
                     navItems={[
                         { name: "Home", id: "/" },
                         { name: "Live Shows", id: "/#live-shows" },
-                        { name: "Shop", id: "/shop" },
-                        { name: "Support", id: "/#contact-support" }
+                        { name: "Support", id: "/#contact-support" },
+                        { name: "Privacy", id: "/privacy" }
                     ]}
                     button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     className="py-4 px-6 md:px-8"
@@ -242,13 +260,22 @@ function ProductPageContent({ params }: ProductPageProps) {
                 />
             </div>
             <div id="footer" data-section="footer">
-                <FooterLogoReveal
-                    logoText="Glow Theory"
-                    leftLink={{ text: "Customer Support", href: "/#contact-support" }}
-                    rightLink={{ text: "Privacy Policy", href: "/privacy" }}
+                <FooterBaseReveal
+                    columns={[
+                        {
+                            title: "Support",                            items: [{ label: "Customer Support", href: "/#contact-support" }]
+                        },
+                        {
+                            title: "Company",                            items: [{ label: "Privacy Policy", href: "/privacy" }]
+                        },
+                        {
+                            title: "Resources",                            items: [{ label: "Home", href: "/" }]
+                        }
+                    ]}
+                    copyrightText={`© ${new Date().getFullYear()} Glow Theory`}
                     className="bg-[--background] text-[--foreground] py-6 px-4"
-                    linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
-                    logoClassName="text-2xl font-bold tracking-tight"
+                    columnTitleClassName="font-bold text-lg mb-2"
+                    columnItemClassName="text-md"
                 />
             </div>
         </ThemeProvider>

src/app/shop/page.tsx

@@ -3,12 +3,12 @@
 import { Suspense, useCallback } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; // Updated import
 
 function ShopPageContent() {
     const {
@@ -46,16 +46,16 @@ function ShopPageContent() {
     if (isLoading) {
         return (
             <ThemeProvider
-                defaultButtonVariant="elastic-effect"
+                defaultButtonVariant="hover-magnetic"
                 defaultTextAnimation="entrance-slide"
                 borderRadius="rounded"
-                contentWidth="mediumLarge"
-                sizing="largeSmall"
-                background="noise"
-                cardStyle="gradient-mesh"
-                primaryButtonStyle="primary-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="medium"
+                contentWidth="medium"
+                sizing="medium"
+                background="none"
+                cardStyle="solid"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="glass"
+                headingFontWeight="bold"
             >
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
@@ -63,8 +63,8 @@ function ShopPageContent() {
                         navItems={[
                             { name: "Home", id: "/" },
                             { name: "Live Shows", id: "/#live-shows" },
-                            { name: "Shop", id: "/shop" },
-                            { name: "Support", id: "/#contact-support" }
+                            { name: "Support", id: "/#contact-support" },
+                            { name: "Privacy", id: "/privacy" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         className="py-4 px-6 md:px-8"
@@ -78,13 +78,22 @@ function ShopPageContent() {
                     </main>
                 </div>
                 <div id="footer" data-section="footer">
-                    <FooterLogoReveal
-                        logoText="Glow Theory"
-                        leftLink={{ text: "Customer Support", href: "/#contact-support" }}
-                        rightLink={{ text: "Privacy Policy", href: "/privacy" }}
+                    <FooterBaseReveal
+                        columns={[
+                            {
+                                title: "Support",                                items: [{ label: "Customer Support", href: "/#contact-support" }]
+                            },
+                            {
+                                title: "Company",                                items: [{ label: "Privacy Policy", href: "/privacy" }]
+                            },
+                            {
+                                title: "Resources",                                items: [{ label: "Home", href: "/" }]
+                            }
+                        ]}
+                        copyrightText={`© ${new Date().getFullYear()} Glow Theory`}
                         className="bg-[--background] text-[--foreground] py-6 px-4"
-                        linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
-                        logoClassName="text-2xl font-bold tracking-tight"
+                        columnTitleClassName="font-bold text-lg mb-2"
+                        columnItemClassName="text-md"
                     />
                 </div>
             </ThemeProvider>
@@ -93,16 +102,16 @@ function ShopPageContent() {
 
     return (
         <ThemeProvider
-            defaultButtonVariant="elastic-effect"
+            defaultButtonVariant="hover-magnetic"
             defaultTextAnimation="entrance-slide"
             borderRadius="rounded"
-            contentWidth="mediumLarge"
-            sizing="largeSmall"
-            background="noise"
-            cardStyle="gradient-mesh"
-            primaryButtonStyle="primary-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="medium"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="solid"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="bold"
         >
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingOverlay
@@ -110,8 +119,8 @@ function ShopPageContent() {
                     navItems={[
                         { name: "Home", id: "/" },
                         { name: "Live Shows", id: "/#live-shows" },
-                        { name: "Shop", id: "/shop" },
-                        { name: "Support", id: "/#contact-support" }
+                        { name: "Support", id: "/#contact-support" },
+                        { name: "Privacy", id: "/privacy" }
                     ]}
                     button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     className="py-4 px-6 md:px-8"
@@ -146,13 +155,22 @@ function ShopPageContent() {
                 />
             </div>
             <div id="footer" data-section="footer">
-                <FooterLogoReveal
-                    logoText="Glow Theory"
-                    leftLink={{ text: "Customer Support", href: "/#contact-support" }}
-                    rightLink={{ text: "Privacy Policy", href: "/privacy" }}
+                <FooterBaseReveal
+                    columns={[
+                        {
+                            title: "Support",                            items: [{ label: "Customer Support", href: "/#contact-support" }]
+                        },
+                        {
+                            title: "Company",                            items: [{ label: "Privacy Policy", href: "/privacy" }]
+                        },
+                        {
+                            title: "Resources",                            items: [{ label: "Home", href: "/" }]
+                        }
+                    ]}
+                    copyrightText={`© ${new Date().getFullYear()} Glow Theory`}
                     className="bg-[--background] text-[--foreground] py-6 px-4"
-                    linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
-                    logoClassName="text-2xl font-bold tracking-tight"
+                    columnTitleClassName="font-bold text-lg mb-2"
+                    columnItemClassName="text-md"
                 />
             </div>
         </ThemeProvider>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-plus-jakarta-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-plus-jakarta-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #1b0c25;;
-  --primary-cta: #1b0c25;;
+  /* --background: #f5faff;;
+  --card: #f1f8ff;;
+  --foreground: #001122;;
+  --primary-cta: #15479c;;
   --secondary-cta: #ffffff;;
-  --accent: #ff93e4;;
-  --background-accent: #e8a8c3;; */
+  --accent: #a8cce8;;
+  --background-accent: #7ba3cf;; */
 
-  --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #1b0c25;;
-  --primary-cta: #1b0c25;;
-  --primary-cta-text: #f7f6f7;;
+  --background: #f5faff;;
+  --card: #f1f8ff;;
+  --foreground: #001122;;
+  --primary-cta: #15479c;;
+  --primary-cta-text: #f5faff;;
   --secondary-cta: #ffffff;;
-  --secondary-cta-text: #1b0c25;;
-  --accent: #ff93e4;;
-  --background-accent: #e8a8c3;;
+  --secondary-cta-text: #001122;;
+  --accent: #a8cce8;;
+  --background-accent: #7ba3cf;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);