feat: initial commit for landing rotating clock

2026-10-04 06:54:23 +03:30
commit 2f0b60c42b
22 changed files with 13386 additions and 0 deletions
@@ -0,0 +1,29 @@
+<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>