Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/4GeeksAcademy/Grupo2-BuscoP…
Browse files Browse the repository at this point in the history 
…rofe
  • Loading branch information
@tresdelcuatro
tresdelcuatro committed Dec 1, 2024
2 parents 72e08bf + d81ae36 commit 7813246
Show file tree
Hide file tree
Showing 8 changed files with 298 additions and 53 deletions.
29 changes: 20 additions & 9 deletions src/front/js/component/footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
import React, { Component } from "react";
import React from "react";
import "../../styles/footer.css";

export const Footer = () => {
return (
<footer className="footer">
<div className="footer-content">
<p className="footer-text">
Grupo 2 - LATAM #4 bootcamp Uruguay - 4Geeks Academy
</p>
<div className="footer-names">
<p>Jimena, Julieta Olivera, Nahuel Silvera, Manuel Barreto y Joaquín Gutiérrez.</p>
</div>
<p className="footer-info">
Creado con pasión y dedicación durante nuestro bootcamp en 4Geeks Academy. 🩷
</p>
</div>
</footer>
);
};

export const Footer = () => (
<footer className="footer mt-auto py-3 text-center">
<p>
@2024 Juli-Jime-Nahuel-Manu-Joaquín

</p>
</footer>
);
4 changes: 0 additions & 4 deletions src/front/js/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ import { Navbar } from "./component/navbar";
import { Footer } from "./component/footer";
import Login from "./pages/login";
import SignIn from "./pages/signin";
import TeacherSignIn from "./pages/teacherSignin";
import SearchClass from "./pages/searchclass";

//create your first component
const Layout = () => {
Expand All @@ -33,8 +31,6 @@ const Layout = () => {
<Route element={<Home />} path="/" />
<Route element={<Login />} path="/login"/>
<Route element={<SignIn />} path="/signin" />
<Route element={<TeacherSignIn />} path="/teachersignin" />
<Route element={<SearchClass />} path="/searchclass" />
{/* <Route element={<Demo />} path="/demo" /> */}
<Route element={<Single />} path="/single/:theid" />
<Route element={<h1>Not found!</h1>} />
Expand Down
111 changes: 82 additions & 29 deletions src/front/js/pages/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,88 @@ export const Home = () => {

return (
<div className="home-container">
<section className="hero">
<div className="hero-content">
<h1>Suma Saber!</h1>
<p>
Encuentra profesores que se adapten a tus necesidades y, como profesor,
comparte tus conocimientos con el mundo.
</p>
</div>
<div className="hero-image">
<img src="https://files.oaiusercontent.com/file-WYbXVk5tAHCD6KuBBhwTLJ?se=2024-11-30T16%3A55%3A19Z&sp=r&sv=2024-08-04&sr=b&rscc=max-age%3D299%2C%20immutable%2C%20private&rscd=attachment%3B%20filename%3Ddescarga%2520%25281%2529-fotor-bg-remover-20241130134921.png&sig=Olzw/6z2VPaSFwbs/A/oSjL6P7PSaaSAOhXIuLEkh9U%3D" alt="Hero Illustration" />
</div>
</section>

{/* About Us Section */}
<section className="about-us">
<h2>Sobre Nosotros</h2>
<div className="about-us-cards">
<div className="card">
<p>Conecta con la creatividad para enseñar y aprender.</p>
</div>
<div className="card">
<p>Clases diseñadas para adaptarse a tus metas.</p>
</div>
<div className="card">
<p>Aprende y crece al ritmo que tú elijas.</p>
</div>
<section className="hero">
<div className="hero-content">
<h1>Suma Saber!</h1>
<p>
Encuentra profesores que se adapten a tus necesidades y, como profesor,
comparte tus conocimientos con el mundo.
</p>
</div>
</section>

{/* sobre nosotros */}

<section className="about-us">
<h2>Sobre Nosotros</h2>
<div className="about-us-cards">
<div className="card">
<div className="card-body">
<h5 className="card-title">¿Eres profesor o quieres serlo?</h5>
<p className="card-text">
Crea tu perfil, comparte lo que sabes y enseña desde cualquier lugar. Gana dinero a tu ritmo con flexibilidad y herramientas para gestionar tus clases.
</p>
</div>
</div>
<div className="card">
<div className="card-body">
<h5 className="card-title">Encuentra al profesor ideal para ti</h5>
<p className="card-text">
Descubre profesores especializados y clases personalizadas a tu ritmo. Accede a contenido exclusivo, tutorías y recomendaciones para avanzar rápido.
¡Todo lo que necesitas para aprender de manera fácil y divertida!
</p>
</div>
</div>
<div className="card">
<div className="card-body">
<h5 className="card-title">Nuestra plataforma</h5>
<p className="card-text">
SumaSaber permite a estudiantes avanzados ganar ingresos mientras ayudan a otros a alcanzar sus metas. Conectamos a estudiantes y profesores de forma fácil y segura, brindando oportunidades para enseñar desde cualquier lugar y continuar creciendo, todo 100% online.
</p>
</div>
</div>
</div>
</section>

{/* ¿Tienes dudas? */}

<div className="fqs mt-4">
<h2>¿Tienes dudas?</h2>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
¿Cómo puedo registrarme como estudiante o profesor?
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
¿Qué métodos de pago aceptan?
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
¿Cómo programo mis clases?
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>

</div>
</div>
</section>
</div>
);
};
);
};

