53 lines
2.3 KiB
TypeScript
53 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { Mail } from 'lucide-react';
|
|
|
|
const CallToAction: React.FC = () => {
|
|
return (
|
|
<section className="py-20 bg-background-dark">
|
|
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="relative rounded-3xl overflow-hidden bg-primary text-gray-900 p-12 text-center shadow-2xl">
|
|
{/* Subtle patterned overlay */}
|
|
<div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div>
|
|
|
|
<div className="relative z-10">
|
|
<h2 className="text-3xl md:text-5xl font-display font-bold mb-6">
|
|
Ready to boost your focus?
|
|
</h2>
|
|
<p className="text-lg md:text-xl text-gray-900/80 mb-10 max-w-2xl mx-auto">
|
|
Join thousands of students and lifelong learners mastering new topics every day with Nemia.
|
|
</p>
|
|
|
|
<form
|
|
action="https://getlaunchlist.com/s/pAqdup"
|
|
method="POST"
|
|
className="flex flex-col sm:flex-row justify-center gap-3 max-w-lg mx-auto"
|
|
>
|
|
<div className="relative flex-grow">
|
|
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" size={20} />
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="Enter your email"
|
|
required
|
|
className="w-full bg-gray-900/10 border border-gray-900/20 rounded-xl py-4 pl-12 pr-4 text-gray-900 placeholder:text-gray-900/50 focus:outline-none focus:border-gray-900 transition-colors"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="bg-gray-900 text-white px-8 py-4 rounded-xl font-bold text-lg hover:scale-105 transition-transform flex items-center justify-center gap-2 whitespace-nowrap"
|
|
>
|
|
<span>Join Waitlist</span>
|
|
</button>
|
|
</form>
|
|
|
|
<p className="mt-6 text-sm font-medium opacity-60 text-gray-900">
|
|
No credit card required.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CallToAction; |