components/feature-card.js

class CustomFeatureCard extends HTMLElement {
    connectedCallback() {
        const icon = this.getAttribute('icon') || 'star';
        const title = this.getAttribute('title') || 'Feature';
        const description = this.getAttribute('description') || 'Description goes here';
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                }
                .card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
                }
                .icon-wrapper {
                    transition: all 0.3s ease;
                }
                .card:hover .icon-wrapper {
                    background-color: #6366f1;
                    color: white;
                }
            </style>
            <div class="card bg-white p-8 rounded-xl shadow-sm hover:shadow-md feature-card animate-on-scroll">
                <div class="icon-wrapper w-14 h-14 rounded-full bg-indigo-50 text-indigo-600 flex items-center justify-center mb-6">
                    <i data-feather="${icon}" class="w-6 h-6"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-3">${title}</h3>
                <p class="text-gray-600">${description}</p>
            </div>
        `;
        feather.replace();
    }
}

customElements.define('custom-feature-card', CustomFeatureCard);