bender/b1e64d4a-0f82-4a25-9e95-456fe2eed868
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

base: bender:version_7
Branches Tags
bender:main bender:version_7 bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1
..
compare: bender:version_2
Branches Tags
bender:main bender:version_7 bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1

5 Commits
version_7 ... version_2

Author SHA1 Message Date
bender
2b2a65b7cd Update src/app/shop/page.tsx 2026-02-21 20:10:22 +00:00
bender
95eac99262 Update src/app/shop/[id]/page.tsx 2026-02-21 20:10:21 +00:00
bender
293b8a53e4 Update src/app/privacy/page.tsx 2026-02-21 20:10:21 +00:00
bender
6b25e81060 Update src/app/page.tsx 2026-02-21 20:10:20 +00:00
bender
a42727f9ae Update src/app/blog/page.tsx 2026-02-21 20:10:19 +00:00
9 changed files with 539 additions and 664 deletions
Expand all files Collapse all files

147
src/app/blog/page.tsx
View File

@@ -1,104 +1,79 @@
"use client"; "use client";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree'; import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay"; import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; // Updated import import { useBlogPosts } from "@/hooks/useBlogPosts";
const posts = [
{
id: '1',
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/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',
},
{
id: '2',
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/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',
},
{
id: '3',
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/woman-holding-makeup-brush_23-2148496463.jpg',
authorName: 'Glow Theory',
authorAvatar: 'https://img.b2bpic.net/free-photo/minimal-geometric-pattern-wall_23-2149673909.jpg',
date: 'Oct 10, 2023',
}
];
export default function BlogPage() { 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 ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="medium" contentWidth="mediumLarge"
sizing="medium" sizing="largeSmall"
background="none" background="noise"
cardStyle="solid" cardStyle="gradient-mesh"
primaryButtonStyle="gradient" primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <ReactLenis root>
<NavbarLayoutFloatingOverlay <div id="nav" data-section="nav">
brandName="Glow Theory" <NavbarLayoutFloatingOverlay
navItems={[ brandName="Glow Theory"
{ name: "Home", id: "/" }, navItems={navItems}
{ name: "Live Shows", id: "/#live-shows" }, button={{ text: "Join Live", href: WHATNOT_LINK }}
{ name: "Support", id: "/#contact-support" }, className="py-4 px-6 md:px-8"
{ name: "Privacy", id: "/privacy" } buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
]} buttonTextClassName="font-medium"
button={{ text: "Join Live", href: "/#live-shows" }} />
className="py-4 px-6 md:px-8" </div>
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="blog" data-section="blog"> {isLoading ? (
<BlogCardThree <div className="w-content-width mx-auto py-20 text-center">
blogs={posts} <p className="text-foreground">Loading posts...</p>
title="Featured Articles" </div>
description="Explore our latest insights" ) : (
animationType="slide-up" <div id="blog" data-section="blog">
textboxLayout="default" <BlogCardThree
useInvertedBackground={false} blogs={posts}
/> title="Featured Articles"
</div> description="Explore our latest insights"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
)}
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseReveal <FooterLogoReveal
columns={[ logoText="Glow Theory"
{ leftLink={{ text: "Customer Support", href: "/#contact-support" }}
title: "Support", items: [{ label: "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"
title: "Company", items: [{ label: "Privacy Policy", href: "/privacy" }] logoClassName="text-2xl font-bold tracking-tight"
}, />
{ </div>
title: "Resources", items: [{ label: "Home", href: "/" }] </ReactLenis>
}
]}
copyrightText={`© ${new Date().getFullYear()} Glow Theory`}
className="bg-[--background] text-[--foreground] py-6 px-4"
columnTitleClassName="font-bold text-lg mb-2"
columnItemClassName="text-md"
/>
</div>
</ThemeProvider> </ThemeProvider>
); );
} }

16
src/app/layout.tsx
View File

@@ -1,24 +1,22 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Plus_Jakarta_Sans } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
const inter = Inter({ const plusJakartaSans = Plus_Jakarta_Sans({
variable: "--font-inter", subsets: ["latin"], variable: "--font-plus-jakarta-sans", subsets: ["latin"],
}); });
export const metadata: Metadata = { 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.", 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: [ 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/hands-holding-face-cream_23-2149544901.jpg", alt: "Glow Theory beauty products held in hands" 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" type: "website"},
},
twitter: { 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"] 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"]
} }
}; };
@@ -31,7 +29,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body <body
className={`${inter.variable} antialiased`} className={`${plusJakartaSans.variable} antialiased`}
> >
<Tag /> <Tag />
{children} {children}

