Add subtle moving background effect to the main welcome section

Implements parallax scrolling effect on the HeroSection component using `useEffect` and `useState` hooks to update the `transform` property.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d004b9e1-f9be-46e2-acda-f440ccd644a9
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/2910e6ce-2f70-48cf-8a6f-4d7f5bb6b04d.jpg

client/src/components/home/hero-section.tsx

@@ -1,14 +1,30 @@
 import { Link } from "wouter";
+import { useEffect, useState } from "react";
 import FadiaHeroImage from "../../assets/Fadia-15.jpg";
 
 export function HeroSection() {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   return (
-    <section className="relative">
+    <section className="relative overflow-hidden">
-      <div className="bg-cover bg-center h-[90vh] flex items-center justify-center" 
+      <div 
-           style={{
+        className="bg-cover bg-center h-[90vh] flex items-center justify-center" 
-             backgroundImage: `url(${FadiaHeroImage})`,
+        style={{
-             backgroundPosition: "center"
+          backgroundImage: `url(${FadiaHeroImage})`,
-           }}>
+          backgroundPosition: "center",
+          transform: `translateY(${scrollY * 0.5}px)`,
+          willChange: "transform"
+        }}
+      >
         <div className="absolute inset-0 bg-black bg-opacity-20"></div>
         
         <div className="relative text-center px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">