104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { ContactForm } from '@/components/ui/ContactForm';
|
|
import { Newsletter } from '@/components/ui/Newsletter';
|
|
import { Section } from '@/components/ui/Section';
|
|
import { Heading, Text } from '@/components/ui/Typography';
|
|
import { useTranslation } from '@/lib/hooks/useTranslation';
|
|
import { container } from '@/lib/utils';
|
|
import Image from 'next/image';
|
|
|
|
export function AboutPageContent() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<main>
|
|
{/* About Us Header Section */}
|
|
<Section spacing="large">
|
|
<div className="flex flex-col items-center text-center">
|
|
<Heading level={1} className="mb-6 tracking-[0]">{t('about.title')}</Heading>
|
|
<Text className="max-w-3xl mx-auto mb-12 tracking-[0] mb-[80px]">
|
|
{t('about.description')}
|
|
</Text>
|
|
|
|
<div className="w-full aspect-[16/9] relative bg-gray-100">
|
|
<Image
|
|
src="/assets/images/image2.webp"
|
|
alt={t('about.title')}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Contact Form Section */}
|
|
<div className="relative">
|
|
{/* Top wave */}
|
|
<div className="w-full">
|
|
<Image
|
|
src="/assets/images/Frame6.png"
|
|
alt=""
|
|
width={1440}
|
|
height={140}
|
|
className="w-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Main content with yellow background */}
|
|
<div className="bg-[#FFC877] pb-[224px]">
|
|
<div className={container}>
|
|
<div className="py-[112px]">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
<div>
|
|
<ContactForm
|
|
title={t('about.contactForm.title')}
|
|
subtitle={t('about.contactForm.subtitle')}
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-full h-full relative bg-gray-100 min-h-[600px]">
|
|
<Image
|
|
src="/assets/images/image22.png"
|
|
alt={t('about.contactForm.title')}
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Newsletter Section */}
|
|
<div className="relative -mt-[112px]">
|
|
{/* Top wave that overlaps with yellow section */}
|
|
<div className="w-full absolute -top-32 z-10">
|
|
<Image
|
|
src="/assets/images/Frame4.png"
|
|
alt=""
|
|
width={1440}
|
|
height={140}
|
|
className="w-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Main content with pink background */}
|
|
<div className="bg-[#F58EA7]">
|
|
<div className={container}>
|
|
<div className="py-[112px]">
|
|
<Newsletter
|
|
title={t('about.newsletter.title')}
|
|
subtitle={t('about.newsletter.subtitle')}
|
|
buttonText={t('about.newsletter.buttonText')}
|
|
disclaimer={t('about.newsletter.disclaimer')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|