Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Member Spotlights - CommunityConnect Hub</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌟</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eff6ff', | |
| 100: '#dbeafe', | |
| 200: '#bfdbfe', | |
| 300: '#93c5fd', | |
| 400: '#60a5fa', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| 800: '#1e40af', | |
| 900: '#1e3a8a', | |
| }, | |
| secondary: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 200: '#99f6e4', | |
| 300: '#5eead4', | |
| 400: '#2dd4bf', | |
| 500: '#14b8a6', | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| 800: '#115e59', | |
| 900: '#134e4a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation Component --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-primary-600 to-secondary-600 text-white py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h1 class="text-4xl lg:text-5xl font-bold mb-4">Member Spotlights</h1> | |
| <p class="text-xl text-primary-100">Meet the amazing individuals who make our community special.</p> | |
| </div> | |
| </section> | |
| <!-- Filter Section --> | |
| <section class="py-8 bg-white border-b"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-wrap gap-4 justify-center"> | |
| <button class="filter-btn px-6 py-2 bg-primary-600 text-white rounded-full hover:bg-primary-700 transition-colors" data-filter="all"> | |
| All Members | |
| </button> | |
| <button class="filter-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition-colors" data-filter="volunteer"> | |
| Volunteers | |
| </button> | |
| <button class="filter-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition-colors" data-filter="staff"> | |
| Staff | |
| </button> | |
| <button class="filter-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition-colors" data-filter="leader"> | |
| Community Leaders | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Members Grid --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div id="members-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Members will be loaded here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Success Stories --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">Success Stories</h2> | |
| <div class="w-24 h-1 bg-secondary-500 mx-auto"></div> | |
| </div> | |
| <div id="stories-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Stories will be loaded here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Join Community CTA --> | |
| <section class="py-20 bg-gradient-to-br from-primary-600 to-secondary-600 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Become a Community Star</h2> | |
| <p class="text-xl mb-8 text-primary-100">Join our community and make a difference in people's lives.</p> | |
| <a href="get-involved.html" class="bg-white text-primary-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors inline-block"> | |
| Join Our Community | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer Component --> | |
| <custom-footer></custom-footer> | |
| <!-- Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script src="api.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| feather.replace(); | |
| let allMembers = []; | |
| let currentFilter = 'all'; | |
| try { | |
| allMembers = await api.getMemberSpotlights(12); | |
| renderMembers(allMembers); | |
| } catch (error) { | |
| document.getElementById('members-container').innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load members at this time.</div>'; | |
| } | |
| // Load success stories | |
| try { | |
| const stories = await api.getSuccessStories(); | |
| document.getElementById('stories-container').innerHTML = stories.map(story => ` | |
| <div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition-shadow"> | |
| <div class="flex items-center mb-4"> | |
| <img src="${story.avatar}" alt="${story.name}" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">${story.name}</h4> | |
| <p class="text-sm text-gray-600">${story.role}</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"${story.story}"</p> | |
| <div class="flex items-center text-secondary-600"> | |
| <i data-feather="award" class="w-5 h-5 mr-2"></i> | |
| <span class="text-sm font-medium">${story.achievement}</span> | |
| </div> | |
| </div> | |
| `).join(''); | |
| feather.replace(); | |
| } catch (error) { | |
| document.getElementById('stories-container').innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load stories at this time.</div>'; | |
| } | |
| // Filter functionality | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| // Update button styles | |
| document.querySelectorAll('.filter-btn').forEach(b => { | |
| b.className = 'filter-btn px-6 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition-colors'; | |
| }); | |
| e.target.className = 'filter-btn px-6 py-2 bg-primary-600 text-white rounded-full hover:bg-primary-700 transition-colors'; | |
| // Filter members | |
| currentFilter = e.target.dataset.filter; | |
| const filtered = currentFilter === 'all' | |
| ? allMembers | |
| : allMembers.filter(m => m.category === currentFilter); | |
| renderMembers(filtered); | |
| }); | |
| }); | |
| function renderMembers(members) { | |
| const container = document.getElementById('members-container'); | |
| if (members.length === 0) { | |
| container.innerHTML = '<div class="col-span-full text-center text-gray-500">No members found for this category.</div>'; | |
| return; | |
| } | |
| container.innerHTML = members.map(member => ` | |
| <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1 text-center"> | |
| <div class="relative inline-block mb-4"> | |
| <img src="${member.avatar}" alt="${member.name}" class="w-32 h-32 rounded-full mx-auto object-cover border-4 border-white shadow-lg"> | |
| <span class="absolute bottom-0 right-0 bg-${getBadgeColor(member.category)}-500 text-white px-2 py-1 rounded-full text-xs"> | |
| ${member.category} | |
| </span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">${member.name}</h3> | |
| <p class="text-secondary-600 text-sm mb-3">${member.role}</p> | |
| <p class="text-gray-600 text-sm mb-4 italic">"${member.testimonial}"</p> | |
| <div class="flex justify-center items-center mb-4"> | |
| ${member.rating ? ` | |
| <div class="flex text-yellow-400"> | |
| ${Array(5).fill().map((_, i) => ` | |
| <i data-feather="${i < member.rating ? 'star' : 'star'}" class="w-4 h-4 ${i >= member.rating ? 'text-gray-300' : ''}"></i> | |
| `).join('')} | |
| </div> | |
| ` : ''} | |
| </div> | |
| <div class="flex justify-center space-x-3"> | |
| ${member.socialLinks ? member.socialLinks.map(link => ` | |
| <a href="${link.url}" class="text-gray-400 hover:text-primary-600 transition-colors"> | |
| <i data-feather="${link.icon}" class="w-5 h-5"></i> | |
| </a> | |
| `).join('') : ''} | |
| </div> | |
| </div> | |
| `).join(''); | |
| feather.replace(); | |
| } | |
| function getBadgeColor(category) { | |
| const colors = { | |
| volunteer: 'green', | |
| staff: 'blue', | |
| leader: 'purple' | |
| }; | |
| return colors[category] || 'gray'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |