66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
const About: React.FC = () => {
|
|
const t = useTranslations('About');
|
|
|
|
return (
|
|
<section id="about" className="py-24 bg-feie-cream relative">
|
|
<div className="container mx-auto px-6">
|
|
<div className="flex flex-col md:flex-row items-center gap-16">
|
|
|
|
{/* Image/Visual Area */}
|
|
<div className="w-full md:w-1/2 relative">
|
|
<div className="aspect-4/5 bg-feie-dark rounded-sm overflow-hidden relative shadow-xl">
|
|
<Image
|
|
src="/assets/186-800x1000-grayscale.jpg"
|
|
alt="Office architecture"
|
|
fill
|
|
className="object-cover opacity-80 hover:scale-105 transition-transform duration-700"
|
|
/>
|
|
<div className="absolute inset-0 border border-feie-gold/30 m-4 pointer-events-none"></div>
|
|
</div>
|
|
<div className="absolute -bottom-10 -right-10 w-48 h-48 bg-feie-gold/10 -z-10 rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
{/* Text Content */}
|
|
<div className="w-full md:w-1/2 space-y-8">
|
|
<h2 className="text-sm font-bold tracking-widest text-feie-gold uppercase mb-2">{t('title')} • {t('subtitle')}</h2>
|
|
<h3 className="text-4xl md:text-5xl font-serif text-feie-dark leading-tight">
|
|
{t('heading')} <br />
|
|
<span className="italic text-gray-500">{t('subheading')}</span>
|
|
</h3>
|
|
|
|
<div className="space-y-6 text-gray-600 font-light leading-relaxed">
|
|
<p>
|
|
{t('p1')}
|
|
</p>
|
|
<p>
|
|
{t('p2')}
|
|
</p>
|
|
<p>
|
|
{t('p3')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="pt-4 grid grid-cols-2 gap-8">
|
|
<div>
|
|
<h4 className="text-3xl font-serif text-feie-gold">100+</h4>
|
|
<p className="text-sm text-gray-500 uppercase tracking-wider mt-1">{t('stats.cases')}</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-3xl font-serif text-feie-gold">24/7</h4>
|
|
<p className="text-sm text-gray-500 uppercase tracking-wider mt-1">{t('stats.support')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default About;
|