Refactor header and layout components, remove About page, and introduce Background component for improved UI structure

apps/frontend/src/components/header.tsx

@@ -14,7 +14,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 import PlayzerIcon from '@/assets/playzer-favicon-512-transparent.png';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Link, useLocation, useNavigate } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
 
 import { Button } from '@/components/ui/button';
 import {
@@ -35,40 +35,6 @@ import { acceptStoredPendingInvite } from '@/lib/invitations';
 import { useCurrentComplexStore } from '@/lib/stores/current-complex-store';
 import { useTheme } from '@/lib/theme';
 
-interface NavItemProps {
-  to: '/' | '/about';
-  label: string;
-  isMobile?: boolean;
-  onClick?: () => void;
-}
-
-function NavItem({ to, label, isMobile, onClick }: NavItemProps) {
-  const location = useLocation();
-  const currentPath = location.pathname;
-  const isActive = to === '/' ? currentPath === '/' : currentPath.startsWith(to);
-
-  return (
-    <Link to={to} onClick={onClick}>
-      <Button
-        variant="ghost"
-        size={isMobile ? 'default' : 'sm'}
-        className={[
-          'rounded-none transition-all duration-200 hover:bg-transparent',
-          'focus-visible:ring-2 focus-visible:ring-primary/50',
-          isMobile && 'w-full justify-start rounded-2xl',
-          isActive
-            ? 'text-primary relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary'
-            : 'text-muted-foreground hover:text-foreground relative hover:after:absolute hover:after:bottom-0 hover:after:left-0 hover:after:right-0 hover:after:h-0.5 hover:after:bg-primary/50',
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        {label}
-      </Button>
-    </Link>
-  );
-}
-
 export function Header() {
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
@@ -113,11 +79,6 @@ export function Header() {
     return selected?.complexName ?? complexes[0]?.complexName ?? 'Mi complejo';
   }, [complexSlug, myComplexesQuery.data]);
 
-  const menuItems = [
-    { label: 'Inicio', to: '/' },
-    { label: 'About', to: '/about' },
-  ] as const;
-
   const handleSelectComplex = async (complexId: string, nextSlug: string) => {
     await apiClient.complexes.select({ complexId });
     setCurrentComplex(nextSlug);
@@ -154,12 +115,6 @@ export function Header() {
           </span>
         </Link>
 
-        <nav className="hidden absolute left-1/2 -translate-x-1/2 items-center gap-1 md:flex">
-          {menuItems.map((item) => (
-            <NavItem key={item.label} to={item.to} label={item.label} />
-          ))}
-        </nav>
-
         <div className="flex-1" />
 
         <div className="hidden items-center gap-2 md:flex">
@@ -336,18 +291,6 @@ export function Header() {
                 </div>
               </div>
 
-              <nav className="flex flex-col gap-1">
-                {menuItems.map((item) => (
-                  <NavItem
-                    key={item.label}
-                    to={item.to}
-                    label={item.label}
-                    isMobile
-                    onClick={() => setOpen(false)}
-                  />
-                ))}
-              </nav>
-
               <Button
                 className="rounded-2xl shadow-lg shadow-primary/20"
                 onClick={() => {