Hero issue fixes and visual changes

apps/landing/components/TeamSection.vue

@@ -3,22 +3,28 @@
     <div class="mx-auto max-w-[1500px]">
       <SectionTag index="۰۵" :title="data.tag" right="رهبری" />
       <div class="mb-16 mt-14 flex flex-col justify-between gap-8 md:flex-row md:items-end">
-        <h2 class="font-display text-[clamp(2.2rem,6vw,5rem)] font-extrabold leading-[1.15] tracking-[-0.02em]">
-          {{ data.headline }}
+        <h2 class="font-display text-[clamp(2.4rem,7vw,6.5rem)] font-extrabold leading-[1.05] tracking-[-0.02em]">
+          <template v-if="headlineParts.rest">
+            {{ headlineParts.rest }}
+            <span class="font-accent text-volt">{{ headlineParts.last }}</span>
+          </template>
+          <template v-else>
+            {{ data.headline }}
+          </template>
         </h2>
         <p class="max-w-xs text-sm leading-relaxed text-ash">{{ data.body }}</p>
       </div>
       <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
         <figure v-for="m in data.members" :key="m.name" class="group">
           <div
-            class="aspect-[3/4] bg-gradient-to-br from-smoke to-ink bg-cover bg-center"
+            class="aspect-[3/4] overflow-hidden bg-gradient-to-br from-smoke to-ink bg-cover bg-center transition-transform duration-700 group-hover:scale-[1.02]"
             :style="m.imageUrl ? { backgroundImage: `url(${m.imageUrl})` } : {}"
           />
           <figcaption class="mt-4">
-            <p class="font-display text-xl font-bold group-hover:text-volt transition-colors">
+            <p class="font-display text-xl font-bold tracking-[-0.02em] transition-colors group-hover:text-volt">
               {{ m.name }}
             </p>
-            <p class="mt-1 text-xs text-ash">{{ m.role }}</p>
+            <p class="mt-1 font-mono text-[10px] tracking-[0.16em] text-ash">{{ m.role }}</p>
           </figcaption>
         </figure>
       </div>
@@ -27,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   data: {
     tag: string;
     headline: string;
@@ -35,4 +41,13 @@ defineProps<{
     members: Array<{ name: string; role: string; imageUrl?: string }>;
   };
 }>();
+
+const headlineParts = computed(() => {
+  const parts = (props.data.headline || "").trim().split(/\s+/);
+  if (parts.length < 2) return { rest: "", last: props.data.headline };
+  return {
+    rest: parts.slice(0, -1).join(" "),
+    last: parts.at(-1) || "",
+  };
+});
 </script>