<template>
  <div>
    <!-- Hero Banner -->
    <section class="relative bg-secondary py-32 md:py-48 lg:py-64 text-center bg-cover bg-center"
      style="background-image: url('/hero-image.jpg');">
      <!-- 遮罩 -->
      <div class="absolute inset-0 bg-black/40"></div>

      <!-- 内容 -->
      <div class="relative z-10 max-w-3xl mx-auto px-4">
        <h2 class="text-3xl md:text-5xl font-extrabold text-white drop-shadow-lg">
          连接校友 · 传承精神
        </h2>
        <p class="mt-4 text-lg text-gray-100">
          马来西亚柔佛永平中学校友会官方网站
        </p>
        <div class="mt-6 space-x-4">
          <a href="/join-us" class="bg-primary text-white px-6 py-3 rounded-xl shadow hover:opacity-90">
            立即加入我们
          </a>
          <!-- <a href="#donate"
            class="bg-white border-2 border-secondary text-secondary px-6 py-3 rounded-xl hover:bg-secondary hover:text-white">
            支持捐赠
          </a> -->
        </div>
      </div>
    </section>

  </div>
</template>

<script lang="ts" setup>
</script>

<style></style>
