Spaces:
Running
Running
File size: 10,892 Bytes
9d36be7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 | <!DOCTYPE html>
<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> |