Initial commit
This commit is contained in:
365
src/app/page.tsx
Normal file
365
src/app/page.tsx
Normal file
@@ -0,0 +1,365 @@
|
||||
"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="noiseDiagonalGradient"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
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,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x51310",
|
||||
imageAlt: "skin hydration science diagram",
|
||||
},
|
||||
{
|
||||
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: Earth,
|
||||
text: "Ethically Sourced",
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
text: "Cruelty-Free",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/branch-near-rake-cosmetics_23-2147787970.jpg",
|
||||
imageAlt: "skin hydration science diagram",
|
||||
},
|
||||
{
|
||||
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,
|
||||
imageSrc: "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",
|
||||
imageAlt: "skin hydration science diagram",
|
||||
},
|
||||
]}
|
||||
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: "Sophia R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",
|
||||
imageAlt: "Sophia R.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Liam K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-cheerful-girl-baking-kitchen-making-dough-holding-recipe-book-having-ideas_1258-195141.jpg",
|
||||
imageAlt: "Liam K.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Olivia M.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020787.jpg",
|
||||
imageAlt: "Olivia M.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Noah J.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brunette-female-blue-shirt-grey-background_613910-7970.jpg",
|
||||
imageAlt: "Noah J.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Ava P.",
|
||||
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: "Ethan C.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sitting-beach_613910-806.jpg",
|
||||
imageAlt: "Ethan C.",
|
||||
},
|
||||
]}
|
||||
cardTitle="Hear From Our Happy Customers"
|
||||
cardTag="Real Results"
|
||||
buttons={[
|
||||
{
|
||||
text: "Read All Reviews",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Vogue",
|
||||
"Allure",
|
||||
"Cosmopolitan",
|
||||
"Glamour",
|
||||
"Harper's Bazaar",
|
||||
"ELLE",
|
||||
"Beauty Insider",
|
||||
]}
|
||||
title="Featured In"
|
||||
description="Trusted by leading beauty experts and publications."
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user