30 lines
1.6 KiB
Vue
30 lines
1.6 KiB
Vue
<script setup lang="ts">
|
||
import { gsap } from "gsap";
|
||
const root = ref<HTMLElement | null>(null);
|
||
onMounted(() => {
|
||
if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||
// Text arrives after the engraving has started drawing itself (~0.9s).
|
||
gsap.from(root.value!.querySelectorAll("[data-rise]"), { y: 18, opacity: 0, duration: 1, ease: "power3.out", stagger: 0.2, delay: 0.9 });
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<section ref="root" class="relative flex h-[100svh] items-end pb-[6vh] md:items-center md:pb-0" aria-labelledby="h1">
|
||
<div class="px-[6vw] md:w-[47vw] md:pe-0">
|
||
<p data-rise class="mb-5 text-[15px] text-mute md:mb-8">
|
||
استودیوی محصولسازی · تهران <bdi dir="ltr" class="font-mono text-[13px]">35°42′N</bdi>
|
||
</p>
|
||
<h1 id="h1" class="leading-[1.02]">
|
||
<span data-rise class="block text-[clamp(3.3rem,7.4vw,8.6rem)] font-black">ابزار دقیق</span>
|
||
<span data-rise class="block text-[clamp(2.2rem,4.6vw,5.4rem)] font-extralight">برای کارِ هر روز.</span>
|
||
</h1>
|
||
<p data-rise class="mt-6 max-w-[30ch] text-[18px] leading-8 text-ink/80 md:mt-9 md:text-[20px]">
|
||
رصد <b class="font-bold text-ink">پانزده محصول نرمافزاری</b> میسازد و نگه میدارد. هرکدام دقیق، همه روی یک سامانه.
|
||
</p>
|
||
<a data-rise href="#products" class="mt-8 inline-flex items-center gap-3 text-[16px] font-medium text-lapis md:mt-12">
|
||
<span class="h-px w-10 bg-lapis" />چرخ را بچرخانید
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</template>
|