From 8be807b379af7559d966be4f1cdb7930f4c39ff7 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 16 Nov 2025 17:07:05 +0000
Subject: [PATCH] Add Irish beach background image to landing page

- Use IMG_6703.jpeg as full-page background with parallax effect
- Add dark overlay for better text readability
- Update feature cards with semi-transparent backgrounds
- Enhance buttons with hover effects and transitions
---
 src/pages/HomePage.tsx | 157 ++++++++++++++++++++++-------------------
 1 file changed, 84 insertions(+), 73 deletions(-)

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 68d27f6..80681bc 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -6,83 +6,94 @@ import { Link } from 'react-router-dom';
  */
 export function HomePage() {
   return (
-    <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-      <div className="text-center">
-        <h2 className="text-4xl font-extrabold text-gray-900 sm:text-5xl">
-          Track and Clean Ireland's Beaches
-        </h2>
-        <p className="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
-          Join our community in mapping beach litter, organizing clean-up events, 
-          and protecting our coastal environment through data-driven action.
-        </p>
-
-        <SignedOut>
-          <div className="mt-8 flex justify-center space-x-4">
-            <Link
-              to="/sign-up"
-              className="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"
-            >
-              Get Started
-            </Link>
-            <Link
-              to="/map"
-              className="px-8 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
-            >
-              View Map
-            </Link>
-          </div>
-        </SignedOut>
-
-        <SignedIn>
-          <div className="mt-8 flex justify-center space-x-4">
-            <Link
-              to="/reports/new"
-              className="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"
-            >
-              Report Litter
-            </Link>
-            <Link
-              to="/map"
-              className="px-8 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
-            >
-              View Map
-            </Link>
-          </div>
-        </SignedIn>
-      </div>
-
-      <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
-        <div className="bg-white p-6 rounded-lg shadow">
-          <div className="text-blue-600 text-3xl mb-4">📍</div>
-          <h3 className="text-lg font-semibold text-gray-900 mb-2">
-            Report Litter
-          </h3>
-          <p className="text-gray-600">
-            Document beach litter with photos and location data to raise awareness 
-            and track pollution patterns.
+    <div 
+      className="min-h-screen bg-cover bg-center bg-no-repeat bg-fixed"
+      style={{ backgroundImage: 'url(/IMG_6703.jpeg)' }}
+    >
+      {/* Full page overlay for better text readability */}
+      <div className="min-h-screen bg-black/40">
+        
+        {/* Hero Section */}
+        <div className="relative z-10 max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl drop-shadow-lg">
+            Track and Clean Ireland's Beaches
+          </h2>
+          <p className="mt-6 text-xl text-white max-w-3xl mx-auto drop-shadow-md">
+            Join our community in mapping beach litter, organizing clean-up events, 
+            and protecting our coastal environment through data-driven action.
           </p>
+
+          <SignedOut>
+            <div className="mt-10 flex justify-center space-x-4">
+              <Link
+                to="/sign-up"
+                className="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
+              >
+                Get Started
+              </Link>
+              <Link
+                to="/map"
+                className="px-8 py-3 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
+              >
+                View Map
+              </Link>
+            </div>
+          </SignedOut>
+
+          <SignedIn>
+            <div className="mt-10 flex justify-center space-x-4">
+              <Link
+                to="/reports/new"
+                className="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
+              >
+                Report Litter
+              </Link>
+              <Link
+                to="/map"
+                className="px-8 py-3 border-2 border-white text-base font-medium rounded-md text-white bg-white/10 backdrop-blur-sm hover:bg-white/20 md:py-4 md:text-lg md:px-10 shadow-lg transition-all hover:scale-105"
+              >
+                View Map
+              </Link>
+            </div>
+          </SignedIn>
         </div>
 
-        <div className="bg-white p-6 rounded-lg shadow">
-          <div className="text-blue-600 text-3xl mb-4">🗺️</div>
-          <h3 className="text-lg font-semibold text-gray-900 mb-2">
-            Interactive Maps
-          </h3>
-          <p className="text-gray-600">
-            Visualize litter hotspots, view reports from your area, and identify 
-            areas that need attention.
-          </p>
-        </div>
+        {/* Features Section */}
+        <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+            <div className="bg-white/95 backdrop-blur-sm p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
+              <div className="text-blue-600 text-3xl mb-4">📍</div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                Report Litter
+              </h3>
+              <p className="text-gray-600">
+                Document beach litter with photos and location data to raise awareness 
+                and track pollution patterns.
+              </p>
+            </div>
 
-        <div className="bg-white p-6 rounded-lg shadow">
-          <div className="text-blue-600 text-3xl mb-4">🤝</div>
-          <h3 className="text-lg font-semibold text-gray-900 mb-2">
-            Organize Events
-          </h3>
-          <p className="text-gray-600">
-            Create and join clean-up events, coordinate with volunteers, and make 
-            a real impact on coastal health.
-          </p>
+            <div className="bg-white/95 backdrop-blur-sm p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
+              <div className="text-blue-600 text-3xl mb-4">🗺️</div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                Interactive Maps
+              </h3>
+              <p className="text-gray-600">
+                Visualize litter hotspots, view reports from your area, and identify 
+                areas that need attention.
+              </p>
+            </div>
+
+            <div className="bg-white/95 backdrop-blur-sm p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
+              <div className="text-blue-600 text-3xl mb-4">🤝</div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                Organize Events
+              </h3>
+              <p className="text-gray-600">
+                Create and join clean-up events, coordinate with volunteers, and make 
+                a real impact on coastal health.
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>