260 lines
9.4 KiB
TypeScript
260 lines
9.4 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { Instagram, MessageCircle } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "home",
|
|
},
|
|
{
|
|
name: "Benefits",
|
|
id: "benefits",
|
|
},
|
|
{
|
|
name: "Product",
|
|
id: "product",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Visage D'Or"
|
|
button={{
|
|
text: "Chat on WhatsApp",
|
|
href: "https://wa.me/?text=Hello%2C%20I%27m%20interested%20in%20Visage%20D%27Or!",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroLogoBillboard
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
logoText="Visage D'Or"
|
|
description="Advanced serum with gold peptides + microbiome technology, for younger, clearer skin every day."
|
|
buttons={[
|
|
{
|
|
text: "Chat on WhatsApp",
|
|
href: "https://wa.me/?text=Hello%2C%20I%27m%20interested%20in%20Visage%20D%27Or!",
|
|
},
|
|
{
|
|
text: "Get More Info",
|
|
href: "#product",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/vertical-beauty-portrait-ginger-woman-with-long-hair-reclines-mirror-table-while-holding-bottle-body-cream-looking_171337-958.jpg"
|
|
imageAlt="Visage D'Or product with glowing skin"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="benefits" data-section="benefits">
|
|
<FeatureCardTwentySeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "benefit-1",
|
|
title: "Reduce Acne Appearance",
|
|
description: "Our microbiome technology balances skin, minimizing breakouts and promoting a clearer complexion.",
|
|
},
|
|
{
|
|
id: "benefit-2",
|
|
title: "Improve Skin Tone",
|
|
description: "Niacinamide works to visibly enhance skin tone, reducing the appearance of dark spots and hyperpigmentation.",
|
|
},
|
|
{
|
|
id: "benefit-3",
|
|
title: "Minimize Pores",
|
|
description: "Formulated to refine skin texture, reducing the visibility of enlarged pores for a smoother look.",
|
|
},
|
|
{
|
|
id: "benefit-4",
|
|
title: "Deep Hydration",
|
|
description: "Hyaluronic acid delivers intense moisture, plumping the skin and restoring its natural barrier.",
|
|
},
|
|
{
|
|
id: "benefit-5",
|
|
title: "Smooth Fine Lines",
|
|
description: "Gold peptides revitalize the skin, diminishing the look of fine lines and promoting a youthful radiance.",
|
|
},
|
|
]}
|
|
title="Experience a Transformation, Powered by Science"
|
|
description="Visage D'Or combines cutting-edge ingredients to target your specific concerns, revealing skin that feels as good as it looks. Unlock the secret to a balanced, youthful complexion."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Unveil Your Skin's True Radiance"
|
|
description="Many women struggle with persistent skin concerns like acne, dark spots, large pores, and fine lines that diminish confidence. Visage D'Or understands these challenges and offers a premium solution rooted in science and safety. Our formulation is FDA & ANVISA compliant, ensuring a safe and regulated path to beautiful skin."
|
|
bulletPoints={[
|
|
{
|
|
title: "Targeted Solutions",
|
|
description: "Effectively addresses acne, dark spots, and aging concerns.",
|
|
},
|
|
{
|
|
title: "Scientifically Formulated",
|
|
description: "Infused with gold peptides and microbiome technology for optimal results.",
|
|
},
|
|
{
|
|
title: "Trusted & Compliant",
|
|
description: "Crafted with FDA & ANVISA compliant ingredients, ensuring safety and quality.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-woman-looking-mirror_23-2148709277.jpg"
|
|
imageAlt="Woman with clear radiant skin"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="product" data-section="product">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "visage-dor-serum-1",
|
|
name: "Visage D'Or Rejuvenating Serum",
|
|
price: "$99.00",
|
|
variant: "30ml",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/natural-jojoba-oil-composition_23-2149047770.jpg?_wi=1",
|
|
imageAlt: "Visage D'Or Rejuvenating Serum Bottle",
|
|
},
|
|
{
|
|
id: "visage-dor-serum-2",
|
|
name: "Visage D'Or Hydrating Complex",
|
|
price: "$85.00",
|
|
variant: "50ml",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/natural-jojoba-oil-composition_23-2149047770.jpg?_wi=2",
|
|
imageAlt: "Visage D'Or Hydrating Complex Bottle",
|
|
},
|
|
{
|
|
id: "visage-dor-serum-3",
|
|
name: "Visage D'Or Brightening Elixir",
|
|
price: "$110.00",
|
|
variant: "20ml",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/natural-jojoba-oil-composition_23-2149047770.jpg?_wi=3",
|
|
imageAlt: "Visage D'Or Brightening Elixir Bottle",
|
|
},
|
|
]}
|
|
title="Visage D'Or Anti-Aging Serum"
|
|
description="A luxurious, potent formula crafted to deliver visible results. Experience the confidence of clear, youthful, and radiant skin, backed by our 7-day satisfaction guarantee. Try it with confidence!"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={true}
|
|
testimonial="Visage D'Or has truly transformed my skin! My dark spots are fading, and my complexion looks so much clearer. I feel more confident than ever. I've recommended it to all my friends!"
|
|
rating={5}
|
|
author="Maria S."
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/simple-shadow-profile-picture-template_742173-8847.jpg",
|
|
alt: "Sarah J.",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-woman-with-perfect-skin-natural-makeup-beige-background-with-pigtails-cheerful-good-mood-blue-spring-summer-dress_343596-8277.jpg",
|
|
alt: "Jessica L.",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-beauty-woman-with-ideal-skin-looking-camera-grey-background_633478-648.jpg",
|
|
alt: "Olivia P.",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beauty-portrait-happy-smiling-woman_171337-12337.jpg",
|
|
alt: "Anna R.",
|
|
},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Connect with Experts"
|
|
title="Ready for Radiant Skin?"
|
|
description="Talk to our specialists now for fast support and personalized recommendations on your skincare journey. Start your transformation today or fill out our form for tailored advice."
|
|
buttons={[
|
|
{
|
|
text: "Start Chat on WhatsApp",
|
|
href: "https://wa.me/?text=Hello%2C%20I%27m%20interested%20in%20Visage%20D%27Or!",
|
|
},
|
|
{
|
|
text: "Get Personalized Recommendation",
|
|
href: "#contact-form",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Visage D'Or"
|
|
copyrightText="© 2024 Visage D'Or. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: MessageCircle,
|
|
href: "https://wa.me/?text=Hello%2C%20I%27m%20interested%20in%20Visage%20D%27Or!",
|
|
ariaLabel: "WhatsApp",
|
|
},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com",
|
|
ariaLabel: "Instagram",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|