make me a squid game themed diamond shape container , take reference from this code import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; interface Organiser { id: number; name: string; role: string; image: string; team: 'faculty' | 'student' | 'advisory'; displayNumber?: string; linkedin?: string; twitter?: string; instagram?: string; description: string; } // Sample data (using the provided data) const organisers: Organiser[] = [ // Faculty Team { id: 1, name: 'Dr. Amal Ghosh', role: 'Faculty Advisor', image: 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', team: 'faculty', displayNumber: '001', linkedin: 'https://linkedin.com/in/amalghosh', twitter: 'https://twitter.com/amalghosh', instagram: 'https://instagram.com/amalghosh', description: 'With over 15 years of academic excellence, Dr. Ghosh provides strategic guidance to our entrepreneurship initiatives. His research in business innovation has been recognized internationally, and he mentors students to develop their startup ideas into viable businesses.' }, { id: 2, name: 'Prof. Ritu Sharma', role: 'Head of Entrepreneurship Cell', image: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', team: 'faculty', displayNumber: '005', linkedin: 'https://linkedin.com/in/ritusharma', twitter: 'https://twitter.com/ritusharma', instagram: 'https://instagram.com/ritusharma', description: 'Prof. Sharma leads our E-Cell with passion and precision. A former startup founder herself, she brings practical industry knowledge and a vast network of connections. Her leadership has transformed our entrepreneurship programs into nationally recognized initiatives.' }, { id: 3, name: 'Dr. Amit Banerjee', role: 'Technical Mentor', image: 'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', team: 'faculty', displayNumber: '003', linkedin: 'https://linkedin.com/in/amitbanerjee', twitter: 'https://twitter.com/amitbanerjee', instagram: 'https://instagram.com/amitbanerjee', description: 'Dr. Banerjee specializes in emerging technologies with expertise in AI and blockchain applications for startups. He helps students navigate technical challenges in their projects and has guided several award-winning student startups from concept to successful implementation.' }, // Student Team { id: 4, name: 'Rahul Chatterjee', role: 'Event Coordinator', image: 'https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', team: 'student', displayNumber: '007', linkedin: 'https://linkedin.com/in/rahulchatterjee', twitter: 'https://twitter.com/rahulchatterjee', instagram: 'https://instagram.com/rahulchatterjee', description: 'A final year Management student with exceptional organizational skills, Rahul has successfully managed our annual StartupSummit and multiple hackathons. His attention to detail and ability to inspire teams makes our events memorable experiences for participants.' }, { id: 5, name: 'Priya Mehta', role: 'Marketing Lead', image: 'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', team: 'student', displayNumber: '002', linkedin: 'https://linkedin.com/in/priyamehta', twitter: 'https://twitter.com/priyamehta', instagram: 'https://instagram.com/priyamehta', description: 'Priya combines creativity with data-driven strategies to amplify our reach. Her digital marketing campaigns have increased event participation by 200%. A Communications major with a minor in Analytics, she brings both artistic vision and results-oriented planning to our team.' }, { id: 6, name: 'Arjun Das', role: 'Technical Head', image: 'https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', team: 'student', displayNumber: '006', linkedin: 'https://linkedin.com/in/arjundas', twitter: 'https://twitter.com/arjundas', instagram: 'https://instagram.com/arjundas', description: 'A coding wizard and third-year Computer Science student, Arjun handles our technical infrastructure and mentors junior developers. He has developed our event management platform and leads workshops on emerging tech stacks for aspiring student entrepreneurs.' }, { id: 7, name: 'Neha Patel', role: 'Design Lead', image: 'https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', team: 'student', displayNumber: '004', linkedin: 'https://linkedin.com/in/nehapatel', twitter: 'https://twitter.com/nehapatel', instagram: 'https://instagram.com/nehapatel', description: 'Neha crafts our visual identity with her exceptional design skills. Studying Visual Communications, she creates impactful branding materials that capture our innovative spirit. Her design thinking workshops help startups develop user-centric products and compelling brand stories.' }, // Advisory Team { id: 8, name: 'Rajiv Malhotra', role: 'Industry Advisor', image: 'https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', team: 'advisory', displayNumber: '009', linkedin: 'https://linkedin.com/in/rajivmalhotra', twitter: 'https://twitter.com/rajivmalhotra', instagram: 'https://instagram.com/rajivmalhotra', description: 'With 20+ years of industry experience and as CEO of TechVentures, Rajiv brings invaluable insights to our entrepreneurship programs. He connects student startups with investors and has personally mentored five ventures that secured seed funding in the last year alone.' }, { id: 9, name: 'Ananya Sen', role: 'Startup Mentor', image: 'https://images.pexels.com/photos/3756679/pexels-photo-3756679.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', team: 'advisory', displayNumber: '008', linkedin: 'https://linkedin.com/in/ananyasen', twitter: 'https://twitter.com/ananyasen', instagram: 'https://instagram.com/ananyasen', description: 'A serial entrepreneur who has successfully founded three startups, Ananya guides students through the challenges of early-stage ventures. Her expertise in sustainable business models and social entrepreneurship inspires projects with both profit potential and positive social impact.' }, ]; const OrganisersPage = () => { const [selectedOrganiser, setSelectedOrganiser] = useState(null); const [timerValues, setTimerValues] = useState<{ [key: number]: string }>({}); // Initialize and animate timers useEffect(() => { const initialTimers: { [key: number]: string } = {}; organisers.forEach(organiser => { initialTimers[organiser.id] = organiser.displayNumber || formatNumberWithLeadingZeros(organiser.id); }); setTimerValues(initialTimers); // Animation interval const interval = setInterval(() => { setTimerValues(prev => { const updated = { ...prev }; // Randomly choose some timers to flicker organisers.forEach(organiser => { if (Math.random() > 0.8) { // Briefly display blank timer updated[organiser.id] = ' '; // Reset back to normal after short delay setTimeout(() => { setTimerValues(current => ({ ...current, [organiser.id]: organiser.displayNumber || formatNumberWithLeadingZeros(organiser.id) })); }, 150); } }); return updated; }); }, 2000); return () => clearInterval(interval); }, []); // Format ID number with leading zeros const formatNumberWithLeadingZeros = (num: number) => { return num.toString().padStart(3, '0'); }; // Render team section const renderTeamSection = (team: 'faculty' | 'student' | 'advisory') => { const teamOrganisers = organisers.filter(organiser => organiser.team === team); return ( {team.charAt(0).toUpperCase() + team.slice(1)} Team

{teamOrganisers.map((organiser, i) => ( setSelectedOrganiser(organiser)} > {/* Diamond container */}

{/* Glow effect */}

{/* Border and content */}

{/* Sequential number at bottom of diamond - digital timer style */}

{timerValues[organiser.id] || formatNumberWithLeadingZeros(organiser.id)}

))}

); }; return ( ORGANISERS

{/* Render each team section sequentially */} {renderTeamSection('faculty')} {renderTeamSection('student')} {renderTeamSection('advisory')}

{/* Organiser Detail Modal */} {selectedOrganiser && ( setSelectedOrganiser(null)} > e.stopPropagation()} >

{selectedOrganiser.name}

{selectedOrganiser.role} {selectedOrganiser.description}

)} ); }; export default OrganisersPage;