calvindev/african-wisdom-academy

1class CustomProgramCard extends HTMLElement {2    connectedCallback() {3        const title = this.getAttribute('title') || 'Programme';4        const description = this.getAttribute('description') || 'Description du programme';5        const icon = this.getAttribute('icon') || 'book';6        const image = this.getAttribute('image') || 'http://static.photos/education/640x360/1';7        8        this.attachShadow({ mode: 'open' });9        this.shadowRoot.innerHTML = `10            <style>11                .program-card {12                    transition: all 0.3s ease;13                    transform: translateY(20px);14                    opacity: 0;15                }16                .program-card:hover {17                    transform: translateY(-5px);18                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);19                }20                .animate-fadeInUp {21                    animation: fadeInUp 0.6s ease-out forwards;22                }23                @keyframes fadeInUp {24                    from {25                        opacity: 0;26                        transform: translateY(20px);27                    }28                    to {29                        opacity: 1;30                        transform: translateY(0);31                    }32                }33                .program-image {34                    height: 200px;35                    background-size: cover;36                    background-position: center;37                    transition: all 0.5s ease;38                }39                .program-card:hover .program-image {40                    transform: scale(1.05);41                }42            </style>43            <div class="program-card bg-white rounded-lg overflow-hidden shadow-md">44                <div class="program-image" style="background-image: url('${image}');"></div>45                <div class="p-6">46                    <div class="bg-black text-white w-12 h-12 rounded-full flex items-center justify-center mb-4">47                        <i data-feather="${icon}"></i>48                    </div>49                    <h3 class="text-xl font-bold mb-2">${title}</h3>50                    <p class="text-gray-600 mb-4">${description}</p>51                    <a href="#" class="text-black font-medium flex items-center hover:text-gray-700 transition">52                        En savoir plus53                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>54                    </a>55                </div>56            </div>57            58            <script>59                feather.replace();60            </script>61        `;62    }63}64 65customElements.define('custom-program-card', CustomProgramCard);