fix(ui): unify PageHeader with Flutter AppBar specs (56px toolbar, safeArea, sticky blur)

src/app/candidate-contact/candidate-contact-client.tsx

@@ -130,7 +130,7 @@ export default function CandidateContactClient() {
           />
         ) : null}
 
-        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))]">
+        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pb-[calc(20px+var(--safe-bottom))]">
           <PageHeader
             className="-mx-[6px]"
             profile={profile}
@@ -353,7 +353,7 @@ export default function CandidateContactClient() {
         />
       ) : null}
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-36">
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pb-36">
         <PageHeader profile={profile} />
 
         <section className="flex flex-1 items-center justify-center">

src/app/finding-match/finding-match-client.tsx

@@ -87,9 +87,9 @@ export default function FindingMatchClient() {
 
       <main
         style={{ paddingBottom: "calc(100px + var(--safe-bottom))" }}
-        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] text-center"
+        className="-mx-[17px] flex min-h-screen flex-col px-[23px] text-center"
       >
-        <PageHeader className="-mx-[6px]" />
+        <PageHeader />
 
         <section className="mt-20 flex flex-1 flex-col items-center">
           <div className="relative h-[124px] w-[130px]" aria-hidden="true">

src/app/new-match/new-match-client.tsx

@@ -635,15 +635,8 @@ export default function NewMatchClient() {
         <PageBackground />
         <main
           className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
-        >
-          <div
-            style={{
-              paddingTop: `${Math.max(12, top + 4)}px`,
-            }}
-            className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
         >
           <PageHeader profile={profile} />
-          </div>
 
           <div
             style={{
@@ -724,15 +717,8 @@ export default function NewMatchClient() {
 
       <main
         className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
-      >
-        <div
-          style={{
-            paddingTop: `${Math.max(12, top + 4)}px`,
-          }}
-          className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
       >
         <PageHeader profile={profile} />
-        </div>
 
         <div
           style={{

src/app/request-accepted/request-accepted-client.tsx

@@ -538,8 +538,8 @@ export default function RequestAcceptedClient() {
         />
       ) : null}
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
-        <PageHeader className="-mx-[6px]" profile={profile} />
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pb-[calc(20px+var(--safe-bottom))] text-center">
+        <PageHeader profile={profile} />
 
         <div className="flex flex-1 flex-col justify-between gap-6 pt-4">
           <section className="flex flex-col items-center">

src/app/request-sent/request-sent-client.tsx

@@ -88,9 +88,9 @@ export default function RequestSentClient() {
 
       <main
         style={{ paddingBottom: "calc(40px + var(--safe-bottom))" }}
-        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] text-center"
+        className="-mx-[17px] flex min-h-screen flex-col px-[23px] text-center"
       >
-        <PageHeader className="-mx-[6px]" profile={profile} />
+        <PageHeader profile={profile} />
 
         <div className="flex flex-1 flex-col justify-between gap-16 pt-8">
           <section className="flex flex-col items-center">

src/components/Componentes/page-header.tsx

@@ -22,14 +22,26 @@ type PageHeaderProps = {
    */
   enableProfileQuery?: boolean;
   profile?: any;
+  /**
+   * Whether the header is sticky at the top during scroll (matching Flutter AppBar).
+   * Defaults to true.
+   */
+  sticky?: boolean;
 };
 
+/**
+ * Standard AppBar for Marriage WebApp matching Flutter's Scaffold.appBar:
+ * - Toolbar Height: 56px (Flutter Material kToolbarHeight)
+ * - Top Safe Area: max(12px, var(--safe-top) + 4px)
+ * - Sticky at top during body scroll with frosted blur backdrop
+ */
 export function PageHeader({
   className,
   leftButton,
   rightButton,
   enableProfileQuery = true,
   profile: profileProp,
+  sticky = true,
 }: PageHeaderProps) {
   const { dictionary: t } = useI18n();
 
@@ -57,16 +69,26 @@ export function PageHeader({
 
   return (
     <header
-      className={["flex items-center justify-between pb-3", className]
+      style={{
+        paddingTop: "max(12px, calc(var(--safe-top) + 4px))",
+      }}
+      className={[
+        sticky
+          ? "sticky top-0 z-30 -mx-[17px] px-[17px] bg-[#F7F1F0]/90 backdrop-blur-md"
+          : "relative z-30 -mx-[17px] px-[17px]",
+        className,
+      ]
         .filter(Boolean)
         .join(" ")}
     >
+      <div className="flex h-[56px] items-center justify-between">
         {leftButton?.className?.includes("hidden") ? (
           <div className="size-10 shrink-0" />
         ) : (
           <NavigationButton icon="back" profile={profile} {...leftButton} />
         )}
-      <h1 className="font-faminela text-[20px] font-normal text-foreground">
+
+        <h1 className="font-faminela text-[20px] font-normal text-[#171717] leading-none select-none">
           {t["Habib Marriage"]}
         </h1>
 
@@ -99,9 +121,9 @@ export function PageHeader({
             {...rightButtonRest}
           />
         )}
+      </div>
     </header>
   );
 }
 
 export default PageHeader;
-