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. Directly beneath 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." The design should feature multiple sections, each representing different teams, with their members displayed in individual cards. Below each card in the Core Team and Organization Team, show the member’s name in bold white text, followed by their designation in normal-weight white text. Lead cards across all other teams should follow the same format with both name and designation. For the remaining non-lead member cards, display only the name in bold white text under the card. The teams and member structure should follow this order: 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 When a team section is fully scrolled, trigger an animated transition effect. The effect should involve a red bar or shape moving across the screen—from the bottom-right to the top-left corner, briefly covering the entire view. Once the effect completes, the next team section should fade in smoothly, giving a visually appealing feel as users scroll through the sections. Maintain consistent and visually pleasing spacing between cards. All names and designations should be in white text to ensure clear visibility against the black background.