some fixes to heros

components/layout/site-hero.tsx

@@ -1,6 +1,9 @@
+"use client";
+
 import type { ReactNode } from "react";
 
 import { ArrowDown } from "lucide-react";
+import { motion, useReducedMotion } from "framer-motion";
 
 import { Container } from "@/components/layout/container";
 import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
@@ -39,6 +42,12 @@ type HeroScrollLinkProps = {
   className?: string;
 };
 
+type HeroContentMotionProps = {
+  children: ReactNode;
+  className?: string;
+  variant?: "home" | "page";
+};
+
 const toneClasses: Record<HeroTone, string> = {
   default: "",
   accent: "hero-title-accent",
@@ -67,7 +76,7 @@ export function HeroShell({
         "hero-surface relative isolate overflow-hidden",
         variant === "home"
           ? "hero-home flex min-h-[92svh] items-center justify-center"
-          : "hero-page flex min-h-[44svh] items-end sm:min-h-[48svh]",
+          : "hero-page flex min-h-[44svh] items-center sm:min-h-[48svh]",
         className,
       )}
     >
@@ -81,7 +90,7 @@ export function HeroShell({
           "relative z-10 w-full",
           variant === "home"
             ? "pb-12 pt-24 sm:pb-14 sm:pt-28 lg:pb-16 lg:pt-32"
-            : "pb-10 pt-24 sm:pb-12 sm:pt-28 lg:pb-14 lg:pt-32",
+            : "py-20 sm:py-24 lg:py-28",
           containerClassName,
         )}
       >
@@ -99,6 +108,59 @@ export function HeroShell({
   );
 }
 
+export function HeroContentMotion({
+  children,
+  className,
+  variant = "home",
+}: HeroContentMotionProps) {
+  const reducedMotion = useReducedMotion();
+
+  if (reducedMotion) {
+    return <div className={className}>{children}</div>;
+  }
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={{
+        hidden: {},
+        visible: {
+          transition: {
+            staggerChildren: variant === "home" ? 0.07 : 0.05,
+            delayChildren: variant === "home" ? 0.08 : 0.04,
+          },
+        },
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function HeroMotionItem({
+  children,
+  className,
+  variant = "home",
+}: HeroContentMotionProps) {
+  const reducedMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      initial={reducedMotion ? false : { opacity: 0, y: variant === "home" ? 14 : 10, filter: "blur(6px)" }}
+      animate={reducedMotion ? undefined : { opacity: 1, y: 0, filter: "blur(0px)" }}
+      transition={{
+        duration: variant === "home" ? 0.48 : 0.38,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
 export function HeroTitle({
   lines,
   locale = "en",
@@ -106,16 +168,24 @@ export function HeroTitle({
   className,
 }: HeroTitleProps) {
   const isArabic = locale === "ar";
+  const reducedMotion = useReducedMotion();
 
   return (
-    <h1
+    <motion.h1
+      initial={reducedMotion ? false : { opacity: 0, y: variant === "home" ? 18 : 12, filter: "blur(8px)" }}
+      animate={reducedMotion ? undefined : { opacity: 1, y: 0, filter: "blur(0px)" }}
+      transition={{
+        duration: variant === "home" ? 0.56 : 0.42,
+        delay: variant === "home" ? 0.06 : 0.04,
+        ease: [0.22, 1, 0.36, 1],
+      }}
       className={cn(
         "text-balance font-semibold text-[hsl(var(--hero-ink))]",
         variant === "home"
           ? isArabic
-            ? "mt-6 flex w-full max-w-[42rem] flex-col gap-y-1 text-[clamp(3rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[48rem]"
-            : "mt-6 flex w-full max-w-[40rem] flex-col gap-y-1 text-[clamp(3.1rem,11vw,6.3rem)] leading-[0.94] tracking-[-0.06em] sm:max-w-[46rem]"
-          : "mt-4 flex w-full max-w-[34rem] flex-col gap-y-1 text-[clamp(2.8rem,10vw,4.9rem)] leading-[0.96] tracking-[-0.06em] sm:max-w-[40rem]",
+            ? "mt-6 flex w-full max-w-[16rem] flex-col gap-y-1 text-[clamp(3rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] md:max-w-[22rem] lg:max-w-[32rem]"
+            : "mt-6 flex w-full max-w-[16rem] flex-col gap-y-1 text-[clamp(3.1rem,11vw,6.3rem)] leading-[0.94] tracking-[-0.06em] md:max-w-[22rem] lg:max-w-[32rem]"
+          : "mt-4 flex w-full max-w-[16rem] flex-col gap-y-1 text-[clamp(2.8rem,10vw,4.9rem)] leading-[0.96] tracking-[-0.06em] md:max-w-[22rem] lg:max-w-[32rem]",
         className,
       )}
     >
@@ -131,7 +201,7 @@ export function HeroTitle({
           {line.text}
         </span>
       ))}
-    </h1>
+    </motion.h1>
   );
 }
 
@@ -140,9 +210,19 @@ export function HeroScrollLink({
   label,
   className,
 }: HeroScrollLinkProps) {
+  const reducedMotion = useReducedMotion();
+
   return (
-    <a href={href} aria-label={label} className={cn("hero-scroll-link", className)}>
+    <motion.a
+      href={href}
+      aria-label={label}
+      initial={reducedMotion ? false : { opacity: 0, y: 10 }}
+      animate={reducedMotion ? undefined : { opacity: 1, y: 0 }}
+      transition={{ duration: 0.34, delay: 0.16, ease: [0.22, 1, 0.36, 1] }}
+      whileHover={reducedMotion ? undefined : { y: 2 }}
+      className={cn("hero-scroll-link", className)}
+    >
       <ArrowDown className="h-5 w-5" />
-    </a>
+    </motion.a>
   );
 }