portfolio/app/components/Hero.tsx

import React, { useEffect, useState } from "react";
import Image from "next/image";

export default function Hero() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsVisible(true);
    }, 150); // Delay to start the animation
  }, []);

    return (
        <div
            id="about"
            className={`flex flex-col md:flex-row items-center justify-center pt-16 pb-16 px-6 text-gray-700 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
        >
            <div
                className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg text-center">
                <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">
                    Hi, I’m Dennis
                </h1>
                <h2 className="mt-2 text-xl md:text-2xl font-semibold text-gray-700">
                    Student & Software Engineer
                </h2>
                <h3 className="mt-1 text-lg md:text-xl text-gray-600">
                    Based in Osnabrück, Germany
                </h3>
                <p className="mt-6 text-gray-800 text-lg leading-relaxed">
                    Passionate about technology, coding, and solving real-world problems.
                    I enjoy building innovative solutions and continuously expanding my
                    knowledge.
                </p>
                <p className="mt-4 text-gray-700 text-base">
                    Currently working on exciting projects that merge creativity with
                    functionality. Always eager to learn and collaborate!
                </p>
            </div>
            <div className="flex mt-8 md:mt-0 md:ml-12">
                <Image
                    src="/images/me.jpg"
                    alt="Image of Dennis"
                    width={400}
                    height={400}
                    className="rounded-2xl shadow-lg shadow-gray-700 object-cover"
                    loading="lazy" // Lazy Loading
                    style={{width: "auto", height: "400px"}}
                    sizes="(max-width: 640px) 640px, 828px" // Definiere, welche Bildgröße bei welcher Bildschirmgröße geladen wird
                />
            </div>
        </div>
    );
}