35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { useTranslations, useLocale } from 'next-intl';
|
|
import { Section, Container, Button, Heading } from '../../components/ui';
|
|
|
|
export default function CTA({ data }: { data?: any }) {
|
|
const t = useTranslations('Home.cta');
|
|
const locale = useLocale();
|
|
|
|
return (
|
|
<Section className="bg-primary text-white py-32 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
|
|
<div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
|
|
|
|
<Container className="relative z-10">
|
|
<div className="flex flex-col lg:flex-row items-center justify-between gap-16">
|
|
<div className="max-w-3xl text-center lg:text-left">
|
|
<Heading level={2} subtitle={data?.subtitle || t('subtitle')} className="text-white mb-6">
|
|
<span className="text-white">{data?.title || t('title')}</span>
|
|
</Heading>
|
|
<p className="text-lg md:text-xl text-white/70 leading-relaxed">
|
|
{data?.description || t('description')}
|
|
</p>
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
<Button href={`/${locale}/contact`} variant="accent" size="xl" className="group px-12">
|
|
{data?.buttonLabel || t('button')}
|
|
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|