components/tool-card.js

class ToolCard extends HTMLElement {
    connectedCallback() {
        const icon = this.getAttribute('icon') || 'tool';
        const title = this.getAttribute('title') || 'Tool';
        const category = this.getAttribute('category') || 'General';
        
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .tool-card {
                    transition: all 0.3s ease;
                    border-radius: 0.75rem;
                    overflow: hidden;
                }
                .tool-icon {
                    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
                    transition: all 0.3s ease;
                }
                h3 {
                    color: #f8fafc;
                }
                p {
                    color: #94a3b8;
                }
            </style>
<a href="#" class="tool-card block bg-gray-800 rounded-xl p-6 hover:shadow-lg">
                <div class="flex items-center mb-4">
                    <div class="tool-icon rounded-lg p-3 mr-4">
                        <i data-feather="${icon}" class="text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold">${title}</h3>
                </div>
                <p class="text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <div class="flex justify-between items-center">
                    <span class="text-xs px-3 py-1 rounded-full bg-gray-700 text-gray-300">${category}</span>
                    <button class="text-primary-500 hover:text-primary-400">
                        <i data-feather="arrow-right"></i>
                    </button>
                </div>
            </a>
        `;
    }
}
customElements.define('tool-card', ToolCard);