Technigo · sofia32057 · Apr 20, 2024 · Apr 20, 2024 · Apr 20, 2024 · Apr 20, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -2,19 +2,20 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
+    "react/prop-types": "off",
   },
-}
+};
diff --git a/README.md b/README.md
@@ -4,35 +4,34 @@
   </a>
 </h1>
 
-### Remove git
+## Remove git
 
 rm -rf .git
 
 # Design Handoff Project
 
-Replace this readme with your own information about your project.
+## The Problem
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This week we're practicing working with a designer, by turning Catrine's design into a website.
 
-## Getting Started with the Project
+This is a collab project between [sofia32057] and [vittoriamatteoli], where we divided the components and built it async, while communicating throughout (devs, as well as designer). Any changes have been approved by Catrine and are documented by comments in Figma.
 
-### Dependency Installation & Startup Development Server
+We decided to use styled components and keep it as simlpe as possible, to focus on the design.
+Will go back and add global styling at a later point.
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
+### Requirements
 
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
+- The app should be built with React
+- Use one of these design libraries:
+  - Styled components
+  - Tailwind CSS
+- Your app should have reusable components
+- Make your app responsive (it should look good on devices from 320px width up to 1600px)
+- Your app should look as close as possible to the given design
 
-```bash
-npm i && code . && npm run dev
-```
+## View it live
 
-### The Problem
-
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
-
-### View it live
-
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+Thrive Fitness on Netilfy -> [https://thrive-fitness-gym.netlify.app/]
 
 ## Instructions
 

diff --git a/index.html b/index.html
@@ -2,9 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <script
+      src="https://kit.fontawesome.com/c38d857281.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="icon" type="image/svg+xml" href="/logo-favi.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Music Releases - Project - Week 5</title>
+    <title>Thrive Fitness Gym | Week 12 Collab Project</title>
+    <meta
+      name="description"
+      content="Technigo collaboration project between Web Development Bootcamp and UX Bootcamp spring 2024"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -11,12 +11,16 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router": "^6.22.3",
+    "react-router-dom": "^6.22.3",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",

diff --git a/public/CTAPic.png b/public/CTAPic.png
diff --git a/public/Close.png b/public/Close.png
diff --git a/public/Property 1=Deadlift.png b/public/Property 1=Deadlift.png
diff --git a/public/Property 1=Trophy.png b/public/Property 1=Trophy.png
diff --git a/public/desktop review stars.png b/public/desktop review stars.png
diff --git a/public/logo-favi.png b/public/logo-favi.png
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/mobile&tablet reviewstars.png b/public/mobile&tablet reviewstars.png
diff --git a/public/unsplash_Brooke-Cagle.jpg b/public/unsplash_Brooke-Cagle.jpg
diff --git a/public/unsplash_Gxr5vwk1V3k_Anna-Jakutajc-Wojtalik.jpg b/public/unsplash_Gxr5vwk1V3k_Anna-Jakutajc-Wojtalik.jpg
diff --git a/public/unsplash_oORcW5Uc0dM_Brooke-Cagle.jpg b/public/unsplash_oORcW5Uc0dM_Brooke-Cagle.jpg
diff --git a/public/unsplash_urOgICfIldY_Gett-images.jpg b/public/unsplash_urOgICfIldY_Gett-images.jpg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,15 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Home } from "./components/Home";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route
+          path="/"
+          element={<Home />}
+        />
+      </Routes>
+    </BrowserRouter>
+  );
 };
