From a48045dacb067424d9f6cffc1b42b3e6520e490c Mon Sep 17 00:00:00 2001
From: Timo <timo@example.com>
Date: Thu, 8 Jan 2026 00:12:52 +0100
Subject: [PATCH] feat: add instant QR code generator, AI coming soon banner,
 and home page client components.

---
 src/components/marketing/AIComingSoonBanner.tsx | 3 ++-
 src/components/marketing/HomePageClient.tsx     | 4 +---
 src/components/marketing/InstantGenerator.tsx   | 6 +++++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/marketing/AIComingSoonBanner.tsx b/src/components/marketing/AIComingSoonBanner.tsx
index 32be33d..0a9292e 100644
--- a/src/components/marketing/AIComingSoonBanner.tsx
+++ b/src/components/marketing/AIComingSoonBanner.tsx
@@ -84,7 +84,7 @@ const AIComingSoonBanner = () => {
   ];
 
   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">
+    <section className="relative overflow-hidden pt-12 pb-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 via-white to-purple-50">
       {/* 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" />
@@ -208,6 +208,7 @@ const AIComingSoonBanner = () => {
           )}
         </motion.div>
       </div>
+      <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-b from-transparent to-white pointer-events-none" />
     </section>
   );
 };
diff --git a/src/components/marketing/HomePageClient.tsx b/src/components/marketing/HomePageClient.tsx
index b857be1..01d9c04 100644
--- a/src/components/marketing/HomePageClient.tsx
+++ b/src/components/marketing/HomePageClient.tsx
@@ -34,9 +34,7 @@ export default function HomePageClient() {
       {/* Main Interaction: Generator */}
       <InstantGenerator t={t} />
 
-      <div className="py-8">
-        <AIComingSoonBanner />
-      </div>
+      <AIComingSoonBanner />
 
       <StaticVsDynamic t={t} />
       <Features t={t} />
diff --git a/src/components/marketing/InstantGenerator.tsx b/src/components/marketing/InstantGenerator.tsx
index fdab8e0..30b8609 100644
--- a/src/components/marketing/InstantGenerator.tsx
+++ b/src/components/marketing/InstantGenerator.tsx
@@ -74,7 +74,11 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
   };
 
   return (
-    <section className="py-16 bg-gray-50 border-t border-gray-100">
+    <section className="pt-16 pb-32 bg-gray-50 border-t border-gray-100 relative">
+      <div
+        className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-r from-blue-50 to-white pointer-events-none"
+        style={{ maskImage: 'linear-gradient(to bottom, transparent, black)', WebkitMaskImage: 'linear-gradient(to bottom, transparent, black)' }}
+      />
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
         <motion.div
           initial={{ opacity: 0, y: 20 }}