214 lines
15 KiB
TypeScript
214 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Mail, Leaf, Droplet, Sprout, Wind } from "lucide-react";
|
|
|
|
export default function SkincareTemplatePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Luminé Skincare"
|
|
navItems={[
|
|
{ name: "Products", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Benefits", id: "benefits" },
|
|
{ name: "Reviews", id: "reviews" },
|
|
{ name: "Depoiments", id: "client-depoiments" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Luminé"
|
|
description="Pure, natural skincare formulated for radiant, healthy skin. Discover the power of botanical ingredients and scientific innovation."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp"
|
|
imageAlt="Luxury skincare products with natural ingredients"
|
|
frameStyle="card"
|
|
buttons={[
|
|
{ text: "Shop Now", href: "#products" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Crafted with care and precision using nature's finest elements and cutting-edge skincare science to deliver exceptional results for your skin" },
|
|
{ type: "image", src: "https://img.b2bpic.net/free-photo/make-up-brushes-pile-wild-flowers-wooden-background_482257-9797.jpg", alt: "Natural ingredients" },
|
|
{ type: "text", content: "" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
useInvertedBackground={true}
|
|
buttons={[
|
|
{ text: "Learn More", href: "#benefits" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Our Signature Collection"
|
|
description="Discover our carefully curated skincare essentials designed to nourish and revitalize your skin. Worldwide shipping available."
|
|
products={[
|
|
{
|
|
id: "1", name: "Hydrating Moisturizer", price: "$68", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp", imageAlt: "Hydrating Moisturizer bottle"
|
|
},
|
|
{
|
|
id: "2", name: "Radiance Serum", price: "$85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image3.webp", imageAlt: "Radiance Serum bottle"
|
|
},
|
|
{
|
|
id: "3", name: "Purifying Face Mask", price: "$52", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image1.webp", imageAlt: "Purifying Face Mask jar"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="benefits" data-section="benefits">
|
|
<FeatureBento
|
|
title="Why Choose Luminé"
|
|
description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping."
|
|
features={[
|
|
{
|
|
title: "Worldwide Shipping", description: "Fast and reliable delivery to over 150 countries worldwide", bentoComponent: "globe"
|
|
},
|
|
{
|
|
title: "Clinically Proven", description: "Dermatologist-tested and proven effective in clinical trials", bentoComponent: "line-chart"
|
|
},
|
|
{
|
|
title: "Sustainable", description: "Eco-conscious packaging and ethical sourcing practices", bentoComponent: "orbiting-icons", centerIcon: Leaf,
|
|
items: [
|
|
{ icon: Droplet, ring: 1 },
|
|
{ icon: Sprout, ring: 2 },
|
|
{ icon: Wind, ring: 3 }
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardSix
|
|
title="What Our Customers Say"
|
|
description="Real feedback from our happy clients around the world."
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", handle: "@sarah_beauty", testimonial: "Luminé skincare has completely transformed my routine. My skin feels more radiant and healthy than ever before. I love that it's made with natural ingredients I can trust. Plus, worldwide shipping made it so easy to get my products delivered wherever I am.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2", name: "David Lee", handle: "@david_skincare", testimonial: "I've struggled with sensitive skin for years, but Luminé products have been a game-changer. No irritation, just clear, smooth skin. Highly recommend!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif", imageAlt: "David Lee"
|
|
},
|
|
{
|
|
id: "3", name: "Jessica Wong", handle: "@jwong_glows", testimonial: "The Radiance Serum is my new holy grail! My complexion has never looked better. Thank you, Luminé, for these incredible products.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif", imageAlt: "Jessica Wong"
|
|
},
|
|
{
|
|
id: "4", name: "Michael Chen", handle: "@m_chen_skin", testimonial: "Finally, a skincare line that truly delivers on its promises. Sustainable, effective, and luxurious. I'm a customer for life.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif", imageAlt: "Michael Chen"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="client-depoiments" data-section="client-depoiments">
|
|
<TestimonialCardFive
|
|
title="Client Success Stories"
|
|
description="Hear directly from our satisfied customers who have experienced the Luminé difference."
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Olivia Rodriguez", date: "2023-11-01", title: "Absolutely love the results!", quote: "Luminé's products have transformed my skin. It's never felt so smooth and looked so radiant. Highly recommend to everyone looking for a true glow-up!", tag: "Verified Purchase", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", avatarAlt: "Olivia Rodriguez"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Thorne", date: "2023-10-25", title: "Game-changer for sensitive skin", quote: "As someone with very sensitive skin, finding effective products is a challenge. Luminé has been gentle yet incredibly effective. My skin barrier feels stronger and looks healthier.", tag: "Sensitive Skin User", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif", avatarAlt: "Marcus Thorne"
|
|
},
|
|
{
|
|
id: "3", name: "Sophia Chang", date: "2023-09-15", title: "My new skincare obsession!", quote: "The Hydrating Moisturizer is a dream! It's lightweight, deeply moisturizing, and gives my skin a dewy finish. I can't imagine my routine without it now.", tag: "Beauty Enthusiast", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif", avatarAlt: "Sophia Chang"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Got Questions? We Have Answers."
|
|
description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does it take to see results?", content: "Most customers notice visible improvements in skin texture and radiance within 2-4 weeks of consistent use. For more significant results like reduced fine lines or hyperpigmentation, allow 6-8 weeks."
|
|
},
|
|
{
|
|
id: "2", title: "Are your products suitable for sensitive skin?", content: "Yes! All Luminé products are formulated to be gentle and non-irritating. We use natural ingredients and avoid common irritants. We recommend patch testing first if you have very reactive skin."
|
|
},
|
|
{
|
|
id: "3", title: "Do you offer worldwide shipping?", content: "Absolutely! We ship to over 150 countries worldwide. Standard shipping typically takes 7-14 business days depending on your location. Express shipping options are also available for faster delivery."
|
|
},
|
|
{
|
|
id: "4", title: "What is your return policy?", content: "We offer a 60-day satisfaction guarantee on all purchases. If you're not completely happy with your skincare, return it for a full refund or exchange. Worldwide returns are processed efficiently through our international shipping partners."
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Get Your Glow On! Subscribe to our newsletter for skincare tips, product launches, and exclusive worldwide shipping offers delivered to your inbox. We respect your privacy. Unsubscribe anytime."
|
|
buttons={[
|
|
{ text: "Subscribe" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
animationType="reveal-blur"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Luminé"
|
|
leftLink={{ text: "Moisturizers", href: "#products" }}
|
|
rightLink={{ text: "Contact Us", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |