296 lines
15 KiB
TypeScript
296 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Portfolio", id: "portfolio"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Mapulana Glass"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Precision Glass & Aluminium. Built for Modern Living."
|
|
description="Custom aluminium windows, doors, and roofing solutions crafted for durability, security, and style."
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/serious-young-blonde-lady-walking-outdoors_171337-19439.jpg", imageAlt: "Luxury home aluminium windows"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/service-maintenance-worker-repairing_23-2149176709.jpg", imageAlt: "Glass installation project"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/windows-apartment-building-city_23-2148798614.jpg", imageAlt: "Modern home exterior"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-handyman-applying-some-sealant-door-with-sealing-gun_662251-2740.jpg", imageAlt: "Custom aluminium frame"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248396.jpg", imageAlt: "Roofing services work"},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/casual-male-posing-with-electric-scooter_23-2148779878.jpg", imageAlt: "Modern aluminium door"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-blue-lake-captured-from-inside-villa_181624-10734.jpg", imageAlt: "Tiling finish details"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-standing-near-corporate-building_23-2147941460.jpg", imageAlt: "Ceiling renovation work"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1916.jpg", imageAlt: "Sturdy aluminium framing"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-family-with-kids-looking-balcony-smiling_74855-9990.jpg", imageAlt: "Precision glass project"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Get a Free Quote", href: "#contact"},
|
|
{
|
|
text: "View Our Work", href: "#portfolio"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/service-maintenance-worker-repairing_23-2149176712.jpg", alt: "Client A"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-men-working-together_23-2148752025.jpg", alt: "Client B"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/focused-inspection-expert-with-safety-helmet-checking-quality-windows-walls-construction-site_662251-400.jpg", alt: "Client C"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283266.jpg", alt: "Client D"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/hipster-african-american-girl-wearing-jeans-shirt-with-leopard-sleeves-posing-street-against-modern-office-building-with-blue-windows_627829-7123.jpg", alt: "Client E"},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Quality Assured"},
|
|
{
|
|
type: "text", text: "Tembisa Trusted"},
|
|
{
|
|
type: "text", text: "Custom Designs"},
|
|
{
|
|
type: "text", text: "Weather Resistant"},
|
|
{
|
|
type: "text", text: "Expert Teams"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="trust-strip" data-section="trust-strip">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "Professional", title: "Installation Quality", items: [
|
|
"Expert teams", "ISO standards", "Certified"],
|
|
},
|
|
{
|
|
id: "m2", value: "Durable", title: "Weather Proofing", items: [
|
|
"Storm resistant", "High quality", "Guaranteed"],
|
|
},
|
|
{
|
|
id: "m3", value: "Custom", title: "Bespoke Design", items: [
|
|
"Client vision", "Custom fit", "Precision"],
|
|
},
|
|
{
|
|
id: "m4", value: "Local", title: "Tembisa Experts", items: [
|
|
"Joburg based", "Reliable", "On-time"],
|
|
},
|
|
]}
|
|
title="Why Mapulana Leads"
|
|
description="Excellence in every installation."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Built on Craftsmanship. Trusted in Tembisa."
|
|
description="Mapulana Glass & Aluminium is a locally trusted company delivering high-quality aluminium and glass solutions. From modern homes to renovations, we bring precision, durability, and clean finishes to every project."
|
|
metrics={[
|
|
{
|
|
value: "10+", title: "Years Experience"},
|
|
{
|
|
value: "500+", title: "Projects Completed"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/woman-with-back-camera-opening-door-man_259150-58306.jpg"
|
|
imageAlt="Craftsman at work"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="two-items-per-row"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Aluminium Windows & Doors", description: "Custom-built frames designed for durability and modern aesthetics.", imageSrc: "http://img.b2bpic.net/free-photo/girl-with-sunglasses-talking-her-phone_1157-1810.jpg", imageAlt: "Aluminium windows"},
|
|
{
|
|
title: "Glass Installation", description: "Clean, strong, and professionally installed glass solutions.", imageSrc: "http://img.b2bpic.net/free-photo/man-servant-washing-windows_23-2149530810.jpg", imageAlt: "Glass installation"},
|
|
{
|
|
title: "Roofing Services", description: "Installation and repairs including storm and wind damage.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof_23-2149343671.jpg", imageAlt: "Roofing services"},
|
|
{
|
|
title: "Building, Tiling & Ceilings", description: "Complete finishing solutions for homes and renovations.", imageSrc: "http://img.b2bpic.net/free-photo/handyman-uses-jackhammer-installation_169016-5286.jpg", imageAlt: "Tiling & Ceilings"},
|
|
]}
|
|
title="Premium Construction Services"
|
|
description="Comprehensive finishing and installation solutions for modern homes."
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="one-large-left-three-stacked-right"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Modern Glass Door", price: "See Installation Details", variant: "Premium Aluminium", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beaujtiful-woman-luxury-travcel-house_23-2149140860.jpg"},
|
|
{
|
|
id: "p2", name: "Kitchen Renovation", price: "See Installation Details", variant: "Tiling Service", imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-assembly-suspended-ceiling-with-drywall-fixing-drywall-ceiling-metal-frame-with-screwdriver_166373-1913.jpg"},
|
|
{
|
|
id: "p3", name: "Storm-proof Roof", price: "See Installation Details", variant: "Installation", imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg"},
|
|
{
|
|
id: "p4", name: "Office Aluminium Window", price: "See Installation Details", variant: "Bespoke", imageSrc: "http://img.b2bpic.net/free-photo/bike-shop-with-shop-assistant_23-2148138793.jpg"},
|
|
{
|
|
id: "p5", name: "Ceiling Finish", price: "See Installation Details", variant: "Modern", imageSrc: "http://img.b2bpic.net/free-photo/suspended-ceiling-with-halogen-spots-lamps-drywall-construction-room_632498-1082.jpg"},
|
|
{
|
|
id: "p6", name: "Custom Glass Facade", price: "See Installation Details", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-luxury-vacation_23-2149204472.jpg"},
|
|
]}
|
|
title="Project Gallery"
|
|
description="A showcase of our recent high-end installations."
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-choose-us" data-section="why-choose-us">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"High-quality Materials", "Skilled Craftsmanship", "Affordable Pricing", "Fast Turnaround", "Local & Reliable", "Same-day Response", "Free Johannesburg Quotes"]}
|
|
title="Why We Are The Best"
|
|
description="Industry-leading standards and service."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Sarah Dlamini", role: "Homeowner", company: "Tembisa Resident", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-standing-balcony-holding-white-coffee-cup_23-2148161153.jpg"},
|
|
{
|
|
id: "t2", name: "Michael Khoza", role: "Business Owner", company: "Local Client", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/older-woman-with-thumb-up_1149-1162.jpg"},
|
|
{
|
|
id: "t3", name: "Thandi Nkosi", role: "Client", company: "Renovation Project", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-man-woman-home_23-2148899724.jpg"},
|
|
{
|
|
id: "t4", name: "David Mokoena", role: "Homeowner", company: "Tembisa Resident", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-cute-family-repairs-room_1157-24899.jpg"},
|
|
{
|
|
id: "t5", name: "Linda Sithole", role: "Client", company: "Home Repair", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cute-couple-holding-lamp_23-2147782380.jpg"},
|
|
]}
|
|
title="Client Feedback"
|
|
description="What our satisfied clients in Tembisa say."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "rotated-rays-animated"}}
|
|
tag="Get A Quote"
|
|
title="Ready to Upgrade Your Home?"
|
|
description="Visit our workshop at 216 Brian Mazibuko Dr, Tembisa. We are open for consultations Monday through Friday from 7:30 AM to 5:00 PM and Saturdays from 8:00 AM to 1:00 PM. Call us today at 082 628 4120 to schedule your site visit."
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your WhatsApp number"
|
|
buttonText="Request Quote"
|
|
imageSrc="http://img.b2bpic.net/free-photo/electrician-builder-work-installation-lamps-height-professional-overalls-with-drill-repair-site_169016-8625.jpg"
|
|
imageAlt="Professional electrical and structural installer at work"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Mapulana Glass"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Windows & Doors", href: "#services"},
|
|
{
|
|
label: "Glass Installation", href: "#services"},
|
|
{
|
|
label: "Roofing", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Portfolio", href: "#portfolio"},
|
|
{
|
|
label: "Testimonials", href: "#testimonials"},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{
|
|
label: "082 628 4120", href: "tel:0826284120"},
|
|
{
|
|
label: "Tembisa, Johannesburg", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |