From c009f71e39864ffd146580a0003af9e88f90096a Mon Sep 17 00:00:00 2001
From: MOH <info@mohfarawati.de>
Date: Mon, 9 Mar 2026 08:07:47 +0100
Subject: [PATCH] some fixes to heros

---
 app/[locale]/coming-soon/page.tsx |  2 +-
 components/layout/home-hero.tsx   | 42 ++++++++-----
 components/layout/page-hero.tsx   | 26 ++++----
 components/layout/site-hero.tsx   | 98 ++++++++++++++++++++++++++++---
 4 files changed, 133 insertions(+), 35 deletions(-)

diff --git a/app/[locale]/coming-soon/page.tsx b/app/[locale]/coming-soon/page.tsx
index 12d130b..8dfb408 100644
--- a/app/[locale]/coming-soon/page.tsx
+++ b/app/[locale]/coming-soon/page.tsx
@@ -67,7 +67,7 @@ export default async function ComingSoonPage({
               {t("kicker")}
             </p>
 
-            <HeroTitle locale={localeKey} lines={lines} className="mx-auto mt-8 max-w-[46rem]" />
+            <HeroTitle locale={localeKey} lines={lines} className="mx-auto mt-8" />
 
             <p className="mx-auto mt-8 max-w-[34rem] text-sm leading-7 text-foreground/68 sm:text-base">
               {t("description")}
diff --git a/components/layout/home-hero.tsx b/components/layout/home-hero.tsx
index 8780ddf..a0d65c2 100644
--- a/components/layout/home-hero.tsx
+++ b/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>
   );
 }
diff --git a/components/layout/page-hero.tsx b/components/layout/page-hero.tsx
index 54731f1..907371e 100644
--- a/components/layout/page-hero.tsx
+++ b/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>
   );
 }
diff --git a/components/layout/site-hero.tsx b/components/layout/site-hero.tsx
index a94d457..f2d0942 100644
--- a/components/layout/site-hero.tsx
+++ b/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>
   );
 }