<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selachi Wave | Ride the Tide of Conservation</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
}
.font-playfair {
font-family: 'Playfair Display', serif;
}
.hero-bg {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1535007321201-2404c7b6473c?q=80&w=2070&auto=format&fit=crop');
background-size: cover;
background-position: center;
}
.card-flip {
perspective: 1000px;
}
.card-flip-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-flip:hover .card-flip-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
.icon-shadow {
filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Header -->
<header class="bg-white/80 backdrop-blur-md fixed top-0 left-0 right-0 z-50 shadow-md">
<div class="container mx-auto px-6 py-3 flex justify-between items-center">
<a href="#" class="flex items-center space-x-2">
<img src="https://storage.googleapis.com/gemini-prod/images/3a891b40-023a-4422-a720-30235b2e3137" alt="Selachi Wave Logo" class="h-12 w-12 object-contain">
<span class="font-bold text-xl text-cyan-700 font-playfair">Selachi Wave</span>
</a>
<nav class="hidden md:flex space-x-6">
<a href="#about" class="text-gray-600 hover:text-cyan-600 transition duration-300">Our Mission</a>
<a href="#squad" class="text-gray-600 hover:text-cyan-600 transition duration-300">The Squad</a>
<a href="#action" class="text-gray-600 hover:text-cyan-600 transition duration-300">Take Action</a>
<a href="#shop" class="text-gray-600 hover:text-cyan-600 transition duration-300">Shop</a>
<a href="#support" class="text-gray-600 hover:text-cyan-600 transition duration-300">Support</a>
<a href="#contact" class="text-gray-600 hover:text-cyan-600 transition duration-300">Contact Us</a>
</nav>
<button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden px-6 pt-2 pb-4">
<a href="#about" class="block py-2 text-gray-600 hover:text-cyan-600">Our Mission</a>
<a href="#squad" class="block py-2 text-gray-600 hover:text-cyan-600">The Squad</a>
<a href="#action" class="block py-2 text-gray-600 hover:text-cyan-600">Take Action</a>
<a href="#shop" class="block py-2 text-gray-600 hover:text-cyan-600">Shop</a>
<a href="#support" class="block py-2 text-gray-600 hover:text-cyan-600">Support</a>
<a href="#contact" class="block py-2 text-gray-600 hover:text-cyan-600">Contact Us</a>
</div>
</header>
<!-- Main Content -->
<main class="pt-20">
<!-- Hero Section -->
<section class="hero-bg h-[calc(100vh-80px)] flex items-center justify-center text-white text-center">
<div class="bg-black/30 p-8 rounded-2xl">
<img src="https://storage.googleapis.com/gemini-prod/images/3a891b40-023a-4422-a720-30235b2e3137" alt="Selachi Wave Logo" class="h-32 w-32 mx-auto mb-4 object-contain">
<h1 class="text-4xl md:text-6xl font-bold mb-4 font-playfair">Ride the Wave of Change</h1>
<p class="text-lg md:text-xl max-w-2xl mx-auto">Diving deep to protect sharks, rays, and our amazing oceans for future generations.</p>
<a href="#about" class="mt-8 inline-block bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">Discover Our Mission</a>
</div>
</section>
<!-- About Us Section -->
<section id="about" class="py-20 bg-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-cyan-800 mb-4 font-playfair">Our Mission: For the Ocean, For the Future</h2>
<p class="max-w-3xl mx-auto text-gray-600 mb-12">Selachi Wave is a movement for the next generation of ocean heroes. We're here to make a splash by sharing awesome stories and cool facts about sharks and rays, and showing how we can all work together to keep their ocean home healthy and thriving!</p>
<div class="grid md:grid-cols-3 gap-12">
<div class="flex flex-col items-center">
<div class="bg-cyan-100 p-5 rounded-full mb-4 icon-shadow">
<svg class="w-16 h-16 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<h3 class="text-xl font-bold mb-2">Inspire Action</h3>
<p class="text-gray-500">Through exciting stories and visuals, we spark a passion for marine life.</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-orange-100 p-5 rounded-full mb-4 icon-shadow">
<svg class="w-16 h-16 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
</div>
<h3 class="text-xl font-bold mb-2">Educate Creatively</h3>
<p class="text-gray-500">We make learning about ocean science fun, interactive, and super accessible.</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-teal-100 p-5 rounded-full mb-4 icon-shadow">
<svg class="w-16 h-16 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.657 7.343A8 8 0 0118 18c-1.223 0-2-1-3-2-2 0-4 1-4 1 2 2 4 2 4 2a8 8 0 00-1.343-5.657z"></path></svg>
</div>
<h3 class="text-xl font-bold mb-2">Empower Youth</h3>
<p class="text-gray-500">We give young people the tools and confidence to become ocean advocates.</p>
</div>
</div>
</div>
</section>
<!-- The Squad Section -->
<section id="squad" class="py-20 bg-cyan-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center text-cyan-800 mb-12 font-playfair">Meet the Selachi Squad</h2>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Great White Shark -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1569587112025-021003435552?q=80&w=1974&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Great White Shark</h3>
<p class="text-cyan-200">The Apex Predator</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Fin-tastic Fact!</h4>
<p>Great Whites can detect a single drop of blood in 100 liters of water! They use their amazing sense of smell to find their prey from miles away.</p>
</div>
</div>
</div>
<!-- Manta Ray -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1607920591822-03205a1e7b1a?q=80&w=1935&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Manta Ray</h3>
<p class="text-cyan-200">The Gentle Giant</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Jaw-some Fact!</h4>
<p>Manta Rays have the largest brain-to-body size ratio of any fish. They are incredibly intelligent and have been observed showing complex social behaviors.</p>
</div>
</div>
</div>
<!-- Hammerhead Shark -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1604237213498-74218f50353b?q=80&w=1974&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Hammerhead Shark</h3>
<p class="text-cyan-200">The 360° Hunter</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Fin-tastic Fact!</h4>
<p>Their uniquely shaped head, called a cephalofoil, gives them 360-degree vision, helping them spot prey above and below them with ease!</p>
</div>
</div>
</div>
<!-- Whale Shark -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1567483395191-c954c2b8a274?q=80&w=1974&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Whale Shark</h3>
<p class="text-cyan-200">The Starry Swimmer</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Jaw-some Fact!</h4>
<p>Each Whale Shark has a unique pattern of spots, just like a human fingerprint! Scientists use these patterns to identify and track individual sharks.</p>
</div>
</div>
</div>
<!-- Spotted Eagle Ray -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1599323133339-0144a86a69a4?q=80&w=1974&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Spotted Eagle Ray</h3>
<p class="text-cyan-200">The Ocean Flyer</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Fin-tastic Fact!</h4>
<p>These rays are known for their acrobatic leaps out of the water! They can jump several feet above the surface, though scientists are still debating why they do it.</p>
</div>
</div>
</div>
<!-- Thresher Shark -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1591735831639-afe64420f1a9?q=80&w=1974&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Thresher Shark</h3>
<p class="text-cyan-200">The Whip-Tailed Hunter</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Jaw-some Fact!</h4>
<p>The Thresher Shark uses its incredibly long tail fin like a whip to stun its prey before eating it. Talk about a tail-whipping takedown!</p>
</div>
</div>
</div>
<!-- Nurse Shark -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1571873733446-361058253162?q=80&w=1974&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Nurse Shark</h3>
<p class="text-cyan-200">The Chilled-Out Dweller</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Fin-tastic Fact!</h4>
<p>Nurse sharks are super relaxed! They often rest on the ocean floor in big groups and are powerful suction feeders, slurping up their prey like a vacuum.</p>
</div>
</div>
</div>
<!-- Tiger Shark -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1620779201234-4a3d86508d6c?q=80&w=2070&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Tiger Shark</h3>
<p class="text-cyan-200">The Ocean's Wastebasket</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Jaw-some Fact!</h4>
<p>Tiger sharks are not picky eaters! They've been found with everything from tires to license plates in their stomachs, earning them their unique nickname.</p>
</div>
</div>
</div>
<!-- Cownose Ray -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1617938382379-349b2b719932?q=80&w=2070&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Cownose Ray</h3>
<p class="text-cyan-200">The Golden Fleet</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Fin-tastic Fact!</h4>
<p>Cownose rays are famous for migrating in huge groups called "fevers," which can include up to 10,000 rays swimming together!</p>
</div>
</div>
</div>
<!-- Lemon Shark -->
<div class="card-flip h-80 rounded-xl">
<div class="card-flip-inner w-full h-full relative">
<div class="card-front absolute w-full h-full bg-cover bg-center rounded-xl shadow-lg" style="background-image: url('https://images.unsplash.com/photo-1607953934399-82f46755a159?q=80&w=1974&auto=format&fit=crop')">
<div class="w-full h-full bg-black/40 rounded-xl p-6 flex flex-col justify-end">
<h3 class="text-white text-2xl font-bold">Lemon Shark</h3>
<p class="text-cyan-200">The Social Swimmer</p>
</div>
</div>
<div class="card-back absolute w-full h-full bg-cyan-700 text-white rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-center">
<h4 class="text-xl font-bold mb-2">Jaw-some Fact!</h4>
<p>Lemon sharks are social butterflies! They often hang out in groups, especially in mangrove nurseries, and can learn from each other.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Threats Section -->
<section id="threats" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center text-cyan-800 mb-4 font-playfair">The Challenge Our Oceans Face</h2>
<p class="max-w-3xl mx-auto text-center text-gray-600 mb-12">Our ocean friends are facing some big hurdles, but by understanding the problems, we can be part of the solution!</p>
<div class="grid md:grid-cols-3 gap-8 text-center">
<div class="bg-gray-50 p-8 rounded-lg shadow-md">
<img src="https://placehold.co/100x100/FEE2E2/EF4444?text=Plastic" class="mx-auto mb-4 rounded-full" alt="Plastic Bottle Icon">
<h3 class="text-xl font-bold text-red-500 mb-2">Plastic Pollution</h3>
<p class="text-gray-600">Trash and tiny plastics are a big problem for marine animals who can mistake them for food.</p>
</div>
<div class="bg-gray-50 p-8 rounded-lg shadow-md">
<img src="https://placehold.co/100x100/DBEAFE/3B82F6?text=Net" class="mx-auto mb-4 rounded-full" alt="Fishing Net Icon">
<h3 class="text-xl font-bold text-blue-500 mb-2">Overfishing</h3>
<p class="text-gray-600">Taking too many fish from the sea disrupts the food web and harms shark and ray populations.</p>
</div>
<div class="bg-gray-50 p-8 rounded-lg shadow-md">
<img src="https://placehold.co/100x100/FEF3C7/F59E0B?text=Temp" class="mx-auto mb-4 rounded-full" alt="Thermometer Icon">
<h3 class="text-xl font-bold text-amber-500 mb-2">Climate Change</h3>
<p class="text-gray-600">A warming ocean affects the habitats and food sources that our marine friends rely on to survive.</p>
</div>
</div>
</div>
</section>
<!-- Call to Action Section -->
<section id="action" class="py-20 bg-teal-500 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-playfair">Become an Ocean Hero!</h2>
<p class="max-w-3xl mx-auto mb-12">You have the power to make a difference! Start with these simple missions to help protect our blue planet.</p>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-white/20 p-6 rounded-lg backdrop-blur-sm">
<h3 class="text-xl font-bold mb-2">Mission 1: Reduce</h3>
<p>Say no to single-use plastics like straws and bags. Use a reusable water bottle!</p>
</div>
<div class="bg-white/20 p-6 rounded-lg backdrop-blur-sm">
<h3 class="text-xl font-bold mb-2">Mission 2: Learn</h3>
<p>Read a book or watch a documentary about the ocean. Knowledge is your superpower!</p>
</div>
<div class="bg-white/20 p-6 rounded-lg backdrop-blur-sm">
<h3 class="text-xl font-bold mb-2">Mission 3: Share</h3>
<p>Tell your friends and family one cool fact you learned about sharks or rays today!</p>
</div>
<div class="bg-white/20 p-6 rounded-lg backdrop-blur-sm">
<h3 class="text-xl font-bold mb-2">Mission 4: Participate</h3>
<p>Join a local beach or park cleanup. Every piece of trash you pick up helps!</p>
</div>
</div>
</div>
</section>
<!-- Shop Section -->
<section id="shop" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center text-cyan-800 mb-4 font-playfair">Gear Up for Conservation</h2>
<p class="max-w-3xl mx-auto text-center text-gray-600 mb-12">Show your support for ocean life with our eco-friendly merch. Every purchase helps fund our conservation efforts!</p>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-50 rounded-lg shadow-md overflow-hidden">
<img src="https://placehold.co/600x400/BFDBFE/1E40AF?text=T-Shirt" alt="Ocean Hero T-Shirt" class="w-full h-56 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Ocean Hero T-Shirt</h3>
<p class="text-gray-600 mb-4">$25.00</p>
<a href="#" class="w-full text-center bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">Shop Now</a>
</div>
</div>
<div class="bg-gray-50 rounded-lg shadow-md overflow-hidden">
<img src="https://placehold.co/600x400/A5F3FC/0891B2?text=Bottle" alt="Reusable Water Bottle" class="w-full h-56 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Selachi Wave Bottle</h3>
<p class="text-gray-600 mb-4">$20.00</p>
<a href="#" class="w-full text-center bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">Shop Now</a>
</div>
</div>
<div class="bg-gray-50 rounded-lg shadow-md overflow-hidden">
<img src="https://placehold.co/600x400/FBCFE8/9D2678?text=Tote" alt="Tote Bag" class="w-full h-56 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Shark & Ray Tote Bag</h3>
<p class="text-gray-600 mb-4">$18.00</p>
<a href="#" class="w-full text-center bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">Shop Now</a>
</div>
</div>
</div>
</div>
</section>
<!-- Support Section -->
<section id="support" class="py-20 bg-cyan-50">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-cyan-800 mb-4 font-playfair">Join the Wave of Support</h2>
<p class="max-w-3xl mx-auto text-gray-600 mb-12">Your help is crucial for protecting marine ecosystems. Discover how you can contribute to our cause.</p>
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold text-cyan-700 mb-3">Donate</h3>
<p class="text-gray-600 mb-6">Every single dollar helps us fund research, education programs, and direct conservation action. Make a secure donation today and become a guardian of the ocean.</p>
<a href="#" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full transition duration-300">Donate Now</a>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold text-cyan-700 mb-3">Volunteer</h3>
<p class="text-gray-600 mb-6">Give your time and skills! From local cleanups to digital advocacy, there are many ways to get involved. Join our community of passionate volunteers and make a real impact.</p>
<a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-bold py-3 px-8 rounded-full transition duration-300">Get Involved</a>
</div>
</div>
</div>
</section>
<!-- Contact Us Section -->
<section id="contact" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="max-w-xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold text-cyan-800 mb-4 font-playfair">Get in Touch!</h2>
<p class="text-gray-600 mb-8">Have questions, ideas, or want to collaborate? We'd love to hear from you. Drop us a line!</p>
</div>
<form class="max-w-xl mx-auto">
<div class="mb-4">
<label for="name" class="block text-gray-700 font-bold mb-2">Name</label>
<input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="Your Name">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="your.email@example.com">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 font-bold mb-2">Message</label>
<textarea id="message" name="message" rows="5" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="Your message..."></textarea>
</div>
<div class="text-center">
<button type="submit" class="bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 px-8 rounded-full transition duration-300">Send Message</button>
</div>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-6 text-center">
<a href="#" class="flex items-center justify-center space-x-2 mb-4">
<img src="https://storage.googleapis.com/gemini-prod/images/3a891b40-023a-4422-a720-30235b2e3137" alt="Selachi Wave Logo" class="h-10 w-10 object-contain bg-white rounded-full p-1">
<span class="font-bold text-xl font-playfair">Selachi Wave</span>
</a>
<p class="mb-4">Making waves for a better ocean, together.</p>
<div class="flex justify-center space-x-6">
<!-- Social media icons -->
<a href="#" class="hover:text-cyan-400 transition duration-300">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /></svg>
</a>
<a href="#" class="hover:text-cyan-400 transition duration-300">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.71v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /></svg>
</a>
<a href="#" class="hover:text-cyan-400 transition duration-300">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.013-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 016.345 2.525c.636-.247 1.363-.416 2.427-.465C9.793 2.013 10.147 2 12.315 2zm-1.161 2.065c-1.056.048-1.695.218-2.258.435a2.848 2.848 0 00-1.06 1.06c-.217.563-.387 1.202-.435 2.258-.048 1.024-.06 1.344-.06 3.181s.012 2.158.06 3.181c.048 1.056.218 1.695.435 2.258a2.848 2.848 0 001.06 1.06c.563.217 1.202.387 2.258.435 1.024.048 1.344.06 3.181.06s2.158-.012 3.181-.06c1.056-.048 1.695-.218 2.258-.435a2.848 2.848 0 001.06-1.06c.217-.563-.387-1.202.435-2.258.048-1.024.06-1.344.06-3.181s-.012-2.158-.06-3.181c-.048-1.056-.218-1.695-.435-2.258a2.848 2.848 0 00-1.06-1.06c-.563-.217-1.202-.387-2.258-.435-1.024-.048-1.344-.06-3.181-.06s-2.158.012-3.181.06zM12 8.118a4.06 4.06 0 100 8.12 4.06 4.06 0 000-8.12zm0 6.06a1.999 1.999 0 110-4 1.999 1.999 0 010 4zm4.75-7.832a1.182 1.182 0 100-2.364 1.182 1.182 0 000 2.364z" clip-rule="evenodd" /></svg>
</a>
</div>
<p class="text-sm text-gray-400 mt-8">© 2024 Selachi Wave. All Rights Reserved.</p>
</div>
</footer>
<script>
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when a link is clicked
const mobileMenuLinks = mobileMenu.getElementsByTagName('a');
for (let i = 0; i < mobileMenuLinks.length; i++) {
mobileMenuLinks[i].addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
}
</script>
</body>
</html>