From a3be926f6fe861c8f1a71236e8a9edc480fb21d0 Mon Sep 17 00:00:00 2001
From: Zaid Marzguioui <zaid.marzguioui@outlook.de>
Date: Thu, 2 Apr 2026 19:09:46 +0200
Subject: [PATCH] fix(carousel): replace emoji lock with Lucide icon, widen
 container, fix tab overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace 🔒 emoji with Lucide <Lock> icon (3x3, muted) for cleaner browser chrome
- Widen carousel from max-w-4xl to max-w-5xl so tabs have room
- Bottom tabs: shrink-0 + scrollbar-none + centered flex layout
- Labels show on lg+ screens, icons-only on smaller screens
- Slightly larger tab hit targets (px-3 py-1.5, text-[11px])
---
 .../_components/feature-carousel.tsx            | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/[locale]/(marketing)/_components/feature-carousel.tsx b/apps/web/app/[locale]/(marketing)/_components/feature-carousel.tsx
index eefa86011..ddfe84afc 100644
--- a/apps/web/app/[locale]/(marketing)/_components/feature-carousel.tsx
+++ b/apps/web/app/[locale]/(marketing)/_components/feature-carousel.tsx
@@ -11,6 +11,7 @@ import {
   Globe,
   GraduationCap,
   LayoutDashboard,
+  Lock,
   Mail,
   Users,
   Wallet,
@@ -471,7 +472,7 @@ export function FeatureCarousel() {
   }, [next]);
 
   return (
-    <div className="relative mx-auto w-full max-w-4xl">
+    <div className="relative mx-auto w-full max-w-5xl">
       <div
         className="bg-primary/10 absolute inset-0 -z-10 mx-auto max-w-3xl rounded-full blur-3xl"
         aria-hidden="true"
@@ -486,7 +487,7 @@ export function FeatureCarousel() {
             <div className="h-3 w-3 rounded-full bg-green-400" />
           </div>
           <div className="bg-background mx-auto flex items-center gap-1.5 rounded-md px-4 py-1 text-xs">
-            <span className="text-muted-foreground/50">🔒</span>
+            <Lock className="text-muted-foreground/40 h-3 w-3" />
             <span className="text-muted-foreground">
               myeasycms.de/home/mein-verein
             </span>
@@ -538,31 +539,31 @@ export function FeatureCarousel() {
 
         {/* Bottom tabs */}
         <div className="border-t">
-          <div className="flex items-center justify-between px-4 py-2">
+          <div className="flex items-center gap-2 px-3 py-2">
             <Button
               variant="ghost"
               size="icon"
               onClick={prev}
-              className="h-7 w-7"
+              className="h-7 w-7 shrink-0"
               aria-label="Vorheriges Feature"
             >
               <ChevronLeft className="h-4 w-4" />
             </Button>
 
-            <div className="flex gap-1 overflow-x-auto">
+            <div className="scrollbar-none flex min-w-0 flex-1 items-center justify-center gap-1.5 overflow-x-auto">
               {SLIDES.map((s, i) => (
                 <button
                   key={s.id}
                   onClick={() => setActive(i)}
                   className={cn(
-                    'flex items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-1 text-[10px] transition-colors',
+                    'flex shrink-0 items-center gap-1 rounded-full px-3 py-1.5 text-[11px] transition-colors',
                     i === active
                       ? 'bg-primary text-primary-foreground font-semibold'
                       : 'text-muted-foreground hover:bg-muted',
                   )}
                 >
                   {s.icon}
-                  <span className="hidden sm:inline">{s.label}</span>
+                  <span className="hidden lg:inline">{s.label}</span>
                 </button>
               ))}
             </div>
@@ -571,7 +572,7 @@ export function FeatureCarousel() {
               variant="ghost"
               size="icon"
               onClick={next}
-              className="h-7 w-7"
+              className="h-7 w-7 shrink-0"
               aria-label="Nächstes Feature"
             >
               <ChevronRight className="h-4 w-4" />