Slides - Copy this React, Tailwind Component to your project

Create a visually stunning and dynamic slideshow for the hero section of a website. Each slide should feature a full screen, high quality background image with a smooth, engaging text overlay. The text animation should flow from the bottom to the top, slightly left aligned (not centered), creating a unique, modern feel. Text Animation: Headline and subheading should slide up from the bottom, moving slightly off center towards the left. Text should have a soft easing animation with a slight delay for each element (e.g., headline first, then subheading). The text should not reach the exact center, keeping it just above the lower left quadrant. Use a fade in effect along with the slide up for a clean, sophisticated look. Slide Transitions: Each slide should transition using modern effects like smooth zoom out, slide in from the right, or parallax swipe. A loading progress bar at the bottom, with vibrant colors like electric blue, neon pink, or bright orange, should be clearly visible as it counts down to the next slide. Include a brief fade out of the current slide before the next one transitions in. Navigation: Include next and previous buttons on the sides of the slides, designed to be minimalistic but highly visible, using bold, vibrant colors for the icons (e.g., arrows). The buttons should appear as hover elements with a smooth animation, and their design should remain consistent with the slideshow's aesthetic. Additional Features: Keep each slide’s duration to 5 seconds, with the progress bar and loading animation at the bottom to indicate when the next slide will load. Make sure the slideshow is responsive across all devices, keeping animations smooth on mobile as well. Ensure that the overall design remains clean, with appropriate spacing between the text and edges of the screen, using a minimalistic but captivating color palette.