Make Why Clean page more impactful and visually engaging
- 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
This commit is contained in:
@@ -3,157 +3,233 @@
|
||||
*/
|
||||
export function WhyCleanPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-extrabold text-gray-900 sm:text-5xl mb-4">
|
||||
Why Clean Our Beaches?
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Understanding the environmental impact of beach litter and why action matters
|
||||
</p>
|
||||
</div>
|
||||
<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 rounded-lg shadow-lg p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||||
<span className="text-3xl mr-3">🌊</span>
|
||||
Environmental Impact
|
||||
<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">
|
||||
<p>
|
||||
Beach litter poses a severe threat to marine ecosystems and coastal environments.
|
||||
Plastic waste, which makes up the majority of beach litter, can take hundreds of
|
||||
years to decompose, breaking down into microplastics that contaminate the food chain.
|
||||
<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>
|
||||
<p>
|
||||
<strong>Key impacts include:</strong>
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li>Marine animals mistake plastic for food, leading to ingestion and entanglement</li>
|
||||
<li>Toxic chemicals from degrading plastics leach into water and sediment</li>
|
||||
<li>Microplastics accumulate in fish and shellfish, entering the human food chain</li>
|
||||
<li>Beach litter destroys habitats for nesting birds and marine life</li>
|
||||
<li>Coastal vegetation is damaged by debris accumulation</li>
|
||||
</ul>
|
||||
<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 rounded-lg shadow-lg p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||||
<span className="text-3xl mr-3">🐢</span>
|
||||
Impact on Marine Life
|
||||
<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">
|
||||
<p>
|
||||
Over 100,000 marine mammals and sea turtles die each year from plastic entanglement
|
||||
or ingestion. Seabirds are particularly vulnerable, with studies showing that 90% of
|
||||
seabirds have plastic in their stomachs.
|
||||
<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>
|
||||
<p>
|
||||
<strong>Specific threats:</strong>
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li>Fishing nets and lines cause entanglement and drowning</li>
|
||||
<li>Plastic bags are mistaken for jellyfish by sea turtles</li>
|
||||
<li>Bottle caps and small plastics block digestive systems</li>
|
||||
<li>Chemical pollutants affect reproduction and development</li>
|
||||
<li>Ghost fishing gear continues to trap and kill marine life for years</li>
|
||||
</ul>
|
||||
<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 rounded-lg shadow-lg p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||||
<span className="text-3xl mr-3">⚡</span>
|
||||
Impact on Wave Power Generation
|
||||
<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">
|
||||
<p>
|
||||
Ireland is investing heavily in renewable ocean energy, including wave power generators.
|
||||
Beach and ocean litter poses significant operational challenges to these technologies:
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li>Floating debris can damage or clog wave energy converters</li>
|
||||
<li>Plastic waste interferes with moving parts and turbines</li>
|
||||
<li>Fishing nets and ropes can entangle underwater equipment</li>
|
||||
<li>Maintenance costs increase due to debris removal requirements</li>
|
||||
<li>Equipment efficiency decreases when fouled by marine litter</li>
|
||||
<li>Installation and operation of offshore devices becomes more hazardous</li>
|
||||
</ul>
|
||||
<p>
|
||||
Clean oceans are essential for Ireland's transition to renewable energy and achieving
|
||||
climate goals. Marine litter directly undermines these efforts.
|
||||
<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 rounded-lg shadow-lg p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||||
<span className="text-3xl mr-3">💰</span>
|
||||
Economic Impact
|
||||
<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">
|
||||
<p>
|
||||
Beach litter has significant economic consequences for coastal communities:
|
||||
<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>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li>Tourism revenue decreases as beaches become less attractive</li>
|
||||
<li>Local governments spend millions annually on beach cleanup</li>
|
||||
<li>Fishing industries suffer from contaminated catches and damaged equipment</li>
|
||||
<li>Property values decline in areas with polluted coastlines</li>
|
||||
<li>Healthcare costs increase from pollution-related illnesses</li>
|
||||
</ul>
|
||||
<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 rounded-lg shadow-lg p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||||
<span className="text-3xl mr-3">🏥</span>
|
||||
Human Health Concerns
|
||||
<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">
|
||||
<p>
|
||||
Beach litter directly affects human health and safety:
|
||||
<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>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li>Sharp objects like broken glass and metal cause injuries</li>
|
||||
<li>Microplastics in seafood may contain harmful chemicals</li>
|
||||
<li>Bacteria and pathogens thrive on marine debris</li>
|
||||
<li>Chemical pollutants from plastics can cause hormonal disruption</li>
|
||||
<li>Beach users face increased risk of cuts, infections, and illness</li>
|
||||
</ul>
|
||||
<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-blue-600 rounded-lg shadow-lg p-8 text-white">
|
||||
<h2 className="text-2xl font-bold mb-4 flex items-center">
|
||||
<span className="text-3xl mr-3">🤝</span>
|
||||
What You Can Do
|
||||
<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-4">
|
||||
<p>
|
||||
Every action counts in protecting Ireland's beautiful coastline. Here's how you can help:
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-2 ml-4">
|
||||
<li>Report litter using this platform to track pollution patterns</li>
|
||||
<li>Participate in organized beach cleanup events</li>
|
||||
<li>Reduce single-use plastics in your daily life</li>
|
||||
<li>Properly dispose of waste and recycle whenever possible</li>
|
||||
<li>Educate others about the impact of marine litter</li>
|
||||
<li>Support policies and businesses that prioritize ocean health</li>
|
||||
</ul>
|
||||
<p className="mt-6 font-semibold">
|
||||
Together, we can make a difference. Start by reporting litter today.
|
||||
<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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user