Hero issue fixes and visual changes

apps/landing/components/ManifestoSection.vue

@@ -2,18 +2,22 @@
   <section id="manifesto" class="px-6 py-28 md:px-10 md:py-40">
     <div class="mx-auto max-w-[1500px]">
       <SectionTag index="۰۱" :title="data.tag" right="نسخه کوتاه" />
-      <p class="mt-14 max-w-5xl font-display text-[clamp(1.8rem,5vw,4.2rem)] font-extrabold leading-[1.35] tracking-[-0.01em]">
-        <span
-          v-for="(w, i) in data.words"
-          :key="i"
-          class="ml-[0.28em] inline-block"
-          :class="{
-            'text-outline': w.outline,
-            'text-volt': w.volt,
-          }"
-        >{{ w.text }}</span>
-      </p>
-      <p class="mt-10 max-w-xl text-sm leading-relaxed text-ash md:text-base">{{ data.body }}</p>
+
+      <div class="mt-14 flex flex-col gap-10 md:max-w-2xl animate-fade-up">
+        <p class="text-lg leading-relaxed text-ash md:text-xl md:leading-relaxed">
+          {{ intro?.body || data.body }}
+        </p>
+        <a
+          v-if="intro?.cta"
+          href="#work"
+          class="group inline-flex w-fit items-center gap-4 font-mono text-xs tracking-[0.16em] text-bone transition-colors hover:text-volt md:text-[13px] md:tracking-[0.22em]"
+        >
+          {{ intro.cta }}
+          <span class="flex h-10 w-10 items-center justify-center rounded-full border border-white/20 transition-all group-hover:border-volt group-hover:bg-volt group-hover:text-ink">
+            ↓
+          </span>
+        </a>
+      </div>
     </div>
   </section>
 </template>
@@ -22,8 +26,12 @@
 defineProps<{
   data: {
     tag: string;
-    words: Array<{ text: string; outline?: boolean; volt?: boolean }>;
+    words?: Array<{ text: string; outline?: boolean; volt?: boolean }>;
     body: string;
   };
+  intro?: {
+    body?: string;
+    cta?: string;
+  } | null;
 }>();
 </script>