24 Commits

Author SHA1 Message Date
b4d8444b36 Update src/app/page.tsx 2026-02-21 20:14:39 +00:00
a398c5e39d Update src/app/blog/page.tsx 2026-02-21 20:14:38 +00:00
d4133c0f0d Update src/app/shop/page.tsx 2026-02-21 20:13:55 +00:00
f7c50d6ee7 Update src/app/shop/[id]/page.tsx 2026-02-21 20:13:54 +00:00
a282b1225b Update src/app/privacy/page.tsx 2026-02-21 20:13:54 +00:00
48ef8ff917 Update src/app/page.tsx 2026-02-21 20:13:53 +00:00
5e02715c8a Update src/app/blog/page.tsx 2026-02-21 20:13:52 +00:00
aafcd380b9 Update src/app/shop/[id]/page.tsx 2026-02-21 20:10:40 +00:00
417ca64eb2 Update src/app/shop/page.tsx 2026-02-21 20:08:19 +00:00
b4369d6ab3 Update src/app/shop/[id]/page.tsx 2026-02-21 20:08:19 +00:00
0a3cd391f2 Update src/app/page.tsx 2026-02-21 20:08:18 +00:00
776129b0d9 Update src/app/layout.tsx 2026-02-21 20:08:17 +00:00
3bfaef8b07 Update src/app/blog/page.tsx 2026-02-21 20:08:16 +00:00
6425110e7c Merge version_2 into main
Merge version_2 into main
2026-02-21 20:07:35 +00:00
8f4677fef7 Update src/app/styles/variables.css 2026-02-21 20:07:31 +00:00
46b66d4ce0 Update src/app/shop/page.tsx 2026-02-21 20:07:30 +00:00
7febacfbd5 Update src/app/shop/[id]/page.tsx 2026-02-21 20:07:29 +00:00
a93b26c3b2 Add src/app/privacy/page.tsx 2026-02-21 20:07:29 +00:00
dd8986ec2b Update src/app/page.tsx 2026-02-21 20:07:28 +00:00
2ee9872bfc Update src/app/layout.tsx 2026-02-21 20:07:27 +00:00
6986b97578 Update src/app/blog/page.tsx 2026-02-21 20:07:26 +00:00
d8aa54659e Merge version_1 into main
Merge version_1 into main
2026-02-21 19:55:56 +00:00
56865d74c6 Merge version_1 into main
Merge version_1 into main
2026-02-21 19:55:12 +00:00
056d61a79b Merge version_1 into main
Merge version_1 into main
2026-02-21 19:52:36 +00:00
7 changed files with 360 additions and 265 deletions

View File

@@ -1,14 +1,44 @@
"use client";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import { useBlogPosts } from "@/hooks/useBlogPosts";
const posts = [
{
id: '1',
category: ['Skincare', 'Tips'],
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',
authorName: 'Lee Coral',
authorAvatar: 'https://img.b2bpic.net/free-photo/studio-shot-sensual-woman-pink-suit_197531-16807.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/online-workshop-demontration-beauty-products_259150-60056.jpg?_wi=2',
authorName: 'Ariel S.',
authorAvatar: 'https://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.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/foundation-bottles-advertising-arrangement_23-2149511243.jpg?_wi=2',
authorName: 'Glow Theory',
authorAvatar: 'https://img.b2bpic.net/free-photo/minimal-assortment-beauty-products_23-2148961325.jpg',
date: 'Oct 10, 2023',
}
];
export default function BlogPage() {
const { posts, isLoading } = useBlogPosts();
return (
<ThemeProvider
@@ -23,49 +53,41 @@ export default function BlogPage() {
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<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" }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<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" }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<div id="blog" data-section="blog">
<BlogCardThree
blogs={posts}
title="Featured Articles"
description="Explore our latest insights"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
)}
<div id="blog" data-section="blog">
<BlogCardTwo
blogs={posts}
title="Featured Articles"
description="Explore our latest insights"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</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>
<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>
</ThemeProvider>
);
}
}

View File

@@ -1404,4 +1404,4 @@ export default function RootLayout({
</ServiceWrapper>
</html>
);
}
}

View File

@@ -34,6 +34,8 @@ export default function LandingPage() {
{ 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"
@@ -47,14 +49,13 @@ 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: "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" },
]}
mediaAnimation="opacity"
tagAnimation="opacity"
buttonAnimation="opacity"
className="bg-[--background] text-[--foreground]"
titleClassName="text-5xl md:text-7xl lg:text-8xl font-thin tracking-wide"
@@ -116,9 +117,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", imageAlt: "Skincare Essentials Bundle" },
{ 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", imageAlt: "Cosmetic Pro Kit" },
{ 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" },
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
@@ -224,4 +225,4 @@ export default function LandingPage() {
</div>
</ThemeProvider>
);
}
}

81
src/app/privacy/page.tsx Normal file
View File

@@ -0,0 +1,81 @@
"use client";
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';
export default function PrivacyPage() {
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: "Shop", id: "/shop" },
]}
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="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. 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: [
{
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."
}
]
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Glow Theory"
leftLink={{ text: "Customer Support", href: "/#contact-support" }}
rightLink={{ text: "Home", href: "/" }}
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>
);
}

View File

