You need to improve the design and style, i want a modern and improved look

index.html

@@ -22,82 +22,138 @@
         }
     </script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
         body {
-            font-family: 'Poppins', sans-serif;
+            font-family: 'Inter', sans-serif;
         }
         .gradient-bg {
-            background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
         .progress-bar {
-            height: 8px;
-            border-radius: 4px;
+            height: 12px;
+            border-radius: 10px;
             background-color: #E5E7EB;
+            overflow: hidden;
+            position: relative;
         }
         .progress-fill {
             height: 100%;
-            border-radius: 4px;
-            background-color: #4F46E5;
-            transition: width 0.5s ease-in-out;
+            border-radius: 10px;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+        }
+        .progress-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            animation: shimmer 2s infinite;
+        }
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
         }
         .floating-card {
-            animation: float 6s ease-in-out infinite;
+            animation: float 8s ease-in-out infinite;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
         @keyframes float {
-            0%, 100% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
+            0%, 100% { transform: translateY(0px) rotate(1deg); }
+            50% { transform: translateY(-15px) rotate(-1deg); }
         }
         .fade-in {
-            animation: fadeIn 1s ease-in;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
+            opacity: 0;
+            transform: translateY(30px);
         }
         .hover-lift {
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        .hover-lift::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+            transition: left 0.5s;
+        }
+        .hover-lift:hover::before {
+            left: 100%;
         }
         .hover-lift:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
         .pulse-ring {
-            animation: pulse 2s infinite;
+            position: relative;
+        }
+        .pulse-ring::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: inherit;
+            animation: pulse-ring 2s infinite;
         }
