<script setup>
import { aboutPage } from "~/data/about";
</script>

<template>
  <section class="bg-white py-20" id="about">
    <div class="container-gm grid items-center gap-12 lg:grid-cols-2">
      <div data-reveal>
        <p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">About</p>
        <h2 class="mt-4 text-balance text-3xl font-semibold leading-snug text-[#262626] md:text-[40px]">
          {{ aboutPage.hero.title }}
        </h2>
        <p class="mt-5 max-w-xl text-base leading-8 text-[#777]">
          {{ aboutPage.hero.description }}
        </p>
      </div>

      <div class="overflow-hidden rounded-[32px] border border-gm-border shadow-xl" data-reveal>
        <img
          :src="aboutPage.hero.image"
          alt="增长超人团队"
          class="h-full min-h-[320px] w-full object-cover"
        />
      </div>
    </div>
  </section>
</template>
