80 lines
3.2 KiB
Vue
80 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import VuesaxIcon from "~/components/ui/VuesaxIcon.vue";
|
|
import Reveal from "~/components/ui/Reveal.vue";
|
|
import SectionHead from "~/components/ui/SectionHead.vue";
|
|
|
|
const standards = computed(() => useSiteStore().sections.standards);
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
id="standards"
|
|
aria-labelledby="standards-title"
|
|
class="relative overflow-hidden border-t border-line py-24 md:py-32"
|
|
>
|
|
<!-- watermark -->
|
|
<div
|
|
aria-hidden="true"
|
|
class="text-outline pointer-events-none absolute -bottom-14 -start-8 select-none font-mono text-[24vw] font-bold leading-none opacity-60"
|
|
>
|
|
CE
|
|
</div>
|
|
|
|
<div class="relative mx-auto max-w-[1480px] px-5 md:px-8">
|
|
<div class="grid items-center gap-14 lg:grid-cols-12">
|
|
<div class="lg:col-span-5">
|
|
<SectionHead heading-id="standards-title" v-bind="standards.head" />
|
|
<Reveal v-if="standards.note" :delay="0.25">
|
|
<div class="mt-8 flex items-start gap-4 rounded-xl border border-accent/25 bg-accent/5 p-5">
|
|
<VuesaxIcon name="document-filter" class="size-6 shrink-0 text-accent" />
|
|
<p class="text-sm leading-8 text-ink/80">
|
|
{{ standards.note }}
|
|
</p>
|
|
</div>
|
|
</Reveal>
|
|
<Reveal :delay="0.35">
|
|
<a
|
|
href="#contact"
|
|
class="group mt-8 inline-flex items-center gap-2.5 rounded-full border border-line px-6 py-3.5 text-sm font-bold transition-colors hover:border-accent hover:text-accent"
|
|
>
|
|
<VuesaxIcon name="shield-tick" class="size-4 text-accent" />
|
|
{{ standards.ctaLabel }}
|
|
</a>
|
|
</Reveal>
|
|
</div>
|
|
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:col-span-7 xl:grid-cols-3">
|
|
<Reveal v-for="(s, i) in standards.items" :key="s.code" :delay="i * 0.06">
|
|
<div
|
|
data-hover
|
|
class="group relative h-full border border-line bg-panel/50 p-6 text-center transition-all duration-500 hover:-translate-y-1.5 hover:border-accent/50 hover:bg-panel"
|
|
>
|
|
<span class="absolute end-3 top-3 font-mono text-[9px] tracking-[0.2em] text-muted/50">
|
|
CERT
|
|
</span>
|
|
<div
|
|
class="mx-auto flex size-24 items-center justify-center rounded-full border border-dashed border-ink/20 transition-all duration-500 group-hover:rotate-12 group-hover:border-accent/60"
|
|
>
|
|
<div>
|
|
<div
|
|
class="font-mono text-base font-bold text-ink transition-colors duration-300 group-hover:text-accent"
|
|
>
|
|
{{ s.code }}
|
|
</div>
|
|
<div
|
|
class="mx-auto mt-1.5 h-px w-8 bg-line transition-colors duration-300 group-hover:bg-accent/50"
|
|
/>
|
|
<div class="mt-1.5 font-mono text-[8px] tracking-[0.25em] text-muted">
|
|
EURO NORM
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 text-sm font-medium text-ink/85">{{ s.label }}</div>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|