feat(landing): improve header

vscubing · Aug 15, 2024 · 9fa6656 · 9fa6656
1 parent ea036ba
commit 9fa6656
Showing 1 changed file with 16 additions and 14 deletions.
diff --git a/src/features/landing/LandingPage.lazy.tsx b/src/features/landing/LandingPage.lazy.tsx
@@ -12,12 +12,9 @@ function LandingPage() {
   const scrollableWrapperRef = useRef<HTMLElement>(null)
 
   return (
-    <main className='bg-black-120 h-svh overflow-y-auto px-6 pb-6 text-lg text-grey-40' ref={scrollableWrapperRef}>
+    <main className='h-svh overflow-y-auto bg-black-120 px-6 pb-6 text-lg text-grey-40' ref={scrollableWrapperRef}>
       <div className='mx-auto max-w-[86rem]'>
         <Header scrollableWrapperRef={scrollableWrapperRef} />
-        <PrimaryButton asChild>
-          <Link to='/'>Back to dashboard</Link>
-        </PrimaryButton>
         Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem
         pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud
         ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut
@@ -95,18 +92,23 @@ function Header({ scrollableWrapperRef }: { scrollableWrapperRef: RefObject<HTML
   return (
     <header
       className={cn(
-        'bg-black-120 sticky top-0 flex items-center gap-[6.25rem] rounded-[1rem] px-9 pb-3 transition-all duration-75',
-        isScrolled ? 'bg-black-80/75 pt-3 backdrop-blur-lg' : 'pt-9',
+        'sticky top-0 flex rounded-[1rem] bg-black-120 pl-9 pr-2 transition-all duration-100',
+        isScrolled ? 'h-[4.75rem] items-center bg-black-80/75 backdrop-blur-lg' : 'h-24 items-end pb-2',
       )}
     >
-      <Logo />
-      <nav className='vertical-alignment-fix flex gap-10 font-bold'>
-        {/* TODO: add anchor links */}
-        <a>About</a>
-        <a>Features</a>
-        <a>Guide</a>
-        <a>Contacts</a>
-      </nav>
+      <div className='flex w-full items-center gap-[6.25rem]'>
+        <Logo />
+        <nav className='vertical-alignment-fix flex gap-10 font-bold'>
+          {/* TODO: add anchor links */}
+          <a>About</a>
+          <a>Features</a>
+          <a>Guide</a>
+          <a>Contacts</a>
+        </nav>
+        <PrimaryButton asChild className='ml-auto h-14 px-10'>
+          <Link to='/'>Start cubing now</Link>
+        </PrimaryButton>
+      </div>
     </header>
   )
 }