51 lines
2.3 KiB
TypeScript
51 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Section, Container, Heading } from '../../components/ui';
|
|
|
|
export default function WhatWeDo({ data }: { data?: any }) {
|
|
const t = useTranslations('Home.whatWeDo');
|
|
|
|
const items = data?.items?.length ? data.items : [0, 1, 2, 3].map(idx => ({
|
|
title: t(`items.${idx}.title`),
|
|
description: t(`items.${idx}.description`)
|
|
}));
|
|
|
|
return (
|
|
<Section className="bg-white">
|
|
<Container>
|
|
<div className="sticky-narrative-container">
|
|
<div className="sticky-narrative-sidebar">
|
|
<div className="lg:sticky lg:top-32">
|
|
<Heading level={2} subtitle={data?.expertiseLabel || t('expertise')} className="text-primary-dark">
|
|
{data?.title || t('title')}
|
|
</Heading>
|
|
<p className="text-base md:text-lg text-text-secondary leading-relaxed">
|
|
{data?.subtitle || t('subtitle')}
|
|
</p>
|
|
<div className="mt-8 md:mt-12 p-6 md:p-8 bg-saturated/10 rounded-2xl border border-saturated/10">
|
|
<p className="text-saturated font-bold text-base md:text-base italic">
|
|
"{data?.quote || t('quote')}"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-x-8 md:gap-x-12 gap-y-12 md:gap-y-20">
|
|
{items.map((item: any, idx: number) => (
|
|
<div key={idx} className="group">
|
|
<div className="flex items-center gap-4 mb-4 md:mb-6">
|
|
<span className="flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-saturated text-white font-bold text-base md:text-lg shadow-lg shadow-saturated/20 group-hover:scale-110 transition-transform">
|
|
{idx + 1}
|
|
</span>
|
|
<div className="h-px flex-grow bg-neutral-medium" />
|
|
</div>
|
|
<h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 text-primary-dark group-hover:text-accent-dark transition-colors">{item.title}</h3>
|
|
<p className="text-text-secondary text-base md:text-base leading-relaxed">{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|