Merge version_1 into main #2
394
src/app/page.tsx
394
src/app/page.tsx
@@ -15,284 +15,140 @@ import { Briefcase, CheckCircle, Droplets, ShieldCheck, Sparkles, Star, Truck, W
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Workers",
|
||||
id: "workers",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "categories",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="RwandaJobs"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Workers", id: "workers" },
|
||||
{ name: "Services", id: "categories" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="RwandaJobs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Connect with Trusted Professionals in Rwanda"
|
||||
description="Find verified builders, plumbers, cleaners, and more. Secure connection guaranteed."
|
||||
buttons={[
|
||||
{
|
||||
text: "Browse Workers",
|
||||
href: "#workers",
|
||||
},
|
||||
{
|
||||
text: "Post a Job",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/a-high-quality-professional-photograph-o-1774645874924-e28dff4d.png?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-friendly-rwan-1774645874385-1683267f.png?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-an-experienced--1774645875787-af36d6b3.png?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-reliable-clea-1774645875162-b0db6ead.png?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-skilled-elect-1774645876383-05270612.png?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/a-high-quality-professional-photograph-o-1774645874924-e28dff4d.png?_wi=2",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Connect with Trusted Professionals in Rwanda"
|
||||
description="Find verified builders, plumbers, cleaners, and more. Secure connection guaranteed."
|
||||
buttons={[
|
||||
{ text: "Browse Workers", href: "#workers" },
|
||||
{ text: "Post a Job", href: "#contact" }
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/a-high-quality-professional-photograph-o-1774645874924-e28dff4d.png" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-friendly-rwan-1774645874385-1683267f.png" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-an-experienced--1774645875787-af36d6b3.png" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-reliable-clea-1774645875162-b0db6ead.png" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-skilled-elect-1774645876383-05270612.png" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/a-high-quality-professional-photograph-o-1774645874924-e28dff4d.png" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="categories" data-section="categories">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Construction",
|
||||
description: "Experienced builders for your project.",
|
||||
icon: Briefcase,
|
||||
},
|
||||
{
|
||||
title: "Cleaning",
|
||||
description: "Top-rated home and office cleaners.",
|
||||
icon: Sparkles,
|
||||
},
|
||||
{
|
||||
title: "Plumbing",
|
||||
description: "Certified professionals for any repairs.",
|
||||
icon: Droplets,
|
||||
},
|
||||
{
|
||||
title: "Electrical",
|
||||
description: "Safe electrical work by pros.",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
title: "Delivery",
|
||||
description: "Reliable courier services across city.",
|
||||
icon: Truck,
|
||||
},
|
||||
{
|
||||
title: "Repairs",
|
||||
description: "Skilled maintenance and repair help.",
|
||||
icon: Wrench,
|
||||
},
|
||||
]}
|
||||
title="Services We Offer"
|
||||
description="Professional services available at your doorstep."
|
||||
/>
|
||||
</div>
|
||||
<div id="categories" data-section="categories">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Construction", description: "Experienced builders for your project.", icon: Briefcase },
|
||||
{ title: "Cleaning", description: "Top-rated home and office cleaners.", icon: Sparkles },
|
||||
{ title: "Plumbing", description: "Certified professionals for any repairs.", icon: Droplets },
|
||||
{ title: "Electrical", description: "Safe electrical work by pros.", icon: Zap },
|
||||
{ title: "Delivery", description: "Reliable courier services across city.", icon: Truck },
|
||||
{ title: "Repairs", description: "Skilled maintenance and repair help.", icon: Wrench }
|
||||
]}
|
||||
title="Services We Offer"
|
||||
description="Professional services available at your doorstep."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="workers" data-section="workers">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "w1",
|
||||
name: "John N. - Plumber",
|
||||
price: "Unlock Contact",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-friendly-rwan-1774645874385-1683267f.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "w2",
|
||||
name: "Marie K. - Cleaner",
|
||||
price: "Unlock Contact",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-reliable-clea-1774645875162-b0db6ead.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "w3",
|
||||
name: "David B. - Builder",
|
||||
price: "Unlock Contact",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-an-experienced--1774645875787-af36d6b3.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "w4",
|
||||
name: "Eric T. - Electrician",
|
||||
price: "Unlock Contact",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-skilled-elect-1774645876383-05270612.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "w5",
|
||||
name: "Alice M. - Landscaper",
|
||||
price: "Unlock Contact",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-friendly-rwan-1774645874385-1683267f.png?_wi=3",
|
||||
},
|
||||
]}
|
||||
title="Featured Professionals"
|
||||
description="Verified experts ready to assist you today."
|
||||
/>
|
||||
</div>
|
||||
<div id="workers" data-section="workers">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "w1", name: "John N. - Plumber", price: "Unlock Contact", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-friendly-rwan-1774645874385-1683267f.png" },
|
||||
{ id: "w2", name: "Marie K. - Cleaner", price: "Unlock Contact", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-reliable-clea-1774645875162-b0db6ead.png" },
|
||||
{ id: "w3", name: "David B. - Builder", price: "Unlock Contact", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-an-experienced--1774645875787-af36d6b3.png" },
|
||||
{ id: "w4", name: "Eric T. - Electrician", price: "Unlock Contact", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-skilled-elect-1774645876383-05270612.png" },
|
||||
{ id: "w5", name: "Alice M. - Landscaper", price: "Unlock Contact", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/professional-headshot-of-a-friendly-rwan-1774645874385-1683267f.png" }
|
||||
]}
|
||||
title="Featured Professionals"
|
||||
description="Verified experts ready to assist you today."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1500+",
|
||||
title: "Verified Workers",
|
||||
description: "Rigorous vetting process.",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5000+",
|
||||
title: "Jobs Completed",
|
||||
description: "Successful connections made.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "4.8/5",
|
||||
title: "Avg. Rating",
|
||||
description: "Consistent high quality service.",
|
||||
icon: Star,
|
||||
},
|
||||
]}
|
||||
title="Platform Impact"
|
||||
description="Connecting trusted local pros every day."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "1500+", title: "Verified Workers", description: "Rigorous vetting process.", icon: ShieldCheck },
|
||||
{ id: "m2", value: "5000+", title: "Jobs Completed", description: "Successful connections made.", icon: CheckCircle },
|
||||
{ id: "m3", value: "4.8/5", title: "Avg. Rating", description: "Consistent high quality service.", icon: Star }
|
||||
]}
|
||||
title="Platform Impact"
|
||||
description="Connecting trusted local pros every day."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah U.",
|
||||
date: "Jan 2025",
|
||||
title: "Homeowner",
|
||||
quote: "Excellent plumbing service! Very professional.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/happy-rwandan-customer-smiling-at-the-ca-1774645875249-7d9fb31a.png",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Jean P.",
|
||||
date: "Dec 2024",
|
||||
title: "Business Owner",
|
||||
quote: "Cleaners arrived on time and did great work.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/business-owner-professional-rwandan-lady-1774645874783-9d657942.png",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Claire K.",
|
||||
date: "Nov 2024",
|
||||
title: "Manager",
|
||||
quote: "Reliable platform for finding builders.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/elderly-local-resident-authentic-and-war-1774645875139-08e83164.png",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Paul M.",
|
||||
date: "Oct 2024",
|
||||
title: "Resident",
|
||||
quote: "The unlock system is very secure.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/a-young-homeowner-modern-rwandan-setting-1774645875559-2d5cc91e.png",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Diane R.",
|
||||
date: "Sep 2024",
|
||||
title: "Student",
|
||||
quote: "Quick and easy, highly recommended.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/happy-rwandan-customer-smiling-at-the-ca-1774645875249-7d9fb31a.png",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Kigali"
|
||||
description="Hear what our community says about us."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah U.", date: "Jan 2025", title: "Homeowner", quote: "Excellent plumbing service! Very professional.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/happy-rwandan-customer-smiling-at-the-ca-1774645875249-7d9fb31a.png" },
|
||||
{ id: "t2", name: "Jean P.", date: "Dec 2024", title: "Business Owner", quote: "Cleaners arrived on time and did great work.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/business-owner-professional-rwandan-lady-1774645874783-9d657942.png" },
|
||||
{ id: "t3", name: "Claire K.", date: "Nov 2024", title: "Manager", quote: "Reliable platform for finding builders.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/elderly-local-resident-authentic-and-war-1774645875139-08e83164.png" },
|
||||
{ id: "t4", name: "Paul M.", date: "Oct 2024", title: "Resident", quote: "The unlock system is very secure.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/a-young-homeowner-modern-rwandan-setting-1774645875559-2d5cc91e.png" },
|
||||
{ id: "t5", name: "Diane R.", date: "Sep 2024", title: "Student", quote: "Quick and easy, highly recommended.", tag: "Verified", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXfh3spjBlEjxN0t7wsR4XpUsR/happy-rwandan-customer-smiling-at-the-ca-1774645875249-7d9fb31a.png" }
|
||||
]}
|
||||
title="Trusted by Kigali"
|
||||
description="Hear what our community says about us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How does unlocking work?",
|
||||
content: "You pay a small fee to get the worker's WhatsApp and phone number.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Are workers verified?",
|
||||
content: "Yes, we manually check IDs and references.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I get a refund?",
|
||||
content: "If the contact is invalid, we offer support.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common questions about how we work."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How does unlocking work?", content: "You pay a small fee to get the worker's WhatsApp and phone number." },
|
||||
{ id: "f2", title: "Are workers verified?", content: "Yes, we manually check IDs and references." },
|
||||
{ id: "f3", title: "Can I get a refund?", content: "If the contact is invalid, we offer support." }
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common questions about how we work."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="RwandaJobs"
|
||||
copyrightText="© 2025 | All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="RwandaJobs"
|
||||
copyrightText="© 2025 | All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user