FT_RMT_2408_ES Alejandro S. del Solo

package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.css

@@ -1,42 +1,196 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  /* padding: 2rem; */
   text-align: center;
+  /* display: flex;
+  flex-direction: column; */
+  height: 100vh;
+}
+
+h1{
+  font-size: 1.5rem;
+  margin: 40px;
+}
+
+.App{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  /* border: solid 1px red; */
+}
+.navbar{
+  height: 80px;
+  background-color: rgb(73, 85, 255);
+  text-align: left;
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  color: white;
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+.companies{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  gap: 15px;
+}
+
+.ficha-company{
+  width: 300px;
+  height: 300px;
+  /* border: solid 1px red; */
+  border-radius: 8px;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.281);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  padding-bottom: 20px;
+}
+
+.company-name{
+  color: black;
+  font-size: 1.6rem;
+}
+
+.logos{
+  width: 40%;
+  height: 40%;
+  /* border: solid 1px red; */
+}
+
+.logos img{
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  /* border: solid 1px red; */
+}
+
+/* ---------------------------------------------------------------------- */
+/* COMPANY DETAIL */
+
+.super-container{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+#comp-detail-container{
+  width: 100%;
+  /* border: 1px solid red; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+}
+.ficha-company-detail{
+  /* border: 1px solid red; */
+  display: flex;
+  width: 65%;
+  justify-content: space-around;
+}
+
+.company-detail-img-container{
+  margin: 30px;
+  width: 30%;
+  height: auto;
+  aspect-ratio: 1/1;
+  /* border: 1px solid blue; */
+  align-content: center;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.397);
+}
+
+.company-detail-img-container img{
+  width: 50%;
+  height: 50%;
+  object-fit: contain;
+  object-position: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+.company-detail-text-container{
+  width: 43%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+
+.company-detail-text-container h3{
+  font-size: 2.2rem;
+}
+.company-detail-text-container h4{
+  font-weight: 800;
 }
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+.company-detail-text-container p{
+  font-weight: 500;
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+#comp-technologies-container{
+  display: flex;
+  margin: 100px;
+  width: 100%;
+  /* border: 1px solid green; */
+  overflow-x: scroll;
+  gap: 20px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.card-comp-tech{
+  width: 200px;
+  height: 200px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.card {
-  padding: 2em;
+.ficha-comp-tech{
+  /* border: 1px solid red; */
+  width: 70%;
+  height: 70%;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.301);
 }
 
-.read-the-docs {
-  color: #888;
+.comp-tech-img{
+  width:100%;
+  height: 100%;
+  /* border: solid 1px blue; */
+  align-content: center;
+}
+
+.comp-tech-img img{
+  width: 50%;
+  height: 50%;
+  object-fit: contain;
+ object-position: center;
+}
+
+.return {
+  margin-top: 50px;
+  background-color: rgb(78, 121, 240);
+  color: white;
+  padding: 5px 18px;
+}
+
+#comp-detail-container-tech{
+  width: 100%;
+  /* border: 1px solid red; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
 }
+/* ---------------------------------------------------------------------- */

src/App.jsx

@@ -1,9 +1,22 @@
 import "./App.css";
+import companies from "./companies.json"
+import techs from "./technologies.json"
+import HomePage from './pages/HomePage'
+import {Routes, Route} from 'react-router-dom'
+import CompanyPage from "./pages/CompanyPage";
+import TechnologyPage from "./pages/TechnologyPage";
+import Navbar from "./components/Navbar"
 
 function App() {
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Navbar/>
+      {/* <h1>LAB | React Stack Tracker.</h1> */}
+      <Routes>
+        <Route path={"/"} element={ <HomePage comp = {companies}/> }/>
+        <Route path={"/company/:companySlug"} element={ <CompanyPage comp = {companies}/>}/>
+        <Route path={"/tech/:slug"} element={<TechnologyPage  tech={techs}/>}/>
+      </Routes>
     </div>
   );
 }

src/components/Navbar.jsx

@@ -1,5 +1,9 @@
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return (
+    <nav className="navbar">
+      StackTracker
+    </nav>
+  )
 }
 
 export default Navbar;

src/index.css

@@ -27,11 +27,6 @@ body {
   min-height: 100vh;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
 button {
   border-radius: 8px;
   border: 1px solid transparent;

src/main.jsx

@@ -3,8 +3,12 @@ import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
 
+import { BrowserRouter as Router } from "react-router-dom";
+
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <Router>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </Router>
 )