Paul Bailey
51a8b4999d
- Add beach background image with gradient overlay - Use larger, bolder headlines with emotional impact - Add color-coded sections (blue, red, green, purple, orange) - Include visual cards and grid layouts for better readability - Add hover effects and transitions for interactivity - Use emojis and icons more prominently - Create compelling call-to-action with yellow highlight box - Improve typography with larger text and better hierarchy
237 lines
13 KiB
TypeScript
237 lines
13 KiB
TypeScript
/**
|
||
* Why Clean Our Beaches page - Environmental facts and impact information
|
||
*/
|
||
export function WhyCleanPage() {
|
||
return (
|
||
<div
|
||
className="min-h-screen bg-cover bg-center bg-fixed"
|
||
style={{ backgroundImage: 'url(/IMG_6703.jpeg)' }}
|
||
>
|
||
<div className="min-h-screen bg-gradient-to-b from-blue-900/80 via-blue-800/85 to-blue-900/80">
|
||
<div className="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||
{/* Header */}
|
||
<div className="text-center mb-16">
|
||
<h1 className="text-5xl font-extrabold text-white sm:text-6xl mb-6 drop-shadow-lg">
|
||
Why Clean Our Beaches?
|
||
</h1>
|
||
<p className="text-2xl text-blue-100 drop-shadow-md max-w-3xl mx-auto">
|
||
Every piece of litter removed is a step toward healthier oceans, thriving wildlife, and a sustainable future
|
||
</p>
|
||
</div>
|
||
|
||
{/* Environmental Impact Section */}
|
||
<div className="bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl p-8 mb-8 transform hover:scale-[1.02] transition-transform duration-300">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center">
|
||
<span className="text-5xl mr-4">🌊</span>
|
||
Our Oceans Are Drowning in Plastic
|
||
</h2>
|
||
<div className="space-y-4 text-gray-700 text-lg">
|
||
<p className="font-semibold text-xl text-blue-900">
|
||
Beach litter isn't just unsightly—it's deadly. Plastic waste takes hundreds of years to decompose,
|
||
breaking down into microplastics that poison our food chain.
|
||
</p>
|
||
<div className="bg-blue-50 border-l-4 border-blue-600 p-4 my-6">
|
||
<p className="font-bold text-blue-900 text-xl mb-2">The Reality:</p>
|
||
<ul className="space-y-3 ml-4">
|
||
<li className="flex items-start">
|
||
<span className="text-blue-600 mr-2 text-xl">•</span>
|
||
<span>Marine animals mistake plastic for food, leading to starvation and death</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-blue-600 mr-2 text-xl">•</span>
|
||
<span>Toxic chemicals leach into water, poisoning entire ecosystems</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-blue-600 mr-2 text-xl">•</span>
|
||
<span>Microplastics are now found in the fish we eat and the water we drink</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-blue-600 mr-2 text-xl">•</span>
|
||
<span>Nesting sites for birds and marine life are destroyed by debris</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Marine Life Section */}
|
||
<div className="bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl p-8 mb-8 transform hover:scale-[1.02] transition-transform duration-300">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center">
|
||
<span className="text-5xl mr-4">🐢</span>
|
||
100,000+ Lives Lost Every Year
|
||
</h2>
|
||
<div className="space-y-4 text-gray-700 text-lg">
|
||
<p className="font-semibold text-xl text-red-900">
|
||
Over 100,000 marine mammals and sea turtles die annually from plastic.
|
||
90% of seabirds now have plastic in their stomachs.
|
||
</p>
|
||
<div className="grid md:grid-cols-2 gap-4 my-6">
|
||
<div className="bg-gradient-to-br from-red-50 to-orange-50 border-l-4 border-red-500 p-4 rounded-r-lg">
|
||
<p className="font-bold text-red-900 mb-2">🎣 Entanglement</p>
|
||
<p className="text-sm">Fishing nets and lines trap and drown marine animals</p>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-red-50 to-orange-50 border-l-4 border-red-500 p-4 rounded-r-lg">
|
||
<p className="font-bold text-red-900 mb-2">🥤 Ingestion</p>
|
||
<p className="text-sm">Turtles mistake plastic bags for jellyfish, leading to starvation</p>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-red-50 to-orange-50 border-l-4 border-red-500 p-4 rounded-r-lg">
|
||
<p className="font-bold text-red-900 mb-2">☠️ Poisoning</p>
|
||
<p className="text-sm">Chemical pollutants disrupt reproduction and development</p>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-red-50 to-orange-50 border-l-4 border-red-500 p-4 rounded-r-lg">
|
||
<p className="font-bold text-red-900 mb-2">👻 Ghost Gear</p>
|
||
<p className="text-sm">Abandoned fishing equipment kills for decades</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Renewable Energy Section */}
|
||
<div className="bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl p-8 mb-8 transform hover:scale-[1.02] transition-transform duration-300">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center">
|
||
<span className="text-5xl mr-4">⚡</span>
|
||
Threatening Ireland's Green Future
|
||
</h2>
|
||
<div className="space-y-4 text-gray-700 text-lg">
|
||
<p className="font-semibold text-xl text-green-900">
|
||
Ireland is leading the way in wave power generation—but marine litter is sabotaging our renewable energy future.
|
||
</p>
|
||
<div className="bg-green-50 border-l-4 border-green-600 p-6 my-6">
|
||
<p className="font-bold text-green-900 text-xl mb-4">How Litter Damages Our Energy Infrastructure:</p>
|
||
<ul className="space-y-3">
|
||
<li className="flex items-start">
|
||
<span className="text-green-600 mr-3 text-2xl font-bold">⚙️</span>
|
||
<span><strong>Clogs turbines:</strong> Floating debris damages wave energy converters</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-600 mr-3 text-2xl font-bold">🔧</span>
|
||
<span><strong>Increases costs:</strong> Millions spent on debris removal and repairs</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-600 mr-3 text-2xl font-bold">📉</span>
|
||
<span><strong>Reduces efficiency:</strong> Fouled equipment generates less power</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-600 mr-3 text-2xl font-bold">⚠️</span>
|
||
<span><strong>Creates hazards:</strong> Installation and maintenance become dangerous</span>
|
||
</li>
|
||
</ul>
|
||
<p className="mt-4 font-semibold text-green-900">
|
||
Clean oceans aren't just good for wildlife—they're essential for Ireland's climate goals.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Economic Impact Section */}
|
||
<div className="bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl p-8 mb-8 transform hover:scale-[1.02] transition-transform duration-300">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center">
|
||
<span className="text-5xl mr-4">💰</span>
|
||
Costing Communities Millions
|
||
</h2>
|
||
<div className="space-y-4 text-gray-700 text-lg">
|
||
<p className="font-semibold text-xl text-purple-900">
|
||
Polluted beaches don't just hurt nature—they devastate local economies and livelihoods.
|
||
</p>
|
||
<div className="grid md:grid-cols-3 gap-4 my-6">
|
||
<div className="bg-gradient-to-br from-purple-50 to-pink-50 p-5 rounded-xl text-center">
|
||
<p className="text-4xl mb-2">🏖️</p>
|
||
<p className="font-bold text-purple-900 text-lg">Tourism Loss</p>
|
||
<p className="text-sm mt-2">Visitors avoid polluted beaches</p>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-purple-50 to-pink-50 p-5 rounded-xl text-center">
|
||
<p className="text-4xl mb-2">🎣</p>
|
||
<p className="font-bold text-purple-900 text-lg">Fishing Impact</p>
|
||
<p className="text-sm mt-2">Contaminated catches, damaged gear</p>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-purple-50 to-pink-50 p-5 rounded-xl text-center">
|
||
<p className="text-4xl mb-2">🧹</p>
|
||
<p className="font-bold text-purple-900 text-lg">Cleanup Costs</p>
|
||
<p className="text-sm mt-2">Millions spent annually by councils</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Human Health Section */}
|
||
<div className="bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl p-8 mb-8 transform hover:scale-[1.02] transition-transform duration-300">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-6 flex items-center">
|
||
<span className="text-5xl mr-4">🏥</span>
|
||
It's Personal: Your Health at Risk
|
||
</h2>
|
||
<div className="space-y-4 text-gray-700 text-lg">
|
||
<p className="font-semibold text-xl text-orange-900">
|
||
Beach litter isn't just an environmental issue—it's a direct threat to you and your family.
|
||
</p>
|
||
<div className="bg-orange-50 border-l-4 border-orange-600 p-6 my-6">
|
||
<p className="font-bold text-orange-900 text-xl mb-4">The Dangers Are Real:</p>
|
||
<ul className="space-y-3">
|
||
<li className="flex items-start">
|
||
<span className="text-orange-600 mr-3 text-xl">🔪</span>
|
||
<span><strong>Injuries:</strong> Broken glass and sharp metal cause cuts and infections</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-orange-600 mr-3 text-xl">🍽️</span>
|
||
<span><strong>Food contamination:</strong> Microplastics are now in the seafood we eat</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-orange-600 mr-3 text-xl">🦠</span>
|
||
<span><strong>Disease:</strong> Bacteria and pathogens thrive on marine debris</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-orange-600 mr-3 text-xl">⚗️</span>
|
||
<span><strong>Chemical exposure:</strong> Toxic pollutants cause hormonal disruption</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* What You Can Do Section */}
|
||
<div className="bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800 rounded-2xl shadow-2xl p-10 text-white transform hover:scale-[1.02] transition-transform duration-300">
|
||
<h2 className="text-4xl font-bold mb-6 flex items-center justify-center">
|
||
<span className="text-5xl mr-4">🤝</span>
|
||
You Have the Power to Change This
|
||
</h2>
|
||
<div className="space-y-6">
|
||
<p className="text-xl text-center font-semibold text-blue-100">
|
||
Every action counts. Every piece of litter removed saves a life. Here's how you can be part of the solution:
|
||
</p>
|
||
<div className="grid md:grid-cols-2 gap-4 my-8">
|
||
<div className="bg-white/10 backdrop-blur-sm p-5 rounded-xl border border-white/20">
|
||
<p className="text-2xl mb-2">📱</p>
|
||
<p className="font-bold text-lg mb-2">Report Litter</p>
|
||
<p className="text-blue-100 text-sm">Use this platform to document and track pollution patterns</p>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-sm p-5 rounded-xl border border-white/20">
|
||
<p className="text-2xl mb-2">🧹</p>
|
||
<p className="font-bold text-lg mb-2">Join Cleanups</p>
|
||
<p className="text-blue-100 text-sm">Participate in organized beach cleanup events</p>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-sm p-5 rounded-xl border border-white/20">
|
||
<p className="text-2xl mb-2">♻️</p>
|
||
<p className="font-bold text-lg mb-2">Reduce Plastic</p>
|
||
<p className="text-blue-100 text-sm">Cut single-use plastics from your daily life</p>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-sm p-5 rounded-xl border border-white/20">
|
||
<p className="text-2xl mb-2">📢</p>
|
||
<p className="font-bold text-lg mb-2">Spread the Word</p>
|
||
<p className="text-blue-100 text-sm">Educate others about marine litter impact</p>
|
||
</div>
|
||
</div>
|
||
<div className="bg-yellow-400 text-gray-900 p-6 rounded-xl text-center mt-8">
|
||
<p className="text-2xl font-bold mb-2">
|
||
Together, We Can Save Our Beaches
|
||
</p>
|
||
<p className="text-lg">
|
||
Start making a difference today. Report litter, join a cleanup, and protect Ireland's coastline.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|