Merge pull request #16 from Douglas019BR/feat-02/improve_frontend

feat 02/improve frontend

Author: Douglas019BR

frontend/package-lock.json

@@ -3,9 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.0",
+    "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
+    "@mui/joy": "^5.0.0-beta.48",
     "@mui/material": "^5.13.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

frontend/package.json

@@ -2,27 +2,32 @@ import React from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import StockPortfolio from './pages/StockPortfolio';
 import HelloWorldPage from './pages/HelloWorldPage'; 
+import Layout from './components/Layout/index';
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <StockPortfolio />,
+    element: <Layout />,
     children: [
+      {
+        path: "",
+        element: <StockPortfolio />,
+      },
       {
         path: "hello",
-        element: <HelloWorldPage />
-      }
-    ]
-  }
+        element: <HelloWorldPage />,
+      },
+    ],
+  },
 ], {
   future: {
     v7_startTransition: true,
-    v7_relativeSplatPath: true
+    v7_relativeSplatPath: true,
   }
 });
 
 function App() {
   return <RouterProvider router={router} />;
 }
 
-export default App;
+export default App;

frontend/src/App.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FooterContainer, FooterText } from './styles';
+
+
+const Footer = () => {
+  return (
+    <FooterContainer>
+      <FooterText>
+        © {new Date().getFullYear()} COWDOL. Todos os direitos reservados.
+      </FooterText>
+    </FooterContainer>
+  );
+};
+export default Footer;

frontend/src/components/Layout/Footer/index.jsx

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+export const FooterContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  padding: theme.spacing(2),
+  textAlign: 'center',
+  position: 'absolute',
+  bottom: 0,
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '60px',
+}));
+
+export const FooterText = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: '0.875rem',
+}));

frontend/src/components/Layout/Footer/styles.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import CarouselRatio from '../../common/Carousel/index';
+import { StyledHeader, CarouselContainer } from './styles';
+
+const Header = () => {
+  return (
+    <StyledHeader>
+      <CarouselContainer>
+        <CarouselRatio />
+      </CarouselContainer>
+    </StyledHeader>
+  );
+};
+
+export default Header;

frontend/src/components/Layout/Header/index.jsx

@@ -0,0 +1,26 @@
+// Header.styles.js
+import { styled } from '@mui/material/styles';
+
+export const StyledHeader = styled('header')(({ theme }) => ({
+  width: '100%', 
+  height: '10%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center', 
+  backgroundColor: 'transparent',
+  position: 'fixed', // fixa no topo
+  top: 0,
+  left: 0,
+  zIndex: 100, // garante que fique acima de outros elementos
+  padding: 0,
+  margin: 0,
+}));
+
+export const CarouselContainer = styled('div')(({ theme }) => ({
+  width: '100%', // ocupa toda a largura disponível
+  height: '100%', // altura total do header
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden', // esconde qualquer conteúdo que estourar
+}));

frontend/src/components/Layout/Header/styles.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Header from './Header/index';
+import Footer from './Footer/index';
+import { Box } from '@mui/material';
+
+const Layout = () => {
+  return (
+    <Box>
+      <Header />
+      <Box sx={{ minHeight: '80vh' }}>
+        <Outlet />
+      </Box>
+      <Footer />
+    </Box>
+  );
+};
+
+export default Layout;