josephakayesi / meditainment

a landing page for a fictitious health and wellness organization that emphasizes on meditation

Meditainment

A landing page for a fictitious wellness company that combines meditation with entertainment.

Things I was able to achieve on this project

• Setting up local fonts and extending Tailwind theme with font variables
• Setting up a sleek and beautiful notification library
• Design and build a highly responsive UI with best performance on all widely used views
• Using a component with children prop
• Use of many icons
• Optimized images for best performance
• Using clsx for constructing className conditionally

Table of contents

• Overview
  • The challenge
  • Figma UI
  • Links
• My process
  • Built with
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

The challenge was to:

• Design and build a high quality UI with highly optimized images and fast loading time of less than 1 second
• Build a high conversion UI
• Build a highly responsive UI that seamlessly adapts to all screen sizes
• Create button and input interactions that mimics email subscription
• Create a responsive and well designed navigation bar with animations.

Figma UI

Links

• Solution URL
• Live Site URL

My process

Built with

• NextJS
• Notistack
• clsx
• Tailwind

Continued development

• I want to focus more on creating high conversion landing pages with a high quality copy for marketing and converting leads.
• I want to focus on creating more delightful animations
• I want create high-performing and delightful data-intensive web applications

Author

• Website - Joseph Akayesi
• Linkedin - josephakayesi
• Twitter - @josephakayesi

Acknowledgements

I drew inspiration from Mono's website. There is a section on their website that implements a grid and I loved how it was executed on their site.