+ 
+
+ );
+}
+
diff --git a/front/src/hooks/useGlobalReducer.jsx b/front/src/hooks/useGlobalReducer.jsx
new file mode 100644
index 000000000..0d0b99420
--- /dev/null
+++ b/front/src/hooks/useGlobalReducer.jsx
@@ -0,0 +1,21 @@
+import { useContext, useReducer, createContext } from "react";
+import storeReducer, { initialStore } from "../store"
+
+
+const StoreContext = createContext()
+
+
+export function StoreProvider({ children }) {
+
+ const [store, dispatch] = useReducer(storeReducer, initialStore())
+
+ return
+
+ {producto.nombre}
+Precio: €{producto.precio.toFixed(2)}
+
+
+
+ Detalle
+
+
+
+
+ );
+}
diff --git a/front/src/pages/Contacto.jsx b/front/src/pages/Contacto.jsx
new file mode 100644
index 000000000..54f5fd3a6
--- /dev/null
+++ b/front/src/pages/Contacto.jsx
@@ -0,0 +1,9 @@
+
+export const Contacto = () => {
+ return (
+ Carrito de compras
+ + {store.carrito.length === 0 ? ( +Tu carrito está vacío.
+ ) : ( +-
+ {store.carrito.map(item => (
+
-
+ ++ +
{item.nombre}
+Cantidad: {item.cantidad}
+Precio unitario: {item.precio.toFixed(2)} €
+Total: {(item.precio * item.cantidad).toFixed(2)} €
+
+ ))}
+
+ Total: {total.toFixed(2)} €
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/front/src/pages/Home.jsx b/front/src/pages/Home.jsx
new file mode 100644
index 000000000..65155726a
--- /dev/null
+++ b/front/src/pages/Home.jsx
@@ -0,0 +1,40 @@
+export const Home = () => {
+
+ return (
+ Contacto
+Puedes contactarnos en contacto@ejemplo.com
+
+
+
+ );
+};
diff --git a/src/pages/Layout.jsx b/front/src/pages/Layout.jsx
similarity index 55%
rename from src/pages/Layout.jsx
rename to front/src/pages/Layout.jsx
index 9bfa31325..ef939790d 100644
--- a/src/pages/Layout.jsx
+++ b/front/src/pages/Layout.jsx
@@ -1,15 +1,16 @@
import { Outlet } from "react-router-dom/dist"
-import ScrollToTop from "../components/ScrollToTop"
import { Navbar } from "../components/Navbar"
import { Footer } from "../components/Footer"
-// Base component that maintains the navbar and footer throughout the page and the scroll to top functionality.
+
export const Layout = () => {
return (
-
+
+ Descubre tu estilo deportivo
+
+
+ 
+
+
+
+
+
+
+
+
+ Mision
+Impulsar a cada persona a despertar su instinto a través de ropa deportiva de alto rendimiento, que combina diseño, tecnología y actitud para superar límites dentro y fuera del gimnasio.
+
+
+ Vision
+Ser la marca de ropa deportiva más innovadora y reconocida a nivel mundial, inspirando a las personas a vivir un estilo de vida activo y saludable.
+
+
+ Ropa Deportiva & Activewear
+Ropa deportiva diseñada para impulsarte a ser tu mejor versión. En [Nombre de tu marca], creamos prendas que eliminan cualquier barrera entre tú y tus metas. Porque cuando se trata de darlo todo, tu ropa debe ser tu aliada, no un obstáculo.
+Funcionalidad y estilo para entrenar sin límites. Desde 2025, diseñamos ropa deportiva que combina comodidad, innovación y durabilidad. Cada prenda está pensada para acompañarte en cada repetición, cada kilómetro y cada momento de superación, porque conocemos la pasión de quienes viven para entrenar.
+Ropa deportiva forjada en el gimnasio
+Nuestra historia comenzó en el gimnasio, impulsada por el amor al entrenamiento. Ese espíritu sigue vivo en cada pieza de ropa que creamos. Nuestra colección incluye las últimas innovaciones en ropa deportiva, desde camisetas que absorben el sudor hasta leggins que ofrecen soporte y libertad de movimiento, diseñadas para que rindas al máximo y te recuperes con estilo.
+Para hombres: Camisetas de entrenamiento que mantienen la frescura, shorts ligeros, sudaderas cómodas y pantalones que se adaptan a cualquier rutina.
+Para mujeres:Leggins con tecnología seamless, tops deportivos con soporte superior y telas de secado rápido que potencian cada movimiento, desde el yoga hasta el levantamiento de pesas.
+Nuestra ropa está inspirada en la dedicación al fitness, con cortes modernos y tejidos innovadores que te ayudan a superar tus límites, sin olvidar el estilo que te hace destacar.
+Màs que ropa deportiva
+[Nombre de tu marca] es más que una marca; es una comunidad unida por la pasión de mejorar cada día. Somos los pasos que das hoy para conquistar tus metas de mañana. Somos cada desafío superado, cada nuevo récord y cada momento de crecimiento. Nuestra ropa deportiva, desde prendas para running hasta esenciales para descansar, está diseñada para quienes no se conforman.
+Únete a nuestra comunidad. Encuentra inspiración, consejos de entrenamiento y las últimas tendencias en nuestro blog [Nombre de tu blog o sección]. Porque en [Nombre de tu marca], no solo vestimos tu cuerpo, sino que celebramos tu esfuerzo y tu camino hacia ser tu mejor versión.
+
+
+ );
+};
+
+export default Login;
diff --git a/front/src/pages/Men.jsx b/front/src/pages/Men.jsx
new file mode 100644
index 000000000..43bc27165
--- /dev/null
+++ b/front/src/pages/Men.jsx
@@ -0,0 +1,11 @@
+const Men = () => {
+ return (
+ Iniciar Sesión
+ +
+
+ );
+};
+
+export default Men;
+
diff --git a/front/src/pages/ProductDetail.jsx b/front/src/pages/ProductDetail.jsx
new file mode 100644
index 000000000..2f3ae4bbc
--- /dev/null
+++ b/front/src/pages/ProductDetail.jsx
@@ -0,0 +1,82 @@
+// src/pages/ProductDetail.jsx
+import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import useGlobalReducer from "../hooks/useGlobalReducer";
+
+const productos = [
+ {
+ id: 1,
+ nombre: "Sudadera Negra",
+ tipo: "Sudadera",
+ genero: "Hombre",
+ talla: "L",
+ color: "Negro",
+ descripcion: "Sudadera de algodón orgánico",
+ precio: 39.99,
+ imagen: "https://images.unsplash.com/photo-1600180758890-6c9f3c3c9b96"
+ },
+ {
+ id: 2,
+ nombre: "Zapatillas Blancas",
+ tipo: "Zapatillas",
+ genero: "Mujer",
+ talla: "38",
+ color: "Blanco",
+ descripcion: "Zapatillas deportivas cómodas",
+ precio: 59.99,
+ imagen: "https://images.unsplash.com/photo-1583324113626-70df0f4deaab"
+ },
+ {
+ id: 3,
+ nombre: "Pantalón Jogger",
+ tipo: "Pantalón",
+ genero: "Unisex",
+ talla: "M",
+ color: "Gris",
+ descripcion: "Jogger casual para uso diario",
+ precio: 29.99,
+ imagen: "https://images.unsplash.com/photo-1602810318363-7e89eeae3b2f"
+ }
+];
+
+export default function ProductDetail() {
+ const { id } = useParams();
+ const [producto, setProducto] = useState(null);
+ const { dispatch } = useGlobalReducer();
+
+ useEffect(() => {
+ const p = productos.find(p => p.id === parseInt(id));
+ setProducto(p);
+ }, [id]);
+
+ if (!producto) return Sección Ropa para Hombre
+ {/* Aquí se mapearan los productos para hombre */} +Producto no encontrado.
; + + return ( +
+
+
+ );
+}
diff --git a/front/src/pages/ProductList.jsx b/front/src/pages/ProductList.jsx
new file mode 100644
index 000000000..a6036c0ec
--- /dev/null
+++ b/front/src/pages/ProductList.jsx
@@ -0,0 +1,38 @@
+import ProductCard from "../components/ProductCard";
+
+const productos = [
+ {
+ id: 1,
+ nombre: "Sudadera Negra",
+ precio: 39.99,
+ imagen: "https://via.placeholder.com/200x150?text=Sudadera"
+ },
+ {
+ id: 2,
+ nombre: "Camiseta Blanca",
+ precio: 24.99,
+ imagen: "https://via.placeholder.com/200x150?text=Camiseta"
+ },
+ {
+ id: 3,
+ nombre: "Zapatillas Urbanas",
+ precio: 59.99,
+ imagen: "https://via.placeholder.com/200x150?text=Zapatillas"
+ }
+];
+
+export default function ProductList() {
+ return (
+ {producto.nombre}
+{producto.descripcion}
+{producto.precio.toFixed(2)} €
+ +
+
+
+
+
+
+
+ );
+}
+
diff --git a/front/src/pages/Register.jsx b/front/src/pages/Register.jsx
new file mode 100644
index 000000000..64ee954c0
--- /dev/null
+++ b/front/src/pages/Register.jsx
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const Register = () => {
+ // Estado para almacenar lo que el usuario escribe
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+
+ const navigate = useNavigate();
+
+ // Esta función se ejecuta al enviar el formulario
+ const handleRegister = async (e) => {
+ e.preventDefault();
+
+ // ======== SIMULACIÓN TEMPORAL DE REGISTRO ========
+ console.log("Nuevo usuario:", email);
+ console.log("Contraseña:", password);
+ alert("Usuario registrado (simulación)");
+ navigate("/login");
+
+ // ======== LÓGICA REAL PARA CUANDO TENGAMOS API ========
+ /*
+ try {
+ const response = await fetch("https://miapi.com/register", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ email: email,
+ password: password,
+ }),
+ });
+
+ if (response.ok) {
+ alert("Registro exitoso. Ahora puedes iniciar sesión.");
+ navigate("/login");
+ } else {
+ alert("Error al registrar. Intenta con otro correo.");
+ }
+ } catch (error) {
+ console.error("Error en el registro:", error);
+ alert("No se pudo conectar con el servidor.");
+ }
+ */
+ };
+
+ return (
+ Nuestros productos
+
+ {productos.map((producto) => (
+
+
+
+ ))}
+
+
+ );
+};
+
+export default Register;
diff --git a/front/src/pages/Service.jsx b/front/src/pages/Service.jsx
new file mode 100644
index 000000000..ca699ad6f
--- /dev/null
+++ b/front/src/pages/Service.jsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+
+export const Service = () => {
+ const [formData, setFormData] = useState({
+ nombre: "",
+ direccion: "",
+ ciudad: "",
+ codigoPostal: "",
+ telefono: "",
+ comentarios: ""
+ });
+
+ // Simulación de carrito de compras (puedes conectar luego al contexto real)
+ // En una versión final, esta información vendría del contexto global, de una API o del localStorage.
+ const [carrito, setCarrito] = useState([
+ { id: 1, nombre: "Camiseta técnica", cantidad: 2, precio: 19.99 },
+ { id: 2, nombre: "Pantalón deportivo", cantidad: 1, precio: 29.99 }
+ ]);
+
+ const handleChange = (e) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value });
+ };
+
+ // En una app real, aquí se enviarían los datos al backend o API
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ console.log("Datos enviados:", formData);
+ alert("¡Datos de envío recibidos! Gracias por tu pedido.");
+ };
+
+ return (
+ Crear Cuenta
+ +
+
+ );
+};
+
diff --git a/front/src/pages/SobreNosotros.jsx b/front/src/pages/SobreNosotros.jsx
new file mode 100644
index 000000000..25b841851
--- /dev/null
+++ b/front/src/pages/SobreNosotros.jsx
@@ -0,0 +1,9 @@
+
+export const SobreNosotros = () => {
+ return (
+ Entrega a domicilio
+ +
+ {/* Formulario de entrega */}
+
+
+
+
+
+ {/* Resumen del carrito */}
+
+
+ Productos en tu carrito
+-
+ {carrito.map(item => (
+
- + {item.nombre} x{item.cantidad} + {(item.precio * item.cantidad).toFixed(2)}€ + + ))} +
+
+ );
+};
diff --git a/front/src/pages/Women.jsx b/front/src/pages/Women.jsx
new file mode 100644
index 000000000..de705fb96
--- /dev/null
+++ b/front/src/pages/Women.jsx
@@ -0,0 +1,10 @@
+const Women = () => {
+ return (
+ Sobre nosotros
+Somos una empresa dedicada a...
+
+
+ );
+};
+
+export default Women;
diff --git a/front/src/routes.jsx b/front/src/routes.jsx
new file mode 100644
index 000000000..d9dd2626d
--- /dev/null
+++ b/front/src/routes.jsx
@@ -0,0 +1,37 @@
+import {
+ createBrowserRouter,
+ createRoutesFromElements,
+ Route, Routes
+} from "react-router-dom";
+import { Layout } from "./pages/Layout";
+import { Home } from "./pages/Home";
+import { Contacto } from "./pages/Contacto";
+import { SobreNosotros } from "./pages/SobreNosotros";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import Men from "./pages/Men"
+import Women from "./pages/Women"
+import { Service } from "./pages/Service";
+import ProductList from "./pages/ProductList";
+import ProductDetail from "./pages/ProductDetail";
+import Cart from "./pages/Cart";
+
+export const router = createBrowserRouter(
+ createRoutesFromElements(
+
+ Sección Ropa para Mujer
+ {/* Aquí se mapearan los productos para mujer */} +Not found!
} > +
-
- - - - -
- );
-};
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
deleted file mode 100644
index 3e9f1aefa..000000000
--- a/src/pages/Home.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import rigoImageUrl from "../assets/img/rigo-baby.jpg";
-import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
-
-export const Home = () => {
-
- const {store, dispatch} =useGlobalReducer()
-
- return (
- -
- {/* Map over the 'todos' array from the store and render each item as a list element */}
- {store && store.todos?.map((item) => {
- return (
-
-
-
- {/* Link to the detail page of this todo. */}
- Link to: {item.title}
-
-
Open file ./store.js to see the global store that contains and updates the list of colors
- - -
- );
- })}
-
- - - - -
-
- );
-};
\ No newline at end of file
diff --git a/src/pages/Single.jsx b/src/pages/Single.jsx
deleted file mode 100644
index 7e68487da..000000000
--- a/src/pages/Single.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// Import necessary hooks and components from react-router-dom and other libraries.
-import { Link, useParams } from "react-router-dom"; // To use link for navigation and useParams to get URL parameters
-import PropTypes from "prop-types"; // To define prop types for this component
-import rigoImageUrl from "../assets/img/rigo-baby.jpg" // Import an image asset
-import useGlobalReducer from "../hooks/useGlobalReducer"; // Import a custom hook for accessing the global state
-
-// Define and export the Single component which displays individual item details.
-export const Single = props => {
- // Access the global state using the custom hook.
- const { store } = useGlobalReducer()
-
- // Retrieve the 'theId' URL parameter using useParams hook.
- const { theId } = useParams()
- const singleTodo = store.todos.find(todo => todo.id === parseInt(theId));
-
- return (
- Hello Rigo!!
-
-
-
- {/* Display the title of the todo element dynamically retrieved from the store using theId. */}
-
{/* A horizontal rule for visual separation. */} - - {/* A Link component acts as an anchor tag but is used for client-side routing to prevent page reloads. */} - - - Back home - - -
- );
-};
-
-// Use PropTypes to validate the props passed to this component, ensuring reliable behavior.
-Single.propTypes = {
- // Although 'match' prop is defined here, it is not used in the component.
- // Consider removing or using it as needed.
- match: PropTypes.object
-};
diff --git a/src/routes.jsx b/src/routes.jsx
deleted file mode 100644
index 0557df614..000000000
--- a/src/routes.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Import necessary components and functions from react-router-dom.
-
-import {
- createBrowserRouter,
- createRoutesFromElements,
- Route,
-} from "react-router-dom";
-import { Layout } from "./pages/Layout";
-import { Home } from "./pages/Home";
-import { Single } from "./pages/Single";
-import { Demo } from "./pages/Demo";
-
-export const router = createBrowserRouter(
- createRoutesFromElements(
- // CreateRoutesFromElements function allows you to build route elements declaratively.
- // Create your routes here, if you want to keep the Navbar and Footer in all views, add your new routes inside the containing Route.
- // Root, on the contrary, create a sister Route, if you have doubts, try it!
- // Note: keep in mind that errorElement will be the default page when you don't get a route, customize that page to make your project more attractive.
- // Note: The child paths of the Layout element replace the Outlet component with the elements contained in the "element" attribute of these child paths.
-
- // Root Route: All navigation will start from here.
- Todo: {singleTodo?.title}
-{/* A horizontal rule for visual separation. */} - - {/* A Link component acts as an anchor tag but is used for client-side routing to prevent page reloads. */} - - - Back home - - -