sticky header

replayio · Apr 11, 2024 · acb35ba · acb35ba
1 parent cafcaba
commit acb35ba
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -134,3 +134,4 @@ dist
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.env*.local
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -52,7 +52,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <head>
         <Analytics />
       </head>
-      <body className="flex h-full flex-col">{children}</body>
+      <body>{children}</body>
     </html>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -12,6 +12,7 @@ import FAQ from '~/components/sections/FAQ'
 import DynamicAnalysis from '~/components/sections/DynamicAnalysis'
 import { Content } from '~/components/sections/Content'
 import { HyperSpace } from '~/components/Hyper'
+
 export default function Home() {
   return (
     <Pump
@@ -23,11 +24,11 @@ export default function Home() {
         'use server'
         return (
           <>
+            <Header />
             <main>
               <div className="relative">
-                <Header />
                 <Hero {...landingPage} />
-                <div style={{ zIndex: -1 }} className=" absolute inset-0 w-full">
+                <div style={{ zIndex: -1 }} className="absolute inset-0 w-full">
                   <HyperSpace
                     cx={-10}
                     cy={75}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -90,9 +90,8 @@ function MobileNavigation() {
 export function Header({ variant }: { variant?: 'dark' | 'light' }) {
   return (
     <header
-      aria-label="Header"
       className={classNames(
-        'py-10',
+        'sticky top-0 z-50 py-10 backdrop-blur-md backdrop-saturate-150 backdrop-filter',
         variant === 'dark' ? 'bg-slate-900 text-slate-100 ' : 'bg-transparent text-slate-900'
       )}
     >