product

components/CallToAction.tsx

@@ -0,0 +1,53 @@
+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;