Team Page - Copy this React, Tailwind Component to your project

Create a visually appealing "Team" webpage for our TEDx event using a black background with red foreground elements. The page should start with a large, bold, centered heading that says "The Team" in white. Below the heading, include a centered paragraph that reads: "Our team is committed to excellence, bringing creativity and passion to every aspect of TEDx. Together, we strive to deliver an unforgettable experience." Each team section will contain individual member cards with larger dimensions to accommodate both an image and the relevant text. The card layout should feature the following: Top Section: Display the member’s image in a well framed, centered layout. Bottom Section: Core and Organization Team Cards: Name: Bold white text below the image. Designation: Normal weight white text below the name. Lead Cards: Same format as the Core and Organization cards, with both name and designation. Remaining Member Cards (Non Leads): Only name in bold white text below the image. Teams and Member Structure: Core Team: 9 member cards Organization Team: 3 member cards Web Development Team: 1 lead card + 5 member cards Marketing Team: 1 lead card + 6 member cards Design Team: 1 lead card + 8 member cards Partnerships and Collaborations Team: 1 lead card + 7 member cards Communications and Content Team: 1 lead card + 7 member cards Experience and Hospitality Team: 1 lead card + 8 member cards Video and Productions Team: 1 lead card + 12 member cards Scrolling Transition Effect: Once a team section is completely scrolled, initiate a smooth transition animation. A red diagonal bar should move across the screen—from the bottom right corner to the top left corner—briefly covering the content. As the bar completes its animation, the next team section fades in smoothly. Ensure that the scrolling feels fluid and engaging. Design Requirements: Card Layout: Ensure the cards have larger heights to provide enough space for both the image and text sections. Spacing: Maintain even spacing between cards for a clean and structured look. Font and Colors: Use white text for all names and designations to maintain contrast against the black background. Alignment: Ensure all elements (images, names, designations) are centered within each card.