Technigo · YlvaKarlsson · Apr 4, 2023 · Apr 4, 2023 · Apr 4, 2023 · Apr 6, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -42,6 +42,10 @@
         "allowSingleLine": true
       }
     ],
+    "linebreak-style":[
+      "off",
+      "unix"
+    ],
     "comma-dangle": [
       "error",
       "never"

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,14 +4,20 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
+    "styled-components": "^5.3.9"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,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>Technigo 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&family=Roboto+Condensed:ital,wght@1,400;1,700&display=swap" rel="stylesheet">
+    <title>4+2 FIT - Collab-W9</title>
   </head>
 
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,40 @@
-import React from 'react'
+import React from 'react';
+import GlobalStyles from 'styles/Global';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { Hero } from 'components/Hero/Hero';
+import { ThemeProvider } from 'styled-components';
+import { TheBenefits } from 'components/TheBenefits/TheBenefits';
+import { SpeakToTheGoals } from 'components/SpeakToTheGoals/SpeakToTheGoals';
+import Footer from './components/Footer';
+
+const theme = {
+  colors: {
+    header: '#ebfbff',
+    body: '#fff',
+    footer: '#00333'
+  },
+  primaryButton: {
+    bg: '#F35408',
+    outline: 'none'
+  }
+}
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <ThemeProvider theme={theme}>
+      <GlobalStyles />
+      <Router>
+        <Hero />
+        <Routes>
+          <Route path="/" />
+          <Route path="/products" />
+          <Route path="/contact" />
+          <Route path="/about" />
+        </Routes>
+        <TheBenefits />
+        <SpeakToTheGoals />
+        <Footer />
+      </Router>
+    </ThemeProvider>
   )
 }
diff --git a/src/assets/cards/active-walks.png b/src/assets/cards/active-walks.png
diff --git a/src/assets/cards/app-view.png b/src/assets/cards/app-view.png
diff --git a/src/assets/cards/balance.png b/src/assets/cards/balance.png
diff --git a/src/assets/cards/ball-games.png b/src/assets/cards/ball-games.png
diff --git a/src/assets/cards/run.png b/src/assets/cards/run.png
diff --git a/src/assets/cards/swim.png b/src/assets/cards/swim.png
diff --git a/src/assets/cards/yoga.png b/src/assets/cards/yoga.png
diff --git a/src/assets/images/header-bg-yogadog.png b/src/assets/images/header-bg-yogadog.png
diff --git a/src/assets/images/pawprint.svg b/src/assets/images/pawprint.svg