some fixes to heros

components/layout/page-hero.tsx

@@ -1,4 +1,4 @@
-import { HeroShell, HeroTitle } from "@/components/layout/site-hero";
+import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle } from "@/components/layout/site-hero";
 
 type PageHeroProps = {
   title: string;
@@ -8,15 +8,21 @@ type PageHeroProps = {
 export function PageHero({ title, description }: PageHeroProps) {
   return (
     <HeroShell compactBackdrop variant="page">
-      <p className="text-sm font-medium tracking-[0.12em] text-foreground/56">
-        {title}
-      </p>
-      <HeroTitle lines={[{ text: title }]} variant="page" />
-      {description ? (
-        <p className="mx-auto mt-5 max-w-[34rem] text-sm leading-7 text-foreground/64 sm:text-base">
-          {description}
-        </p>
-      ) : null}
+      <HeroContentMotion variant="page">
+        <HeroMotionItem variant="page">
+          <p className="inline-flex items-center rounded-pill border border-border/70 bg-background/75 px-4 py-2 text-sm font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome">
+            {title}
+          </p>
+        </HeroMotionItem>
+        <HeroTitle lines={[{ text: title }]} variant="page" />
+        {description ? (
+          <HeroMotionItem variant="page">
+            <p className="mx-auto mt-6 max-w-[34rem] text-base leading-7 text-foreground/72">
+              {description}
+            </p>
+          </HeroMotionItem>
+        ) : null}
+      </HeroContentMotion>
     </HeroShell>
   );
 }