130 lines
5.8 KiB
Vue
130 lines
5.8 KiB
Vue
<script setup lang="ts">
|
|
import VuesaxIcon from "~/components/ui/VuesaxIcon.vue";
|
|
import DynamicIcon from "~/components/ui/DynamicIcon.vue";
|
|
|
|
const hero = computed(() => useSiteStore().sections.hero);
|
|
</script>
|
|
|
|
<template>
|
|
<section id="home" class="relative flex min-h-screen flex-col overflow-hidden">
|
|
<!-- ---- background ---- -->
|
|
<div class="absolute inset-0">
|
|
<img
|
|
:src="hero.image.url"
|
|
:alt="hero.image.alt"
|
|
width="1792"
|
|
height="1008"
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
class="absolute inset-0 size-full object-cover object-[center_15%] sm:object-right-top"
|
|
/>
|
|
<!-- Mobile Gradient: 0 at the top so image is fully clear, reaches 100% at the texts -->
|
|
<div
|
|
class="sm:hidden absolute inset-0 pointer-events-none"
|
|
style="background: linear-gradient(to bottom, transparent 0%, transparent 26%, rgba(11, 18, 36, 0.45) 42%, rgba(11, 18, 36, 0.95) 54%, #0b1224 62%, #0b1224 100%);"
|
|
/>
|
|
|
|
<!-- Desktop Gradient: Right side dark for text, left side fading out as requested -->
|
|
<div class="hidden sm:block absolute inset-0 bg-gradient-to-l from-bg via-bg/65 via-25% to-transparent" />
|
|
<div class="hidden sm:block absolute inset-0 bg-gradient-to-t from-bg via-transparent to-bg/50" />
|
|
<div class="hidden sm:block absolute inset-0 bg-grid opacity-30" />
|
|
</div>
|
|
|
|
<!-- ---- side tape ---- -->
|
|
<div class="tape-v absolute bottom-0 end-0 z-10 h-32 sm:h-44 w-1 sm:w-1.5 opacity-70" />
|
|
|
|
<!-- ---- content ---- -->
|
|
<div
|
|
class="relative z-10 mx-auto flex w-full max-w-[1480px] flex-1 items-end sm:items-center px-4 pb-6 pt-32 sm:pt-32 md:pt-36 sm:px-6 md:px-8 md:pb-24"
|
|
>
|
|
<div class="w-full max-w-3xl">
|
|
<div>
|
|
<!-- Badge -->
|
|
<div
|
|
class="animate-fade-up-1 inline-flex items-center gap-1.5 sm:gap-2.5 rounded-full border border-accent/30 bg-accent/10 px-3 py-1 sm:px-4 sm:py-2 backdrop-blur"
|
|
>
|
|
<span class="size-1.5 animate-pulse rounded-full bg-accent" />
|
|
<span class="text-[11px] sm:text-xs font-medium text-accent">
|
|
{{ hero.badge }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Title & Highlight -->
|
|
<h1
|
|
class="animate-fade-up-2 mt-3 sm:mt-7 text-2xl sm:text-4xl md:text-6xl font-black leading-tight sm:leading-[1.15] md:leading-[1.1]"
|
|
>
|
|
{{ hero.title }}
|
|
<br />
|
|
<span
|
|
class="mt-2 inline-block whitespace-nowrap rounded-md bg-hazard px-2.5 py-1 text-lg font-black text-bg shadow-sm sm:mt-3 sm:rounded-lg sm:px-4 sm:py-1.5 sm:text-3xl sm:-rotate-1 sm:shadow-[0_10px_50px_rgba(255,184,0,0.25)] md:text-5xl"
|
|
>
|
|
{{ hero.titleHighlight }}
|
|
</span>
|
|
</h1>
|
|
|
|
<!-- Intro text -->
|
|
<p
|
|
class="animate-fade-up-3 mt-3 sm:mt-6 max-w-xl text-[12px] sm:text-base leading-relaxed sm:leading-9 text-ink/75 md:text-lg md:leading-10"
|
|
>
|
|
{{ hero.intro }}
|
|
</p>
|
|
|
|
<!-- CTA buttons -->
|
|
<div class="animate-fade-up-4 mt-5 sm:mt-9 flex flex-wrap items-center gap-2.5 sm:gap-4">
|
|
<a
|
|
:href="hero.primaryCta.href"
|
|
class="group inline-flex items-center gap-1.5 sm:gap-2.5 rounded-full bg-accent px-4 py-2.5 sm:px-7 sm:py-4 text-xs sm:text-sm md:text-base font-bold text-bg transition-all duration-300 hover:bg-accent-soft hover:shadow-[0_8px_45px_rgba(255,90,0,0.5)]"
|
|
>
|
|
{{ hero.primaryCta.label }}
|
|
<VuesaxIcon
|
|
name="arrow-left"
|
|
class="size-3.5 sm:size-5 transition-transform duration-300 group-hover:-translate-x-1.5"
|
|
/>
|
|
</a>
|
|
<a
|
|
:href="hero.secondaryCta.href"
|
|
class="inline-flex items-center gap-2 rounded-full border border-ink/25 px-4 py-2.5 sm:px-7 sm:py-4 text-xs sm:text-sm md:text-base font-bold text-ink backdrop-blur transition-colors duration-300 hover:border-accent hover:text-accent"
|
|
>
|
|
{{ hero.secondaryCta.label }}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Feature Chips (desktop/tablet only to keep mobile clean) -->
|
|
<div class="animate-fade-up-5 mt-6 sm:mt-10 hidden sm:flex flex-wrap gap-3">
|
|
<span
|
|
v-for="c in hero.chips"
|
|
:key="c.label"
|
|
class="inline-flex items-center gap-2 rounded-full border border-ink/15 bg-bg/50 px-4 py-2 font-mono text-[11px] tracking-wider text-ink/70 backdrop-blur transition-colors hover:border-accent/50 hover:text-ink"
|
|
>
|
|
<DynamicIcon :name="c.icon" class="size-4 text-accent" />
|
|
{{ c.label }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ---- scroll hint ---- -->
|
|
<div class="animate-fade-up-9 absolute bottom-24 sm:bottom-28 left-1/2 z-10 hidden md:block">
|
|
<div class="-translate-x-1/2 flex flex-col items-center gap-2">
|
|
<span class="font-mono text-[10px] tracking-[0.35em] text-muted">SCROLL</span>
|
|
<VuesaxIcon name="arrow-down-1" class="size-4 animate-bounce text-accent" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ---- bottom bar ---- -->
|
|
<div class="animate-fade-up-8 relative z-10 border-t border-ink/10 backdrop-blur-sm">
|
|
<div class="mx-auto grid max-w-[1480px] grid-cols-3 gap-px bg-ink/10">
|
|
<div
|
|
v-for="s in hero.miniStats"
|
|
:key="s.label"
|
|
class="flex flex-col sm:flex-row sm:items-baseline sm:gap-4 bg-bg/60 px-2.5 py-3 text-center sm:text-right backdrop-blur-md sm:px-6 sm:py-5 md:px-8"
|
|
>
|
|
<span class="text-base font-black text-ink sm:text-2xl md:text-3xl">{{ s.value }}</span>
|
|
<span class="mt-0.5 sm:mt-0 text-[10px] sm:text-xs leading-tight text-muted md:text-sm">{{ s.label }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|