klz-cables.com/components/home/Experience.tsx

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() {
  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={t('subtitle')} 
          fill
          className="object-cover object-center scale-105 animate-slow-zoom"
          unoptimized
        />
        <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={t('subtitle')} className="text-white">
            <span className="text-white">{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">
              {t('p1')}
            </p>
            <p className="pl-9">
              {t('p2')}
            </p>
          </div>
          
          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="animate-fade-in">
              <div className="text-3xl md:text-4xl font-extrabold text-accent mb-4">{t('certifiedQuality')}</div>
              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('vdeApproved')}</div>
            </div>
            <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
              <div className="text-3xl md:text-4xl font-extrabold text-accent mb-4">{t('fullSpectrum')}</div>
              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('solutionsRange')}</div>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}