diff --git a/src/assets/Montserrat-VariableFont_wght.ttf b/src/assets/Montserrat-VariableFont_wght.ttf
diff --git a/src/assets/green-background.svg b/src/assets/green-background.svg
diff --git a/src/assets/logo-w-text.svg b/src/assets/logo-w-text.svg
diff --git a/src/assets/unsplash-Pd5bbWoIUis_tablet.jpg b/src/assets/unsplash-Pd5bbWoIUis_tablet.jpg
diff --git a/src/assets/unsplash_Pd5bbWoIUis_Tyler-Nix.jpg b/src/assets/unsplash_Pd5bbWoIUis_Tyler-Nix.jpg
diff --git a/src/assets/unsplash_profile_by-Gabriel-Silverio.jpeg b/src/assets/unsplash_profile_by-Gabriel-Silverio.jpeg
diff --git a/src/assets/unsplash_tpivPdQgC20_746.jpg b/src/assets/unsplash_tpivPdQgC20_746.jpg
diff --git a/src/components/Burger.jsx b/src/components/Burger.jsx
@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import styled from 'styled-components'
+import { NavMenu } from './NavMenu'
+
+const StyledBurger = styled.div`
+  padding: 40px 32px;
+  width: 2rem;
+  /* position: relative; */
+  top: 15px;
+  left: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 5px;
+  z-index: 20;
+  font-family: Optima;
+
+  section {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 32px;
+  }
+
+  div {
+    width: 2rem;
+    height: 3px;
+    background-color: var(--10);
+    border-radius: 10px;
+  }
+
+  img {
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    right: 32px;
+    top: 40px;
+  }
+  @media (min-width: 1024px) {
+    display: none;
+  }
+`
+
+export const Burger = () => {
+  const [open, setOpen] = useState(false) // Initialize open state as false
+  const toggleMenu = () => setOpen(!open) // Function to toggle the menu
+  return (
+    <>
+      <StyledBurger
+        onClick={toggleMenu}
+        aria-label="Toggle menu"
+        aria-expanded={open}
+      >
+        {open ? null : (
+          <>
+            <div />
+            <div />
+            <div />
+          </>
+        )}
+        {open ? (
+          <>
+            <img onClick={toggleMenu} src="/Close.png" alt="Close-button" />
+            <h2>MENU</h2>
+          </>
+        ) : null}
+      </StyledBurger>
+      <NavMenu open={open} />
+    </>
+  )
+}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -0,0 +1,132 @@
+/* eslint-disable react/prop-types */
+import styled, { css } from "styled-components";
+import { useState } from "react";
+
+const StyledButton = styled.button`
+  border-radius: 10px;
+  width: 70px;
+  height: 44px;
+  border: none;
+  color: var(--text);
+  font-family: Montserrat;
+  font-size: 16px;
+  line-height: 24px; /* 150% */
+  padding: 10px;
+  justify-self: ${({ $header }) => ($header ? "flex-end" : null)};
+
+  @media (min-width: 744px) and (max-width: 1024px) {
+    width: 112px;
+    height: 48px;
+    padding: 10px 30px;
+    font-size: 18px;
+    line-height: 28px; /* 155.556% */
+  }
+
+  @media (min-width: 1024px) {
+    width: 138px;
+    height: 52px;
+    /* padding: 10px 30px; */
+    font-size: 25px;
+    line-height: 32px; /* 128% */
+
+    &:hover {
+      background: var(--hover-login-links);
+    }
+  }
+  white-space: nowrap;
+  background: ${props =>
+    props.active ? props.theme.activeColor : props.theme.defaultBackground};
+
+  ${props =>
+    props.type === "green" &&
+    css`
+      padding: 10px;
+      background: ${props =>
+        props.active ? props.theme.activeGreenColor : "#465d4c"};
+      color: white;
+      width: 135px;
+      height: 44px;
+
+      @media (min-width: 744px) and (max-width: 1024px) {
+        width: 211px;
+        height: 48px;
+      }
+
+      @media (min-width: 1024px) {
+        width: 240px;
+        height: 52px;
+        padding: 10px 30px;
+        &:hover {
+          background: #2b4033;
+        }
+      }
+    `}
+
+  ${props =>
+    props.type === "white" &&
+    css`
+      background: white;
+      border: 1px solid
+        ${props => (props.active ? props.theme.activeBorderColor : "#465d4c")};
+      color: ${props =>
+        props.active ? props.theme.activeTextColor : "#465d4c"};
+      width: 135px;
+      height: 44px;
+      padding: 10px;
+
+      @media (min-width: 744px) and (max-width: 1024px) {
+        width: 211px;
+        height: 48px;
+      }
+
+      @media (min-width: 1024px) {
+        width: 240px;
+        height: 52px;
+        padding: 10px 30px;
+
+        &:hover {
+          color: #2b4033;
+          border: 1px solid #2b4033;
+          background: white;
+        }
+      }
+    `}
+`;
+
+export const Button = ({ type, $header }) => {
+  const [active, setActive] = useState(false);
+
+  const toggleActive = () => {
+    setActive(!active); // Toggle the active state on click
+  };
+  let buttonText = "";
+  switch (type) {
+    case "green":
+      buttonText = "Sign Up";
+      break;
+    case "white":
+      buttonText = "Book Meeting";
+      break;
+    default:
+      buttonText = "Login";
+  }
+  return (
+    <>
+      <StyledButton
+        type={type}
+        aria-pressed={active}
+        active={active}
+        onClick={toggleActive}
+        $header={$header}
+        theme={{
+          defaultBackground: "var(--10)",
+          activeColor: "var(--onclick-login)",
+          activeGreenColor: "var(--onclick-signup-book)",
+          activeBorderColor: "var(--onclick-signup-book)",
+          activeTextColor: "var(--onclick-signup-book)",
+        }}>
+        {buttonText}
+      </StyledButton>
+    </>
+  );
+};