Files
f5755f4c-445a-4f79-8fb8-148…/src/app/page.tsx
2026-04-09 15:57:43 +00:00

273 lines
8.4 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="compact"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="gradient-radial"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Shop",
id: "shop",
},
{
name: "Features",
id: "features",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="E-Commerce"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "plain",
}}
title="Refined Shopping Experience"
description="Discover a curated selection of premium goods designed for the modern lifestyle. Pure, simple, and elegant."
tag="New Season Launch"
buttons={[
{
text: "Shop Now",
href: "#shop",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-online-shopping-concept_23-2148589782.jpg",
imageAlt: "Minimalist white store display",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-reusable-bag-with-thermos_23-2148666803.jpg",
imageAlt: "Clean modern aesthetic",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/vintage-bottle-opened-cork-with-milk-aged-wooden-table-near-whiskey-rox-transparent-glass-three-ceramic-plates-isolated-white_346278-1419.jpg",
imageAlt: "Premium goods collection",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/computer-mouse-paper-bag-blue-background-top-view_169016-43524.jpg",
imageAlt: "Minimalist accessories",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-zero-waste-food-containers_23-2149316586.jpg",
imageAlt: "Elegant lifestyle items",
},
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Rated 5/5 by our customers"
/>
</div>
<div id="shop" data-section="shop">
<ProductCatalog
layout="section"
products={[
{
id: "1",
name: "Premium Goods A",
price: "$99",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/vintage-bottle-opened-cork-with-milk-aged-wooden-table-near-whiskey-rox-transparent-glass-three-ceramic-plates-isolated-white_346278-1419.jpg",
},
{
id: "2",
name: "Minimalist Accessory",
price: "$45",
rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/computer-mouse-paper-bag-blue-background-top-view_169016-43524.jpg",
},
{
id: "3",
name: "Elegant Item",
price: "$120",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-zero-waste-food-containers_23-2149316586.jpg",
},
{
id: "4",
name: "Sleek Gadget",
price: "$89",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-light-lamp_1339-3597.jpg",
},
{
id: "5",
name: "Modern Tool",
price: "$65",
rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/top-view-arrangement-with-gadgets_23-2148847746.jpg",
},
{
id: "6",
name: "Classic Goods",
price: "$110",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/still-life-glass-cups_23-2149646455.jpg",
},
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Fast Shipping",
tags: [
"Reliable",
"Worldwide",
],
imageSrc: "http://img.b2bpic.net/free-photo/top-view-online-shopping-concept_23-2148589782.jpg",
imageAlt: "minimalist white e-commerce hero shot",
},
{
id: "f2",
title: "Eco-Friendly",
tags: [
"Sustainable",
"Green",
],
imageSrc: "http://img.b2bpic.net/free-photo/top-view-reusable-bag-with-thermos_23-2148666803.jpg",
imageAlt: "white space shopping concept",
},
{
id: "f3",
title: "Premium Quality",
tags: [
"Handcrafted",
"Tested",
],
imageSrc: "http://img.b2bpic.net/free-photo/vintage-bottle-opened-cork-with-milk-aged-wooden-table-near-whiskey-rox-transparent-glass-three-ceramic-plates-isolated-white_346278-1419.jpg",
imageAlt: "white product box high quality",
},
]}
title="Why Choose Us"
description="Quality meets simplicity in every piece."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Alice Johnson",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-afroamerican-man_23-2148508906.jpg",
},
{
id: "t2",
name: "Bob Smith",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg",
},
{
id: "t3",
name: "Charlie Davis",
imageSrc: "http://img.b2bpic.net/free-photo/serious-blonde-girl-is-posing-camera-white-background_176474-115076.jpg",
},
{
id: "t4",
name: "Dana White",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-smiling-lovely-girl-with-long-hair-charming-smile-stands-sunlight-shore-ocean-keep-calmness-active-sporty-woman-sunny-weather-with-surfboard_291650-213.jpg",
},
{
id: "t5",
name: "Evan Brown",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-model-woman-trendy-summer-clothes-posing_158538-9858.jpg",
},
]}
cardTitle="Loved by Shoppers"
cardTag="Testimonials"
cardAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Newsletter"
title="Stay Updated"
description="Sign up for our newsletter for early access to sales and new drops."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "About Us",
href: "#",
},
{
label: "Returns",
href: "#",
},
{
label: "Help",
href: "#",
},
],
},
{
items: [
{
label: "Terms",
href: "#",
},
{
label: "Privacy",
href: "#",
},
{
label: "Contact",
href: "#contact",
},
],
},
]}
logoText="E-Commerce"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}