-        @keyframes pulse {
-            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
-            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
-            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
+        @keyframes pulse-ring {
+            0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(102, 126, 234, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
+        }
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .card-gradient {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .text-gradient {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- Navigation -->
-    <nav class="bg-white shadow-sm sticky top-0 z-50 fade-in">
+    <nav class="bg-white/95 backdrop-blur-md shadow-lg sticky top-0 z-50 fade-in border-b border-gray-200/50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-16">
+            <div class="flex justify-between h-20">
                 <div class="flex items-center">
                     <div class="flex-shrink-0 flex items-center">
-                        <i data-feather="award" class="text-primary-500 h-8 w-8"></i>
-                        <span class="ml-2 text-xl font-bold text-gray-900">Shouts</span>
+                        <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center">
+                            <i data-feather="award" class="text-white h-5 w-5"></i>
+                        </div>
+                        <span class="ml-3 text-2xl font-black text-gray-900 tracking-tight">Shouts</span>
                     </div>
-                    <div class="hidden md:ml-10 md:flex md:space-x-8">
-                        <a href="#" class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                    <div class="hidden md:ml-12 md:flex md:space-x-10">
+                        <a href="#" class="text-gray-900 font-semibold inline-flex items-center px-1 pt-1 border-b-2 border-purple-500 text-base">
                             Home
                         </a>
-                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-base transition-all duration-300">
                             Venues
                         </a>
-                        <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                        <a href="#" class="text-gray-600 hover:text-gray-900 font-medium inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-base transition-all duration-300">
                             Rewards
                         </a>
                     </div>
                 </div>
-                <div class="flex items-center space-x-4">
-                    <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-300 hover:scale-105">
+                <div class="flex items-center space-x-6">
+                    <button class="px-6 py-3 border border-transparent text-base font-semibold rounded-xl text-white bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl">
                         Sign In
                     </button>
-                    <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-primary-500 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-300 hover:scale-105">
+                    <button class="px-6 py-3 border-2 border-purple-500 text-base font-semibold rounded-xl text-purple-500 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-all duration-300 hover:scale-105">
                         Sign Up
                     </button>
                 </div>
@@ -105,182 +161,283 @@
         </div>
     </nav>
     <!-- Hero Section -->
-    <div class="gradient-bg text-white">
-        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24">
-            <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
+    <div class="gradient-bg text-white relative overflow-hidden">
+        <div class="absolute inset-0 bg-black/10"></div>
+        <div class="max-w-7xl mx-auto py-20 px-4 sm:px-6 lg:px-8 lg:py-32 relative">
+            <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
                 <div class="mb-12 lg:mb-0 fade-in">
-                    <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
-                        Drink More, Save More
+                    <h1 class="text-5xl font-black tracking-tight sm:text-6xl lg:text-7xl leading-tight">
+                        Drink More,<br>
+                        <span class="text-gradient">Save More</span>
                     </h1>
-                    <p class="mt-5 text-xl text-white/90">
-                        Earn discounts at your favorite bars with every shout. The more you drink, the more you save!
+                    <p class="mt-6 text-xl text-white/90 leading-relaxed">
+                        Earn exclusive discounts at your favorite bars with every shout. The more you drink, the more you save on your next round!
                     </p>
-                    <div class="mt-8 flex flex-col sm:flex-row gap-4">
-                        <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-primary-500 bg-white hover:bg-gray-50 transition-all duration-300 hover:scale-105 pulse-ring">
+                    <div class="mt-10 flex flex-col sm:flex-row gap-6">
+                        <button class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-bold rounded-2xl text-purple-600 bg-white hover:bg-gray-50 transition-all duration-300 hover:scale-105 pulse-ring shadow-2xl">
                             Get Started
-                            <i data-feather="arrow-right" class="ml-2"></i>
+                            <i data-feather="arrow-right" class="ml-3"></i>
                         </button>
-                        <button class="inline-flex items-center px-6 py-3 border border-white text-base font-medium rounded-md text-white bg-transparent hover:bg-white/10 transition-all duration-300">
-                            Learn More
+                        <button class="inline-flex items-center px-8 py-4 border-2 border-white text-lg font-bold rounded-2xl text-white bg-transparent hover:bg-white/10 transition-all duration-300 hover:scale-105 glass-effect">
+                            <i data-feather="play-circle" class="mr-3"></i>
+                            Watch Demo
                         </button>
                     </div>
+                    <div class="mt-12 flex items-center space-x-8">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
+                            <span class="text-white/80">Real-time Rewards</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-3 h-3 bg-blue-400 rounded-full animate-pulse"></div>
+                            <span class="text-white/80">500+ Partner Venues</span>
+                        </div>
+                    </div>
                 </div>
                 <div class="relative fade-in">
-                    <div class="bg-white rounded-2xl shadow-xl overflow-hidden p-6 floating-card">
-                        <div class="flex justify-between items-center mb-4">
-                            <h3 class="text-lg font-medium text-gray-900">Your Current Tier</h3>
-                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-primary-100 text-primary-800 animate-pulse">
-                                Bronze (5%)
+                    <div class="bg-white/10 backdrop-blur-lg rounded-3xl shadow-2xl overflow-hidden p-8 floating-card glass-effect border border-white/20">
+                        <div class="flex justify-between items-center mb-6">
+                            <h3 class="text-xl font-bold text-white">Your Progress</h3>
+                            <span class="px-4 py-2 text-sm font-bold rounded-full bg-white/20 text-white backdrop-blur-sm animate-pulse">
+                                Bronze Tier (5%)
                             </span>
                         </div>
-                        <div class="progress-bar mb-2">
+                        <div class="progress-bar mb-3">
                             <div class="progress-fill" style="width: 35%"></div>
                         </div>
-                        <p class="text-sm text-gray-500 mb-6">35/50 shouts to next tier</p>
+                        <p class="text-white/80 mb-8 text-center">35/50 shouts to Silver Tier</p>
                         <div class="space-y-4">
-                            <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded-lg transition-colors duration-200">
-                                <span class="text-sm font-medium text-gray-700">0-49 shouts</span>
-                                <span class="text-sm text-gray-500">5% discount</span>
+                            <div class="flex justify-between items-center p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-all duration-300 cursor-pointer group">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-3 h-3 bg-gray-400 rounded-full group-hover:bg-yellow-400 transition-colors"></div>
+                                    <span class="font-medium text-white">Bronze (0-49)</span>
+                                </div>
+                                <span class="text-white/80">5% discount</span>
                             </div>
-                            <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded-lg transition-colors duration-200">
-                                <span class="text-sm font-medium text-gray-700">50-99 shouts</span>
-                                <span class="text-sm text-gray-500">10% discount</span>
+                            <div class="flex justify-between items-center p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-all duration-300 cursor-pointer group">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-3 h-3 bg-gray-300 rounded-full group-hover:bg-gray-400 transition-colors"></div>
+                                    <span class="font-medium text-white">Silver (50-99)</span>
+                                </div>
+                                <span class="text-white/80">10% discount</span>
                             </div>
-                            <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded-lg transition-colors duration-200">
-                                <span class="text-sm font-medium text-gray-700">100-149 shouts</span>
-                                <span class="text-sm text-gray-500">18% discount</span>
+                            <div class="flex justify-between items-center p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-all duration-300 cursor-pointer group">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-3 h-3 bg-yellow-400 rounded-full group-hover:bg-yellow-500 transition-colors"></div>
+                                    <span class="font-medium text-white">Gold (100-149)</span>
+                                </div>
+                                <span class="text-white/80">18% discount</span>
                             </div>
-                            <div class="flex justify-between items-center hover:bg-gray-50 p-2 rounded-lg transition-colors duration-200">
-                                <span class="text-sm font-medium text-gray-700">150-200 shouts</span>
-                                <span class="text-sm text-gray-500">25% discount</span>
+                            <div class="flex justify-between items-center p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-all duration-300 cursor-pointer group">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-3 h-3 bg-purple-500 rounded-full group-hover:bg-purple-600 transition-colors"></div>
+                                    <span class="font-medium text-white">Platinum (150+)</span>
+                                </div>
+                                <span class="text-white/80">25% discount</span>
                             </div>
                         </div>
-</div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
     <!-- How It Works -->
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-        <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-12">
-            How It Works
-        </h2>
-        <div class="grid md:grid-cols-3 gap-8">
-            <div class="bg-white p-6 rounded-lg shadow-md text-center hover-lift fade-in" style="animation-delay: 0.1s">
-            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-primary-100 mb-4 transition-all duration-300 hover:scale-110">
-                    <i data-feather="map-pin" class="text-primary-500 h-8 w-8"></i>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+        <div class="text-center mb-16">
+            <h2 class="text-4xl font-black text-gray-900 mb-4">
+                How It <span class="text-gradient">Works</span>
+            </h2>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+                Simple steps to start saving on your drinks and unlock amazing rewards
+            </p>
+        </div>
+        <div class="grid md:grid-cols-3 gap-12">
+            <div class="bg-white p-8 rounded-3xl shadow-xl text-center hover-lift fade-in group" style="animation-delay: 0.1s">
+                <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-2xl bg-gradient-to-r from-purple-500 to-indigo-600 mb-6 transition-all duration-300 group-hover:scale-110 group-hover:rotate-12">
+                    <i data-feather="map-pin" class="text-white h-10 w-10"></i>
+                </div>
+                <div class="mb-4">
+                    <div class="w-8 h-8 bg-purple-500 text-white rounded-full flex items-center justify-center text-sm font-bold mx-auto mb-3">1</div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Find Nearby Venues</h3>
                 </div>
-                <h3 class="text-lg font-medium text-gray-900 mb-2">1. Find Nearby Venues</h3>
-                <p class="text-gray-500">
-                    Discover participating bars and pubs near you using our location-based search.
+                <p class="text-gray-600 leading-relaxed">
+                    Discover participating bars and pubs near you using our intelligent location-based search with real-time availability.
                 </p>
             </div>
-            <div class="bg-white p-6 rounded-lg shadow-md text-center hover-lift fade-in" style="animation-delay: 0.2s">
-                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-primary-100 mb-4 transition-all duration-300 hover:scale-110">
-                    <i data-feather="camera" class="text-primary-500 h-8 w-8"></i>
+            <div class="bg-white p-8 rounded-3xl shadow-xl text-center hover-lift fade-in group" style="animation-delay: 0.2s">
+                <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-2xl bg-gradient-to-r from-purple-500 to-indigo-600 mb-6 transition-all duration-300 group-hover:scale-110 group-hover:rotate-12">
+                    <i data-feather="camera" class="text-white h-10 w-10"></i>
+                </div>
+                <div class="mb-4">
+                    <div class="w-8 h-8 bg-purple-500 text-white rounded-full flex items-center justify-center text-sm font-bold mx-auto mb-3">2</div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Scan QR Code</h3>
                 </div>
-                <h3 class="text-lg font-medium text-gray-900 mb-2">2. Scan QR Code</h3>
-                <p class="text-gray-500">
-                    Scan the QR code at the venue to check in and start earning rewards.
+                <p class="text-gray-600 leading-relaxed">
+                    Scan the unique QR code at the venue to automatically check in and start tracking your shouts instantly.
                 </p>
             </div>
-            <div class="bg-white p-6 rounded-lg shadow-md text-center hover-lift fade-in" style="animation-delay: 0.3s">
-                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-primary-100 mb-4 transition-all duration-300 hover:scale-110">
-                    <i data-feather="award" class="text-primary-500 h-8 w-8"></i>
+            <div class="bg-white p-8 rounded-3xl shadow-xl text-center hover-lift fade-in group" style="animation-delay: 0.3s">
+                <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-2xl bg-gradient-to-r from-purple-500 to-indigo-600 mb-6 transition-all duration-300 group-hover:scale-110 group-hover:rotate-12">
+                    <i data-feather="award" class="text-white h-10 w-10"></i>
                 </div>
-                <h3 class="text-lg font-medium text-gray-900 mb-2">3. Earn Discounts</h3>
-                <p class="text-gray-500">
-                    Unlock increasing discounts as you drink more at each venue.
+                <div class="mb-4">
+                    <div class="w-8 h-8 bg-purple-500 text-white rounded-full flex items-center justify-center text-sm font-bold mx-auto mb-3">3</div>
+                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Earn Rewards</h3>
+                </div>
+                <p class="text-gray-600 leading-relaxed">
+                    Unlock increasing discounts and exclusive perks as you reach new tiers at each venue you visit.
                 </p>
             </div>
         </div>
     </div>
     <!-- Featured Venues -->
-    <div class="bg-gray-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-            <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-12">
-                Popular Venues Near You
-            </h2>
+    <div class="bg-gradient-to-br from-gray-50 to-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-black text-gray-900 mb-4">
+                    Popular <span class="text-gradient">Venues</span> Near You
+                </h2>
+                <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+                    Discover the hottest spots in your area and start earning rewards today
+                </p>
+            </div>
             <div class="grid md:grid-cols-3 gap-8">
-                <div class="bg-white overflow-hidden shadow rounded-lg hover-lift fade-in" style="animation-delay: 0.1s">
-                    <div class="h-48 bg-cover bg-center transition-transform duration-500 hover:scale-105" style="background-image: url('http://static.photos/food/640x360/1')"></div>
+                <div class="bg-white rounded-3xl shadow-xl overflow-hidden hover-lift fade-in group" style="animation-delay: 0.1s">
+                    <div class="relative h-56 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style="background-image: url('http://static.photos/food/640x360/1')">
+                        <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-all duration-500"></div>
+                        <div class="absolute top-4 right-4">
+                            <span class="px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-sm font-bold text-gray-900">0.3 miles</span>
+                        </div>
+                    </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-medium text-gray-900 mb-2">The Tipsy Tavern</h3>
-                        <p class="text-gray-500 mb-4 flex items-center">
-                        <i data-feather="map-pin" class="h-4 w-4 mr-1"></i>
-                        0.3 miles away
-                    </p>
-                    <div class="flex justify-between items-center mb-2">
-                            <span class="text-sm font-medium text-gray-700">Current Tier: 10%</span>
-                            <span class="text-sm text-gray-500">42/100 shouts</span>
+                        <div class="flex items-center justify-between mb-3">
+                            <h3 class="text-2xl font-bold text-gray-900">The Tipsy Tavern</h3>
+                            <div class="flex items-center space-x-1 text-amber-500">
+                                <i data-feather="star" class="h-4 w-4 fill-current"></i>
+                                <span class="text-sm font-semibold">4.8</span>
+                            </div>
                         </div>
-                        <div class="progress-bar mt-2">
-                            <div class="progress-fill" style="width: 42%"></div>
+                        <p class="text-gray-500 mb-6 flex items-center">
+                            <i data-feather="map-pin" class="h-4 w-4 mr-2 text-purple-500"></i>
+                            Downtown District
+                        </p>
+                        <div class="space-y-4">
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm font-semibold text-gray-700">Current Tier: Silver</span>
+                                <span class="text-sm text-gray-500">42/100 shouts</span>
+                            </div>
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width: 42%"></div>
+                            </div>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-500">10% discount</span>
+                                <span class="text-purple-600 font-semibold">Next: 18%</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="bg-white overflow-hidden shadow rounded-lg hover-lift fade-in" style="animation-delay: 0.2s">
-                    <div class="h-48 bg-cover bg-center transition-transform duration-500 hover:scale-105" style="background-image: url('http://static.photos/food/640x360/2')"></div>
+                <div class="bg-white rounded-3xl shadow-xl overflow-hidden hover-lift fade-in group" style="animation-delay: 0.2s">
+                    <div class="relative h-56 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style="background-image: url('http://static.photos/food/640x360/2')">
+                        <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-all duration-500"></div>
+                        <div class="absolute top-4 right-4">
+                            <span class="px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-sm font-bold text-gray-900">0.7 miles</span>
+                        </div>
+                    </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-medium text-gray-900 mb-2">Hop Haven</h3>
-                        <p class="text-gray-500 mb-4 flex items-center">
-                        <i data-feather="map-pin" class="h-4 w-4 mr-1"></i>
-                        0.7 miles away
-                    </p>
-                    <div class="flex justify-between items-center mb-2">
-                            <span class="text-sm font-medium text-gray-700">Current Tier: 5%</span>
-                            <span class="text-sm text-gray-500">15/50 shouts</span>
+                        <div class="flex items-center justify-between mb-3">
+                            <h3 class="text-2xl font-bold text-gray-900">Hop Haven</h3>
+                            <div class="flex items-center space-x-1 text-amber-500">
+                                <i data-feather="star" class="h-4 w-4 fill-current"></i>
+                                <span class="text-sm font-semibold">4.6</span>
+                            </div>
                         </div>
-                        <div class="progress-bar mt-2">
-                            <div class="progress-fill" style="width: 30%"></div>
+                        <p class="text-gray-500 mb-6 flex items-center">
+                            <i data-feather="map-pin" class="h-4 w-4 mr-2 text-purple-500"></i>
+                            Arts District
+                        </p>
+                        <div class="space-y-4">
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm font-semibold text-gray-700">Current Tier: Bronze</span>
+                                <span class="text-sm text-gray-500">15/50 shouts</span>
+                            </div>
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width: 30%"></div>
+                            </div>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-500">5% discount</span>
+                                <span class="text-purple-600 font-semibold">Next: 10%</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="bg-white overflow-hidden shadow rounded-lg hover-lift fade-in" style="animation-delay: 0.3s">
-                    <div class="h-48 bg-cover bg-center transition-transform duration-500 hover:scale-105" style="background-image: url('http://static.photos/food/640x360/3')"></div>
+                <div class="bg-white rounded-3xl shadow-xl overflow-hidden hover-lift fade-in group" style="animation-delay: 0.3s">
+                    <div class="relative h-56 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style="background-image: url('http://static.photos/food/640x360/3')">
+                        <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-all duration-500"></div>
+                        <div class="absolute top-4 right-4">
+                            <span class="px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-sm font-bold text-gray-900">1.1 miles</span>
+                        </div>
+                    </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-medium text-gray-900 mb-2">Barley & Vine</h3>
-                        <p class="text-gray-500 mb-4 flex items-center">
-                        <i data-feather="map-pin" class="h-4 w-4 mr-1"></i>
-                        1.1 miles away
-                    </p>
-                    <div class="flex justify-between items-center mb-2">
-                            <span class="text-sm font-medium text-gray-700">Current Tier: 18%</span>
-                            <span class="text-sm text-gray-500">127/150 shouts</span>
+                        <div class="flex items-center justify-between mb-3">
+                            <h3 class="text-2xl font-bold text-gray-900">Barley & Vine</h3>
+                            <div class="flex items-center space-x-1 text-amber-500">
+                                <i data-feather="star" class="h-4 w-4 fill-current"></i>
+                                <span class="text-sm font-semibold">4.9</span>
+                            </div>
                         </div>
-                        <div class="progress-bar mt-2">
-                            <div class="progress-fill" style="width: 85%"></div>
+                        <p class="text-gray-500 mb-6 flex items-center">
+                            <i data-feather="map-pin" class="h-4 w-4 mr-2 text-purple-500"></i>
+                            Waterfront Area
+                        </p>
+                        <div class="space-y-4">
+                            <div class="flex justify-between items-center">
+                                <span class="text-sm font-semibold text-gray-700">Current Tier: Gold</span>
+                                <span class="text-sm text-gray-500">127/150 shouts</span>
+                            </div>
+                            <div class="progress-bar">
+                                <div class="progress-fill" style="width: 85%"></div>
+                            </div>
+                            <div class="flex justify-between text-sm">
+                                <span class="text-gray-500">18% discount</span>
+                                <span class="text-purple-600 font-semibold">Next: 25%</span>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="text-center mt-8">
-                <button class="inline-flex items-center px-6 py-3 border border-primary-500 text-base font-medium rounded-md text-primary-500 bg-white hover:bg-primary-500 hover:text-white transition-all duration-300">
-                    View All Venues
-                    <i data-feather="chevron-right" class="ml-2"></i>
+            <div class="text-center mt-12">
+                <button class="inline-flex items-center px-8 py-4 border-2 border-purple-500 text-lg font-bold rounded-2xl text-purple-500 bg-white hover:bg-purple-500 hover:text-white transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl">
+                    Explore All Venues
+                    <i data-feather="arrow-right" class="ml-3"></i>
                 </button>
             </div>
         </div>
     </div>
     <!-- CTA Section -->
-    <div class="bg-primary-500 text-white">
-        <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8 text-center">
-            <h2 class="text-3xl font-extrabold mb-6 fade-in">Ready to Start Saving?</h2>
-                <p class="text-xl mb-8 text-white/90 fade-in">Join thousands of happy drinkers earning rewards at their favorite bars.</p>
-        <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-primary-500 bg-white hover:bg-gray-50 transition-all duration-300 hover:scale-105">
+    <div class="bg-gradient-to-r from-purple-600 to-indigo-700 text-white relative overflow-hidden">
+        <div class="absolute inset-0 bg-black/10"></div>
+        <div class="max-w-7xl mx-auto py-20 px-4 sm:px-6 lg:px-8 text-center relative">
+            <h2 class="text-4xl font-black mb-6 fade-in">Ready to Start <span class="text-white">Saving?</span></h2>
+            <p class="text-xl mb-12 text-white/90 fade-in max-w-2xl mx-auto leading-relaxed">
+                Join thousands of happy drinkers who are already earning exclusive rewards and saving big at their favorite bars.
+            </p>
+            <button class="inline-flex items-center px-10 py-5 border-2 border-white text-xl font-bold rounded-2xl text-purple-600 bg-white hover:bg-transparent hover:text-white transition-all duration-300 hover:scale-105 shadow-2xl pulse-ring">
                 Sign Up Now
-                <i data-feather="arrow-right" class="ml-2"></i>
+                <i data-feather="arrow-right" class="ml-4"></i>
             </button>
-            <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-2xl mx-auto">
-                <div class="text-center">
-                    <div class="text-2xl font-bold">10K+</div>
-                <div class="text-center text-white/80">Active Users</div>
-                <div class="text-center">
-                    <div class="text-2xl font-bold">500+</div>
-                <div class="text-center text-white/80">Partner Venues</div>
-                <div class="text-center">
-                    <div class="text-2xl font-bold">$1M+</div>
-                <div class="text-center text-white/80">Total Saved</div>
+            <div class="mt-16 grid grid-cols-2 md:grid-cols-3 gap-8 max-w-3xl mx-auto">
+                <div class="text-center fade-in" style="animation-delay: 0.1s">
+                    <div class="text-4xl font-black mb-2">10K+</div>
+                    <div class="text-white/80 text-lg">Active Users</div>
+                </div>
+                <div class="text-center fade-in" style="animation-delay: 0.2s">
+                    <div class="text-4xl font-black mb-2">500+</div>
+                    <div class="text-white/80 text-lg">Partner Venues</div>
+                </div>
+                <div class="text-center fade-in" style="animation-delay: 0.3s">
+                    <div class="text-4xl font-black mb-2">$1M+</div>
+                    <div class="text-white/80 text-lg">Total Saved</div>
+                </div>
             </div>
         </div>
     </div>