Technigo · viktoria-olo · Apr 23, 2024 · Apr 23, 2024 · Apr 24, 2024 · Apr 24, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/README.md b/README.md
@@ -4,35 +4,17 @@
   </a>
 </h1>
 
-### Remove git
-
-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.
-
-## 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.
-
-```bash
-npm i && code . && npm run dev
-```
+For this week's assignment we were given a design by one of the UX-design students. The task was to realise the design in code and style it using either Tailwind CSS or Styled Components. Our design was by Mandana Amiri. 
 
 ### 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?
+We first created a sketch of the component layout using Figma. We decided to use Tailwind CSS for styling. Any questions about the design that arose duing the project were brought up with the designer, who was very helpful during the whole process. 
 
 ### 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://oasis-wellness-center.netlify.app/
 
 ## Instructions
 

diff --git a/index.html b/index.html
@@ -1,12 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <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=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <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=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Music Releases - Project - Week 5</title>
+    <title>Oasis Wellness Center</title>
   </head>
-  <body>
+  <body class="border-box m-0">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

diff --git a/package.json b/package.json
@@ -11,16 +11,22 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "tailwindcss": "^3.4.3",
     "vite": "^4.4.5"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/farm_to_table.svg b/public/farm_to_table.svg
diff --git a/public/gabriel_stone.svg b/public/gabriel_stone.svg
diff --git a/public/header_image.svg b/public/header_image.svg
diff --git a/public/herbal_medicine.svg b/public/herbal_medicine.svg
diff --git a/public/icons/arrow_l.svg b/public/icons/arrow_l.svg
diff --git a/public/icons/burger_l.png b/public/icons/burger_l.png
diff --git a/public/icons/facebook_l.svg b/public/icons/facebook_l.svg
diff --git a/public/icons/instagram_l.svg b/public/icons/instagram_l.svg
diff --git a/public/icons/logo_l.svg b/public/icons/logo_l.svg
diff --git a/public/icons/twitter_l.svg b/public/icons/twitter_l.svg
diff --git a/public/icons/whatsapp_l.svg b/public/icons/whatsapp_l.svg
diff --git a/public/mindful_cooking.svg b/public/mindful_cooking.svg
diff --git a/public/nature_walks.svg b/public/nature_walks.svg
diff --git a/public/serenity_rose.svg b/public/serenity_rose.svg
diff --git a/public/stargazing.svg b/public/stargazing.svg
diff --git a/public/sustainability_workshop.svg b/public/sustainability_workshop.svg
diff --git a/public/willow_greenforest.svg b/public/willow_greenforest.svg
diff --git a/pull_request_template.md b/pull_request_template.md
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,5 @@
+import { Home } from "./components/Home";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return <Home />;
 };
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -0,0 +1,10 @@
+export const Button = ({ icon, altText, btnText }) => {
+  return (
+    <button className="flex items-center gap-2 rounded-button border-2 border-b-4 border-yellow bg-yellowMedium px-4 py-2.5 font-heading shadow-darker hover:border-black hover:border-opacity-40 hover:bg-yellow md:py-6 lg:px-12">
+      <p className="text-sm leading-5 text-blueDeep md:text-lg md:leading-6 lg:text-2xl">
+        {btnText}
+      </p>
+      {icon && <img className="h-2 md:h-4 lg:h-6" src={icon} alt={altText} />}
+    </button>
+  );
+};
diff --git a/src/components/CoachCard.jsx b/src/components/CoachCard.jsx
@@ -0,0 +1,24 @@
+export const CoachCard = ({ coach }) => {
+  return (
+    <div className="flex flex-col gap-6 py-8 md:py-16 lg:py-24">
+      <div className="h-72">
+        <img
+          className="inset-0 h-full w-full rounded-3xl object-cover"
+          src={coach.imageUrl}
+          alt={coach.altText}
+        />
+      </div>
+      <div className="flex w-64 flex-col gap-2 text-blue md:w-96 lg:gap-4">
+        <h3 className="md:text-font26 lg:text-font28 lg:leading-lh48 font-heading text-xl font-medium leading-8 md:leading-10">
+          {coach.name}
+        </h3>
+        <h4 className="font-heading text-sm md:text-lg md:leading-6 lg:text-2xl lg:leading-8">
+          {coach.topics}
+        </h4>
+        <p className="md:py-1 font-mont whitespace-normal border-l-2 border-blue px-2 text-sm font-medium leading-6 tracking-tight md:px-4 md:text-lg lg:border-l-4 lg:px-8 lg:text-xl">
+          {coach.text}
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -0,0 +1,21 @@
+import { Navbar } from "./Navbar";
+import { Header } from "../sections/Header";
+import { WorkshopList } from "../sections/WorkshopList";
+import { Booking } from "../sections/Booking";
+import { Footer } from "../sections/Footer";
+import { Coaches } from "../sections/Coaches";
+import { Stats } from "../sections/Stats";
+
+export const Home = () => {
+  return (
+    <div className="container">
+      <Navbar />
+      <Header />
+      <Stats />
+      <WorkshopList />
+      <Coaches />
+      <Booking />
+      <Footer />
+    </div>
+  );
+};
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -0,0 +1,18 @@
+export const Navbar = () => {
+  return (
+    <nav className="fixed flex h-min w-screen items-end justify-between bg-navbar bg-opacity-75 p-4 px-8 backdrop-blur-sm md:px-16 md:py-6 lg:px-32 lg:py-8">
+      <div>
+        <img
+          className="h-10 md:h-16 lg:h-20"
+          src="/icons/logo_l.svg"
+          alt="Oasis logo"
+        />
+      </div>
+      <div>
+        <a href="">
+          <img className="h-6" src="/icons/burger_l.png" alt="menu" />
+        </a>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/components/StatCard.jsx b/src/components/StatCard.jsx
@@ -0,0 +1,13 @@
+export const StatCard = ({ stat }) => {
+  return (
+    <div className="font-mont tracking-tighter text-blue">
+      <p className="md:text-font56 text-5xl font-medium">{stat.number}</p>
+      <p className="lg:text-font26 py-2 text-lg font-medium leading-6 md:text-2xl md:leading-8 lg:py-4">
+        {stat.heading}
+      </p>
+      <p className="text-sm font-medium leading-6 text-blueDeep md:text-lg md:leading-10 lg:text-xl">
+        {stat.text}
+      </p>
+    </div>
+  );
+};