🐳 29/04 - 12:46 - for the two national competition make the desgin better because it a big deal liuke it should be wayyy better then the nyc city wide competition\

competition-results.html

@@ -106,14 +106,9 @@
     <section class="relative z-10 py-20 bg-black bg-opacity-90">
         <div class="container mx-auto px-6">
             
-            <!-- 2024-2025 Season -->
-            <div class="mb-20">
-                <h2 class="text-4xl font-bold text-center mb-12 font-['Bebas+Neue'] tracking-wider">
-                    <span class="text-yellow-500">2025-2026</span> <span class="text-white">SEASON</span>
-                </h2>
-                
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-                    <!-- Award 5 -->
+            <!-- Company Branding Competition -->
+            <div class="mb-12">
+                <div class="max-w-md mx-auto">
                     <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl p-8 award-card flex flex-col items-center justify-center text-center">
                         <div class="mb-4">
                             <i data-lucide="target" class="w-16 h-16 text-red-500 trophy-glow"></i>
@@ -125,38 +120,204 @@
                             <p class="text-red-500 text-sm mt-2">120+ Teams</p>
                         </div>
                     </div>
+                </div>
+            </div>
 
-                    <!-- National Business Competition -->
-                    <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl p-8 award-card flex flex-col items-center justify-center text-center relative overflow-hidden">
-                        <div class="absolute inset-0 bg-gradient-to-br from-yellow-600/10 via-transparent to-yellow-600/10"></div>
-                        <div class="relative z-10">
-                            <div class="mb-4">
-                                <i data-lucide="trophy" class="w-16 h-16 text-yellow-400 trophy-glow"></i>
-                            </div>
-                            <div>
-                                <h3 class="text-3xl font-black mb-1 text-yellow-400">#8</h3>
-                                <p class="text-lg font-semibold mb-1">National Business Plan Competition</p>
-                                <p class="text-gray-400 text-sm">National Rankings</p>
-                                <p class="text-yellow-400 text-sm mt-2 font-bold">Out of 600 Firms</p>
+            <!-- NATIONAL COMPETITIONS - The Big Deal -->
+            <div class="mb-20 relative">
+                <!-- Triple-layer animated background glow -->
+                <div class="absolute inset-0 bg-gradient-to-r from-yellow-500/30 via-amber-500/20 to-yellow-500/30 rounded-3xl blur-3xl animate-pulse"></div>
+                <div class="absolute inset-4 bg-gradient-to-br from-yellow-600/15 via-transparent to-red-600/15 rounded-3xl blur-2xl animate-pulse" style="animation-delay: 0.5s;"></div>
+                <div class="absolute inset-8 bg-gradient-to-t from-amber-400/10 via-yellow-500/10 to-orange-400/10 rounded-3xl blur-xl"></div>
+                
+                <div class="relative z-10">
+                    <!-- Grand Header -->
+                    <div class="text-center mb-16">
+                        <div class="inline-flex items-center justify-center mb-6">
+                            <div class="relative">
+                                <i data-lucide="flame" class="w-14 h-14 text-yellow-400 absolute -left-16 -top-1 animate-pulse"></i>
+                                <i data-lucide="crown" class="w-20 h-20 text-yellow-400 trophy-glow"></i>
+                                <i data-lucide="flame" class="w-14 h-14 text-yellow-400 absolute -right-16 -top-1 animate-pulse"></i>
                             </div>
                         </div>
+                        <h2 class="text-5xl md:text-7xl font-black font-['Bebas+Neue'] tracking-wider mb-4">
+                            <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 via-yellow-400 to-amber-500 animate-pulse">NATIONAL</span>
+                        </h2>
+                        <h3 class="text-3xl md:text-5xl font-bold font-['Bebas+Neue'] tracking-wider mb-6">
+                            <span class="text-white">COMPETITION</span> <span class="text-red-500">RESULTS</span>
+                        </h3>
+                        <div class="flex items-center justify-center gap-3 mb-4">
+                            <div class="h-px w-16 bg-gradient-to-r from-transparent to-yellow-500"></div>
+                            <span class="text-yellow-400 font-bold uppercase tracking-[0.3em] text-sm">2025-2026 Season</span>
+                            <div class="h-px w-16 bg-gradient-to-l from-transparent to-yellow-500"></div>
+                        </div>
+                        <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+                            Competing against <span class="text-yellow-400 font-bold text-2xl">600 firms</span> nationwide — these are our greatest achievements yet
+                        </p>
                     </div>
 
