feat: add Not Found component

src/components/NotFound.tsx

@@ -0,0 +1,35 @@
+import { css } from '@styled-system/css'
+import type { FC } from 'react'
+import FullWidth from '@/components/layout/FullWidth'
+
+const NotFoundStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+})
+
+const NotFound: FC = () => {
+  return (
+    <FullWidth className={NotFoundStyle}>
+      <span
+        className={css({
+          fontSize: '100px',
+          fontFamily: 'orbitron',
+          fontWeight: '900',
+          lineHeight: 'none',
+          color: 'primary.9'
+        })}
+      >
+        404
+      </span>
+      <h1 className={css({ fontSize: '45px' })}>Pagina no encontrada.</h1>
+      <p>
+        La pagina que estas buscando no existe o ha sido movida. Puedes volver a
+        la <a href="/">pagina principal</a>, o intentar de nuevo mas tarde.
+      </p>
+    </FullWidth>
+  )
+}
+
+export default NotFound

src/components/layout/FullWidth.tsx

@@ -1,6 +1,5 @@
 import { css, cx } from '@styled-system/css'
 import type { FC, ReactNode } from 'react'
-import Footer from '@/components/layout/fragments/Footer'
 
 export interface FullWidthProps {
   className?: string
@@ -8,12 +7,7 @@ export interface FullWidthProps {
 }
 
 const FullWidth: FC<FullWidthProps> = ({ className, children }) => {
-  return (
+  return <main className={cx(css({ flexGrow: 1 }), className)}>{children}</main>
-    <>
-      <main className={cx(css({ flexGrow: 1 }), className)}>{children}</main>
-      <Footer />
-    </>
-  )
 }
 
 export default FullWidth

src/components/layout/fragments/Header.tsx

@@ -0,0 +1,96 @@
+import { css, cx } from '@styled-system/css'
+import { token } from '@styled-system/tokens'
+import { type FC, useCallback, useEffect, useState } from 'react'
+import SrJuggernautLogo from '@/components/assets/SrJuggernautLogo'
+import MainMenu from '@/components/layout/fragments/MainMenu'
+import srOnlyClass from '@/styles/srOnly'
+
+const headerClass = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'sticky',
+  top: 0,
+  transition: `background-color ${token('durations.slow')} ${token('easings.easeOutQuint')}`,
+  zIndex: 1,
+  flexShrink: 0
+})
+
+const headerUnscrolledClass = css({
+  backgroundColor: 'transparent'
+})
+
+const headerScrolledClass = css({
+  backgroundColor: 'neutral.2'
+})
+
+const headerContainerClass = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: 'md',
+  maxWidth: {
+    sm: 'breakpoint-sm',
+    md: 'breakpoint-md',
+    lg: 'breakpoint-lg',
+    xl: 'breakpoint-xl',
+    '2xl': 'breakpoint-2xl'
+  }
+})
+
+const headerLogoLinkClass = css({
+  color: 'neutral.12',
+  cursor: 'pointer'
+})
+
+const headerLogoClass = css({
+  fill: 'neutral.12',
+  height: '30px',
+  width: 'auto'
+})
+
+const Header: FC = () => {
+  const [scrolled, setScrolled] = useState(false)
+
+  const handleScroll = useCallback(() => {
+    if (window.scrollY > 0) {
+      setScrolled(true)
+    } else {
+      setScrolled(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
+
+  return (
+    <header
+      className={cx(
+        headerClass,
+        scrolled ? headerScrolledClass : headerUnscrolledClass
+      )}
+    >
+      <div className={headerContainerClass}>
+        <a
+          className={headerLogoLinkClass}
+          href="/"
+        >
+          <SrJuggernautLogo className={headerLogoClass} />
+          <span className={srOnlyClass}>Ir a la página principal</span>
+        </a>
+        <MainMenu />
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/layout/fragments/MainMenu.tsx

@@ -0,0 +1,186 @@
+import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { css } from '@styled-system/css'
+import { token } from '@styled-system/tokens'
+import { type FC, type ReactNode, useRef } from 'react'
+import SrJuggernautLogo from '@/components/assets/SrJuggernautLogo'
+import Button from '@/components/ui/Button'
+import Menu, {
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator
+} from '@/components/ui/Menu'
+import srOnlyClass from '@/styles/srOnly'
+
+const menuDialogClass = css({
+  position: 'fixed',
+  height: '100dvh',
+  width: {
+    base: '100%',
+    sm: '250px'
+  },
+  top: 0,
+  right: 0,
+  left: 'auto',
+  backgroundColor: 'neutral.2',
+  color: 'neutral.12',
+  transition: `transform ${token('durations.normal')} ${token('easings.easeOutQuint')}`,
+  transitionBehavior: 'allow-discrete',
+  transform: 'translateX(0)',
+  '@starting-style': {
+    transform: 'translateX(100%)',
+    _backdrop: {
+      opacity: 0,
+      backgroundColor: 'transparent',
+      transition: `background-color ${token('durations.normal')} ${token('easings.easeOutQuint')}, opacity ${token('durations.fast')} ${token('easings.easeOutQuint')}`,
+      transitionBehavior: 'allow-discrete'
+    }
+  },
+  _backdrop: {
+    opacity: 1,
+    backdropFilter: 'blur(5px)',
+    backgroundColor: 'neutral.1/80',
+    transition: `background-color ${token('durations.normal')} ${token('easings.easeOutQuint')}, opacity ${token('durations.fast')} ${token('easings.easeOutQuint')}`,
+    transitionBehavior: 'allow-discrete'
+  }
+})
+
+const menuHeaderContainerClass = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  width: '100%',
+  padding: 'md'
+})
+
+const menuHeaderLogoLinkClass = css({
+  color: 'neutral.12',
+  cursor: 'pointer'
+})
+
+const menuHeaderLogoClass = css({
+  fill: 'neutral.12',
+  height: '30px',
+  width: 'auto'
+})
+
+interface MainMenuLink {
+  type: 'link'
+  href: string
+  label: ReactNode
+}
+
+interface MainMenuLabel {
+  type: 'label'
+  label: ReactNode
+}
+
+interface MainMenuSeparator {
+  type: 'separator'
+}
+
+interface MainMenuGroup {
+  type: 'group'
+  label: ReactNode
+  content: (MainMenuLink | MainMenuLabel | MainMenuSeparator)[]
+}
+
+type MenuItemType =
+  | MainMenuLink
+  | MainMenuSeparator
+  | MainMenuLabel
+  | MainMenuGroup
+
+const menuContent: MenuItemType[] = [
+  { type: 'link', href: '/', label: 'Inicio' }
+]
+
+const RenderMenuItem: FC<MenuItemType> = (item) => {
+  switch (item.type) {
+    case 'link':
+      return (
+        <MenuItem render={<a href={item.href}>{item.label}</a>}>
+          {item.label}
+        </MenuItem>
+      )
+    case 'label':
+      return <MenuLabel>{item.label}</MenuLabel>
+    case 'separator':
+      return <MenuSeparator />
+    case 'group':
+      return (
+        <MenuGroup label={item.label}>
+          {item.content.map((item, index) => (
+            <RenderMenuItem
+              key={`group-${item.type}-${index.toString()}`}
+              {...item}
+            />
+          ))}
+        </MenuGroup>
+      )
+  }
+}
+
+const MainMenu: FC = () => {
+  const DialogMenuRef = useRef<HTMLDialogElement>(null)
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="ghost"
+        color="primary"
+        onClick={() => {
+          if (DialogMenuRef.current) {
+            DialogMenuRef.current.showModal()
+          }
+        }}
+      >
+        <FontAwesomeIcon icon={faBars} />
+      </Button>
+      <dialog
+        ref={DialogMenuRef}
+        className={menuDialogClass}
+        closedby="any"
+      >
+        <header className={menuHeaderContainerClass}>
+          <a
+            className={menuHeaderLogoLinkClass}
+            href="/"
+          >
+            <SrJuggernautLogo className={menuHeaderLogoClass} />
+            <span className={srOnlyClass}>Ir a la página principal</span>
+          </a>
+          <Button
+            type="button"
+            variant="ghost"
+            color="primary"
+            onClick={() => {
+              if (DialogMenuRef.current) {
+                DialogMenuRef.current.close()
+              }
+            }}
+          >
+            <FontAwesomeIcon icon={faTimes} />
+          </Button>
+        </header>
+        <Menu
+          render={<menu />}
+          className={css({
+            width: '100%'
+          })}
+        >
+          {menuContent.map((item, index) => (
+            <RenderMenuItem
+              key={`menu-${item.type}-${index.toString()}`}
+              {...item}
+            />
+          ))}
+        </Menu>
+      </dialog>
+    </>
+  )
+}
+
+export default MainMenu

src/components/ui/Menu.tsx

@@ -0,0 +1,107 @@
+import { useRender } from '@base-ui/react/use-render'
+import { cx } from '@styled-system/css'
+import { type MenuVariantProps, menu } from '@styled-system/recipes/menu'
+import type { FC, ReactNode } from 'react'
+import type { MergeOmitting } from '@/types/helpers'
+
+export type MenuProps = MergeOmitting<
+  useRender.ComponentProps<'div'>,
+  MenuVariantProps
+>
+
+const Menu: FC<MenuProps> = ({ render, className, ...props }) => {
+  const [menuProps, allOther] = menu.splitVariantProps(props)
+  return useRender({
+    defaultTagName: 'div',
+    render,
+    props: { className: cx(menu(menuProps).container, className), ...allOther }
+  })
+}
+
+export default Menu
+
+export type MenuItemProps = MergeOmitting<
+  useRender.ComponentProps<'button'>,
+  MenuVariantProps
+>
+
+export const MenuItem: FC<MenuItemProps> = ({
+  render,
+  className,
+  ...props
+}) => {
+  const [menuProps, allOther] = menu.splitVariantProps(props)
+  return useRender({
+    defaultTagName: 'button',
+    render,
+    props: { className: cx(menu(menuProps).item, className), ...allOther }
+  })
+}
+
+export type MenuLabelProps = MergeOmitting<
+  useRender.ComponentProps<'span'>,
+  MenuVariantProps
+>
+
+export const MenuLabel: FC<MenuLabelProps> = ({
+  render,
+  className,
+  ...props
+}) => {
+  const [menuProps, allOther] = menu.splitVariantProps(props)
+
+  return useRender({
+    defaultTagName: 'span',
+    render,
+    props: { className: cx(menu(menuProps).label, className), ...allOther }
+  })
+}
+
+export type MenuGroupProps = MergeOmitting<
+  useRender.ComponentProps<'div'>,
+  MenuVariantProps & { label: ReactNode }
+>
+
+export const MenuGroup: FC<MenuGroupProps> = ({
+  render,
+  children,
+  className,
+  label,
+  ...props
+}) => {
+  const [menuProps, allOther] = menu.splitVariantProps(props)
+  return useRender({
+    defaultTagName: 'div',
+    render,
+
+    props: {
+      className: cx(menu(menuProps).group, className),
+      children: (
+        <>
+          <span className={cx(menu(menuProps).label)}>{label}</span>
+          {children}
+        </>
+      ),
+      ...allOther
+    }
+  })
+}
+
+export type MenuSeparatorProps = MergeOmitting<
+  Omit<useRender.ComponentProps<'div'>, 'children'>,
+  MenuVariantProps
+>
+
+export const MenuSeparator: FC<MenuSeparatorProps> = ({
+  render,
+  className,
+  ...props
+}) => {
+  const [menuProps, allOther] = menu.splitVariantProps(props)
+
+  return useRender({
+    defaultTagName: 'div',
+    render,
+    props: { className: cx(menu(menuProps).separator, className), ...allOther }
+  })
+}

src/routes/__root.tsx

@@ -11,6 +11,9 @@ import {
   Scripts
 } from '@tanstack/react-router'
 import type { ReactNode } from 'react'
+import Footer from '@/components/layout/fragments/Footer'
+import Header from '@/components/layout/fragments/Header'
+import NotFound from '@/components/NotFound'
 import GLOBAL_CSS from '@/styles/global.css?url'
 
 config.autoAddCss = false
@@ -79,7 +82,8 @@ export const Route = createRootRoute({
       }
     ]
   }),
-  component: RootComponent
+  component: RootComponent,
+  notFoundComponent: NotFound
 })
 
 function RootComponent() {
@@ -97,7 +101,9 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
         <HeadContent />
       </head>
       <body>
+        <Header />
         {children}
+        <Footer />
         <Scripts />
       </body>
     </html>