mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 00:06:30 +01:00
parent f18dd5b0f9
commit 3dd4f7f121
78 changed files with 1181 additions and 925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/home/CTA.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import Link from 'next/link';
import { Section, Container } from '../../components/ui';
export default function CTA() {
return (
<Section className="bg-primary text-white py-24">
<Container>
<div className="flex flex-col md:flex-row items-center justify-between gap-8">
<h2 className="text-3xl md:text-4xl font-bold max-w-2xl">
Enough information, let's build something together!
</h2>
<Link href="/contact" className="group flex items-center gap-4 text-xl font-bold text-[#82ed20]">
Reach out now
<span className="w-10 h-10 border-2 border-[#82ed20] rounded-full flex items-center justify-center group-hover:bg-[#82ed20] group-hover:text-primary transition-all">
&rarr;
</span>
</Link>
</div>
</Container>
</Section>
);
}

39
components/home/GallerySection.tsx Normal file
View File

@@ -0,0 +1,39 @@
import React from 'react';
import Image from 'next/image';
import { Section, Container } from '../../components/ui';
export default function GallerySection() {
const images = [
'/uploads/2024/12/DSC07433-Large-600x400.webp',
'/uploads/2024/12/DSC07460-Large-600x400.webp',
'/uploads/2024/12/DSC07469-Large-600x400.webp',
'/uploads/2024/12/DSC07539-Large-600x400.webp',
'/uploads/2024/12/DSC07655-Large.webp',
'/uploads/2024/12/DSC07768-Large.webp',
];
return (
<Section className="bg-white text-neutral-dark py-24">
<Container>
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold">Strong Connections for a Sustainable World.</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{images.map((src, idx) => (
<div key={idx} className="relative aspect-[4/3] overflow-hidden rounded-lg group">
<Image
src={src}
alt={`Gallery image ${idx + 1}`}
fill
className="object-cover transition-transform duration-500 group-hover:scale-110"
unoptimized
/>
<div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors" />
</div>
))}
</div>
</Container>
</Section>
);
}

46
components/home/Hero.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import Link from 'next/link';
import { Container } from '@/components/ui';
import Scribble from '@/components/Scribble';
export default function Hero() {
return (
<section className="relative h-[80vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
<div className="absolute inset-0 z-0">
<video
className="w-full h-full object-cover"
autoPlay
muted
loop
playsInline
poster="/uploads/2025/02/Still-2025-02-10-104337_1.1.1.webp"
>
<source src="/uploads/2025/02/header.webm" type="video/webm" />
<source src="/uploads/2025/02/header.mp4" type="video/mp4" />
</video>
<div className="absolute inset-0 bg-gradient-to-b from-black/10 to-black/40" />
</div>
<Container className="relative z-10 text-left text-white w-full">
<div className="max-w-4xl">
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 tracking-tight leading-tight">
We are helping to expand the energy cable networks for a
<span className="relative inline-block ml-4 mr-2">
<span className="relative z-10 text-white italic">green</span>
<Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%]" />
</span>
future
</h1>
<div className="mt-8">
<Link href="/contact" className="inline-flex items-center text-white text-xl font-medium group">
Let's talk
<span className="ml-2 w-8 h-8 border-2 border-white rounded-full flex items-center justify-center group-hover:bg-white group-hover:text-black transition-all">
&rarr;
</span>
</Link>
</div>
</div>
</Container>
</section>
);
}

45
components/home/MeetTheTeam.tsx Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Section, Container, Button } from '../../components/ui';
export default function MeetTheTeam() {
return (
<Section className="relative py-24 md:py-32 overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src="/uploads/2024/12/DSC07655-Large.webp"
alt="KLZ Team"
fill
className="object-cover"
unoptimized
/>
<div className="absolute inset-0 bg-gradient-to-r from-neutral-dark/90 to-neutral-dark/40" />
</div>
<Container className="relative z-10">
<div className="max-w-2xl text-white">
<div className="flex items-center gap-4 mb-6">
<div className="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
{/* Placeholder for avatar if needed, or just icon */}
<div className="w-full h-full bg-primary flex items-center justify-center">
<span className="font-bold">KLZ</span>
</div>
</div>
<h2 className="text-3xl font-bold">Meet the team behind KLZ</h2>
</div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 mb-8 border border-white/10">
<p className="text-lg leading-relaxed">
At KLZ, our team is the power behind the cables. From seasoned experts like Michael and Klaus to a dedicated group of planners, logistics specialists, and customer support professionals, every member plays a vital role. Together, we combine decades of experience, innovative thinking, and a shared commitment to delivering reliable energy solutions.
</p>
</div>
<Button href="/team" variant="primary" size="lg">
Checkout our team
</Button>
</div>
</Container>
</Section>
);
}

63
components/home/ProductCategories.tsx Normal file
View File