-                    <!-- National Finance Competition -->
-                    <div class="bg-gradient-to-br from-black to-gray-900 rounded-xl p-8 award-card flex flex-col items-center justify-center text-center relative overflow-hidden">
-                        <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 via-transparent to-red-500/10"></div>
-                        <div class="relative z-10">
-                            <div class="mb-4">
-                                <i data-lucide="trending-up" class="w-16 h-16 text-yellow-500 trophy-glow"></i>
+                    <!-- Two Grand National Result Cards -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-10 max-w-5xl mx-auto">
+                        
+                        <!-- National Business Plan Competition - #8 -->
+                        <div class="group relative">
+                            <!-- Animated outer glow ring -->
+                            <div class="absolute -inset-2 bg-gradient-to-br from-yellow-400 via-amber-500 to-yellow-600 rounded-3xl blur-lg opacity-60 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
+                            
+                            <div class="relative bg-gradient-to-br from-gray-950 via-black to-gray-950 rounded-3xl overflow-hidden border-2 border-yellow-400/50 group-hover:border-yellow-300/80 transition-all duration-500">
+                                <!-- Inner shimmer effect -->
+                                <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 via-transparent to-amber-500/5"></div>
+                                <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-yellow-400 to-transparent"></div>
+                                <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-yellow-400 to-transparent"></div>
+                                
+                                <!-- Decorative corner accents -->
+                                <div class="absolute top-0 left-0 w-20 h-20 border-t-2 border-l-2 border-yellow-400/40 rounded-tl-3xl"></div>
+                                <div class="absolute top-0 right-0 w-20 h-20 border-t-2 border-r-2 border-yellow-400/40 rounded-tr-3xl"></div>
+                                <div class="absolute bottom-0 left-0 w-20 h-20 border-b-2 border-l-2 border-yellow-400/40 rounded-bl-3xl"></div>
+                                <div class="absolute bottom-0 right-0 w-20 h-20 border-b-2 border-r-2 border-yellow-400/40 rounded-br-3xl"></div>
+
+                                <div class="relative z-10 p-10 flex flex-col items-center text-center">
+                                    <!-- "NATIONAL" badge -->
+                                    <div class="inline-flex items-center gap-2 bg-yellow-500/10 border border-yellow-500/30 rounded-full px-5 py-2 mb-8">
+                                        <i data-lucide="flag" class="w-4 h-4 text-yellow-400"></i>
+                                        <span class="text-yellow-400 font-bold text-sm uppercase tracking-[0.2em]">National Level</span>
+                                        <i data-lucide="flag" class="w-4 h-4 text-yellow-400"></i>
+                                    </div>
+
+                                    <!-- Trophy icon -->
+                                    <div class="relative mb-8">
+                                        <div class="absolute inset-0 bg-yellow-400/20 blur-2xl rounded-full animate-pulse"></div>
+                                        <div class="relative bg-gradient-to-br from-yellow-400 to-amber-600 rounded-full p-5 shadow-2xl shadow-yellow-500/40 group-hover:shadow-yellow-400/60 transition-shadow duration-500">
+                                            <i data-lucide="trophy" class="w-14 h-14 text-black"></i>
+                                        </div>
+                                    </div>
+
+                                    <!-- Rank Display -->
+                                    <div class="relative mb-6">
+                                        <div class="absolute -inset-4 bg-gradient-to-r from-yellow-400/20 via-amber-300/30 to-yellow-400/20 blur-xl rounded-full"></div>
+                                        <div class="relative">
+                                            <span class="text-8xl md:text-9xl font-black text-transparent bg-clip-text bg-gradient-to-b from-yellow-300 via-yellow-400 to-amber-600 drop-shadow-2xl">#8</span>
+                                        </div>
+                                    </div>
+
+                                    <h3 class="text-2xl md:text-3xl font-bold text-white mb-3 tracking-wide">
+                                        National Business Plan<br>Competition
+                                    </h3>
+
+                                    <!-- Divider -->
+                                    <div class="w-24 h-0.5 bg-gradient-to-r from-transparent via-yellow-400 to-transparent my-5"></div>
+
+                                    <!-- Out of 600 badge -->
+                                    <div class="relative mb-6">
+                                        <div class="absolute -inset-1 bg-gradient-to-r from-yellow-400 to-amber-500 blur-md opacity-50 rounded-xl"></div>
+                                        <div class="relative bg-gradient-to-r from-yellow-500/20 to-amber-500/20 border border-yellow-400/50 rounded-xl px-8 py-4">
+                                            <span class="text-yellow-300 text-sm font-bold uppercase tracking-widest block">Out of</span>
+                                            <span class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-amber-400">600</span>
+                                            <span class="text-yellow-300 text-sm font-bold uppercase tracking-widest block">Firms Nationwide</span>
+                                        </div>
+                                    </div>
+
+                                    <!-- Top % indicator -->
+                                    <div class="w-full bg-gray-800/50 rounded-full h-3 mb-3 overflow-hidden border border-yellow-500/20">
+                                        <div class="h-full bg-gradient-to-r from-yellow-400 via-amber-400 to-yellow-500 rounded-full shadow-lg shadow-yellow-500/30" style="width: 98.7%"></div>
+                                    </div>
+                                    <p class="text-yellow-400 font-bold text-sm">Top 1.3% in the Nation</p>
+
+                                    <!-- Sparkle accents -->
+                                    <div class="absolute top-6 right-6 text-yellow-400/30 animate-ping">
+                                        <i data-lucide="sparkles" class="w-5 h-5"></i>
+                                    </div>
+                                    <div class="absolute bottom-6 left-6 text-yellow-400/30 animate-ping" style="animation-delay: 1s;">
+                                        <i data-lucide="sparkles" class="w-5 h-5"></i>
+                                    </div>
+                                </div>
                             </div>
