feat - add basic UI components and new pages

src/App.tsx

@@ -1,16 +1,32 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home';
-import LeagueDetails from './pages/LeagueDetails';
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import Home from "./pages/Home";
+import LeagueDetails from "./pages/LeagueDetails";
+import TeamDetails from "./pages/TeamDetails";
 
-function App() {
+const App: React.FC = () => {
   return (
     <Router basename="/ui/sports-agenda/">
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/league/:id" element={<LeagueDetails />} />
-      </Routes>
+      <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
+        {/* Header */}
+        <Header />
+
+        {/* Main Content */}
+        <main style={{ flex: 1 }}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/league/:id" element={<LeagueDetails />} />
+            <Route path="/team/:id" element={<TeamDetails />} />
+          </Routes>
+        </main>
+
+        {/* Footer */}
+        <Footer />
+      </div>
     </Router>
   );
-}
+};
 
-export default App;
+export default App;

src/components/Footer.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import styled from "styled-components";
+
+const FooterContainer = styled.footer`
+  background-color: #004d40; /* Deep Green */
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+
+  a {
+    color: #ffcc00; /* Yellow highlight */
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: white;
+    }
+  }
+`;
+
+const Footer: React.FC = () => {
+  return (
+    <FooterContainer>
+      <p>
+        © {new Date().getFullYear()} Sports Agenda - API BR. All Rights Reserved. | Built
+        with ❤️ by <a href="https://guilhermebranco.com.br">Guilherme Branco Stracini</a>
+      </p>
+    </FooterContainer>
+  );
+};
+
+export default Footer;

src/components/Header.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+const HeaderContainer = styled.header`
+  background-color: #004d40; /* Deep Green */
+  color: white;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: Arial, sans-serif;
+
+  h1 {
+    font-size: 24px;
+    margin: 0;
+  }
+
+  nav {
+    a {
+      color: white;
+      text-decoration: none;
+      margin: 0 10px;
+      font-size: 16px;
+      font-weight: bold;
+      transition: color 0.3s ease;
+
+      &:hover {
+        color: #ffcc00; /* Yellow highlight */
+      }
+    }
+  }
+`;
+
+const Header: React.FC = () => {
+  return (
+    <HeaderContainer>
+      <h1>Sports Agenda | API BR</h1>
+      <nav>
+        <Link to="/">Home</Link>
+      </nav>
+    </HeaderContainer>
+  );
+};
+
+export default Header;

src/pages/Home.tsx

@@ -18,18 +18,41 @@ interface Match {
 }
 
 const HomeContainer = styled.div`
+  font-family: "Arial", sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
   padding: 20px;
-  font-family: Arial, sans-serif;
 
   h1 {
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
+    font-size: 32px;
+    font-weight: bold;
+    color: #004d40; /* Deep Green */
   }
 
   h2 {
-    margin-top: 30px;
-    margin-bottom: 15px;
+    margin-top: 40px;
+    margin-bottom: 20px;
     font-size: 24px;
+    color: #00695c; /* Slightly lighter green */
+    border-bottom: 2px solid #004d40;
+    display: inline-block;
+    padding-bottom: 5px;
+  }
+
+  .section {
+    margin-bottom: 50px;
+    padding: 20px;
+    border-radius: 8px;
+    background-color: #f1f8e9; /* Light green tint */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .carousel-container {
+    padding: 10px;
+    background: #e8f5e9; /* Subtle background for the carousel */
+    border-radius: 8px;
   }
 `;
 

src/pages/LeagueDetails.tsx

@@ -25,22 +25,73 @@ interface League {
 }
 
 const LeagueDetailsContainer = styled.div`
+  font-family: "Arial", sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
   padding: 20px;
-  font-family: Arial, sans-serif;
 
   h1 {
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
+    font-size: 32px;
+    font-weight: bold;
+    color: #004d40; /* Deep Green */
   }
 
   h2 {
-    margin-top: 30px;
-    margin-bottom: 15px;
+    margin-top: 40px;
+    margin-bottom: 20px;
     font-size: 24px;
+    color: #00695c; /* Slightly lighter green */
+    border-bottom: 2px solid #004d40;
+    display: inline-block;
+    padding-bottom: 5px;
   }
 
+  .teams-section,
   .matches-section {
+    margin-bottom: 50px;
+    padding: 20px;
+    border-radius: 8px;
+    background-color: #f1f8e9; /* Light green tint */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .team-grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 20px;
+    justify-items: center;
+  }
+
+  .team-card {
+    width: 100%;
+    max-width: 150px;
+    text-align: center;
+
+    img {
+      width: 100%;
+      height: auto;
+      border-radius: 50%;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 16px;
+      font-weight: bold;
+      color: #004d40;
+    }
+  }
+
+  .match-list-container {
     margin-top: 20px;
+
+    h3 {
+      font-size: 20px;
+      color: #004d40;
+      margin-bottom: 10px;
+    }
   }
 `;