Update src/app/shop/page.tsx

Merge version_1 into main

src/app/blog/page.tsx

@@ -10,6 +10,17 @@ import { useBlogPosts } from "@/hooks/useBlogPosts";
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
+    const WHATNOT_LINK = "https://www.whatnot.com/live/glowtheory";
+    const navItems = [
+      { name: "Home", id: "/" },
+      { name: "About", id: "/#about" },
+      { name: "Live Shows", id: "/#live-shows" },
+      { name: "Bundles", id: "/#bundles" },
+      { name: "Reviews", id: "/#reviews" },
+      { name: "Contact", id: "/#contact-support" },
+      { name: "Privacy", id: "/privacy" }
+    ];
+
     return (
         <ThemeProvider
             defaultButtonVariant="elastic-effect"
@@ -27,11 +38,8 @@ export default function BlogPage() {
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
                         brandName="Glow Theory"
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" },
-                        ]}
-                        button={{ text: "Join Live", href: "/#live-shows" }}
+                        navItems={navItems}
+                        button={{ text: "Join Live", href: WHATNOT_LINK }}
                         className="py-4 px-6 md:px-8"
                         buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
                         buttonTextClassName="font-medium"

src/app/layout.tsx

@@ -12,12 +12,12 @@ 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/minimal-assortment-beauty-products_23-2148961325.jpg",        alt: "Glow Theory beauty products with a soft pink glow"}
     ],
     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/minimal-assortment-beauty-products_23-2148961325.jpg"]
