Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About RIABOX</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);
    }
  </style>
</head>
<body>
  
  <main class="py-12 px-4 md:px-8 lg:px-16 max-w-6xl mx-auto">
    <h1 class="cyberpunk-text text-4xl md:text-5xl mb-12 neon-pink text-center" data-aos="fade-up">
      ABOUT RIABOX
    </h1>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      <div data-aos="fade-right">
        <h2 class="cyberpunk-text text-2xl neon-blue mb-6">THE REVOLUTION IN MUSIC RELEASES</h2>
        <p class="text-gray-300 mb-6">
          RIABOX was born from the need to simplify the complex process of music releases. 
          As artists and producers, we know how challenging it can be to manage multiple 
          tools and platforms at the same time.
        </p>
        <p class="text-gray-300 mb-6">
          Our mission is to empower independent artists with the same professional tools 
          that major labels use — but in an accessible, intuitive and integrated way.
        </p>
        <div class="neon-border p-6 neon-bg-pink" data-aos="fade-up" data-aos-delay="200">
          <p class="cyberpunk-text neon-pink text-xl mb-4">RIABOX DIFFERENTIAL</p>
          <p class="text-gray-300">
            Leave behind 10 different tools — RIABOX delivers everything in one single panel.
          </p>
        </div>
      </div>
      
      <div class="neon-border-blue p-8 neon-bg-blue rounded-lg" data-aos="fade-left">
        <div class="aspect-w-16 aspect-h-9">
          <img src="http://static.photos/technology/1024x576/42" alt="RIABOX Technology" class="w-full h-auto rounded">
        </div>
        <div class="mt-6">
          <h3 class="cyberpunk-text text-xl neon-blue mb-4">TECHNOLOGY & INNOVATION</h3>
          <p class="text-gray-300">
            We use artificial intelligence and automation to make your release faster 
            and more efficient, without losing the professional quality your music deserves.
          </p>
        </div>
      </div>
    </div>
  </main>

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