138 lines
7.0 KiB
TypeScript
138 lines
7.0 KiB
TypeScript
"use client";
|
|
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Sparkles, Zap, Star, Heart, Crown } from "lucide-react";
|
|
|
|
export default function ProductsPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="slide-background"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="LuxeGlow"
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Products", id: "/products" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Pricing", id: "/pricing" },
|
|
{ name: "FAQ", id: "/faq" }
|
|
]}
|
|
button={{
|
|
text: "Shop Now", href: "/products"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Our Complete Skincare Collection"
|
|
description="Discover our full range of premium skincare products designed to address every skin concern and deliver visible results"
|
|
tag="All Products"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Luminous Hydrating Serum", price: "$68", imageSrc: "https://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242151.jpg", imageAlt: "Hydrating serum bottle with light blue formulation"
|
|
},
|
|
{
|
|
id: "2", name: "Time-Defying Face Cream", price: "$85", imageSrc: "https://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242156.jpg", imageAlt: "Premium anti-aging face cream in luxury packaging"
|
|
},
|
|
{
|
|
id: "3", name: "Gentle Cleansing Oil", price: "$52", imageSrc: "https://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242153.jpg", imageAlt: "Pure cleansing oil for makeup removal"
|
|
},
|
|
{
|
|
id: "4", name: "Revitalizing Sheet Mask", price: "$12", imageSrc: "https://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242152.jpg", imageAlt: "Premium sheet mask treatment for instant glow"
|
|
},
|
|
{
|
|
id: "5", name: "Brightening Vitamin C Serum", price: "$75", imageSrc: "https://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242151.jpg", imageAlt: "Vitamin C brightening serum"
|
|
},
|
|
{
|
|
id: "6", name: "Nourishing Night Cream", price: "$92", imageSrc: "https://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242156.jpg", imageAlt: "Rich night moisturizer for deep repair"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardEight
|
|
title="The Science Behind Our Formulations"
|
|
description="Each product is engineered to deliver powerful results while maintaining the gentleness your skin deserves"
|
|
tag="How It Works"
|
|
tagIcon={Zap}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
features={[
|
|
{
|
|
id: "1", title: "Deep Hydration", tags: ["Hydration", "Moisture"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/beautiful-girl-standing-with-cream_1157-29503.jpg", imageAlt: "Hydration benefits visualization"
|
|
},
|
|
{
|
|
id: "2", title: "Protective Shield", tags: ["Protection", "Barrier"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/beautiful-woman-applying-moisturizer-her-face-bathroom_637285-3386.jpg", imageAlt: "Skin protection technology demonstration"
|
|
},
|
|
{
|
|
id: "3", title: "Natural Nourishment", tags: ["Natural", "Nourishment"],
|
|
imageSrc: "https://img.b2bpic.net/free-photo/woman-applying-cream-face-while-looking-mirror_23-2148875051.jpg", imageAlt: "Natural ingredients and their benefits"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardOne
|
|
title="Choose Your Skincare Journey"
|
|
description="Select the perfect plan to achieve your best skin"
|
|
tag="Pricing Plans"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "1", badge: "Starter", badgeIcon: Star,
|
|
price: "$49", subtitle: "Essential skincare basics", features: [
|
|
"Gentle Cleansing Oil", "Hydrating Serum", "Basic moisturizer", "Access to skincare tips"
|
|
],
|
|
buttons: []
|
|
},
|
|
{
|
|
id: "2", badge: "Most Popular", badgeIcon: Heart,
|
|
price: "$129", subtitle: "Complete daily routine", features: [
|
|
"All Starter products", "Premium face cream", "Weekly face mask", "Email skincare support", "15% member discount"
|
|
],
|
|
buttons: []
|
|
},
|
|
{
|
|
id: "3", badge: "Luxury", badgeIcon: Crown,
|
|
price: "$249", subtitle: "Full professional regimen", features: [
|
|
"All Premium products", "Exclusive serums & treatments", "Monthly deliveries", "Priority VIP support", "Free consultations", "25% member discount"
|
|
],
|
|
buttons: []
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<FooterLogoReveal logoText="LuxeGlow" />
|
|
</ThemeProvider>
|
|
);
|
|
} |