62 lines
1.7 KiB
Vue
62 lines
1.7 KiB
Vue
<script setup>
|
|
import { serviceOverview } from "~/data/services";
|
|
|
|
defineProps({
|
|
hero: {
|
|
type: Object,
|
|
default: () => serviceOverview.hero,
|
|
},
|
|
services: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-white py-20">
|
|
<div class="container-gm grid items-start gap-12 lg:grid-cols-[1fr_508px]">
|
|
<div class="max-w-[720px]">
|
|
<p class="text-[18px] uppercase leading-none text-[#b8b8b8]" data-reveal>
|
|
{{ hero.eyebrow }}
|
|
</p>
|
|
<h1 class="mt-4 text-balance text-[42px] font-medium leading-[1.18] text-[#262626] md:text-[52px]" data-reveal>
|
|
{{ hero.title }}
|
|
</h1>
|
|
<p class="mt-5 max-w-2xl text-base leading-8 text-[#777]" data-reveal>
|
|
{{ hero.description }}
|
|
</p>
|
|
|
|
<div class="mt-12 space-y-8" data-stagger>
|
|
<NuxtLink
|
|
v-for="service in services"
|
|
:key="service.href"
|
|
:to="service.href"
|
|
class="block"
|
|
data-stagger-item
|
|
data-hover-card
|
|
>
|
|
<p class="mb-4 text-[18px] font-medium text-[#12d12c]">
|
|
{{ service.tier }}
|
|
</p>
|
|
<h2 class="text-[28px] font-medium leading-tight text-[#262626] md:text-[34px]">
|
|
{{ service.title }}
|
|
</h2>
|
|
<p class="mt-4 max-w-[680px] text-base leading-8 text-[#999]">
|
|
{{ service.summary }}
|
|
</p>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative hidden justify-center lg:flex" data-reveal>
|
|
<img
|
|
:src="hero.image"
|
|
alt="增长超人服务能力展示"
|
|
class="h-auto w-[508px] select-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|