<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Music Player - Anggazyy</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Animasi Smooth Scroll */
    html {
      scroll-behavior: smooth;
    }
    /* Animasi Fade-in */
    .fade-in {
      animation: fadeIn 2s ease-in-out;
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    /* Hover pada playlist card */
    .playlist-card:hover {
      transform: scale(1.05);
      transition: transform 0.2s ease-in-out;
    }
    /* Modern Dark Theme */
    body {
      background: linear-gradient(to bottom, #121212, #1e1e1e);
      color: #fff;
      font-family: 'Arial', sans-serif;
    }
    /* Gradient Button */
    .btn-gradient {
      background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
      color: white;
      padding: 10px 30px;
      border-radius: 30px;
      text-transform: uppercase;
      letter-spacing: 2px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
    }
    .btn-gradient:hover {
      background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
      transform: translateY(-5px);
    }
    /* Playlist Section Styling */
    .playlist-card {
      background-color: #2c2c2c;
      border-radius: 15px;
      padding: 20px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .playlist-card img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      margin-bottom: 15px;
    }
    .playlist-card h3 {
      font-size: 1.25rem;
      font-weight: bold;
      color: #fff;
    }
    .playlist-card p {
      font-size: 0.875rem;
      color: #bbb;
    }
    /* Audio Player Section */
    #audioPlayer {
      padding: 40px 20px;
      text-align: center;
    }
    #audioPlayer h2 {
      font-size: 2rem;
      color: #ffb700;
      margin-bottom: 20px;
    }
    audio {
      background: #333;
      border-radius: 10px;
      width: 100%;
      max-width: 600px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    /* Responsive Design */
    @media screen and (max-width: 768px) {
      .playlist-card {
        padding: 15px;
      }
      audio {
        max-width: 100%;
      }
    }
  </style>
</head>
<body>
  <!-- Welcome Section -->
  <section class="h-screen flex items-center justify-center text-center bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white">
    <div>
      <h1 class="text-5xl font-bold mb-4 fade-in">Selamat Datang di Music Player 🎶</h1>
      <p class="text-lg text-gray-200 mb-8 fade-in">Nikmati pengalaman musik terbaik langsung di sini!</p>
      <a href="#playlistSection" class="btn-gradient mt-8 inline-block">
        Lihat Playlist
      </a>
    </div>
  </section>

  <!-- Playlist Section -->
  <section id="playlistSection" class="py-12">
    <div class="container mx-auto px-4">
      <h2 class="text-3xl font-bold text-center mb-8 text-indigo-400">Playlist Lagu</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Playlist Card 1 -->
        <a href="/play" class="playlist-card block shadow-lg">
          <img src="https://files.catbox.moe/pl63td.jpg" alt="Playlist Bernadya">
          <h3 class="text-lg font-semibold text-white">Playlist Bernadya</h3>
          <p class="text-gray-400 text-sm">🌟 Dibuat oleh anggazyy</p>
        </a>
        <!-- Playlist lainnya bisa ditambahkan -->
      </div>
    </div>
  </section>
</body>
</html>