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.
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.
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.
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:
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.
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.
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.
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.
If I had more time, I would:
Refactor the code for greater consistency. Implement additional accessibility features.
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.
https://oasiswelnesscenter.netlify.app/