ogiansouza · maatheOoz · Apr 5, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,9 @@
     "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.9",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>EPLAY - A sua loja de games</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,25 +1,21 @@
-import React from 'react'
-import logo from './logo.svg'
-import './App.css'
+import { BrowserRouter } from 'react-router-dom'
+
+import Header from './components/Header'
+import { GlobalCss } from './styles'
+
+import Rotas from './routes'
+import Footer from './components/Footer'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <BrowserRouter>
+      <GlobalCss />
+      <div className="container">
+        <Header />
+      </div>
+      <Rotas />
+      <Footer />
+    </BrowserRouter>
   )
 }
 

diff --git a/src/assets/images/banner-homem-aranha.png b/src/assets/images/banner-homem-aranha.png
diff --git a/src/assets/images/carrinho.svg b/src/assets/images/carrinho.svg
diff --git a/src/assets/images/diablo.png b/src/assets/images/diablo.png
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
diff --git a/src/assets/images/resident.png b/src/assets/images/resident.png
diff --git a/src/assets/images/star_wars.png b/src/assets/images/star_wars.png
diff --git a/src/assets/images/zelda.png b/src/assets/images/zelda.png
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -0,0 +1,29 @@
+import { Imagem, Titulo, Precos } from './styles'
+
+import bannerImg from '../../assets/images/banner-homem-aranha.png'
+import Tag from '../Tag'
+import Button from '../Button'
+
+const Banner = () => (
+  <Imagem style={{ backgroundImage: `url(${bannerImg})` }}>
+    <div className="container">
+      <Tag size="big">Destaque do dia</Tag>
+      <div>
+        <Titulo>Marvel&apos;s Spider-Man: Miles Morales PS4 & PS5</Titulo>
+        <Precos>
+          De <span>R$ 250,00</span> <br />
+          por apenas R$ 99,90
+        </Precos>
+      </div>
+      <Button
+        type="link"
+        to="/produto"
+        title="Clique aqui para aproveitar esta oferta"
+      >
+        Aproveitar
+      </Button>
+    </div>
+  </Imagem>
+)
+
+export default Banner
diff --git a/src/components/Banner/styles.ts b/src/components/Banner/styles.ts
@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+import { TagContainer } from '../Tag/styles'
+
+export const Imagem = styled.div`
+  width: 100%;
+  height: 560px;
+  display: block;
+  background-repeat: no-repeat;
+  background-size: cover;
+  font-weight: bold;
+
+  .container {
+    position: relative;
+    padding-top: 340px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  ${TagContainer} {
+    position: absolute;
+    top: 32px;
+  }
+`
+
+export const Titulo = styled.h2`
+  font-size: 36px;
+  max-width: 450px;
+`
+
+export const Precos = styled.p`
+  font-size: 24px;
+  margin-top: 24px;
+
+  span {
+    text-decoration: line-through;
+  }
+`