@@ -2,7 +2,6 @@
import { Suspense, use, useCallback } from "react";
import { useRouter } from "next/navigation";
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';
@@ -88,33 +87,31 @@ function ProductPageContent({ params }: ProductPageProps) {
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="loading-section" data-section="loading-section">
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading product...</p>
</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" }}
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>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="loading-section" data-section="loading-section">
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading product...</p>
</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" }}
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>
);
}
@@ -133,41 +130,39 @@ function ProductPageContent({ params }: ProductPageProps) {
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="not-found-section" data-section="not-found-section">
<main className="min-h-screen flex items-center justify-center pt-20">
<div className="text-center">
<p className="text-foreground mb-4">Product not found</p>
<button
onClick={() => router.push("/shop")}
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
>
Back to Shop
</button>
</div>
</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" }}
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>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="not-found-section" data-section="not-found-section">
<main className="min-h-screen flex items-center justify-center pt-20">
<div className="text-center">
<p className="text-foreground mb-4">Product not found</p>
<button
onClick={() => router.push("/shop")}
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
>
Back to Shop
</button>
</div>
</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" }}
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>
);
}
@@ -185,64 +180,62 @@ function ProductPageContent({ params }: ProductPageProps) {
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="product-detail-card" data-section="product-detail-card">
<ProductDetailCard
layout="page"
name={product.name}
price={product.price}
salePrice={meta.salePrice}
rating={product.rating || 0}
description={product.description}
images={images}
variants={variants.length > 0 ? variants : undefined}
quantity={quantityVariant}
ribbon={meta.ribbon}
inventoryStatus={meta.inventoryStatus}
inventoryQuantity={meta.inventoryQuantity}
sku={meta.sku}
buttons={[
{ text: "Add To Cart", onClick: handleAddToCart },
{ text: "Buy Now", onClick: handleBuyNow },
]}
/>
</div>
<div id="product-cart" data-section="product-cart">
<ProductCart
isOpen={cartOpen}
onClose={() => setCartOpen(false)}
items={cartItems}
onQuantityChange={updateQuantity}
onRemove={removeItem}
total={`$${cartTotal}`}
buttons={[
{
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" }}
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>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="product-detail-card" data-section="product-detail-card">
<ProductDetailCard
layout="page"
name={product.name}
price={product.price}
salePrice={meta.salePrice}
rating={product.rating || 0}
description={product.description}
images={images}
variants={variants.length > 0 ? variants : undefined}
quantity={quantityVariant}
ribbon={meta.ribbon}
inventoryStatus={meta.inventoryStatus}
inventoryQuantity={meta.inventoryQuantity}
sku={meta.sku}
buttons={[
{ text: "Add To Cart", onClick: handleAddToCart },
{ text: "Buy Now", onClick: handleBuyNow },
]}
/>
</div>
<div id="product-cart" data-section="product-cart">
<ProductCart
isOpen={cartOpen}
onClose={() => setCartOpen(false)}
items={cartItems}
onQuantityChange={updateQuantity}
onRemove={removeItem}
total={`$${cartTotal}`}
buttons={[
{
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" }}
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>
);
}
}

View File

@@ -1,7 +1,6 @@
"use client";
import { Suspense, useCallback } from "react";
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';
@@ -30,7 +29,10 @@ function ShopPageContent() {
getCheckoutItems,
} = useCart();
const { checkout, isLoading: isCheckoutLoading } = useCheckout();
const {
checkout,
isLoading: isCheckoutLoading
} = useCheckout();
const handleCheckout = useCallback(async () => {
if (cartItems.length === 0) return;
@@ -55,33 +57,31 @@ function ShopPageContent() {
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="loading-section" data-section="loading-section">
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading products...</p>
</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" }}
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>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="loading-section" data-section="loading-section">
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading products...</p>
</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" }}
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>
);
}
@@ -99,54 +99,52 @@ function ShopPageContent() {
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="product-catalog" data-section="product-catalog">
<ProductCatalog
layout="page"
products={products}
searchValue={search}
onSearchChange={setSearch}
searchPlaceholder="Search products..."
filters={filters}
emptyMessage="No products found"
/>
</div>
<div id="product-cart" data-section="product-cart">
<ProductCart
isOpen={cartOpen}
onClose={() => setCartOpen(false)}
items={cartItems}
onQuantityChange={updateQuantity}
onRemove={removeItem}
total={`$${cartTotal}`}
buttons={[
{
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" }}
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>
<div id="navbar" data-section="navbar">
<NavbarLayoutFloatingOverlay
brandName="Glow Theory"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
className="py-4 px-6 md:px-8"
buttonClassName="shadow-md !bg-[--primary-cta] !text-[--primary-cta-text]"
buttonTextClassName="font-medium"
/>
</div>
<div id="product-catalog" data-section="product-catalog">
<ProductCatalog
layout="page"
products={products}
searchValue={search}
onSearchChange={setSearch}
searchPlaceholder="Search products..."
filters={filters}
emptyMessage="No products found"
/>
</div>
<div id="product-cart" data-section="product-cart">
<ProductCart
isOpen={cartOpen}
onClose={() => setCartOpen(false)}
items={cartItems}
onQuantityChange={updateQuantity}
onRemove={removeItem}
total={`$${cartTotal}`}
buttons={[
{
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" }}
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>
);
}

View File

@@ -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);