348 lines
11 KiB
TypeScript
348 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Products",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Support",
|
|
id: "faq",
|
|
},
|
|
]}
|
|
brandName="ShopStone"
|
|
button={{
|
|
text: "Cart",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="Curated Quality for Your Lifestyle"
|
|
description="Discover a selection of premium products designed for everyday elegance and unmatched quality. Join thousands of satisfied shoppers."
|
|
testimonials={[
|
|
{
|
|
name: "Alex Riv",
|
|
handle: "@alex",
|
|
testimonial: "The best shopping experience I have had in years.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-product-presentation-with-geometric-shapes_187299-48038.jpg?_wi=1",
|
|
imageAlt: "elegant lifestyle product shopping",
|
|
},
|
|
{
|
|
name: "Jordan S",
|
|
handle: "@jsmith",
|
|
testimonial: "Products arrived fast and in perfect condition.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-arrangement-3d-glasses_23-2149487729.jpg?_wi=1",
|
|
imageAlt: "premium lifestyle product studio",
|
|
},
|
|
{
|
|
name: "Sam K",
|
|
handle: "@sam",
|
|
testimonial: "Exceptional customer service and quality items.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/assortment-abstract-design-elements_23-2148996840.jpg?_wi=1",
|
|
imageAlt: "luxury lifestyle items collection",
|
|
},
|
|
{
|
|
name: "Pat D",
|
|
handle: "@patd",
|
|
testimonial: "I love the unique selection on ShopStone.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/zero-waste-cup-with-lid_23-2149295048.jpg?_wi=1",
|
|
imageAlt: "aesthetic retail lifestyle object",
|
|
},
|
|
{
|
|
name: "Casey L",
|
|
handle: "@casey",
|
|
testimonial: "Definitely my new favorite place to shop online.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-having-videocall-smartphone-while-sitting-couch-home_23-2150808356.jpg?_wi=1",
|
|
imageAlt: "modern lifestyle gadget studio",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Explore Collection",
|
|
href: "#products",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/minimalist-product-presentation-with-geometric-shapes_187299-48038.jpg?_wi=2"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg",
|
|
alt: "Customer 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/expressive-middle-aged-woman-posing_344912-2831.jpg",
|
|
alt: "Customer 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-attractive-woman-holding-hands-together-joyfully-looking-camera-modern-clothes-store_574295-2021.jpg",
|
|
alt: "Customer 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg",
|
|
alt: "Customer 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-young-female-dark-jacket-pink-background_179666-14660.jpg",
|
|
alt: "Customer 5",
|
|
},
|
|
]}
|
|
avatarText="Trusted by over 5,000+ happy shoppers"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Free Shipping",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Sustainable Materials",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Lifetime Warranty",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Hand-crafted Quality",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "24/7 Support",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="one-large-left-three-stacked-right"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Signature Vase",
|
|
price: "$120",
|
|
variant: "Ceramic",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-arrangement-3d-glasses_23-2149487729.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Minimalist Clock",
|
|
price: "$85",
|
|
variant: "Wood",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/assortment-abstract-design-elements_23-2148996840.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Wool Throw",
|
|
price: "$210",
|
|
variant: "Grey",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/zero-waste-cup-with-lid_23-2149295048.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Ceramic Mug Set",
|
|
price: "$45",
|
|
variant: "Set of 4",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-having-videocall-smartphone-while-sitting-couch-home_23-2150808356.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Brass Lamp",
|
|
price: "$350",
|
|
variant: "Gold",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/glasses-water-with-shadow_23-2148863475.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Linen Cushion",
|
|
price: "$60",
|
|
variant: "Sand",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-stationery-elements-fruit_23-2148851526.jpg",
|
|
},
|
|
]}
|
|
title="Featured Essentials"
|
|
description="Explore our curated collection of must-have items for the modern home and lifestyle."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah J.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Michael R.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/expressive-middle-aged-woman-posing_344912-2831.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Emily K.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-holding-hands-together-joyfully-looking-camera-modern-clothes-store_574295-2021.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "David W.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Jessica M.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-dark-jacket-pink-background_179666-14660.jpg",
|
|
},
|
|
]}
|
|
cardTitle="Loved by Shoppers"
|
|
cardTag="Reviews"
|
|
cardAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "What is your return policy?",
|
|
content: "You can return items within 30 days of purchase for a full refund.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Do you offer international shipping?",
|
|
content: "Yes, we ship to over 50 countries globally with tracking.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "How can I track my order?",
|
|
content: "You will receive an email with your tracking number once your order ships.",
|
|
},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Answers to common questions about our products, shipping, and return policies."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Reach Out to Us"
|
|
description="Have questions about a product? Send us a message and our team will get back to you promptly."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Email Address",
|
|
required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "How can we help you?",
|
|
rows: 4,
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/successful-business-people-with-speech-bubbles_53876-25175.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Shop All",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="ShopStone"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|