feat: photos bases and router added

Dockerfile

@@ -17,7 +17,7 @@ COPY . /app/
 RUN npm run build
 
 # Expone el puerto en el que se ejecutará la aplicación
-EXPOSE 3000
+EXPOSE 3001
 
 # Comando para iniciar la aplicación cuando el contenedor se ejecute
 CMD ["npm", "start"]

docker-compose.yml

@@ -8,7 +8,7 @@ services:
     networks:
       - traefik
     ports:
-      - 3000:3000
+      - 3001:3001
     environment:
       - TZ=Europe/Madrid
     labels:

package.json

@@ -9,6 +9,7 @@
     "emailjs-com": "^2.6.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "^3.0.1",
     "smooth-scroll": "^16.1.3"
   },

public/css/style.css

@@ -74,6 +74,7 @@ hr {
 #menu {
   padding: 15px;
   transition: all 0.8s;
+  position: relative; /* Cambia la posición del nav a relativa o estática */
 }
 #menu.navbar-default {
   background-color: #fff;
@@ -452,12 +453,19 @@ header .intro-text {
 #team {
   padding: 100px 0;
   background-color: #ecf7fd;
+
 }
 #team h4 {
   margin: 5px 0;
 }
 #team .team-img {
   width: 240px;
+  height: 240px; /* Set the height equal to the width */
+  object-fit: cover; /* Ensure the image is cropped */
+}
+#team .team-img img {
+  width: 100%; /* Make the image fill its container */
+  height: auto; /* Allow the image to maintain its aspect ratio */
 }
 #team .thumbnail {
   background: transparent;
@@ -525,4 +533,21 @@ header .intro-text {
   }
 }
 
+/* Estilos para el título de cada base */
+.titulo-base {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+/* Estilos para el texto de cada base */
+.texto-base {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+/* Contenedor de cada base */
+.base-container {
+  display: flex;
+  flex-direction: column;
+}
 

src/App.css

@@ -16,3 +16,5 @@
     width: 110%;
   }
 }
+
+

src/App.jsx

@@ -1,35 +1,35 @@
 import React, { useState, useEffect } from "react";
-import { Navigation } from "./components/navigation";
-import { Header } from "./components/header";
-import { Features } from "./components/features";
-import { Testimonials } from "./components/testimonials";
-import { Team } from "./components/Team";
-import { Contact } from "./components/contact";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import {Bases} from "./components/Bases";
+import {Home} from "./components/Home";
 import JsonData from "./data/data.json";
 import SmoothScroll from "smooth-scroll";
 import "./App.css";
 
+
+
 export const scroll = new SmoothScroll('a[href*="#"]', {
   speed: 1000,
   speedAsDuration: true,
 });
 
+
+
 const App = () => {
   const [landingPageData, setLandingPageData] = useState({});
   useEffect(() => {
     setLandingPageData(JsonData);
-  }, []);
-
-    return (
-       <div>
-        <Navigation />
-        <Header data={landingPageData.Header} />
-        <Features data={landingPageData.Features} />
-        {/*<Testimonials data={landingPageData.Testimonials} /> */}
-        <Team data={landingPageData.Team} />
-        <Contact data={landingPageData.Contact} />
-      </div> 
-    );
+  }, []); 
+  return (
+    <BrowserRouter> {/* Agrega BrowserRouter como contenedor principal */}
+
+      <Routes>
+        <Route path="/" element={<Home/>} />
+        <Route path="/bases" element={<Bases data={landingPageData.Bases}/>} />
+      </Routes>
+    </BrowserRouter>
+  );
 };
 
 export default App;
+

src/components/Bases.jsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from "react";
+import { Features } from "./features";
+import { Navigation } from "./navigation";
+import JsonData from "../data/data.json";
+
+export const Bases = (props) => {
+
+  return (
+    <div>
+      <Navigation />
+      <div id="bases" className="text-left">
+        <div className="container">
+          <div className="text-center">
+            <div className="col-md-14 section-title">
+              <h2>{props.data ? props.data.title : "Undefined"}</h2>
+            </div>
+          </div>
+          <div>
+            {props.data
+              ? props.data.bases.map((d, i) => (
+                <div className="base-container" key={i}>
+                  <h3 className="titulo-base">{d.title}</h3>
+                  <p className="texto-base" dangerouslySetInnerHTML={{ __html: d.base }}></p>
+                </div>
+              ))
+              : "loading"}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+

src/components/Home.jsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from "react";
+import { Header } from "./header";
+import { Features } from "./features";
+import { Testimonials } from "./testimonials";
+import { Team } from "./Team";
+import { Contact } from "./contact";
+import {Navigation} from "./navigation";
+import JsonData from "../data/data.json";
+import SmoothScroll from "smooth-scroll";
+
+
+export const Home = (props) => {
+  const [landingPageData, setLandingPageData] = useState({});
+    useEffect(() => {
+      setLandingPageData(JsonData);
+    }, []);  
+  return (
+    <div>
+        <Navigation />
+        <Header data={landingPageData.Header} />
+        <Features data={landingPageData.Features} />
+        {/*<Testimonials data={landingPageData.Testimonials} /> */}
+        <Team data={landingPageData.Team} />
+        <Contact data={landingPageData.Contact} />
+      </div>
+  )
+}
+

src/components/header.jsx

@@ -1457,11 +1457,13 @@ M1401.491699,1251.711426
 z"/>
                 </svg>
                 <p className="description">{props.data ? props.data.paragraph : "Loading"}</p>
+				<p>{props.data ? props.data.info : "Próximamente"}</p>
+				<p>{props.data ? props.data.contact : "Más info: [email protected]"}</p>
                 <a
                   href="#features"
                   className="btn btn-custom btn-lg page-scroll"
                 >
-                  Inscríbete
+                  Inscripciones abiertas próximamente
                 </a>{" "}
               </div>
             </div>

src/components/navigation.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 export const Navigation = (props) => {
   return (
@@ -17,7 +18,7 @@ export const Navigation = (props) => {
             <span className="icon-bar"></span>{" "}
             <span className="icon-bar"></span>{" "}
           </button>
-          <a className="navbar-brand page-scroll" href="#page-top">
+          <a className="navbar-brand page-scroll" href="/#page-top">
             EESTech Challenge
           </a>{" "}
         </div>
@@ -33,23 +34,29 @@ export const Navigation = (props) => {
               </a>
             </li>
             <li>
-              <a href="#page-top" className="page-scroll">
+              <a href="/#page-top" className="page-scroll">
                 Inicio
               </a>
             </li>
             <li>
-              <a href="#features" className="page-scroll">
+              <a href="/#features" className="page-scroll">
                 Evento
               </a>
             </li>
             <li>
-              <a href="#team" className="page-scroll">
+              <a href="/#team" className="page-scroll">
                 Equipo
               </a>
             </li>
+            <li>
+              <Link to="/bases" className="page-scroll"> {/* Utiliza Link para navegar a /bases */}
+                Bases
+              </Link>
+            </li>
           </ul>
         </div>
       </div>
     </nav>
   );
 };
+