init

2026-07-10 18:23:41 +08:00
commit bc9e794a57
80 changed files with 19016 additions and 0 deletions
@@ -0,0 +1,49 @@
+<script setup>
+import { homeHero as defaultHero } from "~/data/home";
+
+defineProps({
+  hero: {
+    type: Object,
+    default: () => defaultHero,
+  },
+});
+</script>
+
+<template>
+  <section
+    class="relative flex min-h-[calc(100vh-var(--page-offset,134px)-40px)] items-center overflow-hidden bg-black pb-14"
+    :style="{ backgroundImage: `url(${hero.backgroundImage})` }"
+  >
+    <div class="absolute inset-0 bg-black/45" />
+    <div class="absolute inset-x-0 bottom-0 z-10 h-28 bg-gradient-to-t from-white to-transparent" />
+    <div class="container-gm relative z-10 py-20 text-center text-white">
+      <p class="text-sm uppercase tracking-[0.35em] text-white/70" data-hero-reveal>
+        {{ hero.eyebrow }}
+      </p>
+      <h1 class="mx-auto mt-6 max-w-4xl text-balance text-4xl font-semibold leading-tight md:text-6xl">
+        <span data-hero-reveal>{{ hero.title }}</span>
+      </h1>
+      <p class="mx-auto mt-6 max-w-2xl text-balance text-base text-white/80 md:text-lg" data-hero-reveal>
+        {{ hero.description }}
+      </p>
+      <div class="mt-10 flex flex-wrap items-center justify-center gap-4" data-hero-reveal>
+        <NuxtLink :to="hero.primaryCta.href" class="gm-btn bg-gm-green px-8 text-white hover:scale-95 hover:bg-gm-green-dark">
+          {{ hero.primaryCta.label }}
+        </NuxtLink>
+        <NuxtLink :to="hero.secondaryCta.href" class="gm-btn border border-white/35 bg-white/10 px-8 text-white hover:border-white hover:bg-white/20">
+          {{ hero.secondaryCta.label }}
+        </NuxtLink>
+      </div>
+      <div class="mx-auto mt-14 grid max-w-3xl gap-3 rounded-3xl border border-white/15 bg-white/10 p-3 backdrop-blur md:grid-cols-3" data-hero-reveal>
+        <div
+          v-for="metric in hero.metrics"
+          :key="metric.label"
+          class="rounded-2xl bg-black/20 px-4 py-4"
+        >
+          <p class="text-2xl font-semibold text-white">{{ metric.value }}</p>
+          <p class="mt-1 text-xs text-white/65">{{ metric.label }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>