Refine home hero and header experience

components/layout/home-hero.tsx

@@ -1,7 +1,8 @@
+import { motion, useReducedMotion } from "framer-motion";
+
 import {
   HeroContentMotion,
   HeroMotionItem,
-  HeroScrollLink,
   HeroShell,
   HeroTitle,
 } from "@/components/layout/site-hero";
@@ -19,36 +20,83 @@ export function HomeHero({
   title,
   description,
 }: HomeHeroProps) {
+  const reducedMotion = useReducedMotion();
   const titleLines = title.split("\n").filter(Boolean);
   const isArabic = locale === "ar";
-  const lines = titleLines.map((line, index) => ({
-    text: line,
-    tone: isArabic
-      ? index === 0
-        ? "accent"
-        : "default"
-      : index === titleLines.length - 1
-        ? "accent"
-        : index === 0
-          ? "soft"
-          : "default",
-    align: isArabic
-      ? "center"
-      : index === 1
-        ? "end"
-        : "start",
-  })) as {
-    text: string;
-    tone: "default" | "accent" | "soft";
-    align: "start" | "center" | "end";
-  }[];
+  const lines = isArabic
+    ? [
+        {
+          text: titleLines[0] ?? "",
+          align: "center" as const,
+          segments: [
+            { text: "مطوّر ", tone: "accent" as const },
+            { text: "واجهات", tone: "soft" as const },
+            { text: " ويب", tone: "accent" as const },
+          ],
+        },
+        {
+          text: titleLines[1] ?? "",
+          align: "center" as const,
+          segments: [
+            { text: "ومصمّم ", tone: "soft" as const },
+            { text: "جرافيك", tone: "accent" as const },
+          ],
+        },
+      ]
+    : [
+        {
+          text: titleLines[0] ?? "",
+          tone: "soft" as const,
+          align: "start" as const,
+        },
+        {
+          text: titleLines[1] ?? "",
+          tone: "accent" as const,
+          align: "end" as const,
+        },
+        {
+          text: titleLines[2] ?? "",
+          segments: [
+            { text: "& ", tone: "accent" as const },
+            { text: "designer", tone: "soft" as const },
+          ],
+          align: "start" as const,
+        },
+      ];
 
   return (
     <HeroShell showBridges>
       <HeroContentMotion variant="home">
         <HeroMotionItem variant="home">
-          <p className="max-w-[34rem] text-sm font-medium tracking-[0.12em] text-foreground/62 sm:text-base">
-            {kicker}
+          <p className="inline-flex items-center gap-1.5 rounded-pill border border-border/70 bg-background/75 px-3 py-1 text-[0.84rem] font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome sm:px-3.5 sm:py-1 sm:text-[0.9rem]">
+            <span>{kicker}</span>
+            <motion.span
+              aria-hidden="true"
+              className="text-[0.95rem] leading-none"
+              initial={reducedMotion ? false : { rotate: 0, scale: 1 }}
+              animate={
+                reducedMotion
+                  ? undefined
+                  : {
+                      rotate: [0, 16, -10, 16, -4, 0],
+                      scale: [1, 1.08, 1.08, 1.08, 1.04, 1],
+                    }
+              }
+              transition={
+                reducedMotion
+                  ? undefined
+                  : {
+                      duration: 1.4,
+                      delay: 0.5,
+                      repeat: Number.POSITIVE_INFINITY,
+                      repeatDelay: 2.8,
+                      ease: "easeInOut",
+                    }
+              }
+              style={{ transformOrigin: "70% 70%" }}
+            >
+              👋
+            </motion.span>
           </p>
         </HeroMotionItem>
         <HeroTitle locale={locale} lines={lines} />
@@ -57,13 +105,6 @@ export function HomeHero({
             {description}
           </p>
         </HeroMotionItem>
-        <HeroMotionItem variant="home" className="mt-9 flex items-center justify-center">
-          <HeroScrollLink
-            href="#home-content"
-            label="Scroll to content"
-            className="text-[hsl(var(--hero-ink)/0.78)] dark:text-foreground/82"
-          />
-        </HeroMotionItem>
       </HeroContentMotion>
     </HeroShell>
   );