Update src/app/products/page.tsx
This commit is contained in:
@@ -2,9 +2,9 @@
|
|||||||
|
|
||||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
||||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import { Sparkles, Zap, Star, Heart, Crown } from "lucide-react";
|
import { Sparkles, Zap, Star, Heart, Crown } from "lucide-react";
|
||||||
|
|
||||||
@@ -49,55 +49,54 @@ export default function ProductsPage() {
|
|||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
products={[
|
products={[
|
||||||
{
|
{
|
||||||
id: "1", name: "Luminous Hydrating Serum", price: "$68", imageSrc: "https://images.unsplash.com/photo-1556228578-8c89e6adf883?w=400&h=400&fit=crop", imageAlt: "Hydrating serum bottle with light blue formulation"
|
id: "1", name: "Luminous Hydrating Serum", price: "$68", imageSrc: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=600&h=600&fit=crop", imageAlt: "Hydrating serum bottle with light blue formulation"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2", name: "Time-Defying Face Cream", price: "$85", imageSrc: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=400&h=400&fit=crop", imageAlt: "Premium anti-aging face cream in luxury packaging"
|
id: "2", name: "Time-Defying Face Cream", price: "$85", imageSrc: "https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?w=600&h=600&fit=crop", imageAlt: "Premium anti-aging face cream in luxury packaging"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3", name: "Gentle Cleansing Oil", price: "$52", imageSrc: "https://images.unsplash.com/photo-1576426863848-c21cb6cb1e6d?w=400&h=400&fit=crop", imageAlt: "Pure cleansing oil for makeup removal"
|
id: "3", name: "Gentle Cleansing Oil", price: "$52", imageSrc: "https://images.unsplash.com/photo-1556228578-8c89e6adf883?w=600&h=600&fit=crop", imageAlt: "Pure cleansing oil for makeup removal"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4", name: "Revitalizing Sheet Mask", price: "$12", imageSrc: "https://images.unsplash.com/photo-1556228578-8c89e6adf883?w=400&h=400&fit=crop", imageAlt: "Premium sheet mask treatment for instant glow"
|
id: "4", name: "Revitalizing Sheet Mask", price: "$12", imageSrc: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=600&h=600&fit=crop", imageAlt: "Premium sheet mask treatment for instant glow"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "5", name: "Brightening Vitamin C Serum", price: "$75", imageSrc: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=400&h=400&fit=crop", imageAlt: "Vitamin C brightening serum"
|
id: "5", name: "Brightening Vitamin C Serum", price: "$75", imageSrc: "https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?w=600&h=600&fit=crop", imageAlt: "Vitamin C brightening serum"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "6", name: "Nourishing Night Cream", price: "$92", imageSrc: "https://images.unsplash.com/photo-1576426863848-c21cb6cb1e6d?w=400&h=400&fit=crop", imageAlt: "Rich night moisturizer for deep repair"
|
id: "6", name: "Nourishing Night Cream", price: "$92", imageSrc: "https://images.unsplash.com/photo-1556228578-8c89e6adf883?w=600&h=600&fit=crop", imageAlt: "Rich night moisturizer for deep repair"
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
<div id="features" data-section="features">
|
||||||
<FeatureHoverPattern
|
<FeatureCardEight
|
||||||
title="The Science Behind Our Formulations"
|
title="The Science Behind Our Formulations"
|
||||||
description="Each product is engineered to deliver powerful results while maintaining the gentleness your skin deserves"
|
description="Each product is engineered to deliver powerful results while maintaining the gentleness your skin deserves"
|
||||||
tag="How It Works"
|
tag="How It Works"
|
||||||
tagIcon={Zap}
|
tagIcon={Zap}
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground="invertDefault"
|
useInvertedBackground="invertDefault"
|
||||||
animationType="slide-up"
|
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
icon: Sparkles,
|
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"
|
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://images.unsplash.com/photo-1556228578-8c89e6adf883?w=600&h=600&fit=crop", imageAlt: "Hydration benefits visualization"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Zap,
|
id: 2,
|
||||||
title: "Protective Shield", description: "Advanced antioxidant complex protects against environmental stressors while strengthening your skin barrier"
|
title: "Protective Shield", description: "Advanced antioxidant complex protects against environmental stressors while strengthening your skin barrier", imageSrc: "https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?w=600&h=600&fit=crop", imageAlt: "Skin protection technology demonstration"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Star,
|
id: 3,
|
||||||
title: "Natural Nourishment", description: "Plant-based vitamins and peptides work synergistically to improve texture, elasticity, and radiance"
|
title: "Natural Nourishment", description: "Plant-based vitamins and peptides work synergistically to improve texture, elasticity, and radiance", imageSrc: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=600&h=600&fit=crop", imageAlt: "Natural ingredients and their benefits"
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="pricing" data-section="pricing">
|
<div id="pricing" data-section="pricing">
|
||||||
<PricingCardTwo
|
<PricingCardOne
|
||||||
title="Choose Your Skincare Journey"
|
title="Choose Your Skincare Journey"
|
||||||
description="Select the perfect plan to achieve your best skin"
|
description="Select the perfect plan to achieve your best skin"
|
||||||
tag="Pricing Plans"
|
tag="Pricing Plans"
|
||||||
@@ -108,66 +107,27 @@ export default function ProductsPage() {
|
|||||||
plans={[
|
plans={[
|
||||||
{
|
{
|
||||||
id: "1", badge: "Starter", badgeIcon: Star,
|
id: "1", badge: "Starter", badgeIcon: Star,
|
||||||
price: "$49", subtitle: "Essential skincare basics", buttons: [
|
price: "$49", subtitle: "Essential skincare basics", features: [
|
||||||
{ text: "Get Started", href: "/products" },
|
|
||||||
{ text: "Learn More", href: "/pricing" }
|
|
||||||
],
|
|
||||||
features: [
|
|
||||||
"Gentle Cleansing Oil", "Hydrating Serum", "Basic moisturizer", "Access to skincare tips"
|
"Gentle Cleansing Oil", "Hydrating Serum", "Basic moisturizer", "Access to skincare tips"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2", badge: "Most Popular", badgeIcon: Heart,
|
id: "2", badge: "Most Popular", badgeIcon: Heart,
|
||||||
price: "$129", subtitle: "Complete daily routine", buttons: [
|
price: "$129", subtitle: "Complete daily routine", features: [
|
||||||
{ text: "Get Started", href: "/products" },
|
|
||||||
{ text: "Contact Sales", href: "/contact" }
|
|
||||||
],
|
|
||||||
features: [
|
|
||||||
"All Starter products", "Premium face cream", "Weekly face mask", "Email skincare support", "15% member discount"
|
"All Starter products", "Premium face cream", "Weekly face mask", "Email skincare support", "15% member discount"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3", badge: "Luxury", badgeIcon: Crown,
|
id: "3", badge: "Luxury", badgeIcon: Crown,
|
||||||
price: "$249", subtitle: "Full professional regimen", buttons: [
|
price: "$249", subtitle: "Full professional regimen", features: [
|
||||||
{ text: "Get Started", href: "/products" },
|
|
||||||
{ text: "Contact Sales", href: "/contact" }
|
|
||||||
],
|
|
||||||
features: [
|
|
||||||
"All Premium products", "Exclusive serums & treatments", "Monthly deliveries", "Priority VIP support", "Free consultations", "25% member discount"
|
"All Premium products", "Exclusive serums & treatments", "Monthly deliveries", "Priority VIP support", "Free consultations", "25% member discount"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FooterSimple
|
<FooterLogoReveal logoText="LuxeGlow" />
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
title: "Navigate", items: [
|
|
||||||
{ label: "Home", href: "/" },
|
|
||||||
{ label: "Products", href: "/products" },
|
|
||||||
{ label: "Pricing", href: "/pricing" },
|
|
||||||
{ label: "FAQ", href: "/faq" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Support", items: [
|
|
||||||
{ label: "Contact", href: "/contact" },
|
|
||||||
{ label: "Help Center", href: "/help" },
|
|
||||||
{ label: "Skincare Guide", href: "/guide" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Legal", items: [
|
|
||||||
{ label: "Privacy Policy", href: "/privacy" },
|
|
||||||
{ label: "Terms of Service", href: "/terms" },
|
|
||||||
{ label: "Return Policy", href: "/returns" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
bottomLeftText="© 2025 LuxeGlow. All rights reserved."
|
|
||||||
bottomRightText="Made with Webild"
|
|
||||||
/>
|
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user