Add Why Clean Our Beaches page with environmental facts
- Create new WhyCleanPage with comprehensive environmental information - Include sections on marine life impact, wave power generation, economic impact, and human health - Add button to homepage for easy access to environmental facts - Update routing to include /why-clean path - Use responsive button layout with flex-wrap for mobile support
This commit is contained in:
160
src/pages/WhyCleanPage.tsx
Normal file
160
src/pages/WhyCleanPage.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* Why Clean Our Beaches page - Environmental facts and impact information
|
||||
*/
|
||||
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>
|
||||
|
||||
{/* 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
|
||||
</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.
|
||||
</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>
|
||||
</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
|
||||
</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.
|
||||
</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>
|
||||
</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
|
||||
</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.
|
||||
</p>
|
||||
</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
|
||||
</h2>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p>
|
||||
Beach litter has significant economic consequences for coastal communities:
|
||||
</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>
|
||||
</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
|
||||
</h2>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p>
|
||||
Beach litter directly affects human health and safety:
|
||||
</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>
|
||||
</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
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user