diff --git a/src/common/ButtonBuscarVuelos.jsx b/src/common/ButtonBuscarVuelos.jsx
new file mode 100644
index 0000000..b54101c
--- /dev/null
+++ b/src/common/ButtonBuscarVuelos.jsx
@@ -0,0 +1,16 @@
+import "./whitenavbarbutton.css";
+import { Link } from "react-router-dom";
+
+const ButtonBuscarVuelos = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default ButtonBuscarVuelos;
\ No newline at end of file
diff --git a/src/common/ButtonMisVuelos.jsx b/src/common/ButtonMisVuelos.jsx
new file mode 100644
index 0000000..8c4c6fc
--- /dev/null
+++ b/src/common/ButtonMisVuelos.jsx
@@ -0,0 +1,16 @@
+import "./whitenavbarbutton.css";
+import { Link } from "react-router-dom";
+
+const ButtonMisVuelos = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default ButtonMisVuelos;
\ No newline at end of file
diff --git a/src/common/ButtonRecomendaciones.jsx b/src/common/ButtonRecomendaciones.jsx
new file mode 100644
index 0000000..caf2fb9
--- /dev/null
+++ b/src/common/ButtonRecomendaciones.jsx
@@ -0,0 +1,16 @@
+import "./whitenavbarbutton.css";
+import { Link } from "react-router-dom";
+
+const ButtonRecomendaciones = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default ButtonRecomendaciones;
\ No newline at end of file
diff --git a/src/common/FlightsBookingButton.jsx b/src/common/FlightsBookingButton.jsx
new file mode 100644
index 0000000..4f1ebac
--- /dev/null
+++ b/src/common/FlightsBookingButton.jsx
@@ -0,0 +1,16 @@
+import "./flightsbookingbutton.css";
+import { Link } from "react-router-dom";
+
+const FlightsBookingButton = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default FlightsBookingButton;
diff --git a/src/common/LoginButton.jsx b/src/common/LoginButton.jsx
index 21d99be..e45b7ff 100644
--- a/src/common/LoginButton.jsx
+++ b/src/common/LoginButton.jsx
@@ -6,8 +6,14 @@ const LoginButton = () => {
if (!isAuthenticated) {
return (
-
);
diff --git a/src/common/LogoutButton.jsx b/src/common/LogoutButton.jsx
index fdc19be..8695532 100644
--- a/src/common/LogoutButton.jsx
+++ b/src/common/LogoutButton.jsx
@@ -1,4 +1,4 @@
-import "../common/button.css";
+import "./whitenavbarbutton.css";
import { useAuth0 } from "@auth0/auth0-react";
import { Link } from "react-router-dom";
@@ -11,16 +11,20 @@ const LogoutButton = () => {
if (isAuthenticated) {
return (
- <>
-
-
- Cerrar Sesión
+
+
+
+ Cerrar Sesión
- >
+
);
}
};
export default LogoutButton;
+
+
+
+
diff --git a/src/common/flightsbookingbutton.css b/src/common/flightsbookingbutton.css
new file mode 100644
index 0000000..257bfe2
--- /dev/null
+++ b/src/common/flightsbookingbutton.css
@@ -0,0 +1,47 @@
+.btnfb {
+ width: 180px;
+ height: 43px;
+ border: none;
+ transition: all 0.5s ease-in-out;
+ font-size: 18px;
+ font-family: "League Spartan";
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ background: #040f16;
+ color: #f5f5f5;
+ }
+
+ .btnfb:hover {
+ box-shadow: 0 0 20px 0px #2e2e2e3a;
+ }
+
+ .btnfb .text-fb {
+ transform: translateX(10px);
+ margin-top: 5px;
+ transition: all 0.5s ease-in-out;
+ }
+
+ .btnfb:hover .text-fb {
+ transition: all 0.5s;
+ transform: translateX(10px) scale(1.05);
+ }
+
+ .btnfb:focus {
+ outline: none;
+ }
+
+
+ .btnfb-link {
+ text-decoration: none;
+ color: inherit;
+ }
+
+ .btnfb-link:link,
+ .btnfb-link:visited,
+ .btnfb-link:hover,
+ .btnfb-link:active {
+ text-decoration: none;
+ color: inherit;
+ }
+
\ No newline at end of file
diff --git a/src/common/loginbutton.css b/src/common/loginbutton.css
index 338f9f9..a9ff503 100644
--- a/src/common/loginbutton.css
+++ b/src/common/loginbutton.css
@@ -17,4 +17,57 @@
.login-button:hover {
background-color: #84b6f4;
+}
+
+
+
+
+.btn {
+ width: 180px;
+ height: 43px;
+ border: none;
+ transition: all 0.5s ease-in-out;
+ font-size: 19px;
+ font-family: "League Spartan";
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ background: #040f16;
+ color: #f5f5f5;
+}
+
+.btn:hover {
+ box-shadow: 0 0 20px 0px #2e2e2e3a;
+}
+
+.btn .icon {
+ position: absolute;
+ height: 40px;
+ width: 40px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: all 0.5s;
+}
+
+.btn .text {
+ transform: translateX(45px);
+ margin-top: 4px
+}
+
+.btn:hover .icon {
+ width: 175px;
+}
+
+.btn:hover .text {
+ transition: all 0.5s;
+ opacity: 0;
+}
+
+.btn:focus {
+ outline: none;
+}
+
+.btn:active .icon {
+ transform: scale(0.85);
}
\ No newline at end of file
diff --git a/src/common/navbar.css b/src/common/navbar.css
index 0891958..d96eaea 100644
--- a/src/common/navbar.css
+++ b/src/common/navbar.css
@@ -9,6 +9,7 @@ body,
}
.navbar {
+ height: 42px;
list-style-type: none;
margin: 0;
padding: 0;
@@ -17,7 +18,7 @@ body,
position: fixed;
top: 0;
width: 100%;
- border-bottom: 2px solid #000035;
+ border-bottom: 1px solid #000035;
z-index: 1000;
}
diff --git a/src/common/navbar.jsx b/src/common/navbar.jsx
index 56f05d3..503f0b1 100644
--- a/src/common/navbar.jsx
+++ b/src/common/navbar.jsx
@@ -3,6 +3,10 @@ import { Link } from "react-router-dom";
import LoginButton from "./LoginButton";
import LogoutButton from "./LogoutButton";
import { useAuth0 } from "@auth0/auth0-react";
+import FlightsBookingButton from "./FlightsBookingButton";
+import ButtonBuscarVuelos from "./ButtonBuscarVuelos";
+import ButtonRecomendaciones from "./ButtonRecomendaciones";
+import ButtonMisVuelos from "./ButtonMisVuelos";
function Navbar() {
const { isAuthenticated, user } = useAuth0();
@@ -13,28 +17,20 @@ function Navbar() {
return (
-
-
- FlightsBooking
-
+
-
-
- Buscar Vuelos
-
+
-
{isAuthenticated ? (
<>
-
-
- ¿No sabes a donde ir?
-
+
-
-
- Mis Vuelos
-
+
{isAdmin && (
-
diff --git a/src/common/whitenavbarbutton.css b/src/common/whitenavbarbutton.css
new file mode 100644
index 0000000..2a458b7
--- /dev/null
+++ b/src/common/whitenavbarbutton.css
@@ -0,0 +1,49 @@
+.btnwb {
+ height: 42px;
+ border: none;
+ transition: all 0.5s ease-in-out;
+ font-size: 16px;
+ font-family: "League Spartan";
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ background: #f9fcff;
+ color: #000035;
+ padding: 20px;
+ }
+
+ .btnwb:hover {
+ box-shadow: 0 0 20px 0px #2e2e2e3a;
+ background-color: #040f16;
+ transition: none;
+ }
+
+ .btnwb .text-wb {
+ margin-top: 5px;
+ transition: all 0.5s ease-in-out;
+ }
+
+ .btnwb:hover .text-wb {
+ color: #f5f5f5;
+ transform: scale(1.05);
+ transition: transform 0.5s;
+ }
+
+ .btnwb:focus {
+ outline: none;
+ }
+
+
+ .btnwb-link {
+ text-decoration: none;
+ color: inherit;
+ }
+
+ .btnwb-link:link,
+ .btnwb-link:visited,
+ .btnwb-link:hover,
+ .btnwb-link:active {
+ text-decoration: none;
+ color: inherit;
+ }
+
\ No newline at end of file
diff --git a/src/flights/checkout.css b/src/flights/checkout.css
index 1affd4c..547993c 100644
--- a/src/flights/checkout.css
+++ b/src/flights/checkout.css
@@ -18,6 +18,7 @@
text-align: center;
max-width: 500px;
width: 100%;
+ animation: fadeIn 2s ease forwards;
}
.checkout-content h1 {
@@ -52,4 +53,13 @@
font-size: 15px;
margin-left: 50px;
}
-
\ No newline at end of file
+
+
+ @keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
\ No newline at end of file
diff --git a/src/flights/index.css b/src/flights/index.css
index 064c1fa..8ce6509 100644
--- a/src/flights/index.css
+++ b/src/flights/index.css
@@ -22,6 +22,7 @@ body {
display: flex;
flex-direction: row;
color: #000035;
+ background-color: #f2f2f2;
}
.flight-card h3,
@@ -114,7 +115,8 @@ body {
font-family: "League Spartan", sans-serif;
font-size: 16px;
border: 1px solid #ccc;
- border-radius: 4px;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
}
.date-field {
@@ -167,4 +169,102 @@ body {
.flight-info .section-2 img {
width: 50px;
height: auto;
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+
+
+
+.section-1 {
+ background-color: #f2f2f2;
+}
+
+.section-2 {
+ display: flex;
+ align-items: center;
+ }
+
+
+.button-comprar {
+ --width: 100px;
+ --height: 35px;
+ --tooltip-height: 35px;
+ --tooltip-width: 90px;
+ --gap-between-tooltip-to-button: 18px;
+ --button-color: #040f16;
+ --tooltip-color: #fff;
+ width: var(--width);
+ height: var(--height);
+ background: var(--button-color);
+ position: relative;
+ text-align: center;
+ border-top-right-radius: 0.45em;
+ border-bottom-right-radius: 0.45em;
+ font-family: "League Spartan";
+ transition: background 0.3s;
+ font-size: 14px;
+ margin-right: 20px;
+ margin-top: 0.3333333px;
+ scale: 1.01;
+ }
+
+
+ .text-comprar {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .button-wrapper,.text-comprar,.icon-comprar {
+ overflow: hidden;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ color: #fff;
+ }
+
+ .text-comprar {
+ top: 0
+ }
+
+ .text-comprar,.icon-comprar {
+ transition: top 0.5s;
+ }
+
+ .icon-comprar {
+ color: #fff;
+ top: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .icon-comprar svg {
+ width: 24px;
+ height: 24px;
+ }
+
+ .button-comprar:hover {
+ background: #222;
+ }
+
+ .button-comprar:hover .text-comprar {
+ top: -100%;
+ }
+
+ .button-comprar:hover .icon-comprar {
+ top: 0;
+ }
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/flights/recomendations.css b/src/flights/recomendations.css
index dd9f708..8bc1cef 100644
--- a/src/flights/recomendations.css
+++ b/src/flights/recomendations.css
@@ -13,23 +13,26 @@
}
.texto-titulo-recomendaciones {
- font-size: 60px;
+ font-size: 50px;
margin-bottom: 20px;
margin-top: 60px;
font-family: "League Spartan", sans-serif;
color: #000053;
background-color: white;
border-radius: 10px;
+ padding: 20px;
+ animation: fadeIn 2s ease forwards;
}
.recommendation-subtitle {
font-size: 30px;
- margin-bottom: 10px;
+ margin-bottom: 20px;
font-family: "League Spartan", sans-serif;
color: #000053;
background-color: white;
border-radius: 10px;
padding: 10px;
+ animation: fadeIn 2s ease forwards;
}
.recommendation-text {
@@ -37,6 +40,7 @@
font-family: "League Spartan", sans-serif;
color: #000053;
font-size: 20px;
+
}
.flight-cell {
@@ -49,6 +53,7 @@
margin-bottom: 10px;
background-color: white;
cursor: pointer;
+ animation: fadeIn 2s ease forwards;
}
.recommendation-buy-button {
@@ -137,8 +142,21 @@
background-color: white;
border-radius: 10px;
padding-right: 20px;
+ animation: fadeIn 2s ease forwards;
}
.recommendation-update-button {
margin-right: 20px;
}
+
+
+
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/flights/search.css b/src/flights/search.css
index 950df75..9198a03 100644
--- a/src/flights/search.css
+++ b/src/flights/search.css
@@ -4,4 +4,21 @@
align-items: center;
gap: 10px;
}
-
\ No newline at end of file
+
+
+.flight-container{
+ border-radius: 5px;
+ opacity: 0;
+ animation: fadeIn 1s ease forwards;
+}
+
+
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
\ No newline at end of file
diff --git a/src/flights/show.jsx b/src/flights/show.jsx
index e337ff8..1eb2a70 100644
--- a/src/flights/show.jsx
+++ b/src/flights/show.jsx
@@ -210,17 +210,31 @@ const Flight = () => {
onChange={handleTicketCountChange}
disabled={!canBuyTickets}
/>
- Comprar vuelo
+
+
+
Comprar vuelo
+
+
+
+
+
{!canBuyTickets && No quedan vuelos disponibles
}
+
+
+
-
+
+
setShowLocationInfo(true)}>
- Obtener Ubicacion (Tendrá un uso posteriormente)
+ Ubicación
{showLocationInfo && }
+
);
};
diff --git a/src/flights/userBuys.jsx b/src/flights/userBuys.jsx
index 42381c3..5738cd9 100644
--- a/src/flights/userBuys.jsx
+++ b/src/flights/userBuys.jsx
@@ -2,6 +2,9 @@ import { useEffect, useState } from "react";
import axios from "axios";
import { useAuth0 } from "@auth0/auth0-react";
import { Link } from "react-router-dom";
+import "./userbuys.css";
+
+
const VistaCompras = () => {
const [data, setData] = useState(null);
const [flights, setFlights] = useState(null);
@@ -49,14 +52,18 @@ const VistaCompras = () => {
console.log("Flight:", flight);
return (
-
+
-
- {innerFlight.departure_airport.id} ➔{" "}
- {innerFlight.arrival_airport.id}
-
-
Fecha de salida: {fecha.toLocaleDateString()}
Datos de la compra:
+
+
+ {innerFlight.departure_airport.id} ➔{" "}
+ {innerFlight.arrival_airport.id}
+
+
Fecha de salida: {fecha.toLocaleDateString()}
+
+
+
Total Tickets: {item.total_tickets}
Flight ID: {flight._id}
@@ -66,7 +73,7 @@ const VistaCompras = () => {
Ver detalles del vuelo
-
+
);
diff --git a/src/flights/userbuys.css b/src/flights/userbuys.css
new file mode 100644
index 0000000..2b672de
--- /dev/null
+++ b/src/flights/userbuys.css
@@ -0,0 +1,26 @@
+.section-1-v {
+ margin-left: 20px;
+ margin-bottom: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ animation: fadeIn 2s ease forwards;
+}
+
+.detallescompra {
+ margin-left: 80px;
+}
+
+.nombrevuelo {
+ margin-left: 30px;
+}
+
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
\ No newline at end of file
diff --git a/src/landingpage.css b/src/landingpage.css
index e55ebf4..b43a654 100644
--- a/src/landingpage.css
+++ b/src/landingpage.css
@@ -1,19 +1,19 @@
-.landing-container {
+ .landing-container {
padding-top: 49.2px;
-}
-
-.landing-content {
+ }
+
+ .landing-content {
display: flex;
justify-content: space-between;
align-items: center;
-}
-
-.landing-left-container,
-.landing-right-container {
+ }
+
+ .landing-left-container,
+ .landing-right-container {
width: 50%;
-}
-
-.landing-left-container {
+ }
+
+ .landing-left-container {
width: 50%;
height: 100vh;
background-size: cover;
@@ -21,19 +21,37 @@
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
-}
-
-
-.landing-title {
+ }
+
+ .landing-title,
+ .landing-text {
font-family: "League Spartan", sans-serif;
- font-size: 5em;
text-align: center;
color: #000035;
-}
-
-.landing-text {
- font-family: "League Spartan", sans-serif;
+ opacity: 0;
+ animation: fadeIn 2s ease forwards;
+ margin-right: 70px;
+ }
+
+ .landing-title {
+ font-size: 5em;
+ animation-delay: 0.5s;
+ }
+
+ .landing-text {
font-size: 2.53em;
- text-align: center;
- color: #000035;
-}
\ No newline at end of file
+ animation-delay: 2s;
+ }
+
+ @keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+
+
+
+