About-us Gaming Futuristic

                <!--
@type: About Us
@industry: Gaming
@style: Futuristic
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');
  body {
    background-color: #09090b;
    font-family: 'Rajdhani', sans-serif;
    color: #fafafa;
  }
  .font-orbitron {
    font-family: 'Orbitron', sans-serif;
  }
  .glitch-clip {
    clip-path: polygon(0 0, 100% 0, 100% 75%, 95% 100%, 0 100%);
  }
</style>

<section class="relative bg-zinc-950 py-24 px-6 overflow-hidden border-t border-zinc-900">
  <div class="container mx-auto relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
      <div class="relative max-w-xl mx-auto group">
        <div
          class="absolute -inset-4 border border-yellow-400/20 glitch-clip translate-x-2 translate-y-2">
        </div>
        <div
          class="absolute -inset-4 border border-zinc-800 glitch-clip -translate-x-2 -translate-y-2">
        </div>

        <div class="relative aspect-square bg-zinc-900 overflow-hidden">
          <img src="https://landinggo.com/assets/img/stock/team/team-unsplash-1619x1080-1.webp" alt="Cyberpunk Lab"
            class="w-full h-full object-cover opacity-50 grayscale hover:grayscale-0">
        </div>
      </div>

      <div class="space-y-8">
        <div>
          <div class="inline-block px-3 py-1 border-l-2 border-yellow-400 bg-yellow-400/5 mb-4">
            <span class="font-orbitron text-[10px] text-yellow-400 tracking-[0.4em] uppercase">Origin
              Transmission</span>
          </div>
          <h2 class="font-orbitron text-4xl md:text-6xl font-black uppercase tracking-tighter leading-none mb-6">
            BORN IN THE <br /> <span class="text-yellow-400">ZINC WASTELAND</span>
          </h2>
          <p class="text-zinc-400 text-lg leading-relaxed font-light">
            We didn't build Zinc-Citadel to create another game. We built it as a <span
              class="text-zinc-100 italic">sanctuary</span> for those who refused the mass-lobotomy of the megacorps. We
            are a collective of rogue developers, neural-engineers, and story-hackers operating from the fringes of the
            grid.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="p-6 border border-zinc-900 hover:border-zinc-800 transition-colors">
            <h4 class="font-orbitron text-sm font-bold text-yellow-400 uppercase mb-3 tracking-widest">Our Creed</h4>
            <p class="text-zinc-500 text-xs leading-relaxed uppercase">
              Zero telemetry. Maximum immersion. The player is not the product; the player is the glitch in the system.
            </p>
          </div>
          <div class="p-6 border border-zinc-900 hover:border-zinc-800 transition-colors">
            <h4 class="font-orbitron text-sm font-bold text-yellow-400 uppercase mb-3 tracking-widest">The Tech</h4>
            <p class="text-zinc-500 text-xs leading-relaxed uppercase">
              Utilizing proprietary Carbon-Logic engines to deliver sub-atomic latency and true haptic-consciousness.
            </p>
          </div>
        </div>

        <div class="pt-6 border-t border-zinc-900">
          <button class="group flex items-center gap-6">
            <div
              class="w-12 h-12 rounded-full border border-yellow-400/30 flex items-center justify-center group-hover:border-yellow-400 transition-colors duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400 translate-x-0.5"
                viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                  clip-rule="evenodd" />
              </svg>
            </div>
            <span
              class="font-orbitron text-xs font-black uppercase tracking-[0.3em] text-white group-hover:text-yellow-400 transition-colors">Download
              Founders Manifesto</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>