some fixes to heros

components/layout/home-hero.tsx

@@ -1,4 +1,10 @@
-import { HeroScrollLink, HeroShell, HeroTitle } from "@/components/layout/site-hero";
+import {
+  HeroContentMotion,
+  HeroMotionItem,
+  HeroScrollLink,
+  HeroShell,
+  HeroTitle,
+} from "@/components/layout/site-hero";
 
 type HomeHeroProps = {
   locale: string;
@@ -39,20 +45,26 @@ export function HomeHero({
 
   return (
     <HeroShell showBridges>
-      <p className="max-w-[34rem] text-sm font-medium tracking-[0.12em] text-foreground/62 sm:text-base">
-        {kicker}
-      </p>
-      <HeroTitle locale={locale} lines={lines} />
-      <p className="mx-auto mt-7 max-w-[33rem] whitespace-pre-line text-sm leading-7 text-foreground/68 sm:text-base sm:leading-8">
-        {description}
-      </p>
-      <div 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"
-        />
-      </div>
+      <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>
+        </HeroMotionItem>
+        <HeroTitle locale={locale} lines={lines} />
+        <HeroMotionItem variant="home">
+          <p className="mx-auto mt-7 max-w-[33rem] whitespace-pre-line text-sm leading-7 text-foreground/68 sm:text-base sm:leading-8">
+            {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>
   );
 }