58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { Code2, Palette, Zap } from 'lucide-react'
|
|
import type { FC } from 'react'
|
|
|
|
const highlights = [
|
|
{ icon: Code2, key: 'clean' },
|
|
{ icon: Palette, key: 'design' },
|
|
{ icon: Zap, key: 'performance' },
|
|
] as const
|
|
|
|
export const AboutSection: FC = () => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<section id="about" className="scroll-mt-20 px-6 py-24">
|
|
<div className="mx-auto max-w-4xl">
|
|
<header className="text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
|
|
{t('about.title')}
|
|
</h2>
|
|
<p className="mt-2 text-muted-foreground">{t('about.subtitle')}</p>
|
|
</header>
|
|
|
|
<div className="mt-12 grid gap-8 md:grid-cols-2">
|
|
<article className="space-y-4">
|
|
<p className="leading-relaxed text-muted-foreground">
|
|
{t('about.description')}
|
|
</p>
|
|
<p className="leading-relaxed text-muted-foreground">
|
|
{t('about.paragraph2')}
|
|
</p>
|
|
</article>
|
|
|
|
<aside className="space-y-4">
|
|
{highlights.map(({ icon: Icon, key }) => (
|
|
<div
|
|
key={key}
|
|
className="flex items-start gap-4 rounded-lg border border-border/50 bg-card p-4 transition-colors hover:border-primary/30"
|
|
>
|
|
<div className="rounded-md bg-primary/10 p-2 text-primary">
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium">
|
|
{t(`about.highlights.${key}.title`)}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{t(`about.highlights.${key}.description`)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|