Update src/app/page.tsx

Merge version_6 into main

src/app/blog/page.tsx

@@ -1,39 +1,39 @@
 "use client";
 
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; // Updated import
 
 const posts = [
   {
     id: '1',
-    category: ['Skincare', 'Tips'],
+    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/studio-shot-sensual-woman-pink-suit_197531-16807.jpg',
+    authorAvatar: 'https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg',
     date: 'Oct 20, 2023',
   },
   {
     id: '2',
-    category: ['Live Shows'],
+    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/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg',
+    authorAvatar: 'https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg',
     date: 'Oct 15, 2023',
   },
   {
     id: '3',
-    category: ['Cosmetics'],
+    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,23 +42,25 @@ 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
                     brandName="Glow Theory"
                     navItems={[
                         { name: "Home", id: "/" },
-                        { name: "Shop", id: "/shop" },
+                        { name: "Live Shows", id: "/#live-shows" },
+                        { name: "Support", id: "/#contact-support" },
+                        { name: "Privacy", id: "/privacy" }
                     ]}
                     button={{ text: "Join Live", href: "/#live-shows" }}
                     className="py-4 px-6 md:px-8"
@@ -68,7 +70,7 @@ export default function BlogPage() {
             </div>
 
             <div id="blog" data-section="blog">
-                <BlogCardTwo
+                <BlogCardThree
                     blogs={posts}
                     title="Featured Articles"
                     description="Explore our latest insights"
@@ -79,15 +81,24 @@ 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,23 +1,25 @@
 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"],
+    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/hands-holding-face-cream_23-2149544901.jpg"]
+  }
 };
 
 export default function RootLayout({
@@ -29,7 +31,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${plusJakartaSans.variable} antialiased`}
+          className={`${inter.variable} antialiased`}
         >
           <Tag />
           {children}
@@ -1404,4 +1406,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -2,40 +2,39 @@
 
 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
           brandName="Glow Theory"
           navItems={[
-            { name: "About", id: "about" },
-            { name: "Live Shows", id: "live-shows" },
-            { name: "Bundles", id: "bundles" },
-            { name: "Reviews", id: "reviews" },
-            { name: "Support", id: "support" },
-            { name: "Shop", id: "/shop" },
-            { name: "Blog", id: "/blog" }
+            { name: "Home", id: "/" },
+            { name: "Live Shows", id: "/#live-shows" },
+            { name: "Support", id: "/#contact-support" },
+            { name: "Privacy", id: "/privacy" }
           ]}
           button={{ text: "Join Live", href: "#live-shows" }}
           className="py-4 px-6 md:px-8"
@@ -45,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]"
@@ -67,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/studio-shot-sensual-woman-pink-suit_197531-16807.jpg"
-          imageAlt="Portrait of Lee Coral, CEO of Glow Theory"
-          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"
@@ -105,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"
         />
@@ -117,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/online-workshop-demontration-beauty-products_259150-60056.jpg?_wi=1", imageAlt: "Skincare Essentials Bundle" },
-            { 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"
@@ -138,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/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg", alt: "Customer 1" },
-            { src: "https://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-4258.jpg", alt: "Customer 2" },
-            { src: "https://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg", alt: "Customer 3" },
-            { src: "https://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-4258.jpg", alt: "Customer 4" },
-            { src: "https://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-4258.jpg", alt: "Customer 5" },
-            { src: "https://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-4258.jpg", alt: "Customer 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"
@@ -176,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" }]}
@@ -186,43 +169,47 @@ 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/medium-shot-pretty-woman-indoors_23-2148879269.jpg"
-          imageAlt="Beauty customer support representative"
-          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,28 +3,30 @@
 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
           brandName="Glow Theory"
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Shop", id: "/shop" },
+            { name: "Live Shows", id: "/#live-shows" },
+            { 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,18 +44,21 @@ export default function PrivacyPage() {
             {
               heading: "1. Introduction",              content: [
                 {
-                  type: "paragraph",                  text: "Welcome to Glow Theory. We are committed to protecting your personal information and your right to privacy. If you have any questions or concerns about our policy, or our practices with regards to your personal information, please contact us at support@glowtheory.com."},
-              ],
+                  type: "paragraph",                  text: "Welcome to Glow Theory. We are committed to protecting your personal information and your right to privacy. If you have any questions or concerns about our policy, or our practices with regards to your personal information, please contact us at support@glowtheory.com."
+                }
+              ]
             },
             {
               heading: "2. Information We Collect",              content: [
                 {
-                  type: "paragraph",                  text: "We collect personal information that you voluntarily provide to us when you express an interest in obtaining information about us or our products and services, when you participate in activities on the website or otherwise when you contact us."},
+                  type: "paragraph",                  text: "We collect personal information that you voluntarily provide to us when you express an interest in obtaining information about us or our products and services, when you participate in activities on the website or otherwise when you contact us."
+                },
                 {
                   type: "list",                  items: [
-                    "Personal Information: We may collect names, phone numbers, email addresses, mailing addresses, job titles, contact preferences, contact or authentication data, billing addresses, and other similar information.",                    "Payment Data: We may collect data necessary to process your payment if you make purchases, such as your payment instrument number (such as a credit card number), and the security code associated with your payment instrument."],
-                },
-              ],
+                    "Personal Information: We may collect names, phone numbers, email addresses, mailing addresses, job titles, contact preferences, contact or authentication data, billing addresses, and other similar information.",                    "Payment Data: We may collect data necessary to process your payment if you make purchases, such as your payment instrument number (such as a credit card number), and the security code associated with your payment instrument."
+                  ]
+                }
+              ]
             },
             {
                 heading: "3. How We Use Your Information",                content: [
@@ -67,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,21 +76,26 @@ 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="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
                         brandName="Glow Theory"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} 
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Live Shows", id: "/#live-shows" },
+                            { name: "Support", id: "/#contact-support" },
+                            { name: "Privacy", id: "/privacy" }
+                        ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         className="py-4 px-6 md:px-8"
                         buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
@@ -103,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>
@@ -119,21 +133,26 @@ 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="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
                         brandName="Glow Theory"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} 
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Live Shows", id: "/#live-shows" },
+                            { name: "Support", id: "/#contact-support" },
+                            { name: "Privacy", id: "/privacy" }
+                        ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         className="py-4 px-6 md:px-8"
                         buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
@@ -154,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>
@@ -169,21 +197,26 @@ 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="navbar" data-section="navbar">
+            <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingOverlay
                     brandName="Glow Theory"
-                    navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} 
+                    navItems={[
+                        { name: "Home", id: "/" },
+                        { name: "Live Shows", id: "/#live-shows" },
+                        { name: "Support", id: "/#contact-support" },
+                        { name: "Privacy", id: "/privacy" }
+                    ]}
                     button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     className="py-4 px-6 md:px-8"
                     buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
@@ -207,7 +240,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                     sku={meta.sku}
                     buttons={[
                         { text: "Add To Cart", onClick: handleAddToCart },
-                        { text: "Buy Now", onClick: handleBuyNow },
+                        { text: "Buy Now", onClick: handleBuyNow }
                     ]}
                 />
             </div>
@@ -221,21 +254,30 @@ function ProductPageContent({ params }: ProductPageProps) {
                     total={`$${cartTotal}`}
                     buttons={[
                         {
-                            text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
+                            text: isCheckoutLoading ? "Processing..." : "Check Out",                            onClick: handleCheckout,
                         },
                     ]}
                 />
             </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,21 +46,26 @@ 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="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
                         brandName="Glow Theory"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} 
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Live Shows", id: "/#live-shows" },
+                            { name: "Support", id: "/#contact-support" },
+                            { name: "Privacy", id: "/privacy" }
+                        ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         className="py-4 px-6 md:px-8"
                         buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
@@ -73,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>
@@ -88,21 +102,26 @@ 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="navbar" data-section="navbar">
+            <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingOverlay
                     brandName="Glow Theory"
-                    navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]} 
+                    navItems={[
+                        { name: "Home", id: "/" },
+                        { name: "Live Shows", id: "/#live-shows" },
+                        { name: "Support", id: "/#contact-support" },
+                        { name: "Privacy", id: "/privacy" }
+                    ]}
                     button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     className="py-4 px-6 md:px-8"
                     buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
@@ -130,19 +149,28 @@ function ShopPageContent() {
                     total={`$${cartTotal}`}
                     buttons={[
                         {
-                            text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
+                            text: isCheckoutLoading ? "Processing..." : "Check Out",                            onClick: handleCheckout,
                         },
                     ]}
                 />
             </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);

src/app/support/page.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Mail, Phone, Tv } from "lucide-react";
+
+export default function SupportPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmall"
+      background="noise"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Glow Theory"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/#about" },
+            { name: "Live Shows", id: "/#live-shows" },
+            { name: "Bundles", id: "/#bundles" },
+            { name: "Reviews", id: "/#reviews" },
+            { name: "Support", id: "/support" },
+            { name: "Shop", id: "/shop" },
+            { name: "Blog", id: "/blog" }
+          ]}
+          button={{ text: "Join Live", href: "/#live-shows" }}
+          className="py-4 px-6 md:px-8"
+          buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
+          buttonTextClassName="font-medium"
+        />
+      </div>
+
+      <div id="support" data-section="support">
+        <FeatureBorderGlow
+          title="How Can We Help You?"
+          description="Choose from our support options to get the assistance you need, fast."
+          features={[
+            { icon: Tv, title: "Live Show Support", description: "Get real-time help during our Whatnot live shows for immediate assistance. Visit our page: https://www.whatnot.com/user/glowtheory" },
+            { icon: Phone, title: "Order Inquiries", description: "Contact us for questions about your recent purchases, shipping, and returns. Call us at: 786-919-1243." },
+            { icon: Mail, title: "General Assistance", description: "For all other questions or general inquiries, our team is ready to help via email." }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          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"
+          cardTitleClassName="text-xl md:text-2xl font-semibold mt-4"
+          cardDescriptionClassName="text-md md:text-lg font-light text-balance"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Glow Theory"
+          leftLink={{ text: "Customer Support", href: "/support" }}
+          rightLink={{ text: "Privacy Policy", href: "/privacy" }}
+          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"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}