HTML Source Code
Copy Code
<header class="bg-blue-900 text-stone-100">
<nav class="container mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-blue-400 rounded-full flex items-center justify-center">
<svg class="w-5 h-5 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
</div>
<span class="text-2xl font-bold">Pearl Dive Championship</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="hover:text-blue-400 transition duration-300">Home</a>
<a href="#competition" class="hover:text-blue-400 transition duration-300">Competition</a>
<a href="#about" class="hover:text-blue-400 transition duration-300">About</a>
<a href="#register" class="hover:text-blue-400 transition duration-300">Register</a>
<a href="#contact" class="hover:text-blue-400 transition duration-300">Contact</a>
</div>
<button class="md:hidden text-stone-100">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</nav>
</header>
<main>
<!-- Hero Section -->
<section id="home" class="relative bg-gradient-to-br from-blue-900 to-blue-800 text-stone-100 py-20 lg:py-32">
<div class="absolute inset-0 bg-black opacity-40"></div>
<div class="container mx-auto px-6 relative z-10">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-5xl lg:text-7xl font-bold mb-6 leading-tight">
The Ultimate <span class="text-blue-400">Pearl Diving</span> Championship
</h1>
<p class="text-xl lg:text-2xl mb-8 text-stone-300">
Dive deep into pristine freshwater lakes and compete for glory in the world's premier pearl diving competition. Test your skills, endurance, and treasure-hunting abilities.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-4 rounded-lg transition duration-300 transform hover:scale-105">
Register Now
</button>
<button class="border-2 border-stone-100 hover:bg-stone-100 hover:text-stone-900 font-semibold px-8 py-4 rounded-lg transition duration-300">
View Competition Rules
</button>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<svg class="w-6 h-6 text-stone-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
</section>
<!-- Features Section -->
<section class="py-20 bg-stone-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl lg:text-5xl font-bold text-stone-900 mb-4">Why Compete in Pearl Diving?</h2>
<p class="text-xl text-stone-600 max-w-3xl mx-auto">
Experience the thrill of underwater treasure hunting while competing against the world's best pearl divers in pristine freshwater environments.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-stone-900 mb-4">Timed Challenges</h3>
<p class="text-stone-600">
Race against the clock to find and retrieve the most valuable pearls from carefully mapped diving zones in crystal-clear freshwater lakes.
</p>
</div>
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-stone-900 mb-4">Safety First</h3>
<p class="text-stone-600">
All participants receive professional safety training and equipment. Certified dive masters monitor every competitor throughout the competition.
</p>
</div>
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-stone-900 mb-4">Prize Pool</h3>
<p class="text-stone-600">
Compete for over $50,000 in prize money, plus keep any pearls you find during competition. Additional prizes for technique and sportsmanship.
</p>
</div>
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-stone-900 mb-4">Pristine Waters</h3>
<p class="text-stone-600">
Our competition takes place in some of the world's most beautiful and clean freshwater lakes, known for their exceptional pearl-producing mollusks.
</p>
</div>
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-stone-900 mb-4">Expert Community</h3>
<p class="text-stone-600">
Join a community of passionate pearl divers from around the world. Learn from experts and share techniques with fellow competitors.
</p>
</div>
<div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold text-stone-900 mb-4">Championship Title</h3>
<p class="text-stone-600">
Earn the prestigious title of World Pearl Diving Champion and join the ranks of legendary underwater treasure hunters.
</p>
</div>
</div>
</div>
</section>
<!-- Competition Categories Section -->
<section id="competition" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl lg:text-5xl font-bold text-stone-900 mb-4">Competition Categories</h2>
<p class="text-xl text-stone-600 max-w-3xl mx-auto">
Multiple divisions ensure fair competition for divers of all skill levels and experience.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="group cursor-pointer">
<div class="bg-stone-100 rounded-xl p-6 group-hover:bg-blue-50 transition duration-300">
<div class="w-20 h-20 bg-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center">
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-2">Novice Division</h3>
<p class="text-stone-600 mb-4">For divers with less than 2 years experience. Shallow water zones up to 15 feet deep.</p>
<div class="text-2xl font-bold text-blue-600">Entry: $150</div>
</div>
</div>
<div class="group cursor-pointer">
<div class="bg-stone-100 rounded-xl p-6 group-hover:bg-blue-50 transition duration-300">
<div class="w-20 h-20 bg-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center">
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-2">Intermediate Division</h3>
<p class="text-stone-600 mb-4">For experienced recreational divers. Moderate depth zones up to 25 feet deep.</p>
<div class="text-2xl font-bold text-blue-600">Entry: $250</div>
</div>
</div>
<div class="group cursor-pointer">
<div class="bg-stone-100 rounded-xl p-6 group-hover:bg-blue-50 transition duration-300">
<div class="w-20 h-20 bg-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center">
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-13h-2v6l5.25 3.15.75-1.23-4.5-2.67V7z"/>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-2">Professional Division</h3>
<p class="text-stone-600 mb-4">For certified professional divers and instructors. Deep water zones up to 40 feet.</p>
<div class="text-2xl font-bold text-blue-600">Entry: $350</div>
</div>
</div>
<div class="group cursor-pointer">
<div class="bg-stone-100 rounded-xl p-6 group-hover:bg-blue-50 transition duration-300">
<div class="w-20 h-20 bg-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center">
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 1L9 9l-8 3 8 3 3 8 3-8 8-3-8-3-3-8z"/>
</svg>
</div>
<h3 class="text-xl font-bold text-stone-900 mb-2">Elite Championship</h3>
<p class="text-stone-600 mb-4">Invitation only for previous winners and world-class athletes. Extreme depths and conditions.</p>
<div class="text-2xl font-bold text-blue-600">By Invitation</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-3 rounded-lg transition duration-300 transform hover:scale-105">
Register for Competition
</button>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 bg-stone-900 text-stone-100">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl lg:text-5xl font-bold mb-4">What Our Champions Say</h2>
<p class="text-xl text-stone-300 max-w-3xl mx-auto">
Hear from past winners and competitors about their Pearl Diving Championship experience.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-stone-800 rounded-xl p-8">
<div class="flex items-center mb-4">
<div class="flex text-blue-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
</div>
<p class="text-stone-300 mb-6">
"Winning the Pearl Diving Championship was a life-changing experience. The competition was fierce but fair, and the safety measures were top-notch. I found pearls worth over $3,000!"
</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mr-4">
<span class="text-white font-bold">AM</span>
</div>
<div>
<div class="font-bold">Amanda Martinez</div>
<div class="text-stone-400 text-sm">2023 Professional Champion</div>
</div>
</div>
</div>
<div class="bg-stone-800 rounded-xl p-8">
<div class="flex items-center mb-4">
<div class="flex text-blue-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
</div>
<p class="text-stone-300 mb-6">
"As a first-time competitor, I was nervous about the deep water challenge. The training program and safety support made me feel confident and prepared."
</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mr-4">
<span class="text-white font-bold">DJ</span>
</div>
<div>
<div class="font-bold">David Kim</div>
<div class="text-stone-400 text-sm">2023 Novice Competitor</div>
</div>
</div>
</div>
<div class="bg-stone-800 rounded-xl p-8">
<div class="flex items-center mb-4">
<div class="flex text-blue-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
</div>
</div>
<p class="text-stone-300 mb-6">
"The Pearl Diving Championship combines athleticism, skill, and adventure like no other competition. The underwater environment is absolutely magical."
</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mr-4">
<span class="text-white font-bold">SF</span>
</div>
<div>
<div class="font-bold">Sofia Rodriguez</div>
<div class="text-stone-400 text-sm">Elite Champion 2022</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-stone-50">
<div class="container mx-auto px-6">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-4xl lg:text-5xl font-bold text-stone-900 mb-6">Our Story</h2>
<p class="text-lg text-stone-600 mb-6">
Founded in 2015 by marine biologist Dr. Elena Vasquez and professional diver Marcus Thompson, the Pearl Diving Championship began as a small regional competition to celebrate the ancient art of pearl diving in freshwater environments.
</p>
<p class="text-lg text-stone-600 mb-6">
What started with just 25 competitors has grown into the world's premier freshwater pearl diving competition, attracting over 300 participants annually from 40+ countries. We've maintained our commitment to environmental conservation, competitor safety, and celebrating this timeless underwater treasure hunting tradition.
</p>
<p class="text-lg text-stone-600 mb-8">
Our competition sites are carefully selected pristine freshwater lakes with sustainable mussel populations, ensuring both competitive excellence and environmental responsibility.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg transition duration-300">
Learn More
</button>
<button class="border-2 border-stone-300 hover:border-blue-600 text-stone-700 hover:text-blue-600 font-semibold px-6 py-3 rounded-lg transition duration-300">
Safety Protocols
</button>
</div>
</div>
<div class="space-y-4">
<div class="bg-white rounded-xl p-6 shadow-lg">
<h3 class="text-2xl font-bold text-stone-900 mb-2">Eco-Friendly</h3>
<p class="text-stone-600">All competitions follow strict environmental guidelines to protect freshwater ecosystems and mussel populations.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg">
<h3 class="text-2xl font-bold text-stone-900 mb-2">Safety Certified</h3>
<p class="text-stone-600">Professional dive masters and medical staff ensure the highest safety standards for all participants.</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg">
<h3 class="text-2xl font-bold text-stone-900 mb-2">Global Recognition</h3>
<p class="text-stone-600">Officially recognized by the International Diving Sports Federation and broadcast worldwide.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Registration Section -->
<section id="register" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-4xl lg:text-5xl font-bold text-stone-900 mb-4">Register for Competition</h2>
<p class="text-xl text-stone-600 max-w-3xl mx-auto">
Ready to dive for pearls? Registration is now open for this year's championship. Limited spots available in each division.
</p>
</div>
<div class="grid lg:grid-cols-2 gap-12">
<div>
<div class="bg-stone-100 rounded-xl p-8">
<h3 class="text-2xl font-bold text-stone-900 mb-6">Competition Details</h3>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<div>
<div class="font-semibold text-stone-900">Competition Dates</div>
<div class="text-stone-600">July 15-17, 2024<br>Crystal Lake, Michigan</div>
</div>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div>
<div class="font-semibold text-stone-900">Registration Deadline</div>
<div class="text-stone-600">June 1, 2024</div>
</div>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
<div>
<div class="font-semibold text-stone-900">Requirements</div>
<div class="text-stone-600">Valid diving certification, medical clearance, insurance coverage</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="bg-stone-100 rounded-xl p-8">
<h3 class="text-2xl font-bold text-stone-900 mb-6">Contact Information</h3>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<div>
<div class="font-semibold text-stone-900">Headquarters</div>
<div class="text-stone-600">1250 Lakeshore Drive<br>Traverse City, MI 49686</div>
</div>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg>
<div>
<div class="font-semibold text-stone-900">Phone</div>
<div class="text-stone-600">(231) 555-DIVE</div>
</div>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-blue-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<div>
<div class="font-semibold text-stone-900">Email</div>
<div class="text-stone-600">[email protected] </div>
</div>
</div>
</div>
<div class="mt-8 p-4 bg-blue-50 rounded-lg">
<h4 class="font-bold text-stone-900 mb-2">Early Bird Discount</h4>
<p class="text-stone-600 text-sm">
Register before April 1st and save 20% on entry fees! Limited time offer for all competition divisions.
</p>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<h3 class="text-2xl font-bold text-stone-900 mb-4">Follow the Championship</h3>
<div class="flex justify-center space-x-4">
<a href="#" class="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<a href="#" class="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-gradient-to-br from-blue-600 to-blue-700 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl lg:text-5xl font-bold mb-6">Ready to Dive for Glory?</h2>
<p class="text-xl mb-8 text-blue-100 max-w-3xl mx-auto">
Join hundreds of competitors from around the world in the ultimate test of diving skill, endurance, and treasure-hunting expertise. Register today and make your mark in pearl diving history.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-white hover:bg-stone-100 text-blue-700 font-semibold px-8 py-4 rounded-lg transition duration-300 transform hover:scale-105">
Register Now
</button>
<button class="border-2 border-white hover:bg-white hover:text-blue-700 font-semibold px-8 py-4 rounded-lg transition duration-300">
Download Brochure
</button>
</div>
</div>
</section>
</main>
<footer class="bg-stone-900 text-stone-300">
<div class="container mx-auto px-6 py-12">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
</div>
<span class="text-2xl font-bold text-white">Pearl Dive Championship</span>
</div>
<p class="text-stone-400 mb-4">
The world's premier freshwater pearl diving competition, celebrating tradition, skill, and underwater adventure.
</p>
<div class="flex space-x-3">
<a href="#" class="w-8 h-8 bg-stone-800 hover:bg-blue-600 rounded-lg flex items-center justify-center transition duration-300">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="w-8 h-8 bg-stone-800 hover:bg-blue-600 rounded-lg flex items-center justify-center transition duration-300">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</a>
<a href="#" class="w-8 h-8 bg-stone-800 hover:bg-blue-600 rounded-lg flex items-center justify-center transition duration-300">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
</svg>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-4">Competition</h3>
<ul class="space-y-2">
<li><a href="#home" class="text-stone-400 hover:text-blue-400 transition duration-300">Home</a></li>
<li><a href="#competition" class="text-stone-400 hover:text-blue-400 transition duration-300">Divisions</a></li>
<li><a href="#about" class="text-stone-400 hover:text-blue-400 transition duration-300">About</a></li>
<li><a href="#register" class="text-stone-400 hover:text-blue-400 transition duration-300">Registration</a></li>
<li><a href="#" class="text-stone-400 hover:text-blue-400 transition duration-300">Rules & Safety</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-stone-400 hover:text-blue-400 transition duration-300">Training Programs</a></li>
<li><a href="#" class="text-stone-400 hover:text-blue-400 transition duration-300">Equipment Guide</a></li>
<li><a href="#" class="text-stone-400 hover:text-blue-400 transition duration-300">Past Winners</a></li>
<li><a href="#" class="text-stone-400 hover:text-blue-400 transition duration-300">Live Results</a></li>
<li><a href="#" class="text-stone-400 hover:text-blue-400 transition duration-300">Sponsors</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-4">Newsletter</h3>
<p class="text-stone-400 mb-4 text-sm">
Get updates on competition dates, registration, and pearl diving tips.
</p>
<div class="flex">
<input type="email" placeholder="Enter your email" class="flex-1 px-3 py-2 bg-stone-800 text-white rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-600">
<button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition duration-300">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="border-t border-stone-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<div class="text-stone-400 text-sm">
© 2024 Pearl Dive Championship. All rights reserved.
</div>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-stone-400 hover:text-blue-400 text-sm transition duration-300">Privacy Policy</a>
<a href="#" class="text-stone-400 hover:text-blue-400 text-sm transition duration-300">Terms & Conditions</a>
<a href="#" class="text-stone-400 hover:text-blue-400 text-sm transition duration-300">Environmental Policy</a>
</div>
</div>
</div>
</footer>