ogiansouza · A97Campos · Oct 4, 2024 · Oct 8, 2024 · Oct 9, 2024 · Oct 14, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,18 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.5.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.23",
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
+    "formik": "^2.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^6.26.2",
+    "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.15.0",
+    "styled-components": "^6.1.13",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.6.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -41,6 +49,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-router-hash-link": "^2.4.9",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",

diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,9 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</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:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,25 +1,29 @@
-import React from 'react'
-import logo from './logo.svg'
-import './App.css'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+
+import { Header } from './components/Header'
+import { GlobalCss } from './styles'
+
+import { Rotas } from './routes'
+import { Footer } from './components/Footer'
+import { store } from './store'
+import { Cart } from './components/Cart'
 
 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>
+    <Provider store={store}>
+      <div className="App">
+        <BrowserRouter>
+          <GlobalCss />
+          <div className="container">
+            <Header />
+          </div>
+          <Rotas />
+          <Footer />
+          <Cart />
+        </BrowserRouter>
+      </div>
+    </Provider>
   )
 }
 

diff --git a/src/assets/images/1 - Mistborn Primeira Era - O império final.pdf b/src/assets/images/1 - Mistborn Primeira Era - O império final.pdf
diff --git a/src/assets/images/banner-homem-aranha.png b/src/assets/images/banner-homem-aranha.png
diff --git a/src/assets/images/barcode.png b/src/assets/images/barcode.png
diff --git a/src/assets/images/carrinho.svg b/src/assets/images/carrinho.svg
diff --git a/src/assets/images/credit-card.png b/src/assets/images/credit-card.png
diff --git a/src/assets/images/diablo.png b/src/assets/images/diablo.png
diff --git a/src/assets/images/fechar.png b/src/assets/images/fechar.png
diff --git a/src/assets/images/fifa.png b/src/assets/images/fifa.png
diff --git a/src/assets/images/fundo_hogwarts.png b/src/assets/images/fundo_hogwarts.png
diff --git a/src/assets/images/image_hogwarts.png b/src/assets/images/image_hogwarts.png
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
diff --git a/src/assets/images/play.png b/src/assets/images/play.png
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/streetFighter.png b/src/assets/images/streetFighter.png
diff --git a/src/assets/images/zelda.png b/src/assets/images/zelda.png
diff --git a/src/assets/images/zoom.png b/src/assets/images/zoom.png
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -0,0 +1,39 @@
+import { Tags } from '../Tags'
+import { Button } from '../Button'
+import { parseToBrl } from '../../utils'
+import { Loader } from '../Loader'
+
+import { useGetFeaturedGameQuery } from '../../services/api'
+
+import * as S from './style'
+
+export const Banner = () => {
+  const { data: game } = useGetFeaturedGameQuery()
+
+  if (!game) {
+    return <Loader />
+  }
+
+  return (
+    <S.Image style={{ backgroundImage: `url(${game.media.cover})` }}>
+      <div className="container">
+        <Tags size="big">Destaque do dia</Tags>
+        <div>
+          <S.Title>{game.name}</S.Title>
+          <S.Price>
+            De <span>{parseToBrl(game?.prices.old)}</span>
+            <br />
+            por apenas {parseToBrl(game?.prices.discount)}
+          </S.Price>
+        </div>
+        <Button
+          type="link"
+          to={`/product/${game.id}`}
+          title="clique para aproveitar a oferta"
+        >
+          Aproveitar
+        </Button>
+      </div>
+    </S.Image>
+  )
+}
diff --git a/src/components/Banner/style.ts b/src/components/Banner/style.ts
@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+import { TagsContainer } from '../Tags/style'
+
+export const Image = styled.div`
+  width: 100%;
+  height: 560px;
+  padding: 32px 0 56px 0;
+  display: block;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+
+  .container {
+    position: relative;
+    padding-top: 340px;
+    max-height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    z-index: 1;
+  }
+
+  ${TagsContainer} {
+    position: absolute;
+    top: 0;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    content: '';
+  }
+`
+
+export const Title = styled.h2`
+  font-size: 32px;
+  max-width: 450px;
+`
+
+export const Price = styled.p`
+  font-size: 24px;
+  margin-top: 24px;
+  span {
+    text-decoration: line-through;
+  }
+`
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -0,0 +1,38 @@
+import { ButtonContainer, ButtonLink } from './style'
+
+export type Props = {
+  type: 'button' | 'link' | 'submit'
+  title: string
+  to?: string
+  onClick?: () => void
+  children: string
+  variant?: 'primary' | 'secundary'
+}
+
+export const Button = ({
+  type,
+  title,
+  to,
+  onClick,
+  children,
+  variant = 'primary'
+}: Props) => {
+  if (type === 'button' || type === 'submit') {
+    return (
+      <ButtonContainer
+        variant={variant}
+        type={type}
+        title={title}
+        onClick={onClick}
+      >
+        {children}
+      </ButtonContainer>
+    )
+  }
+
+  return (
+    <ButtonLink to={to as string} title={title}>
+      {children}
+    </ButtonLink>
+  )
+}
diff --git a/src/components/Button/style.ts b/src/components/Button/style.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+import { Link } from 'react-router-dom'
+import { Props } from '.'
+
+export const ButtonContainer = styled.button<Props>`
+  border: 2px solid
+    ${(props) => (props.variant === 'primary' ? colors.green : colors.white)};
+  color: ${colors.white};
+  border-radius: 8px;
+  background: ${(props) =>
+    props.variant === 'primary' ? colors.green : 'transparent'};
+  padding: 8px 16px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+`
+
+export const ButtonLink = styled(Link)`
+  border: 2px solid ${colors.white};
+  color: ${colors.white};
+  border-radius: 8px;
+  background: transparent;
+  padding: 8px 16px;
+  font-size: 16px;
+  font-weight: bold;
+`
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -0,0 +1,15 @@
+import { Container } from './style'
+
+type Props = {
+  children: JSX.Element
+  title: string
+}
+
+export const Card = ({ children, title }: Props) => {
+  return (
+    <Container>
+      <h2>{title}</h2>
+      {children}
+    </Container>
+  )
+}
diff --git a/src/components/Card/style.ts b/src/components/Card/style.ts
@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+import { colors } from '../../styles'
+
+export const Container = styled.div`
+  border-radius: 8px;
+  background-color: ${colors.gray};
+  padding: 24px;
+  margin-bottom: 40px;
+
+  h2,
+  h3 {
+    font-size: 18px;
+    font-weight: 700;
+    color: ${colors.white};
+    margin-bottom: 24px;
+  }
+
+  h3 {
+    margin-top: 24px;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .margin-top {
+    margin-top: 16px;
+  }
+`