Spaces:

dodey917
/

communityconnect-hub

Running

communityconnect-hub / programs.html

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 3 months ago

raw

history blame contribute delete

7.7 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Programs & Services - 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">Our Programs & Services</h1>
	<p class="text-xl text-primary-100">Discover the wide range of programs designed to support and empower our community.</p>
	</div>
	</section>

	<!-- Programs Grid -->
	<section class="py-20">
	<div class="container mx-auto px-6">
	<div id="programs-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Programs will be loaded here -->
	</div>
	</div>
	</section>

	<!-- Services 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">Additional Services</h2>
	<div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
	</div>
	<div id="services-container" class="grid md:grid-cols-2 gap-8">
	<!-- Services will be loaded here -->
	</div>
	</div>
	</section>

	<!-- CTA Section -->
	<section class="py-20 bg-primary-600 text-white">
	<div class="container mx-auto px-6 text-center">
	<h2 class="text-3xl font-bold mb-4">Ready to Join a Program?</h2>
	<p class="text-xl mb-8 text-primary-100">Take the first step towards personal and community growth.</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">
	Get Started Today
	</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();

	// Load programs
	const programsContainer = document.getElementById('programs-container');
	programsContainer.innerHTML = '<div class="col-span-full text-center py-8">Loading programs...</div>';

	try {
	const programs = await api.getPrograms();
	programsContainer.innerHTML = programs.map(program => `
	<div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all hover:-translate-y-1">
	<div class="bg-${program.color}-100 w-16 h-16 rounded-lg flex items-center justify-center mb-4">
	<i data-feather="${program.icon}" class="w-8 h-8 text-${program.color}-600"></i>
	</div>
	<h3 class="text-xl font-semibold mb-3">${program.title}</h3>
	<p class="text-gray-600 mb-4">${program.description}</p>
	<ul class="space-y-2 mb-4">
	${program.features.map(feature => `
	<li class="flex items-start">
	<i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>
	<span class="text-sm text-gray-600">${feature}</span>
	</li>
	`).join('')}
	</ul>
	<button class="w-full bg-${program.color}-600 text-white py-2 rounded-lg hover:bg-${program.color}-700 transition-colors">
	Learn More
	</button>
	</div>
	`).join('');
	feather.replace();
	} catch (error) {
	programsContainer.innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load programs at this time.</div>';
	}

	// Load services
	const servicesContainer = document.getElementById('services-container');
	servicesContainer.innerHTML = '<div class="text-center py-8">Loading services...</div>';

	try {
	const services = await api.getServices();
	servicesContainer.innerHTML = services.map(service => `
	<div class="flex items-start space-x-4 p-6 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors">
	<div class="bg-secondary-100 p-3 rounded-lg flex-shrink-0">
	<i data-feather="${service.icon}" class="w-8 h-8 text-secondary-600"></i>
	</div>
	<div class="flex-1">
	<h3 class="text-xl font-semibold mb-2">${service.title}</h3>
	<p class="text-gray-600 mb-3">${service.description}</p>
	<div class="flex flex-wrap gap-2">
	${service.tags.map(tag => `
	<span class="bg-secondary-100 text-secondary-700 px-3 py-1 rounded-full text-sm">${tag}</span>
	`).join('')}
	</div>
	</div>
	</div>
	`).join('');
	feather.replace();
	} catch (error) {
	servicesContainer.innerHTML = '<div class="text-center text-gray-500">Unable to load services at this time.</div>';
	}
	});
	</script>
	</body>
	</html>