refactor: transition navigation to a persistent fixed-wrapper layout with improved scroll-based floating state styles

apps/product-site/src/app/[locale]/page.tsx

@@ -61,10 +61,10 @@ export default function Page() {
 
   return (
     <main>
-      {/*  ============ NAV + HERO ============  */}
-      <header className="hero">
+      {/*  ============ FIXED NAV ============  */}
+      <div className={`nav-wrapper ${isScrolled ? 'floating' : ''}`}>
         <div className="container">
-          <nav className={`nav ${isScrolled ? 'nav-floating' : ''}`}>
+          <nav className="nav">
             <div className="brand">
               <a href="#">
                 <div className="brand-mark">
@@ -102,7 +102,11 @@ export default function Page() {
               </div>
             </div>
           </nav>
-          <div className="nav-spacer"></div>
+        </div>
+      </div>
+
+      <header className="hero">
+        <div className="container">
 
           <div className="hero-inner">
             <h1>