Updates code and readme

.eslintrc.js

@@ -24,5 +24,9 @@ module.exports = {
     'import/no-unresolved': 0,
     camelcase: 0,
     'prettier/prettier': 0,
+    'no-use-before-define': 0,
+    'import/prefer-default-export': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
   },
 };

.gitignore

@@ -34,3 +34,4 @@ firebase.json
 /storybook-static
 
 yarn.lock
+.eslintcache

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="src\assets\img\transparentBanner.png" width="70%"/>
+  <img src="src\assets\img\transparentBanner.png" width="50%"/>
 </p>
 
 <br>
@@ -18,27 +18,26 @@
   <a href="#project-star2">Project</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#techs-rocket">Techs</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#installation-wrench">Installation</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-  <a href="#test-heavy_check_mark">Test</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#start-on">Start</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#contributing-">Contributing</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
   <a href="#license-memo">License</a>
 </p>
 
 ##
 
-<br>
-
 <p align="center">
   <img src="src\assets\img\banner.png"/>
 </p>
 
+<br>
 
 ## Project :star2:
 
 This repo contains an UI clone from Tesla homepage.
 
 <br>
 
-Deployed [here](https://tesla-homepage-ui-clone.web.app/).
+Deployed [here](https://tesla.ui-clone.ronne.dev/).
 
 <br>
 
@@ -58,17 +57,20 @@ Deployed [here](https://tesla-homepage-ui-clone.web.app/).
 
 - [x] [ReactJS](https://reactjs.org);
 - [x] [TypeScript](https://www.typescriptlang.org/);
+- [x] [Framer Motion](https://www.framer.com/motion/);
 - [x] [Styled Components](https://styled-components.com/).
 
 <br>
 
 ## Installation :wrench:
 
+First you need to clone the project using `git clone https://github.com/leoronne/tesla-homepage-ui-clone.git`.
+
 You can install the application using `npm install` or `yarn install` on the root dir.
 
 <br>
 
-## Test :heavy_check_mark:
+## Start :on:
 
 To start the application interface just run `npm start` or `yarn start` on the root dir.
 

package.json

@@ -1,26 +1,28 @@
 {
   "name": "tesla-homepage-ui-clone",
+  "description": "This app contains an UI clone (partial) from Tesla Homepage website",
   "version": "1.0.0",
+  "main": "index.tsx",
   "repository": "https://github.com/leoronne/tesla-homepage-ui-clone",
-  "author": "Leonardo Ronne",
-  "description": "This app contains an UI clone (partial) from Tesla Homepage website",
+  "author": "Leonardo Ronne <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@material-ui/core": "^4.11.2",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
+    "@types/jest": "^26.0.19",
+    "@types/node": "^14.14.14",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "clsx": "^1.1.1",
-    "framer-motion": "^2.7.6",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.3",
-    "styled-components": "^5.2.0",
-    "typescript": "~3.7.2"
+    "framer-motion": "^3.1.1",
+    "react": "^17.0.1",
+    "react-cookie-consent": "^6.2.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "^4.0.1",
+    "styled-components": "^5.2.1",
+    "typescript": "^4.1.3"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -45,24 +47,24 @@
   },
   "devDependencies": {
     "@types/react-icons": "^3.0.0",
-    "@types/react-router-dom": "^5.1.5",
-    "@types/styled-components": "^5.1.3",
-    "@typescript-eslint/eslint-plugin": "^4.3.0",
-    "@typescript-eslint/parser": "^3.6.0",
+    "@types/react-router-dom": "^5.1.6",
+    "@types/styled-components": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^4.11.0",
+    "@typescript-eslint/parser": "^4.11.0",
     "babel-eslint": "^10.0.3",
-    "babel-plugin-root-import": "^6.4.1",
-    "customize-cra": "^0.9.1",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.11.0",
+    "babel-plugin-root-import": "^6.6.0",
+    "customize-cra": "^1.0.0",
+    "eslint": "^7.16.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-import-helpers": "^1.0.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "prettier": "^2.0.5",
-    "react-app-rewired": "^2.1.6"
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.2.1",
+    "react-app-rewired": "^2.1.8"
   }
 }

public/index.html

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="manifest" href="./manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link
       href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=DM+Sans:wght@400;500;700&family=Didact+Gothic&family=Josefin+Sans:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+    <link rel="shortcut icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
 
     <meta name="language" content="EN" />
 
@@ -16,13 +16,13 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="#e82127" />
     <meta name="msapplication-navbutton-color" content="#e82127" />
 
-    <meta name="msapplication-TileImage" content="./logo512.png" />
+    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/logo512.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
-    <meta name="description" content="This app contains an UI clone (partial) from Tesla Homepage website" />
-    <meta name="subject" content=" UI clone from Tesla Homepage" />
+    <meta name="description" content="This application contains an UI clone (partial) from Tesla Homepage website" />
+    <meta name="subject" content=" This is an UI clone from Tesla Homepage" />
 
-    <meta name="keywords" content="Tesla, Tesla UI Clone, Leonardo Ronne, Next Level Weel, NLW, OmniStack, Rocketseat, UI Clone, Reactjs, Nodejs, TypeScript, Styled Components" />
+    <meta name="keywords" content="Tesla, Tesla UI Clone, Leonardo Ronne, Next Level Week, NLW, OmniStack, Rocketseat, UI Clone, Reactjs, Nodejs, TypeScript, Styled Components" />
 
     <meta name="author" content="Leonardo Ronne, [email protected]" />
     <meta name="owner" content="Leonardo Ronne" />
@@ -31,8 +31,8 @@
     <meta name="designer" content="Leonardo Ronne" />
     <meta name="copyright" content="Leonardo Ronne" />
 
-    <meta name="url" content="https://tesla-homepage-ui-clone.web.app" />
-    <meta name="identifier-URL" content="https://tesla-homepage-ui-clone.web.app" />
+    <meta name="url" content="https://tesla.ui-clone.ronne.dev" />
+    <meta name="identifier-URL" content="https://tesla.ui-clone.ronne.dev" />
 
     <meta name="robots" content="index,follow" />
     <meta name="googlebot" content="index,follow" />

public/locales/en/translation.json

@@ -0,0 +1,35 @@
+{
+  "custom-order": "Custom Order",
+  "existing-inventory": "Existing Inventory",
+  "learn-more": "Learn More",
+  "order-now": "Order Now",
+  "shop-now": "Shop Now",
+  "shop": "Shop",
+  "tesla-account": "Tesla Account",
+  "solar-panels": "Solar Panels",
+  "model-s": "Model S",
+  "model-3": "Model 3",
+  "model-x": "Model X",
+  "model-y": "Model Y",
+  "solar-roof": "Solar Roof",
+  "order-online": "Order Online for",
+  "touchless-delivery": "Touchless Delivery",
+  "solar-new-roofs": "Solar for New Roofs",
+  "solar-existing-roofs": "Only $1.49/Watt for Solar on Existing Roofs",
+  "accessories": "Accessories",
+  "lowest-costs-america": "Lowest Cost in America - Money-back guarantee",
+  "solar-roof-costs": "Solar Roof Costs Less Than a New Roof Plus Solar Panels",
+
+  "used-inventory": "USED INVENTORY",
+  "trade-in": "TRADE-IN",
+  "cybertruck": "CYBERTRUCK",
+  "roadster": "ROADSTER",
+  "semi": "SEMI",
+  "powerwall": "POWERWALL",
+  "commercial-solar": "COMMERCIAL SOLAR",
+  "test-drive": "TEST DRIVE",
+  "charging": "CHARGING",
+  "find-us": "FIND US",
+  "support": "SUPPORT",
+  "united-states": "UNITED STATES"
+}

public/manifest.json

@@ -7,7 +7,7 @@
     "name": "Leonardo Ronne",
     "url": "https://github.com/leoronne"
   },
-  "homepage_url": "https://tesla-homepage-ui-clone.web.app",
+  "homepage_url": "https://tesla.ui-clone.ronne.dev",
   "icons": [
     {
       "src": "favicon.ico",
@@ -28,6 +28,11 @@
       "src": "logo512.png",
       "type": "image/png",
       "sizes": "512x512"
+    },
+    {
+      "src": "logo1024.png",
+      "type": "image/png",
+      "sizes": "1024x1024"
     }
   ],
   "start_url": "/",

src/components/LoaderSpinner/index.tsx

@@ -3,10 +3,10 @@ import { CircularProgress } from '@material-ui/core';
 
 import { Container } from './styles';
 
-const Loader: React.FC = () => {
+const Loader: React.FC<{ color: string }> = ({ color = '#e82127' }) => {
   return (
     <Container className="loader-container">
-      <CircularProgress size={15} style={{ color: '#e82127' }} />
+      <CircularProgress size={15} style={{ color }} />
     </Container>
   );
 };

src/components/UniqueOverlay/Header/Drawer/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { BurgerSVG, CloseSVG } from '../../IconSVG';
+import { BurgerSVG, CloseSVG } from '../../../../styles/Icons';
 
 export const Burger = styled(BurgerSVG)`
   width: 24px;

src/components/UniqueOverlay/Header/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { LogoSVG, GitHubSVG } from '../IconSVG';
+import { LogoSVG, GitHubSVG } from '../../../styles/Icons';
 
 export const Container = styled.header`
   position: fixed;

src/components/index.ts

@@ -0,0 +1 @@
+export { default as LoaderSpinner } from './LoaderSpinner';

src/index.tsx

@@ -1,19 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import LoaderSpinner from './components/LoaderSpinner';
+import { LoaderSpinner } from './components';
 
 import App from './App';
 
-import * as serviceWorker from './serviceWorker';
-
 ReactDOM.render(
-  <React.Suspense fallback={<LoaderSpinner />}>
+  <React.Suspense fallback={<LoaderSpinner color="#e82127" />}>
     <React.StrictMode>
       <App />
     </React.StrictMode>
   </React.Suspense>,
   document.getElementById('root')
 );
-
-serviceWorker.unregister();