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 02:57:53 +01:00
parent de87c62312
commit 021d23ab93
21 changed files with 967 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/home/WhatWeDo.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { useTranslations } from 'next-intl';
import { Section, Container } from '../../components/ui';
import { Section, Container, Heading } from '../../components/ui';
export default function WhatWeDo() {
const t = useTranslations('Home.whatWeDo');
@@ -8,21 +8,33 @@ 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-3">
<div className="sticky top-24">
<h2 className="text-5xl font-bold text-primary mb-6">{t('title')}</h2>
<p className="text-xl text-text-secondary">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
<div className="lg:col-span-4">
<div className="sticky top-32">
<Heading level={2} subtitle="Our Expertise">
{t('title')}
</Heading>
<p className="text-xl text-text-secondary leading-relaxed">
{t('subtitle')}
</p>
<div className="mt-12 p-8 bg-primary-light rounded-2xl border border-primary/10">
<p className="text-primary font-bold text-lg italic">
"We don't just deliver cables; we deliver the infrastructure for a sustainable future."
</p>
</div>
</div>
</div>
<div className="lg:col-span-9 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
<div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-20">
{[0, 1, 2, 3].map((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">0{idx + 1}</span>
<h3 className="text-2xl font-bold">{t(`items.${idx}.title`)}</h3>
<p className="text-text-secondary leading-relaxed">{t(`items.${idx}.description`)}</p>
<div key={idx} className="group">
<div className="flex items-center gap-4 mb-6">
<span className="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white font-bold text-lg shadow-lg shadow-primary/20 group-hover:scale-110 transition-transform">
{idx + 1}
</span>
<div className="h-px flex-grow bg-neutral-medium" />
</div>
<h3 className="text-2xl font-bold mb-4 text-primary group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
<p className="text-text-secondary text-lg leading-relaxed">{t(`items.${idx}.description`)}</p>
</div>
))}
</div>