69 changes: 69 additions & 0 deletions src/front/js/pages/learn.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React, { useState, useContext } from "react";
import { Context } from "../store/appContext";
import { Link } from 'react-router-dom';

export const StudentRegister = () => {
const { store, actions } = useContext(Context);

const [formData, setFormData] = useState({
level: '',
subjects: '',
timePreference: '',
});

const handleChange = (e) => {
const { id, value } = e.target;
setFormData({ ...formData, [id]: value });
};

return (
<div id="signinform">
<h2 id="headerTitle">¡Bienvenido/a!</h2>
<p>Por favor, completa la siguiente información para continuar</p>
<div className="row">
<label htmlFor="level">Nivel Académico</label>
<select
id="level"
className="input-field px-3 py-2"
value={formData.level}
onChange={handleChange}
>
<option value="" disabled>Selecciona tu nivel</option>
<option value="1">Primaria</option>
<option value="2">Secundaria</option>
<option value="3">Terciaria</option>
</select>
</div>
<div className="row">
<label htmlFor="subjects">¿Que deseas estudiar?</label>
<input
type="text"
id="subjects"
className="px-3 py-2"
placeholder="Ingresa una asignatura"
value={formData.subjects}
onChange={handleChange}
/>
</div>
<div className="row">
<label htmlFor="timePreference">Preferencia horaria</label>
<select
id="timePreference"
className="input-field px-3 py-2"
value={formData.timePreference}
onChange={handleChange}
>
<option value="" disabled>Selecciona tus horarios</option>
<option value="1">Matutino</option>
<option value="2">Vespertino</option>
<option value="3">Nocturno</option>
</select>
</div>
<div className="row">
<button type="submit" className="submit-button">Guardar</button>
</div>
</div>
);
};

export default StudentRegister;
62 changes: 55 additions & 7 deletions src/front/js/pages/signin.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,85 @@
import React, { useContext } from "react";
import React, { useState, useContext } from "react";
import { Context } from "../store/appContext";
import { Link } from 'react-router-dom';

export const SignIn = () => {
const { store, actions } = useContext(Context);

const [formData, setFormData] = useState({
userName: '',
email: '',
password: '',
role: '',
});

const handleChange = (e) => {
const { id, value } = e.target;
setFormData({ ...formData, [id]: value });
};

return (
<div id="signinform">
<h2 id="headerTitle">Registrarse</h2>
<div className="row">
<label htmlFor="username">Usuario</label>
<input type="text" id="username" placeholder="Usuario" />
<label htmlFor="userName">Usuario</label>
<input
type="text"
id="userName"
className="px-3 py-2"
placeholder="Usuario"
value={formData.userName}
onChange={handleChange}
/>
</div>

<div className="row">
<label htmlFor="email">Email</label>
<input type="email" id="email" placeholder="Email" />
<input
type="email"
id="email"
className="px-3 py-2"
placeholder="Email"
value={formData.email}
onChange={handleChange}
/>
</div>

<div className="row">
<label htmlFor="password">Contraseña</label>
<input type="password" id="password" placeholder="Contraseña" />
<input
type="password"
id="password"
className="px-3 py-2"
placeholder="Contraseña"
value={formData.password}
onChange={handleChange}
/>
</div>

<div className="row">
<label htmlFor="role">Elige tu rol</label>
<select id="role" className="input-field">
<select
id="role"
className="input-field px-3 py-2"
value={formData.role}
onChange={handleChange}
>
<option value="" disabled>Selecciona un rol</option>
<option value="1">Quiero aprender</option>
<option value="2">Quiero enseñar</option>
</select>
</div>

<div className="row">
<button type="submit" className="submit-button">Registrarse</button>
{formData.role === '1' ? (
<Link to="/learn">
<button type="submit" className="submit-button">Registrarse</button>
</Link>
) : (
<Link to="/signin">
<button type="submit" className="submit-button">Registrarse</button>
</Link>
)}
</div>
</div>
);
Expand Down
27 changes: 27 additions & 0 deletions src/front/styles/footer.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/* footer */
.footer {
background-color: #003049;
color: #fff;
text-align: center;
padding: 1rem 0;
width: 100%;
position: relative;
}

.footer-text {
font-size: 1rem;
margin-bottom: 0.5rem;
}

.footer-names {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 15px;
}

.footer-info {
font-size: 0.9rem;
margin-top: 15px;
}

Loading

0 comments on commit 7813246

Please sign in to comment.