Merge version_2 into main #1
483
src/app/page.tsx
483
src/app/page.tsx
@@ -10,9 +10,8 @@ import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTe
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { ShoppingBag, ThumbsUp, Users } from "lucide-react";
|
||||
import { MessageCircle, ThumbsUp, Users } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,381 +28,129 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Shafi Mart"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Shafi Mart"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Welcome to Shafi Mart"
|
||||
description="Your neighborhood store for fresh quality products and daily essentials. Experience convenient shopping at your fingertips."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Ayesha Khan",
|
||||
handle: "@ayeshak",
|
||||
testimonial: "Excellent variety and fresh produce! Always reliable.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg",
|
||||
},
|
||||
{
|
||||
name: "Bilal Ahmed",
|
||||
handle: "@bilal_a",
|
||||
testimonial: "Fast delivery and great prices. Highly recommended.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
|
||||
},
|
||||
{
|
||||
name: "Fatima Zahra",
|
||||
handle: "@fzahra",
|
||||
testimonial: "Fantastic customer service and user-friendly platform.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-brunette-caucasian-girl-pulls-down-collar-looks-camera-orange_141793-92841.jpg",
|
||||
},
|
||||
{
|
||||
name: "Omar Farooq",
|
||||
handle: "@omar_f",
|
||||
testimonial: "Everything I need is always in stock. Great store!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/laughing-man-portrait_158595-3861.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sara Malik",
|
||||
handle: "@saram",
|
||||
testimonial: "The best place for daily shopping in town.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-female-with-pinkish-hair-posing_344912-857.jpg",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-family-paying-their-groceries_171337-2417.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg",
|
||||
alt: "Merry young adult",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-spectacular-woman-laughing-front_197531-19644.jpg",
|
||||
alt: "Front view of spectacular woman",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg",
|
||||
alt: "Medium shot man",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5073.jpg",
|
||||
alt: "Beautiful African-American woman",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/confident-businessman-with-beard-smiling-camera-generated-by-ai_188544-33152.jpg",
|
||||
alt: "Confident businessman",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Fresh Daily",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Locally Sourced",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Secure Checkout",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fast Delivery",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Affordable Prices",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Welcome to Shafi Mart"
|
||||
description="Your neighborhood store for fresh quality products and daily essentials. Experience convenient shopping at your fingertips."
|
||||
testimonials={[
|
||||
{ name: "Ayesha Khan", handle: "@ayeshak", testimonial: "Excellent variety and fresh produce! Always reliable.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg" },
|
||||
{ name: "Bilal Ahmed", handle: "@bilal_a", testimonial: "Fast delivery and great prices. Highly recommended.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-family-paying-their-groceries_171337-2417.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Commitment"
|
||||
description="At Shafi Mart, we bridge the gap between quality and affordability. Since our inception, we have strived to bring the best products directly to our community."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/choose-healthiest-organic-products_329181-17366.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Commitment"
|
||||
description="At Shafi Mart, we bridge the gap between quality and affordability. Since our inception, we have strived to bring the best products directly to our community."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/choose-healthiest-organic-products_329181-17366.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Freshness Assured",
|
||||
descriptions: [
|
||||
"High quality standards for all perishable items.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fresh-organic-vegetables-wooden-boards-background-top-view-healthy-food-concept_613910-6207.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Secure Payments",
|
||||
descriptions: [
|
||||
"Multiple safe payment options for your protection.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896824.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Rapid Delivery",
|
||||
descriptions: [
|
||||
"Quick and reliable shipping right to your door.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/courier-doing-jobs-logistics_23-2149229258.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="We offer more than just products; we offer a seamless shopping experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "1", title: "Freshness Assured", descriptions: ["High quality standards for all perishable items."], imageSrc: "http://img.b2bpic.net/free-photo/fresh-organic-vegetables-wooden-boards-background-top-view-healthy-food-concept_613910-6207.jpg" },
|
||||
{ id: "2", title: "Secure Payments", descriptions: ["Multiple safe payment options for your protection."], imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896824.jpg" },
|
||||
{ id: "3", title: "Rapid Delivery", descriptions: ["Quick and reliable shipping right to your door."], imageSrc: "http://img.b2bpic.net/free-photo/courier-doing-jobs-logistics_23-2149229258.jpg" },
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="We offer more than just products; we offer a seamless shopping experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Fresh Milk",
|
||||
price: "$2.50",
|
||||
variant: "1L",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fresh-bottles-milk-ready-be-served_23-2148610575.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Whole Wheat Bread",
|
||||
price: "$1.80",
|
||||
variant: "500g",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-black-bread-slices-dark-color-tray-flour-oatmeal-buckwheat-wooden-board-mixed-color-distressed-background_179666-47513.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Organic Honey",
|
||||
price: "$5.00",
|
||||
variant: "250g",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/slices-bread-with-cup-tea-honey_23-2148438664.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Extra Virgin Olive Oil",
|
||||
price: "$12.00",
|
||||
variant: "500ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/olive-oil-bottle-isolated-white-background_93675-135321.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Fresh Eggs",
|
||||
price: "$3.00",
|
||||
variant: "Dozen",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/eggs-black-surface_23-2147849814.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Basmati Rice",
|
||||
price: "$8.50",
|
||||
variant: "2kg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-plain-boiled-rice-with-different-spices_140725-151168.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Products"
|
||||
description="Discover our latest arrivals and top-rated daily essentials."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "10k+", title: "Happy Customers", description: "Families served daily.", icon: Users },
|
||||
{ id: "m3", value: "99%", title: "Satisfaction", description: "Highly rated service.", icon: ThumbsUp },
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Our community continues to grow."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10k+",
|
||||
title: "Happy Customers",
|
||||
description: "Families served daily.",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "500+",
|
||||
title: "Products",
|
||||
description: "Available in store.",
|
||||
icon: ShoppingBag,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99%",
|
||||
title: "Satisfaction",
|
||||
description: "Highly rated service.",
|
||||
icon: ThumbsUp,
|
||||
},
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Our community continues to grow."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Shafi Mart is my go-to store! The quality and ease of shopping are unmatched in this area."
|
||||
rating={5}
|
||||
author="Amira Khan"
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
avatars={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Shafi Mart is my go-to store! The quality and ease of shopping are unmatched in this area."
|
||||
rating={5}
|
||||
author="Amira Khan"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-woman-relaxing-home_23-2150307065.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/arab-man-holding-hands-waist_482257-77906.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-with-shining-skin_633478-1623.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
|
||||
alt: "Happy businessman",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer delivery?", content: "Yes, we offer same-day delivery on orders placed before 2 PM." },
|
||||
{ id: "f2", title: "What payment methods are accepted?", content: "We accept credit/debit cards, online wallets, and cash on delivery." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about shopping with us."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you offer delivery?",
|
||||
content: "Yes, we offer same-day delivery on orders placed before 2 PM.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What payment methods are accepted?",
|
||||
content: "We accept credit/debit cards, online wallets, and cash on delivery.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How can I return a product?",
|
||||
content: "Returns are processed within 24 hours of purchase if the product is in its original packaging.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about shopping with us."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get In Touch"
|
||||
description="Have questions? We are here to help you anytime."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your message", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get In Touch"
|
||||
description="Have questions? We are here to help you anytime."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiling-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-pointing-side-isolated-purple-wall_141793-94405.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "About", items: [{ label: "Our Story", href: "#about" }] },
|
||||
{ title: "Services", items: [{ label: "Delivery", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 Shafi Mart"
|
||||
bottomRightText="All Rights Reserved"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "About",
|
||||
items: [
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Delivery",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Shafi Mart"
|
||||
bottomRightText="All Rights Reserved"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
href="https://wa.me/yourphonenumber"
|
||||
className="fixed bottom-6 right-6 z-50 bg-green-500 text-white p-4 rounded-full shadow-lg hover:scale-110 transition-transform"
|
||||
aria-label="WhatsApp"
|
||||
>
|
||||
<MessageCircle size={28} />
|
||||
</a>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user