/9friends

Yoga class booking landing page made with Next.js

Primary LanguageTypeScript

Yoga Class Booking Landing Page

Welcome to the YogaClass Booking Landing Page!

Landing Page Images

Screenshot Fullpage Fullscreen Pageshot

Frosty Navigation Bar with active links https://i.ibb.co/dBnnLGv/frostbar.gif

Dynamic Testimonials Scroller Dynamic Testimonials

This application serves as a platform for users to book and explore various yoga classes.

⭐ Key Features:

  • Class Booking: Easily reserve your spot with just a few clicks.

  • Class Availability: Check the availability of upcoming classes and find convenient time slots that fit your schedule.

  • Dynamic Testimonials Scroller: The landing page includes a testimonials section where users can read and view feedback from satisfied yoga class attendees. This feature helps build trust and credibility for the yoga classes.

  • Contact Page: A dedicated contact page is provided for users to get in touch with the instructor or the yoga studio. Users can fill out a contact form and submit their inquiries, providing a convenient way to reach out for further information or assistance.

  • Cool Navigation: Frosty Navigation Bar with active links which adds an additional sprinkle of modern UI.

⚙️ Dependencies:

  • Next.js (v13) - A React framework for building server-side rendered and static web applications.
  • TypeScript - A typed superset of JavaScript that enables static typing and improved tooling.
  • Vercel - A cloud platform for deploying Next.js applications with ease.
  • Cal.com Calendar - Integration with Cal.com for embedding and managing yoga class schedules and bookings.
  • ESLint - A widely used JavaScript linter for identifying and reporting code quality issues.
  • Formspark - A service for processing and handling form submissions from the landing page.
  • Flowbite - A UI toolkit for building responsive and stylish web interfaces.
  • Tailwind CSS - A utility-first CSS framework for rapidly building custom user interfaces.
  • Vercel Analytics - A built-in analytics solution provided by Vercel to gain insights into website usage and performance.
  • Swiper - A modern and mobile-friendly slider library for creating interactive and touch-enabled carousels and sliders.

Make sure to check the latest docs and have these dependencies installed and configured properly before running the application. Additionally, ensure you have valid API keys or credentials, for services like Cal.com and Formspark.

🛠️ Build/Deploy Instructions:

  1. Clone the repository to your local machine using the following command:

    git clone https://github.com/your-username/your-repo.git

  2. Open the project in your preferred code editor.

  3. Customize the landing page content, including styling, testimonials etc. according to your needs.

  4. Ensure that you have the necessary dependencies installed. If not, you can download them from their respective websites or include the CDN links in your HTML file.

  5. Once the customization is complete, you can deploy the application to a web server or host it on a platform of your choice. I have the site running on Vercel, as it works great with NextJS.

  6. Make any additional configurations or settings required for deployment

  7. Test the application thoroughly to ensure all features and functionalities are working as expected.

  8. Publish your project on GitHub or any other hosting platform to make it accessible to users.

Acknowledgements

Thanks for the support of my mentor