306 lines
16 KiB
TypeScript
306 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Sparkles, Star, Package, Award, Heart, Globe, HelpCircle, Mail, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Shop", id: "shop" },
|
|
{ name: "Categories", id: "categories" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="MulitMart"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
title="Shop Everything You Need, All in One Place"
|
|
description="Discover premium soaps, cutting-edge electronics, and professional fitness equipment curated for quality and value. Fast shipping, trusted brands, and exceptional customer service await."
|
|
background={{ variant: "circleGradient" }}
|
|
tag="Welcome to MultiMart"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Shop Now", href: "#products" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
mediaAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-psd/fashion-landing-page-design-template_23-2149072735.jpg"
|
|
imageAlt="MultiMart Online Store Hero"
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Featured Products"
|
|
description="Browse our handpicked selection of bestselling items across all categories. Quality guaranteed, prices optimized."
|
|
tag="Top Picks"
|
|
tagIcon={Star}
|
|
tagAnimation="opacity"
|
|
buttons={[
|
|
{ text: "View All Products", href: "#products" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
products={[
|
|
{
|
|
id: "soap-1", name: "Luxe Lavender Soap Bar", price: "$12.99", imageSrc: "http://img.b2bpic.net/free-photo/soap-plants-arrangement_23-2148897626.jpg?_wi=1", imageAlt: "Premium Lavender Soap"
|
|
},
|
|
{
|
|
id: "electronics-1", name: "Wireless Bluetooth Headphones", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/close-upon-robot-vacuum-cleaner-indoors_23-2150829992.jpg?_wi=1", imageAlt: "Wireless Headphones"
|
|
},
|
|
{
|
|
id: "fitness-1", name: "Premium Yoga Mat", price: "$49.99", imageSrc: "http://img.b2bpic.net/free-photo/necessary-set-slimming_23-2147829438.jpg?_wi=1", imageAlt: "Professional Yoga Mat"
|
|
},
|
|
{
|
|
id: "soap-2", name: "Organic Charcoal Soap", price: "$14.99", imageSrc: "http://img.b2bpic.net/free-photo/soap-plants-arrangement_23-2148897626.jpg?_wi=2", imageAlt: "Organic Charcoal Soap"
|
|
},
|
|
{
|
|
id: "electronics-2", name: "Fast Charging USB-C Cable", price: "$24.99", imageSrc: "http://img.b2bpic.net/free-photo/close-upon-robot-vacuum-cleaner-indoors_23-2150829992.jpg?_wi=2", imageAlt: "USB-C Charging Cable"
|
|
},
|
|
{
|
|
id: "fitness-2", name: "Adjustable Dumbbell Set", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/necessary-set-slimming_23-2147829438.jpg?_wi=2", imageAlt: "Dumbbell Set"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="categories" data-section="categories">
|
|
<FeatureCardTwentyOne
|
|
title="Our Product Categories"
|
|
description="Explore our carefully curated collections, each designed to meet your specific needs with quality and affordability."
|
|
tag="Shop by Category"
|
|
tagIcon={Package}
|
|
tagAnimation="opacity"
|
|
buttons={[
|
|
{ text: "Browse All Categories", href: "#products" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
accordionItems={[
|
|
{
|
|
id: "soaps", title: "Premium Soaps & Bath", content: "Discover artisanal, organic, and luxury soap collections. From natural ingredients to exotic fragrances, we offer bars for every skin type and preference. Perfect for personal care or gift-giving."
|
|
},
|
|
{
|
|
id: "electronics", title: "Electronics & Tech", content: "Find the latest gadgets, accessories, and electronics from trusted brands. Headphones, chargers, smart devices, and more—all verified for quality and performance."
|
|
},
|
|
{
|
|
id: "fitness", title: "Fitness & Sports Gear", content: "Equip yourself for success with professional-grade fitness equipment. From yoga mats to dumbbells, we stock everything for gym workouts, home training, and outdoor activities."
|
|
}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/wooden-word-shopping-paper-bags-blue-background-top-view_169016-43522.jpg"
|
|
imageAlt="Product Categories Overview"
|
|
mediaAnimation="opacity"
|
|
useInvertedBackground={true}
|
|
mediaPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "Why Choose MultiMart?" }
|
|
]}
|
|
buttons={[
|
|
{ text: "Explore Benefits", href: "#why" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="benefits" data-section="benefits">
|
|
<MetricCardTen
|
|
title="Why We Stand Out"
|
|
description="Quality, speed, and customer satisfaction are at the heart of everything we do."
|
|
tag="Our Commitment"
|
|
tagIcon={Award}
|
|
tagAnimation="opacity"
|
|
buttons={[
|
|
{ text: "Join Our Community", href: "#contact" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
metrics={[
|
|
{
|
|
id: "quality", title: "100% Quality Guaranteed", subtitle: "Every product vetted", category: "Quality Assurance", value: "Verified"
|
|
},
|
|
{
|
|
id: "shipping", title: "Fast Shipping", subtitle: "2-3 business days", category: "Logistics", value: "Express"
|
|
},
|
|
{
|
|
id: "support", title: "24/7 Customer Support", subtitle: "Always here to help", category: "Service", value: "Available"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/man-enjoying-cup-matcha-tea_23-2150215074.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Chen", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12688.jpg", imageAlt: "Marcus Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-employee-with-big-smile_23-2147562345.jpg", imageAlt: "Emily Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "James Williams", imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg", imageAlt: "James Williams"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Park", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-white-shirt-looking-front-with-smile-face-showing-thumbs-up-standing-green-wall_141793-71581.jpg", imageAlt: "Jessica Park"
|
|
},
|
|
{
|
|
id: "6", name: "David Thompson", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-opening-her-hands-white-background_176474-114630.jpg", imageAlt: "David Thompson"
|
|
}
|
|
]}
|
|
cardTitle="Loved by Thousands of Happy Customers"
|
|
cardTag="Customer Reviews"
|
|
cardTagIcon={Heart}
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
names={["Amazon", "Walmart", "eBay", "Best Buy", "Target", "Shopify", "Etsy", "Alibaba"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/flat-e-commerce-logo-collection_23-2148934483.jpg", "http://img.b2bpic.net/free-photo/wooden-word-shopping-paper-bags-blue-background-top-view_169016-43522.jpg", "http://img.b2bpic.net/free-vector/gradient-shopping-center-labels-template_23-2149336465.jpg", "http://img.b2bpic.net/free-vector/flat-design-business-stationery-template_23-2151144341.jpg", "http://img.b2bpic.net/free-vector/outlet-label-collection_23-2147978047.jpg", "http://img.b2bpic.net/free-vector/cyber-monday-shopping-labels_23-2147526172.jpg", "http://img.b2bpic.net/free-vector/minimal-logo-collection-with-pastel-colors_23-2148380697.jpg", "http://img.b2bpic.net/free-photo/black-friday-best-sale-shopping-cart-with-bags_23-2148288187.jpg"
|
|
]}
|
|
title="Trusted by Industry Leaders"
|
|
description="Our platform partners with the world's most recognized retailers and marketplaces."
|
|
tag="Global Trust"
|
|
tagIcon={Globe}
|
|
tagAnimation="opacity"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Get quick answers to common questions about shopping, shipping, and our products."
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="opacity"
|
|
buttons={[
|
|
{ text: "Contact Support", href: "#contact" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What are your shipping times?", content: "We offer standard shipping (3-5 business days) and express shipping (1-2 business days). Orders ship within 24 hours of confirmation. International shipping varies by location."
|
|
},
|
|
{
|
|
id: "2", title: "Do you offer returns?", content: "Yes! We have a 30-day return policy on most items. Products must be unused and in original packaging. Contact our support team to initiate a return."
|
|
},
|
|
{
|
|
id: "3", title: "Are all products guaranteed authentic?", content: "Absolutely. Every product sold on MultiMart is verified for authenticity and quality. We work exclusively with authorized sellers and manufacturers."
|
|
},
|
|
{
|
|
id: "4", title: "How do I track my order?", content: "Once your order ships, you'll receive a tracking number via email. Use this number on our tracking page or the carrier's website to monitor delivery in real-time."
|
|
},
|
|
{
|
|
id: "5", title: "What payment methods do you accept?", content: "We accept all major credit cards, debit cards, PayPal, Apple Pay, and Google Pay for your convenience and security."
|
|
},
|
|
{
|
|
id: "6", title: "Is my personal information secure?", content: "Yes. We use industry-standard encryption and security measures to protect your data. Your privacy is our priority."
|
|
}
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-vector/people-holding-question-marks_23-2148159048.jpg"
|
|
imageAlt="FAQ Support"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="right"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get in Touch"
|
|
tagIcon={Mail}
|
|
tagAnimation="opacity"
|
|
title="Ready to Shop?"
|
|
description="Have questions? Our dedicated support team is here to help. Reach out anytime, and we'll get back to you within 24 hours."
|
|
buttons={[
|
|
{ text: "Start Shopping", href: "#products" },
|
|
{ text: "Email Support", href: "mailto:support@multimart.com" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
background={{ variant: "gradient-bars" }}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="MultiMart"
|
|
copyrightText="© 2025 MultiMart | All Rights Reserved"
|
|
socialLinks={[
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com", ariaLabel: "Follow us on Facebook"
|
|
},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com", ariaLabel: "Follow us on Instagram"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com", ariaLabel: "Follow us on Twitter"
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |