generate the topics from resours making it works - Follow Up Deployment

index.html

@@ -168,8 +168,16 @@
                 
                 <div class="bg-white rounded-xl shadow-md p-6 mb-6">
                     <h2 class="text-xl font-bold text-dark mb-4 heading">Premium Resources</h2>
-                    <div class="space-y-4">
-                        <a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition">
+                    <div class="flex flex-wrap gap-2 mb-4">
+                        <button class="filter-btn px-3 py-1 text-sm rounded-full bg-primary text-white" data-filter="all">All</button>
+                        <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="cardiology">Cardiology</button>
+                        <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="pathology">Pathology</button>
+                        <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="general">General</button>
+                        <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="book">Books</button>
+                        <button class="filter-btn px-3 py-1 text-sm rounded-full bg-gray-200 hover:bg-gray-300" data-filter="video">Videos</button>
+                    </div>
+                    <div class="space-y-4" id="resourcesList">
+                        <a href="#" class="resource-item flex items-center p-3 hover:bg-gray-50 rounded-lg transition" data-topic="cardiology" data-type="book">
                             <div class="bg-primary bg-opacity-10 p-2 rounded-lg">
                                 <i class="fas fa-book-medical text-primary text-lg"></i>
                             </div>
@@ -178,7 +186,7 @@
                                 <div class="text-sm text-gray-600 mt-1">Comprehensive review</div>
                             </div>
                         </a>
-                        <a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition">
+                        <a href="#" class="resource-item flex items-center p-3 hover:bg-gray-50 rounded-lg transition" data-topic="general" data-type="handbook">
                             <div class="bg-accent bg-opacity-10 p-2 rounded-lg">
                                 <i class="fas fa-book-open text-accent text-lg"></i>
                             </div>
@@ -187,7 +195,7 @@
                                 <div class="text-sm text-gray-600 mt-1">Practical guidance</div>
                             </div>
                         </a>
-                        <a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg transition">
+                        <a href="#" class="resource-item flex items-center p-3 hover:bg-gray-50 rounded-lg transition" data-topic="pathology" data-type="video">
                             <div class="bg-success bg-opacity-10 p-2 rounded-lg">
                                 <i class="fas fa-heartbeat text-success text-lg"></i>
                             </div>
@@ -590,6 +598,32 @@
     </footer>
 
     <script>
+        // Resource filtering functionality
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                // Update active filter button
+                document.querySelectorAll('.filter-btn').forEach(b => {
+                    b.classList.remove('bg-primary', 'text-white');
+                    b.classList.add('bg-gray-200');
+                });
+                this.classList.remove('bg-gray-200');
+                this.classList.add('bg-primary', 'text-white');
+                
+                const filter = this.dataset.filter;
+                const resources = document.querySelectorAll('.resource-item');
+                
+                resources.forEach(resource => {
+                    if (filter === 'all' || 
+                        resource.dataset.topic === filter || 
+                        resource.dataset.type === filter) {
+                        resource.style.display = 'flex';
+                    } else {
+                        resource.style.display = 'none';
+                    }
+                });
+            });
+        });
+
         // Tab functionality
         document.getElementById('overviewTab').addEventListener('click', function() {
             openTab('overviewSection');