---
import DataViz from './DataViz.astro';
import Intro from './Intro.astro';
import SocialProof from './SocialProof.astro';
---

<section
  class="relative mb-32.5 flex flex-col bg-faded-black lg:mb-40 dark:bg-soot"
>
  <div class="absolute inset-0 z-0 built-bg-gray dark:built-bg-black"></div>
  <header
    class="relative mx-auto -mt-13.5 mb-5 flex h-27.5 w-full max-w-305 flex-col items-center justify-center px-10 text-center md:-mt-10 md:h-20.5"
  >
    <div
      class="absolute top-0 right-5 bottom-0 left-5 z-0 grid overflow-hidden rounded-xs"
      style="grid-template-rows: 1fr auto 1fr"
    >
      <div class="bg-gold"></div>
      <div class="h-0.5 bg-faded-black dark:bg-soot"></div>
      <div class="bg-orange"></div>
    </div>
    <h2
      class="relative inline rounded-xs bg-faded-black p-2.5 text-center font-display text-h2 text-manila-light uppercase dark:bg-soot"
    >
      v10 is built different
    </h2>
  </header>
  <div
    class="relative mx-auto grid w-full max-w-305 auto-rows-auto grid-cols-1 gap-5 px-5 md:grid-cols-2"
  >
    <Intro />
    <DataViz />
    <SocialProof />
  </div>
</section>
