|
|
|
|
@@ -6,52 +6,51 @@ 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 TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
|
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
|
|
|
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
|
|
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
|
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
|
|
|
import { Award, Beaker, CheckCircle, Globe, Heart, Leaf, Mail, Sparkles } from 'lucide-react';
|
|
|
|
|
import { Sparkles, Zap, Users, MapPin, MessageCircle } from 'lucide-react';
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider
|
|
|
|
|
defaultButtonVariant="hover-bubble"
|
|
|
|
|
defaultTextAnimation="reveal-blur"
|
|
|
|
|
defaultButtonVariant="hover-magnetic"
|
|
|
|
|
defaultTextAnimation="entrance-slide"
|
|
|
|
|
borderRadius="rounded"
|
|
|
|
|
contentWidth="small"
|
|
|
|
|
sizing="largeSmallSizeLargeTitles"
|
|
|
|
|
background="aurora"
|
|
|
|
|
cardStyle="gradient-bordered"
|
|
|
|
|
primaryButtonStyle="double-inset"
|
|
|
|
|
secondaryButtonStyle="solid"
|
|
|
|
|
headingFontWeight="extrabold"
|
|
|
|
|
contentWidth="medium"
|
|
|
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
|
|
|
background="none"
|
|
|
|
|
cardStyle="glass-depth"
|
|
|
|
|
primaryButtonStyle="gradient"
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
headingFontWeight="semibold"
|
|
|
|
|
>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarStyleCentered
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "Home", id: "hero" },
|
|
|
|
|
{ name: "About", id: "about" },
|
|
|
|
|
{ name: "Products", id: "products" },
|
|
|
|
|
{ name: "Reviews", id: "testimonials" },
|
|
|
|
|
{ name: "Home", id: "/" },
|
|
|
|
|
{ name: "Treatments", id: "treatments" },
|
|
|
|
|
{ name: "Technology", id: "technology" },
|
|
|
|
|
{ name: "Team", id: "team" },
|
|
|
|
|
{ name: "Contact", id: "contact" }
|
|
|
|
|
]}
|
|
|
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
|
|
|
brandName="Lumière Skincare"
|
|
|
|
|
button={{ text: "Book Appointment", href: "contact" }}
|
|
|
|
|
brandName="Clínica Titanium"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroLogoBillboard
|
|
|
|
|
logoText="Lumière"
|
|
|
|
|
description="Discover the power of nature-inspired skincare. Our carefully crafted formulations combine premium botanicals with cutting-edge science to transform your skin."
|
|
|
|
|
logoText="Clínica Titanium"
|
|
|
|
|
description="Experience premium medical aesthetic treatments in a sophisticated environment. Advanced technology, expert dermatologists, and personalized care for your beauty transformation."
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Shop Collection", href: "products" },
|
|
|
|
|
{ text: "Learn More", href: "about" }
|
|
|
|
|
{ text: "Book Appointment", href: "contact" },
|
|
|
|
|
{ text: "Learn More", href: "treatments" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
background={{ variant: "aurora" }}
|
|
|
|
|
imageSrc="http://img.b2bpic.net/free-photo/set-skincare-bottles-containers-isolated-white-background_181624-35890.jpg"
|
|
|
|
|
imageAlt="Luxury skincare products"
|
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
|
imageSrc="https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1200&h=600&fit=crop"
|
|
|
|
|
imageAlt="Modern medical aesthetic clinic interior"
|
|
|
|
|
mediaAnimation="opacity"
|
|
|
|
|
frameStyle="card"
|
|
|
|
|
/>
|
|
|
|
|
@@ -60,34 +59,34 @@ export default function LandingPage() {
|
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
|
<InlineImageSplitTextAbout
|
|
|
|
|
heading={[
|
|
|
|
|
{ type: "text", content: "Crafted with" },
|
|
|
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/modern-kitchen-composition-with-healthy-ingredients_23-2147859416.jpg", alt: "Natural ingredients" },
|
|
|
|
|
{ type: "text", content: "pure intention" }
|
|
|
|
|
{ type: "text", content: "Aesthetic Excellence" },
|
|
|
|
|
{ type: "image", src: "https://images.unsplash.com/photo-1584308666744-24d5f400f6f5?w=400&h=300&fit=crop", alt: "Premium skincare products" },
|
|
|
|
|
{ type: "text", content: "Meets Science" }
|
|
|
|
|
]}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Our Story", href: "#about" },
|
|
|
|
|
{ text: "Ingredients", href: "#features" }
|
|
|
|
|
{ text: "Our Approach", href: "#about" },
|
|
|
|
|
{ text: "Treatments", href: "treatments" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="products" data-section="products">
|
|
|
|
|
<div id="treatments" data-section="treatments">
|
|
|
|
|
<ProductCardOne
|
|
|
|
|
title="Our Signature Collection"
|
|
|
|
|
description="Premium skincare essentials designed for radiant, healthy skin. Each product is formulated with natural ingredients to deliver visible results."
|
|
|
|
|
tag="Best Sellers"
|
|
|
|
|
title="Our Treatments"
|
|
|
|
|
description="Comprehensive medical aesthetic solutions designed to enhance your natural beauty with cutting-edge technology and expert care."
|
|
|
|
|
tag="Premium Services"
|
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
|
products={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", name: "Luminous Facial Serum", price: "$68", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottles-stones-light-background_185193-162140.jpg", imageAlt: "Luminous Facial Serum bottle"
|
|
|
|
|
id: "1", name: "Facial Rejuvenation", price: "From $200", imageSrc: "https://images.unsplash.com/photo-1556740756-56e744b814f9?w=500&h=500&fit=crop", imageAlt: "Facial rejuvenation treatment"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2", name: "Velvet Hydration Cream", price: "$72", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hand-holding-face-cream-container_23-2148213310.jpg", imageAlt: "Velvet Hydration Cream jar"
|
|
|
|
|
id: "2", name: "Body Contouring", price: "From $400", imageSrc: "https://images.unsplash.com/photo-1579154204601-01d82cb6c869?w=500&h=500&fit=crop", imageAlt: "Body contouring treatment"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3", name: "Gentle Botanical Cleanser", price: "$48", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hydro-alcoholic-gel-with-bottle_23-2148775339.jpg", imageAlt: "Gentle Botanical Cleanser bottle"
|
|
|
|
|
id: "3", name: "Laser Hair Removal", price: "From $150", imageSrc: "https://images.unsplash.com/photo-1599654723657-1db98a1eb2a8?w=500&h=500&fit=crop", imageAlt: "Laser hair removal treatment"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
|
@@ -97,26 +96,22 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
|
<div id="technology" data-section="technology">
|
|
|
|
|
<FeatureBento
|
|
|
|
|
title="Why Choose Lumière"
|
|
|
|
|
description="Our commitment to quality, sustainability, and results-driven formulations sets us apart in the skincare industry."
|
|
|
|
|
title="Advanced Technology"
|
|
|
|
|
description="We utilize state-of-the-art medical equipment and proven techniques to deliver exceptional results with minimal downtime."
|
|
|
|
|
features={[
|
|
|
|
|
{
|
|
|
|
|
title: "Natural Ingredients", description: "100% natural and organic botanical extracts sourced responsibly", bentoComponent: "reveal-icon", icon: Leaf
|
|
|
|
|
title: "Laser Technology", description: "FDA-approved laser systems for precise and effective treatments", bentoComponent: "reveal-icon", icon: Zap
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Science-Backed", description: "Formulations developed with dermatologists and skin experts", bentoComponent: "icon-info-cards", items: [
|
|
|
|
|
{ icon: Beaker, label: "Research", value: "15+ years" },
|
|
|
|
|
{ icon: Award, label: "Awards", value: "12 won" },
|
|
|
|
|
{ icon: CheckCircle, label: "Proven", value: "98% satisfied" }
|
|
|
|
|
]
|
|
|
|
|
title: "Medical Expertise", description: "Board-certified dermatologists with international training", bentoComponent: "reveal-icon", icon: Users
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Eco-Friendly Packaging", description: "Recyclable, biodegradable materials that protect our planet", bentoComponent: "reveal-icon", icon: Globe
|
|
|
|
|
title: "Premium Environment", description: "Luxury clinic setting with privacy and comfort", bentoComponent: "reveal-icon", icon: Sparkles
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Cruelty-Free", description: "Never tested on animals, always ethical production", bentoComponent: "reveal-icon", icon: Heart
|
|
|
|
|
title: "Personalized Care", description: "Customized treatment plans for each patient", bentoComponent: "reveal-icon", icon: Users
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
@@ -125,54 +120,33 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<TestimonialCardFifteen
|
|
|
|
|
testimonial="Lumière completely transformed my skin routine. After just three weeks, my complexion is noticeably clearer, more radiant, and my pores have visibly minimized. The products feel luxurious and the results speak for themselves."
|
|
|
|
|
rating={5}
|
|
|
|
|
author="Sarah Mitchell, Beauty Editor"
|
|
|
|
|
avatars={[
|
|
|
|
|
{ src: "http://img.b2bpic.net/free-photo/headshot-charismatic-pleasant-friendly-european-woman-short-chestnut-haircut-smiling-positive-feeling-happy-upbeat-enjoying-lifes-casually-talking-friends-amused-cheerful-standing-white-background_176420-34680.jpg", alt: "Sarah Mitchell" },
|
|
|
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer testimonial" },
|
|
|
|
|
{ src: "http://img.b2bpic.net/free-photo/emotive-headshot-portrait-cheerful-young-woman_1163-5176.jpg", alt: "Customer testimonial" },
|
|
|
|
|
{ src: "http://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera_1301-3392.jpg", alt: "Customer testimonial" }
|
|
|
|
|
]}
|
|
|
|
|
ratingAnimation="slide-up"
|
|
|
|
|
avatarsAnimation="slide-up"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="faq" data-section="faq">
|
|
|
|
|
<FaqSplitMedia
|
|
|
|
|
title="Frequently Asked Questions"
|
|
|
|
|
description="Find answers to common questions about our products, ingredients, and skincare guidance."
|
|
|
|
|
tag="Help & Support"
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
faqs={[
|
|
|
|
|
<div id="team" data-section="team">
|
|
|
|
|
<TeamCardEleven
|
|
|
|
|
title="Medical Staff"
|
|
|
|
|
description="Our experienced team of dermatologists and aesthetic specialists are committed to your beauty and health."
|
|
|
|
|
groups={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", title: "Are your products suitable for sensitive skin?", content: "Yes, all Lumière products are formulated with sensitive skin in mind. We use hypoallergenic ingredients and avoid common irritants. However, we recommend doing a patch test first and consulting with a dermatologist if you have specific concerns."
|
|
|
|
|
id: "physicians", groupTitle: "Physicians", members: [
|
|
|
|
|
{
|
|
|
|
|
id: "1", title: "Dr. María García", subtitle: "Lead Dermatologist", detail: "maria@clinicatitanium.com", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2", title: "Dr. Carlos Mendez", subtitle: "Aesthetic Specialist", detail: "carlos@clinicatitanium.com", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2", title: "How long does it take to see results?", content: "Most customers notice visible improvements in skin texture and radiance within 2-3 weeks of consistent use. For more significant results with fine lines and hyperpigmentation, expect 6-8 weeks of regular application."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3", title: "Can I use all products together?", content: "Absolutely! Our products are designed to work synergistically. We recommend: Cleanser → Toner (if used) → Serum → Moisturizer → SPF (AM only). For best results, follow our detailed skincare routine guide on our website."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "4", title: "Are your products vegan and cruelty-free?", content: "Yes, all Lumière products are 100% vegan, cruelty-free, and certified by international animal welfare organizations. We never test on animals and source all ingredients ethically."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "5", title: "What is your return policy?", content: "We offer a 30-day satisfaction guarantee. If you're not completely happy with your purchase, simply return the product in its original condition for a full refund, no questions asked."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "6", title: "Do you offer international shipping?", content: "Yes, we ship to over 50 countries worldwide. Shipping costs and delivery times vary by location. Most international orders arrive within 10-14 business days."
|
|
|
|
|
id: "specialists", groupTitle: "Specialists", members: [
|
|
|
|
|
{
|
|
|
|
|
id: "3", title: "Sofía Ramírez", subtitle: "Laser Technician", detail: "sofia@clinicatitanium.com", imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "4", title: "Ana Martínez", subtitle: "Skincare Specialist", detail: "ana@clinicatitanium.com", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
imageSrc="http://img.b2bpic.net/free-photo/woman-doing-self-care-treatment-indoors_23-2148974284.jpg"
|
|
|
|
|
imageAlt="Skincare routine setup"
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
mediaPosition="left"
|
|
|
|
|
faqsAnimation="slide-up"
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
@@ -180,57 +154,57 @@ export default function LandingPage() {
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactCenter
|
|
|
|
|
tag="Newsletter"
|
|
|
|
|
tagIcon={Mail}
|
|
|
|
|
title="Join Our Beauty Community"
|
|
|
|
|
description="Subscribe to receive exclusive skincare tips, product launches, and special promotions delivered to your inbox."
|
|
|
|
|
background={{ variant: "aurora" }}
|
|
|
|
|
tag="Get In Touch"
|
|
|
|
|
tagIcon={MapPin}
|
|
|
|
|
title="Book Your Consultation"
|
|
|
|
|
description="Visit Clínica Titanium in Montevideo. Contact us today to schedule your personalized aesthetic consultation with our expert team."
|
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
inputPlaceholder="Enter your email"
|
|
|
|
|
buttonText="Subscribe"
|
|
|
|
|
termsText="We respect your privacy. Unsubscribe anytime. No spam, just skincare wisdom."
|
|
|
|
|
buttonText="Schedule Appointment"
|
|
|
|
|
termsText="We respect your privacy. Your information is secure and confidential."
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
<FooterBaseCard
|
|
|
|
|
logoText="Lumière"
|
|
|
|
|
logoText="Clínica Titanium"
|
|
|
|
|
columns={[
|
|
|
|
|
{
|
|
|
|
|
title: "Shop", items: [
|
|
|
|
|
{ label: "All Products", href: "#products" },
|
|
|
|
|
{ label: "Skincare Sets", href: "#products" },
|
|
|
|
|
{ label: "Best Sellers", href: "#products" },
|
|
|
|
|
{ label: "New Arrivals", href: "#products" }
|
|
|
|
|
title: "Services", items: [
|
|
|
|
|
{ label: "Facial Rejuvenation", href: "treatments" },
|
|
|
|
|
{ label: "Body Contouring", href: "treatments" },
|
|
|
|
|
{ label: "Laser Hair Removal", href: "treatments" },
|
|
|
|
|
{ label: "Advanced Technology", href: "technology" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Company", items: [
|
|
|
|
|
{ label: "About Us", href: "#about" },
|
|
|
|
|
{ label: "Our Story", href: "#about" },
|
|
|
|
|
{ label: "Careers", href: "#" },
|
|
|
|
|
{ label: "Blog", href: "#" }
|
|
|
|
|
title: "About", items: [
|
|
|
|
|
{ label: "Our Team", href: "team" },
|
|
|
|
|
{ label: "Technology", href: "technology" },
|
|
|
|
|
{ label: "Our Clinic", href: "#about" },
|
|
|
|
|
{ label: "Expertise", href: "team" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Support", items: [
|
|
|
|
|
{ label: "FAQ", href: "#faq" },
|
|
|
|
|
{ label: "Contact Us", href: "#contact" },
|
|
|
|
|
{ label: "Shipping Info", href: "#" },
|
|
|
|
|
{ label: "Returns", href: "#" }
|
|
|
|
|
title: "Contact", items: [
|
|
|
|
|
{ label: "Montevideo, Uruguay", href: "#" },
|
|
|
|
|
{ label: "Book Appointment", href: "contact" },
|
|
|
|
|
{ label: "WhatsApp", href: "#" },
|
|
|
|
|
{ label: "Email", href: "contact" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Legal", items: [
|
|
|
|
|
{ label: "Privacy Policy", href: "#" },
|
|
|
|
|
{ label: "Terms of Service", href: "#" },
|
|
|
|
|
{ label: "Sustainability", href: "#" }
|
|
|
|
|
{ label: "Medical Disclaimer", href: "#" }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
copyrightText="© 2025 Lumière Skincare. All rights reserved."
|
|
|
|
|
copyrightText="© 2025 Clínica Titanium. All rights reserved. Medical Aesthetic Clinic, Montevideo."
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|