Service Page - Copy this React, Tailwind Component to your project
Objective: Design a service page for a marketplace website where users can browse and order various services. The design should resemble an e commerce product page but tailored for services. Design Requirements: Page Layout: Header: Logo Navigation menu (Home, Categories, About Us, Contact, etc.) Search bar User account/login icon Main Content Area: Service details Call to action buttons (e.g., "Book Now," "Add to Cart") Sidebar (optional): Filters (e.g., service type, rating, price range) Categories Service Section: Service Image: High quality image representing the service. Option for a gallery or multiple images if needed. Title: Prominent and clearly readable. Example: “Professional Home Cleaning” Description: A detailed description of the service, including what’s included. Should be easily readable with bullet points for key features if necessary. Seller Information: Name and brief bio of the service provider. Profile picture or avatar. Rating: Display an average rating out of 5 stars. Include individual reviews or testimonials if available. Price: Clearly displayed. Include options for different pricing tiers if applicable (e.g., basic, standard, premium). Availability: Information on availability or booking slots. Call to Action Button: Prominent button for users to book or order the service. Secondary actions like "Add to Wishlist" or "Request More Info" if applicable. Service Features: Highlight unique selling points or key benefits of the service. Use icons or small visuals to make features stand out. Related Services: Recommendations for similar or complementary services. Display in a grid or carousel format. Footer: Links to privacy policy, terms of service, and other legal information. Contact information and social media icons. Newsletter subscription option. Visual Style: Consistent with the overall branding of the marketplace (colors, fonts, and design elements). Clean, modern, and user friendly interface. Ensure mobile responsiveness and accessibility. Additional Notes: Make sure the layout is intuitive and user friendly and responsive for all screen sizes Incorporate interactive elements for an engaging experience (e.g., hover effects, lightbox for images). Include placeholders for dynamic content where necessary (e.g., user reviews, service availability).
