Speakers - Copy this React, Tailwind Component to your project

"Generate a responsive React component for a speaker's section using Tailwind CSS, Framer Motion, and sticky scroll functionality, with a red and black color theme. The component should display each speaker's name and description on the left side and their image on the right. Each speaker's profile should occupy the full height of the viewport, and the profile content should change dynamically as the user scrolls. Use a red and black theme with bold, striking designs for each speaker section. The background should include unique variations, such as geometric patterns or gradient overlays, for each speaker's profile. Implement real time animations: the active speaker’s name and description should fade in from the left with a dynamic entry effect (e.g., sliding, scaling), while their image on the right should appear with a zoom or rotate effect. Apply different background gradients or geometric designs for each speaker's profile section, maintaining a visually distinct style for each. Ensure a smooth sticky scroll effect between speaker profiles as the user scrolls through the section. Style the content with Tailwind CSS for responsiveness, ensuring each speaker's profile fills the full height of the viewport and adapts well across different screen sizes. Use utility functions like clsx and tailwind merge for efficient class merging. Here’s an example structure: Speaker names and descriptions should fade in with a red to black gradient, while text appears bold and centered on the left. The speaker’s image should animate into view with either a zoom in or rotate effect, adapting a bold red and black overlay or background pattern. Create a scroll container with dynamic transitions based on progress, featuring unique design elements like diagonal shapes, asymmetric layouts, or dynamic patterns for each speaker profile."