Technigo · JohLeo · Apr 4, 2023 · Apr 6, 2023 · Apr 6, 2023 · Apr 6, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,16 @@
 # Design Handoff
 
-Replace this readme with your own information about your project.
+Week 9. This project involved buliding a landing page with React components and incorporating a given design from UX design students @Technigo. The design was given to us through a hand-off through demo and Figma file.
+The brief was to build with React, preferably Styled Components, use reusaable components and finish it of as close as possible to the design.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## The problem
+Such a rewarding and fun week!  I created a sketch on what components i needed and how they could be used regarding weather my designer wanted it to be shown on different screen sizes and if it could be reusable. I also acknowledged the bigger challenges and started with the basic structure first.
 
-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?
+I used npm packages for my carousels and struggled a bit with overriding it's built in styling-properties at first. Indeed challenging but revarding to learn!
+
+The project was handed to us on tuesday and due to Easter holidays there where som limitations on time for this week. I ended up with leaving the hamburger menu slightly unfinished and should evolve the accessibilty if I had more time.
 
 ## 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.
+https://ux-handoff-poweryoga.netlify.app
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,9 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-awesome-slider": "^4.1.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.9"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/img/adress.png b/public/img/adress.png
diff --git a/public/img/adress192x185.png b/public/img/adress192x185.png
diff --git a/public/img/person1.png b/public/img/person1.png
diff --git a/public/img/person2.png b/public/img/person2.png
diff --git a/public/img/person3.png b/public/img/person3.png
diff --git a/public/img/yoga-1.png b/public/img/yoga-1.png
diff --git a/public/img/yoga-2.png b/public/img/yoga-2.png
diff --git a/public/img/yoga-3.png b/public/img/yoga-3.png
diff --git a/public/img/yoga1515x982.jpg b/public/img/yoga1515x982.jpg
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,11 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./logo/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./logo/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./logo/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <script src="https://kit.fontawesome.com/e51eabe7f5.js" crossorigin="anonymous"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -13,7 +18,7 @@
       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>
+    <title>Santulan Power Yoga Sthlm</title>
   </head>
 
   <body>

diff --git a/public/logo/Logo.svg b/public/logo/Logo.svg
diff --git a/public/logo/LogoBlk.png b/public/logo/LogoBlk.png
diff --git a/public/logo/android-chrome-192x192.png b/public/logo/android-chrome-192x192.png
diff --git a/public/logo/android-chrome-512x512.png b/public/logo/android-chrome-512x512.png
diff --git a/public/logo/apple-touch-icon.png b/public/logo/apple-touch-icon.png
diff --git a/public/logo/favicon-16x16.png b/public/logo/favicon-16x16.png
diff --git a/public/logo/favicon-32x32.png b/public/logo/favicon-32x32.png
diff --git a/public/logo/favicon.ico b/public/logo/favicon.ico
diff --git a/public/logo/site.webmanifest b/public/logo/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,26 @@
-import React from 'react'
+import React from 'react';
+import { Header } from 'components/Header/Header';
+import { PowYoga } from './components/Infotainer/PowerYoga';
+import { Classes } from './components/Classes/Classes';
+import { SpyStudio } from './components/Infotainer/Spys';
+import { Adress } from './components/Infotainer/Adress';
+import { SignReview } from './components/SignUp/SignReview';
+import { Foot } from './components/Footer/Footer';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  )
+    <>
+      <header className="start-cont">
+        <Header />
+      </header>
+      <main>
+        <PowYoga />
+        <Classes />
+        <SpyStudio />
+        <Adress />
+        <SignReview />
+      </main>
+      <Foot />
+    </>
+  );
 }
