Speakers - Copy this React, Tailwind Component to your project

Prompt: "Generate a responsive React component for a speaker's section using Tailwind CSS, Framer Motion, and sticky scroll functionality. The component should display each speaker's name and description on the left, with 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. Implement linear gradients as background for each speaker's section. Use real time animations triggered by scroll, such that the active speaker's name and description fade in on the left side, while their image appears on the right. The speaker’s image should animate into view, maintaining a smooth transition using Framer Motion. The sticky scroll effect should ensure seamless transitions between speakers as the user scrolls through the section. Style the content with Tailwind CSS for responsiveness, ensuring each speaker profile section fills the full height of the viewport. Use utility functions like clsx and tailwind merge for class merging. Here’s an example structure: Speaker names and descriptions should fade in and out based on which profile is currently active. The speaker’s image should animate using a background gradient that changes for each profile. Create an overflow y scroll container, with dynamic updates based on scroll progress. The content should remain responsive and adapt well across different screen sizes."