61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
export function FinalCtaSection() {
|
|
const scrollToTop = () => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
setTimeout(() => {
|
|
const input = document.querySelector('input[type="email"]') as HTMLInputElement;
|
|
input?.focus();
|
|
}, 500);
|
|
};
|
|
|
|
return (
|
|
<section
|
|
id="join"
|
|
className="relative py-24 px-6 overflow-hidden"
|
|
style={{
|
|
background: 'linear-gradient(180deg, #1a2744 0%, #122035 50%, #0c1628 100%)',
|
|
}}
|
|
>
|
|
<div
|
|
className="absolute top-0 left-0 right-0 h-0.5 pointer-events-none"
|
|
style={{
|
|
background:
|
|
'linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.3) 25%, rgba(34, 211, 238, 0.6) 50%, rgba(34, 211, 238, 0.3) 75%, transparent 100%)',
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
className="absolute inset-0 opacity-50 pointer-events-none"
|
|
style={{
|
|
backgroundImage:
|
|
'radial-gradient(circle at 20% 50%, rgba(34, 211, 238, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 35%)',
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10 max-w-3xl mx-auto text-center">
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
|
|
Ready to build?
|
|
</h2>
|
|
<p className="text-cyan-100/70 text-lg md:text-xl mb-10 max-w-2xl mx-auto">
|
|
Join developers waiting for early access. We'll notify you when your spot is ready.
|
|
</p>
|
|
|
|
<button
|
|
onClick={scrollToTop}
|
|
className="inline-flex items-center gap-3 px-10 py-4 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 border-none rounded-xl text-white font-semibold text-lg cursor-pointer transition-all shadow-[0_8px_30px_rgba(99,102,241,0.35)] hover:shadow-[0_14px_40px_rgba(99,102,241,0.45)] hover:-translate-y-[3px]"
|
|
>
|
|
Get Early Access
|
|
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-[5px]" />
|
|
</button>
|
|
|
|
<p className="text-cyan-200/50 text-sm mt-8">
|
|
No credit card required • Free to start • Cancel anytime
|
|
</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|