From dd93ca560a5350cdbb838b34674f60d24d9e2607 Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuthtimo@gmail.com>
Date: Thu, 22 Jan 2026 16:26:23 +0100
Subject: [PATCH] fix(marketing): Update hero animation timing and move Free
 Forever badge

---
 src/components/marketing/FreeToolsGrid.tsx | 15 ++++++++++++---
 src/components/marketing/Hero.tsx          | 15 ---------------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/components/marketing/FreeToolsGrid.tsx b/src/components/marketing/FreeToolsGrid.tsx
index afb98a1..a426471 100644
--- a/src/components/marketing/FreeToolsGrid.tsx
+++ b/src/components/marketing/FreeToolsGrid.tsx
@@ -213,9 +213,18 @@ export function FreeToolsGrid() {
                     transition={{ duration: 0.5 }}
                     className="text-center mb-16"
                 >
-                    <h2 className="text-3xl lg:text-4xl font-bold text-slate-900 mb-4">
-                        More Free QR Code Tools
-                    </h2>
+                    <div className="flex flex-col md:flex-row items-center justify-center gap-3 mb-4">
+                        <h2 className="text-3xl lg:text-4xl font-bold text-slate-900">
+                            More Free QR Code Tools
+                        </h2>
+                        <div className="bg-gradient-to-r from-emerald-500 to-green-500 text-white px-3 py-1 rounded-full text-xs md:text-sm font-semibold shadow-lg shadow-emerald-500/20 flex items-center gap-2">
+                            <span className="relative flex h-2 w-2">
+                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
+                                <span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
+                            </span>
+                            Free Forever
+                        </div>
+                    </div>
                     <p className="text-lg text-slate-600 max-w-2xl mx-auto">
                         Create specialized QR codes for every need. Completely free and no signup required.
                     </p>
diff --git a/src/components/marketing/Hero.tsx b/src/components/marketing/Hero.tsx
index e9ae338..be6d085 100644
--- a/src/components/marketing/Hero.tsx
+++ b/src/components/marketing/Hero.tsx
@@ -9,7 +9,6 @@ import { motion } from 'framer-motion';
 import { Globe, User, MapPin, Phone, CheckCircle2, ArrowRight, FileText, Ticket, Smartphone, Star } from 'lucide-react';
 import { useState, useEffect } from 'react';
 
-// Sub-component for the flipping effect
 // Sub-component for the flipping effect
 const FlippingCard = ({ front, back, delay }: { front: any, back: any, delay: number }) => {
   const [isFlipped, setIsFlipped] = useState(false);
@@ -200,20 +199,6 @@ export const Hero: React.FC<HeroProps> = ({ t }) => {
                 ))}
               </div>
             </div>
-
-            {/* Floating Badge */}
-            <motion.div
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ delay: 0.8 }}
-              className="absolute -top-4 -right-4 bg-gradient-to-r from-success-500 to-emerald-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg shadow-success-500/30 flex items-center gap-2"
-            >
-              <span className="relative flex h-2 w-2">
-                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
-                <span className="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
-              </span>
-              {t.hero.engagement_badge}
-            </motion.div>
           </div>
         </div>
       </div>