Files
e8d1fd44-dd82-400c-bb60-ea5…/src/app/page.tsx
2026-03-05 12:46:34 +00:00

223 lines
12 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Zap, Layers, Heart, CheckCircle, Star, Sparkles, Crown, Users, Mail, Rocket } from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "How It Works", id: "features" },
{ name: "Benefits", id: "benefits" },
{ name: "Stories", id: "testimonial" },
{ name: "Pricing", id: "pricing" },
{ name: "FAQ", id: "faq" },
];
const footerColumns = [
{
title: "Product", items: [
{ label: "How It Works", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Security", href: "#" },
{ label: "Mobile App", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About Lumwod", href: "/about" },
{ label: "Our Mission", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
],
},
{
title: "Support", items: [
{ label: "Help Center", href: "#" },
{ label: "Contact Us", href: "#contact" },
{ label: "Terms of Service", href: "#" },
{ label: "Privacy Policy", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="compact"
sizing="mediumSizeLargeTitles"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Get Started", href: "/contact" }}
brandName="Lumwod"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
title="Turn Your Shares Into Instant Loans"
description="Save with Lumwod, grow your business, and get instant loan advances up to 2.5× your share value. Lower repayment rates. Community finance made simple."
tag="Community Finance"
tagIcon={Zap}
tagAnimation="slide-up"
background={{ variant: "canvas-reveal" }}
imageSrc="http://img.b2bpic.net/free-photo/phone-per-happy-african-businessman_1303-2158.jpg"
imageAlt="Happy African entrepreneur with phone and money"
buttons={[
{ text: "Join Lumwod", href: "/contact" },
{ text: "Learn More", href: "#features" },
]}
buttonAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
title="How Lumwod Works"
description="Simple steps to financial empowerment. Save, earn, and grow with our community finance platform."
tag="Process"
tagIcon={Layers}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: 1,
tag: "Step One", title: "Save Shares", subtitle: "Build your financial foundation", description: "Contribute savings called Shares to Lumwod. Every contribution brings you closer to accessing loans. Start with as little as KES 1,000 and watch your savings grow with the community.", imageSrc: "http://img.b2bpic.net/free-photo/black-woman-with-saving-piggy-bank_657883-724.jpg?_wi=1", imageAlt: "Person saving money with piggy bank", buttons: [],
},
{
id: 2,
tag: "Step Two", title: "Get 2× Advance", subtitle: "Unlock instant loan eligibility", description: "Automatically qualify for loan advances up to 2× your saved share value. Premium members access up to 2.5× advances. Fast approval through our mobile app using M-Pesa, Airtel Money, or bank transfer.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-woman-sing-credit-card-smart-phone-while-shopping-online-night-home_637285-4413.jpg?_wi=1", imageAlt: "Instant loan disbursement via mobile money", buttons: [],
},
{
id: 3,
tag: "Step Three", title: "Pay Slowly at Low Rates", subtitle: "Flexible, affordable repayment", description: "Repay at just 5% interest with flexible schedules that work for your life. Early repayment discounts available. Build credit while achieving your financial goals with Lumwod's community support.", imageSrc: "http://img.b2bpic.net/free-photo/office-table-with-smartphone-it-view-from_93675-132333.jpg?_wi=1", imageAlt: "Flexible payment schedule and financial planning", buttons: [],
},
]}
/>
</div>
<div id="benefits" data-section="benefits">
<TestimonialAboutCard
tag="Why Choose Lumwod"
tagIcon={Heart}
tagAnimation="slide-up"
title="Community-Powered Financial Growth"
description="Instant Loans. Low Rates. Real Support."
subdescription="Trusted by thousands across Kenya and East Africa"
icon={CheckCircle}
imageSrc="http://img.b2bpic.net/free-photo/pleased-energetic-group-conservationists-team-up-help-preserve-ecosystems_482257-91140.jpg?_wi=1"
imageAlt="Community members celebrating financial success"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardThirteen
title="Success Stories"
description="Hear from Lumwod members who transformed their lives through community finance"
tag="Real Impact"
tagIcon={Star}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
showRating={true}
animationType="slide-up"
carouselMode="buttons"
testimonials={[
{
id: "1", name: "Grace Mwangi", handle: "@gracemwangi", testimonial: "Lumwod helped me expand my salon business. I got a loan in just hours and now I have three employees. The low interest rates made it affordable!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-african-woman-with-flower-photo-album-desk-shop_23-2147882088.jpg", imageAlt: "Grace Mwangi, salon owner"},
{
id: "2", name: "Samuel Kipchoge", handle: "@samuelkip", testimonial: "As a small trader, I needed working capital fast. Lumwod's 2× share multiplier meant I could access funds immediately. Game changer for my business!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-businessman-standing-against-grey-wall-clenching-his-fist_23-2148087510.jpg", imageAlt: "Samuel Kipchoge, trader"},
{
id: "3", name: "Mary Njeri", handle: "@marynjeri", testimonial: "The community aspect of Lumwod is amazing. We support each other while saving and borrowing. I've built real friendships through this platform.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-businesswoman-working-touchpad-office_637285-12961.jpg", imageAlt: "Mary Njeri, community member"},
{
id: "4", name: "David Omondi", handle: "@davidomondi", testimonial: "With Lumwod, I finally understood how community savings could work. The flexible repayment and low rates gave me the confidence to borrow and invest.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-african-barista-standing-with-crossed-arms-counter-trendy-coffee-shop_613910-21100.jpg", imageAlt: "David Omondi, entrepreneur"},
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
title="Membership Plans"
description="Choose the plan that fits your financial goals. All plans include instant approval and mobile money payouts."
tag="Flexible Options"
tagIcon={Users}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
carouselMode="buttons"
cardClassName="data-[premium=true]:ring-2 data-[premium=true]:ring-primary-cta data-[premium=true]:scale-105 data-[premium=true]:shadow-lg"
plans={[
{
id: "starter", badge: "Perfect for Beginners", badgeIcon: Sparkles,
price: "Free", subtitle: "Start your journey with us", buttons: [{ text: "Get Started", href: "/contact" }],
features: [
"Save shares starting from KES 1,000", "Loan advances up to 2× shares", "5% interest rate", "Mobile money access (M-Pesa, Airtel)", "Phone verification security", "Community member support"],
},
{
id: "premium", badge: "Best Value", badgeIcon: Crown,
price: "KES 500/year", subtitle: "Enhanced benefits and higher limits", buttons: [{ text: "Upgrade Now", href: "/contact" }],
features: [
"All Starter features included", "Loan advances up to 2.5× shares", "Priority loan approval", "Lower 4% interest rate", "Increased share contribution limits", "Dedicated community managers", "Early repayment discounts", "Access to group savings events"],
},
{
id: "enterprise", badge: "For Groups", badgeIcon: Users,
price: "Custom", subtitle: "Bulk membership for savings groups", buttons: [{ text: "Contact Sales", href: "/contact" }],
features: [
"All Premium benefits", "Volume discounts for groups", "Dedicated account manager", "Custom repayment schedules", "Group dashboard access", "Training and support", "Flexible pricing tiers", "Priority integration support"],
},
]}
/>
</div>
<div id="cta" data-section="cta">
<ContactCTA
tag="Ready to Start?"
tagIcon={Rocket}
tagAnimation="slide-up"
title="Join Thousands of Members Growing with Lumwod"
description="Get instant access to community finance. Save shares, access loans, and grow your business or personal wealth with transparent, affordable rates."
buttons={[
{ text: "Download Lumwod App", href: "https://lumwod.app" },
{ text: "Schedule Demo", onClick: () => {} },
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Lumwod"
copyrightText="© 2025 Lumwod. All rights reserved."
columns={footerColumns}
/>
</div>
</ThemeProvider>
);
}