Initial commit
This commit is contained in:
192
src/app/products/page.tsx
Normal file
192
src/app/products/page.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
"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",
|
||||
description: "Our proprietary blend of hyaluronic acid and botanical extracts penetrates multiple skin layers to deliver intense, long-lasting 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",
|
||||
description: "Advanced antioxidant complex protects against environmental stressors while strengthening your skin 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",
|
||||
description: "Plant-based vitamins and peptides work synergistically to improve texture, elasticity, and radiance",
|
||||
imageSrc: "https://img.b2bpic.net/free-photo/woman-applying-cream-face-while-looking-mirror_23-2148875051.jpg",
|
||||
imageAlt: "Natural ingredients and their benefits"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</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"
|
||||
]
|
||||
},
|
||||
{
|
||||
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"
|
||||
]
|
||||
},
|
||||
{
|
||||
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"
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterLogoReveal logoText="LuxeGlow" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user