@@ -0,0 +1,63 @@
import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Section } from '../../components/ui';
export default function ProductCategories() {
return (
<Section className="bg-white py-0">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{[
{
title: 'Low Voltage Cables',
desc: 'Powering everyday essentials with reliability and safety.',
img: '/uploads/2024/12/low-voltage-scaled.webp',
icon: '/uploads/2024/11/Low-Voltage.svg',
href: '/products/low-voltage-cables'
},
{
title: 'Medium Voltage Cables',
desc: 'The perfect balance between power and performance for industrial and urban grids.',
img: '/uploads/2024/12/medium-voltage-scaled.webp',
icon: '/uploads/2024/11/Medium-Voltage.svg',
href: '/products/medium-voltage-cables'
},
{
title: 'High Voltage Cables',
desc: 'Delivering maximum power over long distances—without compromise.',
img: '/uploads/2025/06/na2xsfl2y-rendered.webp',
icon: '/uploads/2024/11/High-Voltage.svg',
href: '/products/high-voltage-cables'
},
{
title: 'Solar Cables',
desc: 'Connecting the sun’s energy to your sustainable future.',
img: '/uploads/2025/04/3.webp',
icon: '/uploads/2024/11/Solar.svg',
href: '/products/solar-cables'
}
].map((category, idx) => (
<Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] overflow-hidden">
<Image
src={category.img}
alt={category.title}
fill
className="object-cover transition-transform duration-700 group-hover:scale-110"
unoptimized
/>
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
<div className="absolute inset-0 p-8 flex flex-col justify-center items-center text-center text-white">
<div className="mb-4 transform transition-transform group-hover:-translate-y-2">
<img src={category.icon} alt="" className="w-16 h-16 mx-auto" />
</div>
<h3 className="text-2xl font-bold mb-2 transform transition-transform group-hover:-translate-y-2">{category.title}</h3>
<p className="text-white/90 opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300">
{category.desc}
</p>
</div>
</Link>
))}
</div>
</Section>
);
}

28
components/home/VideoSection.tsx Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import Scribble from '@/components/Scribble';
export default function VideoSection() {
return (
<section className="relative h-[60vh] overflow-hidden">
<video
className="w-full h-full object-cover"
autoPlay
muted
loop
playsInline
>
<source src="/uploads/2024/12/making-of-metal-cable-on-factory-2023-11-27-04-55-16-utc-2.webm" type="video/mp4" />
</video>
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
<h2 className="text-3xl md:text-5xl font-bold text-white text-center max-w-4xl px-4 leading-tight">
From a single strand to infinite power – the
<span className="relative inline-block mx-2">
<span className="relative z-10 italic">future</span>
<Scribble variant="underline" className="w-full h-full top-full left-0" />
</span>
starts here.
</h2>
</div>
</section>
);
}

51
components/home/WhatWeDo.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import { Section, Container } from '../../components/ui';
export default function WhatWeDo() {
return (
<Section className="bg-white text-neutral-dark">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
<div className="lg:col-span-4">
<div className="sticky top-24">
<h2 className="text-5xl font-bold text-primary mb-6">What we do</h2>
<p className="text-xl text-text-secondary">
We ensure that the electricity flows – with quality-tested cables. From low voltage up to high voltage.
</p>
</div>
</div>
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
{[
{
num: '01',
title: 'Supply to energy suppliers, wind and solar parks, industry and trade',
desc: 'We support your projects from 1 to 220 kV, from simple NYY to high-voltage cables with segment conductors and aluminum sheaths, with a particular focus on medium-voltage cables.'
},
{
num: '02',
title: 'Supply of cables whose quality is certified',
desc: 'Cables are products that have to function 100%. For decades, often 80 to 100 years. Our cables are not only approved by VDE. The most well-known energy suppliers trust us.'
},
{
num: '03',
title: 'We deliver on time because we know the consequences for you',
desc: 'Wind farm North Germany, coordinates XYZ, delivery Wednesday 2-4 p.m., no unloading option. Yes, we know that. We organize the logistics with a back office team that has up to 20 years of cable experience.'
},
{
num: '04',
title: 'The cable alone is not the solution',
desc: 'Stony ground? Perhaps a thicker outer sheath would be better? Damp ground? Can there be transverse watertight protection? We think for you and ask questions.'
}
].map((item, idx) => (
<div key={idx} className="space-y-4">
<span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">{item.num}</span>
<h3 className="text-2xl font-bold">{item.title}</h3>
<p className="text-text-secondary leading-relaxed">{item.desc}</p>
</div>
))}
</div>
</div>
</Container>
</Section>
);
}

51
components/home/WhyChooseUs.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import { Section, Container } from '../../components/ui';
export default function WhyChooseUs() {
return (
<Section className="bg-white text-neutral-dark">
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
<div className="lg:col-span-4">
<div className="sticky top-24">
<h2 className="text-5xl font-bold text-primary mb-6">Why choose us</h2>
<p className="text-xl text-text-secondary">
Experience prevents many mistakes, but we learn something new every day
</p>
</div>
</div>
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
{[
{
num: '01',
title: 'Expertise with depth',
desc: 'Our team has decades of experience – far beyond the founding of KLZ in 2009. The entire team has over 100 years of cable experience, gained in a wide variety of plants, from low voltage to medium voltage to high voltage. We know what cables smell like, what the colleague at the shielding machine is responsible for how testing is carried out.'
},
{
num: '02',
title: 'Tailor-made solutions for your project',
desc: 'When things get more complex, we involve our technical consultants. That’s where you need experts who haven’t just started their careers. You need people who read and understand standards and have sometimes been involved. We have them, and with their and our experience we differentiate ourselves from simple cable trading'
},
{
num: '03',
title: 'Reliability that keeps your projects on track',
desc: 'Accessibility, quick response in a fast-moving world. Do you still have questions after 5 p.m.? Or at the weekend? We are always there. And that is how we have developed our partners so that as a team we can realize what you have paid for. And if something does not go well, no one hides.'
},
{
num: '04',
title: 'Sustainability without compromise',
desc: 'We are convinced that we will leave the world better than we found it. With initiatives such as our drum return service and a clear focus on recycling, we ensure that every connection is as environmentally friendly as possible. Each of our partners has the appropriate certificates, which are increasingly expected by all customers.'
}
].map((item, idx) => (
<div key={idx} className="space-y-4">
<span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">{item.num}</span>
<h3 className="text-2xl font-bold">{item.title}</h3>
<p className="text-text-secondary leading-relaxed">{item.desc}</p>
</div>
))}
</div>
</div>
</Container>
</Section>
);
}