Merge version_1 into main #1
411
src/app/page.tsx
411
src/app/page.tsx
@@ -16,303 +16,140 @@ import { Building2, Coffee, Maximize, ShoppingBag, Users } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Galleria Mall"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Galleria Mall"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplitDualMedia
|
||||
background="gradient-bars"
|
||||
title="Your Unlimited Experience"
|
||||
description="Galleria Shopping Mall at the junction of Magadi and Langata Road. Discover 70+ renowned brands across 164,000 square feet of stress-free shopping."
|
||||
tag="Galleria Shopping Mall"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Brands",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150862140.jpg",
|
||||
imageAlt: "Galleria Mall interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/berlin-concert-hall-germany_181624-18088.jpg",
|
||||
imageAlt: "Galleria Mall architecture",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150862128.jpg",
|
||||
imageAlt: "Futuristic store interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/huge-building-with-many-windows_1127-370.jpg",
|
||||
imageAlt: "Grand mall facade",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-architectural-marvel-night_23-2152006102.jpg",
|
||||
imageAlt: "Mall architectural marvel at night",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Trusted by over 10,000 daily visitors"
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Your Unlimited Experience"
|
||||
description="Galleria Shopping Mall at the junction of Magadi and Langata Road. Discover 70+ renowned brands across 164,000 square feet of stress-free shopping."
|
||||
tag="Galleria Shopping Mall"
|
||||
buttons={[{ text: "Explore Brands", href: "#products" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150862140.jpg", imageAlt: "Galleria Mall interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/berlin-concert-hall-germany_181624-18088.jpg", imageAlt: "Galleria Mall architecture" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Trusted by over 10,000 daily visitors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="A Unique Masterplan"
|
||||
description={[
|
||||
"Galleria Shopping Mall brings you a selection of over 70 outlets of the most renowned brands in Shopping, Dining and Lifestyle.",
|
||||
"Our three-floored, open-plan building design promises a stress-free, convenient experience. We are now expanding with the Galleria Gardens Business Center and luxury residential townhouses.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="A Unique Masterplan"
|
||||
description={[
|
||||
"Galleria Shopping Mall brings you a selection of over 70 outlets of the most renowned brands in Shopping, Dining and Lifestyle.", "Our three-floored, open-plan building design promises a stress-free, convenient experience. We are now expanding with the Galleria Gardens Business Center and luxury residential townhouses."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: ShoppingBag,
|
||||
title: "70+ Retail Outlets",
|
||||
description: "Global brands like Carrefour and Bata.",
|
||||
},
|
||||
{
|
||||
icon: Coffee,
|
||||
title: "Dining & Lifestyle",
|
||||
description: "Enjoy world-class dining at Java and Artcaffe.",
|
||||
},
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Business Center",
|
||||
description: "Modern office spaces at Galleria Gardens.",
|
||||
},
|
||||
]}
|
||||
title="Our Renowned Services"
|
||||
description="We offer more than just shopping; we offer a total lifestyle destination."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: ShoppingBag, title: "70+ Retail Outlets", description: "Global brands like Carrefour and Bata." },
|
||||
{ icon: Coffee, title: "Dining & Lifestyle", description: "Enjoy world-class dining at Java and Artcaffe." },
|
||||
{ icon: Building2, title: "Business Center", description: "Modern office spaces at Galleria Gardens." },
|
||||
]}
|
||||
title="Our Renowned Services"
|
||||
description="We offer more than just shopping; we offer a total lifestyle destination."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Grocery Store",
|
||||
price: "High quality",
|
||||
variant: "Carrefour",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-young-blonde-lady-outdoors-with-eyes-closed_171337-19395.jpg",
|
||||
imageAlt: "Shopping mall store",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Footwear",
|
||||
price: "Top deals",
|
||||
variant: "Bata",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/restaurant-table-private-room-with-fireplace-wooden-ceilings-brick-walls_140725-8458.jpg",
|
||||
imageAlt: "Bata store",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Education",
|
||||
price: "Best prices",
|
||||
variant: "Text Book Center",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/census-concept-photographed-city-building_23-2148993223.jpg",
|
||||
imageAlt: "Books",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Fashion",
|
||||
price: "Style",
|
||||
variant: "Woolworths",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/restaurant-private-room-with-blue-chairs-white-walls-fireplace-wide-window_140725-8454.jpg",
|
||||
imageAlt: "Clothes",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Coffee",
|
||||
price: "Fresh beans",
|
||||
variant: "Java",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-businesswoman-posing-mall_1163-595.jpg",
|
||||
imageAlt: "Cafe",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Dining",
|
||||
price: "Gourmet",
|
||||
variant: "Artcaffe",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shopping-bags-woman-with-mobile-phone_329181-18752.jpg",
|
||||
imageAlt: "Bakery",
|
||||
},
|
||||
]}
|
||||
title="Popular Brands"
|
||||
description="The destination for your favorite local and international retailers."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
animationType="scale-rotate"
|
||||
products={[
|
||||
{ id: "1", name: "Grocery Store", price: "High quality", variant: "Carrefour", imageSrc: "http://img.b2bpic.net/free-photo/serious-young-blonde-lady-outdoors-with-eyes-closed_171337-19395.jpg", imageAlt: "Shopping mall store" },
|
||||
{ id: "2", name: "Footwear", price: "Top deals", variant: "Bata", imageSrc: "http://img.b2bpic.net/free-photo/restaurant-table-private-room-with-fireplace-wooden-ceilings-brick-walls_140725-8458.jpg", imageAlt: "Bata store" },
|
||||
{ id: "3", name: "Education", price: "Best prices", variant: "Text Book Center", imageSrc: "http://img.b2bpic.net/free-photo/census-concept-photographed-city-building_23-2148993223.jpg", imageAlt: "Books" }
|
||||
]}
|
||||
title="Popular Brands"
|
||||
description="The destination for your favorite local and international retailers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Building2,
|
||||
title: "Outlets",
|
||||
value: "70+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Maximize,
|
||||
title: "Square Feet",
|
||||
value: "164k",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Users,
|
||||
title: "Daily Visitors",
|
||||
value: "10k+",
|
||||
},
|
||||
]}
|
||||
title="Galleria by Numbers"
|
||||
description="Measuring our commitment to providing an unlimited lifestyle experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Building2, title: "Outlets", value: "70+" },
|
||||
{ id: "m2", icon: Maximize, title: "Square Feet", value: "164k" },
|
||||
{ id: "m3", icon: Users, title: "Daily Visitors", value: "10k+" },
|
||||
]}
|
||||
title="Galleria by Numbers"
|
||||
description="Measuring our commitment to providing an unlimited lifestyle experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="Galleria is my favorite shopping destination. The mix of shops and restaurants is unmatched in the city. Truly a stress-free experience every single time I visit."
|
||||
rating={5}
|
||||
author="Sarah M."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-hispanic-woman-smiling-confident-holding-take-away-paper-bag-street_839833-1756.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/women-going-upstairs-some-purchase_329181-8076.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/blonde-woman-talking-phone_23-2148660693.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-woman-carrying-shopping-bags_1170-806.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-woman-with-shopping-bags-city_1098-1697.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="Galleria is my favorite shopping destination. The mix of shops and restaurants is unmatched in the city. Truly a stress-free experience every single time I visit."
|
||||
rating={5}
|
||||
author="Sarah M."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-hispanic-woman-smiling-confident-holding-take-away-paper-bag-street_839833-1756.jpg", alt: "Customer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/women-going-upstairs-some-purchase_329181-8076.jpg", alt: "Customer" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get in Touch"
|
||||
description="Ready to learn more about our masterplan or business leasing opportunities? Reach out to us today."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Full Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "How can we help you?",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/long-corridor-showcase_1127-3441.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get in Touch"
|
||||
description="Ready to learn more about our masterplan or business leasing opportunities? Reach out to us today."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Full Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email Address" },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "How can we help you?" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/long-corridor-showcase_1127-3441.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Galleria"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#features" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
logoText="Galleria"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user