Course Card - Copy this React, Tailwind Component to your project

Create a responsive and animated professional component. Headings: At the top, add a light gray heading 'Our Courses' that appears in the center with a fade in animation upon scrolling. Below this, include a bold black heading 'Featured Courses' with an orange underline, also with a fade in animation. Cards: Display six responsive cards beneath the headings. Each card should have a course title, such as 'Web Development.' Include three subheadings for each course: 'Frontend Development,' 'WordPress Development,' and 'AI Development.' Pop ups: When clicking on each subheading, a medium sized pop up should appear in the center with a small animated image. The pop up should include: A close button. A 'Call us: +92 330 5291256' button. A 'Go to Course Page' button. A 'Watch on YouTube' button for five cards. One card should only have the first two buttons. If the 'Watch on YouTube' button is clicked, show a secondary pop up with the text 'Coming on 1st January 2025' in a bold, highlighted style, along with a close button. Ensure that all elements are beautifully designed, fully responsive, and maintain a professional appearance. Each pop up should include relevant images for the courses