Files
klz-cables.com/components/home/Experience.tsx
Marc Mintel ec3f2cf8c9
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 10s
Build & Deploy / 🏗️ Build (push) Has been cancelled
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Build & Deploy / 🧪 QA (push) Has been cancelled
style: design refinements — reduce title/heading sizes, remove Scribble decorations, add image quality
- Hero title: text-7xl → text-5xl, removed text-shadow
- Removed all Scribble decorative strokes from Hero, VideoSection, products page
- PayloadRichText headings reduced by one size step
- Team page: harmonized Michael/Klaus heading sizes (both text-4xl)
- Product overview: removed min-height from hero, reduced CTA heading
- Added quality={100} to team photos, Experience and MeetTheTeam backgrounds
- Cleaned up unused Scribble imports
2026-03-02 01:11:22 +01:00

59 lines
2.4 KiB
TypeScript

import React from 'react';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { Section, Container, Heading } from '../../components/ui';
export default function Experience({ data }: { data?: any }) {
const t = useTranslations('Home.experience');
return (
<Section className="relative py-32 md:py-48 overflow-hidden text-white">
<div className="absolute inset-0 z-0">
<Image
src="/uploads/2024/12/1694273920124-copy-2.webp"
alt={data?.subtitle || t('subtitle')}
fill
className="object-cover object-center scale-105 animate-slow-zoom"
sizes="100vw"
quality={100}
/>
<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">
<div className="max-w-3xl">
<Heading level={2} subtitle={data?.subtitle || t('subtitle')} className="text-white">
<span className="text-white">{data?.title || t('title')}</span>
</Heading>
<div className="space-y-8 text-lg md:text-xl text-white/90 leading-relaxed font-medium">
<p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl">
{data?.paragraph1 || t('p1')}
</p>
<p className="pl-9">{data?.paragraph2 || t('p2')}</p>
</div>
<dl className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="animate-fade-in">
<dt className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
{data?.badge1 || t('certifiedQuality')}
</dt>
<dd className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
{data?.badge1Text || t('vdeApproved')}
</dd>
</div>
<div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
<dt className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
{data?.badge2 || t('fullSpectrum')}
</dt>
<dd className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
{data?.badge2Text || t('solutionsRange')}
</dd>
</div>
</dl>
</div>
</Container>
</Section>
);
}