Files
16c82bca-99d3-4f1d-a89c-41e…/src/app/page.tsx
2026-03-24 04:01:49 +00:00

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>
);
}