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

@@ -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 
-      <div className="text-center">
+      className="min-h-screen bg-cover bg-center bg-no-repeat bg-fixed"
-        <h2 className="text-4xl font-extrabold text-gray-900 sm:text-5xl">
+      style={{ backgroundImage: 'url(/IMG_6703.jpeg)' }}
-          Track and Clean Ireland's Beaches
+    >
-        </h2>
+      {/* Full page overlay for better text readability */}
-        <p className="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
+      <div className="min-h-screen bg-black/40">
-          Join our community in mapping beach litter, organizing clean-up events, 
+        
-          and protecting our coastal environment through data-driven action.
+        {/* Hero Section */}
-        </p>
+        <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">
-        <SignedOut>
+            Track and Clean Ireland's Beaches
-          <div className="mt-8 flex justify-center space-x-4">
+          </h2>
-            <Link
+          <p className="mt-6 text-xl text-white max-w-3xl mx-auto drop-shadow-md">
-              to="/sign-up"
+            Join our community in mapping beach litter, organizing clean-up events, 
-              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"
+            and protecting our coastal environment through data-driven action.
-            >
-              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.
           </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">
+        {/* Features Section */}
-          <div className="text-blue-600 text-3xl mb-4">🗺️</div>
+        <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
-          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-            Interactive Maps
+            <div className="bg-white/95 backdrop-blur-sm p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
-          </h3>
+              <div className="text-blue-600 text-3xl mb-4">📍</div>
-          <p className="text-gray-600">
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">
-            Visualize litter hotspots, view reports from your area, and identify 
+                Report Litter
-            areas that need attention.
+              </h3>
-          </p>
+              <p className="text-gray-600">
-        </div>
+                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="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>
+              <div className="text-blue-600 text-3xl mb-4">🗺️</div>
-          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">
-            Organize Events
+                Interactive Maps
-          </h3>
+              </h3>
-          <p className="text-gray-600">
+              <p className="text-gray-600">
-            Create and join clean-up events, coordinate with volunteers, and make 
+                Visualize litter hotspots, view reports from your area, and identify 
-            a real impact on coastal health.
+                areas that need attention.
-          </p>
+              </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>