From 5fce4cd1c60482adc7bf1fd47001ea8a1e75228f Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Thu, 19 Feb 2026 21:39:29 +0100
Subject: [PATCH] Add fade-in effect to hero image on load

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/components/HeroSection.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index 61cf1c3..7193ca0 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { motion } from 'framer-motion'
 import { ChevronDown } from 'lucide-react'
 
@@ -8,6 +9,8 @@ interface HeroSectionProps {
 }
 
 export default function HeroSection({ heroPhoto }: HeroSectionProps) {
+  const [imageLoaded, setImageLoaded] = useState(false)
+
   return (
     <section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden">
       {/* Background */}
@@ -16,7 +19,9 @@ export default function HeroSection({ heroPhoto }: HeroSectionProps) {
           <img
             src={`/api/files/${heroPhoto}`}
             alt="Maria Malejka"
-            className="w-full h-full object-cover"
+            className="w-full h-full object-cover transition-opacity duration-1000 ease-in-out"
+            style={{ opacity: imageLoaded ? 1 : 0 }}
+            onLoad={() => setImageLoaded(true)}
           />
           <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/80" />
           {/* Grain overlay */}