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-19 02:05:30 +01:00
parent 46266a7bbc
commit 4f6264f2e2
24 changed files with 431 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/home/CTA.tsx
View File

@@ -7,7 +7,7 @@ export default function CTA() {
const locale = useLocale();
return (
<Section className="bg-primary-dark text-white py-32 relative overflow-hidden">
<Section className="bg-primary text-white py-32 relative overflow-hidden">
<div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
<div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />

4
components/home/Experience.tsx
View File

@@ -16,8 +16,8 @@ export default function Experience() {
className="object-cover object-center scale-105 animate-slow-zoom"
unoptimized
/>
<div className="absolute inset-0 bg-primary-dark/80 mix-blend-multiply" />
<div className="absolute inset-0 bg-gradient-to-r from-primary-dark via-primary-dark/40 to-transparent" />
<div className="absolute inset-0 bg-primary/80 mix-blend-multiply" />
<div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/40 to-transparent" />
</div>
<Container className="relative z-10">

6
components/home/Hero.tsx
View File

@@ -8,12 +8,12 @@ export default function Hero() {
const t = useTranslations('Home.hero');
return (
<Section className="relative h-[70vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary-dark py-0 md:py-0 lg:py-0">
<Section className="relative h-[70vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary py-0 md:py-0 lg:py-0">
<HeroIllustration />
<Container className="relative z-10 text-left text-white w-full">
<div className="max-w-5xl animate-slide-up">
<Heading level={1} className="mb-4 md:mb-8 tracking-tight leading-[1.05] max-w-[15ch] md:max-w-none">
<Heading level={1} className="mb-4 md:mb-8 tracking-tight leading-[1.05] max-w-[15ch] md:max-w-none text-white">
{t.rich('title', {
green: (chunks) => (
<span className="relative inline-block">
@@ -23,7 +23,7 @@ export default function Hero() {
)
})}
</Heading>
<p className="text-lg md:text-2xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
<p className="text-lg md:text-2xl text-white leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
{t('subtitle')}
</p>
<div className="flex flex-col md:flex-row gap-3 md:gap-6">

8
components/home/MeetTheTeam.tsx
View File

@@ -18,8 +18,8 @@ export default function MeetTheTeam() {
className="object-cover scale-105 animate-slow-zoom"
unoptimized
/>
<div className="absolute inset-0 bg-primary-dark/70 mix-blend-multiply" />
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark via-primary-dark/20 to-transparent" />
<div className="absolute inset-0 bg-primary/70 mix-blend-multiply" />
<div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/20 to-transparent" />
</div>
<Container className="relative z-10">
@@ -43,10 +43,10 @@ export default function MeetTheTeam() {
<div className="flex items-center gap-4">
<div className="flex -space-x-4">
<div className="w-14 h-14 rounded-full border-4 border-primary-dark overflow-hidden relative">
<div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
<Image src="/uploads/2024/12/DSC07768-Large.webp" alt={teamT('michael.name')} fill className="object-cover" />
</div>
<div className="w-14 h-14 rounded-full border-4 border-primary-dark overflow-hidden relative">
<div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
<Image src="/uploads/2024/12/DSC07963-Large.webp" alt={teamT('klaus.name')} fill className="object-cover" />
</div>
</div>

2
components/home/ProductCategories.tsx
View File

@@ -40,7 +40,7 @@ export default function ProductCategories() {
];
return (
<Section className="bg-neutral-light py-0 -mt-px">
<Section className="bg-neutral-light py-0 md:py-0 lg:py-0 -mt-px">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
{categories.map((category, idx) => (
<Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0">

4
components/home/VideoSection.tsx
View File

@@ -5,7 +5,7 @@ export default function VideoSection() {
const t = useTranslations('Home.video');
return (
<section className="relative h-[70vh] overflow-hidden bg-primary-dark">
<section className="relative h-[70vh] overflow-hidden bg-primary">
<video
className="w-full h-full object-cover opacity-60"
autoPlay
@@ -15,7 +15,7 @@ export default function VideoSection() {
>
<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-gradient-to-b from-primary-dark/60 via-transparent to-primary-dark/60 flex items-center justify-center">
<div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-transparent to-primary/60 flex items-center justify-center">
<div className="max-w-5xl px-6 text-center animate-slide-up">
<h2 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-[1.1]">
{t.rich('title', {