200
src/app/page.tsx
View File

@@ -2,41 +2,44 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; 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 ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import { CalendarCheck, Mail, MessageSquare, Quote, Timer, Tv } from "lucide-react"; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
// New imports for replaced components import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboard from '@/components/sections/hero/HeroBillboard'; import { CalendarCheck, Mail, MessageSquare, Sparkles, Timer, Tv } from "lucide-react";
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() { 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 ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="medium" contentWidth="mediumLarge"
sizing="medium" sizing="largeSmall"
background="none" background="noise"
cardStyle="solid" cardStyle="gradient-mesh"
primaryButtonStyle="gradient" primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay <NavbarLayoutFloatingOverlay
brandName="Glow Theory" brandName="Glow Theory"
navItems={[ navItems={navItems}
{ name: "Home", id: "/" }, button={{ text: "Join Live", href: WHATNOT_LINK }}
{ 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" className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]" buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium" buttonTextClassName="font-medium"
@@ -44,13 +47,18 @@ export default function LandingPage() {
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboard <HeroBillboardGallery
title="Glow Theory" title="Glow Theory"
description="Elevate Your Glow" description="Elevate Your Glow"
background={{ variant: "plain" }} background={{ variant: "radial-gradient" }}
buttons={[{ text: "Join Our Live Show", href: "https://www.whatnot.com/s/xeIJ5XNt" }]} buttons={[{ text: "Join Our Live Show", href: WHATNOT_LINK }]}
imageSrc="https://img.b2bpic.net/free-photo/hands-holding-face-cream_23-2149544901.jpg?_wi=1" 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" },
]}
mediaAnimation="opacity" mediaAnimation="opacity"
tagAnimation="opacity"
buttonAnimation="opacity" buttonAnimation="opacity"
className="bg-[--background] text-[--foreground]" className="bg-[--background] text-[--foreground]"
titleClassName="text-5xl md:text-7xl lg:text-8xl font-thin tracking-wide" titleClassName="text-5xl md:text-7xl lg:text-8xl font-thin tracking-wide"
@@ -62,24 +70,37 @@ export default function LandingPage() {
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<TextAbout <TestimonialAboutCard
tag="About Us" tag="About Us"
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." 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"
useInvertedBackground={false} useInvertedBackground={false}
className="bg-[--card] text-[--foreground]" className="bg-[--background] text-[--foreground]"
cardClassName="!bg-[--card] shadow-lg rounded-[--radius] p-8 md:p-12"
tagClassName="text-[--primary-cta] font-semibold"
titleClassName="text-3xl md:text-4xl lg:text-5xl font-thin tracking-wide" titleClassName="text-3xl md:text-4xl lg:text-5xl font-thin tracking-wide"
buttons={[]} 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"
/> />
</div> </div>
<div id="live-shows" data-section="live-shows"> <div id="live-shows" data-section="live-shows">
<FeatureCardTwentyFive <FeatureBorderGlow
title="Join Our Live Shows" 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!" 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={[ features={[
{ 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: 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.", 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: 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!", 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" }] } { icon: Timer, title: "Countdown Timer", description: "See exactly when our next exciting live show is about to begin!" },
]} ]}
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
@@ -87,8 +108,8 @@ export default function LandingPage() {
className="bg-[--background-accent] text-[--foreground]" className="bg-[--background-accent] text-[--foreground]"
textBoxTitleClassName="text-4xl md:text-5xl lg:text-6xl font-thin tracking-wide" 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" textBoxDescriptionClassName="text-lg md:text-xl font-light max-w-2xl mx-auto"
cardClassName="rounded-[--radius] !bg-[--card] border border-[--accent] shadow-lg" cardClassName="rounded-[--radius] p-8 !bg-[--card] border border-[--accent] shadow-lg"
cardIconWrapperClassName="!bg-[--primary-cta] text-[--primary-cta-text] rounded-full p-4 shadow-md" iconContainerClassName="!bg-[--primary-cta] !text-[--primary-cta-text] rounded-full p-4 shadow-md"
cardTitleClassName="text-xl md:text-2xl font-semibold mt-4" cardTitleClassName="text-xl md:text-2xl font-semibold mt-4"
cardDescriptionClassName="text-md md:text-lg font-light text-balance" cardDescriptionClassName="text-md md:text-lg font-light text-balance"
/> />
@@ -99,9 +120,9 @@ export default function LandingPage() {
title="Featured Bundles" title="Featured Bundles"
description="Discover our curated selection of reseller beauty bundles, perfect for elevating your inventory. Available exclusively on our live shows!" description="Discover our curated selection of reseller beauty bundles, perfect for elevating your inventory. Available exclusively on our live shows!"
products={[ 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/woman-holding-face-cream_23-2148496464.jpg", imageAlt: "Hand holding face cream" }, { 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", 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/hand-showing-perfume-bottle_23-2148496465.jpg", imageAlt: "Hand showing perfume bottle" }, { 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/woman-holding-foundation-bottle_23-2148496468.jpg", imageAlt: "Hand holding foundation 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/foundation-bottles-advertising-arrangement_23-2149511243.jpg", imageAlt: "Cosmetic Pro Kit" },
]} ]}
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
animationType="slide-up" animationType="slide-up"
@@ -120,38 +141,37 @@ export default function LandingPage() {
</div> </div>
<div id="reviews" data-section="reviews"> <div id="reviews" data-section="reviews">
<TestimonialCardTwo <TestimonialCardFifteen
testimonials={[ 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}
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 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" },
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 { 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" },
]} ]}
title="What Our Customers Say" ratingAnimation="slide-up"
description="Hear from our happy resellers about their experience with Glow Theory." avatarsAnimation="slide-up"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
className="bg-[--background-accent] text-[--foreground]" className="bg-[--background-accent] text-[--foreground]"
cardClassName="rounded-[--radius] !bg-[--card] border border-[--accent] shadow-lg p-8" testimonialClassName="text-3xl md:text-4xl lg:text-5xl font-light text-center leading-tight mb-8 max-w-4xl mx-auto"
imageWrapperClassName="!bg-[--primary-cta] text-[--primary-cta-text] rounded-full p-4" starClassName="text-[--primary-cta]"
testimonialClassName="text-xl md:text-2xl font-light text-center leading-relaxed mb-4" avatarGroupClassName="mt-8"
nameClassName="text-lg font-semibold" avatarClassName="ring-2 ring-[--card]"
roleClassName="text-md text-[--foreground] opacity-80" containerClassName="max-w-7xl mx-auto py-16 md:py-24"
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>
<div id="contact-subscribe" data-section="contact-subscribe"> <div id="contact-subscribe" data-section="contact-subscribe">
<FeatureCardTwentyFive <FeatureBorderGlow
title="Get Notified Before We Go Live!" 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." description="Never miss a live show again! Join our Glow Fam community for exclusive alerts on upcoming bundles and daily drops."
features={[ features={[
{ 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: 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.", 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" }] } { icon: MessageSquare, title: "SMS Signup", description: "Get instant text notifications when we go live with exciting new bundles." },
]} ]}
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
@@ -159,8 +179,8 @@ export default function LandingPage() {
className="bg-[--background] text-[--foreground]" className="bg-[--background] text-[--foreground]"
textBoxTitleClassName="text-4xl md:text-5xl lg:text-6xl font-thin tracking-wide" 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" textBoxDescriptionClassName="text-lg md:text-xl font-light max-w-2xl mx-auto"
cardClassName="rounded-[--radius] !bg-[--card] border border-[--accent] shadow-lg" cardClassName="rounded-[--radius] p-8 !bg-[--card] border border-[--accent] shadow-lg"
cardIconWrapperClassName="!bg-[--primary-cta] text-[--primary-cta-text] rounded-full p-4 shadow-md" iconContainerClassName="!bg-[--primary-cta] !text-[--primary-cta-text] rounded-full p-4 shadow-md"
cardTitleClassName="text-xl md:text-2xl font-semibold mt-4" cardTitleClassName="text-xl md:text-2xl font-semibold mt-4"
cardDescriptionClassName="text-md md:text-lg font-light text-balance" 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" }]}
@@ -169,45 +189,41 @@ export default function LandingPage() {
</div> </div>
<div id="contact-support" data-section="contact-support"> <div id="contact-support" data-section="contact-support">
<ContactCenter <ContactSplitForm
tag="Support"
title="Customer Support" title="Customer Support"
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." 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"
background={{ variant: "plain" }} inputs={[
inputPlaceholder="Enter your email" { name: "fullName", type: "text", placeholder: "Full Name", required: true },
buttonText="Sign Up for Alerts" { name: "emailAddress", type: "email", placeholder: "Email Address", required: true },
termsText="By signing up, you agree to receive promotional emails and SMS from Glow Theory. You can unsubscribe at any time." { name: "orderNumber", type: "text", placeholder: "Order Number (Optional)", required: false },
onSubmit={(email) => console.log(`Subscribed with: ${email}`)} ]}
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"
useInvertedBackground={false} useInvertedBackground={false}
className="bg-[--background-accent] text-[--foreground]" className="bg-[--background-accent] text-[--foreground]"
contentClassName="!bg-[--card] rounded-[--radius] shadow-lg p-8 md:p-12 max-w-2xl mx-auto" formCardClassName="!bg-[--card] rounded-[--radius] shadow-lg p-8 md:p-12"
tagClassName="text-[--primary-cta] font-semibold"
titleClassName="text-4xl md:text-5xl lg:text-6xl font-thin tracking-wide" 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" 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" 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" buttonTextClassName="font-semibold"
inputClassName="px-4 py-2 rounded-md border border-[--accent] focus:outline-none focus:ring-2 focus:ring-[--primary-cta] !bg-[--background]" mediaWrapperClassName="rounded-[--radius] overflow-hidden"
termsClassName="text-sm mt-4 opacity-75" mediaClassName="object-cover h-full w-full"
contentClassName="grid-cols-1 md:grid-cols-2 gap-8 md:gap-12"
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseReveal <FooterLogoReveal
columns={[ logoText="Glow Theory"
{ leftLink={{ text: "Customer Support", href: "/#contact-support" }}
title: "Support", items: [{ label: "Customer Support", href: "/#contact-support" }] rightLink={{ text: "Privacy Policy", href: "/privacy" }}
},
{
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" className="bg-[--background] text-[--foreground] py-6 px-4"
columnTitleClassName="font-bold text-lg mb-2" linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
columnItemClassName="text-md" logoClassName="text-2xl font-bold tracking-tight"
/> />
</div> </div>
</ThemeProvider> </ThemeProvider>

168
src/app/privacy/page.tsx
View File

@@ -1,95 +1,99 @@
"use client"; "use client";
import LegalSection from "@/components/legal/LegalSection";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; 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 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";
export default function PrivacyPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="medium" contentWidth="mediumLarge"
sizing="medium" sizing="largeSmall"
background="none" background="noise"
cardStyle="solid" cardStyle="gradient-mesh"
primaryButtonStyle="gradient" primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <ReactLenis root>
<NavbarLayoutFloatingOverlay <div id="nav" data-section="nav">
brandName="Glow Theory" <NavbarLayoutFloatingOverlay
navItems={[ brandName="Glow Theory"
{ name: "Home", id: "/" }, navItems={navItems}
{ name: "Live Shows", id: "/#live-shows" }, button={{ text: "Join Live", href: WHATNOT_LINK }}
{ name: "Support", id: "/#contact-support" }, className="py-4 px-6 md:px-8"
{ name: "Privacy", id: "/privacy" } buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
]} buttonTextClassName="font-medium"
button={{ text: "Join Live", href: "/#live-shows" }} />
className="py-4 px-6 md:px-8" </div>
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]" <div id="privacy-policy" data-section="privacy-policy">
buttonTextClassName="font-medium" <LegalSection
/> layout="page"
</div> title="Privacy Policy"
subtitle="Last updated: October 26, 2023"
<div id="privacy-policy" data-section="privacy-policy"> sections={[
<LegalSection {
layout="page" 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." }],
title="Privacy Policy" },
subtitle="Last Updated: October 26, 2023" {
sections={[ 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." },
heading: "1. Introduction", content: [ { 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"] },
{ ],
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: "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."
]
}
]
},
{
heading: "3. How We Use Your Information", content: [ 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: "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." },
</div> ],
},
<div id="footer" data-section="footer"> {
<FooterBaseReveal heading: "5. Your Privacy Rights", content: [
columns={[ { 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." },
{ ],
title: "Support", items: [{ label: "Customer Support", href: "/#contact-support" }] },
}, {
{ heading: "6. Contact Us", content: [
title: "Company", items: [{ label: "Privacy Policy", href: "/privacy" }] { 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" },
{ ],
title: "Resources", items: [{ label: "Home", href: "/" }] },
} ]}
]} className="bg-[--background] text-[--foreground]"
copyrightText={`© ${new Date().getFullYear()} Glow Theory`} />
className="bg-[--background] text-[--foreground] py-6 px-4" </div>
columnTitleClassName="font-bold text-lg mb-2" <div id="footer" data-section="footer">
columnItemClassName="text-md" <FooterLogoReveal
/> logoText="Glow Theory"
</div> 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> </ThemeProvider>
); );
} }

337
src/app/shop/[id]/page.tsx
View File

@@ -2,14 +2,15 @@
import { Suspense, use, useCallback } from "react"; import { Suspense, use, useCallback } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard"; import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
import ProductCart from "@/components/ecommerce/cart/ProductCart"; import ProductCart from "@/components/ecommerce/cart/ProductCart";
import { useProductDetail } from "@/hooks/useProductDetail"; import { useProductDetail } from "@/hooks/useProductDetail";
import { useCart } from "@/hooks/useCart"; import { useCart } from "@/hooks/useCart";
import { useCheckout } from "@/hooks/useCheckout"; import { useCheckout } from "@/hooks/useCheckout";
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; // Updated import
interface ProductPageProps { interface ProductPageProps {
params: Promise<{ id: string }>; params: Promise<{ id: string }>;
@@ -73,59 +74,57 @@ function ProductPageContent({ params }: ProductPageProps) {
await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() }); await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
}, [cartItems, checkout, getCheckoutItems]); }, [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) { if (isLoading) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="medium" contentWidth="mediumLarge"
sizing="medium" sizing="largeSmall"
background="none" background="noise"
cardStyle="solid" cardStyle="gradient-mesh"
primaryButtonStyle="gradient" primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <ReactLenis root>
<NavbarLayoutFloatingOverlay <div id="nav" data-section="nav">
brandName="Glow Theory" <NavbarLayoutFloatingOverlay
navItems={[ brandName="Glow Theory"
{ name: "Home", id: "/" }, navItems={navItems}
{ name: "Live Shows", id: "/#live-shows" }, button={{ text: "Cart", onClick: () => setCartOpen(true) }}
{ name: "Support", id: "/#contact-support" }, className="py-4 px-6 md:px-8"
{ name: "Privacy", id: "/privacy" } buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
]} buttonTextClassName="font-medium"
button={{ text: "Cart", onClick: () => setCartOpen(true) }} />
className="py-4 px-6 md:px-8" </div>
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]" <div id="loading-section" data-section="loading-section">
buttonTextClassName="font-medium" <main className="min-h-screen flex items-center justify-center pt-20">
/> <p className="text-foreground">Loading product...</p>
</div> </main>
<div id="loading-section" data-section="loading-section"> </div>
<main className="min-h-screen flex items-center justify-center pt-20"> <div id="footer" data-section="footer">
<p className="text-foreground">Loading product...</p> <FooterLogoReveal
</main> logoText="Glow Theory"
</div> leftLink={{ text: "Customer Support", href: "/#contact-support" }}
<div id="footer" data-section="footer"> rightLink={{ text: "Privacy Policy", href: "/privacy" }}
<FooterBaseReveal className="bg-[--background] text-[--foreground] py-6 px-4"
columns={[ linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
{ logoClassName="text-2xl font-bold tracking-tight"
title: "Support", items: [{ label: "Customer Support", href: "/#contact-support" }] />
}, </div>
{ </ReactLenis>
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"
columnTitleClassName="font-bold text-lg mb-2"
columnItemClassName="text-md"
/>
</div>
</ThemeProvider> </ThemeProvider>
); );
} }
@@ -133,151 +132,127 @@ function ProductPageContent({ params }: ProductPageProps) {
if (!product) { if (!product) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="medium" contentWidth="mediumLarge"
sizing="medium" sizing="largeSmall"
background="none" background="noise"
cardStyle="solid" cardStyle="gradient-mesh"
primaryButtonStyle="gradient" primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <ReactLenis root>
<NavbarLayoutFloatingOverlay <div id="nav" data-section="nav">
brandName="Glow Theory" <NavbarLayoutFloatingOverlay
navItems={[ brandName="Glow Theory"
{ name: "Home", id: "/" }, navItems={navItems}
{ name: "Live Shows", id: "/#live-shows" }, button={{ text: "Cart", onClick: () => setCartOpen(true) }}
{ name: "Support", id: "/#contact-support" }, className="py-4 px-6 md:px-8"
{ name: "Privacy", id: "/privacy" } buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
]} buttonTextClassName="font-medium"
button={{ text: "Cart", onClick: () => setCartOpen(true) }} />
className="py-4 px-6 md:px-8" </div>
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]" <div id="not-found-section" data-section="not-found-section">
buttonTextClassName="font-medium" <main className="min-h-screen flex items-center justify-center pt-20">
/> <div className="text-center">
</div> <p className="text-foreground mb-4">Product not found</p>
<div id="not-found-section" data-section="not-found-section"> <button
<main className="min-h-screen flex items-center justify-center pt-20"> onClick={() => router.push("/shop")}
<div className="text-center"> className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
<p className="text-foreground mb-4">Product not found</p> >
<button Back to Shop
onClick={() => router.push("/shop")} </button>
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text" </div>
> </main>
Back to Shop </div>
</button> <div id="footer" data-section="footer">
</div> <FooterLogoReveal
</main> logoText="Glow Theory"
</div> leftLink={{ text: "Customer Support", href: "/#contact-support" }}
<div id="footer" data-section="footer"> rightLink={{ text: "Privacy Policy", href: "/privacy" }}
<FooterBaseReveal className="bg-[--background] text-[--foreground] py-6 px-4"
columns={[ linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
{ logoClassName="text-2xl font-bold tracking-tight"
title: "Support", items: [{ label: "Customer Support", href: "/#contact-support" }] />
}, </div>
{ </ReactLenis>
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"
columnTitleClassName="font-bold text-lg mb-2"
columnItemClassName="text-md"
/>
</div>
</ThemeProvider> </ThemeProvider>
); );
} }
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="medium" contentWidth="mediumLarge"
sizing="medium" sizing="largeSmall"
background="none" background="noise"
cardStyle="solid" cardStyle="gradient-mesh"
primaryButtonStyle="gradient" primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <ReactLenis root>
<NavbarLayoutFloatingOverlay <div id="nav" data-section="nav">
brandName="Glow Theory" <NavbarLayoutFloatingOverlay
navItems={[ brandName="Glow Theory"
{ name: "Home", id: "/" }, navItems={navItems}
{ name: "Live Shows", id: "/#live-shows" }, button={{ text: "Cart", onClick: () => setCartOpen(true) }}
{ name: "Support", id: "/#contact-support" }, className="py-4 px-6 md:px-8"
{ name: "Privacy", id: "/privacy" } buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
]} buttonTextClassName="font-medium"
button={{ text: "Cart", onClick: () => setCartOpen(true) }} />
className="py-4 px-6 md:px-8" </div>
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]" <div id="product-detail-card" data-section="product-detail-card">
buttonTextClassName="font-medium" <ProductDetailCard
/> layout="page"
</div> name={product.name}
<div id="product-detail-card" data-section="product-detail-card"> price={product.price}
<ProductDetailCard salePrice={meta.salePrice}
layout="page" rating={product.rating || 0}
name={product.name} description={product.description}
price={product.price} images={images}
salePrice={meta.salePrice} variants={variants.length > 0 ? variants : undefined}
rating={product.rating || 0} quantity={quantityVariant}
description={product.description} ribbon={meta.ribbon}
images={images} inventoryStatus={meta.inventoryStatus}
variants={variants.length > 0 ? variants : undefined} inventoryQuantity={meta.inventoryQuantity}
quantity={quantityVariant} sku={meta.sku}
ribbon={meta.ribbon} buttons={[
inventoryStatus={meta.inventoryStatus} { text: "Add To Cart", onClick: handleAddToCart },
inventoryQuantity={meta.inventoryQuantity} { text: "Buy Now", onClick: handleBuyNow },
sku={meta.sku} ]}
buttons={[ />
{ text: "Add To Cart", onClick: handleAddToCart }, </div>
{ text: "Buy Now", onClick: handleBuyNow } <div id="product-cart" data-section="product-cart">
]} <ProductCart
/> isOpen={cartOpen}
</div> onClose={() => setCartOpen(false)}
<div id="product-cart" data-section="product-cart"> items={cartItems}
<ProductCart onQuantityChange={updateQuantity}
isOpen={cartOpen} onRemove={removeItem}
onClose={() => setCartOpen(false)} total={`$${cartTotal}`}
items={cartItems} buttons={[
onQuantityChange={updateQuantity} {
onRemove={removeItem} text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
total={`$${cartTotal}`} },
buttons={[ ]}
{ />
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout, </div>
}, <div id="footer" data-section="footer">
]} <FooterLogoReveal
/> logoText="Glow Theory"
</div> leftLink={{ text: "Customer Support", href: "/#contact-support" }}
<div id="footer" data-section="footer"> rightLink={{ text: "Privacy Policy", href: "/privacy" }}
<FooterBaseReveal className="bg-[--background] text-[--foreground] py-6 px-4"
columns={[ linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
{ logoClassName="text-2xl font-bold tracking-tight"
title: "Support", items: [{ label: "Customer Support", href: "/#contact-support" }] />
}, </div>
{ </ReactLenis>
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"
columnTitleClassName="font-bold text-lg mb-2"
columnItemClassName="text-md"
/>
</div>
</ThemeProvider> </ThemeProvider>
); );
} }

