414 lines
17 KiB
TypeScript
414 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
import Link from "next/link";
|
|
import {
|
|
Sparkles,
|
|
CheckCircle,
|
|
Eye,
|
|
Zap,
|
|
Shield,
|
|
Package,
|
|
TrendingUp,
|
|
} from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navigationItems = [
|
|
{ name: "Products", id: "products" },
|
|
{ name: "Categories", id: "categories" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Support", id: "faq" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="MarketHub UAE"
|
|
navItems={navigationItems}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="MarketHub UAE"
|
|
description="Browse thousands of authentic products across every category. Real-time stock updates, verified prices, and secure checkout—all in one place."
|
|
buttons={[
|
|
{
|
|
text: "Start Shopping Now",
|
|
href: "/products",
|
|
},
|
|
{
|
|
text: "Learn More",
|
|
href: "#about",
|
|
},
|
|
]}
|
|
background={{
|
|
variant: "noise",
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-vector/fashion-shopping-app-interface_23-2148659950.jpg?_wi=1"
|
|
imageAlt="ecommerce marketplace shopping online store"
|
|
frameStyle="card"
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Featured Products This Week"
|
|
description="Discover our curated selection of bestselling items across electronics, fashion, and home essentials with verified authenticity and competitive pricing."
|
|
tag="Best Sellers"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Premium Smartphone Latest Model",
|
|
price: "AED 1,299",
|
|
variant: "Space Grey • 256GB • 2 Colors",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062953.jpg?_wi=1",
|
|
imageAlt: "smartphone electronics latest technology",
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Luxury Designer Handbag",
|
|
price: "AED 899",
|
|
variant: "Caramel Brown • Leather • Premium Quality",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/woman-with-phone_1303-5256.jpg?_wi=1",
|
|
imageAlt: "luxury handbag fashion accessories leather",
|
|
isFavorited: false,
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Smart Air Conditioning Unit",
|
|
price: "AED 2,499",
|
|
variant: "Cooling 2.5 Tons • WiFi Enabled • Energy Efficient",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/young-woman-using-home-technology_23-2149216657.jpg?_wi=1",
|
|
imageAlt: "home electronics air conditioner appliance",
|
|
isFavorited: false,
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "View All Products",
|
|
href: "/products",
|
|
},
|
|
]}
|
|
buttonAnimation="opacity"
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
tag="Our Promise"
|
|
title="Trusted Marketplace for Every UAE Customer"
|
|
description="MarketHub UAE is committed to providing authentic products, real-time inventory visibility, and fast delivery across all product categories."
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
imagePosition="right"
|
|
imageSrc="http://img.b2bpic.net/free-photo/commercial-trucks-lined-up-logistics-hub-sunset_84443-73979.jpg?_wi=1"
|
|
imageAlt="warehouse storage inventory management system"
|
|
mediaAnimation="slide-up"
|
|
bulletPoints={[
|
|
{
|
|
title: "100% Authentic Products",
|
|
description:
|
|
"Every item is verified for authenticity and quality standards before listing.",
|
|
icon: CheckCircle,
|
|
},
|
|
{
|
|
title: "Real-Time Inventory",
|
|
description:
|
|
"Know exactly what's in stock. Live updates prevent disappointments.",
|
|
icon: Eye,
|
|
},
|
|
{
|
|
title: "Fast Delivery Options",
|
|
description:
|
|
"Express and standard shipping available across UAE with tracking.",
|
|
icon: Zap,
|
|
},
|
|
{
|
|
title: "Secure Checkout",
|
|
description:
|
|
"Multiple payment methods and bank-level encryption for peace of mind.",
|
|
icon: Shield,
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Explore Categories",
|
|
href: "/categories",
|
|
},
|
|
]}
|
|
buttonAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
tag="How It Works"
|
|
title="Shopping Made Simple"
|
|
description="Experience seamless shopping from browsing to delivery in just a few simple steps."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tagAnimation="opacity"
|
|
buttonAnimation="opacity"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Step One",
|
|
title: "Browse & Search",
|
|
subtitle: "Explore thousands of products across categories.",
|
|
description:
|
|
"Use our intuitive search and filter system to find exactly what you need. Filter by price, ratings, delivery time, and more. Browse verified seller reviews to make informed decisions.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/fashion-shopping-app-interface_23-2148659950.jpg?_wi=2",
|
|
imageAlt: "Browse products step",
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Step Two",
|
|
title: "Add to Cart",
|
|
subtitle: "Review items and quantities with real-time stock status.",
|
|
description:
|
|
"See live inventory updates as you shop. Add items to your cart and review before checkout. Compare similar products with side-by-side details and customer ratings.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062953.jpg?_wi=2",
|
|
imageAlt: "Add to cart step",
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Step Three",
|
|
title: "Secure Payment",
|
|
subtitle: "Multiple payment methods with bank-level security.",
|
|
description:
|
|
"Choose from credit card, debit card, bank transfer, or cash on delivery. All transactions are encrypted and secure. Instant payment confirmation and receipt.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/woman-with-phone_1303-5256.jpg?_wi=2",
|
|
imageAlt: "Secure payment step",
|
|
},
|
|
{
|
|
id: 4,
|
|
tag: "Step Four",
|
|
title: "Fast Delivery",
|
|
subtitle: "Track your order from warehouse to doorstep.",
|
|
description:
|
|
"Real-time tracking with SMS and email updates. Choose express delivery for urgent orders. Delivered by verified logistics partners across UAE.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/young-woman-using-home-technology_23-2149216657.jpg?_wi=2",
|
|
imageAlt: "Fast delivery step",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
tag="Our Impact"
|
|
title="Trusted by Thousands"
|
|
description="Real numbers that showcase our commitment to UAE customers and seller partners."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "50",
|
|
title: "thousand",
|
|
description: "Products across all categories",
|
|
icon: Package,
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "98",
|
|
title: "percent",
|
|
description: "On-time delivery rate",
|
|
icon: TrendingUp,
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "24",
|
|
title: "hours",
|
|
description: "Express delivery option",
|
|
icon: Zap,
|
|
},
|
|
{
|
|
id: "4",
|
|
value: "100",
|
|
title: "percent",
|
|
description: "Authenticity guarantee",
|
|
icon: CheckCircle,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
tag="Customer Stories"
|
|
title="Why Customers Love MarketHub UAE"
|
|
description="Hear from real customers about their shopping experience and why they trust us."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Fatima Al-Maktoum",
|
|
role: "Dubai Professional",
|
|
testimonial:
|
|
"The authenticity guarantee and fast delivery made shopping so convenient. I found everything I needed in one place with verified prices.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2579.jpg?_wi=1",
|
|
imageAlt: "Fatima Al-Maktoum",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Ahmed Hassan",
|
|
role: "Abu Dhabi Entrepreneur",
|
|
testimonial:
|
|
"As a small business owner, I appreciate the inventory transparency and reliable delivery. MarketHub UAE is my go-to for bulk purchases.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/closeup-happy-bearded-man-suit-laughing-smiling-standing-white-background_1258-155212.jpg?_wi=1",
|
|
imageAlt: "Ahmed Hassan",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Layla Al-Ketbi",
|
|
role: "Fashion Designer",
|
|
testimonial:
|
|
"The diverse product selection and real-time stock updates are game-changers. I can now shop with confidence knowing availability upfront.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg?_wi=1",
|
|
imageAlt: "Layla Al-Ketbi",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Mohammed Al-Mansouri",
|
|
role: "IT Consultant",
|
|
testimonial:
|
|
"Competitive pricing combined with authentic product guarantee makes MarketHub UAE unbeatable. Highly recommend to anyone in UAE.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/handsome-man-with-thumb-up_1368-6347.jpg?_wi=1",
|
|
imageAlt: "Mohammed Al-Mansouri",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Sara Al-Marri",
|
|
role: "Home Goods Retailer",
|
|
testimonial:
|
|
"The seamless checkout experience and multiple payment options made my shopping effortless. Customer support is exceptional too.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/pretty-woman-playing-with-party-accesories_1187-4013.jpg?_wi=1",
|
|
imageAlt: "Sara Al-Marri",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Rashid Al-Neyadi",
|
|
role: "Electronics Enthusiast",
|
|
testimonial:
|
|
"Fast delivery, authentic products, and competitive pricing—everything I want in an ecommerce platform. MarketHub UAE is my first choice.",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/adult-serious-businessman-looking-camera_23-2148113003.jpg?_wi=1",
|
|
imageAlt: "Rashid Al-Neyadi",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Common Questions"
|
|
sideDescription="Everything you need to know about shopping with MarketHub UAE."
|
|
useInvertedBackground={true}
|
|
textPosition="left"
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How do I know products are authentic?",
|
|
content:
|
|
"All products on MarketHub UAE go through a rigorous verification process. We work directly with authorized distributors and certified sellers. Each product includes an authenticity guarantee, and customers can file claims within 30 days if authenticity is questioned. We maintain partnerships with leading brands to ensure 100% genuine items.",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "What are the delivery options?",
|
|
content:
|
|
"We offer express delivery (24 hours) and standard delivery (2-3 business days) across UAE. Real-time tracking is available for all orders via SMS and email updates. Free delivery is available on orders over AED 100. Delivery partners are verified and insured for maximum reliability.",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "How can I return or exchange items?",
|
|
content:
|
|
"We offer a 30-day return and exchange policy on most items. Products must be unused and in original packaging. Refunds are processed within 7 business days after we receive returned items. Some electronics may have different policies—check product details before purchase.",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "What payment methods are accepted?",
|
|
content:
|
|
"We accept credit cards (Visa, Mastercard), debit cards, bank transfers, and cash on delivery (COD). All payment methods are secured with bank-level encryption. Instant payment confirmation is provided after transaction completion.",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "How do I track my order?",
|
|
content:
|
|
"Once your order ships, you'll receive a tracking number via email and SMS. Use this number to track your package in real-time on our website. You can also see tracking history in your account dashboard. Customer support is available 24/7 for tracking inquiries.",
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "Is there customer support?",
|
|
content:
|
|
"Yes, our support team is available 24/7 via chat, email, and phone. Average response time is under 2 hours. We handle inquiries in Arabic and English. Support tickets are prioritized and tracked until resolved.",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="MarketHub UAE"
|
|
leftLink={{
|
|
text: "Privacy Policy",
|
|
href: "/privacy",
|
|
}}
|
|
rightLink={{
|
|
text: "Terms of Service",
|
|
href: "/terms",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |