Merge version_1 into main #1
442
src/app/page.tsx
442
src/app/page.tsx
@@ -28,326 +28,144 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Categories",
|
||||
id: "categories",
|
||||
},
|
||||
{
|
||||
name: "Deals",
|
||||
id: "deals",
|
||||
},
|
||||
{
|
||||
name: "Account",
|
||||
id: "account",
|
||||
},
|
||||
]}
|
||||
brandName="PAKISTANMART"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Categories", id: "categories" },
|
||||
{ name: "Deals", id: "deals" },
|
||||
{ name: "Account", id: "account" },
|
||||
]}
|
||||
brandName="PAKISTANMART"
|
||||
button={{ text: "Contact Us", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Har Ghar Ki Pehchan"
|
||||
description="Experience the pride of Pakistan with premium local and international brands delivered to your doorstep."
|
||||
avatars={[
|
||||
{
|
||||
src: "asset://avatar-1",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "asset://avatar-2",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "asset://avatar-3",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "asset://avatar-4",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/indian-city-scene_23-2151823041.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Shopping",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Nationwide Delivery",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "100% Authentic Products",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Cash on Delivery",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Easy Returns",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Customer Support 24/7",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Har Ghar Ki Pehchan"
|
||||
description="Experience the pride of Pakistan with premium local and international brands delivered to your doorstep."
|
||||
avatars={[
|
||||
{ src: "asset://avatar-1", alt: "Customer" },
|
||||
{ src: "asset://avatar-2", alt: "Customer" },
|
||||
{ src: "asset://avatar-3", alt: "Customer" },
|
||||
{ src: "asset://avatar-4", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/indian-city-scene_23-2151823041.jpg", alt: "Customer" },
|
||||
]}
|
||||
buttons={[{ text: "Start Shopping", href: "#products" }]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Nationwide Delivery" },
|
||||
{ type: "text", text: "100% Authentic Products" },
|
||||
{ type: "text", text: "Cash on Delivery" },
|
||||
{ type: "text", text: "Easy Returns" },
|
||||
{ type: "text", text: "Customer Support 24/7" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="categories" data-section="categories">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: "Electronics",
|
||||
description: "Laptops, phones, and home appliances.",
|
||||
},
|
||||
{
|
||||
icon: ShoppingBag,
|
||||
title: "Fashion",
|
||||
description: "Traditional lawn and modern wear.",
|
||||
},
|
||||
{
|
||||
icon: Home,
|
||||
title: "Home & Living",
|
||||
description: "Furniture and home decor.",
|
||||
},
|
||||
{
|
||||
icon: Utensils,
|
||||
title: "Groceries",
|
||||
description: "Fresh produce and daily essentials.",
|
||||
},
|
||||
{
|
||||
icon: Gift,
|
||||
title: "Handicrafts",
|
||||
description: "Authentic Pakistani arts and crafts.",
|
||||
},
|
||||
]}
|
||||
title="Shop by Category"
|
||||
description="Everything you need, right at your fingertips."
|
||||
/>
|
||||
</div>
|
||||
<div id="categories" data-section="categories">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Smartphone, title: "Electronics", description: "Laptops, phones, and home appliances." },
|
||||
{ icon: ShoppingBag, title: "Fashion", description: "Traditional lawn and modern wear." },
|
||||
{ icon: Home, title: "Home & Living", description: "Furniture and home decor." },
|
||||
{ icon: Utensils, title: "Groceries", description: "Fresh produce and daily essentials." },
|
||||
{ icon: Gift, title: "Handicrafts", description: "Authentic Pakistani arts and crafts." },
|
||||
]}
|
||||
title="Shop by Category"
|
||||
description="Everything you need, right at your fingertips."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="deals" data-section="deals">
|
||||
<ProductCardFour
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Samsung S24 Ultra",
|
||||
price: "₨ 320,000",
|
||||
variant: "Electronics",
|
||||
imageSrc: "asset://p1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Haier Inverter AC",
|
||||
price: "₨ 145,000",
|
||||
variant: "Electronics",
|
||||
imageSrc: "asset://p2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Traditional Shalwar Kameez",
|
||||
price: "₨ 4,500",
|
||||
variant: "Fashion",
|
||||
imageSrc: "asset://p3",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Sindhi Ajrak Bedspread",
|
||||
price: "₨ 3,200",
|
||||
variant: "Handicrafts",
|
||||
imageSrc: "asset://p4",
|
||||
},
|
||||
]}
|
||||
title="Flash Deals"
|
||||
description="Hurry, these deals are vanishing fast!"
|
||||
/>
|
||||
</div>
|
||||
<div id="deals" data-section="deals">
|
||||
<ProductCardFour
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Samsung S24 Ultra", price: "₨ 320,000", variant: "Electronics", imageSrc: "asset://p1" },
|
||||
{ id: "p2", name: "Haier Inverter AC", price: "₨ 145,000", variant: "Electronics", imageSrc: "asset://p2" },
|
||||
{ id: "p3", name: "Traditional Shalwar Kameez", price: "₨ 4,500", variant: "Fashion", imageSrc: "asset://p3" },
|
||||
{ id: "p4", name: "Sindhi Ajrak Bedspread", price: "₨ 3,200", variant: "Handicrafts", imageSrc: "asset://p4" },
|
||||
]}
|
||||
title="Flash Deals"
|
||||
description="Hurry, these deals are vanishing fast!"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trust" data-section="trust">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Karachi",
|
||||
"Lahore",
|
||||
"Islamabad",
|
||||
"Multan",
|
||||
"Peshawar",
|
||||
"Quetta",
|
||||
"Faisalabad",
|
||||
]}
|
||||
title="Trusted by Millions"
|
||||
description="Join the growing community of satisfied customers."
|
||||
/>
|
||||
</div>
|
||||
<div id="trust" data-section="trust">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Karachi", "Lahore", "Islamabad", "Multan", "Peshawar", "Quetta", "Faisalabad"]}
|
||||
title="Trusted by Millions"
|
||||
description="Join the growing community of satisfied customers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Ayesha Khan",
|
||||
role: "User",
|
||||
company: "Karachi",
|
||||
rating: 5,
|
||||
imageSrc: "asset://t1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Ahmed Raza",
|
||||
role: "User",
|
||||
company: "Lahore",
|
||||
rating: 5,
|
||||
imageSrc: "asset://t2",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Fatima Noor",
|
||||
role: "User",
|
||||
company: "Islamabad",
|
||||
rating: 5,
|
||||
imageSrc: "asset://t3",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Ali Hassan",
|
||||
role: "User",
|
||||
company: "Multan",
|
||||
rating: 5,
|
||||
imageSrc: "asset://t4",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Zainab Ali",
|
||||
role: "User",
|
||||
company: "Peshawar",
|
||||
rating: 5,
|
||||
imageSrc: "asset://t5",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "1M+",
|
||||
label: "Orders Delivered",
|
||||
},
|
||||
{
|
||||
value: "500k",
|
||||
label: "Happy Customers",
|
||||
},
|
||||
{
|
||||
value: "4.8★",
|
||||
label: "Average Rating",
|
||||
},
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="Real stories from happy Pakistani families."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Ayesha Khan", role: "User", company: "Karachi", rating: 5, imageSrc: "asset://t1" },
|
||||
{ id: "t2", name: "Ahmed Raza", role: "User", company: "Lahore", rating: 5, imageSrc: "asset://t2" },
|
||||
{ id: "t3", name: "Fatima Noor", role: "User", company: "Islamabad", rating: 5, imageSrc: "asset://t3" },
|
||||
{ id: "t4", name: "Ali Hassan", role: "User", company: "Multan", rating: 5, imageSrc: "asset://t4" },
|
||||
{ id: "t5", name: "Zainab Ali", role: "User", company: "Peshawar", rating: 5, imageSrc: "asset://t5" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "1M+", label: "Orders Delivered" },
|
||||
{ value: "500k", label: "Happy Customers" },
|
||||
{ value: "4.8★", label: "Average Rating" },
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="Real stories from happy Pakistani families."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is Cash on Delivery available?",
|
||||
content: "Yes, we offer Cash on Delivery nationwide.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What is the return policy?",
|
||||
content: "We offer a 7-day easy return policy for most items.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How do I track my order?",
|
||||
content: "You can track your order status in the My Account dashboard.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions about our marketplace?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is Cash on Delivery available?", content: "Yes, we offer Cash on Delivery nationwide." },
|
||||
{ id: "q2", title: "What is the return policy?", content: "We offer a 7-day easy return policy for most items." },
|
||||
{ id: "q3", title: "How do I track my order?", content: "You can track your order status in the My Account dashboard." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions about our marketplace?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Stay Updated"
|
||||
title="Join the PakistanMart Newsletter"
|
||||
description="Get exclusive deals and updates delivered to your inbox."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Stay Updated"
|
||||
title="Join the PakistanMart Newsletter"
|
||||
description="Get exclusive deals and updates delivered to your inbox."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="asset://footer-bg"
|
||||
logoText="PAKISTANMART"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Electronics",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Fashion",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Track Order",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="asset://footer-bg"
|
||||
logoText="PAKISTANMART"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "Electronics", href: "#" }, { label: "Fashion", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Track Order", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user