134 lines
6.2 KiB
TypeScript
134 lines
6.2 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
|
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Products", id: "/products" },
|
|
{ name: "Cart", id: "/cart" },
|
|
{ name: "Checkout", id: "/checkout" },
|
|
]}
|
|
brandName="E-Store"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
background={{ variant: "sparkles-gradient" }}
|
|
title="Style That Speaks Volumes"
|
|
description="Discover premium quality products curated for your modern lifestyle. Fast delivery across India."
|
|
mediaItems={[
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYkvOiW4e2ve8KGBTgSVIQr79g/premium-clothing-showcase-hero-banner-fo-1774673703512-e98bd6df.png", imageAlt: "Fashion" },
|
|
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYkvOiW4e2ve8KGBTgSVIQr79g/professional-tech-gadgets-display-on-a-c-1774673703226-5b5b7faf.png", imageAlt: "Tech" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "1", name: "Premium Jacket", price: "₹2,999", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYkvOiW4e2ve8KGBTgSVIQr79g/high-quality-fashion-jacket-white-backgr-1774673701444-4d77b32f.png" },
|
|
{ id: "2", name: "Wireless Audio", price: "₹4,599", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYkvOiW4e2ve8KGBTgSVIQr79g/modern-wireless-headphones-clean-design--1774673701251-3b3d5bf6.png" },
|
|
{ id: "3", name: "Leather Handbag", price: "₹1,899", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYkvOiW4e2ve8KGBTgSVIQr79g/handcrafted-leather-bag-high-quality-mat-1774673701846-dcc8cc5a.png" },
|
|
]}
|
|
title="Trending Now"
|
|
description="Our most popular picks of the season."
|
|
/>
|
|
</div>
|
|
|
|
<div id="tools" data-section="tools">
|
|
<FeatureCardEight
|
|
title="E-commerce Toolset"
|
|
description="Free and paid tools to streamline operations."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: 1, title: "Marketing Automation", description: "Mailchimp (Free tier available) for email campaigns.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=200&h=200" },
|
|
{ id: 2, title: "Advanced Analytics", description: "Google Analytics & Shopify Insights for data-driven decisions.", imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=200&h=200" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="strategy" data-section="strategy">
|
|
<TimelineHorizontalCardStack
|
|
title="Business Growth Roadmap"
|
|
description="Step-by-step plan for scaling revenue and profit."
|
|
textboxLayout="default"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Why Choose Us?"
|
|
description={["At E-Store, we prioritize quality, authenticity, and customer satisfaction.", "Our platform ensures a smooth shopping experience tailored for India."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "What payment methods?", content: "UPI, Cards, Wallets." },
|
|
{ id: "f2", title: "Shipping?", content: "3-7 business days." },
|
|
]}
|
|
title="Common Questions"
|
|
description="Everything you need to know about shopping with us."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
text="Need consulting on your monetization strategy?"
|
|
buttons={[{ text: "Reach Out", href: "mailto:support@estore.com" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{ items: [{ label: "Shop", href: "#products" }, { label: "Tools", href: "#tools" }] },
|
|
{ items: [{ label: "Strategy", href: "#strategy" }, { label: "Contact", href: "#contact" }] },
|
|
]}
|
|
logoText="E-Store"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |