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

Create a detailed and visually appealing course page with the following requirements: Page Header: The page should start with a prominent heading at the top: "Our Courses". The heading should be styled with a modern and professional font, centered on the page. Course Cards Layout: The page should display courses in a grid layout with three cards per row. Each card should have: Image: A visually appealing image related to the course. Heading: The course title, displayed below the image. Brief Introduction: A short description or summary of what the course entails. Checkout Button: A button labeled "Checkout" that, when clicked, triggers a popup. Course Categories: At the start of each row, there should be a heading indicating the category of courses (e.g., "Web Development"). Under each category heading, include three specific courses (e.g., "Frontend", "WordPress", "Backend"). Popup Details: When the "Checkout" button is clicked, a modal popup should appear with two options: Watch Courses on YouTube: A button that links to the course playlist or video on YouTube. Register the Course: A button that directs users to the registration page or form. The popup should have a clean, user friendly design and include smooth animations for opening and closing. Animations and Responsiveness: The entire page should be highly responsive and look great on all devices (mobile, tablet, desktop). Use animations to enhance user interaction, such as: Hover effects on course cards. Smooth transitions for the popup. Animated elements to draw attention to key sections. Color Theme: The page should feature a light mix of blue and purple colors. Use these colors for backgrounds, buttons, and other UI elements to create a cohesive and visually appealing design. Additional Styling: Ensure that the page is styled with modern web design principles, including clean lines, ample whitespace, and easy to read typography. Use a consistent design language throughout the page to maintain visual harmony.