wip

components/home/Experience.tsx

@@ -1,32 +1,51 @@
 import React from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
-import { Section, Container } from '../../components/ui';
+import { Section, Container, Heading } from '../../components/ui';
 
 export default function Experience() {
   const t = useTranslations('Home.experience');
 
   return (
-    <Section className="relative py-24 md:py-32 overflow-hidden text-white">
+    <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-left"
+          className="object-cover object-center scale-105 animate-slow-zoom"
           unoptimized
         />
-        <div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
+        <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-2xl">
-          <h2 className="text-4xl md:text-5xl font-bold mb-8 leading-tight">
-            {t('title')}
-          </h2>
-          <div className="space-y-6 text-lg text-white/90 leading-relaxed">
-            <p>{t('p1')}</p>
-            <p>{t('p2')}</p>
+        <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>