50 lines
2.0 KiB
Vue
50 lines
2.0 KiB
Vue
<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>
|