224
src/app/shop/page.tsx
View File

@@ -1,14 +1,15 @@
"use client"; "use client";
import { Suspense, useCallback } from "react"; import { Suspense, useCallback } from "react";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog"; import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import ProductCart from "@/components/ecommerce/cart/ProductCart"; import ProductCart from "@/components/ecommerce/cart/ProductCart";
import { useProductCatalog } from "@/hooks/useProductCatalog"; import { useProductCatalog } from "@/hooks/useProductCatalog";
import { useCart } from "@/hooks/useCart"; import { useCart } from "@/hooks/useCart";
import { useCheckout } from "@/hooks/useCheckout"; import { useCheckout } from "@/hooks/useCheckout";
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; // Updated import
function ShopPageContent() { function ShopPageContent() {
const { const {
@@ -29,10 +30,7 @@ function ShopPageContent() {
getCheckoutItems, getCheckoutItems,
} = useCart(); } = useCart();
const { const { checkout, isLoading: isCheckoutLoading } = useCheckout();
checkout,
isLoading: isCheckoutLoading
} = useCheckout();
const handleCheckout = useCallback(async () => { const handleCheckout = useCallback(async () => {
if (cartItems.length === 0) return; if (cartItems.length === 0) return;
@@ -43,136 +41,122 @@ function ShopPageContent() {
await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() }); await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
}, [cartItems, checkout, getCheckoutItems]); }, [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) { if (isLoading) {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="medium" contentWidth="mediumLarge"
sizing="medium" sizing="largeSmall"
background="none" background="noise"
cardStyle="solid" cardStyle="gradient-mesh"
primaryButtonStyle="gradient" primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <ReactLenis root>
<NavbarLayoutFloatingOverlay <div id="nav" data-section="nav">
brandName="Glow Theory" <NavbarLayoutFloatingOverlay
navItems={[ brandName="Glow Theory"
{ name: "Home", id: "/" }, navItems={navItems}
{ name: "Live Shows", id: "/#live-shows" }, button={{ text: "Cart", onClick: () => setCartOpen(true) }}
{ name: "Support", id: "/#contact-support" }, className="py-4 px-6 md:px-8"
{ name: "Privacy", id: "/privacy" } buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
]} buttonTextClassName="font-medium"
button={{ text: "Cart", onClick: () => setCartOpen(true) }} />
className="py-4 px-6 md:px-8" </div>
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]" <div id="loading-section" data-section="loading-section">
buttonTextClassName="font-medium" <main className="min-h-screen flex items-center justify-center pt-20">
/> <p className="text-foreground">Loading products...</p>
</div> </main>
<div id="loading-section" data-section="loading-section"> </div>
<main className="min-h-screen flex items-center justify-center pt-20"> <div id="footer" data-section="footer">
<p className="text-foreground">Loading products...</p> <FooterLogoReveal
</main> logoText="Glow Theory"
</div> leftLink={{ text: "Customer Support", href: "/#contact-support" }}
<div id="footer" data-section="footer"> rightLink={{ text: "Privacy Policy", href: "/privacy" }}
<FooterBaseReveal className="bg-[--background] text-[--foreground] py-6 px-4"
columns={[ linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
{ logoClassName="text-2xl font-bold tracking-tight"
title: "Support", items: [{ label: "Customer Support", href: "/#contact-support" }] />
}, </div>
{ </ReactLenis>
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"
columnTitleClassName="font-bold text-lg mb-2"
columnItemClassName="text-md"
/>
</div>
</ThemeProvider> </ThemeProvider>
); );
} }
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="medium" contentWidth="mediumLarge"
sizing="medium" sizing="largeSmall"
background="none" background="noise"
cardStyle="solid" cardStyle="gradient-mesh"
primaryButtonStyle="gradient" primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass" secondaryButtonStyle="radial-glow"
headingFontWeight="bold" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <ReactLenis root>
<NavbarLayoutFloatingOverlay <div id="nav" data-section="nav">
brandName="Glow Theory" <NavbarLayoutFloatingOverlay
navItems={[ brandName="Glow Theory"
{ name: "Home", id: "/" }, navItems={navItems}
{ name: "Live Shows", id: "/#live-shows" }, button={{ text: "Cart", onClick: () => setCartOpen(true) }}
{ name: "Support", id: "/#contact-support" }, className="py-4 px-6 md:px-8"
{ name: "Privacy", id: "/privacy" } buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
]} buttonTextClassName="font-medium"
button={{ text: "Cart", onClick: () => setCartOpen(true) }} />
className="py-4 px-6 md:px-8" </div>
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]" <div id="product-catalog" data-section="product-catalog">
buttonTextClassName="font-medium" <ProductCatalog
/> layout="page"
</div> products={products}
<div id="product-catalog" data-section="product-catalog"> searchValue={search}
<ProductCatalog onSearchChange={setSearch}
layout="page" searchPlaceholder="Search products..."
products={products} filters={filters}
searchValue={search} emptyMessage="No products found"
onSearchChange={setSearch} />
searchPlaceholder="Search products..." </div>
filters={filters} <div id="product-cart" data-section="product-cart">
emptyMessage="No products found" <ProductCart
/> isOpen={cartOpen}
</div> onClose={() => setCartOpen(false)}
<div id="product-cart" data-section="product-cart"> items={cartItems}
<ProductCart onQuantityChange={updateQuantity}
isOpen={cartOpen} onRemove={removeItem}
onClose={() => setCartOpen(false)} total={`$${cartTotal}`}
items={cartItems} buttons={[
onQuantityChange={updateQuantity} {
onRemove={removeItem} text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
total={`$${cartTotal}`} },
buttons={[ ]}
{ />
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout, </div>
}, <div id="footer" data-section="footer">
]} <FooterLogoReveal
/> logoText="Glow Theory"
</div> leftLink={{ text: "Customer Support", href: "/#contact-support" }}
<div id="footer" data-section="footer"> rightLink={{ text: "Privacy Policy", href: "/privacy" }}
<FooterBaseReveal className="bg-[--background] text-[--foreground] py-6 px-4"
columns={[ linkClassName="text-[--foreground] hover:text-[--primary-cta] transition-colors duration-200"
{ logoClassName="text-2xl font-bold tracking-tight"
title: "Support", items: [{ label: "Customer Support", href: "/#contact-support" }] />
}, </div>
{ </ReactLenis>
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"
columnTitleClassName="font-bold text-lg mb-2"
columnItemClassName="text-md"
/>
</div>
</ThemeProvider> </ThemeProvider>
); );
} }

4
src/app/styles/base.css
View File

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

28
src/app/styles/variables.css
View File

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

77
src/app/support/page.tsx
View File

@@ -1,77 +0,0 @@
"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>
);
}