bender/df856260-b669-4ea9-b386-74fd86b23230
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #3

Merged
bender merged 4 commits from version_2 into main 2026-04-15 14:36:42 +00:00
Conversation 0 Commits 4 Files Changed 4 +129 -457
4 changed files with 129 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/app/about/page.tsx
View File

@@ -2,10 +2,10 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Instagram, Twitter } from "lucide-react";
export default function AboutPage() {
@@ -23,61 +23,48 @@ export default function AboutPage() {
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "Projects", id: "/projects" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
brandName="Sbo Roofing"
/>
</div>
<div id="team" data-section="team">
<TeamCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Meet the Team"
description="Dedicated individuals building excellence."
groups={[
{
id: "t1", groupTitle: "Leadership", members: [
{
id: "m2", title: "Jane Smith", subtitle: "Director", detail: "Founder and lead engineer", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-architect-looking-camera_23-2148242889.jpg"},
],
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Visit Us"
title="Our Offices"
description="Find us at Nsawo stage, Kampala."
mediaAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/modern-architectural-building_181624-527.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Sbo Roofing Contractors Ltd"
copyrightText="© 2025 Sbo Roofing Contractors. All rights reserved."
socialLinks={[
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
]}
/>
</div>
<NavbarStyleApple
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
brandName="Sbo Roofing"
/>
<MetricSplitMediaAbout
title="Our Story & Mission"
description="We are a team of dedicated professionals committed to providing top-tier construction services in Kampala. Our focus is on integrity, quality craftsmanship, and long-term customer relationships."
metrics={[
{ value: "15+", title: "Years Experience" },
{ value: "500+", title: "Projects Completed" },
]}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/team-partners-meeting-construction-site_482257-8113.jpg"
imageAlt="Diverse construction team discussing project"
mediaAnimation="slide-up"
metricsAnimation="blur-reveal"
/>
<TeamCardFive
title="Our Leadership Team"
description="Meet the experts behind Sbo Roofing."
animationType="slide-up"
textboxLayout="default"
team={[
{ id: "1", name: "Samuel K.", role: "Managing Director", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-architect-looking-camera_23-2148242889.jpg" },
{ id: "2", name: "Linda M.", role: "Senior Project Manager", imageSrc: "http://img.b2bpic.net/free-photo/portrait-african-american-female-architect_23-2149124284.jpg" },
{ id: "3", name: "David B.", role: "Lead Engineer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-construction-worker_23-2148233742.jpg" }
]}
/>
<FooterCard
logoText="Sbo Roofing Contractors Ltd"
socialLinks={[
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
]}
/>
</ReactLenis>
</ThemeProvider>
);
}
}

288
src/app/page.tsx
View File

@@ -30,25 +30,13 @@ export default function LandingPage() {
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "/",
},
name: "Home", id: "/"},
{
name: "Services",
id: "/services",
},
name: "Services", id: "/services"},
{
name: "Projects",
id: "/projects",
},
name: "About", id: "/about"},
{
name: "About",
id: "/about",
},
{
name: "Contact",
id: "/contact",
},
name: "Contact", id: "/contact"},
]}
brandName="Sbo Roofing"
/>
@@ -57,116 +45,62 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{
variant: "gradient-bars",
}}
variant: "gradient-bars"}}
title="Reliable Roofing & Construction Experts in Kampala"
description="Delivering high-quality, durable construction and roofing solutions across Uganda with unmatched expertise and integrity."
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/view-modern-construction-site_23-2151317233.jpg?_wi=1",
imageAlt: "Roofing Work 1",
},
imageSrc: "http://img.b2bpic.net/free-photo/view-modern-construction-site_23-2151317233.jpg?_wi=1", imageAlt: "Roofing Work 1"},
{
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-man-working-roof_23-2149343672.jpg",
imageAlt: "Roofing Work 2",
},
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-man-working-roof_23-2149343672.jpg", imageAlt: "Roofing Work 2"},
{
imageSrc: "http://img.b2bpic.net/free-photo/workman-holding-empty-placard_1368-5687.jpg",
imageAlt: "Roofing Work 3",
},
imageSrc: "http://img.b2bpic.net/free-photo/workman-holding-empty-placard_1368-5687.jpg", imageAlt: "Roofing Work 3"},
{
imageSrc: "http://img.b2bpic.net/free-photo/service-worker-painting-car-auto-service_23-2149486992.jpg",
imageAlt: "Roofing Work 4",
},
imageSrc: "http://img.b2bpic.net/free-photo/service-worker-painting-car-auto-service_23-2149486992.jpg", imageAlt: "Roofing Work 4"},
{
imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg",
imageAlt: "Roofing Work 5",
},
imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg", imageAlt: "Roofing Work 5"},
{
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-roof-with-drill_23-2148748775.jpg",
imageAlt: "Roofing Work 6",
},
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-roof-with-drill_23-2148748775.jpg", imageAlt: "Roofing Work 6"},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/construction-work-site_1398-2991.jpg",
imageAlt: "Construct 1",
},
imageSrc: "http://img.b2bpic.net/free-photo/construction-work-site_1398-2991.jpg", imageAlt: "Construct 1"},
{
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2149343659.jpg",
imageAlt: "Construct 2",
},
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2149343659.jpg", imageAlt: "Construct 2"},
{
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-working-roof_23-2149343660.jpg",
imageAlt: "Construct 3",
},
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-working-roof_23-2149343660.jpg", imageAlt: "Construct 3"},
{
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530736.jpg",
imageAlt: "Construct 4",
},
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530736.jpg", imageAlt: "Construct 4"},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-male-shirt-helmet-holding-blackboard-showing-thumb-down-looking-displeased-front-view_176474-30109.jpg",
imageAlt: "Construct 5",
},
imageSrc: "http://img.b2bpic.net/free-photo/young-male-shirt-helmet-holding-blackboard-showing-thumb-down-looking-displeased-front-view_176474-30109.jpg", imageAlt: "Construct 5"},
{
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-water-drips-morning-dew-car-window_181624-3141.jpg",
imageAlt: "Construct 6",
},
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-water-drips-morning-dew-car-window_181624-3141.jpg", imageAlt: "Construct 6"},
]}
buttons={[
{
text: "Get a Quote",
href: "/contact",
},
text: "Get a Quote", href: "/contact"},
{
text: "Contact Us",
href: "/contact",
},
text: "Contact Us", href: "/contact"},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/medium-shot-engineer-architect-looking-clipboard_23-2148233775.jpg",
alt: "Client 1",
},
src: "http://img.b2bpic.net/free-photo/medium-shot-engineer-architect-looking-clipboard_23-2148233775.jpg", alt: "Client 1"},
{
src: "http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124270.jpg",
alt: "Client 2",
},
src: "http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124270.jpg", alt: "Client 2"},
{
src: "http://img.b2bpic.net/free-photo/close-up-engineer-architect-shaking-hands_23-2148233782.jpg",
alt: "Client 3",
},
src: "http://img.b2bpic.net/free-photo/close-up-engineer-architect-shaking-hands_23-2148233782.jpg", alt: "Client 3"},
{
src: "http://img.b2bpic.net/free-photo/building-construction-workers-site_23-2149124256.jpg",
alt: "Client 4",
},
src: "http://img.b2bpic.net/free-photo/building-construction-workers-site_23-2149124256.jpg", alt: "Client 4"},
{
src: "http://img.b2bpic.net/free-photo/front-view-smiley-architect-looking-camera_23-2148242889.jpg",
alt: "Client 5",
},
src: "http://img.b2bpic.net/free-photo/front-view-smiley-architect-looking-camera_23-2148242889.jpg", alt: "Client 5"},
]}
avatarText="Trusted by 500+ happy clients"
marqueeItems={[
{
type: "text",
text: "Quality Assured",
},
{
type: "text",
text: "Professional Work",
},
{
type: "text",
text: "On-Time Completion",
},
{
type: "text",
text: "Reliable Materials",
},
{
type: "text",
text: "Kampala Expert",
},
{ type: "text", text: "Quality Assured" },
{ type: "text", text: "Professional Work" },
{ type: "text", text: "On-Time Completion" },
{ type: "text", text: "Reliable Materials" },
{ type: "text", text: "Kampala Expert" },
]}
/>
</div>
@@ -177,18 +111,9 @@ export default function LandingPage() {
title="Years of Excellence in Kampala"
description="Sbo Roofing has been at the forefront of construction and roofing innovation, serving homeowners and businesses with pride."
metrics={[
{
value: "500+",
title: "Completed Projects",
},
{
value: "15+",
title: "Years Experience",
},
{
value: "100%",
title: "Satisfaction Rate",
},
{ value: "500+", title: "Completed Projects" },
{ value: "15+", title: "Years Experience" },
{ value: "100%", title: "Satisfaction Rate" },
]}
mediaAnimation="slide-up"
metricsAnimation="blur-reveal"
@@ -197,157 +122,14 @@ export default function LandingPage() {
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Sarah K.",
role: "Owner",
company: "Residential",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/architect-client-hand-shaking_23-2148243001.jpg",
},
{
id: "2",
name: "John M.",
role: "Director",
company: "Commercial",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-professional-architecture-holding-clipboard-construction-site_23-2148204025.jpg",
},
{
id: "3",
name: "David O.",
role: "Homeowner",
company: "Residential",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/architect-team-partners-working-design-desk_482257-8112.jpg",
},
{
id: "4",
name: "Alice N.",
role: "Client",
company: "Property",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/front-view-worker-construction-wearing-protection-gear_23-2148784061.jpg",
},
{
id: "5",
name: "James B.",
role: "Partner",
company: "Building",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-construction-worker_23-2148233742.jpg",
},
]}
title="Trusted by Kampala"
description="Hear what our valued clients have to say about our construction excellence."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Clear & Honest Pricing"
description="Choose a package that suits your construction project size."
plans={[
{
id: "basic",
badge: "Essential",
price: "Competitive",
subtitle: "For small repairs",
buttons: [
{
text: "Choose Basic",
href: "/contact",
},
],
features: [
"Leak detection",
"Minor sealing",
"Tile replacement",
],
},
{
id: "pro",
badge: "Standard",
price: "Custom Quote",
subtitle: "For home upgrades",
buttons: [
{
text: "Choose Pro",
href: "/contact",
},
],
features: [
"Full roof installation",
"Structural check",
"High-quality tiles",
"Safety inspection",
],
},
]}
/>
</div>
<div id="product" data-section="product">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Quality Materials"
description="We use the best roofing supplies for long-lasting results."
products={[
{
id: "p1",
brand: "RoofMax",
name: "Standard Clay Tiles",
price: "Contact",
rating: 5,
reviewCount: "12",
imageSrc: "http://img.b2bpic.net/free-photo/home-clay-roof-tile_657883-716.jpg",
},
{
id: "p2",
brand: "SteelStrong",
name: "Structural Steel Frame",
price: "Custom",
rating: 5,
reviewCount: "8",
imageSrc: "http://img.b2bpic.net/free-photo/steel-bar-site-construction_1150-10125.jpg",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Sbo Roofing Contractors Ltd"
copyrightText="© 2025 Sbo Roofing Contractors. All rights reserved."
socialLinks={[
{
icon: Facebook,
href: "#",
ariaLabel: "Facebook",
},
{
icon: Instagram,
href: "#",
ariaLabel: "Instagram",
},
{
icon: Twitter,
href: "#",
ariaLabel: "Twitter",
},
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
]}
/>
</div>

181
src/app/services/page.tsx
View File

@@ -2,13 +2,13 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterCard from '@/components/sections/footer/FooterCard';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Instagram, Twitter } from "lucide-react";
export default function LandingPage() {
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
@@ -23,142 +23,45 @@ export default function LandingPage() {
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Services",
id: "/services",
},
{
name: "Projects",
id: "/projects",
},
{
name: "About",
id: "/about",
},
{
name: "Contact",
id: "/contact",
},
]}
brandName="Sbo Roofing"
/>
</div>
<div id="services-features" data-section="services-features">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={false}
features={[
{
tag: "Roofing",
title: "Roofing Installation",
subtitle: "Top-tier roof installation",
description: "Professional installation of modern roofing tiles and sheets.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-painting-car-door_23-2149714300.jpg",
},
{
tag: "Repairs",
title: "Roof Repairs",
subtitle: "Swift reliable repairs",
description: "Detecting and fixing leaks to keep your home safe.",
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-building-roof-house_23-2148748843.jpg",
},
{
tag: "Waterproofing",
title: "Waterproofing",
subtitle: "Protection against elements",
description: "Advanced solutions for roof and wall sealing.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-roof_23-2149343643.jpg",
},
{
tag: "Construction",
title: "General Construction",
subtitle: "Full project support",
description: "Complete building and construction from ground up.",
imageSrc: "http://img.b2bpic.net/free-photo/male-worker-screeding-floor-construction-site_651396-2362.jpg",
},
]}
title="Our Expert Services"
description="We offer a wide range of professional construction services tailored to your needs."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Pricing Packages"
description="Find the right service tier for your needs."
plans={[
{
id: "s1",
badge: "Repair",
price: "UGX 500k+",
subtitle: "Basic maintenance",
buttons: [
{
text: "Select",
href: "/contact",
},
],
features: [
"Leak detection",
"Fast response",
],
},
{
id: "s2",
badge: "Full",
price: "Quote",
subtitle: "Full construction",
buttons: [
{
text: "Contact",
href: "/contact",
},
],
features: [
"Full build",
"Engineering",
"Site supervision",
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Sbo Roofing Contractors Ltd"
copyrightText="© 2025 Sbo Roofing Contractors. All rights reserved."
socialLinks={[
{
icon: Facebook,
href: "#",
ariaLabel: "Facebook",
},
{
icon: Instagram,
href: "#",
ariaLabel: "Instagram",
},
{
icon: Twitter,
href: "#",
ariaLabel: "Twitter",
},
]}
/>
</div>
<NavbarStyleApple
navItems={[
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
brandName="Sbo Roofing"
/>
<FeatureCardSeven
title="Our Detailed Service Offerings"
description="We provide a comprehensive range of roofing and construction services tailored to your specific needs."
animationType="slide-up"
textboxLayout="split"
features={[
{ title: "Roof Installation", description: "High-quality installation services for all types of roofing structures using durable materials.", imageSrc: "http://img.b2bpic.net/free-photo/roofer-installing-metal-roofing-tiles_23-2149343673.jpg" },
{ title: "Leak Repair", description: "Professional diagnosis and prompt repair of roof leaks to protect your property.", imageSrc: "http://img.b2bpic.net/free-photo/repairman-working-construction-site_23-2149343680.jpg" },
{ title: "Structural Checks", description: "Detailed safety inspections and structural reinforcement for long-term reliability.", imageSrc: "http://img.b2bpic.net/free-photo/engineer-working-construction-site_23-2149124290.jpg" }
]}
/>
<PricingCardEight
title="Transparent Pricing Packages"
description="Select the service plan that fits your project scope and budget."
animationType="slide-up"
textboxLayout="default"
plans={[
{ id: "1", badge: "Essential", price: "Custom Quote", subtitle: "For minor maintenance", features: ["Site Assessment", "Basic Sealants", "Safety Check"], buttons: [{ text: "Inquire", href: "/contact" }] },
{ id: "2", badge: "Premium", price: "Custom Quote", subtitle: "For complete roofing", features: ["Full Installation", "Premium Materials", "Long-term Warranty", "Priority Support"], buttons: [{ text: "Inquire", href: "/contact" }] }
]}
/>
<FooterCard
logoText="Sbo Roofing Contractors Ltd"
socialLinks={[
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
]}
/>
</ReactLenis>
</ThemeProvider>
);
}
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612;
--primary-cta: #15479c;
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #ffffff;
--primary-cta: #1f7cff;
--primary-cta-text: #ffffff;
--secondary-cta: #FF7B05;
--secondary-cta: #f96b2f;
--secondary-cta-text: #ffffff;
--accent: #e2e2e2;
--background-accent: #f9f9f9;
--accent: #737373;
--background-accent: #1a1a1a;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);