Hospital Header - Copy this Angular, 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 fields In 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 field 1. Name 2. Email 3. Phone 4. Drop down button for selecting Speciality and the specialities are 4.1 Gynacologist 4.2 Orthopaedics 4.3 Cardiology 4.4 Paediatrics 5. Date. Need to pop up the calendar on top of date field once this field is selected 6. Messages with text area 7. In spciality, want to display a placeholder kind of thing as Speciality 8. 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 digits 10. 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 scenario 1. The design should be like card like structure. 2. The content should be taken from below array scheduleItems: 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 & Your Family</h2> <img src="assets/img/section img.png" alt="#"> <p>Our team is dedicated to providing exceptional care and support for you and your family. From emergency assistance to comprehensive pharmacy services, we're here to ensure your health and well being are always our top priority.</p> 2. Below the above text, below array should come in loop in columnwise. Icon should be at the top and below that the text should come featureItems: FeatureItem[] = [ { icon: 'icofont ambulance cross', title: 'Emergency Help', description: 'Immediate assistance for urgent medical situations to ensure fast and effective care.', }, { icon: 'icofont medical sign alt', title: 'Enriched Pharmacy', description: 'Comprehensive pharmacy services with a wide range of medications and health products.', }, { icon: 'icofont stethoscope', title: 'Medical Treatment', description: 'Professional medical treatment provided by experienced healthcare professionals.', } ]; Create a separate component for below and include it in the home screen component. header with h2 Why Choose Our Services? # para We are committed to delivering exceptional care with a personalized approach to each patient’s needs. Our team of dedicated professionals ensures the highest quality of care and the latest in medical advancements. Create a separate component for below and include it in the home screen component. Hightlight the below in bright background color and modify the text color accordingly. the content should be in middle of the page: header h2: Do you need Emergency Medical Care? Call @ 1234 56789 paragraph If you ora loved one requires urgent medical care, our team is ready to assist you 24/7. Call us immediately for expert help. Contact now button. Create a separate component for below and include it in the home screen component. Display a list of at least 6 doctors with their names, specialties, degree and profile images (use placeholder images or a mock JSON file for data). Use a responsive Tailwind grid (grid cols 1 sm:grid cols 2 lg:grid cols 3) to arrange doctor profiles, ensuring proper spacing and alignment. Each doctor profile should be a reusable Angular component with a card layout (e.g., border shadow md p 4 rounded lg). Footer: Include contact details (phone: +1 123 456 7890, email: info@hospital.com), the hospital’s address (123 Health St, City, Country), and quick links to Specialities, Blogs, Contact Us, and About Us. Add social media icons (Facebook, Twitter, Instagram) styled with Tailwind (e.g., text blue 500 hover:text blue 700). Style the footer with a distinct background (e.g., bg gray 800 text white p 6) and ensure it spans the full width. Responsiveness: Use Tailwind CSS breakpoints (sm, md, lg, xl) to ensure seamless adaptation to all screen sizes. Optimize for both portrait and landscape modes with Tailwind utilities and media queries if needed. Ensure images and text scale fluidly (e.g., object cover for images, text sm to text lg for text). Components: Create reusable Angular components for the header, footer, home screen, and doctor profiles. Organize the project with a clear folder structure (e.g., src/app/components, src/app/shared, src/app/services). Use Angular services to manage mock doctor data (e.g., a DoctorService with a JSON array). Functionality: Navigation links should route to placeholder pages (e.g., empty components for Specialities, Blogs, etc.) using Angular Router. The 'Book Appointment' button should link to a placeholder form page styled with Tailwind. Add basic interactivity, such as a filter dropdown to sort doctors by specialty on the home screen. Accessibility: Ensure all interactive elements (buttons, links, forms) have ARIA labels and are keyboard navigable. Use high contrast colors (e.g., text white on bg blue 600) for readability. Performance: Implement lazy loading for doctor profile images. Optimize the build for production (e.g., ng build prod). Deployment: Provide Angular CLI commands for building the project (ng build prod). Include step by step instructions for deploying to Firebase or Netlify, including hosting setup and environment configuration. Testing: Include basic unit tests for at least one component (e.g., the doctor profile component) using Angular’s testing utilities (Jasmine/Karma). The resulting Angular project should have a well structured, modular codebase with a responsive, accessible, and visually appealing design that delivers a seamless user experience across all devices and orientations. Provide the full source code and a README with setup, build, and deployment instructions."