237 lines
7.1 KiB
TypeScript
237 lines
7.1 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="large"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Products",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="RadiantSkin"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlay
|
|
title="Radiance in Every Drop."
|
|
description="Formulated with pure, botanical ingredients for skin that glows naturally. Experience the science of healthy, radiant skincare."
|
|
buttons={[
|
|
{
|
|
text: "Shop Now",
|
|
href: "#products",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-vector/elegant-minimalist-nature-event-twitter-post_23-2148907928.jpg"
|
|
imageAlt="Luxurious skincare products on a clean background"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
tag="Our Philosophy"
|
|
title="Pure, Natural, and Unapologetically Clean."
|
|
buttons={[
|
|
{
|
|
text: "Discover Our Ingredients",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Botanical Face Cream",
|
|
price: "$48",
|
|
variant: "50ml",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-natural-self-care-products-assortment_23-2148980974.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Hydrating Glow Serum",
|
|
price: "$62",
|
|
variant: "30ml",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/serum-dropper-bottle-with-golden-liquid-peach-surface_23-2152010118.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Pure Gentle Cleanser",
|
|
price: "$35",
|
|
variant: "150ml",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/spa-instagram-stories-template-set_23-2148206895.jpg",
|
|
},
|
|
]}
|
|
title="Our Signature Collection"
|
|
description="Carefully crafted to restore, protect, and brighten your complexion."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
title: "Life Changing",
|
|
quote: "My skin has never felt this hydrated and smooth. I'm obsessed!",
|
|
name: "Sarah J.",
|
|
role: "Skincare Enthusiast",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-woman-talking-mobile-phone-looking-surprised-hears-amazing-news_1258-200261.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Total Game Changer",
|
|
quote: "The glow is real. RadiantSkin has simplified my routine perfectly.",
|
|
name: "Michael R.",
|
|
role: "Busy Professional",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-cheerful-girl-baking-kitchen-making-dough-holding-recipe-book-having-ideas_1258-195089.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Gentle and Effective",
|
|
quote: "Finally found products that don't irritate my sensitive skin.",
|
|
name: "Emily K.",
|
|
role: "Designer",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/ethnic-woman-with-floral-petals-face_23-2148105366.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Worth every cent!",
|
|
quote: "Results were visible in just one week. Highly recommended!",
|
|
name: "David L.",
|
|
role: "Model",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pretty-teenager-talking-phone_23-2148804651.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Natural Glow",
|
|
quote: "I love how my skin feels refreshed after every use.",
|
|
name: "Jessica M.",
|
|
role: "Content Creator",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-woman-talking-mobile-phone-looking-surprised-hears-amazing-news_1258-200261.jpg?_wi=2",
|
|
},
|
|
]}
|
|
title="Love from Our Community"
|
|
description="See why thousands trust RadiantSkin for their daily glow."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "animated-grid",
|
|
}}
|
|
tag="Stay Radiant"
|
|
title="Join the Glow Club."
|
|
description="Get exclusive skincare tips, early product access, and 10% off your first order."
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-woman-posing-confidently-outdoors-with-flowers_23-2149086698.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Shop",
|
|
items: [
|
|
{
|
|
label: "Face Cream",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Serums",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Cleansers",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "FAQ",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Contact Us",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Shipping",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|