Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 1x 6x 6x 6x | import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowRight } from 'lucide-react';
interface CTASectionProps {
variant?: 'default' | 'minimal';
}
const CTASection: React.FC<CTASectionProps> = ({ variant = 'default' }) => {
const { t } = useTranslation();
Iif (variant === 'minimal') {
return (
<section className="py-16 bg-white dark:bg-gray-900">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
{t('marketing.cta.ready')}
</h2>
<p className="text-gray-600 dark:text-gray-400 mb-8">
{t('marketing.cta.readySubtitle')}
</p>
<Link
to="/signup"
className="inline-flex items-center gap-2 px-6 py-3 text-base font-semibold text-white bg-brand-600 rounded-xl hover:bg-brand-700 transition-colors"
>
{t('marketing.cta.startFree')}
<ArrowRight className="h-5 w-5" />
</Link>
</div>
</section>
);
}
return (
<section className="py-20 lg:py-28 bg-gradient-to-br from-brand-600 to-brand-700 relative overflow-hidden">
{/* Background Pattern */}
<div className="absolute inset-0">
<div className="absolute top-0 left-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
</div>
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
{t('marketing.cta.ready')}
</h2>
<p className="text-lg sm:text-xl text-brand-100 mb-10 max-w-2xl mx-auto">
{t('marketing.cta.readySubtitle')}
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link
to="/signup"
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold text-brand-600 bg-white rounded-xl hover:bg-brand-50 shadow-lg shadow-black/10 transition-colors"
>
{t('marketing.cta.startFree')}
<ArrowRight className="h-5 w-5" />
</Link>
<Link
to="/contact"
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 text-base font-semibold text-white bg-white/10 rounded-xl hover:bg-white/20 border border-white/20 transition-colors"
>
{t('marketing.cta.talkToSales')}
</Link>
</div>
<p className="mt-6 text-sm text-brand-200">
{t('marketing.cta.noCredit')}
</p>
</div>
</section>
);
};
export default CTASection;
|