components/featured-section.js

class CustomFeaturedSection extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                }
                .featured-card {
                    transition: all 0.3s ease;
                    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
                }
                .featured-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.25);
                }
                .category-tag {
                    transition: all 0.3s ease;
                }
                .category-tag:hover {
                    background: linear-gradient(135