Newsletter comming soon

src/components/marketing/AIComingSoonBanner.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Sparkles, Brain, TrendingUp, MessageSquare, Palette, ArrowRight, Mail, CheckCircle2, Lock } from 'lucide-react';
+import Link from 'next/link';
+
+const AIComingSoonBanner = () => {
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch('/api/newsletter/subscribe', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to subscribe');
+      }
+
+      setSubmitted(true);
+      setEmail('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const features = [
+    {
+      icon: Brain,
+      category: 'Smart QR Generation',
+      items: [
+        'AI-powered content optimization',
+        'Intelligent design suggestions',
+        'Auto-generate vCard from LinkedIn',
+        'Smart URL shortening with SEO',
+      ],
+    },
+    {
+      icon: TrendingUp,
+      category: 'Advanced Analytics & Insights',
+      items: [
+        'AI-powered scan predictions',
+        'Anomaly detection',
+        'Natural language analytics queries',
+        'Automated insights reports',
+      ],
+    },
+    {
+      icon: MessageSquare,
+      category: 'Smart Content Management',
+      items: [
+        'AI chatbot for instant support',
+        'Automated QR categorization',
+        'Smart bulk QR generation',
+        'Content recommendations',
+      ],
+    },
+    {
+      icon: Palette,
+      category: 'Creative & Marketing',
+      items: [
+        'AI-generated custom QR designs',
+        'Marketing copy generation',
+        'A/B testing suggestions',
+        'Campaign optimization',
+      ],
+    },
+  ];
+
+  return (
+    <section className="relative overflow-hidden py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 via-white to-purple-50">
+      {/* Smooth Gradient Fade Transition from Hero */}
+      <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-purple-50 via-blue-50/50 to-transparent pointer-events-none z-20" />
+
+      {/* Animated Background Orbs (matching Hero) */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl animate-blob" />
+        <div className="absolute top-1/2 right-1/4 w-80 h-80 bg-purple-400/20 rounded-full blur-3xl animate-blob animation-delay-2000" />
+        <div className="absolute bottom-0 left-1/2 w-96 h-96 bg-cyan-400/15 rounded-full blur-3xl animate-blob animation-delay-4000" />
+      </div>
+
+      {/* Smooth Gradient Fade Transition to Next Section */}
+      <div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-b from-transparent to-gray-50 pointer-events-none z-20" />
+
+      <div className="max-w-6xl mx-auto relative z-10">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-100 mb-4">
+            <Sparkles className="w-4 h-4 text-blue-600" />
+            <span className="text-sm font-medium text-blue-700">
+              Coming Soon
+            </span>
+          </div>
+
+          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-3">
+            The Future of QR Codes is{' '}
+            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              AI-Powered
+            </span>
+          </h2>
+
+          <p className="text-gray-600 text-lg max-w-2xl mx-auto">
+            Revolutionary AI features to transform how you create, manage, and optimize QR codes
+          </p>
+        </div>
+
+        {/* Features Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+          {features.map((feature, index) => (
+            <div
+              key={index}
+              className="bg-white/80 backdrop-blur rounded-xl p-6 border border-gray-100 hover:shadow-lg transition-all"
+            >
+              <div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-purple-100 rounded-lg flex items-center justify-center mb-4">
+                <feature.icon className="w-6 h-6 text-blue-600" />
+              </div>
+
+              <h3 className="font-semibold text-gray-900 mb-3">
+                {feature.category}
+              </h3>
+
+              <ul className="space-y-2">
+                {feature.items.map((item, itemIndex) => (
+                  <li key={itemIndex} className="flex items-start gap-2 text-sm text-gray-600">
+                    <div className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 flex-shrink-0" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Email Capture */}
+        <div className="max-w-2xl mx-auto bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-8 border border-gray-100">
+          {!submitted ? (
+            <>
+              <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3 mb-3">
+                <div className="flex-1 relative">
+                  <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" />
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => {
+                      setEmail(e.target.value);
+                      setError('');
+                    }}
+                    placeholder="your@email.com"
+                    required
+                    disabled={loading}
+                    className="w-full pl-12 pr-4 py-3 rounded-xl bg-white border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all"
+                  />
+                </div>
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-xl transition-all disabled:opacity-50 whitespace-nowrap flex items-center justify-center gap-2"
+                >
+                  {loading ? 'Subscribing...' : (
+                    <>
+                      Notify Me
+                      <ArrowRight className="w-4 h-4" />
+                    </>
+                  )}
+                </button>
+              </form>
+              {error && (
+                <p className="text-sm text-red-600 mb-2">{error}</p>
+              )}
+              <p className="text-xs text-gray-500 text-center">
+                Be the first to know when AI features launch
+              </p>
+            </>
+          ) : (
+            <div className="flex items-center justify-center gap-2 text-green-600">
+              <CheckCircle2 className="w-5 h-5" />
+              <span className="font-medium">
+                You're on the list! We'll notify you when AI features launch.
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AIComingSoonBanner;

src/components/marketing/HomePageClient.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { Hero } from '@/components/marketing/Hero';
+import AIComingSoonBanner from '@/components/marketing/AIComingSoonBanner';
 import { StatsStrip } from '@/components/marketing/StatsStrip';
 import { TemplateCards } from '@/components/marketing/TemplateCards';
 import { InstantGenerator } from '@/components/marketing/InstantGenerator';
@@ -29,6 +30,7 @@ export default function HomePageClient() {
   return (
     <>
       <Hero t={t} />
+      <AIComingSoonBanner />
       <InstantGenerator t={t} />
       <StaticVsDynamic t={t} />
       <Features t={t} />

src/components/marketing/InstantGenerator.tsx

@@ -73,7 +73,10 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
   };
 
   return (
-    <section className="py-16 bg-gray-50">
+    <section className="relative py-16 bg-gray-50">
+      {/* Smooth Gradient Fade Transition from Previous Section */}
+      <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-purple-50/50 via-gray-50 to-transparent pointer-events-none" />
+
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
         <div className="text-center mb-12">
           <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">