Update src/app/page.tsx

This commit is contained in:
2026-05-11 12:37:28 +00:00
parent 14b63370a4
commit 510792542f

View File

@@ -2,15 +2,16 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter'; import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen'; import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal'; import FooterBase from '@/components/sections/footer/FooterBase';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard'; import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout'; import AboutMetric from '@/components/sections/about/AboutMetric';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen'; import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered'; import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne'; import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne'; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Users, Truck, Wrench, ShieldCheck, TrendingUp, Mail } from 'lucide-react';
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -30,18 +31,9 @@ export default function LandingPage() {
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleCentered <NavbarStyleCentered
navItems={[ navItems={[
{ { name: "Products", id: "products" },
name: "Products", { name: "About", id: "about" },
id: "products", { name: "Contact", id: "contact" },
},
{
name: "About",
id: "about",
},
{
name: "Contact",
id: "contact",
},
]} ]}
brandName="ELKO IMPLEMENTE" brandName="ELKO IMPLEMENTE"
/> />
@@ -49,21 +41,10 @@ export default function LandingPage() {
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroLogoBillboard <HeroLogoBillboard
background={{ background={{ variant: "gradient-bars" }}
variant: "gradient-bars",
}}
logoText="ELKO IMPLEMENTE" logoText="ELKO IMPLEMENTE"
description="Built for the Land. Made to Last. Premium agricultural implements, trailers & auger wagons — engineered in South Africa." description="Built for the Land. Made to Last. Premium agricultural implements, trailers & auger wagons — engineered in South Africa."
buttons={[ buttons={[{ text: "View Our Range", href: "#products" }, { text: "Request a Quote", href: "#contact" }]}
{
text: "View Our Range",
href: "#products",
},
{
text: "Request a Quote",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/ripe-wheat-cutting-with-heavy-machinery-outdoors-generated-by-ai_188544-21588.jpg?_wi=1" imageSrc="http://img.b2bpic.net/free-photo/ripe-wheat-cutting-with-heavy-machinery-outdoors-generated-by-ai_188544-21588.jpg?_wi=1"
imageAlt="Agricultural fields at golden hour" imageAlt="Agricultural fields at golden hour"
mediaAnimation="slide-up" mediaAnimation="slide-up"
@@ -71,59 +52,28 @@ export default function LandingPage() {
</div> </div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardFourteen <MetricCardEleven
animationType="slide-up"
title="Engineered for Results"
description="Performance data that matters to modern farmers."
useInvertedBackground={false} useInvertedBackground={false}
title="Built for Reliability"
tag="Trusted Quality"
metrics={[ metrics={[
{ { id: "1", value: "100%", title: "Local Manufacturing", description: "Proudly South African", imageSrc: "http://img.b2bpic.net/free-photo/ripe-wheat-cutting-with-heavy-machinery-outdoors-generated-by-ai_188544-21588.jpg?_wi=1" },
id: "1", { id: "2", value: "25+", title: "Industry Years", description: "Proven expertise", imageSrc: "http://img.b2bpic.net/free-photo/ripe-wheat-cutting-with-heavy-machinery-outdoors-generated-by-ai_188544-21588.jpg?_wi=2" }
value: "100%",
description: "South African Made",
},
{
id: "2",
value: "25+",
description: "Years Experience",
},
{
id: "3",
value: "Nationwide",
description: "Delivery",
},
]} ]}
metricsAnimation="slide-up"
/> />
</div> </div>
<div id="products" data-section="products"> <div id="products" data-section="products">
<ProductCardOne <ProductCardFour
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
useInvertedBackground={false} useInvertedBackground={false}
products={[ products={[
{ { id: "1", name: "Agricultural Implements", price: "View Details", variant: "Pro Series", imageSrc: "http://img.b2bpic.net/free-photo/young-gardener-man-wearing-gardening-hat-holds-looks-hoe-rake_141793-71337.jpg?_wi=1" },
id: "1", { id: "2", name: "Trailers", price: "View Details", variant: "Custom Build", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-hgv-truck-shipping-white-boxes_1048-5705.jpg" },
name: "Agricultural Implements", { id: "3", name: "Auger Wagons", price: "View Details", variant: "Elite Range", imageSrc: "http://img.b2bpic.net/free-photo/agronomist-choosing-new-planter-man-outdoor-ground-shop-agricultural-machinery_1157-43608.jpg" },
price: "View Details",
imageSrc: "http://img.b2bpic.net/free-photo/young-gardener-man-wearing-gardening-hat-holds-looks-hoe-rake_141793-71337.jpg?_wi=1",
imageAlt: "Ploughs and cultivators",
},
{
id: "2",
name: "Trailers",
price: "View Details",
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-hgv-truck-shipping-white-boxes_1048-5705.jpg",
imageAlt: "Tipper and livestock trailers",
},
{
id: "3",
name: "Auger Wagons",
price: "View Details",
imageSrc: "http://img.b2bpic.net/free-photo/agronomist-choosing-new-planter-man-outdoor-ground-shop-agricultural-machinery_1157-43608.jpg",
imageAlt: "Grain transfer wagons",
},
]} ]}
title="Our Product Range" title="Our Product Range"
description="Engineered for durability and high performance in agricultural settings." description="Engineered for durability and high performance in agricultural settings."
@@ -131,158 +81,80 @@ export default function LandingPage() {
</div> </div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardNineteen <FeatureBorderGlow
animationType="slide-up"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
features={[
{
tag: "Construction",
title: "Heavy-Duty",
subtitle: "Built Tough",
description: "Industrial-grade steel and components built to handle the toughest conditions.",
imageSrc: "http://img.b2bpic.net/free-photo/agriculture-machinery-cutting-ripe-wheat-sunset-generative-ai_188544-12564.jpg",
imageAlt: "Agriculture machinery cutting the ripe wheat at sunset generative AI",
},
{
tag: "Customization",
title: "Precision",
subtitle: "Tailored Solutions",
description: "We design solutions tailored to your operation — not one-size-fits-all.",
imageSrc: "http://img.b2bpic.net/free-photo/ripe-wheat-cutting-with-heavy-machinery-outdoors-generated-by-ai_188544-21588.jpg?_wi=2",
imageAlt: "Agriculture machinery cutting the ripe wheat at sunset generative AI",
},
{
tag: "Support",
title: "Partnership",
subtitle: "Direct Access",
description: "Speak directly with our team. Real people, real answers, real fast.",
imageSrc: "http://img.b2bpic.net/free-photo/young-gardener-man-wearing-gardening-hat-holds-looks-hoe-rake_141793-71337.jpg?_wi=2",
imageAlt: "Agriculture machinery cutting the ripe wheat at sunset generative AI",
},
]}
title="Why Farmers Trust Elko" title="Why Farmers Trust Elko"
description="We build equipment that stands the test of time, season after season." description="We build equipment that stands the test of time, season after season."
features={[
{ icon: ShieldCheck, title: "Heavy-Duty", description: "Industrial-grade steel and components built to handle the toughest conditions." },
{ icon: Wrench, title: "Precision", description: "We design solutions tailored to your operation — not one-size-fits-all." },
{ icon: Users, title: "Partnership", description: "Speak directly with our team. Real people, real answers, real fast." },
]}
/> />
</div> </div>
<div id="featured-product" data-section="featured-product"> <div id="featured-product" data-section="featured-product">
<ProductCardOne <ProductCardFour
animationType="slide-up" animationType="slide-up"
textboxLayout="split-description" textboxLayout="split-description"
gridVariant="one-large-left-three-stacked-right" gridVariant="one-large-left-three-stacked-right"
useInvertedBackground={false} useInvertedBackground={false}
products={[ products={[{ id: "f1", name: "Elko 1200 Auger Wagon", price: "From R350,000", variant: "Flagship", imageSrc: "http://img.b2bpic.net/free-photo/happy-wedding-coule-lies-basket-air-balloon_1304-4870.jpg" }]}
{
id: "f1",
name: "Elko 1200 Auger Wagon",
price: "From R350,000",
imageSrc: "http://img.b2bpic.net/free-photo/happy-wedding-coule-lies-basket-air-balloon_1304-4870.jpg",
},
]}
title="Flagship Auger Wagon" title="Flagship Auger Wagon"
description="The Elko 1200: 12-ton capacity, 6m unloading reach, and hydraulic drive." description="The Elko 1200: 12-ton capacity, 6m unloading reach, and hydraulic drive."
/> />
</div> </div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardOne <TestimonialCardFifteen
animationType="slide-up" testimonial="Elko equipment has completely transformed our harvest efficiency. Unmatched durability in the Free State heat."
textboxLayout="default" rating={5}
gridVariant="three-columns-all-equal-width" author="Johan V. (Farmer)"
avatars={[{ src: "http://img.b2bpic.net/free-photo/portrait-african-senior-man_23-2148833072.jpg", alt: "Johan V" }]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Johan V.",
role: "Farmer",
company: "Free State",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-african-senior-man_23-2148833072.jpg",
},
{
id: "2",
name: "Pieter M.",
role: "Farmer",
company: "Limpopo",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-artist-painting-with-oil-paints-field_1303-9545.jpg",
},
{
id: "3",
name: "Annemarie D.",
role: "Farmer",
company: "North West",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-african-senior-man_23-2148833073.jpg",
},
{
id: "4",
name: "Francois S.",
role: "Manager",
company: "Eastern Cape",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-greenhouse-owner-posing-with-notepad-her-hands-having-many-flowers-glass-roof_158595-7026.jpg",
},
{
id: "5",
name: "Danie B.",
role: "Farmer",
company: "Mpumalanga",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-greenhouse_1398-1871.jpg",
},
]}
title="What Our Customers Say"
description="Proven performance on South African farms."
/> />
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<MediaAbout <AboutMetric
useInvertedBackground={false}
title="The Elko Story" title="The Elko Story"
description="Family-owned and rooted in South African agriculture. We take immense pride in local manufacturing, job creation, and engineering equipment that farmers can rely on for generations." metrics={[{ icon: TrendingUp, label: "Growth", value: "25+" }, { icon: Truck, label: "Delivery", value: "All Regions" }]}
imageSrc="http://img.b2bpic.net/free-photo/agronomist-choosing-new-planter-man-outdoor-ground-shop-agricultural-machinery_1157-43612.jpg" metricsAnimation="slide-up"
useInvertedBackground={false}
/> />
</div> </div>
<div id="cta" data-section="cta"> <div id="cta" data-section="cta">
<ContactCenter <ContactSplit
useInvertedBackground={true} title="Ready to Upgrade?"
background={{ description="Get a free, no-obligation quote today."
variant: "plain",
}}
title="Ready to Upgrade Your Operation?"
description="Get a free, no-obligation quote within 24 hours."
buttonText="Request Quote"
tag="Get in touch" tag="Get in touch"
background={{ variant: "gradient-bars" }}
useInvertedBackground={true}
/> />
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactSplit
useInvertedBackground={false}
background={{
variant: "plain",
}}
title="Get in Touch" title="Get in Touch"
description="Visit our workshop or send us an enquiry." description="Visit our workshop or send us an enquiry."
tag="Contact Us" tag="Contact Us"
buttonText="Send Enquiry" background={{ variant: "plain" }}
useInvertedBackground={false}
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoReveal <FooterBase
logoText="ELKO IMPLEMENTE" logoText="ELKO IMPLEMENTE"
leftLink={{ columns={[
text: "Terms & Conditions", { title: "Products", items: [{ label: "Implements", href: "#" }, { label: "Trailers", href: "#" }] },
href: "#", { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Contact", href: "#" }] },
}} ]}
rightLink={{
text: "© 2026 Elko Implemente",
href: "#",
}}
/> />
</div> </div>
</ReactLenis> </ReactLenis>