changes on frontend
This commit is contained in:
BIN
frontend/public/images/etsii.gif
Normal file
BIN
frontend/public/images/etsii.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
@@ -1,67 +1,22 @@
|
||||
.home-container {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
background-color: #f4f4f4;
|
||||
padding: 20px;
|
||||
.color-animated-bold {
|
||||
color: #ff8080;
|
||||
font-weight: bold;
|
||||
animation: hue-rotation 3s infinite linear;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 50px 20px;
|
||||
border-radius: 8px;
|
||||
.image-animated-bold {
|
||||
border: 5px solid #ff8080;
|
||||
border-radius: 50px;
|
||||
animation: hue-rotation 3s infinite linear;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3em;
|
||||
margin-bottom: 10px;
|
||||
@keyframes hue-rotation {
|
||||
from {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -2,37 +2,9 @@ import '../css/Home.css';
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div className="home-container">
|
||||
<header className="hero-section">
|
||||
<h1 className="hero-title">ContaminUS</h1>
|
||||
<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 className='container mt-5 text-center align-items-center justify-content-center'>
|
||||
<h1 className="display-1 color-animated-bold mb-4">No sé que poner XD</h1>
|
||||
<img className="img-fluid image-animated-bold" src="/images/etsii.gif" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ import os from 'os'
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 8080,
|
||||
port: 5173,
|
||||
},
|
||||
plugins: [react(), cleanPlugin()],
|
||||
build: {
|
||||
|
||||
Reference in New Issue
Block a user