Merge pull request #13 from Johnnyrc26/dev

Dev

api/logic/apiData.js

@@ -76,7 +76,9 @@ const procesarEstado = (estado) => {
               twitter: poi.twitter,
               instagram: poi.instagram,
               manager: '66d878adbb0fb67868b4bfc1',
-              imagenes: poi.imagenes.map(imagen => ({ url: imagen.url })),
+              imagenes: poi.imagenes.map(imagen => ({
+                url: imagen.url
+              })),
             })
 
             return hotel.save()

app/package.json

@@ -11,12 +11,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.0",
+    "@mui/material": "^6.1.0",
     "com": "file:../com",
     "react": "^18.3.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
-    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.25.1"
   },
   "devDependencies": {

app/src/components/Views/library/Desktop/Banner.css

@@ -0,0 +1,11 @@
+@tailwind components;
+
+@layer components{
+  .banner {
+    @apply relative w-11/12 h-72 bg-cover bg-center rounded-2xl mb-8 flex items-center justify-center;
+  }
+
+  .slogan {
+    @apply text-white text-8xl font-righteous text-center;
+  }
+}

app/src/components/Views/library/Desktop/Banner.jsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react'
+import './Banner.css'
+
+const images = [
+  'https://cdn.laguiavalentinaquintero.com/poi/Poi_66279ece42df1d426737bec4_5cc313f9c3eb99cf60eb67e8a94be42a.jpeg',
+  'https://cdn.laguiavalentinaquintero.com/poi/Poi_65aed40342df1d6d4415da44_19770b5e4884921f123bf319c2f1859e.jpeg',
+  'https://cdn.laguiavalentinaquintero.com/poi/Poi_58d274e608b7895965756924_bb1b47809dec7adc33b5fe0988b50a95.jpeg',
+  'https://cdn.laguiavalentinaquintero.com/poi/Poi_5d4c24e342df1d1dfe508d54_d138aabc030e02abed40f3db7535cafb.jpeg'
+
+]
+
+const Banner = () => {
+  const [currentImage, setCurrentImage] = useState(images[0]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentImage((prevImage) => {
+        const currentIndex = images.indexOf(prevImage);
+        const nextIndex = (currentIndex + 1) % images.length;
+        return images[nextIndex];
+      })
+    }, 4000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="banner" style={{ backgroundImage: `url(${currentImage})` }}>
+      <div className='slogan'>Viaja, descubre, quédate</div>
+    </div>
+  )
+}
+
+export default Banner

app/src/components/Views/library/Desktop/TopBarHome.css

@@ -0,0 +1,54 @@
+@tailwind components;
+@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
+
+@tailwind components;
+
+
+@layer components {
+  .topbar {
+    @apply relative w-full h-96 bg-cover bg-center
+  }
+
+  .brand {
+    @apply absolute top-14 left-14 transform -translate-y-1/2 text-white text-6xl font-righteous
+  }
+
+  .searchBar{
+    @apply flex items-center justify-center pr-0 pl-0 pt-52 
+  }
+
+  .search-form{
+    @apply p-4 space-x-1 rounded-3xl
+  }
+
+  .search-form input,
+  .search-form button {
+    @apply px-4 py-2 border rounded-md;
+    @apply focus:outline-none focus:ring-2 focus:ring-blue-500;
+  }
+
+  .search-form input[type="text"],
+  .search-form input[type="number"] {
+    @apply flex-1;
+  }
+
+  .search-form input[type="date"] {
+    @apply w-44; /* Ajusta el ancho de los campos de fecha */
+  }
+
+  .search-form button {
+    @apply bg-blue-500 text-white hover:bg-blue-600;
+  }
+
+  .search-form button:hover {
+    @apply bg-blue-600;
+  }
+
+
+  .nav{
+    @apply absolute pt-32 right-14 transform -translate-y-1/2 text-white text-xl font-normal
+  }
+
+
+
+}

