Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RIABOX — Included Products</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  <script src="https://unpkg.com/feather-icons"></script>
  <style>
    body {
      font-family: 'Inter', sans-serif;
      background-color: #000;
      color: #fff;
    }
    .cyberpunk-text {
      font-family: 'Orbitron', sans-serif;
      text-transform: uppercase;
    }
    .neon-pink {
      color: #ff2a6d;
      text-shadow: 0 0 10px #ff2a6d, 0 0 20px #ff2a6d;
    }
    .neon-blue {
      color: #05d9e8;
      text-shadow: 0 0 10px #05d9e8, 0 0 20px #05d9e8;
    }
    .neon-border {
      border: 1px solid #ff2a6d;
      box-shadow: 0 0 10px #ff2a6d, 0 0 20px rgba(255, 42, 109, 0.5);
    }
    .neon-border-blue {
      border: 1px solid #05d9e8;
      box-shadow: 0 0 10px #05d9e8, 0 0 20px rgba(5, 217, 232, 0.5);
    }
    .neon-bg-pink {
      background-color: rgba(255, 42, 109, 0.1);
    }
    .neon-bg-blue {
      background-color: rgba(5, 217, 232, 0.1);
    }
    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 20px rgba(255, 42, 109, 0.7);
    }
  </style>
</head>
<body>
  
  <main class="py-12 px-4 md:px-8 lg:px-16">
    <h1 class="cyberpunk-text text-4xl md:text-5xl mb-12 neon-pink text-center" data-aos="fade-up">
      INCLUDED PRODUCTS
    </h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
      
      <div class="neon-border neon-bg-pink p-8 rounded-lg product-card transition duration-300" data-aos="fade-up">
        <div class="flex items-center mb-6">
          <div class="cyberpunk-text text-3xl neon-pink mr-4">
            <i data-feather="file-text"></i>
          </div>
          <h2 class="cyberpunk-text text-2xl neon-pink">Complete Press Kit</h2>
        </div>
        <p class="text-gray-300 mb-6">
          A modern EPK ready for media and labels, with all the professional information you need in one place.
        </p>
        <ul class="space-y-2 text-gray-300">
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Professional biography</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> High-quality photos</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Links to music and videos</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Contact details and social links</li>
        </ul>
      </div>
      
      
      <div class="neon-border-blue neon-bg-blue p-8 rounded-lg product-card transition duration-300" data-aos="fade-up" data-aos-delay="100">
        <div class="flex items-center mb-6">
          <div class="cyberpunk-text text-3xl neon-blue mr-4">
            <i data-feather="link"></i>
          </div>
          <h2 class="cyberpunk-text text-2xl neon-blue">Smartlink + Pre-Save</h2>
        </div>
        <p class="text-gray-300 mb-6">
          A single smart link that directs your fans to all streaming platforms, including pre-saves on Spotify and Apple Music.
        </p>
        <ul class="space-y-2 text-gray-300">
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Integration with all platforms</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Automatic pre-save</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Click and conversion analytics</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Full customization</li>
        </ul>
      </div>
      
      
      <div class="neon-border neon-bg-pink p-8 rounded-lg product-card transition duration-300" data-aos="fade-up" data-aos-delay="200">
        <div class="flex items-center mb-6">
          <div class="cyberpunk-text text-3xl neon-pink mr-4">
            <i data-feather="image"></i>
          </div>
          <h2 class="cyberpunk-text text-2xl neon-pink">Visual Content</h2>
        </div>
        <p class="text-gray-300 mb-6">
          A complete package of images and videos to promote your release on social media and digital platforms.
        </p>
        <ul class="space-y-2 text-gray-300">
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Professional cover for streaming</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Simple and elegant lyric video</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Posts for Instagram and Facebook</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Ready-to-use ad creatives</li>
        </ul>
      </div>
      
      
      <div class="neon-border-blue neon-bg-blue p-8 rounded-lg product-card transition duration-300" data-aos="fade-up" data-aos-delay="300">
        <div class="flex items-center mb-6">
          <div class="cyberpunk-text text-3xl neon-blue mr-4">
            <i data-feather="calendar"></i>
          </div>
          <h2 class="cyberpunk-text text-2xl neon-blue">Promotion Calendar</h2>
        </div>
        <p class="text-gray-300 mb-6">
          A complete pre and post-release plan with all the necessary steps to maximize your music’s reach.
        </p>
        <ul class="space-y-2 text-gray-300">
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Pre-release action schedule</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Post-release strategy</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Automated reminders and tasks</li>
          <li class="flex items-center"><i data-feather="check" class="mr-2 text-green-400"></i> Social media integration</li>
        </ul>
      </div>
    </div>
  </main>

  <script>
    AOS.init();
    feather.replace();
  </script>
</body>
</html>