183 lines
9.7 KiB
TypeScript
183 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
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 TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
|
|
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" },
|
|
]}
|
|
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" },
|
|
]}
|
|
title="Best Selling"
|
|
description="Loved by thousands, these essentials are must-haves."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Obsessed with my order! Packaging so cute literally felt like a gift."
|
|
rating={5}
|
|
author="Aima"
|
|
avatars={[{ src: "http://img.b2bpic.net/free-photo/happy-woman-applying-moisturizer-face-morning_329181-1364.jpg", alt: "Customer" }]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="blur-reveal"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Help Corner"
|
|
description="Need assistance? We're here to help you out."
|
|
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." },
|
|
]}
|
|
faqsAnimation="blur-reveal"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Have questions or just want to say hi? We're here for you."
|
|
buttons={[{ text: "Get in Touch", href: "#contact" }]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/brushes-cosmetics-near-flowers-bag_23-2147778983.jpg?_wi=2"
|
|
logoText="SparklesByAsh"
|
|
columns={[
|
|
{ title: "Links", items: [
|
|
{ label: "New Arrivals", href: "#featured" },
|
|
{ label: "Best Sellers", href: "#best-selling" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
] },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |