wip

components/home/Experience.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import { Section, Container } 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">
+      <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"
+          unoptimized
+        />
+        <div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
+      </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>
+        </div>
+      </Container>
+    </Section>
+  );
+}