Oasis Welness W-12

.eslintrc.cjs

@@ -16,5 +16,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    'react/prop-types': 'off',
   },
 }

README.md

@@ -1,41 +1,40 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/design-handoff.svg" alt="Project Banner Image">
-  </a>
-</h1>
+# Design Handoff Project
 
-### Remove git
+The Oasis is more than a typical gym; it's a sanctuary where mindfulness and meditation meet tangible results. Grounded in research showing how mindfulness can rewire the brain and change how we interact with the world, The Oasis offers an immersive experience to explore these benefits. Forget the clichés—this space lets guests dive into mindfulness and witness its impact firsthand.
 
-rm -rf .git
+Our landing page, developed using React and styled components, was crafted to reflect the vision of our UX designer. It’s a project designed to capture the essence of what it means to work out your mind, just like a gym for the brain.
 
-# Design Handoff Project
+## Getting Started with the Project
 
-Replace this readme with your own information about your project.
+To kick off the project, we divided tasks to streamline the workflow. I took charge of building the foundational components for the landing page, setting up the React project, and applying styled components for consistent styling. My colleague handled the latter half, focusing on couch cards, Call To Action Section, and the Footer with its UX details.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+When we merged our work, we faced some challenges, particularly with differing viewport setups, causing layout issues across various screen sizes. To resolve this, we:
 
-## Getting Started with the Project
+Unified the breakpoints for consistent responsive design.
+Adjusted padding and margins across components to ensure uniformity.
+Conducted cross-device testing to identify and fix layout inconsistencies.
+Collaborated closely to maintain clear communication and alignment.
+Despite the challenges, we successfully merged our work into a cohesive landing page, achieving a consistent and polished user experience.
+
+### The Problem
 
-### Dependency Installation & Startup Development Server
+I approached the alignment problem by first identifying the root cause: the activity images and the Card Content weren't properly aligned. The issue was due to inconsistencies in padding and margin, causing the layout to shift unexpectedly.
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
+To solve this, I used styled components to adjust the CSS properties, focusing on flexbox for layout control and media queries for responsive design. By manipulating padding, margin, and flex-direction, I managed to align the Card Content with the activity images. Sometimes, I had to deviate from strict design specs to get the desired look.
 
-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.
+One technical challenge was with the burger bar. We initially intended to use an SVG, but it wasn't rendering properly, so we opted for a PNG instead. This ensured visibility and consistency across devices.
 
-```bash
-npm i && code . && npm run dev
-```
+If I had more time, I would:
 
-### The Problem
+Refactor the code for greater consistency.
+Implement additional accessibility features.
 
-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?
+Despite the challenges, the project came together with a consistent and visually appealing design. We got very close to the design had, so it´s very rewarding to see that.
 
 ### 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://oasiswelnesscenter.netlify.app/
 
-## Instructions
+```
 
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+```

index.html

@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <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>Oasis Wellness</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -11,16 +11,19 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8",
+    "react-responsive": "^10.0.0"
   },
   "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",
     "eslint-plugin-react-refresh": "^0.4.3",
     "vite": "^4.4.5"
   }
-}
+}

src/App.jsx

@@ -1,3 +1,23 @@
+import { CoachSection } from "./components/CoachSection";
+import { Footer } from "./components/Footer";
+import GlobalStyle from "./components/GlobalStyle";
+import { HealthierSection } from "./components/HealthierSection";
+import { HeroSection } from "./components/HeroSection";
+import { NavigationBar } from "./components/NavigationBar";
+import { RetreatActivities } from "./components/RetreatActivities";
+import { TrustIndicator } from "./components/TrustIndicator";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
-};
+  return (
+    <>
+      <GlobalStyle />
+      <NavigationBar />
+      <HeroSection />
+      <TrustIndicator />
+      <RetreatActivities />
+      <CoachSection />
+      <HealthierSection />
+      <Footer />
+    </>
+  );
+}