Update src/app/page.tsx

This commit is contained in:
2026-04-29 10:02:45 +00:00
parent 87189e28f4
commit dffbc1bc2a

View File

@@ -30,410 +30,174 @@ export default function LandingPage() {
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Services",
id: "#services",
},
{
name: "Equipment",
id: "#equipment",
},
{
name: "About",
id: "#about",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="NUMZAAN"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Services", id: "#services" },
{ name: "Equipment", id: "#equipment" },
{ name: "About", id: "#about" },
{ name: "Contact", id: "#contact" },
]}
brandName="NUMZAAN"
button={{ text: "Get Quote", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "radial-gradient",
}}
title="Plant Hire. Materials Handling. Crushing & Screening."
description="Proudly South African · Established 2017 · 4+ Major Clients · 100% SA Owned"
buttons={[
{
text: "Explore Services",
href: "#services",
},
]}
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/cinematic-full-screen-mining-operations--1777456662650-5de20879.png?_wi=1"
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456794945-4826e1f6.png",
alt: "Partner 1",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456804928-3ea28039.png",
alt: "Partner 2",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456813402-cb7b494d.png",
alt: "Partner 3",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456820893-2617b9df.png",
alt: "Partner 4",
},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456828412-88c8c434.png",
alt: "Partner 5",
},
]}
avatarText="Trusted by industry leaders"
marqueeItems={[
{
type: "text",
text: "Crushing & Screening",
},
{
type: "text",
text: "Materials Handling",
},
{
type: "text",
text: "Plant Hire",
},
{
type: "text",
text: "Open Cast Mining",
},
{
type: "text",
text: "Industrial Logistics",
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/cinematic-full-screen-mining-operations--1777456662650-5de20879.png?_wi=2"
imageAlt="Cinematic, full-screen mining operations video backdrop showing excavators, heavy dump trucks, crush"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{ variant: "radial-gradient" }}
title="Plant Hire. Materials Handling. Crushing & Screening."
description="Proudly South African · Established 2017 · 4+ Major Clients · 100% SA Owned"
buttons={[{ text: "Explore Services", href: "#services" }]}
videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/cinematic-full-screen-mining-operations--1777456662650-5de20879.png"
avatars={[
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456794945-4826e1f6.png", alt: "Partner 1" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456804928-3ea28039.png", alt: "Partner 2" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456813402-cb7b494d.png", alt: "Partner 3" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456820893-2617b9df.png", alt: "Partner 4" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456828412-88c8c434.png", alt: "Partner 5" },
]}
avatarText="Trusted by industry leaders"
marqueeItems={[
{ type: "text", text: "Crushing & Screening" },
{ type: "text", text: "Materials Handling" },
{ type: "text", text: "Plant Hire" },
{ type: "text", text: "Open Cast Mining" },
{ type: "text", text: "Industrial Logistics" },
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/cinematic-full-screen-mining-operations--1777456662650-5de20879.png"
imageAlt="Cinematic, full-screen mining operations video backdrop showing excavators, heavy dump trucks, crush"
/>
</div>
<div id="brand-statement" data-section="brand-statement">
<MediaAbout
useInvertedBackground={false}
title="WE MOVE MOUNTAINS. LITERALLY."
description="Excellence in every operation, built on trust and industrial power."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/high-quality-industrial-bento-grid-image-1777456712964-dc0ad465.png?_wi=1"
/>
</div>
<div id="brand-statement" data-section="brand-statement">
<MediaAbout
useInvertedBackground={false}
title="WE MOVE MOUNTAINS. LITERALLY."
description="Excellence in every operation, built on trust and industrial power."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/high-quality-industrial-bento-grid-image-1777456712964-dc0ad465.png"
/>
</div>
<div id="services" data-section="services">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
icon: Settings,
title: "Crushing & Screening",
description: "Mobile crushing and screening plants for coal, chrome, platinum, iron ore and more.",
},
{
icon: Truck,
title: "Materials Handling",
description: "Load and haul operations, stockpile management, re-mining and loading.",
},
{
icon: Wrench,
title: "Plant Hire",
description: "High-capacity excavators, loaders, crushers and screens available.",
},
]}
title="Our Expertise"
description="Industrial-scale mining and construction capabilities"
/>
</div>
<div id="services" data-section="services">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ icon: Settings, title: "Crushing & Screening", description: "Mobile crushing and screening plants for coal, chrome, platinum, iron ore and more." },
{ icon: Truck, title: "Materials Handling", description: "Load and haul operations, stockpile management, re-mining and loading." },
{ icon: Wrench, title: "Plant Hire", description: "High-capacity excavators, loaders, crushers and screens available." },
]}
title="Our Expertise"
description="Industrial-scale mining and construction capabilities"
/>
</div>
<div id="equipment" data-section="equipment">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{
id: "e1",
name: "50 Ton Excavator",
price: "Available",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/plant-hire-equipment-focus-on-giant-50-t-1777456693619-cfa57954.png",
},
{
id: "e2",
name: "Mobile Jaw Crusher",
price: "Available",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/extreme-close-up-and-wide-angle-of-high--1777456673482-f72ea1aa.png",
},
{
id: "e3",
name: "6m³ Front End Loader",
price: "Available",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/plant-hire-equipment-focus-on-giant-50-t-1777456865261-0ab38d72.png",
},
{
id: "e4",
name: "Mobile Scalping Screen",
price: "Available",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/extreme-close-up-and-wide-angle-of-high--1777456874128-d2e48666.png",
},
{
id: "e5",
name: "40 Ton Excavator",
price: "Available",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/plant-hire-equipment-focus-on-giant-50-t-1777456886324-6dd2671a.png",
},
{
id: "e6",
name: "Impact Crusher",
price: "Available",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/extreme-close-up-and-wide-angle-of-high--1777456896367-898c219a.png",
},
]}
title="Equipment Showcase"
description="Precision mining technology"
/>
</div>
<div id="equipment" data-section="equipment">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{ id: "e1", name: "50 Ton Excavator", price: "Available", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/plant-hire-equipment-focus-on-giant-50-t-1777456693619-cfa57954.png" },
{ id: "e2", name: "Mobile Jaw Crusher", price: "Available", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/extreme-close-up-and-wide-angle-of-high--1777456673482-f72ea1aa.png" },
{ id: "e3", name: "6m³ Front End Loader", price: "Available", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/plant-hire-equipment-focus-on-giant-50-t-1777456865261-0ab38d72.png" },
{ id: "e4", name: "Mobile Scalping Screen", price: "Available", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/extreme-close-up-and-wide-angle-of-high--1777456874128-d2e48666.png" },
{ id: "e5", name: "40 Ton Excavator", price: "Available", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/plant-hire-equipment-focus-on-giant-50-t-1777456886324-6dd2671a.png" },
{ id: "e6", name: "Impact Crusher", price: "Available", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/extreme-close-up-and-wide-angle-of-high--1777456896367-898c219a.png" },
]}
title="Equipment Showcase"
description="Precision mining technology"
/>
</div>
<div id="operations" data-section="operations">
<BlogCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Operations Gallery"
description="Visualizing industrial impact"
blogs={[
{
id: "o1",
category: "Mining",
title: "Open Cast Mining",
excerpt: "Limpopo operations overview",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/high-quality-industrial-bento-grid-image-1777456712964-dc0ad465.png?_wi=2",
authorName: "Numzaan",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456794945-4826e1f6.png",
date: "2025",
},
{
id: "o2",
category: "Mining",
title: "Crushing Plant",
excerpt: "Operations detail",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/detail-of-mining-crushing-plant-machiner-1777456724984-12bf2546.png",
authorName: "Numzaan",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456804928-3ea28039.png",
date: "2025",
},
{
id: "o3",
category: "Mining",
title: "Haulage",
excerpt: "Coal Operations",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/mining-dump-truck-hauling-material-in-an-1777456734386-068f145d.png",
authorName: "Numzaan",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456813402-cb7b494d.png",
date: "2025",
},
{
id: "o4",
category: "Mining",
title: "Site Landscape",
excerpt: "Drone view",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/wide-drone-view-of-a-mining-site-landsca-1777456742471-7fc3db58.png",
authorName: "Numzaan",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456820893-2617b9df.png",
date: "2025",
},
{
id: "o5",
category: "Mining",
title: "Conveyor",
excerpt: "Technical detail",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/mining-conveyor-belt-system-detail-1777456752464-2dbd08e2.png",
authorName: "Numzaan",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456828412-88c8c434.png",
date: "2025",
},
{
id: "o6",
category: "Mining",
title: "Machinery",
excerpt: "Close up",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/close-up-of-heavy-machine-tracks-in-mine-1777456763074-30788a6b.png",
authorName: "Numzaan",
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456836336-7b3ce8dc.png",
date: "2025",
},
]}
/>
</div>
<div id="operations" data-section="operations">
<BlogCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Operations Gallery"
description="Visualizing industrial impact"
blogs={[
{ id: "o1", category: "Mining", title: "Open Cast Mining", excerpt: "Limpopo operations overview", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/high-quality-industrial-bento-grid-image-1777456712964-dc0ad465.png", authorName: "Numzaan", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456794945-4826e1f6.png", date: "2025" },
{ id: "o2", category: "Mining", title: "Crushing Plant", excerpt: "Operations detail", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/detail-of-mining-crushing-plant-machiner-1777456724984-12bf2546.png", authorName: "Numzaan", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456804928-3ea28039.png", date: "2025" },
{ id: "o3", category: "Mining", title: "Haulage", excerpt: "Coal Operations", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/mining-dump-truck-hauling-material-in-an-1777456734386-068f145d.png", authorName: "Numzaan", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456813402-cb7b494d.png", date: "2025" },
{ id: "o4", category: "Mining", title: "Site Landscape", excerpt: "Drone view", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/wide-drone-view-of-a-mining-site-landsca-1777456742471-7fc3db58.png", authorName: "Numzaan", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456820893-2617b9df.png", date: "2025" },
{ id: "o5", category: "Mining", title: "Conveyor", excerpt: "Technical detail", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/mining-conveyor-belt-system-detail-1777456752464-2dbd08e2.png", authorName: "Numzaan", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456828412-88c8c434.png", date: "2025" },
{ id: "o6", category: "Mining", title: "Machinery", excerpt: "Close up", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/close-up-of-heavy-machine-tracks-in-mine-1777456763074-30788a6b.png", authorName: "Numzaan", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/white-minimal-logotype-for-mining-compan-1777456836336-7b3ce8dc.png", date: "2025" },
]}
/>
</div>
<div id="about" data-section="about">
<TeamCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
team={[
{
id: "a1",
name: "Integrity",
role: "Core Value",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/group-of-mining-equipment-together-on-si-1777456773417-9c5d8ee4.png",
},
{
id: "a2",
name: "Respect",
role: "Core Value",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/mining-shift-at-sunset-cinematic-lightin-1777456784449-20880ee0.png?_wi=1",
},
{
id: "a3",
name: "Empowerment",
role: "Core Value",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/high-quality-industrial-bento-grid-image-1777456910828-dbb026a4.png",
},
{
id: "a4",
name: "Excellence",
role: "Mission",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/detail-of-mining-crushing-plant-machiner-1777456922410-737cd4a3.png",
},
]}
title="Our Story"
description="How Numzaan Projects evolved into a Tier-1 contractor."
/>
</div>
<div id="about" data-section="about">
<TeamCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
team={[
{ id: "a1", name: "Integrity", role: "Core Value", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/group-of-mining-equipment-together-on-si-1777456773417-9c5d8ee4.png" },
{ id: "a2", name: "Respect", role: "Core Value", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/mining-shift-at-sunset-cinematic-lightin-1777456784449-20880ee0.png" },
{ id: "a3", name: "Empowerment", role: "Core Value", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/high-quality-industrial-bento-grid-image-1777456910828-dbb026a4.png" },
{ id: "a4", name: "Excellence", role: "Mission", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/detail-of-mining-crushing-plant-machiner-1777456922410-737cd4a3.png" },
]}
title="Our Story"
description="How Numzaan Projects evolved into a Tier-1 contractor."
/>
</div>
<div id="clients" data-section="clients">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"ASB",
"Samancor",
"PGC",
"Jodan",
"Ilima Coal",
"Oketsa Group",
"Sefateng Chrome",
"Emivista",
]}
title="Trusted Partners"
description="Delivering high-value results for major industry players."
/>
</div>
<div id="clients" data-section="clients">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={["ASB", "Samancor", "PGC", "Jodan", "Ilima Coal", "Oketsa Group", "Sefateng Chrome", "Emivista"]}
title="Trusted Partners"
description="Delivering high-value results for major industry players."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "2017",
title: "Established",
items: [
"Foundation in SA",
],
},
{
id: "m2",
value: "3",
title: "Core Services",
items: [
"Specialised operations",
],
},
{
id: "m3",
value: "8",
title: "Major Clients",
items: [
"Industry leaders",
],
},
{
id: "m4",
value: "100%",
title: "SA Owned",
items: [
"Proudly South African",
],
},
]}
title="By The Numbers"
description="Proven results, reliable performance."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "2017", title: "Established", items: ["Foundation in SA"] },
{ id: "m2", value: "3", title: "Core Services", items: ["Specialised operations"] },
{ id: "m3", value: "8", title: "Major Clients", items: ["Industry leaders"] },
{ id: "m4", value: "100%", title: "SA Owned", items: ["Proudly South African"] },
]}
title="By The Numbers"
description="Proven results, reliable performance."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Lets Build Something."
description="info@numzaanpro.co.za | +27 87 265 5177"
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
},
{
name: "email",
type: "email",
placeholder: "Your Email",
},
]}
textarea={{
name: "msg",
placeholder: "Tell us about your project",
}}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/mining-shift-at-sunset-cinematic-lightin-1777456784449-20880ee0.png?_wi=2"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Lets Build Something."
description="info@numzaanpro.co.za | +27 87 265 5177"
inputs={[
{ name: "name", type: "text", placeholder: "Your Name" },
{ name: "email", type: "email", placeholder: "Your Email" },
]}
textarea={{ name: "msg", placeholder: "Tell us about your project" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CzJFKgnJ7vK4pvwNDIZ7mVMaCe/mining-shift-at-sunset-cinematic-lightin-1777456784449-20880ee0.png"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="NUMZAAN"
columns={[
{
title: "Links",
items: [
{
label: "Services",
href: "#services",
},
{
label: "About",
href: "#about",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
]}
copyrightText="© 2025 Numzaan Projects (Pty) Ltd. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="NUMZAAN"
columns={[
{ title: "Links", items: [{ label: "Services", href: "#services" }, { label: "About", href: "#about" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
]}
copyrightText="© 2025 Numzaan Projects (Pty) Ltd. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}