336 lines
12 KiB
TypeScript
336 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Products",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Features",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="HydraForce"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="HydraForce Engineering"
|
|
description="Engineered for maximum reliability. Our industrial-grade hydraulic cylinders deliver precision performance in the most demanding conditions."
|
|
buttons={[
|
|
{
|
|
text: "View Our Products",
|
|
href: "#products",
|
|
},
|
|
{
|
|
text: "Talk to Engineering",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/worker-is-controlling-process-rail-cutting-busy-metal-factory_613910-17188.jpg?_wi=1",
|
|
imageAlt: "Industrial hydraulic cylinder detail",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-hydraulic-elements_23-2149333331.jpg?_wi=1",
|
|
imageAlt: "Precision piston technology",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/interior-view-steel-factory_1359-124.jpg?_wi=1",
|
|
imageAlt: "Hydraulic ram installation",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-431.jpg",
|
|
imageAlt: "Technical engineering blueprint",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/look-camera-factory-worker-is-checking-highpressure-tank_645730-701.jpg",
|
|
imageAlt: "Industrial hose assembly",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pharmaceutical-factory-man-worker-protective-clothing-operating-production-line-sterile-environment_645730-268.jpg",
|
|
imageAlt: "Automated factory manufacturing",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Precision Manufacturing",
|
|
description: "Every component is CNC-machined to microscopic tolerances for perfect operation.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg",
|
|
imageAlt: "Dashboard diagnostic",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-working-man-climbing-ladder_23-2148921423.jpg",
|
|
imageAlt: "Automated testing",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/worker-is-controlling-process-rail-cutting-busy-metal-factory_613910-17188.jpg?_wi=2",
|
|
imageAlt: "hydraulic performance software dashboard",
|
|
},
|
|
{
|
|
title: "Reliable Endurance",
|
|
description: "Our cylinders undergo rigorous stress-testing to survive the most punishing industrial environments.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/doctor-provides-cancer-screening-guidance-patient-office_482257-126373.jpg",
|
|
imageAlt: "Stress test analysis",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-protective-gear_23-2151962520.jpg",
|
|
imageAlt: "Pressure test equipment",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-hydraulic-elements_23-2149333331.jpg?_wi=2",
|
|
imageAlt: "hydraulic performance software dashboard",
|
|
},
|
|
{
|
|
title: "Expert Engineering Support",
|
|
description: "Customized hydraulic solutions designed by expert engineers for your unique specifications.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-expert-uses-tablet-with-chroma-key-display-leveraging-dashboards_482257-126212.jpg",
|
|
imageAlt: "Engineering dashboard",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/plant-picture-clean-room-equipment-stainless-steel-machines_645730-298.jpg",
|
|
imageAlt: "Support monitoring rig",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/interior-view-steel-factory_1359-124.jpg?_wi=2",
|
|
imageAlt: "hydraulic performance software dashboard",
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
title="Why Choose HydraForce"
|
|
description="Built on a legacy of precision and power, we define the standard for industrial hydraulics."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "prod1",
|
|
name: "Standard Welded Cylinder",
|
|
price: "Starting at $1,200",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/dumbbell_1203-6627.jpg",
|
|
imageAlt: "Welded rod cylinder",
|
|
},
|
|
{
|
|
id: "prod2",
|
|
name: "Heavy-Duty Tie-Rod",
|
|
price: "Starting at $1,800",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-clamp-isolated-against-isolated-white-background_482257-25605.jpg",
|
|
imageAlt: "Tie-rod cylinder",
|
|
},
|
|
{
|
|
id: "prod3",
|
|
name: "Industrial Lifting Series",
|
|
price: "Starting at $2,500",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/excavator-digging-ground-day-light_23-2149194798.jpg",
|
|
imageAlt: "Lifting cylinder",
|
|
},
|
|
{
|
|
id: "prod4",
|
|
name: "Compact Series",
|
|
price: "Starting at $900",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-hydraulic-elements_23-2149333326.jpg",
|
|
imageAlt: "Compact piston",
|
|
},
|
|
{
|
|
id: "prod5",
|
|
name: "Telescopic Heavy Load",
|
|
price: "Starting at $3,200",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-hydraulic-elements_23-2149333333.jpg",
|
|
imageAlt: "Telescopic ram",
|
|
},
|
|
{
|
|
id: "prod6",
|
|
name: "Refurbishment Kit",
|
|
price: "Starting at $450",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/gears-cogwheels_1112-921.jpg",
|
|
imageAlt: "Refurbishment kit",
|
|
},
|
|
]}
|
|
title="Our Hydraulic Cylinder Series"
|
|
description="Comprehensive range of high-performance cylinders tailored for heavy lifting and motion control."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah Jenkins",
|
|
handle: "Lead Engineer",
|
|
testimonial: "HydraForce consistently delivers the most reliable hardware in the market. Absolute precision.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-worker-with-arms-crossed-standing-factory_107420-96042.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Mark Roberts",
|
|
handle: "Plant Manager",
|
|
testimonial: "The build quality of these cylinders has drastically reduced our machine downtime.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-logistic_23-2148886820.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Elena Torres",
|
|
handle: "Consultant",
|
|
testimonial: "Customization requests were handled professionally and the performance is unparalleled.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-checking-tool-tool-box_1170-1277.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "James Chen",
|
|
handle: "Operations Dir.",
|
|
testimonial: "Exceptional customer support combined with world-class engineering capability.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/engineering-professionals-executive-directors-review-operational-workflows-solar_482257-136309.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Linda Wu",
|
|
handle: "Firm Owner",
|
|
testimonial: "Best value for high-capacity heavy lifting. We rely exclusively on HydraForce products.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-male-worker-standing-warehouse_107420-96550.jpg",
|
|
},
|
|
]}
|
|
showRating={true}
|
|
title="Trusted by Industrial Leaders"
|
|
description="Read what our partners across the manufacturing and heavy machinery sectors say."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
text="Get a quote for your project or reach out for custom engineering support. We are ready to help."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us Now",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/mature-experienced-worker-is-cutting-metal-using-special-machine-tool_613910-5245.jpg"
|
|
logoText="HydraForce"
|
|
columns={[
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{
|
|
label: "Engineering",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Custom Design",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Maintenance",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Use",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|