Hero issue fixes and visual changes

apps/landing/components/HeroSection.vue

@@ -1,11 +1,14 @@
 <template>
   <section id="top" class="relative flex min-h-svh flex-col overflow-hidden">
+    <ClientOnly>
+      <ParticleField />
+    </ClientOnly>
     <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(200,255,46,0.08),transparent_55%)]" />
     <div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-ink/40 via-transparent to-ink" />
 
     <div class="relative flex flex-1 flex-col justify-end px-6 pb-12 pt-36 md:px-10 md:pb-16 md:pt-44">
       <div
-        class="mb-10 flex items-center justify-between font-mono text-[10px] tracking-[0.3em] text-ash animate-fade-up md:mb-16 md:text-[11px]"
+        class="mb-10 flex items-center justify-between font-mono text-[12px] tracking-[0.14em] text-ash animate-fade-up md:mb-16 md:text-[13px] md:tracking-[0.22em]"
         style="animation-delay: 0.2s"
       >
         <span class="flex items-center gap-3">
@@ -15,51 +18,31 @@
         <span class="hidden md:block">{{ data.location }}</span>
       </div>
 
-      <div class="flex flex-col gap-12 lg:flex-row lg:items-end lg:justify-between">
-        <h1 class="font-display text-[clamp(2.4rem,9vw,7.5rem)] font-extrabold leading-[1.1] tracking-[-0.02em]">
-          <span
-            v-for="(line, i) in data.lines"
-            :key="i"
-            class="block overflow-hidden pb-[0.08em] -mb-[0.08em] animate-fade-up"
-            :style="{ animationDelay: `${0.15 + i * 0.12}s` }"
-          >
-            <template v-if="data.highlightWord && line.includes(data.highlightWord)">
-              <span
-                v-html="
-                  line.replace(
-                    data.highlightWord,
-                    `<span class='text-volt'>${data.highlightWord}</span>`,
-                  )
-                "
-              />
-            </template>
-            <template v-else>
-              {{ line }}
-            </template>
-          </span>
-        </h1>
-
-        <div class="flex shrink-0 flex-col items-start gap-10 animate-fade-up lg:items-start lg:pb-3" style="animation-delay: 0.55s">
-          <p class="max-w-sm text-sm leading-relaxed text-ash md:text-base">
-            {{ data.body }}
-          </p>
-          <a
-            href="#work"
-            class="group flex items-center gap-4 text-sm text-bone transition-colors hover:text-volt"
-          >
-            {{ data.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>
+      <h1 class="w-full font-display text-[clamp(2.2rem,8.5vw,7.5rem)] font-extrabold leading-[1.05] tracking-[-0.03em]">
+        <div
+          v-for="(line, i) in data.lines"
+          :key="i"
+          class="overflow-hidden pb-[0.06em] -mb-[0.06em] animate-fade-up"
+          :style="{ animationDelay: `${0.15 + i * 0.12}s` }"
+        >
+          <div class="flex flex-wrap items-baseline gap-x-[0.28em]">
+            <span
+              v-for="(token, ti) in tokenize(line)"
+              :key="ti"
+              :class="token.volt ? 'font-accent text-volt' : undefined"
+            >{{ token.text }}</span>
+          </div>
         </div>
-      </div>
+      </h1>
 
       <div
-        class="mt-14 flex items-end justify-between border-t border-white/[0.07] pt-6 text-xs text-ash animate-fade-up md:mt-20"
+        class="mt-14 flex items-end justify-between border-t border-white/[0.07] pt-6 font-mono text-[11px] tracking-[0.14em] text-ash animate-fade-up md:mt-20 md:text-xs md:tracking-[0.22em]"
         style="animation-delay: 0.8s"
       >
-        <span>اسکرول کنید</span>
+        <span class="flex items-center gap-2">
+          <span class="inline-block h-8 w-px animate-scroll-line bg-volt/80" />
+          اسکرول
+        </span>
         <span class="hidden sm:block">{{ data.coords }}</span>
         <span class="hidden sm:block">{{ data.projectsLabel }}</span>
       </div>
@@ -68,16 +51,54 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   data: {
     eyebrow: string;
     location: string;
     lines: string[];
-    highlightWord: string;
-    body: string;
-    cta: string;
+    highlightWord?: string;
+    highlightWords?: string[];
     coords: string;
     projectsLabel: string;
   };
 }>();
+
+type Token = { text: string; volt?: boolean };
+
+function highlights() {
+  return [
+    ...(props.data.highlightWords || []),
+    props.data.highlightWord || "",
+  ]
+    .map((h) => h.trim())
+    .filter(Boolean)
+    .filter((h, i, arr) => arr.indexOf(h) === i)
+    .sort((a, b) => b.length - a.length);
+}
+
+function tokenize(line: string): Token[] {
+  const hs = highlights();
+  const tokens: Token[] = [];
+  let rest = line.trim();
+
+  while (rest.length) {
+    let matched = false;
+    for (const h of hs) {
+      if (rest === h || rest.startsWith(`${h} `) || rest.startsWith(h)) {
+        tokens.push({ text: h, volt: true });
+        rest = rest.slice(h.length).trimStart();
+        matched = true;
+        break;
+      }
+    }
+    if (matched) continue;
+
+    const m = rest.match(/^(\S+)(\s*)/);
+    if (!m) break;
+    tokens.push({ text: m[1] });
+    rest = rest.slice(m[0].length);
+  }
+
+  return tokens;
+}
 </script>