init

2026-07-10 18:23:41 +08:00
commit bc9e794a57
80 changed files with 19016 additions and 0 deletions
@@ -0,0 +1,63 @@
+<script setup>
+import { geoLoopModel } from "~/data/home";
+
+defineProps({
+  model: {
+    type: Object,
+    default: () => geoLoopModel,
+  },
+  routes: {
+    type: Array,
+    default: () => [],
+  },
+  sectionId: {
+    type: String,
+    default: "model",
+  },
+});
+</script>
+
+<template>
+  <section :id="sectionId" class="bg-[#f4f4f4] py-16 md:py-20">
+    <div class="container-gm">
+      <div class="grid gap-10 lg:grid-cols-[0.82fr_1.18fr]">
+        <div data-reveal>
+          <p class="text-sm uppercase tracking-[0.3em] text-[#999]">GEO Model</p>
+          <h2 class="section-title mt-4">{{ model.title }}</h2>
+          <p class="mt-5 text-base leading-8 text-[#666]">{{ model.description }}</p>
+          <div class="mt-6">
+            <SectionRouteLinks :routes="routes" />
+          </div>
+          <NuxtLink :to="model.cta.href" class="gm-btn gm-btn-primary mt-8">
+            {{ model.cta.label }}
+          </NuxtLink>
+        </div>
+
+        <div class="grid gap-5 md:grid-cols-2" data-stagger data-geo-loop>
+          <article
+            v-for="loop in model.loops"
+            :key="loop.title"
+            class="rounded-lg border border-gm-border bg-white p-6 shadow-soft"
+            data-stagger-item
+            data-hover-card
+          >
+            <p class="text-sm font-medium text-gm-green">{{ loop.title }}</p>
+            <p class="mt-3 text-[32px] font-semibold leading-none text-[#262626]">{{ loop.value }}</p>
+            <p class="mt-4 text-sm leading-7 text-[#666]">{{ loop.description }}</p>
+            <div class="mt-6 space-y-3">
+              <div
+                v-for="node in loop.nodes"
+                :key="node"
+                class="flex items-center gap-3 rounded border border-gm-border bg-white px-4 py-3 text-sm text-[#555]"
+                data-geo-node
+              >
+                <span class="size-2 shrink-0 rounded-full bg-gm-green" />
+                <span>{{ node }}</span>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>