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>
|