Hugging Face's logo

Spaces:
dodey917
/
communityconnect-hub
Running

App Files Community
communityconnect-hub / index.html
dodey917's picture
dodey917
Create a community organization website with welcome hero, about our mission, programs and services offered, event calendar, member spotlights, resources library, donation/support options, and get involved form. with full backend integration api processor
9d36be7 verified
raw
history blame contribute delete
15.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CommunityConnect Hub - Building Stronger Communities Together</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="relative bg-gradient-to-br from-primary-600 to-secondary-600 text-white overflow-hidden">
 <div class="absolute inset-0 bg-black opacity-20"></div>
 <div class="relative container mx-auto px-6 py-24 lg:py-32">
 <div class="grid lg:grid-cols-2 gap-12 items-center">
 <div>
 <h1 class="text-4xl lg:text-6xl font-bold mb-6 animate-fade-in">
 Welcome to CommunityConnect Hub
 </h1>
 <p class="text-xl lg:text-2xl mb-8 text-primary-100">
 Empowering communities through collaboration, education, and meaningful connections.
 </p>
 <div class="flex flex-col sm:flex-row gap-4">
 <a href="#get-involved" class="bg-white text-primary-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
 Get Involved
 </a>
 <a href="programs.html" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-primary-600 transition-colors">
 Our Programs
 </a>
 </div>
 </div>
 <div class="hidden lg:block">
 <img src="https://static.photos/people/640x360/42" alt="Community" class="rounded-2xl shadow-2xl">
 </div>
 </div>
 </div>
 </section>
<!-- Mission Section -->
 <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">Our Mission</h2>
 <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
 </div>
 <div class="grid md:grid-cols-3 gap-8">
 <div class="text-center p-6 rounded-xl hover:shadow-xl transition-shadow">
 <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i data-feather="users" class="w-8 h-8 text-primary-600"></i>
 </div>
 <h3 class="text-xl font-semibold mb-3">Unite Communities</h3>
 <p class="text-gray-600">Bringing people together regardless of background to build lasting relationships and support networks.</p>
 </div>
 <div class="text-center p-6 rounded-xl hover:shadow-xl transition-shadow">
 <div class="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i data-feather="book-open" class="w-8 h-8 text-secondary-600"></i>
 </div>
 <h3 class="text-xl font-semibold mb-3">Educate & Empower</h3>
 <p class="text-gray-600">Providing resources and learning opportunities to help community members thrive and grow.</p>
 </div>
 <div class="text-center p-6 rounded-xl hover:shadow-xl transition-shadow">
 <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i data-feather="heart" class="w-8 h-8 text-primary-600"></i>
 </div>
 <h3 class="text-xl font-semibold mb-3">Make Impact</h3>
 <p class="text-gray-600">Creating positive change through targeted programs and collaborative community initiatives.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Programs Preview -->
 <section class="py-20 bg-gray-50">
 <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">Our Programs & Services</h2>
 <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
 </div>
 <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
 <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-all hover:-translate-y-1">
 <i data-feather="award" class="w-12 h-12 text-primary-500 mb-4"></i>
 <h3 class="text-lg font-semibold mb-2">Youth Programs</h3>
 <p class="text-gray-600 text-sm mb-4">Mentorship and educational programs for young community members.</p>
 <a href="programs.html" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
 </div>
 <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-all hover:-translate-y-1">
 <i data-feather="briefcase" class="w-12 h-12 text-secondary-500 mb-4"></i>
 <h3 class="text-lg font-semibold mb-2">Career Development</h3>
 <p class="text-gray-600 text-sm mb-4">Job training and career advancement opportunities.</p>
 <a href="programs.html" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
 </div>
 <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-all hover:-translate-y-1">
 <i data-feather="activity" class="w-12 h-12 text-primary-500 mb-4"></i>
 <h3 class="text-lg font-semibold mb-2">Health & Wellness</h3>
 <p class="text-gray-600 text-sm mb-4">Health initiatives and wellness programs for all ages.</p>
 <a href="programs.html" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
 </div>
 <div class="bg-white rounded-xl p-6 hover:shadow-lg transition-all hover:-translate-y-1">
 <i data-feather="calendar" class="w-12 h-12 text-secondary-500 mb-4"></i>
 <h3 class="text-lg font-semibold mb-2">Community Events</h3>
 <p class="text-gray-600 text-sm mb-4">Regular events and gatherings to strengthen bonds.</p>
 <a href="programs.html" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
 </div>
 </div>
 </div>
 </section>
