estilos forms-home-register-recpassword

src/front/components/Navbar.jsx

@@ -40,7 +40,7 @@ export default function Navbar({showDrowpdown, setShowDrowpdown}) {
 
   return (
     <nav className="bg-gray-900">
-      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+      <div className=" navbar-bg mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
         <div className="relative flex h-16 items-center justify-between">
           <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
             <button type="button" aria-controls="mobile-menu" aria-expanded="false" className="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset">

src/front/pages/home/Home.jsx

@@ -62,19 +62,18 @@ export const Home = () => {
         {
           images.map((i, index) => {
             return (
-              <div key={index} className="h-64  bg-indigo-500">
+              <div key={index} className="custom-carousel-height bg-indigo-500">
                 <img src={i.src} alt="img" className="w-full h-full object-cover" />
               </div>
             )
           })
         }
       </Carousel>
 
-      <div class="h-22 bg-gray-900 text-white px-6 py-4 w-full mx-auto ease-in-out ">
-        <h2 class="text-2xl font-bold mb-2 text-center sm:text-xl md:text-3xl">¡Oferta de Bienvenida!</h2>
-        <p class="text-lg text-center sm:text-base md:text-xl">20% de descuento en juegos por registrarte</p>
+      <div className="bg-white/10 backdrop-blur-md text-white px-6 py-6 rounded-lg shadow-lg mx-auto mt-6 max-w-3xl text-center">
+        <h2 className="text-3xl font-semibold mb-2 tracking-wide">🎮 ¡Bienvenida Gamer!</h2>
+        <p className="text-lg text-gray-200">Regístrate y obtén <span className="font-bold text-indigo-300">20% de descuento</span> en tu primera compra</p>
       </div>
-
       <div>
         <Games />
       </div>

src/front/pages/home/home.css

@@ -0,0 +1,3 @@
+.custom-carousel-height {
+  height: 340px; 
+}

src/front/pages/login/Login.css

@@ -6,7 +6,7 @@
 }
 
 .transparent-form {
-  background-color: rgba(255, 255, 255, 0.6); /* blanco con 60% de opacidad */
-  border-radius: 0.375rem; /* igual a rounded-md */
+  background-color: rgba(255, 255, 255, 0.6); 
+  border-radius: 0.375rem; 
   padding: 1.5rem;
 }

src/front/pages/recPassword/RecPassword.jsx

@@ -1,47 +1,40 @@
+import './recpassword.css'
 import { useParams } from "react-router-dom";
 import useGlobalReducer from "../../hooks/useGlobalReducer";
 import { useState } from "react";
 
 
 
-export const RecPassword = () =>{
+export const RecPassword = () => {
   const backendUrl = import.meta.env.VITE_BACKEND_URL
   const [email, setEmail] = useState("")
 
-  const restaurarPassword =async (e)=>{
+  const restaurarPassword = async (e) => {
     e.preventDefault()
-     await fetch(`${backendUrl}api/user/resetPassword`,{
-                method: "POST",
-                body: JSON.stringify({"email": email}),
-                headers: { "Content-type": "application/json" }
-            })
-            alert("Mensaje enviado al correo electronico")
-
-  }
-
-
-
-
-
-
-
+    await fetch(`${backendUrl}api/user/resetPassword`, {
+      method: "POST",
+      body: JSON.stringify({ "email": email }),
+      headers: { "Content-type": "application/json" }
+    })
+    alert("Mensaje enviado al correo electronico")
 
+  }
 
 
-    return(
-         <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+  return (
+    <div className="recpassword-bg min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="recpasswordt-bg sm:mx-auto sm:w-full sm:max-w-md">
         <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Recuperar contraseña</h2>
-        <p className="mt-2 text-center text-sm text-gray-600">
+        <p className="mt-2 text-center text-sm font-bold text-gray-900">
           Ingresa tu email y te enviaremos un enlace para restablecer tu contraseña
         </p>
       </div>
 
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-          <form className="space-y-6"  onSubmit={restaurarPassword}>
+      <div className="mt-8 transparent-form sm:mx-auto sm:w-full sm:max-w-md">
+        <div className=" py-8 px-4 sm:rounded-lg sm:px-10">
+          <form className="space-y-6" onSubmit={restaurarPassword}>
             <div>
-              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="email" className="block text-sm font-bold text-gray-900">
                 Correo electrónico
               </label>
               <div className="mt-1">
@@ -51,7 +44,7 @@ export const RecPassword = () =>{
                   type="email"
                   value={email}
                   autoComplete="email"
-                  onChange={(e)=>setEmail(e.target.value)}
+                  onChange={(e) => setEmail(e.target.value)}
                   required
                   className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                   placeholder="[email protected]"
@@ -62,14 +55,14 @@ export const RecPassword = () =>{
             <div>
               <button
                 type="submit"
-                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-800 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
               >
                 Enviar enlace de recuperación
               </button>
             </div>
 
             <div className="text-center">
-              <a href="#" className="text-sm text-blue-600 hover:text-blue-500 transition-colors duration-200">
+              <a href="#" className="text-sm font-bold text-blue-900 hover:text-blue-700 transition-colors duration-200">
                 ← Volver al inicio de sesión
               </a>
             </div>
@@ -78,6 +71,6 @@ export const RecPassword = () =>{
       </div>
     </div>
 
-        
-    )
+
+  )
 }

src/front/pages/recPassword/recpassword.css

@@ -0,0 +1,16 @@
+.recpassword-bg {
+    background-image: url("https://static1.colliderimages.com/wordpress/wp-content/uploads/2023/08/the-simpsons-homer-s-catchphrase.jpg");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.recpasswordt-bg {
+  background-color: rgba(243, 239, 239, 0.808); /* blanco con 50% de opacidad */
+}
+
+.transparent-form {
+  background-color: rgba(255, 255, 255, 0.6); 
+  border-radius: 0.375rem;
+  padding: 1.5rem;
+}

src/front/pages/register/Register.jsx

@@ -43,13 +43,13 @@ export const Register = () => {
 
                 <div>
                     <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Crear cuenta</h2>
-                    <p className="mt-2 text-center text-sm font-bold text-gray-800">Completa los campos para registrarte</p>
+                    <p className="mt-2 text-center text-sm font-extrabold text-gray-900">Completa los campos para registrarte</p>
                 </div>
                 <form className="mt-8 space-y-6 " onSubmit={registerUser}>
                     <div className="space-y-4">
 
                         <div>
-                            <label htmlFor="name" className="block text-sm font-bold text-gray-900">
+                            <label htmlFor="name" className="block text-sm font-extrabold text-gray-900">
                                 Nombre completo
                             </label>
                             <input
@@ -64,7 +64,7 @@ export const Register = () => {
                             />
                         </div>
                         <div>
-                            <label htmlFor="email" className="block text-sm font-bold text-gray-900">
+                            <label htmlFor="email" className="block text-sm font-extrabold text-gray-900">
                                 Email
                             </label>
                             <input
@@ -79,7 +79,7 @@ export const Register = () => {
                             />
                         </div>
                         <div>
-                            <label htmlFor="password" className="block text-sm font-bold text-gray-900">
+                            <label htmlFor="password" className="block text-sm font-extrabold text-gray-900">
                                 Contraseña
                             </label>
                             <input

src/front/pages/register/register.css

@@ -1,13 +1,13 @@
 .register-bg {
-    background-image: url("https://images8.alphacoders.com/864/864351.png");
+    background-image: url("https://images2.alphacoders.com/105/thumb-1920-1052293.jpg");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }
 
 .transparent-form {
-  background-color: rgba(255, 255, 255, 0.6); /* blanco con 60% de opacidad */
-  border-radius: 0.375rem; /* igual a rounded-md */
+  background-color: rgba(255, 255, 255, 0.6); 
+  border-radius: 0.375rem;
   padding: 1.5rem;
 }
 

src/front/pages/resetPassword/ResetPassword.jsx

@@ -1,8 +1,9 @@
+
 import { useState } from "react"
 import { useParams } from "react-router-dom"
 export const ResetPassword = () => {
   const backendUrl = import.meta.env.VITE_BACKEND_URL
- 
+
   const [password, setpassword] = useState("")
   const { token } = useParams()
   const restaurarPassword = async (e) => {
@@ -15,6 +16,10 @@ export const ResetPassword = () => {
     alert("Mensaje enviado al correo electronico")
   }
   return (
+     <div
+      className="min-h-screen bg-[url('https://images2.alphacoders.com/105/thumb-1920-1052293.jpg')] bg-cover bg-center flex items-center justify-center"
+    >
+
     <div class="max-w-md mx-auto p-4 md:p-6 mt-20 mb-20 bg-white rounded shadow-md">
       <h2 class="text-2xl font-bold mb-4">Nueva contraseña</h2>
       <form onSubmit={restaurarPassword}>
@@ -41,5 +46,6 @@ export const ResetPassword = () => {
         </div>
       </form>
     </div>
+  </div >  
   )
 }