-                            <div>
-                                <h3 class="text-3xl font-black mb-1 text-yellow-500">Top 36</h3>
-                                <p class="text-lg font-semibold mb-1">National Finance Competition</p>
-                                <p class="text-gray-400 text-sm">National Rankings</p>
-                                <p class="text-yellow-500 text-sm mt-2 font-bold">Out of 600 Firms</p>
+                        </div>
+
+                        <!-- National Finance Competition - Top 36 -->
+                        <div class="group relative">
+                            <!-- Animated outer glow ring -->
+                            <div class="absolute -inset-2 bg-gradient-to-br from-amber-400 via-yellow-500 to-red-500 rounded-3xl blur-lg opacity-60 group-hover:opacity-100 transition-opacity duration-500 animate-pulse" style="animation-delay: 0.3s;"></div>
+                            
+                            <div class="relative bg-gradient-to-br from-gray-950 via-black to-gray-950 rounded-3xl overflow-hidden border-2 border-amber-400/50 group-hover:border-amber-300/80 transition-all duration-500">
+                                <!-- Inner shimmer effect -->
+                                <div class="absolute inset-0 bg-gradient-to-br from-amber-500/5 via-transparent to-red-500/5"></div>
+                                <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-amber-400 to-transparent"></div>
+                                <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-amber-400 to-transparent"></div>
+                                
+                                <!-- Decorative corner accents -->
+                                <div class="absolute top-0 left-0 w-20 h-20 border-t-2 border-l-2 border-amber-400/40 rounded-tl-3xl"></div>
+                                <div class="absolute top-0 right-0 w-20 h-20 border-t-2 border-r-2 border-amber-400/40 rounded-tr-3xl"></div>
+                                <div class="absolute bottom-0 left-0 w-20 h-20 border-b-2 border-l-2 border-amber-400/40 rounded-bl-3xl"></div>
+                                <div class="absolute bottom-0 right-0 w-20 h-20 border-b-2 border-r-2 border-amber-400/40 rounded-br-3xl"></div>
+
+                                <div class="relative z-10 p-10 flex flex-col items-center text-center">
+                                    <!-- "NATIONAL" badge -->
+                                    <div class="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-500/30 rounded-full px-5 py-2 mb-8">
+                                        <i data-lucide="flag" class="w-4 h-4 text-amber-400"></i>
+                                        <span class="text-amber-400 font-bold text-sm uppercase tracking-[0.2em]">National Level</span>
+                                        <i data-lucide="flag" class="w-4 h-4 text-amber-400"></i>
+                                    </div>
+
+                                    <!-- Trending up icon -->
+                                    <div class="relative mb-8">
+                                        <div class="absolute inset-0 bg-amber-400/20 blur-2xl rounded-full animate-pulse"></div>
+                                        <div class="relative bg-gradient-to-br from-amber-400 to-red-600 rounded-full p-5 shadow-2xl shadow-amber-500/40 group-hover:shadow-amber-400/60 transition-shadow duration-500">
+                                            <i data-lucide="trending-up" class="w-14 h-14 text-black"></i>
+                                        </div>
+                                    </div>
+
+                                    <!-- Rank Display -->
+                                    <div class="relative mb-6">
+                                        <div class="absolute -inset-4 bg-gradient-to-r from-amber-400/20 via-yellow-300/30 to-red-400/20 blur-xl rounded-full"></div>
+                                        <div class="relative">
+                                            <span class="text-6xl md:text-7xl font-black text-transparent bg-clip-text bg-gradient-to-b from-amber-300 via-yellow-400 to-red-500 drop-shadow-2xl">Top 36</span>
+                                        </div>
+                                    </div>
+
+                                    <h3 class="text-2xl md:text-3xl font-bold text-white mb-3 tracking-wide">
+                                        National Finance<br>Competition
+                                    </h3>
+
+                                    <!-- Divider -->
+                                    <div class="w-24 h-0.5 bg-gradient-to-r from-transparent via-amber-400 to-transparent my-5"></div>
+
+                                    <!-- Out of 600 badge -->
+                                    <div class="relative mb-6">
+                                        <div class="absolute -inset-1 bg-gradient-to-r from-amber-400 to-red-500 blur-md opacity-50 rounded-xl"></div>
+                                        <div class="relative bg-gradient-to-r from-amber-500/20 to-red-500/20 border border-amber-400/50 rounded-xl px-8 py-4">
+                                            <span class="text-amber-300 text-sm font-bold uppercase tracking-widest block">Out of</span>
+                                            <span class="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-red-400">600</span>
+                                            <span class="text-amber-300 text-sm font-bold uppercase tracking-widest block">Firms Nationwide</span>
+                                        </div>
+                                    </div>
+
+                                    <!-- Top % indicator -->
+                                    <div class="w-full bg-gray-800/50 rounded-full h-3 mb-3 overflow-hidden border border-amber-500/20">
+                                        <div class="h-full bg-gradient-to-r from-amber-400 via-yellow-400 to-red-500 rounded-full shadow-lg shadow-amber-500/30" style="width: 94%"></div>
+                                    </div>
+                                    <p class="text-amber-400 font-bold text-sm">Top 6% in the Nation</p>
+
+                                    <!-- Sparkle accents -->
+                                    <div class="absolute top-6 right-6 text-amber-400/30 animate-ping">
+                                        <i data-lucide="sparkles" class="w-5 h-5"></i>
+                                    </div>
+                                    <div class="absolute bottom-6 left-6 text-amber-400/30 animate-ping" style="animation-delay: 1s;">
+                                        <i data-lucide="sparkles" class="w-5 h-5"></i>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
+
+                    <!-- Bottom statement -->
+                    <div class="mt-14 text-center">
+                        <div class="inline-flex items-center gap-4 bg-gradient-to-r from-yellow-500/20 via-amber-500/10 to-yellow-500/20 rounded-full px-10 py-5 border-2 border-yellow-500/40 shadow-xl shadow-yellow-500/10">
+                            <i data-lucide="flame" class="w-7 h-7 text-yellow-400 animate-pulse"></i>
+                            <span class="text-xl md:text-2xl font-bold text-white">Top <span class="text-yellow-400">1.3%</span> & <span class="text-amber-400">6%</span> in the Nation out of 600 Firms</span>
+                            <i data-lucide="flame" class="w-7 h-7 text-yellow-400 animate-pulse"></i>
+                        </div>
+                    </div>
                 </div>
             </div>