<!-- Upcoming Events -->
 <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">Upcoming Events</h2>
 <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
 </div>
 <div id="events-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Events will be loaded here -->
 </div>
 <div class="text-center mt-8">
 <a href="events.html" class="inline-flex items-center bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition-colors">
 View All Events
 <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
 </a>
 </div>
 </div>
 </section>
<!-- Member Spotlights -->
 <section class="py-20 bg-gradient-to-br from-primary-50 to-secondary-50">
 <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">Member Spotlights</h2>
 <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
 </div>
 <div id="spotlights-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Member spotlights will be loaded here -->
 </div>
 <div class="text-center mt-8">
 <a href="members.html" class="inline-flex items-center bg-secondary-600 text-white px-6 py-3 rounded-lg hover:bg-secondary-700 transition-colors">
 Meet All Members
 <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
 </a>
 </div>
 </div>
 </section>
<!-- CTA Section -->
 <section id="get-involved" class="py-20 bg-primary-600 text-white">
 <div class="container mx-auto px-6 text-center">
 <h2 class="text-3xl lg:text-4xl font-bold mb-4">Ready to Make a Difference?</h2>
 <p class="text-xl mb-8 text-primary-100">Join us in building a stronger, more connected community.</p>
 <div class="flex flex-col sm:flex-row gap-4 justify-center">
 <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">
 Get Involved Now
 </a>
 <a href="donate.html" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-primary-600 transition-colors">
 Support Our Mission
 </a>
 </div>
 </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>
 // Load events and spotlights
 document.addEventListener('DOMContentLoaded', async () => {
 feather.replace();
// Load upcoming events
 const eventsContainer = document.getElementById('events-container');
 eventsContainer.innerHTML = '<div class="col-span-full text-center py-8">Loading events...</div>';
try {
 const events = await api.getUpcomingEvents(3);
 eventsContainer.innerHTML = events.map(event => `
 <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow">
 <div class="flex items-center mb-4">
 <div class="bg-primary-100 p-3 rounded-lg mr-4">
 <i data-feather="calendar" class="w-6 h-6 text-primary-600"></i>
 </div>
 <div>
 <p class="text-sm text-gray-500">${new Date(event.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric' })}</p>
 <p class="text-sm text-gray-500">${event.time}</p>
 </div>
 </div>
 <h3 class="text-lg font-semibold mb-2">${event.title}</h3>
 <p class="text-gray-600 text-sm mb-4">${event.description}</p>
 <p class="text-sm text-gray-500 flex items-center">
 <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
 ${event.location}
 </p>
 </div>
 `).join('');
 feather.replace();
 } catch (error) {
 eventsContainer.innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load events at this time.</div>';
 }
// Load member spotlights
 const spotlightsContainer = document.getElementById('spotlights-container');
 spotlightsContainer.innerHTML = '<div class="col-span-full text-center py-8">Loading member spotlights...</div>';
try {
 const members = await api.getMemberSpotlights(3);
 spotlightsContainer.innerHTML = members.map(member => `
 <div class="bg-white rounded-xl p-6 text-center hover:shadow-xl transition-shadow">
 <img src="${member.avatar}" alt="${member.name}" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover">
 <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">"${member.testimonial}"</p>
 <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();
 } catch (error) {
 spotlightsContainer.innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load member spotlights at this time.</div>';
 }
 });
 </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>