<div class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-sans overflow-hidden">
<!-- Header Section -->
<header class="relative z-20 p-4 sm:p-6 lg:p-8 flex items-center justify-between shadow-lg backdrop-blur-sm bg-white/70 dark:bg-gray-900/70 border-b-4 border-opacity-70 border-purple-300 dark:border-gray-600">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50?random=1" alt="Team Logo" class="rounded-full shadow-md border-2 border-purple-400 dark:border-gray-500">
<h1 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white tracking-wider uppercase text-shadow-art-deco">
<span class="text-purple-600 dark:text-purple-300">Elite</span> <span class="text-pink-600 dark:text-pink-300">Athletics</span>
</h1>
</div>
<!-- Mobile Hamburger Toggle -->
<input type="checkbox" id="menu-toggle" class="hidden peer">
<label for="menu-toggle" class="relative z-50 flex flex-col justify-between w-8 h-6 xl:hidden cursor-pointer group">
<span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:rotate-45 peer-checked:translate-y-2.5"></span>
<span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:opacity-0"></span>
<span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:-rotate-45 peer-checked:-translate-y-2.5"></span>
</label>
<!-- Desktop Navigation -->
<nav class="hidden xl:flex space-x-8 text-lg font-semibold">
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
Home
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
Schedule
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
Team
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
Results
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
Shop
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
</a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
Contact
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
</a>
</nav>
</header>
<!-- Mobile Navigation (Off-canvas) -->
<nav class="fixed inset-0 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-950 dark:via-gray-850 dark:to-gray-750 flex flex-col justify-center items-center space-y-8 text-2xl font-bold transition-transform duration-500 -translate-x-full peer-checked:translate-x-0 z-40 shadow-xl overflow-y-auto px-4 py-16">
<div class="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><defs><pattern id=\'art-deco-pattern\' width=\'100\' height=\'100\' patternUnits=\'userSpaceOnUse\'><path d=\'M0 0 L100 0 L50 50 Z M50 50 L100 100 L0 100 Z\' fill=\'none\' stroke=\'rgba(0,0,0,0.1)\' stroke-width=\'1\'/><circle cx=\'50\' cy=\'50\' r=\'5\' fill=\'rgba(0,0,0,0.1)\'/></pattern></defs><rect width=\'100%\' height=\'100%\' fill=\'url(%23art-deco-pattern)\'/></svg>'); background-size: 100px 100px;"></div>
<div class="relative z-10 flex flex-col items-center space-y-6 sm:space-y-8">
<a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-purple-200 dark:hover:bg-gray-600 hover:text-purple-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-purple-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[50ms]">
<i class="fas fa-home mr-3 text-purple-600 dark:text-purple-300"></i> Home
</a>
<a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-pink-200 dark:hover:bg-gray-600 hover:text-pink-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-pink-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[100ms]">
<i class="fas fa-calendar-alt mr-3 text-pink-600 dark:text-pink-300"></i> Schedule
</a>
<a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-yellow-200 dark:hover:bg-gray-600 hover:text-yellow-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-yellow-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[150ms]">
<i class="fas fa-users mr-3 text-yellow-600 dark:text-yellow-300"></i> Team
</a>
<a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-green-200 dark:hover:bg-gray-600 hover:text-green-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-green-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[200ms]">
<i class="fas fa-clipboard-list mr-3 text-green-600 dark:text-green-300"></i> Results
</a>
<a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-blue-200 dark:hover:bg-gray-600 hover:text-blue-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-blue-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[250ms]">
<i class="fas fa-shopping-cart mr-3 text-blue-600 dark:text-blue-300"></i> Shop
</a>
<a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-indigo-200 dark:hover:bg-gray-600 hover:text-indigo-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-indigo-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[300ms]">
<i class="fas fa-envelope mr-3 text-indigo-600 dark:text-indigo-300"></i> Contact
</a>
</div>
<!-- Social Media Links -->
<div class="relative z-10 flex space-x-6 mt-8 sm:mt-12 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[350ms]">
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors text-3xl"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-pink-600 dark:hover:text-pink-300 transition-colors text-3xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-yellow-600 dark:hover:text-yellow-300 transition-colors text-3xl"><i class="fab fa-instagram"></i></a>
</div>
<!-- User Mini-Profile -->
<div class="relative z-10 flex items-center space-x-4 mt-8 sm:mt-12 p-4 bg-white/70 dark:bg-gray-800/70 rounded-lg shadow-lg border-2 border-purple-300 dark:border-gray-600 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[400ms]">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-gray-500 shadow-md">
<div>
<p class="text-gray-800 dark:text-gray-100 text-lg font-semibold">John "The Bolt" Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Athlete - Running</p>
</div>
</div>
</nav>
<!-- Main Content Area (for visual context) -->
<main class="p-8 text-center text-gray-800 dark:text-gray-200 z-10 relative">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-6 mt-12 leading-tight text-shadow-art-deco-light">
Unleash Your Inner <span class="text-pink-600 dark:text-pink-300">Champion</span>
</h2>
<p class="text-lg sm:text-xl max-w-2xl mx-auto mb-12 opacity-90">
Dedicated to excellence in sports and fitness. Join our community and elevate your performance.
</p>
<div class="flex justify-center flex-wrap gap-6">
<div class="w-full sm:w-1/2 lg:w-1/3 p-4">
<div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-purple-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
<img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-purple-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=2" alt="Training Session">
<h3 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-200">Training Sessions</h3>
<p class="text-gray-700 dark:text-gray-300">Discover personalized training programs for all skill levels.</p>
</div>
</div>
<div class="w-full sm:w-1/2 lg:w-1/3 p-4">
<div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-pink-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
<img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-pink-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=3" alt="Team Sports">
<h3 class="text-2xl font-bold mb-2 text-pink-700 dark:text-pink-200">Team Sports</h3>
<p class="text-gray-700 dark:text-gray-300">Join a team and experience the thrill of competitive play.</p>
</div>
</div>
</div>
</main>
<!-- Art Deco Geometric Background Elements (Absolute Positioning) -->
<div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
<!-- Top Left Triangle -->
<div class="absolute top-0 left-0 w-64 h-64 sm:w-80 sm:h-80 bg-purple-300 dark:bg-gray-700 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left "></div>
<div class="absolute top-0 left-0 w-48 h-48 sm:w-64 sm:h-64 bg-pink-300 dark:bg-gray-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left translate-x-16 translate-y-16 "></div>
<!-- Bottom Right Chevron -->
<div class="absolute bottom-0 right-0 w-64 h-32 sm:w-80 sm:h-40 bg-yellow-300 dark:bg-gray-700 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right"></div>
<div class="absolute bottom-0 right-0 w-48 h-24 sm:w-64 sm:h-32 bg-purple-300 dark:bg-gray-600 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right -translate-x-16 -translate-y-8"></div>
<!-- Middle Horizontal Bars -->
<div class="absolute left-1/4 top-1/2 -translate-y-1/2 w-1/2 h-8 bg-pink-300 dark:bg-gray-700 rounded-full transform rotate-3 z-0"></div>
<div class="absolute left-1/4 top-[calc(50%+2rem)] -translate-y-1/2 w-1/2 h-8 bg-purple-300 dark:bg-gray-600 rounded-full transform -rotate-3 z-0"></div>
</div>
<style>
.text-shadow-art-deco {
text-shadow: 2px 2px 0px rgba(109, 40, 217, 0.2), 4px 4px 0px rgba(219, 39, 119, 0.2);
/* Combined purple and pink shadow */
}
.dark .text-shadow-art-deco {
text-shadow: 2px 2px 0px rgba(82, 82, 91, 0.5), 4px 4px 0px rgba(37, 99, 235, 0.2);
}
.text-shadow-art-deco-light {
text-shadow: 1px 1px 0px rgba(109, 40, 217, 0.1), 2px 2px 0px rgba(219, 39, 119, 0.1);
/* Lighter for main heading copy */
}
.dark .text-shadow-art-deco-light {
text-shadow: 1px 1px 0px rgba(82, 82, 91, 0.3), 2px 2px 0px rgba(37, 99, 235, 0.1);
}
/* Prevent scrolling when menu is open */
body.menu-open {
overflow: hidden;
}
/* Use JS for adding/removing menu-open class on body */
/* Example (add this script manually elsewhere, not in the provided HTML context): */
/*
document.getElementById('menu-toggle').addEventListener('change', function() {
if (this.checked) {
document.body.classList.add('menu-open');
} else {
document.body.classList.remove('menu-open');
}
});
*/
</style>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>
