Merge pull request React-Avancado#9 from Won-Games/develop

[Feature] Final Page

jsconfig.json

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
-    "baseUrl": "./src"
+    "baseUrl": "./src",
+    "paths": {
+      "@images/*": ["images/*"]
+    }
   }
 }

next.config.js

@@ -1,9 +1,18 @@
+const withPlugins = require('next-compose-plugins')
 const withPWA = require('next-pwa')
+const optimizedImages = require('next-optimized-images')
+
 const isProd = process.env.NODE_ENV === 'production'
 
-module.exports = withPWA({
-  pwa: {
-    dest: 'public',
-    disable: !isProd
-  }
-})
+module.exports = withPlugins([
+  [
+    withPWA,
+    {
+      pwa: {
+        dest: 'public',
+        disable: !isProd
+      }
+    }
+  ],
+  optimizedImages
+])

package.json

@@ -33,12 +33,21 @@
     "prettier": "^2.0.5"
   },
   "dependencies": {
+    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-optipng": "^8.0.0",
     "next": "^9.4.4",
+    "next-compose-plugins": "^2.2.0",
+    "next-optimized-images": "^2.6.1",
     "next-pwa": "^2.4.1",
+    "next-seo": "^4.5.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^3.10.0",
+    "react-mailchimp-subscribe": "^2.1.0",
+    "react-slick": "^0.26.1",
     "styled-components": "^5.1.1",
-    "styled-media-query": "^2.1.2"
+    "styled-media-query": "^2.1.2",
+    "webp-loader": "^0.6.0"
   }
 }

src/components/Analytics/index.js

@@ -4,6 +4,7 @@ const Analytics = () => (
   <>
     <script
       async
+      rel="dns-prefetch"
       src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING}`}
     />
     <script

src/components/Button/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import * as S from './styles'
+
+const Button = ({ children, wide, withPrice, href, onClick }) => (
+  <S.ButtonWrapper
+    href={href}
+    wide={wide}
+    withPrice={withPrice}
+    onClick={onClick}
+  >
+    {children}
+  </S.ButtonWrapper>
+)
+
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  href: PropTypes.string.isRequired,
+  wide: PropTypes.bool,
+  withPrice: PropTypes.bool,
+  onClick: PropTypes.func
+}
+
+export default Button

src/components/Button/styles.js

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components'
+import media from 'styled-media-query'
+
+const buttonModifiers = {
+  withPrice: (theme) => css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: ${theme.spacings.xsmall};
+  `,
+  wide: (theme) => css`
+    padding: 1.3rem ${theme.spacings.medium};
+
+    ${media.greaterThan('medium')`
+      padding: 1.3rem ${theme.spacings.large};
+    `}
+  `
+}
+
+export const ButtonWrapper = styled.a`
+  ${({ theme, wide, withPrice }) => css`
+    background: ${theme.colors.primary};
+    border-radius: ${theme.border.radius};
+    color: ${theme.colors.white};
+    font-size: ${theme.font.sizes.xsmall};
+    text-decoration: none;
+    text-align: center;
+    white-space: nowrap;
+    transition: background 0.3s ease-in-out;
+
+    &:hover {
+      background: ${theme.colors.primaryHover};
+    }
+
+    ${wide && buttonModifiers.wide(theme)};
+    ${withPrice && buttonModifiers.withPrice(theme)};
+  `}
+`

src/components/CardModule/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import * as S from './styles'
+
+const CardModule = ({ title, subTitle, children }) => (
+  <S.Card>
+    <S.TitleWrapper>
+      <S.Title>{title}</S.Title>
+      <S.SubTitle>{subTitle}</S.SubTitle>
+    </S.TitleWrapper>
+
+    <S.Content>{children}</S.Content>
+  </S.Card>
+)
+
+CardModule.propTypes = {
+  title: PropTypes.string.isRequired,
+  subTitle: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
+}
+
+export default CardModule

src/components/CardModule/styles.js

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components'
+
+export const Card = styled.article`
+  ${({ theme }) => css`
+    background-color: ${theme.colors.white};
+    padding: ${theme.spacings.medium};
+    color: ${theme.colors.black};
+    font-size: ${theme.font.sizes.xsmall};
+    border-radius: ${theme.border.radius};
+  `}
+`
+
+export const TitleWrapper = styled.div`
+  ${({ theme }) => css`
+    border-left: 6px solid ${theme.colors.primary};
+    padding-left: ${theme.spacings.xsmall};
+    margin-bottom: ${theme.spacings.xsmall};
+  `}
+`
+
+export const Title = styled.h2`
+  ${({ theme }) => css`
+    font-size: ${theme.font.sizes.medium};
+    font-weight: bold;
+  `}
+`
+
+export const SubTitle = styled.h3`
+  ${({ theme }) => css`
+    font-size: ${theme.font.sizes.xxsmall};
+    font-weight: normal;
+    color: ${theme.colors.gray};
+  `}
+`
+
+export const Content = styled.div`
+  ${({ theme }) => css`
+    p + p {
+      margin-top: ${theme.spacings.small};
+    }
+  `}
+`

