247 lines
14 KiB
TypeScript
247 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import {
|
|
Zap,
|
|
ShoppingBag,
|
|
Flame,
|
|
TrendingUp,
|
|
Award,
|
|
Rocket,
|
|
Heart,
|
|
Facebook,
|
|
Twitter,
|
|
Instagram,
|
|
Linkedin,
|
|
} from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Categories", id: "categories" },
|
|
{ name: "Deals", id: "deals" },
|
|
{ name: "My Orders", id: "orders" },
|
|
{ name: "Sell", id: "sell" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="grid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="ShopHub"
|
|
navItems={navItems}
|
|
button={{
|
|
text: "Login / Sign Up", href: "/auth"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Discover Millions of Products"
|
|
description="Shop the largest selection of electronics, fashion, home essentials, and more with unbeatable prices and guaranteed fast delivery across India."
|
|
background={{ variant: "grid" }}
|
|
tag="Limited Time Offer"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Start Shopping", href: "/products"},
|
|
{
|
|
text: "Become a Seller", href: "/seller"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/a-vibrant-e-commerce-hero-banner-showing-1773919676983-b0f87bcd.png?_wi=1"
|
|
imageAlt="Marketplace products showcase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="categories" data-section="categories">
|
|
<FeatureCardTwentyThree
|
|
title="Shop by Category"
|
|
description="Explore our wide range of products across multiple categories handpicked for quality and value."
|
|
features={[
|
|
{
|
|
id: "electronics", title: "Electronics", tags: ["Smartphones", "Laptops", "Accessories"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/modern-electronic-devices-arranged-in-a--1773919673318-8dfd8145.png?_wi=1", imageAlt: "Electronics products"},
|
|
{
|
|
id: "fashion", title: "Fashion", tags: ["Clothing", "Footwear", "Accessories"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/contemporary-fashion-items-including-tre-1773919674043-a07f7b93.png?_wi=1", imageAlt: "Fashion items"},
|
|
{
|
|
id: "home", title: "Home & Living", tags: ["Furniture", "Decor", "Kitchenware"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/home-decor-and-furniture-items-beautiful-1773919674995-4ac54a4b.png?_wi=1", imageAlt: "Home decor items"},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Shop Smart"
|
|
tagIcon={ShoppingBag}
|
|
tagAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="deals" data-section="deals">
|
|
<ProductCardOne
|
|
title="Deal of the Day"
|
|
description="Unbeatable daily deals on top-selling products. New deals every 24 hours with up to 70% discount."
|
|
products={[
|
|
{
|
|
id: "deal-1", name: "Premium Smartwatch", price: "₹2,499", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/premium-smartwatch-with-discount-overlay-1773919672962-e4193f6d.png?_wi=1", imageAlt: "Premium smartwatch deal"},
|
|
{
|
|
id: "deal-2", name: "Wireless Earbuds Pro", price: "₹1,899", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/high-quality-wireless-earbuds-with-profe-1773919673719-e57dd0e2.png?_wi=1", imageAlt: "Wireless earbuds deal"},
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Hurry Up"
|
|
tagIcon={Flame}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "View All Deals", href: "/products?filter=deals"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="trending" data-section="trending">
|
|
<ProductCardOne
|
|
title="Trending Now"
|
|
description="Most popular products this week. Curated bestsellers loved by millions of shoppers."
|
|
products={[
|
|
{
|
|
id: "trend-1", name: "Casual T-Shirt", price: "₹399", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/stylish-men-s-casual-t-shirt-photographe-1773919674095-03805664.png?_wi=1", imageAlt: "Casual t-shirt"},
|
|
{
|
|
id: "trend-2", name: "Professional Backpack", price: "₹1,299", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/modern-minimalist-backpack-for-professio-1773919673937-3375e406.png?_wi=1", imageAlt: "Professional backpack"},
|
|
{
|
|
id: "trend-3", name: "Premium Notebook", price: "₹599", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/premium-notebook-or-planner-with-elegant-1773919675471-a9b38174.png", imageAlt: "Premium notebook"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Top Picks"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "Shop Trending", href: "/products?sort=trending"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyThree
|
|
title="Why Shop at ShopHub"
|
|
description="Experience seamless online shopping with our premium features and customer-first approach."
|
|
features={[
|
|
{
|
|
id: "feature-1", title: "Multiple Payment Options", tags: ["Cards", "UPI", "Net Banking", "EMI"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/visual-representation-of-multiple-paymen-1773919676585-e06afc6d.png?_wi=1", imageAlt: "Payment methods"},
|
|
{
|
|
id: "feature-2", title: "Fast & Reliable Delivery", tags: ["Express Shipping", "Same Day", "Tracking"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/fast-delivery-service-visualization-show-1773919674759-b1a0548e.png?_wi=1", imageAlt: "Fast delivery service"},
|
|
{
|
|
id: "feature-3", title: "24/7 Customer Support", tags: ["Live Chat", "Email", "Phone Support"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/customer-support-illustration-showing-li-1773919674054-4d8b6b53.png?_wi=1", imageAlt: "Customer support"},
|
|
{
|
|
id: "feature-4", title: "Secure & Safe Shopping", tags: ["SSL Encrypted", "Verified Sellers", "Buyer Protection"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/security-and-trust-visualization-for-onl-1773919673523-d8d73a63.png?_wi=1", imageAlt: "Secure shopping"},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Premium Service"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
testimonials={[
|
|
{
|
|
id: "test-1", name: "Priya Sharma", role: "Happy Customer", testimonial: "ShopHub has completely transformed my shopping experience! Fast delivery, great prices, and amazing customer service. I recommend it to all my friends!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/professional-headshot-of-a-satisfied-cus-1773919673334-2c99832a.png?_wi=1", imageAlt: "Priya Sharma"},
|
|
{
|
|
id: "test-2", name: "Rajesh Kumar", role: "Regular Buyer", testimonial: "The variety of products and seamless checkout process make ShopHub my go-to marketplace. Never had any issues with orders or deliveries.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/professional-headshot-of-a-happy-custome-1773919672803-2587b579.png?_wi=1", imageAlt: "Rajesh Kumar"},
|
|
{
|
|
id: "test-3", name: "Anjali Verma", role: "Satisfied Customer", testimonial: "Best marketplace for everything! From electronics to fashion, the quality is consistent and prices are unbeatable. Customer support is responsive too.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/professional-customer-portrait-showing-s-1773919673430-570f7c32.png?_wi=1", imageAlt: "Anjali Verma"},
|
|
{
|
|
id: "test-4", name: "Vikram Singh", role: "Frequent Shopper", testimonial: "I shop on ShopHub weekly. The deals are incredible and the return policy is hassle-free. Truly customer-centric marketplace!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/professional-headshot-of-a-confident-cus-1773919674837-f4695078.png?_wi=1", imageAlt: "Vikram Singh"},
|
|
]}
|
|
animationType="slide-up"
|
|
title="What Our Customers Say"
|
|
description="Real reviews from thousands of satisfied shoppers who trust ShopHub for their daily purchases."
|
|
tag="Customer Love"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="cta" data-section="cta">
|
|
<ContactSplit
|
|
tag="Get Started"
|
|
title="Ready to Start Shopping?"
|
|
description="Join millions of shoppers enjoying seamless shopping, great deals, and fast delivery. Browse our collection now!"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "grid" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email for exclusive deals"
|
|
buttonText="Sign Up & Get ₹500 Off"
|
|
termsText="By signing up, you agree to our Terms & Conditions and Privacy Policy. We respect your privacy."
|
|
mediaAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BA5Y0aqRlwTEUnUBGRsac7THqC/flash-sale-promotional-banner-for-an-onl-1773919674111-b3897887.png?_wi=1"
|
|
imageAlt="Exclusive deals signup"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="ShopHub"
|
|
copyrightText="© 2025 ShopHub. All rights reserved. India's #1 Online Marketplace."
|
|
socialLinks={[
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/shophub", ariaLabel: "ShopHub on Facebook"},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/shophub", ariaLabel: "ShopHub on Twitter"},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/shophub", ariaLabel: "ShopHub on Instagram"},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/company/shophub", ariaLabel: "ShopHub on LinkedIn"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|