hecho responsive para desktop

src/layout/Footer.jsx

@@ -17,7 +17,7 @@ export default function Footer() {
   }
 
   return (
-    <div className='border-t border-gray-500 mt-2'>
+    <div className='border-t border-gray-500 sm:mt-2'>
       <div className='flex justify-between'>
         <div className='flex items-center relative z-[1] ml-2 mb-1 mt-1 gap-2'>
           <a href="mailto:demnitth@gmail.com" target="_blank" className='mb-1 ml-1'>

src/layout/header/components/NavigationBar.jsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 import {Link} from 'react-router-dom'
 import DropdownData from './DropdownData'
 import Instrucciones from '../modals/Instrucciones'
 import Organizador from '../modals/organizador/Organizador'
+import ScrollButton from './ScrollButton'
 
 function setZ(toggled) {
   if (toggled) return 'z-0'
@@ -11,12 +12,22 @@ function setZ(toggled) {
 
 // Sociedad: Pobreza, Crimen, 
 export default function NavigationBar({toggled, datosDisponibles, setOrganizacionHome, organizacionHome}) {
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+
+  useEffect(() => {
+    const touchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    setIsTouchDevice(touchDevice);
+  }, []);
+
   return (
     <div id='slider' className={
-      `flex text-lg gap-5 pl-2 pr-4 sm:text-xl sm:justify-around sm:ml-0 sm:gap-0
+      `flex text-lg gap-5 pl-2 pr-4 sm:text-xl lg:justify-around lg:ml-0 lg:gap-0
       overflow-x-scroll whitespace-nowrap scroll-smooth no-scrollbar w-full
+      xl:ml-0
       ${setZ(toggled)}`
     }>
+      {!isTouchDevice && <ScrollButton type='left'/>}
+
       <Organizador setOrganizacionHome={setOrganizacionHome} organizacionHome={organizacionHome}/>
 
       <Instrucciones/>
@@ -27,6 +38,7 @@ export default function NavigationBar({toggled, datosDisponibles, setOrganizacio
 
       <Link to='/donar'><span className='hover:text-stroke'>Donar</span></Link>
 
+      {!isTouchDevice && <ScrollButton type='right'/>}
     </div>
   )
 }

src/layout/header/components/ScrollButton.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+
+export default function ScrollButton({ type }) {
+  const [isVisible, setIsVisible] = useState(true);
+
+const updateButtonVisibility = () => {
+  const parentElement = document.getElementById('slider');
+  const { scrollLeft, scrollWidth, clientWidth } = parentElement;
+
+  console.log(scrollLeft, scrollWidth, clientWidth, type)
+
+  if (type === 'right') {
+    setIsVisible(scrollLeft < scrollWidth - clientWidth);
+  } 
+
+  else {
+    setIsVisible(scrollLeft > 0)
+  }
+};
+
+
+  useEffect(() => {
+    const parentElement = document.getElementById('slider');
+    parentElement.addEventListener('scroll', updateButtonVisibility);
+    updateButtonVisibility();
+    return () => {
+      parentElement.removeEventListener('scroll', updateButtonVisibility);
+    };
+  }, [type]);
+
+  const handleClick = () => {
+    const parentElement = document.getElementById('slider');
+    const scrollAmount = type === 'right' ? 200 : -200;
+    parentElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+  };
+
+  const style = type === 'right' ? 'right-0' : 'left-0';
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`lg:hidden bg-[hsl(215,21%,11%)] z-[1] absolute top-[1.2rem] w-5 ${style} ${!isVisible && 'hidden'}`}
+    >
+      <img src={require(type === 'right' ? '../../../assets/right.png' : '../../../assets/left.png')} />
+    </button>
+  );
+}

src/pages/Home.jsx

@@ -36,7 +36,7 @@ export default function Home({cacheData, setCacheData, organizacionHome}) {
   }, [organizacionHome])
 
   return (
-    <div className='flex flex-col min-h-full sm:grid lg:grid-cols-3 sm:gap-2 sm:ml-5 sm:mr-5'>
+    <div className='flex flex-col min-h-full lg:grid lg:grid-cols-2 xl15:grid-cols-3 md:gap-2 md:ml-5 md:mr-5'>
       {componentesHome}
   </div>
   )

tailwind.config.js

@@ -15,7 +15,11 @@ module.exports = {
         slate: {
           850: 'hsl(217, 33%, 16.5%)',
         }
-      }
+      },
+
+      screens: {
+        'xl15': '1370px',
+      },
     },
   },
   plugins: [