src/components/Container/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import * as S from './styles'
+
+const Container = ({ children, id }) => (
+  <S.Container id={id}>{children}</S.Container>
+)
+
+Container.propTypes = {
+  children: PropTypes.node.isRequired,
+  id: PropTypes.string
+}
+
+export default Container

src/components/Container/styles.js

@@ -0,0 +1,14 @@
+import styled, { css } from 'styled-components'
+import media from 'styled-media-query'
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    max-width: ${theme.grid.container};
+    padding: ${theme.spacings.large} calc(${theme.grid.gutter} / 2);
+    margin: 0 auto;
+
+    ${media.greaterThan('medium')`
+      padding: ${theme.spacings.large} calc(${theme.grid.gutter} / 2);
+    `}
+  `}
+`

src/components/Footer/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Container from 'components/Container'
+
+import * as S from './styles'
+
+const Footer = () => (
+  <S.Wrapper>
+    <Container>
+      <p>
+        Desenvolvido por{' '}
+        <a href="https://willianjusten.com.br/">Willian Justen </a>e
+        <a href="https://guilouro.dev"> Guilherme Louro</a>
+      </p>
+      <p>
+        Design por <a href="http://vmarcosp.dribbble.com/">Marcos Oliveira</a>
+      </p>
+    </Container>
+  </S.Wrapper>
+)
+
+export default Footer

src/components/Footer/styles.js

@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components'
+import media from 'styled-media-query'
+
+export const Wrapper = styled.footer`
+  ${({ theme }) => css`
+    background: ${theme.colors.white};
+    color: ${theme.colors.gray};
+    text-align: center;
+    font-size: 1.3rem;
+    line-height: ${theme.font.sizes.xlarge};
+    position: relative;
+    z-index: 2;
+    margin-top: -${theme.spacings.medium};
+
+    ${media.greaterThan('medium')`
+      font-size: ${theme.font.sizes.small};
+      margin-top: -${theme.spacings.xxlarge};
+      padding-bottom: ${theme.spacings.large};
+    `}
+
+    a {
+      color: ${theme.colors.primary};
+      text-decoration: none;
+      border-bottom: 1px solid ${theme.colors.primary};
+    }
+  `}
+`

src/components/Heading/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import * as S from './styles'
+
+const Heading = ({ reverseColor, lineBottom, children }) => (
+  <S.Wrapper reverseColor={reverseColor} lineBottom={lineBottom}>
+    {children}
+  </S.Wrapper>
+)
+
+Heading.propTypes = {
+  reverseColor: false,
+  lineBottom: false
+}
+
+Heading.propTypes = {
+  reverseColor: PropTypes.bool,
+  lineBottom: PropTypes.bool,
+  children: PropTypes.string.isRequired
+}
+
+export default Heading

src/components/Heading/styles.js

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components'
+import media from 'styled-media-query'
+
+const wrapperModifiers = {
+  defaultColor: (theme) => css`
+    color: ${theme.colors.black};
+  `,
+
+  reverseColor: (theme) => css`
+    color: ${theme.colors.white};
+  `,
+
+  lineLeft: (theme) => css`
+    border-left: 7px solid ${theme.colors.secondary};
+  `,
+
+  lineBottom: (theme) => css`
+    padding-left: 0;
+    position: relative;
+    margin-bottom: ${theme.spacings.medium};
+    &::after {
+      content: ' ';
+      border-bottom: 5px solid ${theme.colors.primary};
+      width: 5rem;
+      position: absolute;
+      left: 0;
+      bottom: -1rem;
+    }
+  `
+}
+
+export const Wrapper = styled.h2`
+  ${({ theme, reverseColor, lineBottom }) => css`
+    padding-left: 1rem;
+    font-size: ${theme.font.sizes.medium};
+
+    ${media.greaterThan('medium')`
+      font-size: ${theme.font.sizes.large};
+    `}
+
+    ${!reverseColor && wrapperModifiers.defaultColor(theme)};
+    ${reverseColor && wrapperModifiers.reverseColor(theme)};
+
+    ${lineBottom && wrapperModifiers.lineBottom(theme)};
+    ${!lineBottom && wrapperModifiers.lineLeft(theme)};
+  `}
+`