app/src/components/Views/library/Desktop/TopBarHome.jsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import './TopBarHome.css'; // Asegúrate de crear este archivo para los estilos
+
+const images = [
+  'https://cdn.laguiavalentinaquintero.com/poi/Poi_5772758682c805563ef06b95_c24d3d8ec63a80d22111689096b41776.jpeg',
+  'https://cdn.laguiavalentinaquintero.com/poi/Poi_5772758682c805563ef06bac_67ba4d3908e4d28fc33333ef14da39e0.jpeg',
+  'https://cdn.laguiavalentinaquintero.com/poi/Poi_5772758682c805563ef06ee1_6f5d6aef416a08633de792b9d89ee589.jpeg',
+  'https://cdn.laguia.grupoapok.com/poi/Poi_5772758682c805563ef06e36_b8b1ea83cf1a628a7d6520e6ba11eab1.jpeg'
+
+];
+
+const TopBarHome = () => {
+  const [currentImage, setCurrentImage] = useState(images[0]);
+  const [city, setCity] = useState('');
+  const [dates, setDates] = useState({ start: '', end: '' });
+  const [people, setPeople] = useState('');
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentImage((prevImage) => {
+        const currentIndex = images.indexOf(prevImage);
+        const nextIndex = (currentIndex + 1) % images.length;
+        return images[nextIndex];
+      })
+    }, 5000)
+
+    return () => clearInterval(interval)
+  }, []);
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    console.log('Searching for:', { city, dates, people });
+  };
+
+  return (
+    <div className="topbar" style={{ backgroundImage: `url(${currentImage})` }}>
+      <div className="brand">KAU</div>
+      <div className="nav">
+        <a href="/register">Registrarse |</a>
+        <a href="/login"> Iniciar sesión |</a>
+        <a href="/about"> Conócenos</a>
+      </div>
+      <div className='searchBar'>
+      <form className="search-form" onSubmit={handleSearch}>
+        <input
+          type="text"
+          placeholder="Ciudad"
+          value={city}
+          onChange={(e) => setCity(e.target.value)}
+        />
+        <input
+          type="date"
+          value={dates.start}
+          onChange={(e) => setDates((prevDates) => ({ ...prevDates, start: e.target.value }))}
+        />
+        <input
+          type="date"
+          value={dates.end}
+          onChange={(e) => setDates((prevDates) => ({ ...prevDates, end: e.target.value }))}
+        />
+        <input
+          type="number"
+          placeholder="Número de personas"
+          value={people}
+          onChange={(e) => setPeople(e.target.value)}
+        />
+        <button type="submit">Buscar</button>
+      </form>
+      </div>
+    </div>
+  );
+};
+
+export default TopBarHome

app/src/components/Views/library/RoomList.css

@@ -2,64 +2,70 @@
 
 @layer components{
 
-  body{
-    @apply pt-24 
-  }
   #root{
-    @apply flex flex-col items-center w-11/12
+    @apply flex flex-col items-center
   }
 
   .EmptyRooms{
     @apply text-center font-semibold text-gray-500
   }
 
-  .Container{
-    @apply flex flex-col items-center w-full mx-auto
+  .Contenedor{
+    @apply flex flex-col items-center w-full mx-auto mt-11
+  }
+
+  .TitleHome{
+    @apply text-4xl pb-12 font-normal
   }
 
   .Grid{
-    @apply mb-20 mt-8 
+    @apply mb-3 pl-14 pr-14
   }
 
   .Card{
-    @apply mb-8 bg-white rounded-lg shadow-md overflow-hidden flex flex-col items-center
+    @apply mb-8 bg-white rounded-lg shadow-md overflow-hidden flex flex-col items-center;
+    @apply relative h-full min-h-[350px]
   }
 
   .Img{
-    @apply w-[-webkit-fill-available] h-auto object-cover 
+    @apply w-[-webkit-fill-available] h-80 object-cover 
   }
 
   .InfoCard{
-    @apply flex flex-col gap-2.5 m-4 w-full pl-5 pr-5
+    @apply flex flex-col gap-2.5 m-4 w-full pl-5 pr-5;
+    @apply flex-grow h-full
   }
 
-  .InfoCardLeft{
-    @apply flex flex-col gap-1 
+  .InfoCardLeft {
+    @apply flex flex-col gap-1 w-2/3; 
+    @apply justify-start; 
+    @apply flex-shrink-0 h-auto;
   }
 
-  .nameRoom{
-    @apply text-2xl font-semibold 
+  .nameRoom {
+    @apply text-2xl font-semibold pt-12;
+    @apply min-h-[40px];
   }
 
-  .city{
-    @apply italic text-sm
+  .city {
+    @apply italic text-sm;
+    @apply min-h-[20px];
   }
 
-  .descriptionRoom{
-    @apply text-lg
+  .descriptionRoom {
+    @apply text-lg line-clamp-2; 
+    @apply min-h-[40px]; 
   }
-
-  .InfoCardRight{
-    @apply items-end
+  .InfoCardRight {
+    @apply static mt-auto; 
+    @apply h-auto;
   }
 
   .Price{
     @apply flex flex-col gap-1 items-end font-bold
   }
 
-  .LinkTo {
-    @apply py-2 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600 text-center w-64 mb-5 
-  }
+
 
   .Pagination{
     @apply mb-9 
@@ -71,10 +77,10 @@
 
   @media (min-width: 395px) and (max-width: 3000px) {
     .Container{
-      @apply flex flex-col items-center w-full mx-auto
+      @apply flex flex-col items-center w-full mx-auto 
     }
     .Grid {
-      @apply grid-cols-4 grid-rows-4 grid gap-6 
+      @apply grid-cols-4 grid-rows-2 grid gap-6 
     }
 
     .Card {