Technigo · AntoniaGranit · Apr 4, 2023 · Apr 5, 2023 · Apr 5, 2023 · Apr 10, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # Design Handoff
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+A collaboration with Technigo's UX/UI Design bootcamp students. Our assigment was to turn a landing page for a fitness club (in my group's case, a power yoga studio) made in Figma into code, using React.
 
 ## 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?
+This week's new topic was styled components. I wanted to really get into the logic of them and understand why and when they can be useful. I styled the entire landing page with styled components only, and can say that I really enjoyed the process (though a bit complex at first) and will definitely keep using styled components.
 
 ## 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://santulanpoweryoga-antonia.netlify.app
+
+
+
+<img width="287" alt="santulanpoweryogascreenshot" src="https://user-images.githubusercontent.com/95037306/231260009-fe8bd727-b731-4820-98b3-51483c557923.png">
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,13 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "normalize.css": "^8.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-awesome-slider": "^4.1.0",
+    "react-dom": "^18.2.0",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
+    "styled-components": "^5.3.9"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,11 @@
       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</title>
+    <link rel="icon" type="image/png" href="../src/Assets/Icons/Favicon.png">
+    <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=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
   </head>
 
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,24 @@
 import React from 'react'
+import { Hero } from './Sections/Hero';
+import { PowerYogaInfo } from './Sections/PowerYogaInfo';
+import { Classes } from './Sections/Classes';
+import { Address } from './Sections/Address';
+import { SantulanInfo } from './Sections/SantulanInfo';
+import { Reviews } from './Sections/Reviews';
+import { SignupForm } from './Sections/SignupForm';
+import { Footer } from './Sections/Footer';
 
 export const App = () => {
   return (
     <div>
-      Find me in src/app.js!
+      <Hero />
+      <PowerYogaInfo />
+      <Classes />
+      <SantulanInfo />
+      <Address />
+      <Reviews />
+      <SignupForm />
+      <Footer />
     </div>
   )
 }
diff --git a/src/Assets/Icons/DesktopFacebook.svg b/src/Assets/Icons/DesktopFacebook.svg
diff --git a/src/Assets/Icons/DesktopInstagram.svg b/src/Assets/Icons/DesktopInstagram.svg
diff --git a/src/Assets/Icons/DesktopLinkedIn.svg b/src/Assets/Icons/DesktopLinkedIn.svg
diff --git a/src/Assets/Icons/DesktopTwitter.svg b/src/Assets/Icons/DesktopTwitter.svg
diff --git a/src/Assets/Icons/DownArrow.svg b/src/Assets/Icons/DownArrow.svg
diff --git a/src/Assets/Icons/Favicon.png b/src/Assets/Icons/Favicon.png
diff --git a/src/Assets/Icons/Hamburgermenu.svg b/src/Assets/Icons/Hamburgermenu.svg
diff --git a/src/Assets/Icons/Logo.svg b/src/Assets/Icons/Logo.svg
diff --git a/src/Assets/Icons/Logoandname.svg b/src/Assets/Icons/Logoandname.svg
diff --git a/src/Assets/Icons/RightArrow.svg b/src/Assets/Icons/RightArrow.svg
diff --git a/src/Assets/Icons/Search.svg b/src/Assets/Icons/Search.svg
diff --git a/src/Assets/Icons/Tablet/Facebook.svg b/src/Assets/Icons/Tablet/Facebook.svg
diff --git a/src/Assets/Icons/Tablet/Instagram.svg b/src/Assets/Icons/Tablet/Instagram.svg
diff --git a/src/Assets/Icons/Tablet/LinkedIn.svg b/src/Assets/Icons/Tablet/LinkedIn.svg
diff --git a/src/Assets/Icons/Tablet/Twitter.svg b/src/Assets/Icons/Tablet/Twitter.svg
diff --git a/src/Assets/Photos/HeroBackground.png b/src/Assets/Photos/HeroBackground.png
diff --git a/src/Assets/Photos/addressphoto.jpg b/src/Assets/Photos/addressphoto.jpg
diff --git a/src/Assets/Photos/poweryoga60.png b/src/Assets/Photos/poweryoga60.png
diff --git a/src/Assets/Photos/poweryoga75.png b/src/Assets/Photos/poweryoga75.png
diff --git a/src/Assets/Photos/reviewprofilepic1.png b/src/Assets/Photos/reviewprofilepic1.png
diff --git a/src/Assets/Photos/reviewprofilepic2.png b/src/Assets/Photos/reviewprofilepic2.png
diff --git a/src/Assets/Photos/reviewprofilepic3.png b/src/Assets/Photos/reviewprofilepic3.png
diff --git a/src/Assets/Photos/yogastrong.png b/src/Assets/Photos/yogastrong.png
diff --git a/src/Components/BrownSection.js b/src/Components/BrownSection.js
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const BrownSection = styled.section`
+    background-color: #2E160E;
+    margin: auto;
+    padding-top: 55px;
+    padding-bottom: 55px;
+    text-align: center;
+
+@media (max-width: 687px) {
+    display: none;
+}`
diff --git a/src/Components/CTAButton.js b/src/Components/CTAButton.js
@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+export const CTAButton = styled.button`
+font-family: Outfit;
+text-align: center;
+justify-content: center;
+font-size: 24px;
+font-weight: 600;
+background-color: #FF9F0A;
+color: black;
+padding: 14px 65px;
+border: none;
+border-radius: 20px;
+margin-bottom: 8px;
+cursor: pointer;
+
+:hover {
+    opacity: 80%;
+}
+
+@media (min-width: 1024px) {
+    padding: 14px 165px;
+}
+`
+
+export const CTAButtonSUF = styled.button`
+font-family: Outfit;
+text-align: center;
+justify-content: center;
+font-size: 24px;
+font-weight: 600;
+background-color: #FF9F0A;
+color: black;
+padding: 11px 65px;
+border: none;
+border-radius: 20px;
+margin-bottom: 8px;
+cursor: pointer;
+margin-top: 45px;
+`