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

188
app/[locale]/page.tsx
View File

@@ -1,182 +1,26 @@
import { useTranslations } from 'next-intl';
import { Button, Section, Container } from '@/components/ui';
import Link from 'next/link';
import Image from 'next/image';
import Hero from '@/components/home/Hero';
import ProductCategories from '@/components/home/ProductCategories';
import WhatWeDo from '@/components/home/WhatWeDo';
import WhyChooseUs from '@/components/home/WhyChooseUs';
import MeetTheTeam from '@/components/home/MeetTheTeam';
import GallerySection from '@/components/home/GallerySection';
import VideoSection from '@/components/home/VideoSection';
import CTA from '@/components/home/CTA';
export default function HomePage() {
const t = useTranslations('Index');
return (
<div className="flex flex-col min-h-screen">
{/* Hero Section */}
<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="text-[#82ed20] relative inline-block">green</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>
{/* Product Categories Preview */}
<Section className="bg-neutral-dark 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"
/>
<div className="absolute inset-0 bg-black/40 group-hover:bg-black/50 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>
{/* What We Do Section */}
<Section className="bg-neutral-dark text-white">
<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-white/80">
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-white/60 border-b border-white/20 pb-2 block w-fit">{item.num}</span>
<h3 className="text-2xl font-bold">{item.title}</h3>
<p className="text-white/70 leading-relaxed">{item.desc}</p>
</div>
))}
</div>
</div>
</Container>
</Section>
{/* Video Section */}
<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="text-[#82ed20] italic">future</span> starts here.
</h2>
</div>
</section>
{/* CTA Section */}
<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>
<Hero />
<ProductCategories />
<WhatWeDo />
<WhyChooseUs />
<MeetTheTeam />
<GallerySection />
<VideoSection />
<CTA />
</div>
);
}

2
app/[locale]/products/[...slug]/page.tsx
View File

@@ -13,7 +13,7 @@ interface ProductPageProps {
const components = {
ProductTechnicalData,
// Add other components if needed
p: (props: any) => <div {...props} className="mb-4" />,
};
export default async function ProductPage({ params }: ProductPageProps) {

176
app/[locale]/team/page.tsx
View File

@@ -5,89 +5,129 @@ import Image from 'next/image';
export default function TeamPage() {
const t = useTranslations('Navigation');
const teamMembers = [
{
name: 'Klaus Mintel',
role: 'Founder & CEO',
image: '/uploads/2024/12/DSC07963-Large.webp',
quote: 'Sometimes all it takes is a clear head and a good cable to make the world a little better.',
bio: 'Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.',
linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/'
},
{
name: 'Michael Bodemer',
role: 'Technical Director',
image: '/uploads/2024/12/DSC07768-Large.webp',
quote: 'Challenges exist to be solved, not to debate how complicated they are.',
bio: 'Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project.',
linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/'
}
];
return (
<div className="flex flex-col min-h-screen">
{/* Hero Section */}
<section className="relative h-[60vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
<section className="relative flex items-center justify-center overflow-hidden bg-neutral-dark pt-[14%] pb-[12%]">
<div className="absolute inset-0 z-0">
<Image
src="/uploads/2024/12/DSC07655-Large.webp"
alt="KLZ Team"
fill
className="object-cover"
priority
/>
<div className="absolute inset-0 bg-gradient-to-r from-black/80 to-black/40" />
<div className="absolute inset-0 bg-gradient-to-r from-[#0a0000] to-[rgba(10,10,10,0.5)] opacity-80" />
</div>
<Container className="relative z-10 text-center text-white max-w-4xl">
<h1 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
<h5 className="text-xl md:text-2xl font-medium mb-4 text-primary">
The bright sparks behind the power
</h1>
<p className="text-xl md:text-2xl text-neutral-light">
</h5>
<h2 className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
We connect energy, expertise, and innovation to power a greener future.
</p>
</h2>
</Container>
</section>
{/* Team Members Section */}
<Section className="bg-white">
<Container>
<div className="space-y-24">
{teamMembers.map((member, idx) => (
<div key={idx} className={`flex flex-col md:flex-row gap-12 items-center ${idx % 2 === 1 ? 'md:flex-row-reverse' : ''}`}>
<div className="w-full md:w-1/2 relative aspect-[4/3] rounded-lg overflow-hidden shadow-lg">
<Image
src={member.image}
alt={member.name}
fill
className="object-cover"
/>
</div>
<div className="w-full md:w-1/2 space-y-6">
<h2 className="text-4xl font-bold text-primary">{member.name}</h2>
<blockquote className="text-2xl font-medium italic text-text-primary border-l-4 border-primary pl-6 py-2">
"{member.quote}"
</blockquote>
<p className="text-lg text-text-secondary leading-relaxed">
{member.bio}
</p>
<a
href={member.linkedin}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center text-primary font-bold hover:text-primary-dark transition-colors group border-2 border-primary px-6 py-3 rounded-full hover:bg-primary hover:text-white"
>
Check {member.name.split(' ')[0]}'s LinkedIn
<span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
{/* Michael Bodemer Section */}
<section className="relative bg-[#011fff] text-white overflow-hidden">
<div className="flex flex-col md:flex-row">
<div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center">
<h1 className="text-4xl md:text-5xl font-bold mb-8">Michael Bodemer</h1>
<div className="w-12 h-1 bg-white mb-8" />
<h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
"Challenges exist to be solved, not to debate how complicated they are."
</h2>
<div className="w-12 h-1 bg-white mb-8" />
<p className="text-lg leading-relaxed opacity-90 mb-8">
Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project.
</p>
<a
href="https://www.linkedin.com/in/michael-bodemer-33b493122/"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
>
Check Michael's LinkedIn
<span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
<div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full">
<Image
src="/uploads/2024/12/DSC07768-Large.webp"
alt="Michael Bodemer"
fill
className="object-cover"
/>
</div>
</div>
</section>
{/* Legacy Section */}
<section className="relative py-[10%] bg-neutral-dark text-white overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src="/uploads/2024/12/medium-voltage-1920x400.webp"
alt="Legacy"
fill
className="object-cover"
/>
<div className="absolute inset-0 bg-[#263336] opacity-90" />
</div>
<Container className="relative z-10">
<div className="grid grid-cols-1 md:grid-cols-12 gap-12">
<div className="md:col-span-5">
<h3 className="text-3xl font-bold mb-6">A Legacy of Excellence in Every Connection</h3>
<div className="space-y-6 text-lg opacity-90">
<p>
At KLZ, our expertise is built on generations of dedication to the energy industry. With decades of hands-on experience, we’ve grown alongside the evolution of cable technology, combining traditional craftsmanship with modern innovation. Each project we take on reflects a deep understanding of what it takes to create lasting, reliable energy solutions.
</p>
<p>
Paired with historic illustrations from the industry’s early days, our story is a reminder of how far cables have come – and how much care has always gone into connecting the world.
</p>
</div>
))}
</div>
</div>
</Container>
</Section>
</section>
{/* Klaus Mintel Section */}
<section className="relative bg-[#011fff] text-white overflow-hidden">
<div className="flex flex-col md:flex-row">
<div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full order-2 md:order-1">
<Image
src="/uploads/2024/12/DSC07963-Large.webp"
alt="Klaus Mintel"
fill
className="object-cover"
/>
</div>
<div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center order-1 md:order-2">
<h1 className="text-4xl md:text-5xl font-bold mb-8">Klaus Mintel</h1>
<div className="w-12 h-1 bg-white mb-8" />
<h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
"Sometimes all it takes is a clear head and a good cable to make the world a little better."
</h2>
<div className="w-12 h-1 bg-white mb-8" />
<p className="text-lg leading-relaxed opacity-90 mb-8">
Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.
</p>
<a
href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
>
Check Klaus' LinkedIn
<span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
</div>
</section>
{/* Manifesto Section */}
<Section className="bg-neutral-dark text-white">
<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">
@@ -95,17 +135,17 @@ export default function TeamPage() {
</div>
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
{[
{ title: 'Competence', desc: 'Decades of experience and Europe-wide know-how combined with commitment and new ideas.' },
{ title: 'Availability', desc: 'Always there for you - no waiting, no delays, just fast and reliable support.' },
{ title: 'Solutions', desc: 'Solutions require a lot of questions. We ask them. You, the manufacturer and ourselves.' },
{ title: 'Logistics', desc: 'Monitoring production, regular exchanges, freight tracking, customs clearance - our everyday life.' },
{ title: 'Open to new things', desc: 'We listen. From the inquiry, through the offer, to delivery. What can be done better needs to be discussed.' },
{ title: 'Competence', desc: 'Decades of experience and Europe-wide know-how combined with commitment and new ideas. Production partners up to 525 kV and the most modern systems, test laboratories and ready to invest in the future.' },
{ title: 'Availability', desc: 'Always there for you - no waiting, no delays, just fast and reliable support. Maybe it\'s because we love what we do.' },
{ title: 'Solutions', desc: 'Solutions require a lot of questions. We ask them. You, the manufacturer and ourselves. If you don\'t ask questions, you\'ll pay for it later. We need to prevent that.' },
{ title: 'Logistics', desc: 'Monitoring production, regular exchanges, freight tracking, customs clearance, reloading, paying attention to the delivery time tunnel, invoices, delivery notes - our everyday life. We have the right team for it.' },
{ title: 'Open to new things', desc: 'We listen. From the inquiry, through the offer, to delivery. What can be done better needs to be discussed. If you don\'t adapt your processes, you\'ll no longer be on the highway at some point. Instead, you\'ll end up in a dead end.' },
{ title: 'Reliability', desc: 'We deliver what we promise – every time, without fail.' }
].map((item, idx) => (
<div key={idx} className="bg-white/5 p-6 rounded-lg border border-white/10 hover:bg-white/10 transition-colors">
<div key={idx} className="bg-neutral-light p-6 rounded-lg border border-neutral hover:border-primary transition-colors">
<div className="text-primary font-mono text-xl mb-4">0{idx + 1}</div>
<h3 className="text-xl font-bold mb-3">{item.title}</h3>
<p className="text-white/70">{item.desc}</p>
<p className="text-text-secondary">{item.desc}</p>
</div>
))}
</div>
@@ -114,7 +154,7 @@ export default function TeamPage() {
</Section>
{/* Gallery Section */}
<Section className="bg-neutral-dark py-0 pb-24">
<Section className="bg-neutral-dark py-0 pb-24 pt-24">
<Container>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[