fix: problem with useScrollRestoration hook and other changes

src/components/Footer.tsx

@@ -64,9 +64,8 @@ export function Footer() {
 
   return (
     <>
-      <Box mt='auto'>
+      <Box as='footer' mt='auto'>
         <Flex
-          as='footer'
           bg={bgFooter}
           mt='20'
           py='5'

src/components/forms/NewBook.tsx

@@ -199,6 +199,7 @@ export function FormNewBook() {
   return (
     <>
       <Flex
+        as='section'
         align='center'
         justify='center'
         direction='column'

src/components/nav/DesktopNav.tsx

@@ -75,7 +75,7 @@ export function DesktopNav() {
         <Flex
           as='nav'
           w='100%'
-          maxW='1160px'
+          maxW={{ base: '1160px', '2xl': '1430px' }}
           m='auto'
           justify='space-between'
           align='center'

src/hooks/useScrollRestoration.ts

@@ -1,23 +1,24 @@
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-export function useScrollRestoration(loading) {
+export function useScrollRestoration(loading: boolean) {
   const location = useLocation();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     function handleScroll() {
-      sessionStorage.setItem(location.key, JSON.stringify(window.scrollY));
+      sessionStorage.setItem(location.pathname, JSON.stringify(window.scrollY));
     }
 
     window.addEventListener('scroll', handleScroll);
 
-    const scrollPosition = sessionStorage.getItem(location.key);
+    const scrollPosition = sessionStorage.getItem(location.pathname);
+
     if (scrollPosition && !loading) {
       window.scrollTo(0, JSON.parse(scrollPosition));
     }
 
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
-  }, [location.key, loading]);
+  }, [location.pathname, loading]);
 }

src/pages/Home.tsx

@@ -48,6 +48,7 @@ export function Home() {
         urlImage='https://xbu.netlify.app/ogImage.png'
       />
       <Container
+        as='section'
         maxW='9xl'
         p='0'
         bg={bContainer}
@@ -136,6 +137,7 @@ export function Home() {
         </Box>
       </Container>
       <Flex
+        as='section'
         w='full'
         justify='center'
         align='flex-start'
@@ -179,6 +181,7 @@ export function Home() {
         </Stack>
       </Flex>
       <Flex
+        as='section'
         w='full'
         justify='center'
         align='flex-start'

src/pages/Search.tsx

@@ -21,7 +21,7 @@ import {
 import { Card } from '@components/cards/Card';
 import { CardType } from '@components/types';
 import { useFilter, useFilterPaginated } from '@hooks/queries';
-// import { useScrollRestoration } from '@hooks/useScrollRestoration';
+import { useScrollRestoration } from '@hooks/useScrollRestoration';
 import { ContainerTitle } from '@components/ContainerTitle';
 import { MySimpleGrid } from '@components/MySimpleGrid';
 import { MainHead } from '@components/Head';
@@ -85,7 +85,7 @@ export default function Search() {
   }
 
   const results = getNormalizedResults();
-  // useScrollRestoration(isPendingPaginated); // Restablece la posición del scroll al volver de la vista del libro
+  useScrollRestoration(isPendingPaginated); // Restablece la posición del scroll al volver de la vista del libro
 
   useEffect(() => {
     let isMounted = true;

src/pages/profile/Profile.tsx

@@ -195,6 +195,7 @@ export function Profile() {
         urlImage={data?.pages[0].user.picture}
       />
       <Flex
+        as='section'
         justify='center'
         align='center'
         direction='column'
@@ -233,6 +234,7 @@ export function Profile() {
         </Box>
       </Flex>
       <Flex
+        as='article'
         direction={{ base: 'column', md: 'row' }}
         maxW={{ base: '1260px', '2xl': '1560px' }}
         m='0 auto'