87 lines
3.4 KiB
Vue
87 lines
3.4 KiB
Vue
|
<script setup>
|
||
|
|
import { homeHero as defaultHero } from "~/data/home";
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
hero: {
|
||
|
|
type: Object,
|
||
|
|
default: () => defaultHero,
|
||
|
|
},
|
||
|
|
sectionId: {
|
||
|
|
type: String,
|
||
|
|
default: "hero",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<section
|
||
|
|
:id="sectionId"
|
||
|
|
class="relative flex min-h-[calc(100vh-var(--page-offset,134px)-40px)] items-center overflow-hidden bg-black bg-cover bg-center pb-10 text-white"
|
||
|
|
:style="{ backgroundImage: `url(${hero.backgroundImage})` }"
|
||
|
|
>
|
||
|
|
<div class="absolute inset-0 bg-black/40" />
|
||
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(27,214,41,0.18),transparent_32%),radial-gradient(circle_at_82%_78%,rgba(0,92,230,0.18),transparent_26%)]" />
|
||
|
|
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||
|
|
|
||
|
|
<div class="container-gm relative z-10 grid gap-12 py-16 md:py-20 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm uppercase tracking-[0.34em] text-white/70" data-hero-reveal>
|
||
|
|
{{ hero.eyebrow }}
|
||
|
|
</p>
|
||
|
|
<h1 class="mt-5 max-w-4xl text-balance text-[36px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||
|
|
{{ hero.title }}
|
||
|
|
</h1>
|
||
|
|
<p class="mt-5 max-w-2xl text-base leading-8 text-white/82 md:text-lg" data-hero-reveal>
|
||
|
|
{{ hero.description }}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="mt-8 flex flex-wrap gap-3" data-hero-reveal>
|
||
|
|
<span
|
||
|
|
v-for="tag in hero.tags"
|
||
|
|
:key="tag"
|
||
|
|
class="rounded border border-white/20 bg-white/10 px-4 py-2 text-xs text-white/82 backdrop-blur"
|
||
|
|
>
|
||
|
|
{{ tag }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-10 flex flex-wrap gap-4" data-hero-reveal>
|
||
|
|
<NuxtLink :to="hero.primaryCta.href" class="gm-btn gm-btn-primary px-8">
|
||
|
|
{{ 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="mt-6" data-hero-reveal>
|
||
|
|
<SectionRouteLinks :routes="hero.paths" light />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="hidden gap-4 lg:grid" data-hero-reveal>
|
||
|
|
<div class="rounded-[28px] border border-white/10 bg-white/10 p-6 backdrop-blur">
|
||
|
|
<p class="text-xs uppercase tracking-[0.26em] text-white/55">Growth Signal</p>
|
||
|
|
<div class="mt-6 grid gap-4 sm:grid-cols-3 lg:grid-cols-1">
|
||
|
|
<div class="rounded-2xl border border-white/10 bg-black/10 p-4">
|
||
|
|
<p class="text-sm text-white/65">真人内容网络</p>
|
||
|
|
<p class="mt-2 text-[28px] font-semibold text-white">50,000+</p>
|
||
|
|
</div>
|
||
|
|
<div class="rounded-2xl border border-white/10 bg-black/10 p-4">
|
||
|
|
<p class="text-sm text-white/65">官媒资源矩阵</p>
|
||
|
|
<p class="mt-2 text-[28px] font-semibold text-white">5,000+</p>
|
||
|
|
</div>
|
||
|
|
<div class="rounded-2xl border border-white/10 bg-black/10 p-4">
|
||
|
|
<p class="text-sm text-white/65">标准交付流程</p>
|
||
|
|
<p class="mt-2 text-[28px] font-semibold text-white">5 Steps</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|