components/speakers.js

class CustomSpeakers extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .speaker-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                    gap: 2rem;
                }
                .speaker-card {
                    background: white;
                    border-radius: 12px;
                    overflow: hidden;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                    transition: all 0.3s ease;
                }
                .speaker-image {
                    height: 300px;
                    width: 100%;
                    object-fit: cover;
                }
                .speaker-info {
                    padding: 1.5rem;
                }
                .speaker-name {
                    font-size: 1.25rem;
                    font-weight: bold;
                    margin-bottom: 0.5rem;
                }
                .speaker-title {
                    color: #4b5563;
                    margin-bottom: 1rem;
                }
                .speaker-bio {
                    color: #6b7280;
                    font-size: 0.875rem;
                    margin-bottom: 1rem;
                }
                .speaker-social {
                    display: flex;
                    gap: 0.75rem;
                }
                .social-icon {
                    color: #4f46e5;
                    transition: color 0.2s;
                }
                .social-icon:hover {
                    color: #4338ca;
                }
            </style>
            <div class="speaker-grid">
                <!-- Speaker 1 -->
                <div class="speaker-card">
                    <img src="http://static.photos/technology/320x240/1" alt="Speaker" class="speaker-image">
                    <div class="speaker-info">
                        <h3 class="speaker-name">Dr. Sarah Johnson</h3>
                        <p class="speaker-title">CTO at Quantum Innovations</p>
                        <p class="speaker-bio">Expert in quantum computing with 15+ years of experience in developing next-generation algorithms.</p>
                        <div class="speaker-social">
                            <a href="#" aria-label="Twitter"><i data-feather="twitter" class="social-icon"></i></a>
                            <a href="#" aria-label="LinkedIn"><i data-feather="linkedin" class="social-icon"></i></a>
                            <a href="#" aria-label="GitHub"><i data-feather="github" class="social-icon"></i></a>
                        </div>
                    </div>
                </div>
                
                <!-- Speaker 2 -->
                <div class="speaker-card">
                    <img src="http://static.photos/technology/320x240/2" alt="Speaker" class="speaker-image">
                    <div class="speaker-info">
                        <h3 class="speaker-name">Michael Chen</h3>
                        <p class="speaker-title">Lead AI Researcher at NeuroTech</p>
                        <p class="speaker-bio">Pioneer in neural network architectures and their applications in healthcare diagnostics.</p>
                        <div class="speaker-social">
                            <a href="#" aria-label="Twitter"><i data-feather="twitter" class="social-icon"></i></a>
                            <a href="#" aria-label="LinkedIn"><i