Component 0 - Copy this React, Tailwind Component to your project

"Create an Angular project (using Angular 17) for a hospital website styled with Tailwind CSS (version 3.x). All the components should be created as standalone. The website must be fully responsive across all devices (mobile, tablet, laptop, desktop) in both landscape and portrait modes, adhering to modern UI/UX standards and WCAG 2.1 accessibility guidelines (e.g., ARIA labels, keyboard navigation, sufficient color contrast). The design should feature a clean, professional layout with a hospital themed color palette (e.g., blue, white, and green).Header:Include a logo (use a placeholder image) on the left and navigation links on the center: Specialities, Blogs, Contact Us, About Us.Add a prominent 'Book Appointment' button styled with Tailwind classes (e.g., bg blue 600 text white px 4 py 2 rounded hover:bg blue 700 hover:scale 105 transition transform).Ensure the header is sticky, responsive, and collapses into a hamburger menu on mobile devices (using Tailwind and Angular).When we click the Book appointment button, a modal should pop up with below fieldsIn the form I want to have have the heading of the form as Book Appointment and need to have below list of fields in it. No need for labels for any fields. Just want to have it as helptext within the field1. Name2. Email3. Phone4. Drop down button for selecting Speciality and the specialities are 4.1 Gynacologist 4.2 Orthopaedics 4.3 Cardiology 4.4 Paediatrics5. Date. Need to pop up the calendar on top of date field once this field is selected6. Messages with text area7. In spciality, want to display a placeholder kind of thing as Speciality8. Date field should accept date in DD/MM/YYYY format and there should be validation that date should be greater than or equal to today date.9. Phone field should accept only numbers and it should throw error when the no of digits is less than 10 digits and it should accept to the maximum of 12 digits10. In typescript logic, declare separate interface for the form fields and get the form fields value to that interface variable.Home Screen:Create a separate component for below and include it in the home screen component.Slider to show hospital images which should be responsive to all screens.Create a separate component for below and include it in the home screen component.Card like contents for below scenario1. The design should be like card like structure.2. The content should be taken from below arrayscheduleItems: ScheduleItem[] = [ { icon: 'fa fa ambulance', category: 'Emergency Services', title: '24/7 Emergency Care', description: 'Our emergency department is open 24/7 to provide immediate care for critical and urgent medical situations.', linkText: 'LEARN MORE', linkUrl: '/emergency services', }, { icon: 'fa fa calendar', category: 'Appointments', title: 'Doctor\'s Schedule', description: 'Check our doctors’ availability and schedule your appointments at a convenient time.', linkText: 'VIEW SCHEDULE', linkUrl: '/doctors schedule', }, { icon: 'fa fa clock', category: 'Visiting Hours', title: 'Opening Hours', timings: [ 'Monday Friday: 8:00 AM 8:00 PM', 'Saturday: 9:00 AM 6:30 PM', 'Sunday: 10:00 AM 4:00 PM', ], linkText: 'LEARN MORE', linkUrl: '/visiting hours', }, ]; 3. The icons should display in the backdrop in very light color and it should be placed in the bottom right corner.4. The background color of the card should be very elegand and modern.Create a separate component for below and include it in the home screen component.1. Following html should be in place. The text should be in center.<h2>We Are Always Ready to Help You