3 Commits

Author SHA1 Message Date
0f19e4b852 Update src/app/page.tsx 2026-06-12 17:37:13 +00:00
66b29b464a Update src/app/styles/variables.css 2026-06-12 17:36:39 +00:00
b61f29c6ce Update src/app/page.tsx 2026-06-12 17:36:39 +00:00
2 changed files with 53 additions and 116 deletions

View File

@@ -6,10 +6,10 @@ import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout"; import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import ProductCardOne from "@/components/sections/product/ProductCardOne"; import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureBento from "@/components/sections/feature/FeatureBento"; import FeatureBento from "@/components/sections/feature/FeatureBento";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen"; import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia"; import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenter from "@/components/sections/contact/ContactCenter"; import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Mail, Leaf, Droplet, Sprout, Wind } from "lucide-react"; import { Mail, Leaf, Droplet, Sprout, Wind } from "lucide-react";
export default function SkincareTemplatePage() { export default function SkincareTemplatePage() {
@@ -77,25 +77,13 @@ export default function SkincareTemplatePage() {
description="Discover our carefully curated skincare essentials designed to nourish and revitalize your skin. Worldwide shipping available." description="Discover our carefully curated skincare essentials designed to nourish and revitalize your skin. Worldwide shipping available."
products={[ products={[
{ {
id: "1", 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"
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", 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"
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", 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"
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" gridVariant="three-columns-all-equal-width"
@@ -111,20 +99,13 @@ export default function SkincareTemplatePage() {
description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping." description="Scientifically-formulated skincare products that deliver visible results with natural, sustainable ingredients. Available for worldwide shipping."
features={[ features={[
{ {
title: "Worldwide Shipping", title: "Worldwide Shipping", description: "Fast and reliable delivery to over 150 countries worldwide", bentoComponent: "globe"
description: "Fast and reliable delivery to over 150 countries worldwide",
bentoComponent: "globe"
}, },
{ {
title: "Clinically Proven", title: "Clinically Proven", description: "Dermatologist-tested and proven effective in clinical trials", bentoComponent: "line-chart"
description: "Dermatologist-tested and proven effective in clinical trials",
bentoComponent: "line-chart"
}, },
{ {
title: "Sustainable", title: "Sustainable", description: "Eco-conscious packaging and ethical sourcing practices", bentoComponent: "orbiting-icons", centerIcon: Leaf,
description: "Eco-conscious packaging and ethical sourcing practices",
bentoComponent: "orbiting-icons",
centerIcon: Leaf,
items: [ items: [
{ icon: Droplet, ring: 1 }, { icon: Droplet, ring: 1 },
{ icon: Sprout, ring: 2 }, { icon: Sprout, ring: 2 },
@@ -139,115 +120,71 @@ export default function SkincareTemplatePage() {
</div> </div>
<div id="reviews" data-section="reviews"> <div id="reviews" data-section="reviews">
<TestimonialCardFifteen <TestimonialCardSix
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." title="What Our Customers Say"
rating={5} description="Real feedback from our happy clients around the world."
author="Sarah Mitchell, Beauty Editor" testimonials={[
avatars={[ {
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", alt: "Sarah Mitchell" }, 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"
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif", alt: "Customer testimonial" }, },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif", alt: "Customer testimonial" }, {
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif", alt: "Customer testimonial" } 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 feels 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"
}
]} ]}
ratingAnimation="slide-up" animationType="slide-up"
avatarsAnimation="slide-up" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
/> />
</div> </div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitMedia <FaqDouble
title="Frequently Asked Questions" title="Got Questions? We Have Answers."
description="Everything you need to know about our skincare products, worldwide shipping, and delivery." description="Everything you need to know about our skincare products, worldwide shipping, and delivery."
faqs={[ faqs={[
{ {
id: "1", 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."
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", 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."
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", 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."
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", 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."
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."
} }
]} ]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image4.webp"
imageAlt="Skincare routine and wellness"
mediaPosition="left"
textboxLayout="default" textboxLayout="default"
faqsAnimation="slide-up" faqsAnimation="slide-up"
mediaAnimation="slide-up" useInvertedBackground={false}
useInvertedBackground={true}
animationType="smooth" animationType="smooth"
/> />
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactText
tag="Newsletter" 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."
title="Get Your Glow On" buttons={[
description="Subscribe to our newsletter for skincare tips, product launches, and exclusive worldwide shipping offers delivered to your inbox." { text: "Subscribe" }
tagIcon={Mail} ]}
background={{ variant: "plain" }} background={{ variant: "plain" }}
useInvertedBackground={false} useInvertedBackground={false}
inputPlaceholder="Enter your email" animationType="reveal-blur"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe anytime."
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterLogoReveal
logoText="Luminé" logoText="Luminé"
columns={[ leftLink={{ text: "Moisturizers", href: "#products" }}
{ rightLink={{ text: "Contact Us", href: "#contact" }}
title: "Product",
items: [
{ label: "Moisturizers", href: "#products" },
{ label: "Serums", href: "#products" },
{ label: "Masks", href: "#products" },
{ label: "Bundles", href: "#products" }
]
},
{
title: "Company",
items: [
{ label: "About Us", href: "#about" },
{ label: "Sustainability", href: "#about" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" }
]
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "#contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Worldwide Shipping", href: "#" },
{ label: "Returns", href: "#" }
]
},
{
title: "Connect",
items: [
{ label: "Instagram", href: "#" },
{ label: "Facebook", href: "#" },
{ label: "Pinterest", href: "#" },
{ label: "TikTok", href: "#" }
]
}
]}
copyrightText="© 2025 Luminé Skincare. All rights reserved."
/> />
</div> </div>
</ThemeProvider> </ThemeProvider>

View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #fcf6ec; --background: #0a0a0a;
--card: #f3ede2; --card: #1a1a1a;
--foreground: #2e2521; --foreground: #f5f5f5;
--primary-cta: #2e2521; --primary-cta: #ffdf7d;
--primary-cta-text: #fcf6ec; --primary-cta-text: #0a0a0a;
--secondary-cta: #ffffff; --secondary-cta: #1a1a1a;
--secondary-cta-text: #2e2521; --secondary-cta-text: #ffffff;
--accent: #b2a28b; --accent: #b8860b;
--background-accent: #b2a28b; --background-accent: #8b6914;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);