fix(landing): add Container component to fix header width

vscubing · Aug 17, 2024 · b6a3365 · b6a3365
1 parent bc41dd7
commit b6a3365
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 48 deletions.
diff --git a/src/features/landing/LandingPage.lazy.tsx b/src/features/landing/LandingPage.lazy.tsx
@@ -1,41 +1,44 @@
 import { createLazyRoute } from '@tanstack/react-router'
 import { Header } from './sections/Header'
 import { HeroSection } from './sections/HeroSection'
+import { Container } from './components/Container'
 
 export const Route = createLazyRoute('/landing')({
   component: LandingPage,
 })
 
 function LandingPage() {
   return (
-    <main className='bg-black-120 px-6 pb-6 text-lg text-grey-40'>
-      <div className='mx-auto max-w-[86rem]'>
-        <div className='flex min-h-svh flex-col py-24'>
-          <Header />
-          <HeroSection />
-        </div>
-        Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem
-        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 officia. Sit irure elit esse ea nulla sunt ex
-        occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident
-        adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
-        excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa
-        duis. 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
-        officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris
-        cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia
-        eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat
-        ullamco ut ea consectetur et est culpa et culpa duis. 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 officia. Sit irure elit esse ea nulla sunt ex
-        occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident
-        adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
-        excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa
-        duis.
-      </div>
-    </main>
+    <>
+      <Header />
+      <main className='bg-black-120 pb-6 text-lg text-grey-40'>
+        <Container>
+          <div className='flex min-h-svh flex-col py-24'>
+            <HeroSection />
+          </div>
+          Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem
+          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 officia. Sit irure elit esse ea nulla sunt ex
+          occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident
+          adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
+          excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et
+          culpa duis. 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 officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor
+          Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem
+          sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate
+          laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis. 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 officia. Sit
+          irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
+          officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod.
+          Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
+          ut ea consectetur et est culpa et culpa duis.
+        </Container>
+      </main>
+    </>
   )
 }
diff --git a/src/features/landing/components/Container.tsx b/src/features/landing/components/Container.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from '@tanstack/react-router'
+
+export function Container({ children }: { children: ReactNode }) {
+  return (
+    <div className='px-6'>
+      <div className='mx-auto max-w-[86rem]'>{children}</div>
+    </div>
+  )
+}
diff --git a/src/features/landing/components/index.ts b/src/features/landing/components/index.ts
diff --git a/src/features/landing/sections/Header.tsx b/src/features/landing/sections/Header.tsx
@@ -1,6 +1,7 @@
 import { Logo } from '@/components/layout/components'
 import { cn } from '@/utils'
 import { useState, useEffect } from 'react'
+import { Container } from '../components/Container'
 
 export function Header() {
   const [isScrolled, setIsScrolled] = useState(false)
@@ -19,25 +20,29 @@ export function Header() {
   }, [])
 
   return (
-    <header
-      className={cn(
-        'fixed top-0 z-10 flex w-full rounded-[1rem] bg-black-120 pl-9 pr-2 transition-all duration-100',
-        isScrolled ? 'items-center bg-black-80/75 py-2 backdrop-blur-lg' : 'items-end pb-2 pt-9',
-      )}
-    >
-      <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 className={cn('fixed left-0 top-0 z-10 w-full')}>
+      <Container>
+        <div
+          className={cn(
+            'flex rounded-[1rem] bg-black-120 pl-9 pr-2 transition-all duration-100',
+            isScrolled ? 'items-center bg-black-80/75 py-2 backdrop-blur-lg ' : 'items-end pb-2 pt-9',
+          )}
+        >
+          <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'> TODO: add show/hide logic */}
+            {/*   <Link to='/'>Start cubing now</Link> */}
+            {/* </PrimaryButton> */}
+          </div>
+        </div>
+      </Container>
     </header>
   )
 }