Technigo · El1an3 · Apr 20, 2024 · Apr 20, 2024 · Apr 20, 2024 · Apr 20, 2024
diff --git a/README.md b/README.md
@@ -10,32 +10,21 @@ rm -rf .git
 
 # Design Handoff Project
 
-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.
+This weeks assignment was to work with a designer from the UX bootcamp. We were asked to follow their design and should either use styled components or tailwind css instead of vanilla css to style the project.
 
 ## Getting Started with the Project
 
-### Dependency Installation & Startup Development Server
-
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-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.
+I started by setting up the basic components and reusable components for the project.
+Then I set up and styled the first components starting with the easier ones like the quote or the about part. This made it easier for me to get used to the styled components approach.
 
-```bash
-npm i && code . && npm run dev
-```
+I finished the membership part last -> it's a carousel in mobile and 3 cards next to each other in tablet/desktop.
+My approach seems to be super complicated. I tried to find an easier way, but no success yet.
+Also have to look at the buttons again. It works, but seems to be too complicated. Problem: I defined the sizes with media queries. But the membership part needed a new logic... 😅 Small buttons on tablet size.
 
 ### 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?
+Used styled components and slick for the carousels.
 
 ### 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.
-
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://shanti-studio.netlify.app/
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Music Releases - Project - Week 5</title>
+    <title>Shanti Studio</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -11,12 +11,17 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
+    "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/icons/arrow-left.png b/public/icons/arrow-left.png
diff --git a/public/icons/arrow-right.png b/public/icons/arrow-right.png
diff --git a/public/icons/dropdown.svg b/public/icons/dropdown.svg
diff --git a/public/icons/facebook.png b/public/icons/facebook.png
diff --git a/public/icons/globe.svg b/public/icons/globe.svg
diff --git a/public/icons/instagram.png b/public/icons/instagram.png
diff --git a/public/icons/location.png b/public/icons/location.png
diff --git a/public/icons/location.svg b/public/icons/location.svg
diff --git a/public/icons/youtube.png b/public/icons/youtube.png
diff --git a/public/images/cartwheel.png b/public/images/cartwheel.png
diff --git a/public/images/cobrapose2.png b/public/images/cobrapose2.png
diff --git a/public/images/element.svg b/public/images/element.svg
diff --git a/public/images/gradient.jpg b/public/images/gradient.jpg
diff --git a/public/images/lotus.png b/public/images/lotus.png
diff --git a/public/images/rocks.png b/public/images/rocks.png
diff --git a/public/images/stretching2.png b/public/images/stretching2.png
diff --git a/public/images/sunset.jpg b/public/images/sunset.jpg
diff --git a/public/images/teacher-black2.png b/public/images/teacher-black2.png
diff --git a/public/images/teacher-grey2.png b/public/images/teacher-grey2.png
diff --git a/public/images/teacher-white2.png b/public/images/teacher-white2.png
diff --git a/public/logo/primary-big.png b/public/logo/primary-big.png
diff --git a/public/logo/primary-small.png b/public/logo/primary-small.png
diff --git a/public/logo/secondary-big.png b/public/logo/secondary-big.png
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,59 @@
+/* basic css */
+
+/* import fonts */
+/* Poppins (from google fonts) */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
+
+/*Argue (download)*/
+@font-face {
+  font-family: "Argue";
+  src: local("Argue"), url("./fonts/Argue.otf") format("opentype");
+}
+
+/*Gerbera (download)*/
+@font-face {
+  font-family: "Gerbera";
+  src: local("Gerbera-Bold"), url("./fonts/Gerbera-Bold.otf") format("opentype");
+}
+
+/* create variables for colours */
+:root {
+  --primary-blk: #111111;
+  --primary-grey: #505050;
+  --primary-prpl: #620981;
+  --primary-white: #ffffff;
+  --hover-prpl: #430159;
+  --secondary-blue: rgba(213, 224, 252, 0.5);
+  /* 50% transparent */
+}
+
+/* basics */
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: Poppins, sans-serif;
+  font-weight: 400;
+  color: var(--primary-blk);
+}
+
+body {
+  background-image: url("../public/images/gradient.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  /* height: 100vh; */
+}
+
+/* overriding slick formatting, couldn't find any other way 😅*/
+.slick-initialized .slick-slide {
+  display: grid;
+  justify-content: center;
+}
+
+.slick-dots li button:before {
+  color: var(--primary-prpl);
+}
+.slick-dots li.slick-active button:before {
+  color: var(--primary-white);
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,33 @@
+//components
+import { Happenings } from "./components/Happenings";
+import { Header } from "./components/Header";
+import { About } from "./components/About";
+import { Philosophy } from "./components/Philosophy";
+import { Membership } from "./components/Membership";
+import { Yogis } from "./components/Yogis";
+import { Quote } from "./components/Quote";
+import { FAQ } from "./components/FAQ";
+import { Form } from "./components/Form";
+import { Footer } from "./components/Footer";
+import { Navigation } from "./components/Navigation";
+
+//stylesheet
+import "./App.css";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <>
+      <Navigation />
+      <Header />
+      <About />
+      <Philosophy />
+      <Yogis />
+      <Happenings />
+      <Membership />
+      <Quote />
+      <FAQ />
+      <Form />
+      <Footer />
+    </>
+  );
 };
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -0,0 +1,103 @@
+//import styled
+import styled from "styled-components";
+
+//styles
+const AboutContainer = styled.section`
+  padding: 68px 16px;
+  background: var(--primary-white);
+
+  @media all and (min-width: 744px) {
+    padding: 44px 24px;
+  }
+
+  @media all and (min-width: 1024px) {
+    padding: 148px 124px;
+    display: flex;
+  }
+`;
+
+const AboutTitleWrapper = styled.div`
+  @media all and (min-width: 744px) {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 23px;
+  }
+  @media all and (min-width: 1024px) {
+    flex-direction: column;
+    padding-bottom: 0;
+  }
+`;
+
+const AboutTitle = styled.h1`
+  font-family: Argue;
+  font-size: 48px;
+  color: var(--primary-prpl);
+  text-align: center;
+  padding-bottom: 9px;
+
+  @media all and (min-width: 744px) {
+    font-size: 40px;
+    padding-bottom: 0;
+  }
+
+  @media all and (min-width: 1024px) {
+    font-size: 112px;
+    text-align: left;
+    padding-right: 36px;
+  }
+`;
+
+const AboutSubtitle = styled.h1`
+  font-family: Argue;
+  font-size: 24px;
+  color: var(--primary-prpl);
+  text-align: center;
+
+  @media all and (min-width: 744px) {
+    font-size: 40px;
+  }
+
+  @media all and (min-width: 1024px) {
+    font-size: 64px;
+    text-align: left;
+    padding-bottom: 25px;
+  }
+`;
+
+const AboutText = styled.p`
+  font-size: 14px;
+  text-align: center;
+
+  @media all and (min-width: 1024px) {
+    font-size: 16px;
+    text-align: left;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 36px;
+    align-items: center;
+  }
+`;
+
+//component
+export const About = () => {
+  return (
+    <AboutContainer>
+      <AboutTitleWrapper>
+        <AboutSubtitle>About&#160;</AboutSubtitle>
+        <AboutTitle>SHANTI</AboutTitle>
+      </AboutTitleWrapper>
+      <AboutText>
+        <span>
+          Shanti believes in fostering inner peace and personal growth. Our
+          mission is to provide urban sanctuaries where individuals can connect,
+          explore, and find resilience.
+        </span>{" "}
+        <span>
+          Named after the Sanskrit word for &#34;peace&#34;, Shanti encapsulates
+          our commitment to fostering inner tranquility and empowerment among
+          our students.
+        </span>
+      </AboutText>
+    </AboutContainer>
+  );
+};