Hero improvements

src/App.tsx

@@ -6,6 +6,8 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
 import ScrollToTop from "./components/ScrollTop";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 const queryClient = new QueryClient();
 

src/components/Hero.tsx

@@ -7,13 +7,13 @@ const Hero = () => {
       className="relative min-h-[600px] md:min-h-[700px] lg:min-h-[800px] bg-cover bg-center bg-no-repeat pt-28 pb-16"
       style={{ backgroundImage: "url('/images/abteilung-bg.jpg')" }}
     >
-      <div className="absolute inset-0 bg-black/15 z-0" />
+      <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/30 to-transparent z-0" />
 
       <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex flex-col md:flex-row items-center">
           <div className="md:w-1/2 text-white">
-            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
-              Willkommen bei der <span className="text-white">TG Laudenbach - Abteilung Volleyball</span>
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold drop-shadow-md">
+          Willkommen bei der <span className="text-white">TG Laudenbach - Abteilung Volleyball</span>
             </h1>
             <p className="mt-4 text-lg md:text-xl">
               Volleyball mit Leidenschaft und Teamgeist – werde Teil unserer Gemeinschaft!