Merge version_1 into main #2
452
src/app/page.tsx
452
src/app/page.tsx
@@ -28,381 +28,95 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Locations",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="YogurtBar"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="YogurtBar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Karachi's Freshest Froyo"
|
||||
description="Indulge in creamy, dreamy frozen yogurt swirls topped with the finest local ingredients. Taste the happiness in every spoonful."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Ahmed",
|
||||
handle: "@sarah_froyo",
|
||||
testimonial: "The strawberry swirl is absolutely unmatched! Best in Clifton.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-people-enjoying-street-food_23-2151525672.jpg?_wi=1",
|
||||
imageAlt: "fresh frozen yogurt swirl pink teal",
|
||||
},
|
||||
{
|
||||
name: "Zaid Khan",
|
||||
handle: "@zaidk",
|
||||
testimonial: "Finally, a froyo place that actually uses fresh fruit toppings. Love it!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-islamic-family-home_23-2149887027.jpg",
|
||||
imageAlt: "fresh frozen yogurt swirl pink teal",
|
||||
},
|
||||
{
|
||||
name: "Maria Ali",
|
||||
handle: "@mariaali",
|
||||
testimonial: "My kids adore the flavors here. Highly recommend!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fruity-muesli-with-fresh-sliced-fruits_140725-84767.jpg?_wi=1",
|
||||
imageAlt: "fresh frozen yogurt swirl pink teal",
|
||||
},
|
||||
{
|
||||
name: "Ali Hassan",
|
||||
handle: "@alihassan",
|
||||
testimonial: "Fresh, clean, and delicious. My daily go-to.",
|
||||
rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-looking-pastries-through-glass-showcase-cafe_171337-17133.jpg?_wi=1",
|
||||
imageAlt: "fresh frozen yogurt swirl pink teal",
|
||||
},
|
||||
{
|
||||
name: "Fatima Noor",
|
||||
handle: "@fatiman",
|
||||
testimonial: "Simply the best froyo in the city. Fast service!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-friends-eating-ice-cream-amusement-park_23-2147918857.jpg?_wi=1",
|
||||
imageAlt: "fresh frozen yogurt swirl pink teal",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Menu",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "WhatsApp Us",
|
||||
href: "https://wa.me/92",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-people-enjoying-street-food_23-2151525672.jpg?_wi=2"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-woman-with-ice-cream-cone_23-2149428108.jpg",
|
||||
alt: "Customer profile 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/friends-posing-fun-way_23-2148650429.jpg",
|
||||
alt: "Customer profile 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-pretty-girl-dress-eating-ice-cream-cafe_613910-2108.jpg",
|
||||
alt: "Customer profile 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-pretty-girl-with-pink-ice-cream_23-2148311197.jpg",
|
||||
alt: "Customer profile 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-friends-eating-tasty-ice-cream_23-2150232366.jpg",
|
||||
alt: "Customer profile 5",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Karachi's Freshest Froyo"
|
||||
description="Indulge in creamy, dreamy frozen yogurt swirls topped with the finest local ingredients. Taste the happiness in every spoonful."
|
||||
testimonials={[
|
||||
{ name: "Sarah Ahmed", handle: "@sarah_froyo", testimonial: "The strawberry swirl is absolutely unmatched! Best in Clifton.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-people-enjoying-street-food_23-2151525672.jpg", imageAlt: "fresh frozen yogurt swirl pink teal" },
|
||||
{ name: "Zaid Khan", handle: "@zaidk", testimonial: "Finally, a froyo place that actually uses fresh fruit toppings. Love it!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-islamic-family-home_23-2149887027.jpg", imageAlt: "fresh frozen yogurt swirl pink teal" },
|
||||
{ name: "Maria Ali", handle: "@mariaali", testimonial: "My kids adore the flavors here. Highly recommend!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/top-view-fruity-muesli-with-fresh-sliced-fruits_140725-84767.jpg", imageAlt: "fresh frozen yogurt swirl pink teal" },
|
||||
{ name: "Ali Hassan", handle: "@alihassan", testimonial: "Fresh, clean, and delicious. My daily go-to.", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/girl-looking-pastries-through-glass-showcase-cafe_171337-17133.jpg", imageAlt: "fresh frozen yogurt swirl pink teal" },
|
||||
{ name: "Fatima Noor", handle: "@fatiman", testimonial: "Simply the best froyo in the city. Fast service!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-friends-eating-ice-cream-amusement-park_23-2147918857.jpg", imageAlt: "fresh frozen yogurt swirl pink teal" },
|
||||
]}
|
||||
buttons={[{ text: "View Menu", href: "#products" }, { text: "WhatsApp Us", href: "https://wa.me/92" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-people-enjoying-street-food_23-2151525672.jpg"
|
||||
avatars={[{ src: "http://img.b2bpic.net/free-photo/medium-shot-woman-with-ice-cream-cone_23-2149428108.jpg", alt: "Customer 1" }, { src: "http://img.b2bpic.net/free-photo/friends-posing-fun-way_23-2148650429.jpg", alt: "Customer 2" }, { src: "http://img.b2bpic.net/free-photo/young-pretty-girl-dress-eating-ice-cream-cafe_613910-2108.jpg", alt: "Customer 3" }, { src: "http://img.b2bpic.net/free-photo/close-up-pretty-girl-with-pink-ice-cream_23-2148311197.jpg", alt: "Customer 4" }, { src: "http://img.b2bpic.net/free-photo/front-view-friends-eating-tasty-ice-cream_23-2150232366.jpg", alt: "Customer 5" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Crafting Joy",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-islamic-family-home_23-2149887027.jpg",
|
||||
alt: "Yogurt Bar Freshness",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: "Every Single Day",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Visit Branches",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[{ type: "text", content: "Crafting Joy" }, { type: "image", src: "http://img.b2bpic.net/free-photo/medium-shot-islamic-family-home_23-2149887027.jpg", alt: "Yogurt Bar" }, { type: "text", content: "Every Day" }]}
|
||||
buttons={[{ text: "Visit Branches", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Fresh Ingredients",
|
||||
descriptions: [
|
||||
"Hand-picked seasonal fruits sourced from local farmers daily.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fruity-muesli-with-fresh-sliced-fruits_140725-84767.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Vibrant Spaces",
|
||||
descriptions: [
|
||||
"Designed for comfort and perfect Instagram moments.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-looking-pastries-through-glass-showcase-cafe_171337-17133.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Quick Delivery",
|
||||
descriptions: [
|
||||
"Order via WhatsApp and get your froyo fix fast.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-friends-eating-ice-cream-amusement-park_23-2147918857.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Why YogurtBar?"
|
||||
description="We bring premium ingredients and playful vibes to your favorite dessert experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Fresh", descriptions: ["Hand-picked daily."], imageSrc: "http://img.b2bpic.net/free-photo/top-view-fruity-muesli-with-fresh-sliced-fruits_140725-84767.jpg" },
|
||||
{ id: "f2", title: "Vibrant", descriptions: ["Instagram ready."], imageSrc: "http://img.b2bpic.net/free-photo/girl-looking-pastries-through-glass-showcase-cafe_171337-17133.jpg" },
|
||||
{ id: "f3", title: "Fast", descriptions: ["WhatsApp delivery."], imageSrc: "http://img.b2bpic.net/free-photo/young-friends-eating-ice-cream-amusement-park_23-2147918857.jpg" }
|
||||
]}
|
||||
title="Why Us?"
|
||||
description="Premium dessert experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Classic Strawberry",
|
||||
price: "PKR 450",
|
||||
variant: "Small",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/healthy-meal-with-yogurt-pineapple-glass_23-2148759727.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Tropical Mango",
|
||||
price: "PKR 550",
|
||||
variant: "Large",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-sweet-acai-bowl-arrangement_23-2149186007.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Cookies & Cream",
|
||||
price: "PKR 500",
|
||||
variant: "Medium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chocolate-layer-dessert_23-2147984174.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Berry Blast",
|
||||
price: "PKR 600",
|
||||
variant: "Premium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/healthy-meal-with-yogurt-pineapple-glass_23-2148759729.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Vanilla Bean",
|
||||
price: "PKR 400",
|
||||
variant: "Small",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tasty-ice-cream-scoop-glass-bowl-nuts_23-2148149586.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Chocolate Lover",
|
||||
price: "PKR 550",
|
||||
variant: "Medium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sweet-yoghurt-with-blackberries_23-2148469910.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Signature Swirls"
|
||||
description="From classic vanilla to tropical specials, find your favorite flavor today."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Strawberry", price: "PKR 450", variant: "Small", imageSrc: "http://img.b2bpic.net/free-photo/healthy-meal-with-yogurt-pineapple-glass_23-2148759727.jpg" },
|
||||
{ id: "p2", name: "Mango", price: "PKR 550", variant: "Large", imageSrc: "http://img.b2bpic.net/free-photo/delicious-sweet-acai-bowl-arrangement_23-2149186007.jpg" },
|
||||
{ id: "p3", name: "Cookies", price: "PKR 500", variant: "Medium", imageSrc: "http://img.b2bpic.net/free-photo/chocolate-layer-dessert_23-2147984174.jpg" },
|
||||
{ id: "p4", name: "Berry", price: "PKR 600", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/healthy-meal-with-yogurt-pineapple-glass_23-2148759729.jpg" },
|
||||
{ id: "p5", name: "Vanilla", price: "PKR 400", variant: "Small", imageSrc: "http://img.b2bpic.net/free-photo/tasty-ice-cream-scoop-glass-bowl-nuts_23-2148149586.jpg" },
|
||||
{ id: "p6", name: "Choco", price: "PKR 550", variant: "Medium", imageSrc: "http://img.b2bpic.net/free-photo/sweet-yoghurt-with-blackberries_23-2148469910.jpg" },
|
||||
]}
|
||||
title="Our Menu"
|
||||
description="Classic to tropical swirls."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"DHA Branch",
|
||||
"Clifton Branch",
|
||||
"Bahria Town Branch",
|
||||
"Gulshan Branch",
|
||||
"Tariq Road",
|
||||
"Dolmen Mall",
|
||||
"Lucky One",
|
||||
]}
|
||||
title="Serving Karachi Coast to Coast"
|
||||
description="Trusted by dessert lovers across all major neighborhoods."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Visit"
|
||||
title="Craving Swirls?"
|
||||
description="Find us or order today."
|
||||
buttons={[{ text: "WhatsApp", href: "https://wa.me/92" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Ahmed",
|
||||
handle: "@sarah",
|
||||
testimonial: "Fresh and super creamy!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-woman-looking-ice-cream-glass-sitting-restaurant_23-2147893601.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Zaid Khan",
|
||||
handle: "@zaid",
|
||||
testimonial: "Best froyo in Karachi.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-women-black-white-tone_53876-126901.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Maria Ali",
|
||||
handle: "@maria",
|
||||
testimonial: "My kids love it!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/loving-women-enjoying-cacao-together_23-2147744521.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Ali Hassan",
|
||||
handle: "@ali",
|
||||
testimonial: "Great service and vibe.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fruit-yogurt-served-glass_140725-1779.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Fatima Noor",
|
||||
handle: "@fatima",
|
||||
testimonial: "Perfect mango flavour.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/amazing-redhead-young-lady-sitting-cafe-while-eating-dessert_171337-15441.jpg",
|
||||
},
|
||||
]}
|
||||
title="Fans of the Swirl"
|
||||
description="Don't just take our word for it — hear what the city has to say."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you deliver?",
|
||||
content: "Yes, we offer home delivery via WhatsApp and major platforms.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is it healthy?",
|
||||
content: "We use natural, high-quality ingredients with plenty of fresh fruit options.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Are there party deals?",
|
||||
content: "We offer special catering packages for birthday parties and events.",
|
||||
},
|
||||
]}
|
||||
title="Questions?"
|
||||
description="Common inquiries about our shops and ingredients."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Craving a Swirl?"
|
||||
description="Find your nearest YogurtBar branch or order via WhatsApp."
|
||||
buttons={[
|
||||
{
|
||||
text: "WhatsApp Now",
|
||||
href: "https://wa.me/92",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/swirl-white-glossy-paint_23-2147746767.jpg"
|
||||
logoText="YogurtBar"
|
||||
columns={[
|
||||
{
|
||||
title: "Branches",
|
||||
items: [
|
||||
{
|
||||
label: "DHA",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Clifton",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Bahria",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Menu",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/swirl-white-glossy-paint_23-2147746767.jpg"
|
||||
logoText="YogurtBar"
|
||||
columns={[{ title: "Links", items: [{ label: "Home", href: "#" }, { label: "About", href: "#" }] }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user