FT_RMT_2408_ES ANA_BADOLATO

package.json

@@ -11,8 +11,10 @@
     "test": "vitest --ui"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.2",
+    "router-dom": "^2.2.11"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.css

@@ -1,42 +1,163 @@
-#root {
-  max-width: 1280px;
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
   margin: 0 auto;
-  padding: 2rem;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  min-width: 100vw; 
+  overflow-x: hidden; 
+}
+
+h1 {
+  font-size: 32px;
+  line-height: 1.1;
+  margin: 48px 0px;
+}
+
+.navbar{
+  background-color: #535bf2;
+  width: 100vw;
+  height: 64px;
+  display: flex;
+  align-items: center;
+}
+
+nav {
+  width: 100%;
+  background-color: #535bf2;
+  padding: 16px;
   text-align: center;
+  box-sizing: border-box;
+  color: #fff;
+  text-align: left;
+  font-weight: 700;
+  font-size: 20px;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+.companyCard img{
+  width: 80px;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+
+.companyCardLogo img {
+  width: 120px;
 }
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+
+.techCard img{
+  width: 48px; 
+  height: auto;
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.companyCard, .companyCardLogo{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 300px; 
+  height: 300px;
+  box-sizing: border-box; 
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+  border-radius: 8px; 
+  transition: transform 0.3s ease, box-shadow 0.3s ease; 
+  background-color: #fff; 
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+
+
+
+.companyCard:hover, .techCard:hover {
+  transform: translateY(-10px); 
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); 
+  cursor: pointer;
 }
 
-.card {
-  padding: 2em;
+
+.techCard {
+  flex: 0 0 150px; /* Fija el ancho de cada tarjeta */
+  height: 150px; /* Altura fija de las tarjetas */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box; 
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
+  border-radius: 8px; 
+  transition: transform 0.3s ease, box-shadow 0.3s ease; 
+  background-color: #fff; 
+}
+
+
+
+.companyList{
+  display: flex;
+  flex-wrap: wrap;
+  gap: 32px;
+  justify-content: center;
+  max-width: 650px; 
+  margin: 0 auto; 
+}
+
+h4{
+  margin-top: 0;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 1200px; 
+  margin: 0 auto;
+  padding: 16px; 
+  box-sizing: border-box;
+  text-align: center;
+}
+
+h2 {
+  width: 100%; 
+  text-align: center; 
+}
+
+.techStackContainer {
+  display: flex;
+  gap: 32px;
+  margin: 96px 32px;
+  overflow-x: auto; 
+  overflow-y: hidden; 
+  padding-bottom: 10px; 
+  max-width: 100%; 
+  justify-content: flex-start;
+  scroll-behavior: smooth; 
 }
 
-.read-the-docs {
-  color: #888;
+header {
+  width: 100%; 
+  max-width: 1200px; 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 96px;
+  margin-bottom: 32px; 
 }
+
+button {
+  height: 32px;
+  padding: 8px 16px;
+}

src/App.jsx

@@ -1,10 +1,34 @@
-import "./App.css";
+import React, { useState } from 'react';
+import { Routes, Route } from 'react-router-dom';
+
+import './App.css';
+
+import Companies from "./companies.json"
+import Technologies from "./Technologies.json"
+import Navbar from './components/Navbar';
+import HomePage from './pages/HomePage';
+import CompanyPage from './pages/CompanyPage';
+import TechnologyPage from './pages/TechnologyPage';
+import NotFound from './pages/NotFound';
+
+
 
 function App() {
+
+  const [companiesArr, setCompanies] = useState(Companies);
+  const [technologiesArr, setTechnologies] = useState(Technologies);
+
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Navbar />
+      <Routes>
+        <Route path={"/"} element={<HomePage companiesArr={companiesArr}/>}></Route>
+        <Route path={"/company/:companySlug"} element={<CompanyPage companiesArr={companiesArr}/>}></Route>
+        <Route path="/company/:companySlug/tech/:slug" element={<TechnologyPage technologiesArr={technologiesArr} />} />
+        <Route path={"*"} element={<NotFound />}></Route>
+      </Routes>
     </div>
+
   );
 }
 

src/components/Navbar.jsx

@@ -1,5 +1,14 @@
+import { Link } from 'react-router-dom';
+
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return (
+    <div className="navbar">
+      <Link to={`/`}>
+        <nav>StackTracker</nav>
+      </Link>
+    </div>
+  );
 }
 
 export default Navbar;
+

src/main.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-import './index.css'
+import { BrowserRouter } from 'react-router-dom';
+
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>
 )

src/pages/CompanyPage.jsx

@@ -1,7 +1,41 @@
-function CompanyPage() {
+import { useParams, Link } from "react-router-dom";
+
+function CompanyPage({ companiesArr }) {
+  const { companySlug } = useParams();
+
+  const companyToDisplay = companiesArr.find((eachCompany) => {
+    return eachCompany.slug === companySlug;
+  });
+
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div className="page">
+      <h2>Company Profile</h2>
+      <header>
+        <div className="companyCardLogo">
+          <img src={companyToDisplay.logo} alt="" />
+        </div>
+
+        <section style={{ width: "500px", textAlign: "center" }}>
+          <h1>{companyToDisplay.name}</h1>
+          <p>
+            <strong>About</strong>
+          </p>
+          <p>{companyToDisplay.description}</p>
+        </section>
+      </header>
+
+      <section className="techStackContainer">
+        {companyToDisplay.techStack.map((tech, index) => (
+          <div className="techCard" key={index}>
+             <Link to={`/company/${companySlug}/tech/${tech.slug}`}>
+            <img src={tech.image} alt={tech.name} />
+            <p>
+              {tech.name}
+            </p>
+            </Link>
+          </div>
+        ))}
+      </section>
     </div>
   );
 }