Add src/app/products/page.tsx
This commit is contained in:
255
src/app/products/page.tsx
Normal file
255
src/app/products/page.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
|
||||
export default function ProductsPage() {
|
||||
const allProducts = [
|
||||
{
|
||||
id: "1", name: "Luminous Serum", price: "$58", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-serum-bottle-hand-orange-background_185193-162127.jpg", imageAlt: "Luminous Serum bottle"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Deep Moisture Cream", price: "$72", imageSrc: "http://img.b2bpic.net/free-photo/woman-caring-her-skin-standing-near-mirror-bathroom_1301-3694.jpg", imageAlt: "Deep Moisture Cream jar"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Pure Radiance Cleanser", price: "$42", imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-spa-essentials-background-home-decor_53876-128208.jpg", imageAlt: "Pure Radiance Cleanser"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Overnight Recovery Mask", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-serum-bottle-hand-orange-background_185193-162127.jpg", imageAlt: "Overnight Recovery Mask jar"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Benefits", id: "benefits" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{ text: "Shop Now", href: "/products" }}
|
||||
brandName="Radiant Skin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
logoText="Our Complete Product Range"
|
||||
description="Explore our full collection of premium skincare products, each carefully formulated with natural ingredients to address your specific skin concerns and deliver visible results."
|
||||
buttons={[
|
||||
{ text: "Explore All Products", href: "#products" },
|
||||
{ text: "Back to Home", href: "/" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/indoor-shot-pleased-curly-haired-woman-puts-green-hydrogel-patches-eyes-rejuvenate-skin-smiles-tenderly-poses-bare-shoulders-isolated-beige-studio-background-beauty-concept_273609-59328.jpg"
|
||||
imageAlt="Radiant Skin Product Collection"
|
||||
frameStyle="card"
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Products page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
title="Premium Skincare Essentials"
|
||||
description="Each product in our collection has been developed with a focus on efficacy and sustainability. From targeted serums to nourishing creams, discover the perfect additions to your skincare routine. All products include detailed descriptions, available variants, and current discount information to help you make the best choice."
|
||||
products={allProducts}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-details" data-section="product-details">
|
||||
<div className="py-16 px-6 bg-background">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-4xl font-bold mb-8 text-foreground">Product Details & Information</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
||||
<div className="bg-card rounded-lg p-6">
|
||||
<h3 className="text-2xl font-semibold mb-4 text-foreground">Luminous Serum</h3>
|
||||
<p className="text-foreground mb-4"><strong>Price:</strong> $58 (Regular price: $68)</p>
|
||||
<p className="text-foreground mb-4"><strong>Current Discount:</strong> 15% off</p>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground mb-2">Available Variants:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-foreground">
|
||||
<li>30ml Standard Bottle</li>
|
||||
<li>60ml Value Size</li>
|
||||
<li>Travel Size (15ml)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="mt-4 text-foreground">Our signature serum combines vitamin C, hyaluronic acid, and botanical extracts to brighten and hydrate your complexion. Suitable for all skin types.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-lg p-6">
|
||||
<h3 className="text-2xl font-semibold mb-4 text-foreground">Deep Moisture Cream</h3>
|
||||
<p className="text-foreground mb-4"><strong>Price:</strong> $72 (Regular price: $82)</p>
|
||||
<p className="text-foreground mb-4"><strong>Current Discount:</strong> 12% off</p>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground mb-2">Available Variants:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-foreground">
|
||||
<li>50ml Standard Jar</li>
|
||||
<li>100ml Large Size</li>
|
||||
<li>Travel Size (15ml)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="mt-4 text-foreground">Rich, luxurious cream with shea butter, ceramides, and nourishing oils. Provides intense hydration and barrier support for dry and sensitive skin.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-lg p-6">
|
||||
<h3 className="text-2xl font-semibold mb-4 text-foreground">Pure Radiance Cleanser</h3>
|
||||
<p className="text-foreground mb-4"><strong>Price:</strong> $42 (Regular price: $48)</p>
|
||||
<p className="text-foreground mb-4"><strong>Current Discount:</strong> 12% off</p>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground mb-2">Available Variants:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-foreground">
|
||||
<li>Gel Formula (200ml)</li>
|
||||
<li>Cream Formula (200ml)</li>
|
||||
<li>Travel Size (50ml)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="mt-4 text-foreground">Gentle yet effective cleanser that removes impurities without stripping natural oils. Infused with chamomile and aloe vera for soothing properties.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-lg p-6">
|
||||
<h3 className="text-2xl font-semibold mb-4 text-foreground">Overnight Recovery Mask</h3>
|
||||
<p className="text-foreground mb-4"><strong>Price:</strong> $65 (Regular price: $75)</p>
|
||||
<p className="text-foreground mb-4"><strong>Current Discount:</strong> 13% off</p>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground mb-2">Available Variants:</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-foreground">
|
||||
<li>60ml Luxury Jar</li>
|
||||
<li>100ml Professional Size</li>
|
||||
<li>Sheet Mask Set (5 sheets)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="mt-4 text-foreground">Intensive overnight treatment mask with peptides and antioxidants. Wake up to restored, rejuvenated skin with enhanced luminosity and smoothness.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-lg p-8 mb-12">
|
||||
<h3 className="text-2xl font-semibold mb-6 text-foreground">Bundle Offers & Promotions</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="border border-primary-cta rounded-lg p-4">
|
||||
<p className="font-semibold text-lg text-primary-cta mb-2">Complete Skincare Routine</p>
|
||||
<p className="text-foreground mb-3">Serum + Cream + Cleanser</p>
|
||||
<p className="text-foreground"><strong>Bundle Price:</strong> $155 (Save $17)</p>
|
||||
<p className="text-sm text-foreground mt-2">25% savings when purchased together</p>
|
||||
</div>
|
||||
<div className="border border-primary-cta rounded-lg p-4">
|
||||
<p className="font-semibold text-lg text-primary-cta mb-2">Luxury Travel Set</p>
|
||||
<p className="text-foreground mb-3">All 4 Products in Travel Sizes</p>
|
||||
<p className="text-foreground"><strong>Bundle Price:</strong> $68 (Save $12)</p>
|
||||
<p className="text-sm text-foreground mt-2">15% savings when purchased together</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Product FAQs"
|
||||
description="Get detailed answers about our products, usage instructions, and everything you need to know to make the most of your purchase."
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What variants are available for each product?", content: "Each of our core products comes in multiple sizes to suit your needs: Standard sizes for daily use, Value/Professional sizes for frequent users or professionals, and Travel sizes (15-50ml) perfect for on-the-go. Additionally, some products offer different formulation variants (e.g., Gel vs Cream Cleanser, Sheet Mask vs Jar format for Recovery Mask) to accommodate different preferences and skin types."
|
||||
},
|
||||
{
|
||||
id: "2", title: "Are there current discounts available?", content: "Yes! All our products are currently on sale with discounts ranging from 12-15% off regular prices. These promotions apply to all variant sizes. Additionally, we offer bundle discounts when purchasing multiple products together - save up to 25% on our Complete Skincare Routine bundle. Check our product pages for the latest promotional offers."
|
||||
},
|
||||
{
|
||||
id: "3", title: "How do I choose the right product variant for my skin?", content: "Choose based on your usage frequency and skin needs: Standard sizes (30-50ml) last about 3-4 months with daily use, Value sizes last 6+ months, and Travel sizes are ideal for testing or travel. For formulations, our Gel Cleanser is better for oily/combination skin, while Cream Cleanser suits dry/sensitive skin. When in doubt, we recommend starting with our Travel Size to test compatibility."
|
||||
},
|
||||
{
|
||||
id: "4", title: "What is the recommended order of application?", content: "For optimal results, follow this routine: 1) Cleanse with Pure Radiance Cleanser, 2) Apply Luminous Serum while skin is still damp, 3) Follow with Deep Moisture Cream, 4) Use Overnight Recovery Mask 2-3 times weekly before bed. This layering ensures each product absorbs properly and maximum efficacy."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Can I purchase products in different variants together?", content: "Absolutely! Mix and match different variants to create your perfect bundle. Our bundle pricing applies to any combination of our products, so you might purchase a standard 50ml Deep Moisture Cream with a 15ml Travel Size Serum, and both receive the bundle discount. This flexibility makes it easy to build the perfect routine for your needs."
|
||||
}
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-woman-doing-self-care-treatment-home_23-2148974362.jpg"
|
||||
imageAlt="Product skincare routine"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Questions About Products?"
|
||||
title="Get Expert Skincare Advice"
|
||||
description="Subscribe to our newsletter for personalized product recommendations, skincare tips, and exclusive access to new variants and bundle offers."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Subscribe"
|
||||
termsText="We respect your privacy. Unsubscribe anytime. We send personalized skincare recommendations and product updates."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Radiant Skin"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "Products", href: "/products" },
|
||||
{ label: "Bundles", href: "/products" },
|
||||
{ label: "Best Sellers", href: "/products" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "About", items: [
|
||||
{ label: "Our Story", href: "/" },
|
||||
{ label: "Ingredients", href: "/" },
|
||||
{ label: "Sustainability", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Product FAQs", href: "#faq" },
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "Shipping & Returns", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Radiant Skin. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user