changes on frontend

frontend/src/css/Home.css

@@ -1,67 +1,22 @@
-.home-container {
+.color-animated-bold {
-    font-family: Arial, sans-serif;
+    color: #ff8080;
-    text-align: center;
+    font-weight: bold;
-    background-color: #f4f4f4;
+    animation: hue-rotation 3s infinite linear;
-    padding: 20px;
 }
 
-.hero-section {
+.image-animated-bold {
-    background: #4CAF50;
+    border: 5px solid #ff8080;
-    color: white;
+    border-radius: 50px;
-    padding: 50px 20px;
+    animation: hue-rotation 3s infinite linear;
-    border-radius: 8px;
 }
 
-.hero-title {
+@keyframes hue-rotation {
-    font-size: 3em;
+    from {
-    margin-bottom: 10px;
+        filter: hue-rotate(0deg);
+    }
+
+    to {
+        filter: hue-rotate(360deg);
+    }
 }
 
-.hero-description {
-    font-size: 1.2em;
-    margin-bottom: 20px;
-}
-
-.cta-button {
-    background-color: #fff;
-    color: #4CAF50;
-    border: none;
-    padding: 15px 30px;
-    font-size: 1.1em;
-    cursor: pointer;
-    border-radius: 5px;
-    transition: background-color 0.3s ease;
-}
-
-.cta-button:hover {
-    background-color: #388E3C;
-    color: white;
-}
-
-.about-section {
-    margin-top: 50px;
-}
-
-.features {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 30px;
-}
-
-.feature {
-    background-color: #ffffff;
-    padding: 20px;
-    border-radius: 8px;
-    width: 30%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.feature h3 {
-    font-size: 1.5em;
-    color: #333;
-}
-
-.feature p {
-    font-size: 1.1em;
-    color: #666;
-}

frontend/src/pages/Home.jsx

@@ -2,37 +2,9 @@ import '../css/Home.css';
 
 const Home = () => {
     return (
-        <div className="home-container">
+        <div className='container mt-5 text-center align-items-center justify-content-center'>
-            <header className="hero-section">
+            <h1 className="display-1 color-animated-bold mb-4">No sé que poner XD</h1>
-                <h1 className="hero-title">ContaminUS</h1>
+            <img className="img-fluid image-animated-bold" src="/images/etsii.gif" />
-                <p className="hero-description">
-                    Proyecto universitario para monitorear la calidad del aire usando sensores IoT.
-                </p>
-                <button className="cta-button">Explorar Proyecto</button>
-            </header>
-
-            <section className="about-section">
-                <h2>Sobre el Proyecto</h2>
-                <p>
-                    ContaminUS es una solución basada en tecnologías IoT para medir la calidad del aire en tiempo real. 
-                    Este proyecto busca crear una herramienta accesible para estudiantes, investigadores y comunidades 
-                    interesadas en el monitoreo ambiental.
-                </p>
-                <div className="features">
-                    <div className="feature">
-                        <h3>Medición en tiempo real</h3>
-                        <p>Monitorea la calidad del aire con sensores MQ-135 y DHT11, mostrando datos precisos y actualizados.</p>
-                    </div>
-                    <div className="feature">
-                        <h3>Aplicación web interactiva</h3>
-                        <p>Visualiza los datos de calidad del aire mediante mapas interactivos y gráficos.</p>
-                    </div>
-                    <div className="feature">
-                        <h3>Colaboración en la universidad</h3>
-                        <p>El proyecto está orientado a estudiantes que deseen aprender y colaborar con el análisis de datos ambientales.</p>
-                    </div>
-                </div>
-            </section>
         </div>
     );
 }

frontend/vite.config.js

@@ -7,7 +7,7 @@ import os from 'os'
 // https://vite.dev/config/
 export default defineConfig({
   server: {
-    port: 8080,
+    port: 5173,
   },
   plugins: [react(), cleanPlugin()],
   build: {