A
Anonymous

Failed Booking Page - Copy this React, Tailwind Component to your project

Design-a-clean-and-user-friendly-Failed-Booking-Page-for-a-Puja-service-application.-Page-Layout:-1.-Header-Display-the-app-logo-prominently-on-the-left.-Add-navigation-links-or-buttons-such-as:-"Home"-"Services"-"Help"-Include-a-cart-icon-with-the-number-of-items-dynamically-displayed.-2.-Failed-Booking-Message-Display-a-prominent-error-icon-(e.g.,-a-red-exclamation-mark-inside-a-circle)-to-indicate-failure.-Show-a-bold,-prominent-message-such-as:-"Oops!-Your-Booking-Could-Not-Be-Completed."-Subtext:-"We-encountered-an-issue-while-processing-your-booking.-Please-try-again-or-contact-support-for-assistance."-3.-Booking-Details-Section-Display-the-Selected-Puja-Service-details-for-context:-Puja-Name-(e.g.,-Ganesh-Puja,-Lakshmi-Puja).-Selected-Date-&-Time:-Show-the-chosen-date-and-time.-Language:-The-selected-language-for-the-service.-Location:-The-chosen-location-(e.g.,-Home,-Temple).-Show-these-details-in-a-clear-card-layout-for-user-verification.-4.-Reason-for-Failure-(Optional)-If-applicable,-display-a-brief-reason-for-the-failure,-such-as:-"Payment-authorization-failed."-"Selected-time-slot-is-no-longer-available."-"Service-provider-could-not-be-confirmed."-5.-Action-Buttons-Provide-actionable-options:-"Retry-Payment":-A-prominent-button-to-attempt-the-payment-again.-"Modify-Booking":-A-secondary-button-allowing-the-user-to-adjust-details-(e.g.,-time,-location).-"Contact-Support":-A-tertiary-button-linking-to-the-support-page-or-opening-a-contact-modal.-6.-Support-Section-Include-a-brief-support-message:-"If-the-issue-persists,-please-contact-us-at-+91-XXXXX-XXXXX-or-email-support@okpuja.com-for-immediate-assistance."-7.-Footer-Display-the-app’s-tagline-(e.g.,-"Connecting-Spiritual-Services-with-Devotees")-with-quick-links-to-the-Privacy-Policy,-Terms-of-Service,-and-About-Us.-UI-Style-Guidelines-Use-a-combination-of-red-tones-for-the-error-section,-complemented-by-calming-colors-like-white-and-light-gray-for-the-background.-Include-subtle-cultural-motifs-to-maintain-the-spiritual-theme.-Ensure-all-elements-are-mobile-and-desktop-friendly.

Prompt
Component Preview

About

FailedBookingPage - A user-friendly layout with error messages, booking details, and action buttons. Built with React and Tailwind. Start coding now!

Share

Last updated 1 month ago