wip

components/home/WhatWeDo.tsx

@@ -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>
+  );
+}