Merge pull request #14 from Johnnyrc26/dev

Update components and styles; added About page
Johnnyrc26 · Sep 19, 2024 · 63f84b9 · 63f84b9
2 parents 288c637 + 4aea588
commit 63f84b9
Show file tree

Hide file tree

Showing 13 changed files with 180 additions and 91 deletions.
diff --git a/app/src/App.jsx b/app/src/App.jsx
@@ -10,10 +10,12 @@ import ManageRoom from './components/Views/pages/ManageRoom'
 import Booking from './components/Views/pages/Booking'
 import GuestBookings from './components/Views/pages/GuestBookings'
 import ManageProfile from './components/Views/pages/ManageProfile'
+import About from './components/Views/pages/About'
 import Alert from './components/Views/core/Alert'
 
 
 import './App.css'
+import { IoArrowBackOutline } from 'react-icons/io5'
 function App() {
   const [message, setMessage] = useState(null)
 
@@ -27,6 +29,7 @@ function App() {
         < Routes >
 
           <Route path='/' element={<Home />} />
+          <Route path='/about' element={<About />} />
           <Route path='/login' element={<Login />} />
           <Route path='/register' element={<Register />} />
           <Route path='/rooms' element={<CreateRoom />} />

diff --git a/app/src/components/Views/core/Header.jsx b/app/src/components/Views/core/Header.jsx
@@ -1,6 +1,6 @@
 function Header({ children }) {
   console.log('Header -> render')
-  return <header className='Header'>{children}</header>
+  return <header className='w-full'>{children}</header>
 }
 
 export default Header
diff --git a/app/src/components/Views/library/Desktop/Banner.css b/app/src/components/Views/library/Desktop/Banner.css
@@ -8,4 +8,13 @@
   .slogan {
     @apply text-white text-8xl font-righteous text-center;
   }
+
+  @media (max-width: 430px) and (max-width: 3000px){
+    .banner{
+      @apply relative w-80 h-36 bg-center rounded-2xl mb-8 flex items-center justify-center
+    }
+    .slogan{
+      @apply text-2xl
+    }
+  }
 }
diff --git a/app/src/components/Views/library/Desktop/TopBarHome.css b/app/src/components/Views/library/Desktop/TopBarHome.css
@@ -1,30 +1,30 @@
 @tailwind components;
+@tailwind base;
 @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
+    @apply relative w-full h-96 bg-cover bg-center text-center ;
   }
 
   .brand {
-    @apply absolute top-14 left-14 transform -translate-y-1/2 text-white text-6xl font-righteous
+    @apply absolute top-16 left-14 transform -translate-y-1/2 text-white text-7xl font-righteous;
   }
 
-  .searchBar{
-    @apply flex items-center justify-center pr-0 pl-0 pt-52 
+  .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 {
+    @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;
+    @apply px-4 py-2 border rounded-3xl w-96 h-12 focus:outline-none focus:ring-2 focus:ring-blue-500;
+  }
+
+  .search-form input {
+    @apply w-[500px]; 
   }
 
   .search-form input[type="text"],
@@ -33,22 +33,46 @@
   }
 
   .search-form input[type="date"] {
-    @apply w-44; /* Ajusta el ancho de los campos de fecha */
+    @apply w-52;
   }
 
   .search-form button {
-    @apply bg-blue-500 text-white hover:bg-blue-600;
+    @apply bg-blue-500 text-white hover:bg-blue-600 w-28 font-semibold;
   }
 
-  .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;
   }
-
 
-  .nav{
-    @apply absolute pt-32 right-14 transform -translate-y-1/2 text-white text-xl font-normal
+  @media (max-width: 430px) and (max-width: 3000px){
+    .topbar {
+      @apply flex flex-col items-center justify-center w-full h-96 bg-cover bg-center text-center; 
+
+    }
+
+    .brand {
+      @apply text-6xl font-righteous left-auto top-24; 
+    }
+
+    .nav {
+      @apply text-lg flex justify-center gap-4 right-auto; /* Alineación horizontal de los enlaces y espacio entre ellos */
+    }
+
+    .searchBar {
+      @apply flex justify-center mt-8 w-full; /* Alineación centrada */
+    }
+
+    .search-form {
+      @apply z-30 bg-white p-4 rounded-lg shadow-lg flex flex-col items-center space-y-4; /* Fondo blanco, padding y espacio entre elementos */
+    }
+
+    .search-form input,
+    .search-form button {
+      @apply w-64 h-10 border rounded-lg px-4; /* Tamaño uniforme para inputs y botón */
+    }
+
+    .search-form button {
+      @apply bg-blue-500 text-white hover:bg-blue-600 w-full font-semibold; /* Botón estilizado y alineado al 100% del ancho */
+    }
   }
-
-
-
 }
