Update src/app/page.tsx
This commit is contained in:
240
src/app/page.tsx
240
src/app/page.tsx
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user