Verspielte juwelenfarbene Anzeige von Fotografie-Inhalten

<div class="font-sans bg-amber-50 text-emerald-950 dark:bg-zinc-900 dark:text-emerald-100 p-4 sm:p-8 md:p-12 lg:p-16 rounded-3xl shadow-xl border border-amber-200 dark:border-zinc-800 transition-colors duration-300">

  <!-- Header Section -->
  <header class="flex flex-col md:flex-row items-center justify-between mb-12">
    <div class="flex items-center space-x-4 mb-6 md:mb-0">
      <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="Photographer Avatar" class="w-20 h-20 rounded-full object-cover shadow-lg border-4 border-emerald-400 dark:border-emerald-600 animate-bounce-slow">
      <div>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-emerald-800 dark:text-emerald-300 drop-shadow-lg leading-tight">Lens Lullaby</h1>
        <p class="text-xl sm:text-2xl text-emerald-700 dark:text-emerald-400 font-medium">Capturing Joy, One Pixel at a Time</p>
      </div>
    </div>
    <nav class="flex flex-wrap justify-center gap-4 sm:gap-6">
      <a href="#gallery" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">Gallery</a>
      <a href="#about" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">About</a>
      <a href="#contact" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">Contact</a>
    </nav>
  </header>

  <!-- Featured Photo Section -->
  <section class="mb-16 bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-800 dark:to-teal-900 rounded-3xl p-6 sm:p-8 shadow-2xl animate-pop-in border border-emerald-300 dark:border-teal-700">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Featured Snapshots</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
      <div class="relative col-span-1 md:col-span-2 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
        <img src="https://picsum.photos/id/1050/800/600" alt="Featured Photo 1" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
        <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <p class="text-white font-semibold text-lg drop-shadow-lg">Mountain Majesty</p>
        </div>
      </div>
      <div class="relative col-span-1 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
        <img src="https://picsum.photos/id/1018/800/600" alt="Featured Photo 2" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
        <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <p class="text-white font-semibold text-lg drop-shadow-lg">Forest Whispers</p>
        </div>
      </div>
      <div class="relative col-span-1 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
        <img src="https://picsum.photos/id/1003/800/600" alt="Featured Photo 3" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
        <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <p class="text-white font-semibold text-lg drop-shadow-lg">Ocean's Embrace</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Photo Gallery Grid -->
  <section id="gallery" class="mb-16">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Our Charming Gallery</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Photo Card 1 -->
      <div class="bg-rose-100 dark:bg-rose-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-rose-300 dark:border-rose-700 cursor-pointer">
        <img src="https://picsum.photos/id/1025/400/300" alt="Gallery Image 1" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-rose-800 dark:text-rose-200 mb-2">Playful Pup</h3>
        <p class="text-sm text-rose-700 dark:text-rose-300">A furry friend enjoying the sunshine.</p>
      </div>
      <!-- Photo Card 2 -->
      <div class="bg-violet-100 dark:bg-violet-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-violet-300 dark:border-violet-700 cursor-pointer">
        <img src="https://picsum.photos/id/1069/400/300" alt="Gallery Image 2" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-violet-800 dark:text-violet-200 mb-2">Urban Glow</h3>
        <p class="text-sm text-violet-700 dark:text-violet-300">City lights at twilight, a symphony of colors.</p>
      </div>
      <!-- Photo Card 3 -->
      <div class="bg-emerald-100 dark:bg-emerald-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-emerald-300 dark:border-emerald-700 cursor-pointer">
        <img src="https://picsum.photos/id/111/400/300" alt="Gallery Image 3" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-emerald-800 dark:text-emerald-200 mb-2">Nature's Embrace</h3>
        <p class="text-sm text-emerald-700 dark:text-emerald-300">Lush green forest, a peaceful escape.</p>
      </div>
      <!-- Photo Card 4 -->
      <div class="bg-sky-100 dark:bg-sky-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-sky-300 dark:border-sky-700 cursor-pointer">
        <img src="https://picsum.photos/id/1084/400/300" alt="Gallery Image 4" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-sky-800 dark:text-sky-200 mb-2">Desert Harmony</h3>
        <p class="text-sm text-sky-700 dark:text-sky-300">Sand dunes and skies, a timeless landscape.</p>
      </div>
      <!-- Photo Card 5 -->
      <div class="bg-rose-100 dark:bg-rose-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-rose-300 dark:border-rose-700 cursor-pointer">
        <img src="https://picsum.photos/id/1043/400/300" alt="Gallery Image 5" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-rose-800 dark:text-rose-200 mb-2">Bright Bloom</h3>
        <p class="text-sm text-rose-700 dark:text-rose-300">Vibrant flowers in full splendid bloom.</p>
      </div>
      <!-- Photo Card 6 -->
      <div class="bg-violet-100 dark:bg-violet-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-violet-300 dark:border-violet-700 cursor-pointer">
        <img src="https://picsum.photos/id/1048/400/300" alt="Gallery Image 6" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-violet-800 dark:text-violet-200 mb-2">Cozy Corner</h3>
        <p class="text-sm text-violet-700 dark:text-violet-300">A warm, inviting space for quiet moments.</p>
      </div>
      <!-- Photo Card 7 -->
      <div class="bg-emerald-100 dark:bg-emerald-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-emerald-300 dark:border-emerald-700 cursor-pointer">
        <img src="https://picsum.photos/id/1039/400/300" alt="Gallery Image 7" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-emerald-800 dark:text-emerald-200 mb-2">Leafy Green</h3>
        <p class="text-sm text-emerald-700 dark:text-emerald-300">Patterns of nature in close-up.</p>
      </div>
      <!-- Photo Card 8 -->
      <div class="bg-sky-100 dark:bg-sky-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-sky-300 dark:border-sky-700 cursor-pointer">
        <img src="https://picsum.photos/id/1000/400/300" alt="Gallery Image 8" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-sky-800 dark:text-sky-200 mb-2">Rustic Charm</h3>
        <p class="text-sm text-sky-700 dark:text-sky-300">Old world beauty, captured in time.</p>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="mb-16 bg-gradient-to-bl from-emerald-100 to-sky-100 dark:from-emerald-800 dark:to-sky-900 rounded-3xl p-6 sm:p-8 shadow-2xl animate-fade-in border border-emerald-300 dark:border-sky-700">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Meet the Visionary</h2>
    <div class="flex flex-col md:flex-row items-center md:items-start gap-8">
      <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Photographer Profile" class="w-48 h-48 rounded-full object-cover shadow-2xl border-6 border-emerald-500 dark:border-emerald-700 flex-shrink-0 animate-spin-slow-reverse">
      <div class="text-center md:text-left">
        <h3 class="text-3xl font-semibold text-emerald-700 dark:text-emerald-400 mb-4">Anya Pixelbloom</h3>
        <p class="text-lg leading-relaxed text-emerald-900 dark:text-emerald-200 mb-4">
          Hello! I'm Anya, a passionate photographer with an eye for the whimsical and joy-filled moments of life. 
          My journey began with a simple point-and-shoot camera and a dream to capture the hidden magic in everyday scenes. 
          From the grand landscapes to the tiniest details, I believe every shot tells a unique story.
        </p>
        <p class="text-lg leading-relaxed text-emerald-900 dark:text-emerald-200">
          My style is a blend of vibrant colors, playful compositions, and a touch of fantasy. I love connecting with my subjects, 
          whether they're people, pets, or places, and bringing out their true essence. Let's create some wonderful memories together!
        </p>
      </div>
    </div>
  </section>

  <!-- Testimonials Section -->
  <section class="mb-16">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Hear the Happy Snaps!</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-amber-100 dark:bg-amber-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-amber-300 dark:border-amber-700 animate-slide-up">
        <p class="text-lg italic text-amber-800 dark:text-amber-200 mb-4">"Anya's photos radiated pure joy! She captured our family's laughter and love in such a vibrant, authentic way. Every picture is a treasure!"</p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-amber-400">
          <div>
            <p class="font-semibold text-amber-900 dark:text-amber-100">Clara & Family</p>
            <p class="text-sm text-amber-700 dark:text-amber-300">Happy Clients</p>
          </div>
        </div>
      </div>
      <div class="bg-teal-100 dark:bg-teal-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-teal-300 dark:border-teal-700 animate-slide-up animation-delay-200">
        <p class="text-lg italic text-teal-800 dark:text-teal-200 mb-4">"The colors and composition in her landscape shots are breathtaking. Anya truly brings out the magic in every scene. Highly recommend!"</p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-teal-400">
          <div>
            <p class="font-semibold text-teal-900 dark:text-teal-100">Leo Explorer</p>
            <p class="text-sm text-teal-700 dark:text-teal-300">Adventure Enthusiast</p>
          </div>
        </div>
      </div>
      <div class="bg-rose-100 dark:bg-rose-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-rose-300 dark:border-rose-700 animate-slide-up animation-delay-400">
        <p class="text-lg italic text-rose-800 dark:text-rose-200 mb-4">"Professional, fun, and incredibly talented! Anya made our pet photoshoot an absolute blast, and the results were more charming than we imagined."</p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/women/55.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-rose-400">
          <div>
            <p class="font-semibold text-rose-900 dark:text-rose-100">Zara & Whiskers</p>
            <p class="text-sm text-rose-700 dark:text-rose-300">Pet Parents</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Call to Action / Contact -->
  <section id="contact" class="bg-gradient-to-tr from-emerald-200 to-violet-200 dark:from-emerald-700 dark:to-violet-800 rounded-3xl p-8 sm:p-10 text-center shadow-2xl animate-pulse-light border border-emerald-400 dark:border-violet-700">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-emerald-900 dark:text-emerald-100 mb-6 drop-shadow">Ready to Capture Your Story?</h2>
    <p class="text-xl sm:text-2xl text-emerald-800 dark:text-emerald-200 mb-8 max-w-3xl mx-auto">Let's create some magical moments together! Reach out and tell me about your vision.</p>
    <a href="mailto:[email protected]" class="inline-block bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-400 dark:hover:bg-emerald-300 text-white dark:text-emerald-900 text-xl sm:text-2xl font-bold px-10 py-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out border-2 border-emerald-600 dark:border-emerald-400 animate-button-pop">
      Let's Chat!
    </a>
  </section>

  <!-- Custom Keyframe Animations (for demonstration purposes, would be in CSS) -->
  <style>
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .animate-bounce-slow {
      animation: bounce-slow 4s infinite ease-in-out;
    }

    @keyframes pop-in {
      0% { opacity: 0; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1); }
    }
    .animate-pop-in {
      animation: pop-in 0.8s ease-out forwards;
    }

    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    .animate-fade-in {
      animation: fade-in 1s ease-out forwards;
    }

    @keyframes spin-slow-reverse {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }
    .animate-spin-slow-reverse {
      animation: spin-slow-reverse 60s linear infinite;
    }

    @keyframes slide-up {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .animate-slide-up {
      animation: slide-up 0.6s ease-out forwards;
    }
    /* Delay variants */
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-400 { animation-delay: 0.4s; }

    @keyframes pulse-light {
      0%, 100% { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
      50% { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 20px -5px rgba(0, 0, 0, 0.25); }
    }

    .dark .animate-pulse-light {
      animation: pulse-light 3s ease-in-out infinite;
    }


    @keyframes button-pop {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }
    .animate-button-pop {
      animation: button-pop 2s infinite ease-in-out;
    }

  </style>

</div>