Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RIABOX — Release In A Box</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>
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></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);
    }
    .glow-on-hover:hover {
      text-shadow: 0 0 15px #ff2a6d, 0 0 30px #ff2a6d;
    }
  </style>
</head>
<body class="min-h-screen">
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
  <div class="relative z-10">

    
    <section class="py-20 px-4 md:px-8 lg:px-16 text-center">
      <h1 class="cyberpunk-text text-4xl md:text-6xl lg:text-7xl mb-6 neon-pink" data-aos="fade-up">
        RIABOX — RELEASE IN A BOX
      </h1>
      <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-12" data-aos="fade-up" data-aos-delay="100">
        The ultimate solution for artists to launch like professionals, without wasting time.
      </p>
      <a href="https://www.arcadiastudio.com.br/riabox/dashboard" 
         class="cyberpunk-text bg-transparent neon-border px-8 py-4 text-lg neon-pink hover:neon-bg-pink transition inline-block"
         data-aos="fade-up" data-aos-delay="200">
        Login
      </a>
    </section>

    
    <section class="py-16 px-4 md:px-8 lg:px-16">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <div class="neon-border p-6 rounded-lg neon-bg-pink" data-aos="fade-up">
          <div class="cyberpunk-text text-xl neon-pink mb-4">Press Kit</div>
          <p class="text-gray-300">Professional EPK ready for media and labels.</p>
        </div>
        <div class="neon-border p-6 rounded-lg neon-bg-blue" data-aos="fade-up" data-aos-delay="100">
          <div class="cyberpunk-text text-xl neon-blue mb-4">Smartlink</div>
          <p class="text-gray-300">All platforms in a single smart link.</p>
        </div>
        <div class="neon-border p-6 rounded-lg neon-bg-pink" data-aos="fade-up" data-aos-delay="200">
          <div class="cyberpunk-text text-xl neon-pink mb-4">Visual Content</div>
          <p class="text-gray-300">Covers, lyric videos and creatives for social media.</p>
        </div>
        <div class="neon-border p-6 rounded-lg neon-bg-blue" data-aos="fade-up" data-aos-delay="300">
          <div class="cyberpunk-text text-xl neon-blue mb-4">Calendar</div>
          <p class="text-gray-300">Complete pre and post-release planning.</p>
        </div>
      </div>
    </section>
  </div>

  <script>
    AOS.init();
    feather.replace();
    VANTA.GLOBE({
      el: "#vanta-bg",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0xff2a6d,
      backgroundColor: 0x0,
      size: 0.7
    });
  </script>
</body>
</html>