Files
8988015e-0f63-471b-8f14-5b7…/src/app/page.tsx
2026-04-11 14:04:21 +00:00

203 lines
9.8 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="medium"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home", id: "hero"},
{
name: "Collections", id: "products"},
{
name: "Reviews", id: "testimonials"},
{
name: "Contact", id: "contact"},
]}
brandName="Fashion Hub Meru"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Elevate Your Style in Meru"
description="Discover the finest fashion designs, curated apparel, and professional tailor services right in the heart of Meru Town. Experience quality fashion at your doorstep."
buttons={[
{
text: "Browse Collections", href: "#products"},
{
text: "Contact Us", href: "#contact"},
]}
imageSrc="http://img.b2bpic.net/free-photo/elements-fashion-designing-studio_23-2150407869.jpg"
showBlur={true}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/blonde-girl-tries-red-dress-boutique-looking-mirror_627829-8540.jpg", alt: "Blonde girl tries a red dress"},
{
src: "http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150861914.jpg", alt: "Futuristic store interior"},
{
src: "http://img.b2bpic.net/free-photo/asian-store-employee-suggesting-trendy-items-client-wheelchair-user_482257-108841.jpg", alt: "Asian store employee"},
{
src: "http://img.b2bpic.net/free-photo/clothing-store-with-blurred-effect_23-2148164791.jpg", alt: "Clothing store blur"},
{
src: "http://img.b2bpic.net/free-photo/successful-pirchase-shopping-mall_329181-8070.jpg", alt: "Successful mall purchase"},
]}
avatarText="Trusted by thousands of happy fashion enthusiasts across Meru."
/>
</div>
<div id="features" data-section="features">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Premium Quality", description: "Hand-picked materials ensuring comfort and durability for all our clients.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-wearing-hat-using-tablet_23-2148401438.jpg" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/brown-fabric_1122-375.jpg" },
},
{
title: "Fast Delivery", description: "Get your favorite outfits delivered directly to your location across Meru town.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/people-putting-clothes-inside-boxes-wrapping-them_181624-21049.jpg" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-courier-yellow-shirt-red-cape-holding-package-blue-space-job_140725-29148.jpg" },
},
{
title: "Expert Service", description: "Professional fashion design and personalized shopping assistance for every visit.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/sensual-white-woman-drinking-cocktail-warm-day_197531-20634.jpg" },
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-shopping-bags-beautiful-dress_1303-17553.jpg" },
},
]}
showStepNumbers={false}
title="Why Choose Our Fashion Houses?"
description="We bring global trends to local streets with quality that lasts. Experience the best in retail and custom design."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{
id: "p1", name: "Chic Summer Dress", price: "KES 2,500", imageSrc: "http://img.b2bpic.net/free-photo/sensual-white-woman-drinking-cocktail-warm-day_197531-20634.jpg"},
{
id: "p2", name: "Premium Formal Suit", price: "KES 8,000", imageSrc: "http://img.b2bpic.net/free-photo/cropped-portrait-successful-businessman-buttoning-his-elegant-suit-isolated-dark-background_613910-5497.jpg"},
{
id: "p3", name: "Urban Street Wear", price: "KES 1,800", imageSrc: "http://img.b2bpic.net/free-photo/slender-lightskinned-young-female-legs-are-dressed-redblack-pants-highheeled-shoes-pink-background-elegant-style-spring-fashion-trends_197531-32019.jpg"},
{
id: "p4", name: "Designer Accessories", price: "KES 900", imageSrc: "http://img.b2bpic.net/free-photo/empty-trendy-clothing-store-selling-fashionable-items-shoes_482257-93115.jpg"},
{
id: "p5", name: "Winter Essential Coat", price: "KES 4,500", imageSrc: "http://img.b2bpic.net/free-photo/two-stylish-women-black-white-suits-heels-stands-outside-villa-wall-glass-wall_343596-2808.jpg"},
{
id: "p6", name: "Classic Evening Gown", price: "KES 6,500", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-stylish-model-posing_23-2148750334.jpg"},
]}
title="Latest Arrivals"
description="Browse our curated selection of ladies, gents, and children's fashion wear."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Sarah J.", handle: "@fashion_lover", testimonial: "The best fashion shop in Meru town. Always great variety.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-woman-black-jacket_176474-101946.jpg"},
{
id: "2", name: "John M.", handle: "@style_seeker", testimonial: "High quality clothes and very quick delivery service.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-women-shopping-city_23-2149321874.jpg"},
{
id: "3", name: "Emily R.", handle: "@meru_beauty", testimonial: "Wonderful boutique experience! Highly recommend.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-girl-electronics-store-standing-table_78826-3063.jpg"},
{
id: "4", name: "David K.", handle: "@gentleman_look", testimonial: "Best place for men's fashion in Royal Business Park.", rating: 4,
imageSrc: "http://img.b2bpic.net/free-photo/two-happy-male-female-business-people-showing-thumbs-up-outdoors_1262-12567.jpg"},
{
id: "5", name: "Anita M.", handle: "@chic_look", testimonial: "Fantastic designs and excellent customer service.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-friends-shopping-clothes_23-2148385702.jpg"},
]}
showRating={true}
title="Our Happy Clients"
description="What our customers are saying about our store and fashion designs."
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={true}
background={{ variant: "radial-gradient" }}
tag="Contact Us"
title="Visit Us in Meru"
description="Need custom clothing or have a question? Reach out to us today for personalized support and orders."
buttons={[
{
text: "Call 0723 718 606", href: "tel:+254723718606"},
{
text: "WhatsApp Us", href: "https://wa.me/254723718606"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-shopping-mall_1203-8487.jpg"
logoText="Fashion Hub Meru"
columns={[
{
title: "Store", items: [
{
label: "About Us", href: "#"},
{
label: "Careers", href: "#"},
],
},
{
title: "Support", items: [
{
label: "Contact", href: "#contact"},
{
label: "Help Center", href: "#"},
],
},
{
title: "Network", items: [
{
label: "Partners", href: "#"},
{
label: "Find Us on GoAfrica", href: "https://www.goafricaonline.com"},
],
},
]}
copyrightText="© 2024 Fashion Hub Meru. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}