Hugging Face's logo

Spaces:
222kdfdf
/
flappy-legends
Running

App Files Community
flappy-legends / index.html
222kdfdf's picture
222kdfdf
Add 3 files
64338ef verified
raw
history blame contribute delete
78.1 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flappy Legends - Soar Beyond Limits</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');
:root {
--primary: #6c5ce7;
--secondary: #a29bfe;
--accent: #fd79a8;
--dark: #2d3436;
--light: #f5f6fa;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #1a1a2e;
color: white;
overflow-x: hidden;
}
.gradient-bg {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.bird-card {
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.bird-card:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.mode-card {
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.mode-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
}
.flap-animation {
animation: flap 0.5s infinite alternate;
}
@keyframes flap {
0% { transform: rotate(-10deg); }
100% { transform: rotate(10deg); }
}
.trail-fire {
background: linear-gradient(90deg, #ff4d4d, #f9cb28);
}
.trail-electric {
background: linear-gradient(90deg, #00d2ff, #3a7bd5);
}
.trail-rainbow {
background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
background-size: 200% 200%;
animation: rainbow 2s linear infinite;
}
@keyframes rainbow {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.glow {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body class="gradient-bg min-h-screen">
<!-- Navigation -->
<nav class="bg-black bg-opacity-30 backdrop-filter backdrop-blur-lg border-b border-gray-800 fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="flex items-center">
<i class="fas fa-dove text-pink-500 text-2xl mr-2"></i>
<span class="text-white font-bold text-xl">Flappy Legends</span>
</div>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-pink-600">Home</a>
<a href="#modes" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Modes</a>
<a href="#birds" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Birds</a>
<a href="#customization" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Customization</a>
<a href="#leaderboards" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Leaderboards</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
<i class="fas fa-play mr-2"></i> Play Now
</button>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="hidden md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium bg-pink-600">Home</a>
<a href="#modes" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Modes</a>
<a href="#birds" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Birds</a>
<a href="#customization" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Customization</a>
<a href="#leaderboards" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Leaderboards</a>
<a href="#" class="bg-pink-600 hover:bg-pink-700 text-white block px-3 py-2 rounded-md text-base font-medium flex items-center justify-center">
<i class="fas fa-play mr-2"></i> Play Now
</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="absolute inset-0 parallax" style="background-image: url('https://images.unsplash.com/photo-1518562180175-34a163b1a9a9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
</div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="md:grid md:grid-cols-2 md:gap-12 items-center">
<div class="mb-12 md:mb-0">
<h1 class="text-4xl md:text-6xl font-bold mb-6 glow">
Soar Beyond <span class="text-pink-500">Limits</span>
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8">
The ultimate evolution of the iconic Flappy Bird experience. Master four unique game modes, unlock legendary birds, and customize your flight like never before.
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-pink-600 hover:bg-pink-700 text-white px-8 py-4 rounded-lg text-lg font-bold flex items-center justify-center pulse">
<i class="fas fa-play mr-3"></i> Play Free Now
</button>
<button class="bg-white bg-opacity-10 hover:bg-opacity-20 text-white px-8 py-4 rounded-lg text-lg font-bold flex items-center justify-center border border-white border-opacity-20">
<i class="fas fa-trophy mr-3"></i> View Leaderboards
</button>
</div>
<div class="mt-8 flex items-center space-x-6">
<div class="flex items-center">
<div class="flex -space-x-2">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/24.jpg" alt="">
<img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
</div>
<span class="ml-3 text-gray-300">+2.4M players</span>
</div>
<div class="flex items-center text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span class="ml-2 text-white">4.8 (120K reviews)</span>
</div>
</div>
</div>
<div class="relative">
<div class="relative w-full max-w-md mx-auto">
<div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div class="absolute top-20 -right-5 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
<div class="relative bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl overflow-hidden border border-white border-opacity-20">
<div class="p-4 bg-gradient-to-b from-pink-600 to-purple-600">
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center">
<i class="fas fa-crown text-yellow-400"></i>
</div>
<span class="ml-2 font-bold">Phoenix</span>
</div>
<div class="flex items-center">
<i class="fas fa-bolt text-yellow-300 mr-1"></i>
<span class="font-bold">1,247m</span>
</div>
</div>
</div>
<div class="relative h-64 bg-gray-900 overflow-hidden">
<!-- Game preview would go here -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="relative">
<div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center flap-animation">
<i class="fas fa-dove text-white text-2xl"></i>
</div>
<div class="absolute -bottom-4 -left-4 w-24 h-4 bg-pink-500 rounded-full blur-md opacity-70"></div>
</div>
</div>
<!-- Pipes -->
<div class="absolute top-0 right-10 w-16 h-32 bg-green-500 rounded-t-lg"></div>
<div class="absolute bottom-0 right-10 w-16 h-32 bg-green-500 rounded-b-lg"></div>
<div class="absolute top-0 right-40 w-16 h-40 bg-green-500 rounded-t-lg"></div>
<div class="absolute bottom-0 right-40 w-16 h-24 bg-green-500 rounded-b-lg"></div>
<!-- Coins -->
<div class="absolute top-1/3 right-20 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
<i class="fas fa-coins text-yellow-700 text-xs"></i>
</div>
<div class="absolute top-2/3 right-50 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
<i class="fas fa-coins text-yellow-700 text-xs"></i>
</div>
</div>
<div class="p-4 bg-gray-900 bg-opacity-50">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-pink-500 flex items-center justify-center">
<i class="fas fa-fire text-white"></i>
</div>
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
<i class="fas fa-shield-alt text-white"></i>
</div>
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center">
<i class="fas fa-bolt text-white"></i>
</div>
</div>
<div class="text-sm text-gray-300">
<span class="font-bold text-white">12,450</span> points
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Game Modes Section -->
<section id="modes" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-20">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Choose Your <span class="text-pink-500">Challenge</span>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Four unique ways to play, each with its own rules, scoring logic, and skill requirements.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Endless Arcade -->
<div class="mode-card rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-pink-500/20">
<div class="p-6 bg-gradient-to-br from-purple-900 to-pink-800">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold mb-2">Endless Arcade</h3>
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-white bg-opacity-20">Classic</span>
</div>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-infinity text-xl text-pink-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Survive as long as you can in an infinite gauntlet of ever-changing obstacles.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Procedurally generated obstacles</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Combo meter for bonus points</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Risk zones every 200m</span>
</li>
</ul>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-users mr-2 text-gray-400"></i>
<span class="text-sm text-gray-400">2.1M players</span>
</div>
<button class="px-4 py-2 bg-pink-600 hover:bg-pink-700 rounded-lg text-sm font-medium">
Play Mode
</button>
</div>
</div>
</div>
<!-- Sprint Challenge -->
<div class="mode-card rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
<div class="p-6 bg-gradient-to-br from-blue-900 to-cyan-800">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold mb-2">Sprint Challenge</h3>
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-white bg-opacity-20">Speedrun</span>
</div>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-stopwatch text-xl text-cyan-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Race against the clock in a high-octane 60-second dash. Precision and timing are key.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Checkpoint rings extend time</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Speed zones for turbo boosts</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Hyper Flap power-up</span>
</li>
</ul>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-users mr-2 text-gray-400"></i>
<span class="text-sm text-gray-400">1.4M players</span>
</div>
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm font-medium">
Play Mode
</button>
</div>
</div>
</div>
<!-- Daily Gauntlet -->
<div class="mode-card rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/20">
<div class="p-6 bg-gradient-to-br from-orange-900 to-yellow-800">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold mb-2">Daily Gauntlet</h3>
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-white bg-opacity-20">Limited</span>
</div>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-calendar-day text-xl text-yellow-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Conquer a handcrafted obstacle map that changes every day. Test your memorization and reflexes.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>3 lives per attempt</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Secret routes with rewards</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Seasonal hazards and themes</span>
</li>
</ul>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-users mr-2 text-gray-400"></i>
<span class="text-sm text-gray-400">1.8M players</span>
</div>
<button class="px-4 py-2 bg-orange-600 hover:bg-orange-700 rounded-lg text-sm font-medium">
Play Mode
</button>
</div>
</div>
</div>
<!-- Versus Races -->
<div class="mode-card rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-red-500/20">
<div class="p-6 bg-gradient-to-br from-red-900 to-pink-800">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-bold mb-2">Versus Races</h3>
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-white bg-opacity-20">Multiplayer</span>
</div>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-users text-xl text-pink-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Compete head-to-head against friends or global rivals in live races.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>First to 500m wins</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Power-up slots for strategy</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
<span>Ghost mode and mirror mode</span>
</li>
</ul>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-users mr-2 text-gray-400"></i>
<span class="text-sm text-gray-400">1.2M players</span>
</div>
<button class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-sm font-medium">
Play Mode
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bird Heroes Section -->
<section id="birds" class="py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Choose Your <span class="text-pink-500">Legend</span>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Unlock 12 legendary birds, each with unique stats, abilities, and visual flair.
</p>
</div>
<div class="mb-12">
<div class="flex overflow-x-auto pb-6 scrollbar-hide">
<div class="flex space-x-6">
<button class="px-6 py-2 rounded-full bg-pink-600 text-white font-medium whitespace-nowrap">All Birds</button>
<button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Common</button>
<button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Rare</button>
<button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Epic</button>
<button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Legendary</button>
<button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Seasonal</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Phoenix -->
<div class="bird-card rounded-xl overflow-hidden bg-gray-900 bg-opacity-50 border border-gray-800 hover:border-pink-500">
<div class="relative h-48 bg-gradient-to-br from-yellow-600 to-red-600 flex items-center justify-center">
<div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg')] bg-cover bg-center opacity-20"></div>
<div class="relative z-10 flap-animation">
<div class="w-20 h-20 bg-gradient-to-br from-yellow-400 to-red-500 rounded-full flex items-center justify-center shadow-lg">
<i class="fas fa-dove text-white text-3xl"></i>
</div>
<div class="absolute -bottom-4 -left-4 w-28 h-6 bg-red-500 rounded-full blur-lg opacity-70"></div>
</div>
<div class="absolute top-4 right-4 bg-black bg-opacity-50 rounded-full px-3 py-1 text-sm font-medium flex items-center">
<i class="fas fa-fire text-yellow-400 mr-1"></i>
Legendary
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold">Phoenix</h3>
<p class="text-gray-400 text-sm">Fire Bird</p>
</div>
<div class="flex items-center bg-gray-800 rounded-full px-3 py-1">
<i class="fas fa-bolt text-yellow-400 mr-1"></i>
<span>Lv. 12</span>
</div>
</div>
<p class="text-gray-300 text-sm mb-4">
One-time self-revive with flame immunity burst. Immune to fire obstacles.
</p>
<div class="flex justify-between items-center">
<div class="flex space-x-2">
<div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
<i class="fas fa-bolt text-yellow-400 mr-1"></i>
Speed
</div>
<div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
<i class="fas fa-shield-alt text-blue-400 mr-1"></i>
Shield
</div>
</div>
<button class="text-pink-500 hover:text-pink-400">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</div>
<!-- Neon Falcon -->
<div class="bird-card rounded-xl overflow-hidden bg-gray-900 bg-opacity-50 border border-gray-800 hover:border-purple-500">
<div class="relative h-48 bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center">
<div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg')] bg-cover bg-center opacity-20"></div>
<div class="relative z-10 flap-animation">
<div class="w-20 h-20 bg-gradient-to-br from-purple-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg">
<i class="fas fa-dove text-white text-3xl"></i>
</div>
<div class="absolute -bottom-4 -left-4 w-28 h-6 bg-blue-500 rounded-full blur-lg opacity-70"></div>
</div>
<div class="absolute top-4 right-4 bg-black bg-opacity-50 rounded-full px-3 py-1 text-sm font-medium flex items-center">
<i class="fas fa-star text-purple-400 mr-1"></i>
Epic
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold">Neon Falcon</h3>
<p class="text-gray-400 text-sm">Speedster</p>
</div>
<div class="flex items-center bg-gray-800 rounded-full px-3 py-1">
<i class="fas fa-bolt text-yellow-400 mr-1"></i>
<span>Lv. 8</span>
</div>
</div>
<p class="text-gray-300 text-sm mb-4">
Lightning-fast speed with blinding light trails that obscure obstacles temporarily.
</p>
<div class="flex justify-between items-center">
<div class="flex space-x-2">
<div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
<i class="fas fa-tachometer-alt text-purple-400 mr-1"></i>
Speed
</div>
<div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
<i class="fas fa-eye-slash text-blue-400 mr-1"></i>
Blinding
</div>
</div>
<button class="text-pink-500 hover:text-pink-400">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</div>
<!-- Iron Eagle -->
<div class="bird-card rounded-xl overflow-hidden bg-gray-900 bg-opacity-50 border border-gray-800 hover:border-gray-500">
<div class="relative h-48 bg-gradient-to-br from-gray-600 to-gray-800 flex items-center justify-center">
<div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg')] bg-cover bg-center opacity-20"></div>
<div class="relative z-10 flap-animation">
<div class="w-20 h-20 bg-gradient-to-br from-gray-400 to-gray-600 rounded-full flex items-center justify-center shadow-lg">
<i class="fas fa-dove text-white text-3xl"></i>
</div>
<div class="absolute -bottom-4 -left-4 w-28 h-6 bg-gray-500 rounded-full blur-lg opacity-70"></div>
</div>
<div class="absolute top-4 right-4 bg-black bg-opacity-50 rounded-full px-3 py-1 text-sm font-medium flex items-center">
<i class="fas fa-shield-alt text-gray-400 mr-1"></i>
Rare
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold">Iron Eagle</h3>
<p class="text-gray-400 text-sm">Tank</p>
</div>
<div class="flex items-center bg-gray-800 rounded-full px-3 py-1">
<i class="fas fa-bolt text-yellow-400 mr-1"></i>
<span>Lv. 5</span>
</div>
</div>
<p class="text-gray-300 text-sm mb-4">
High momentum lets it plow through tight spots effortlessly. Resistant to collisions.
</p>
<div class="flex justify-between items-center">
<div class="flex space-x-2">
<div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
<i class="fas fa-weight-hanging text-gray-400 mr-1"></i>
Weight
</div>
<div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
<i class="fas fa-shield-alt text-blue-400 mr-1"></i>
Armor
</div>
</div>
<button class="text-pink-500 hover:text-pink-400">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</div>
<!-- Wind Sprite -->
<div class="bird-card rounded-xl overflow-hidden bg-gray-900 bg-opacity-50 border border-gray-800 hover:border-green-500">
<div class="relative h-48 bg-gradient-to-br from-green-600 to-teal-600 flex items-center justify-center">
<div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg')] bg-cover bg-center opacity-20"></div>
<div class="relative z-10 flap-animation">
<div class="w-20 h-20 bg-gradient-to-br from-green-400 to-teal-500 rounded-full flex items-center justify-center shadow-lg">
<i class="fas fa-dove text-white text-3xl"></i>
</div>
<div class="absolute -bottom-4 -left-4 w-28 h-6 bg-teal-500 rounded-full blur-lg opacity-70"></div>
</div>
<div class="absolute top-4 right-4 bg-black bg-opacity-50 rounded-full px-3 py-1 text-sm font-medium flex items-center">
<i class="fas fa-leaf text-green-400 mr-1"></i>
Common
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold">Wind Sprite</h3>
<p class="text-gray-400 text-sm">Agile</p>
</div>
<div class="flex items-center bg-gray-800 rounded-full px-3 py-1">
<i class="fas fa-bolt text-yellow-400 mr-1"></i>
<span>Lv. 3</span>
</div>
</div>
<p class="text-gray-300 text-sm mb-4">
Agile with a micro-dash cooldown ability and a smaller hitbox. Perfect for tight spaces.
</p>
<div class="flex justify-between items-center">
<div class="flex space-x-2">
<div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
<i class="fas fa-wind text-green-400 mr-1"></i>
Agile
</div>
<div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
<i class="fas fa-bullseye text-blue-400 mr-1"></i>
Small
</div>
</div>
<button class="text-pink-500 hover:text-pink-400">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="px-8 py-3 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg text-lg font-medium border border-white border-opacity-20 flex items-center mx-auto">
<i class="fas fa-chevron-down mr-2"></i> View All 12 Birds
</button>
</div>
</div>
</section>
<!-- Customization Section -->
<section id="customization" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-20">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Make It <span class="text-pink-500">Yours</span>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Express yourself with hundreds of cosmetic options for your bird and trail.
</p>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 mb-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold">Customization Panel</h3>
<div class="flex items-center text-yellow-400">
<i class="fas fa-coins mr-2"></i>
<span>12,450</span>
</div>
</div>
<div class="mb-8">
<h4 class="text-sm font-semibold text-gray-400 mb-3">SKINS</h4>
<div class="grid grid-cols-3 gap-3">
<div class="h-16 rounded-lg bg-gradient-to-br from-yellow-500 to-red-500 flex items-center justify-center cursor-pointer border-2 border-pink-500">
<i class="fas fa-dove text-white"></i>
</div>
<div class="h-16 rounded-lg bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-dove text-white"></i>
</div>
<div class="h-16 rounded-lg bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-dove text-white"></i>
</div>
<div class="h-16 rounded-lg bg-gradient-to-br from-pink-500 to-red-500 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-dove text-white"></i>
</div>
<div class="h-16 rounded-lg bg-gradient-to-br from-gray-500 to-black flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-dove text-white"></i>
</div>
<div class="h-16 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-dove text-white"></i>
</div>
</div>
</div>
<div class="mb-8">
<h4 class="text-sm font-semibold text-gray-400 mb-3">TRAILS</h4>
<div class="grid grid-cols-3 gap-3">
<div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<div class="w-8 h-1 mb-1 trail-fire rounded-full"></div>
<span class="text-xs">Fire</span>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<div class="w-8 h-1 mb-1 trail-electric rounded-full"></div>
<span class="text-xs">Electric</span>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border-2 border-pink-500">
<div class="w-8 h-1 mb-1 trail-rainbow rounded-full"></div>
<span class="text-xs">Rainbow</span>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<div class="w-8 h-1 mb-1 bg-gray-400 rounded-full"></div>
<span class="text-xs">Smoke</span>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<div class="w-8 h-1 mb-1 bg-purple-500 rounded-full"></div>
<span class="text-xs">Magic</span>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<div class="w-8 h-1 mb-1 bg-green-500 rounded-full"></div>
<span class="text-xs">Nature</span>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-semibold text-gray-400 mb-3">ACCESSORIES</h4>
<div class="grid grid-cols-3 gap-3">
<div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-crown text-yellow-400"></i>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-hat-wizard text-purple-400"></i>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-glasses text-blue-400"></i>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border-2 border-pink-500">
<i class="fas fa-jet-fighter text-red-400"></i>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-scarf text-pink-400"></i>
</div>
<div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
<i class="fas fa-mask text-green-400"></i>
</div>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="relative w-full max-w-md mx-auto">
<div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div class="relative bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl overflow-hidden border border-white border-opacity-20 p-8">
<div class="flex justify-center mb-8">
<div class="relative">
<div class="w-24 h-24 bg-gradient-to-br from-pink-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg flap-animation">
<i class="fas fa-dove text-white text-4xl"></i>
</div>
<div class="absolute -bottom-2 -left-2 w-28 h-6 bg-pink-500 rounded-full blur-lg opacity-70 trail-rainbow"></div>
<div class="absolute -top-2 -right-2 w-10 h-10 bg-yellow-400 rounded-full flex items-center justify-center">
<i class="fas fa-jet-fighter text-red-500 text-sm"></i>
</div>
</div>
</div>
<div class="text-center">
<h3 class="text-2xl font-bold mb-2">Cyber Phoenix</h3>
<p class="text-gray-300 mb-6">Legendary skin with rainbow trail and jetpack accessory</p>
<div class="flex justify-center space-x-4 mb-6">
<div class="flex items-center">
<i class="fas fa-fire text-yellow-400 mr-2"></i>
<span>Fire Immunity</span>
</div>
<div class="flex items-center">
<i class="fas fa-redo text-blue-400 mr-2"></i>
<span>Self-Revive</span>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-4 mb-6">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-400 text-sm">Current Value</p>
<p class="font-bold">12,450 coins</p>
</div>
<div>
<p class="text-gray-400 text-sm">Rarity</p>
<p class="font-bold text-purple-400">Legendary</p>
</div>
</div>
</div>
<button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-3 rounded-lg font-bold">
Equip Customization
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Power-Ups Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Strategic <span class="text-pink-500">Power-Ups</span>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Enhance your flight with powerful boosts and abilities.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Rocket Boost -->
<div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-pink-500 transition-all duration-300">
<div class="p-6 bg-gradient-to-br from-red-900 to-orange-800">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold">Rocket Boost</h3>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-rocket text-xl text-orange-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Dash through 3 pipes unscathed. Perfect for tight spots and speed runs.
</p>
<div class="mb-6">
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Duration</span>
<span>3 pipes</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-orange-500 h-2 rounded-full" style="width: 60%"></div>
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-bolt text-yellow-400 mr-2"></i>
<span class="text-sm">Common</span>
</div>
<button class="px-4 py-2 bg-orange-600 hover:bg-orange-700 rounded-lg text-sm font-medium">
Select Power-Up
</button>
</div>
</div>
</div>
<!-- Shield Barrier -->
<div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-blue-500 transition-all duration-300">
<div class="p-6 bg-gradient-to-br from-blue-900 to-cyan-800">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold">Shield Barrier</h3>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-shield-alt text-xl text-cyan-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Absorb one collision before breaking. Your safety net for risky maneuvers.
</p>
<div class="mb-6">
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Protection</span>
<span>1 hit</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div>
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-shield-alt text-blue-400 mr-2"></i>
<span class="text-sm">Uncommon</span>
</div>
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm font-medium">
Select Power-Up
</button>
</div>
</div>
</div>
<!-- Gravity Flip -->
<div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-purple-500 transition-all duration-300">
<div class="p-6 bg-gradient-to-br from-purple-900 to-pink-800">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold">Gravity Flip</h3>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-sync-alt text-xl text-pink-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Reverse gravity for 5 seconds. Completely changes your flight dynamics.
</p>
<div class="mb-6">
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Duration</span>
<span>5 seconds</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 50%"></div>
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-star text-purple-400 mr-2"></i>
<span class="text-sm">Rare</span>
</div>
<button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg text-sm font-medium">
Select Power-Up
</button>
</div>
</div>
</div>
<!-- Coin Magnet -->
<div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-yellow-500 transition-all duration-300">
<div class="p-6 bg-gradient-to-br from-yellow-900 to-amber-800">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold">Coin Magnet</h3>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-magnet text-xl text-amber-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Attract nearby coins for 8 seconds. Maximize your earnings with this boost.
</p>
<div class="mb-6">
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Duration</span>
<span>8 seconds</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 80%"></div>
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-coins text-yellow-400 mr-2"></i>
<span class="text-sm">Uncommon</span>
</div>
<button class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg text-sm font-medium">
Select Power-Up
</button>
</div>
</div>
</div>
<!-- Time Slow -->
<div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-green-500 transition-all duration-300">
<div class="p-6 bg-gradient-to-br from-green-900 to-emerald-800">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold">Time Slow</h3>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-hourglass-half text-xl text-emerald-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Slow down obstacles around you for 4 seconds. Perfect for precision moments.
</p>
<div class="mb-6">
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Duration</span>
<span>4 seconds</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 40%"></div>
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-clock text-green-400 mr-2"></i>
<span class="text-sm">Common</span>
</div>
<button class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg text-sm font-medium">
Select Power-Up
</button>
</div>
</div>
</div>
<!-- Shadow Clone -->
<div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-indigo-500 transition-all duration-300">
<div class="p-6 bg-gradient-to-br from-indigo-900 to-violet-800">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold">Shadow Clone</h3>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
<i class="fas fa-clone text-xl text-violet-300"></i>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-300 mb-6">
Create a decoy that flies alongside you, confusing obstacles for 6 seconds.
</p>
<div class="mb-6">
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Duration</span>
<span>6 seconds</span>
</div>
<div class="w-full bg-gray-800 rounded-full h-2">
<div class="bg-indigo-500 h-2 rounded-full" style="width: 60%"></div>
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-gem text-indigo-400 mr-2"></i>
<span class="text-sm">Epic</span>
</div>
<button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg text-sm font-medium">
Select Power-Up
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Leaderboards Section -->
<section id="leaderboards" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-20">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-bold mb-4">
Global <span class="text-pink-500">Leaderboards</span>
</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Compete against players worldwide and climb to the top of the rankings.
</p>
</div>
<div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800">
<div class="p-6 border-b border-gray-800">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h3 class="text-xl font-bold">Endless Arcade Rankings</h3>
<p class="text-gray-400">Top players this week</p>
</div>
<div class="flex space-x-4">
<div class="relative">
<select class="appearance-none bg-gray-800 border border-gray-700 rounded-lg pl-4 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-500">
<option>All Time</option>
<option>This Week</option>
<option>Today</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="relative">
<select class="appearance-none bg-gray-800 border border-gray-700 rounded-lg pl-4 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-500">
<option>Global</option>
<option>Friends</option>
<option>Club</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
</div>
</div>
<div class="divide-y divide-gray-800">
<!-- Top Player -->
<div class="p-6 bg-gradient-to-r from-yellow-900 to-transparent">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center text-white font-bold mr-4">
1
</div>
<div class="flex-shrink-0">
<img class="w-12 h-12 rounded-full border-2 border-yellow-400" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<div>
<h4 class="font-bold">SkyQueen</h4>
<p class="text-sm text-gray-400">Phoenix - Lv. 24</p>
</div>
<div class="text-right">
<p class="font-bold text-yellow-400">12,450m</p>
<p class="text-sm text-gray-400">3.2M points</p>
</div>
</div>
</div>
</div>
</div>
<!-- Player 2 -->
<div class="p-6 bg-gradient-to-r from-gray-800 to-transparent">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center text-white font-bold mr-4">
2
</div>
<div class="flex-shrink-0">
<img class="w-12 h-12 rounded-full border-2 border-gray-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<div>
<h4 class="font-bold">FlappyPro</h4>
<p class="text-sm text-gray-400">Neon Falcon - Lv. 18</p>
</div>
<div class="text-right">
<p class="font-bold">10,780m</p>
<p class="text-sm text-gray-400">2.8M points</p>
</div>
</div>
</div>
</div>
</div>
<!-- Player 3 -->
<div class="p-6 bg-gradient-to-r from-amber-800 to-transparent">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-amber-600 flex items-center justify-center text-white font-bold mr-4">
3
</div>
<div class="flex-shrink-0">
<img class="w-12 h-12 rounded-full border-2 border-amber-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<div>
<h4 class="font-bold">WingMaster</h4>
<p class="text-sm text-gray-400">Iron Eagle - Lv. 15</p>
</div>
<div class="text-right">
<p class="font-bold text-amber-400">9,560m</p>
<p class="text-sm text-gray-400">2.4M points</p>
</div>
</div>
</div>
</div>
</div>
<!-- Player 4 -->
<div class="p-6">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold mr-4">
4
</div>
<div class="flex-shrink-0">
<img class="w-12 h-12 rounded-full border-2 border-gray-500" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<div>
<h4 class="font-bold">AirNinja</h4>
<p class="text-sm text-gray-400">Wind Sprite - Lv. 12</p>
</div>
<div class="text-right">
<p class="font-bold">8,340m</p>
<p class="text-sm text-gray-400">2.1M points</p>
</div>
</div>
</div>
</div>
</div>
<!-- Player 5 -->
<div class="p-6">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold mr-4">
5
</div>
<div class="flex-shrink-0">
<img class="w-12 h-12 rounded-full border-2 border-gray-500" src="https://randomuser.me/api/portraits/women/54.jpg" alt="">
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<div>
<h4 class="font-bold">PixelWings</h4>
<p class="text-sm text-gray-400">Cyber Hawk - Lv. 10</p>
</div>
<div class="text-right">
<p class="font-bold">7,890m</p>
<p class="text-sm text-gray-400">1.9M points</p>
</div>
</div>
</div>
</div>
</div>
<!-- Current Player -->
<div class="p-6 bg-gradient-to-r from-pink-900 to-transparent">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-pink-600 flex items-center justify-center text-white font-bold mr-4">
42
</div>
<div class="flex-shrink-0">
<img class="w-12 h-12 rounded-full border-2 border-pink-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="">
</div>
<div class="ml-4 flex-1">
<div class="flex items-center justify-between">
<div>
<h4 class="font-bold">You</h4>
<p class="text-sm text-gray-400">Phoenix - Lv. 5</p>
</div>
<div class="text-right">
<p class="font-bold text-pink-400">4,210m</p>
<p class="text-sm text-gray-400">1.2M points</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 border-t border-gray-800 text-center">
<button class="px-6 py-3 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg text-lg font-medium border border-white border-opacity-20">
View Full Leaderboard
</button>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="py-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-purple-900 to-pink-800 opacity-50"></div>
<div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-214890277
</html>