+  }
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -12,6 +12,16 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { CalendarCheck, Mail, MessageSquare, Sparkles, Timer, Tv } from "lucide-react";
 
 export default function LandingPage() {
+  const WHATNOT_LINK = "https://www.whatnot.com/live/glowtheory";
+  const navItems = [
+    { name: "About", id: "about" },
+    { name: "Live Shows", id: "live-shows" },
+    { name: "Bundles", id: "bundles" },
+    { name: "Reviews", id: "reviews" },
+    { name: "Contact", id: "contact-support" },
+    { name: "Privacy", id: "/privacy" }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -28,14 +38,8 @@ export default function LandingPage() {
       <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" },
-          ]}
-          button={{ text: "Join Live", href: "#live-shows" }}
+          navItems={navItems}
+          button={{ text: "Join Live", href: WHATNOT_LINK }}
           className="py-4 px-6 md:px-8"
           buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
           buttonTextClassName="font-medium"
@@ -47,7 +51,7 @@ export default function LandingPage() {
           title="Glow Theory"
           description="Elevate Your Glow"
           background={{ variant: "radial-gradient" }}
-          buttons={[{ text: "Join Our Live Show", href: "#live-shows" }]}
+          buttons={[{ text: "Join Our Live Show", href: WHATNOT_LINK }]}
           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" },
@@ -179,7 +183,7 @@ export default function LandingPage() {
           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"
-          buttons={[{ text: "Join The Glow Fam", href: "#contact-support" }]}
+          buttons={[{ text: "Join The Glow Fam", href: "#contact-support" }]} 
           buttonAnimation="slide-up"
         />
       </div>
@@ -215,7 +219,7 @@ export default function LandingPage() {
       <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="Glow Theory"
-          leftLink={{ text: "Customer Support", href: "#contact-support" }}
+          leftLink={{ text: "Customer Support", href: "/#contact-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"

src/app/privacy/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import LegalSection from "@/components/legal/LegalSection";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
+export default function PrivacyPolicyPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/#about" },
+    { name: "Live Shows", id: "/#live-shows" },
+    { name: "Bundles", id: "/#bundles" },
+    { name: "Reviews", id: "/#reviews" },
+    { name: "Contact", id: "/#contact-support" },
+    { name: "Privacy", id: "/privacy" }
+  ];
+  const WHATNOT_LINK = "https://www.whatnot.com/live/glowtheory";
+
+  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"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Glow Theory"
+            navItems={navItems}
+            button={{ text: "Join Live", href: WHATNOT_LINK }}
+            className="py-4 px-6 md:px-8"
+            buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
+            buttonTextClassName="font-medium"
+          />
+        </div>
+        <div id="privacy-policy" data-section="privacy-policy">
+          <LegalSection
+            layout="page"
+            title="Privacy Policy"
+            subtitle="Last updated: October 26, 2023"
+            sections={[
+              {
+                heading: "1. Introduction",                content: [{ type: "paragraph", text: "Welcome to Glow Theory's Privacy Policy. We are committed to protecting your personal data and your right to privacy. This policy explains what information we collect, how we use it, and what rights you have in relation to it." }],
+              },
+              {
+                heading: "2. Information We Collect",                content: [
+                  { type: "paragraph", text: "We collect personal information that you voluntarily provide to us when you register on the website, express an interest in obtaining information about us or our products and services, when you participate in activities on the website (such as posting messages in our forums or entering competitions), or otherwise when you contact us." },
+                  { type: "list", items: ["Name, email address, phone number", "Billing and shipping addresses", "Payment information (handled securely by third-party processors)", "Interaction data on live shows and website browsing"] },
+                ],
+              },
+              {
+                heading: "3. How We Use Your Information",                content: [
+                  { type: "paragraph", text: "We use personal information collected via our website for a variety of business purposes described below. We process your personal information for these purposes in reliance on our legitimate business interests, in order to enter into or perform a contract with you, with your consent, and/or for compliance with our legal obligations." },
+                  { type: "numbered-list", items: ["To facilitate account creation and logon process.", "To send you marketing and promotional communications.", "To post testimonials with your consent.", "To deliver products and services to you.", "To respond to your inquiries and offer support."] },
+                ],
+              },
+              {
+                heading: "4. Sharing Your Information",                content: [
+                  { type: "paragraph", text: "We only share information with your consent, to comply with laws, to provide you with services, to protect your rights, or to fulfill business obligations. Specifically, we may share your data with third-party vendors, service providers, contractors or agents who perform services for us or on our behalf and require access to such information to do that work. These include payment processing, data analysis, email delivery, hosting services, customer service, and marketing efforts." },
+                ],
+              },
+              {
+                heading: "5. Your Privacy Rights",                content: [
+                  { type: "paragraph", text: "You have certain rights under applicable data protection laws. These may include the right (i) to request access and obtain a copy of your personal information, (ii) to request rectification or erasure; (iii) to restrict the processing of your personal information; and (iv) if applicable, to data portability. In certain circumstances, you may also have the right to object to the processing of your personal information. To make such a request, please use the contact details provided below." },
+                ],
+              },
+              {
+                heading: "6. Contact Us",                content: [
+                  { type: "paragraph", text: "If you have questions or comments about this policy, you may email us at support@glowtheory.com or contact us by post at:" },
+                  { type: "paragraph", text: "Glow Theory\n123 Beauty Lane\nMiami, FL 33101\nUSA" },
+                ],
+              },
+            ]}
+            className="bg-[--background] text-[--foreground]"
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Glow Theory"
+            leftLink={{ text: "Customer Support", href: "/#contact-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>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

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

@@ -74,6 +74,16 @@ function ProductPageContent({ params }: ProductPageProps) {
         await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
     }, [cartItems, checkout, getCheckoutItems]);
 
+    const navItems = [
+      { name: "Home", id: "/" },
+      { name: "About", id: "/#about" },
+      { name: "Live Shows", id: "/#live-shows" },
+      { name: "Bundles", id: "/#bundles" },
+      { name: "Reviews", id: "/#reviews" },
+      { name: "Contact", id: "/#contact-support" },
+      { name: "Privacy", id: "/privacy" }
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -89,10 +99,10 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="medium"
             >
                 <ReactLenis root>
-                    <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={navItems}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             className="py-4 px-6 md:px-8"
                             buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
@@ -134,10 +144,10 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="medium"
             >
                 <ReactLenis root>
-                    <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={navItems}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             className="py-4 px-6 md:px-8"
                             buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
@@ -186,10 +196,10 @@ function ProductPageContent({ params }: ProductPageProps) {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <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={navItems}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         className="py-4 px-6 md:px-8"
                         buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"

src/app/shop/page.tsx

@@ -41,6 +41,16 @@ function ShopPageContent() {
         await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
     }, [cartItems, checkout, getCheckoutItems]);
 
+    const navItems = [
+      { name: "Home", id: "/" },
+      { name: "About", id: "/#about" },
+      { name: "Live Shows", id: "/#live-shows" },
+      { name: "Bundles", id: "/#bundles" },
+      { name: "Reviews", id: "/#reviews" },
+      { name: "Contact", id: "/#contact-support" },
+      { name: "Privacy", id: "/privacy" }
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -56,10 +66,10 @@ function ShopPageContent() {
                 headingFontWeight="medium"
             >
                 <ReactLenis root>
-                    <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={navItems}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             className="py-4 px-6 md:px-8"
                             buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
@@ -100,10 +110,10 @@ function ShopPageContent() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <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={navItems}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         className="py-4 px-6 md:px-8"
                         buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #ffffff;;
-  --card: #f8f0f0;;
-  --foreground: #1a0000;;
-  --primary-cta: #ffb6c1;;
+  /* --background: #f7f6f7;;
+  --card: #ffffff;;
+  --foreground: #1b0c25;;
+  --primary-cta: #1b0c25;;
   --secondary-cta: #ffffff;;
-  --accent: #f4c4c4;;
-  --background-accent: #f09199;; */
+  --accent: #ff93e4;;
+  --background-accent: #e8a8c3;; */
 
-  --background: #ffffff;;
-  --card: #f8f0f0;;
-  --foreground: #1a0000;;
-  --primary-cta: #ffb6c1;;
-  --primary-cta-text: #ffffff;;
+  --background: #f7f6f7;;
+  --card: #ffffff;;
+  --foreground: #1b0c25;;
+  --primary-cta: #1b0c25;;
+  --primary-cta-text: #f7f6f7;;
   --secondary-cta: #ffffff;;
-  --secondary-cta-text: #1a0000;;
-  --accent: #f4c4c4;;
-  --background-accent: #f09199;;
+  --secondary-cta-text: #1b0c25;;
+  --accent: #ff93e4;;
+  --background-accent: #e8a8c3;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);