252 lines
11 KiB
TypeScript
252 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Award, CheckCircle, Droplet, Globe, Heart, Leaf, Recycle, Shield, ShieldCheck, Sparkles, UserCheck } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "/"},
|
|
{
|
|
name: "Products", id: "/products"},
|
|
{
|
|
name: "Contact", id: "/contact"},
|
|
]}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x51310"
|
|
logoAlt="SKIN CARE Logo"
|
|
brandName="SKIN CARE"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Radiant Skin, Naturally Yours"
|
|
description="Discover SKIN CARE's exquisite range of natural products designed to nourish, protect, and revitalize your skin. Experience the glow of healthy, beautiful skin."
|
|
buttons={[
|
|
{
|
|
text: "Shop Now", href: "/products"},
|
|
{
|
|
text: "Learn More", href: "#about"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/attractive-young-woman-with-charming-smile-feeling-happy-free-after-graduating-university-relaxing-cafe-waiting-food-making-plans-future-ginger-woman-having-rest-indoors_273609-481.jpg", alt: "Customer 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-man-with-back-hair-arms-crossed-looking-camera_23-2148112769.jpg", alt: "Customer 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-blond-model-dressed-summer-hipster-clothes-trendy-girl-posing-street-background-funny-positive-woman_158538-5479.jpg", alt: "Customer 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", alt: "Customer 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-young-redhead-woman-with-charming-smile-healthy-clean-skin_273609-9036.jpg", alt: "Happy Customer"},
|
|
]}
|
|
avatarText="Loved by thousands of happy customers"
|
|
imageSrc="http://img.b2bpic.net/free-photo/branch-near-rake-cosmetics_23-2147787970.jpg"
|
|
imageAlt="Woman with glowing skin applying skincare product"
|
|
mediaAnimation="slide-up"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "Natural Ingredients", icon: Leaf
|
|
},
|
|
{
|
|
type: "text-icon", text: "Cruelty-Free", icon: Heart
|
|
},
|
|
{
|
|
type: "text-icon", text: "Dermatologist Approved", icon: ShieldCheck
|
|
},
|
|
{
|
|
type: "text-icon", text: "Sustainable Sourcing", icon: Globe
|
|
},
|
|
{
|
|
type: "text-icon", text: "Visible Results", icon: Sparkles
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={false}
|
|
tag="Our Philosophy"
|
|
title="Embrace Your Natural Beauty"
|
|
description="At SKIN CARE, we believe in harnessing the power of nature to create effective and gentle products. Our formulations are crafted with ethically sourced ingredients, free from harsh chemicals, ensuring purity and potency."
|
|
subdescription="We are committed to sustainability, transparency, and delivering exceptional skincare solutions that make a visible difference."
|
|
icon={Sparkles}
|
|
imageSrc="http://img.b2bpic.net/free-photo/retaining-herbs_23-2147985319.jpg"
|
|
imageAlt="Natural skincare ingredients and botanical extracts"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Pure & Potent Ingredients", description: "We source the finest natural and organic ingredients, ensuring each product is packed with skin-loving nutrients without harsh chemicals.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mysterious-woman-posing-indoors-side-view_23-2149551261.jpg", imageAlt: "Close-up of a natural ingredient"},
|
|
items: [
|
|
{
|
|
icon: Leaf,
|
|
text: "Organic Extracts"},
|
|
{
|
|
icon: Droplet,
|
|
text: "Deep Hydration"},
|
|
{
|
|
icon: Shield,
|
|
text: "Protective Formulas"},
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
title: "Sustainable & Ethical", description: "Our dedication to the planet means using eco-friendly packaging and sustainable practices, so you can feel good about your beauty routine.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/composition-spa-treatment-cream-hair-brushes_23-2148645562.jpg", imageAlt: "Eco-friendly skincare packaging"},
|
|
items: [
|
|
{
|
|
icon: Recycle,
|
|
text: "Recyclable Packaging"},
|
|
{
|
|
icon: Globe,
|
|
text: "Ethically Sourced"},
|
|
{
|
|
icon: Heart,
|
|
text: "Cruelty-Free"},
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
title: "Dermatologist Approved", description: "Developed with expert guidance, our products are rigorously tested to ensure efficacy and gentleness for all skin types, even the most sensitive.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-self-care-treatment-indoors_23-2148974284.jpg", imageAlt: "Dermatologist examining skin"},
|
|
items: [
|
|
{
|
|
icon: CheckCircle,
|
|
text: "Clinically Tested"},
|
|
{
|
|
icon: UserCheck,
|
|
text: "Hypoallergenic"},
|
|
{
|
|
icon: Award,
|
|
text: "Proven Results"},
|
|
],
|
|
reverse: false
|
|
}
|
|
]}
|
|
title="The SKIN CARE Difference"
|
|
description="Our commitment to excellence shines through in every product. Discover what sets us apart."
|
|
tag="Why Choose Us"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Emily W.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg", imageAlt: "Emily W."},
|
|
{
|
|
id: "2", name: "David S.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-cheerful-girl-baking-kitchen-making-dough-holding-recipe-book-having-ideas_1258-195141.jpg", imageAlt: "David S."},
|
|
{
|
|
id: "3", name: "Sophia L.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020787.jpg", imageAlt: "Olivia M."},
|
|
{
|
|
id: "4", name: "Michael B.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brunette-female-blue-shirt-grey-background_613910-7970.jpg", imageAlt: "Noah J."},
|
|
{
|
|
id: "5", name: "Jessica A.", imageSrc: "http://img.b2bpic.net/free-photo/happy-cute-korean-girl-suit-opens-up-heart-shaped-box-with-romantic-gift-white-day-holiday-standing-suit-pink-background_1258-99176.jpg", imageAlt: "Ava P."},
|
|
{
|
|
id: "6", name: "Daniel F.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sitting-beach_613910-806.jpg", imageAlt: "Ethan C."},
|
|
]}
|
|
cardTitle="Real Stories from Our Skincare Enthusiasts"
|
|
cardTag="Customer Reviews"
|
|
buttons={[
|
|
{
|
|
text: "Read All Reviews", href: "#"},
|
|
]}
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"98% Customer Satisfaction", "100% Cruelty-Free", "500K+ Happy Customers", "Organic Certified", "Dermatologist Recommended", "Eco-Friendly Packaging"
|
|
]}
|
|
title="Our Skincare Impact"
|
|
description="Proudly sharing our commitment to quality, efficacy, and sustainability."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoSrc="http://img.b2bpic.net/free-photo/black-white-beauty-product_23-2151307248.jpg"
|
|
logoAlt="SKIN CARE Footer Logo"
|
|
logoText="SKIN CARE"
|
|
columns={[
|
|
{
|
|
title: "Products", items: [
|
|
{
|
|
label: "Face Care", href: "/products#face"},
|
|
{
|
|
label: "Hand Care", href: "/products#hand"},
|
|
{
|
|
label: "Foot Care", href: "/products#foot"},
|
|
{
|
|
label: "All Products", href: "/products"},
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Our Philosophy", href: "#"},
|
|
{
|
|
label: "Contact Us", href: "/contact"},
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
{
|
|
label: "Terms of Service", href: "#"},
|
|
{
|
|
label: "Cookie Policy", href: "#"},
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 SKIN CARE. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |