Files
klz-cables.com/components/home/WhatWeDo.tsx
2026-01-17 00:06:30 +01:00

52 lines
2.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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>
);
}