Developer test

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+      "next/babel"
+  ],
+  "plugins": [
+      [
+          "styled-components",
+          {
+              "ssr": true,
+              "displayName": true,
+              "preprocess": false
+          }
+      ]
+  ]
+}

.eslintrc.json

@@ -1,3 +1,29 @@
 {
-  "extends": "next/core-web-vitals"
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "next/core-web-vitals",
+        "airbnb"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-props-no-spreading": "off",
+      "no-return-await":"off",
+      "import/prefer-default-export":"off",
+      "react/jsx-no-bind":"off",
+      "react/jsx-no-constructed-context-values": "off",
+      "@next/next/no-img-element": "off"
+    }
 }

.gitignore

@@ -34,3 +34,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# development
+.editorconfig
+
+.vercel

next.config.js

@@ -2,6 +2,6 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -9,12 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "babel-plugin-styled-components": "^2.0.7",
     "next": "13.0.6",
+    "prop-types": "^15.8.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-elastic-carousel": "^0.11.5",
+    "react-switch": "^7.0.0",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
-    "eslint": "8.29.0",
-    "eslint-config-next": "13.0.6"
+    "eslint": "^7.32.0 || ^8.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-next": "13.0.6",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0"
   }
 }

src/assets/styles/GlobalStyles.js

@@ -0,0 +1,20 @@
+import { createGlobalStyle } from 'styled-components';
+
+export default createGlobalStyle`
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Sora', sans-serif;
+  }
+
+  body {
+    background-color: ${({ theme }) => theme.primaryColor};
+    color: ${({ theme }) => theme.tertiaryColor};
+  }
+
+  a{
+    text-decoration: none;
+    color:${({ theme }) => theme.tertiaryColor};
+  }
+`;

src/assets/styles/HeaderStyled.js

@@ -0,0 +1,193 @@
+import styled, { css } from 'styled-components';
+
+export const StyledHeader = styled.header`
+  background-color: ${({ theme }) => theme.primaryColor};
+  display: flex;
+  padding: 20px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  ${({ menuOpen }) => menuOpen && css`
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1;
+  `}
+
+  .nav-desktop {
+    display: none;
+
+    @media (min-width: 769px){
+      display: block;
+    }
+
+    ul {
+      display: flex;
+      flex-direction: row;
+      list-style: none;
+      gap: 26px;
+    }
+  }
+`;
+
+export const ContainerLogo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  ${({ menuOpen }) => menuOpen && css`
+    display: none;
+  `}
+
+  h1 {
+    color: ${({ theme }) => theme.secondaryColor};
+  }
+
+  @media (max-width: 470px) {
+    h1 {
+      font-size:26px;
+    }
+  }
+`;
+
+export const MenuMobile = styled.div`
+  position:  relative;
+  width: 100%;
+  display: none;
+  margin-bottom: 40px;
+  margin-right: 12px;
+
+  .icon {
+    position: absolute;
+    z-index: 4;
+    right: 10%;
+    height: 44px;
+    cursor: pointer;
+  }
+
+  .icon.iconActive .hamburguer {
+    background: transparent;
+    box-shadow: 0 2px 5px transparent;
+    margin-top: 15px;
+
+    ::after {
+      top: 0;
+      background-color: ${({ theme }) => theme.secondaryColor};
+      transform: rotate(225deg);
+      box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
+    }
+    ::before {
+      top: 0;
+      background-color: ${({ theme }) => theme.secondaryColor};
+      transform: rotate(135deg);
+      box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
+    }
+  }
+
+  .hamburguer {
+    top: 40%;
+    left: 10%;
+    width: 30px;
+    height: 6px;
+    background-color: ${({ theme }) => theme.secondaryColor};
+    position: absolute;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+
+    ::before {
+      top: -12px;
+      content: '';
+      position: absolute;
+      width: 37px;
+      height: 6px;
+      background-color: ${({ theme }) => theme.secondaryColor};
+      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+      transition: 0.5s;
+    }
+    ::after {
+      top: 12px;
+      content: '';
+      position: absolute;
+      width: 37px;
+      height: 6px;
+      background-color: ${({ theme }) => theme.secondaryColor};
+      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+      transition: 0.5s;
+    }
+  }
+
+  .menuOpen {
+    width: 100%;
+    height: 100vh;
+    box-shadow: 10px 0px 69px 0px rgba(0,0,0,0.59);
+  }
+
+  .menuClose {
+    display: none;
+    width: 0px;
+  }
+
+  .nav-mobile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  @media (max-width: 768px) {
+    display: block;
+  }
+
+  @media (max-width: 450px) {
+    .icon.iconActive .hamburguer {
+
+    ::after {
+      right: 10px;
+    }
+    ::before {
+      right: 10px;
+    }
+  }
+
+  .hamburguer {
+    width: 25px;
+    height: 4px;
+
+    ::before {
+      top: -10px;
+      width: 32px;
+      height: 4px;
+    }
+    ::after {
+      top: 10px;
+      width: 32px;
+      height: 4px;
+    }
+  }
+
+  }
+`;
+
+export const ListNavMenu = styled.ul`
+  display: flex;
+  flex-direction: column;
+  align-items:center;
+  justify-content: center;
+  gap: 48px;
+  list-style: none;
+  height: 100%;
+
+  li{
+    a{
+      padding: 10px 15px;
+      border-radius: 10px;
+      transition: 0.3s ease-in;
+      color:${({ theme }) => theme.textColor};
+      font-weight: bold;
+      font-size: 18px;
+
+      &:hover {
+        background-color: ${({ theme }) => theme.secondaryColor};
+        color: ${({ theme }) => theme.textColorHover};
+      }
+    }
+  }
+`;