256 lines
14 KiB
TypeScript
256 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Shop All", id: "featured"},
|
|
{
|
|
name: "Reviews", id: "testimonials"},
|
|
{
|
|
name: "FAQ", id: "faq"},
|
|
]}
|
|
brandName="SparklesByAsh"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="Because You Deserve Pretty Things ㅤ♡"
|
|
description="Discover our collection of handpicked essentials designed to make you feel beautiful every single day."
|
|
testimonials={[
|
|
{
|
|
name: "Aima", handle: "@aima", testimonial: "Obsessed with my order! Packaging so cute literally felt like a gift.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink"},
|
|
{
|
|
name: "Zara", handle: "@zara", testimonial: "Quality is 10/10, will definitely order again!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blissful-brunette-girl-white-sneakers-posing-with-bouquet-alliums-indoor-shot-adorable-african-lady-sitting-with-legs-crossed-reading-phone-message_197531-10106.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink"},
|
|
{
|
|
name: "Sana", handle: "@sana", testimonial: "So pretty, loved every single thing in my package.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163113.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink"},
|
|
{
|
|
name: "Mina", handle: "@mina", testimonial: "My favorite store for pretty things, always satisfied.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-lipstick_23-2148166751.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink"},
|
|
{
|
|
name: "Hina", handle: "@hina", testimonial: "Absolutely magical experience, everything is so aesthetic!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-vector/watercolor-cottagecore-item-set_52683-148267.jpg?_wi=1", imageAlt: "aesthetic beauty product background pink"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Shop Now", href: "#featured"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=2"
|
|
imageAlt="Hero beauty aesthetic"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/high-angle-messy-makeup-products-table_23-2149363784.jpg", alt: "Customer 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-arrangement_23-2149135758.jpg", alt: "Customer 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150217998.jpg", alt: "Customer 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/model-career-kit-still-life_23-2150218001.jpg", alt: "Customer 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-woman-studio_1157-17150.jpg", alt: "Customer 5"},
|
|
]}
|
|
avatarText="Loved by 5,000+ sparkle enthusiasts"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
title="Our Vibe"
|
|
description="We believe in bringing magic to your daily routine through curated beauty items that spark joy."
|
|
bulletPoints={[
|
|
{
|
|
title: "Curated Quality", description: "Handpicked products for the best experience."},
|
|
{
|
|
title: "Cute Packaging", description: "Every order feels like a special gift."},
|
|
{
|
|
title: "Fast Shipping", description: "Delivering across Pakistan with love."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/blissful-brunette-girl-white-sneakers-posing-with-bouquet-alliums-indoor-shot-adorable-african-lady-sitting-with-legs-crossed-reading-phone-message_197531-10106.jpg?_wi=2"
|
|
imageAlt="About Sparkles by Ash"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "5000+", title: "Reviews", description: "Customer love shared daily", imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-showing-golden-star-rating-symbol_53876-71536.jpg"},
|
|
{
|
|
id: "m2", value: "115k+", title: "Followers", description: "Growing on Instagram", imageSrc: "http://img.b2bpic.net/free-photo/business-achievement-improvement-success-result_53876-123860.jpg"},
|
|
{
|
|
id: "m3", value: "8000+", title: "Shipped", description: "Happy orders delivered", imageSrc: "http://img.b2bpic.net/free-photo/warehouse-with-boxes-conveyor-belt_23-2152001489.jpg"},
|
|
]}
|
|
title="The Sparkle Family"
|
|
description="Join our community of thousands of happy sparkle enthusiasts."
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured" data-section="featured">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Soft Matte Lip Balm", price: "Rs. 650", imageSrc: "http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163113.jpg?_wi=2"},
|
|
{
|
|
id: "p2", name: "Peptide Lip Treatment", price: "Rs. 699", imageSrc: "http://img.b2bpic.net/free-photo/office-desktop-with-lipstick_23-2148166751.jpg?_wi=2"},
|
|
{
|
|
id: "p3", name: "Aesthetic Hair Clip", price: "Rs. 450", imageSrc: "http://img.b2bpic.net/free-vector/watercolor-cottagecore-item-set_52683-148267.jpg?_wi=2"},
|
|
{
|
|
id: "p4", name: "Dewy Skin Mist", price: "Rs. 899", imageSrc: "http://img.b2bpic.net/free-photo/decorative-cosmetics-near-makeup-applicators_23-2147742692.jpg"},
|
|
{
|
|
id: "p5", name: "Glitter Shadow Palette", price: "Rs. 1200", imageSrc: "http://img.b2bpic.net/free-photo/different-shades-lip-glosses-with-bright-sky_23-2149681515.jpg"},
|
|
{
|
|
id: "p6", name: "Velvet Scrunchies Set", price: "Rs. 350", imageSrc: "http://img.b2bpic.net/free-photo/top-view-colorful-lipsticks-with-abstract-background_23-2148320906.jpg"},
|
|
]}
|
|
title="New Arrivals"
|
|
description="Pick your new obsession from our latest drops."
|
|
/>
|
|
</div>
|
|
|
|
<div id="best-selling" data-section="best-selling">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p7", name: "Pink Blush Trio", price: "Rs. 950", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-beatufiul-woman-looking-mirror-fixing-her-makeup-put-lipstick-standing-beige-background-cosmetics-women-beauty-concept_1258-88511.jpg"},
|
|
{
|
|
id: "p8", name: "Hydrating Face Mask", price: "Rs. 550", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-red-lipstick-still-life_23-2149234375.jpg"},
|
|
{
|
|
id: "p9", name: "Crystal Facial Roller", price: "Rs. 1100", imageSrc: "http://img.b2bpic.net/free-photo/skincare-supplies-marble-background_23-2147710684.jpg"},
|
|
{
|
|
id: "p10", name: "Mini Gloss Kit", price: "Rs. 750", imageSrc: "http://img.b2bpic.net/free-photo/pink-shades-lipgloss-arrangement_23-2149096675.jpg"},
|
|
{
|
|
id: "p11", name: "Silk Pillowcase", price: "Rs. 1500", imageSrc: "http://img.b2bpic.net/free-photo/top-view-lipsticks-with-palm-branch-shadow_23-2148210814.jpg"},
|
|
{
|
|
id: "p12", name: "Sparkle Hand Mirror", price: "Rs. 500", imageSrc: "http://img.b2bpic.net/free-photo/accessories-makeup-supplies_23-2147710693.jpg"},
|
|
]}
|
|
title="Best Selling"
|
|
description="Loved by thousands, these essentials are must-haves."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1", title: "Amazing Quality!", quote: "Packaging so cute, felt like opening a gift.", name: "Aima", role: "Customer", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-applying-moisturizer-face-morning_329181-1364.jpg"},
|
|
{
|
|
id: "t2", title: "So Cute!", quote: "Literally obsessed with my order, quality is 10/10.", name: "Zara", role: "Customer", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-hat-pink-red-wall_343596-5526.jpg"},
|
|
{
|
|
id: "t3", title: "Quick Delivery!", quote: "Love the products and the fast service, will order again.", name: "Sana", role: "Customer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-fit-woman-doing-sports-exercises-home-drinks-water-from-bottle-sm_1258-182451.jpg"},
|
|
{
|
|
id: "t4", title: "Worth it!", quote: "Everything I bought was so pretty and exactly as described.", name: "Mina", role: "Customer", imageSrc: "http://img.b2bpic.net/free-photo/woman-enjoying-her-beauty-routine-with-golden-eye-patches_23-2150166466.jpg"},
|
|
{
|
|
id: "t5", title: "Great Experience!", quote: "The aesthetic is just unmatched, highly recommended.", name: "Hina", role: "Customer", imageSrc: "http://img.b2bpic.net/free-photo/friendly-young-interracial-girls-good-mood-wear-nightgowns-pajama-party-leisure-lifestyle-beauty-concept_197531-31732.jpg"},
|
|
]}
|
|
title="Our Happy Customers"
|
|
description="See why everyone is obsessed with their sparkles."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "What are the delivery charges?", content: "Our delivery charges are Rs. 299 all over Pakistan."},
|
|
{
|
|
id: "f2", title: "How long does shipping take?", content: "Standard delivery takes 3-5 business days."},
|
|
{
|
|
id: "f3", title: "Can I return items?", content: "We offer returns for damaged products reported within 24 hours of delivery."},
|
|
]}
|
|
title="Help Corner"
|
|
faqsAnimation="blur-reveal"
|
|
textboxLayout="split"
|
|
imageSrc="http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=1"
|
|
mediaPosition="left"
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Contact Us"
|
|
title="Get in Touch"
|
|
description="Have questions or just want to say hi? We're here for you."
|
|
useInvertedBackground={true}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="SparklesByAsh"
|
|
columns={[
|
|
{
|
|
title: "Shop", items: [
|
|
{
|
|
label: "New Arrivals", href: "#featured"},
|
|
{
|
|
label: "Best Sellers", href: "#best-selling"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 SparklesByAsh. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|