diff --git a/src/components/Buttons.js b/src/components/Buttons.js
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const StyledSignBtn = styled.button`
+    width: 15rem;
+    height: 2.4rem;
+    font-size: 18px;
+    font-weight: 600;
+    color: #000;
+    background-color: #FF9F0A;
+    border-radius: 15px;
+    border: none;
+    margin-top: 30px;
+    margin-bottom: 10px;
+    cursor: pointer;
+`
+
+const StyledClassBtn = styled.button`
+    width: 15rem;
+    height: 2.4rem;
+    font-size: 15px;
+    font-weight: 500;
+    color: #fff;
+    background-color: ${({ clicked }) => {
+    return clicked ? '#66A1AE' : '#888585';
+  }};
+    border-radius: 15px;
+    border: none;
+    margin: 0 0 8px 0 ;
+    cursor: pointer;
+`
+
+export const SignUpBtn = () => {
+  return (
+    <StyledSignBtn type="button">Sign up for a class</StyledSignBtn>
+  )
+}
+
+export const ClassBtn = () => {
+  const [clicked1, setClicked1] = useState(false);
+  const [clicked2, setClicked2] = useState(false);
+  const [clicked3, setClicked3] = useState(false);
+
+  const handleClick1 = () => {
+    setClicked1(!clicked1);
+  };
+  const handleClick2 = () => {
+    setClicked2(!clicked2);
+  };
+  const handleClick3 = () => {
+    setClicked3(!clicked3);
+  };
+  return (
+    <>
+      <StyledClassBtn type="button" clicked={clicked1} onClick={handleClick1}>Power Yoga 60</StyledClassBtn>
+      <StyledClassBtn type="button" clicked={clicked2} onClick={handleClick2}>Power Yoga 75</StyledClassBtn>
+      <StyledClassBtn type="button" clicked={clicked3} onClick={handleClick3}>Yoga Strong</StyledClassBtn>
+    </>
+  )
+}
diff --git a/src/components/Classes/ClassCard.js b/src/components/Classes/ClassCard.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import AwesomeSlider from 'react-awesome-slider';
+import 'react-awesome-slider/dist/styles.css';
+
+const YogaDesk = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 28px;
+    justify-content: center;
+    text-align: center;
+    margin-bottom: 2rem;
+
+    h3 {
+        margin-bottom: 8px;
+    }
+
+    @media (max-width: 895px) {
+    display: none;
+    }
+`
+
+export const Slider = () => {
+  return (
+    <>
+      <section className="yoga-container">
+        <AwesomeSlider bullets={false}>
+          <div className="yoga-card">
+            <h3>Power Yoga 60</h3>
+            <img src="./img/yoga-1.png" alt="Power Yoga 60" />
+          </div>
+
+          <div className="yoga-card">
+            <h3>Power Yoga 75</h3>
+            <img src="./img/yoga-2.png" alt="Power Yoga 75" />
+          </div>
+
+          <div className="yoga-card">
+            <h3>Yoga Strong</h3>
+            <img src="./img/yoga-3.png" alt="Yoga Strong" />
+          </div>
+        </AwesomeSlider>
+      </section>
+      <YogaDesk>
+        <div className="yoga-card">
+          <h3>Power Yoga 60</h3>
+          <img src="./img/yoga-1.png" alt="Power Yoga 60" />
+        </div>
+
+        <div className="yoga-card">
+          <h3>Power Yoga 75</h3>
+          <img src="./img/yoga-2.png" alt="Power Yoga 75" />
+        </div>
+
+        <div className="yoga-card">
+          <h3>Yoga Strong</h3>
+          <img src="./img/yoga-3.png" alt="Yoga Strong" />
+        </div>
+      </YogaDesk>
+    </>
+  );
+}
diff --git a/src/components/Classes/Classes.js b/src/components/Classes/Classes.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Slider } from './ClassCard'
+import './classes.css';
+
+const ArrowDown = styled.i`
+    margin-left: 1rem;
+    padding-top: 6px;
+
+    i {
+      color: #FF9F0A;
+      font-size: 20px;
+    }
+`
+
+export const Classes = () => {
+  return (
+    <>
+      <div className="classes-container">
+        <h4>Our Classes</h4>
+        <ArrowDown>
+          <i className="fa-sharp fa-solid fa-chevron-down" />
+        </ArrowDown>
+      </div>
+
+      <Slider />
+
+    </>
+  )
+}
diff --git a/src/components/Classes/classes.css b/src/components/Classes/classes.css
@@ -0,0 +1,66 @@
+.classes-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 16px 0 16px 0;
+}
+
+.yoga-container{
+  height: 45vh;
+}
+
+.yoga-container h3{
+  padding-bottom: 8px;
+  text-align: center;
+}
+
+.yoga-card img {
+width: 200px;
+height: 200px;
+}
+
+.awssld__content {
+background-color: transparent;
+}
+
+.awssld {
+height: 100%;
+--organic-arrow-thickness: 3px;
+--organic-arrow-height: 13px;
+--slider-height-percentage: 60%;
+--loader-bar-color: #fff;
+--loader-bar-height: 1px;
+--organic-arrow-color: #000;
+}
+
+.awssld__controls {
+  visibility: visible;
+}
+
+.awssld__controls__arrow-left {
+  right: -100%;
+}
+
+.awssld__controls__arrow-right {
+ left: -100%;
+}
+
+@media (min-width: 670px) {
+  .yoga-container{
+    height: 35vh;
+  }
+
+  .awssld__controls__arrow-left {
+    right: -290%;
+  }
+
+  .awssld__controls__arrow-right {
+   left: -290%;
+  }
+}
+
+@media (min-width: 895px) {
+  .yoga-container{
+    display: none;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}