291 lines
13 KiB
TypeScript
291 lines
13 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 ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
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="none"
|
|
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 TO SKIN Logo"
|
|
brandName="SKIN TO SKIN"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Radiant Skin, Naturally Yours with Skin to Skin"
|
|
description="Discover Skin to Skin's exquisite range of natural products designed to nourish, protect, and revitalize your skin, crafted for Pakistani skin types. Experience the glow of healthy, beautiful skin."
|
|
buttons={[
|
|
{
|
|
text: "Shop Now", href: "#products"},
|
|
{
|
|
text: "Learn More", href: "#about"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-woman-1.jpg", alt: "Pakistani Customer 1"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-man-1.jpg", alt: "Pakistani Customer 2"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-woman-2.jpg", alt: "Pakistani Customer 3"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-woman-3.jpg", alt: "Pakistani Customer 4"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-woman-4.jpg", alt: "Happy Pakistani Customer"},
|
|
]}
|
|
avatarText="Loved by thousands of happy customers"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/hero-skincare-pakistan.jpg"
|
|
imageAlt="Pakistani 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 with Skin to Skin"
|
|
description="At Skin to Skin, 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 suitable for Pakistani skincare needs."
|
|
subdescription="We are committed to sustainability, transparency, and delivering exceptional skincare solutions that make a visible difference."
|
|
icon={Sparkles}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/pakistani-herbs-ingredients.jpg"
|
|
imageAlt="Natural Pakistani 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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/feature-pakistani-ingredient-closeup.jpg", imageAlt: "Close-up of a natural ingredient from Pakistan"},
|
|
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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/feature-eco-friendly-packaging.jpg", imageAlt: "Eco-friendly skincare packaging in a Pakistani context"},
|
|
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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/feature-dermatologist-examining-pakistani-skin.jpg", imageAlt: "Dermatologist examining Pakistani skin"},
|
|
items: [
|
|
{
|
|
icon: CheckCircle,
|
|
text: "Clinically Tested"},
|
|
{
|
|
icon: UserCheck,
|
|
text: "Hypoallergenic"},
|
|
{
|
|
icon: Award,
|
|
text: "Proven Results"},
|
|
],
|
|
reverse: false
|
|
}
|
|
]}
|
|
title="The Skin to Skin Difference"
|
|
description="Our commitment to excellence shines through in every product. Discover what sets us apart."
|
|
tag="Why Choose Us"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
title="Our Skincare Collection for Pakistani Skin"
|
|
description="Explore our range of natural and effective skincare products, specially formulated to address the unique needs of Pakistani skin types."
|
|
tag="Featured Products"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", brand: "Skin to Skin", name: "Brightening Saffron Face Wash", price: "PKR 1,200", rating: 4.8,
|
|
reviewCount: "250", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-saffron-facewash.jpg", imageAlt: "Brightening Saffron Face Wash"
|
|
},
|
|
{
|
|
id: "2", brand: "Skin to Skin", name: "Rose & Aloe Vera Hydrating Toner", price: "PKR 1,500", rating: 4.7,
|
|
reviewCount: "180", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-rose-aloe-toner.jpg", imageAlt: "Rose & Aloe Vera Hydrating Toner"
|
|
},
|
|
{
|
|
id: "3", brand: "Skin to Skin", name: "Ubtan Radiance Mask", price: "PKR 1,800", rating: 4.9,
|
|
reviewCount: "300", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-ubtan-mask.jpg", imageAlt: "Ubtan Radiance Mask"
|
|
},
|
|
{
|
|
id: "4", brand: "Skin to Skin", name: "Argan Oil & Vitamin E Serum", price: "PKR 2,500", rating: 4.9,
|
|
reviewCount: "220", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-argan-serum.jpg", imageAlt: "Argan Oil & Vitamin E Serum"
|
|
},
|
|
{
|
|
id: "5", brand: "Skin to Skin", name: "Herbal Glow Night Cream", price: "PKR 2,000", rating: 4.7,
|
|
reviewCount: "190", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-herbal-night-cream.jpg", imageAlt: "Herbal Glow Night Cream"
|
|
},
|
|
{
|
|
id: "6", brand: "Skin to Skin", name: "Turmeric & Neem Acne Spot Treatment", price: "PKR 900", rating: 4.5,
|
|
reviewCount: "150", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/product-turmeric-neem-treatment.jpg", imageAlt: "Turmeric & Neem Acne Spot Treatment"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Aisha K.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-aisha.jpg", imageAlt: "Aisha K."},
|
|
{
|
|
id: "2", name: "Bilal S.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-bilal.jpg", imageAlt: "Bilal S."},
|
|
{
|
|
id: "3", name: "Zara L.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-zara.jpg", imageAlt: "Zara L."},
|
|
{
|
|
id: "4", name: "Omer B.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-omer.jpg", imageAlt: "Omer B."},
|
|
{
|
|
id: "5", name: "Fatima A.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-fatima.jpg", imageAlt: "Fatima A."},
|
|
{
|
|
id: "6", name: "Imran F.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/pakistan/testimonial-imran.jpg", imageAlt: "Imran F."},
|
|
]}
|
|
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 to Skin Footer Logo"
|
|
logoText="Skin to Skin"
|
|
columns={[
|
|
{
|
|
title: "Products", items: [
|
|
{
|
|
label: "Face Care", href: "#products"},
|
|
{
|
|
label: "Hand Care", href: "#products"},
|
|
{
|
|
label: "Foot Care", href: "#products"},
|
|
{
|
|
label: "All Products", href: "#products"},
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Our Philosophy", href: "#about"},
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
{
|
|
label: "Terms of Service", href: "#"},
|
|
{
|
|
label: "Cookie Policy", href: "#"},
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 Skin to Skin. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |