55 lines
2.1 KiB
TypeScript
55 lines
2.1 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() {
|
|
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="Experience Background"
|
|
fill
|
|
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>
|
|
|
|
<Container className="relative z-10">
|
|
<div className="max-w-3xl">
|
|
<Heading level={2} subtitle="Our Legacy" className="text-white">
|
|
<span className="text-white">{t('title')}</span>
|
|
</Heading>
|
|
<div className="space-y-8 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-2 md:grid-cols-4 gap-8">
|
|
{[
|
|
{ label: 'Years Experience', value: '25+' },
|
|
{ label: 'Projects Completed', value: '1.2k' },
|
|
{ label: 'Global Partners', value: '85' },
|
|
{ label: 'Cable Types', value: '450+' },
|
|
].map((stat, i) => (
|
|
<div key={i} className="animate-fade-in" style={{ animationDelay: `${i * 100}ms` }}>
|
|
<div className="text-4xl font-extrabold text-accent mb-2">{stat.value}</div>
|
|
<div className="text-sm font-bold uppercase tracking-widest text-white/60">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|