feat(ui): refactor components using Chakra UI

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+corinthians.txt

package.json

@@ -10,17 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/react": "^3.15.0",
+    "@chakra-ui/system": "^2.6.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "axios": "^1.9.0",
+    "framer-motion": "^12.11.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.3",
-    "styled-components": "^6.1.17"
+    "react-router-dom": "^7.5.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.22.0",
     "eslint-plugin-react-hooks": "^5.2.0",

src/App.tsx

@@ -2,17 +2,16 @@ import { Routes, Route } from "react-router-dom";
 import Home from "./home";
 import Players from "./components/Sections/Players";
 import Titles from "./components/Sections/Titles";
-import GlobalStyle from "./styles/GlobalStyle";
 import Footer from "./components/Structure/Footer";
 
 export default function App() {
   return (
     <>
-      <GlobalStyle />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/players" element={<Players />} />
         <Route path="/titles" element={<Titles />} />
+        <Route path="/github" element={"https://github.com/MatheusFariasz"}/>
       </Routes>
       <Footer />
     </>

src/components/Sections/Players/index.tsx

@@ -1,24 +1,88 @@
 import { usePlayers } from "../../../hooks/usePlayers/usePlayers";
-import { Container, Title, List, Card, PlayerImage, PlayerName, PlayerPosition, BackButton } from "./style";
+import { Link as RouterLink } from "react-router-dom";
+
+import {
+  Box,
+  Container,
+  Image,
+  Text,
+  Heading,
+  SimpleGrid,
+  Button,
+} from "@chakra-ui/react";
 
 export default function Players() {
   const { players, isLoading } = usePlayers();
 
-  if (isLoading) return <Container><p>Carregando jogadores...</p></Container>;
+  if (isLoading) {
+    return (
+      <Box bg="gray.900" minH="100vh" color="white" py={10}>
+        <Container maxW="container.lg">
+          <Text>Carregando jogadores...</Text>
+        </Container>
+      </Box>
+    );
+  }
 
   return (
-    <Container>
-      <BackButton to="/">Voltar para Home</BackButton>
-      <Title>JOGADORES</Title>
-      <List>
-        {players.map((player) => (
-          <Card key={player.id}>
-            <PlayerImage src={player.image} alt={player.name} />
-            <PlayerName>{player.name}</PlayerName>
-            <PlayerPosition>{player.position}</PlayerPosition>
-          </Card>
-        ))}
-      </List>
-    </Container>
+    <Box bg="gray.900" minH="95vh" color="white" py={10}>
+      <Container maxW="container.lg">
+        <RouterLink to="/">
+          <Button
+            bg="black"
+            color="white"
+            borderRadius={15}
+            fontSize="1.5rem"
+            w="18rem"
+            h="4.5rem"
+            mb={10}
+            _hover={{
+              bg: "white",
+              color: "black",
+              border: "1px solid black",
+              transform: "scale(1.05)",
+              shadow: "lg",
+            }}
+          >
+            Voltar para Home
+          </Button>
+        </RouterLink>
+
+        <Heading mb={10} fontSize="4rem" textAlign="center" marginBottom={55}>
+          JOGADORES
+        </Heading>
+
+        <SimpleGrid columns={[2, null, 4]} gap="40px">
+          {players.map((player) => (
+            <Box
+              h="15rem"
+              key={player.id}
+              borderWidth="1px"
+              borderRadius="lg"
+              overflow="hidden"
+              shadow="md"
+              p={4}
+              textAlign="center"
+              transition="all 0.3s ease-in-out"
+              _hover={{ transform: "scale(1.05)", shadow: "lg" }}
+            >
+              <Image
+                src={player.image}
+                alt={player.name}
+                boxSize="120px"
+                mx="auto"
+                mb={4}
+                objectFit="cover"
+                objectPosition="top"
+              />
+              <Text fontWeight="bold" fontSize="lg">
+                {player.name}
+              </Text>
+              <Text color="gray.400">{player.position}</Text>
+            </Box>
+          ))}
+        </SimpleGrid>
+      </Container>
+    </Box>
   );
 }

src/components/Sections/Titles/index.tsx

@@ -1,31 +1,77 @@
 import { useTitles } from "../../../hooks/useTitles/useTitles";
 import {
+  Box,
   Container,
-  Title,
-  List,
-  Card,
-  TrophyImage,
-  TrophyName,
-  BackButton,
-} from "./style";
+  Image,
+  Text,
+  Heading,
+  SimpleGrid,
+  Button,
+} from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
 
 export default function Titles() {
   const { titles, isLoading } = useTitles();
 
-  if (isLoading) return <Container><p>Carregando Títulos...</p></Container>;
+  if (isLoading) {
+    return (
+      <Box bg="gray.900" minH="100vh" color="white" py={10}>
+        <Container maxW="container.lg">
+          <Text>Carregando Títulos...</Text>
+        </Container>
+      </Box>
+    );
+  }
 
   return (
-    <Container>
-      <BackButton to="/">Voltar para Home</BackButton>
-      <Title>TÍTULOS</Title>
-      <List>
-        {titles.map((title) => (
-          <Card key={title.id}>
-            <TrophyImage src={title.img} alt={title.name} />
-            <TrophyName>{title.name}</TrophyName>
-          </Card>
-        ))}
-      </List>
-    </Container>
+    <Box bg="gray.900" minH="100vh" color="white" py={10}>
+      <Container maxW="container.lg">
+        <RouterLink to="/">
+          <Button
+            bg="black"
+            color="white"
+            borderRadius={15}
+            fontSize="1.5rem"
+            w="18rem"
+            h="4.5rem"
+            mb={10}
+            _hover={{ bg: "white", color: "black", border: "1px solid black", transform: "scale(1.05)", shadow: "lg" }}
+          >
+            Voltar para Home
+          </Button>
+        </RouterLink>
+
+        <Heading mb={10} fontSize="4rem" textAlign="center" marginBottom={55}>
+          TÍTULOS
+        </Heading>
+
+        <SimpleGrid columns={[2, null, 4]} gap="40px">
+          {titles.map((title) => (
+            <Box
+              w="20rem"
+              key={title.id}
+              borderWidth="1px"
+              borderRadius="lg"
+              overflow="hidden"
+              shadow="md"
+              p={4}
+              textAlign="center"
+              transition="all 0.3s ease-in-out"
+              _hover={{ transform: "scale(1.05)", shadow: "lg" }}
+            >
+              <Image
+                src={title.img}
+                alt={title.name}
+                boxSize="120px"
+                mx="auto"
+                mb={4}
+                objectFit="contain"
+              />
+              <Text fontWeight="bold">{title.name}</Text>
+            </Box>
+          ))}
+        </SimpleGrid>
+      </Container>
+    </Box>
   );
 }