bender/bd2bb5c5-ddd7-4dae-9ae0-51b8207bf4d7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-09 17:08:46 +00:00
parent 38b8ad74d4
commit 61bb4b4dc9
1 changed files with 136 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

483
src/app/page.tsx
View File

@@ -28,362 +28,151 @@ export default function LandingPage() {
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "#hero",
},
{
name: "About",
id: "#about",
},
{
name: "Services",
id: "#features",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="The Brands"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "#hero" },
{ name: "About", id: "#about" },
{ name: "Services", id: "#features" },
{ name: "Contact", id: "#contact" },
]}
brandName="The Brands"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Welcome to The Brands"
description="Excellence in retail and brand experience. Located in the heart of Islamabad at Al-Malik Centre."
testimonials={[
{
name: "Ali Khan",
handle: "@ali_khan",
testimonial: "Excellent service and high-quality products. My go-to store in Islamabad.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/three-elegant-women-with-shopping-bags-city_1157-38849.jpg",
},
{
name: "Sarah Ahmed",
handle: "@sarah_ahmed",
testimonial: "The staff are incredibly helpful and the selection is unmatched.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-man-reaching-agreement-close-up_23-2148252085.jpg",
},
{
name: "Bilal Hussain",
handle: "@bilal_h",
testimonial: "A fantastic shopping experience every time I visit.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/shop-assistant-helping-female-customer-try-new-dress-woman-choosing-clothes-fashion-store-buying-clothes-boutique-concept_74855-11997.jpg",
},
{
name: "Zoya Iqbal",
handle: "@zoya_i",
testimonial: "Top-notch brand collections. Highly recommended.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/tired-happy-after-long-day-shopping_329181-8077.jpg",
},
{
name: "Usman Malik",
handle: "@usman_m",
testimonial: "Professional, reliable, and always on trend.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-posing-with-souvenirs_23-2149557028.jpg",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/chicago-downtown-bridge-buiding-usa_268835-3590.jpg"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-od-two-woman-shopping-mall_329181-8018.jpg",
alt: "Happy shopper",
},
{
src: "http://img.b2bpic.net/free-photo/african-man-guy-black-suit-mixed-people-work-together_1157-46253.jpg",
alt: "Professional shopper",
},
{
src: "http://img.b2bpic.net/free-photo/stylish-black-couple-have-business-conversation_1157-32141.jpg",
alt: "Stylish customer",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
alt: "Satisfied customer",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",
alt: "Modern consumer",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlayTestimonial
title="Welcome to The Brands"
description="Excellence in retail and brand experience. Located in the heart of Islamabad at Al-Malik Centre."
testimonials={[
{ name: "Ali Khan", handle: "@ali_khan", testimonial: "Excellent service and high-quality products. My go-to store in Islamabad.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/three-elegant-women-with-shopping-bags-city_1157-38849.jpg" },
{ name: "Sarah Ahmed", handle: "@sarah_ahmed", testimonial: "The staff are incredibly helpful and the selection is unmatched.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-man-reaching-agreement-close-up_23-2148252085.jpg" },
{ name: "Bilal Hussain", handle: "@bilal_h", testimonial: "A fantastic shopping experience every time I visit.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/shop-assistant-helping-female-customer-try-new-dress-woman-choosing-clothes-fashion-store-buying-clothes-boutique-concept_74855-11997.jpg" },
{ name: "Zoya Iqbal", handle: "@zoya_i", testimonial: "Top-notch brand collections. Highly recommended.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/tired-happy-after-long-day-shopping_329181-8077.jpg" },
{ name: "Usman Malik", handle: "@usman_m", testimonial: "Professional, reliable, and always on trend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-posing-with-souvenirs_23-2149557028.jpg" }
]}
imageSrc="http://img.b2bpic.net/free-photo/chicago-downtown-bridge-buiding-usa_268835-3590.jpg"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/portrait-od-two-woman-shopping-mall_329181-8018.jpg", alt: "Happy shopper" },
{ src: "http://img.b2bpic.net/free-photo/african-man-guy-black-suit-mixed-people-work-together_1157-46253.jpg", alt: "Professional shopper" },
{ src: "http://img.b2bpic.net/free-photo/stylish-black-couple-have-business-conversation_1157-32141.jpg", alt: "Stylish customer" },
{ src: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Satisfied customer" },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg", alt: "Modern consumer" },
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{
type: "text",
content: "Redefining Retail",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/customer-evaluation-feedback-smiley-emoticons_53876-125543.jpg",
alt: "The Brands Office",
},
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{ type: "text", content: "Redefining Retail" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/customer-evaluation-feedback-smiley-emoticons_53876-125543.jpg", alt: "The Brands Office" },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={false}
features={[
{
tag: "Quality",
title: "Premium Quality",
subtitle: "Curated Brands",
description: "We only stock the finest products to ensure your complete satisfaction.",
imageSrc: "http://img.b2bpic.net/free-photo/dreamy-interior-mall_23-2151591429.jpg",
},
{
tag: "Location",
title: "Central Location",
subtitle: "Blue Area, Islamabad",
description: "Easily accessible for all your shopping needs at Al-Malik Centre.",
imageSrc: "http://img.b2bpic.net/free-photo/girl-taking-photo-another-trying-dress-mall_176420-5780.jpg",
},
{
tag: "Support",
title: "Expert Service",
subtitle: "Customer Focused",
description: "Our team is here to help you find exactly what you're looking for.",
imageSrc: "http://img.b2bpic.net/free-photo/focused-customer-shop-assistant-meeting-fashion-store-sitting-together-using-tablet-discussing-clothes-purchases-consumerism-shopping-concept_74855-11713.jpg",
},
]}
title="Why Choose Us"
description="We bring a commitment to quality and excellence to the retail sector."
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={false}
features={[
{ tag: "Quality", title: "Premium Quality", subtitle: "Curated Brands", description: "We only stock the finest products to ensure your complete satisfaction.", imageSrc: "http://img.b2bpic.net/free-photo/dreamy-interior-mall_23-2151591429.jpg" },
{ tag: "Location", title: "Central Location", subtitle: "Blue Area, Islamabad", description: "Easily accessible for all your shopping needs at Al-Malik Centre.", imageSrc: "http://img.b2bpic.net/free-photo/girl-taking-photo-another-trying-dress-mall_176420-5780.jpg" },
{ tag: "Support", title: "Expert Service", subtitle: "Customer Focused", description: "Our team is here to help you find exactly what you're looking for.", imageSrc: "http://img.b2bpic.net/free-photo/focused-customer-shop-assistant-meeting-fashion-store-sitting-together-using-tablet-discussing-clothes-purchases-consumerism-shopping-concept_74855-11713.jpg" },
]}
title="Why Choose Us"
description="We bring a commitment to quality and excellence to the retail sector."
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Designer Handbag",
price: "$299",
variant: "Leather",
imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-working-her-workshop_23-2148877341.jpg",
},
{
id: "p2",
name: "Luxury Watch",
price: "$899",
variant: "Analog",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-clock-with-time-change_23-2149241142.jpg",
},
{
id: "p3",
name: "Designer Glasses",
price: "$150",
variant: "Classic",
imageSrc: "http://img.b2bpic.net/free-photo/sunglasses-with-pen-flash-usb_140725-7742.jpg",
},
{
id: "p4",
name: "Leather Wallet",
price: "$85",
variant: "Slim",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-back-school-concept-arrangement_23-2148586735.jpg",
},
{
id: "p5",
name: "Luxury Jewelry",
price: "$450",
variant: "Gold",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-aesthetic-earrings_23-2149649160.jpg",
},
{
id: "p6",
name: "Perfume Collection",
price: "$120",
variant: "Eau de Toilette",
imageSrc: "http://img.b2bpic.net/free-photo/assortment-beauty-products-displayed-shelf_23-2150718017.jpg",
},
]}
title="Our Featured Collection"
description="Explore our curated selection of luxury brands and accessories."
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Designer Handbag", price: "$299", variant: "Leather", imageSrc: "http://img.b2bpic.net/free-photo/fashion-designer-working-her-workshop_23-2148877341.jpg" },
{ id: "p2", name: "Luxury Watch", price: "$899", variant: "Analog", imageSrc: "http://img.b2bpic.net/free-photo/close-up-clock-with-time-change_23-2149241142.jpg" },
{ id: "p3", name: "Designer Glasses", price: "$150", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/sunglasses-with-pen-flash-usb_140725-7742.jpg" },
{ id: "p4", name: "Leather Wallet", price: "$85", variant: "Slim", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-back-school-concept-arrangement_23-2148586735.jpg" },
{ id: "p5", name: "Luxury Jewelry", price: "$450", variant: "Gold", imageSrc: "http://img.b2bpic.net/free-photo/still-life-aesthetic-earrings_23-2149649160.jpg" },
{ id: "p6", name: "Perfume Collection", price: "$120", variant: "Eau de Toilette", imageSrc: "http://img.b2bpic.net/free-photo/assortment-beauty-products-displayed-shelf_23-2150718017.jpg" },
]}
title="Our Featured Collection"
description="Explore our curated selection of luxury brands and accessories."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "10k+",
title: "Happy Customers",
description: "Served with pride in the heart of Islamabad.",
imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe_1157-32383.jpg",
},
{
id: "m2",
value: "50+",
title: "Global Brands",
description: "Trusted partnerships with premier designers.",
imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
},
{
id: "m3",
value: "15",
title: "Years of Experience",
description: "Established excellence since our inception.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-glasses-with-paper-bags_23-2147669707.jpg",
},
]}
title="Our Impact"
description="Numbers speak to our commitment and growth."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
metrics={[
{ id: "m1", value: "10k+", title: "Happy Customers", description: "Served with pride in the heart of Islamabad.", imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe_1157-32383.jpg" },
{ id: "m2", value: "50+", title: "Global Brands", description: "Trusted partnerships with premier designers.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg" },
{ id: "m3", value: "15", title: "Years of Experience", description: "Established excellence since our inception.", imageSrc: "http://img.b2bpic.net/free-photo/woman-glasses-with-paper-bags_23-2147669707.jpg" },
]}
title="Our Impact"
description="Numbers speak to our commitment and growth."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Ali Khan",
role: "CEO",
company: "TechCorp",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-women-looking-digital-tablet-clothes-store_23-2147968494.jpg",
},
{
id: "t2",
name: "Sarah Ahmed",
role: "Marketing Manager",
company: "DesignCo",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-with-shopping-bags_1157-32571.jpg",
},
{
id: "t3",
name: "Bilal Hussain",
role: "Entrepreneur",
company: "Innovate",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-blond-girl-happy-expression_1194-4509.jpg",
},
{
id: "t4",
name: "Zoya Iqbal",
role: "Creative Director",
company: "ArtStudio",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/women-talking-about-what-they-have-bought_329181-8017.jpg",
},
{
id: "t5",
name: "Usman Malik",
role: "Investor",
company: "FinanceGroup",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-fair-haired-woman-standing-near-rack-with-dresses-clothes-store-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11778.jpg",
},
]}
title="Client Stories"
description="What our customers say about us."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Ali Khan", role: "CEO", company: "TechCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-women-looking-digital-tablet-clothes-store_23-2147968494.jpg" },
{ id: "t2", name: "Sarah Ahmed", role: "Marketing Manager", company: "DesignCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-with-shopping-bags_1157-32571.jpg" },
{ id: "t3", name: "Bilal Hussain", role: "Entrepreneur", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-blond-girl-happy-expression_1194-4509.jpg" },
{ id: "t4", name: "Zoya Iqbal", role: "Creative Director", company: "ArtStudio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/women-talking-about-what-they-have-bought_329181-8017.jpg" },
{ id: "t5", name: "Usman Malik", role: "Investor", company: "FinanceGroup", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-caucasian-fair-haired-woman-standing-near-rack-with-dresses-clothes-store-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11778.jpg" },
]}
title="Client Stories"
description="What our customers say about us."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "What are your opening hours?",
content: "We are open from 11 AM to 9 PM, Sunday through Saturday.",
},
{
id: "f2",
title: "Where are you located?",
content: "We are located at P377+44F, Al-Malik Centre, Jinnah Ave, Blue Area, Islamabad.",
},
{
id: "f3",
title: "How can we contact you?",
content: "You can reach us at +92 51 2277959 for any inquiries.",
},
]}
title="Common Questions"
description="Find quick answers to common queries about our store."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "What are your opening hours?", content: "We are open from 11 AM to 9 PM, Sunday through Saturday." },
{ id: "f2", title: "Where are you located?", content: "We are located at P377+44F, Al-Malik Centre, Jinnah Ave, Blue Area, Islamabad." },
{ id: "f3", title: "How can we contact you?", content: "You can reach us at +92 51 2277959 for any inquiries." },
]}
title="Common Questions"
description="Find quick answers to common queries about our store."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
text="Visit us at Al-Malik Centre, Jinnah Ave, Blue Area, Islamabad. Our doors are open and we look forward to serving you."
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
text="Visit us at Al-Malik Centre, Jinnah Ave, Blue Area, Islamabad. Our doors are open and we look forward to serving you."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Address",
items: [
{
label: "Al-Malik Centre, Jinnah Ave, Islamabad",
href: "#",
},
],
},
{
title: "Contact",
items: [
{
label: "+92 51 2277959",
href: "tel:+92512277959",
},
],
},
{
title: "Useful Links",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
bottomLeftText="© 2024 The Brands. All rights reserved."
bottomRightText="Built with quality."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Address", items: [{ label: "Al-Malik Centre, Jinnah Ave, Islamabad", href: "#" }] },
{ title: "Contact", items: [{ label: "+92 51 2277959", href: "tel:+92512277959" }] },
{ title: "Useful Links", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
]}
bottomLeftText="© 2024 The Brands. All rights reserved."
bottomRightText="Built with quality."
/>
</div>
</ReactLenis>
</ThemeProvider>
);