init

2026-07-10 18:23:41 +08:00
commit bc9e794a57
80 changed files with 19016 additions and 0 deletions
@@ -0,0 +1,61 @@
+<script setup>
+import { serviceItems } from "~/data/services";
+
+defineProps({
+  services: {
+    type: Array,
+    default: () => serviceItems,
+  },
+  eyebrow: {
+    type: String,
+    default: "Method",
+  },
+  title: {
+    type: String,
+    default: "基于高楼营销法则",
+  },
+  description: {
+    type: String,
+    default: "提供全链路增长服务",
+  },
+});
+</script>
+
+<template>
+  <section class="bg-white py-20" id="services">
+    <div class="container-gm grid gap-10 lg:grid-cols-[0.95fr_1.05fr]">
+      <div class="lg:sticky lg:top-28 lg:self-start" data-reveal>
+        <p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">{{ eyebrow }}</p>
+        <h2 class="mt-4 text-[34px] font-semibold leading-tight text-[#262626] md:text-[42px]">
+          {{ title }}
+        </h2>
+        <p class="mt-4 text-lg text-[#666]">{{ description }}</p>
+      </div>
+
+      <div class="space-y-8" data-stagger>
+        <NuxtLink
+          v-for="(service, index) in services"
+          :key="service.slug"
+          :to="service.href"
+          class="block border-b border-gm-border pb-8 last:border-b-0"
+          data-stagger-item
+          data-hover-card
+        >
+          <p class="text-[44px] font-semibold leading-none text-gm-green">
+            {{ String(index + 1).padStart(2, "0") }}
+          </p>
+          <h3 class="mt-4 text-[28px] font-semibold text-[#262626]">
+            {{ service.title }}
+          </h3>
+          <p class="mt-2 text-base text-[#666]">{{ service.tier }}</p>
+          <p class="mt-4 max-w-2xl text-sm leading-7 text-[#777]">
+            {{ service.summary }}
+          </p>
+          <span class="mt-5 inline-flex items-center gap-2 text-sm font-medium text-gm-green">
+            查看服务详情 <span aria-hidden="true">→</span>
+          </span>
+        </NuxtLink>
+      </div>
+    </div>
+  </section>
+</template>