diff --git a/app/src/components/Views/library/Desktop/TopBarHome.jsx b/app/src/components/Views/library/Desktop/TopBarHome.jsx
@@ -6,14 +6,13 @@ const images = [
   '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('');
+  const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -22,7 +21,7 @@ const TopBarHome = () => {
         const nextIndex = (currentIndex + 1) % images.length;
         return images[nextIndex];
       })
-    }, 5000)
+    }, 6000)
 
     return () => clearInterval(interval)
   }, []);
@@ -32,43 +31,52 @@ const TopBarHome = () => {
     console.log('Searching for:', { city, dates, people });
   };
 
+  const toggleExpand = () => {
+    setExpanded(!expanded);
+  };
+
   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 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 ${expanded ? 'expanded' : 'collapsed'}`}
+          onSubmit={handleSearch}
+        >
+          <input
+            type="text"
+            placeholder="Ciudad"
+            value={city}
+            onChange={(e) => setCity(e.target.value)}
+            onClick={toggleExpand}
+          />
+          {expanded && (
+            <>
+              <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 }))}
+              />
+            </>
+          )}
+          <button type="submit">Buscar</button>
+        </form>
       </div>
     </div>
   );
 };
 
-export default TopBarHome
+export default TopBarHome;
diff --git a/app/src/components/Views/library/RoomList.css b/app/src/components/Views/library/RoomList.css
@@ -1,11 +1,6 @@
 @tailwind components;
 
 @layer components{
-
-  #root{
-    @apply flex flex-col items-center
-  }
-
   .EmptyRooms{
     @apply text-center font-semibold text-gray-500
   }
@@ -15,11 +10,12 @@
   }
 
   .TitleHome{
-    @apply text-4xl pb-12 font-normal
+    @apply text-4xl pb-12 font-semibold
   }
 
   .Grid{
-    @apply mb-3 pl-14 pr-14
+    @apply mb-5 pl-14 pr-14;
+    @apply grid grid-cols-4 grid-rows-2 gap-6 
   }
 
   .Card{
@@ -64,27 +60,28 @@
   .Price{
     @apply flex flex-col gap-1 items-end font-bold
   }
-
-
-
   .Pagination{
     @apply mb-9 
   }
 
   .Pagination button{
    @apply ml-6 mr-6 bg-slate-300 rounded-md p-2
   }
+  @media (max-width: 430px) {
+    .Container {
+      @apply flex flex-col items-center w-full mx-auto ;
+    }
 
-  @media (min-width: 395px) and (max-width: 3000px) {
-    .Container{
-      @apply flex flex-col items-center w-full mx-auto 
+    .Grid{
+      @apply flex flex-col
     }
-    .Grid {
-      @apply grid-cols-4 grid-rows-2 grid gap-6 
+
+    .TitleHome{
+      @apply text-xl font-semibold pb-10
     }
 
     .Card {
-      @apply w-full h-auto
+      @apply w-full h-auto;
     }
   }
 

diff --git a/app/src/components/Views/library/RoomList.jsx b/app/src/components/Views/library/RoomList.jsx
@@ -62,7 +62,7 @@ function RoomList() {
   return (
 
     <div className='Contenedor'>
-      <h1 className="TitleHome">Tú eliges dónde comienza la aventura.</h1>
+            <p className="TitleHome ">Tú eliges dónde comienza la aventura.</p>
 
       <section className="SectionCard">
         <ul className="Grid">

diff --git a/app/src/components/Views/library/TopBar.css b/app/src/components/Views/library/TopBar.css
@@ -1,4 +1,5 @@
 @tailwind components;
+@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
 
 @layer components {
   .top-bar {
@@ -14,7 +15,7 @@
   }
 
   .top-bar .page-logo {
-    @apply flex items-center justify-center flex-1
+    @apply flex items-center justify-center flex-1 font-righteous text-5xl
   }
 
   .top-bar .page-logo img {

diff --git a/app/src/components/Views/library/TopBar.jsx b/app/src/components/Views/library/TopBar.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Link } from 'react-router-dom'; 
 import { IoHomeOutline } from 'react-icons/io5';  
 import DropdownMenu from './DropdownMenu'; 
-import MyIcon from '/IZI.svg'
 
 import './TopBar.css'; 
 
@@ -21,7 +20,7 @@ const TopBar = () => {
           <IoHomeOutline />
         </Link>
         <div className="page-logo">
-          <img src={MyIcon} alt="IZI Logo" onClick={scrollTop}/>
+          <p onClick={scrollTop}>KAU</p>
         </div>
         <DropdownMenu className="dropdown-menu" />
       </div>

diff --git a/app/src/components/Views/pages/About.css b/app/src/components/Views/pages/About.css
@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
+@tailwind components;
+
+@layer components{
+  .kauFont{
+    @apply font-righteous
+  }
+}