refactor(lenguage): replacing the text from spanish to english

packages/search-engine/src/components/Card/index.jsx

@@ -21,12 +21,12 @@ const CardComponent = (props) => {
             <figure>
               <img src='/search-engine/icon-star.png' alt='' />
               <figcaption className='card-content__reviews_text'>
-                <strong>{rating}</strong><span>({reviews} reseñas)</span>
+                <strong>{rating}</strong><span>({reviews} reviews)</span>
               </figcaption>
             </figure>
           </div>
           <div className='card-content__price'>
-            <span>${price} </span>COP / noche
+            <span>${price} </span> night
           </div>
         </div>
       </div>

packages/search-engine/src/components/Filters/ModalFilters/index.jsx

@@ -17,8 +17,8 @@ export default function ModalFilters(props) {
             {children}
           </div>
           <div className={css.modalFooter}>
-            <button className={css.delete} onClick={() => reset()}>Borrar</button>
-            <button className={css.done} onClick={() => submitFn()}>Guardar</button>
+            <button className={css.delete} onClick={() => reset()}>Clear</button>
+            <button className={css.done} onClick={() => submitFn()}>Apply</button>
           </div>
         </div>
       }

packages/search-engine/src/components/Filters/PriceFilter/index.js

@@ -7,15 +7,15 @@ export default function PriceFilter (props) {
   return (
     <div className={css.priceFilter}>
       <div className={css.priceContainer}>
-        <p>Precio mínimo</p>
+        <p>min. price</p>
         <div className={css.price}>
           <span>$</span>
           <input type="number" value={minPrice} onChange={handleMinPrice}/>
         </div>
       </div>
       <div className={css.separator} />
       <div className={css.priceContainer}>
-        <p>Precio máximo</p>
+        <p>max. price</p>
         <div className={css.price}>
           <span>$</span>
           <input type="number" value={maxPrice} onChange={handleMaxPrice}/>

packages/search-engine/src/components/Filters/SizeFilter/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import css from './SizeFilter.module.scss'
 
 export default function SizeFilter (props) {
-  const { fullPlace, privateRoom, handleFullPlace, handlePrivateRoom } = props
+  const { fullPlace, privateRoom, sharedRoom, handleFullPlace, handlePrivateRoom, handleSharedRoom  } = props
 
   const LabelSize = ({
     title,
@@ -23,17 +23,23 @@ export default function SizeFilter (props) {
   return (
     <div className={css.sizeFilter}>
       <LabelSize 
-        title='Lugar completo'
-        description='Tienes un espacio entero para ti'
+        title='Entire place'
+        description='A place all to you'
         check={fullPlace}
         handleCheck={handleFullPlace}
       />
       <LabelSize 
-        title='Habitación privada'
-        description='Tienes tu propia habitación y compartes algunos espacios comunes'
+        title='Private room'
+        description='Your own room in a home or a hotel, plus some shared common spaces'
         check={privateRoom}
         handleCheck={handlePrivateRoom}
       />
+      <LabelSize 
+        title='Shared room'
+        description='A sleeping space and common areas that may be shared with others'
+        check={sharedRoom}
+        handleCheck={handleSharedRoom}
+      />
     </div>
   )
 }

packages/search-engine/src/components/Footer/index.jsx

@@ -1,19 +1,20 @@
 import React from 'react';
+import Link from 'next/link';
 import './Footer.css';
 
 export default function Footer() {
   return (
     <footer className="footer__container">
       <div className="footer__wrapper">
-        <a className="link" href="./">
-          About us
-        </a>
-        <a className="link" href="./">
-          Aim of the project
-        </a>
-        <a className="link" href="./">
-          Social media
-        </a>
+        <Link href="./">
+          <a className="link">About us</a>
+        </Link>
+        <Link href="./">
+          <a className="link">Aim of the project</a>
+        </Link>
+        <Link href="./">
+          <a className="link">Social media</a>
+        </Link>
       </div>
     </footer>
   );

packages/search-engine/src/components/Header/index.jsx

@@ -17,6 +17,7 @@ export default function Header({ classPage, filters, handleSubmitFilters }) {
   const [stars, setStars] = useState(null);
   const [fullPlace, setFullPlace] = useState(false);
   const [privateRoom, setPrivateRoom] = useState(false);
+  const [sharedRoom, setSharedRoom] = useState(false);
 
   const toggleVisibility = (key) => !visible ? setVisible(key) : setVisible(null);
 
@@ -79,7 +80,7 @@ export default function Header({ classPage, filters, handleSubmitFilters }) {
       <User classUser={classPage} />
       <div className={`filter__container ${showFilters}`}>
         <ModalFilter 
-          title='Precio'
+          title='Price range'
           visible={visible === 'visiblePrice'}
           setVisible={() => toggleVisibility('visiblePrice')}
           reset={resetPriceFilter}
@@ -94,7 +95,7 @@ export default function Header({ classPage, filters, handleSubmitFilters }) {
         </ModalFilter>
 
         <ModalFilter 
-          title='Tipo de alojamiento'
+          title='Type of place'
           visible={visible === 'visibleSize'}
           setVisible={() => toggleVisibility('visibleSize')}
           reset={resetSizeFilter}
@@ -103,13 +104,15 @@ export default function Header({ classPage, filters, handleSubmitFilters }) {
           <SizeFilter 
             fullPlace={fullPlace}
             privateRoom={privateRoom}
+            sharedRoom={sharedRoom}
             handleFullPlace={() => setFullPlace(!fullPlace)}
             handlePrivateRoom={() => setPrivateRoom(!privateRoom)}
+            handleSharedRoom={() => setSharedRoom(!sharedRoom)}
           />
         </ModalFilter>
 
         <ModalFilter 
-          title='Calificación'
+          title='Rating'
           visible={visible === 'visibleStars'}
           setVisible={() => toggleVisibility('visibleStars')}
           reset={resetStars}

packages/search-engine/src/components/LandingPage/Hero/index.jsx

@@ -9,12 +9,8 @@ const Hero = () => {
       <div className="hero-background">
         <Header classPage="landing" />
         <div className="hero--text-container">
-          <h1>
-            Encuentra los mejores <br />
-            lugares para visitar
-          </h1>
-          <br />
-          <p>Este es un texto cualquiera haha</p>
+          <h1>Find the best places to visit</h1>
+          <p>Enjoy an incredible adventure</p>
         </div>
       </div>
     </div>

packages/search-engine/src/components/LandingPage/MostVisited/index.jsx

@@ -6,7 +6,7 @@ const MostVisited = () => {
   return (
     <section className="most-visited-container">
       <div className="most-visited-title">
-        <h2>Lugares más visitados</h2>
+        <h2>Most visited places</h2>
       </div>
       <div className="cards-section">
         <VisitedCards />

packages/search-engine/src/components/LandingPage/User/index.jsx

@@ -2,13 +2,13 @@ import { useAuth0 } from '@auth0/auth0-react';
 import React, { useState } from 'react';
 import './User.css';
 
-const optionsNoAuthenticated = ['Regístrate', 'Iniciar sesión'];
+const optionsNoAuthenticated = ['Sign up', 'Log in'];
 const optionsAuthenticated = [
-  'Mensajes',
-  'Notificaciones',
-  'Listas de favoritos',
-  'Cuenta',
-  'Cerrar sesión',
+  'Messages',
+  'Notifications',
+  'Favorite places',
+  'Account',
+  'Log out',
 ];
 
 const User = ({ classUser = 'users_container' }) => {
@@ -22,13 +22,13 @@ const User = ({ classUser = 'users_container' }) => {
   const onOptionClicked = (value) => () => {
     setSelectedOption(value);
     switch (value) {
-      case 'Cerrar sesión':
+      case 'Log out':
         logout();
         break;
-      case 'Iniciar sesión':
+      case 'Log in':
         loginWithPopup();
         break;
-      case 'Regístrate':
+      case 'Sign up':
         loginWithPopup({
           screen_hint: 'signup',
         });
@@ -43,7 +43,7 @@ const User = ({ classUser = 'users_container' }) => {
   return (
     <div className={classUser}>
       <div className="link host">
-        <a href="/">Hazte anfitrión</a>
+        <a href="/">Become a Host</a>
       </div>
 
       <button