Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Get Involved - 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">Get Involved</h1> | |
| <p class="text-xl text-primary-100">There are many ways to contribute to our community's success.</p> | |
| </div> | |
| </section> | |
| <!-- Involvement Options --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl p-6 hover:shadow-xl transition-shadow text-center"> | |
| <div class="bg-primary-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="users" class="w-10 h-10 text-primary-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Volunteer</h3> | |
| <p class="text-gray-600 mb-4">Give your time and skills to make a direct impact in the community.</p> | |
| <button class="text-primary-600 font-medium hover:underline">Find Opportunities →</button> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 hover:shadow-xl transition-shadow text-center"> | |
| <div class="bg-secondary-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="briefcase" class="w-10 h-10 text-secondary-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Partner With Us</h3> | |
| <p class="text-gray-600 mb-4">Collaborate with us as a business or organization.</p> | |
| <button class="text-primary-600 font-medium hover:underline">Learn More →</button> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 hover:shadow-xl transition-shadow text-center"> | |
| <div class="bg-primary-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="megaphone" class="w-10 h-10 text-primary-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Spread the Word</h3> | |
| <p class="text-gray-600 mb-4">Help raise awareness about our mission and programs.</p> | |
| <button class="text-primary-600 font-medium hover:underline">Share Our Story →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Get Involved Form --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">Join Our Community</h2> | |
| <div class="w-24 h-1 bg-secondary-500 mx-auto"></div> | |
| <p class="mt-4 text-gray-600">Fill out the form below and we'll be in touch with opportunities that match your interests.</p> | |
| </div> | |
| <form id="get-involved-form" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">First Name *</label> | |
| <input type="text" required class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="John"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Last Name *</label> | |
| <input type="text" required class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Doe"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Email *</label> | |
| <input type="email" required class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="john@example.com"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label> | |
| <input type="tel" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="(555) 123-4567"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">I'm interested in: *</label> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Volunteering</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Youth Programs</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Events</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Fundraising</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Partnership</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Other</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">How would you like to contribute?</label> | |
| <select class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <option>Select an option</option> | |
| <option>Regular Volunteer</option> | |
| <option>Occasional Volunteer</option> | |
| <option>Skills-based Volunteer</option> | |
| <option>Board Member</option> | |
| <option>Community Ambassador</option> | |
| <option>Corporate Partner</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Skills & Expertise</label> | |
| <textarea rows="3" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Tell us about your skills and how you'd like to use them..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Availability</label> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Weekdays</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Weekends</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Mornings</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm">Evenings</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Tell us why you want to get involved</label> | |
| <textarea rows="4" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Share your motivation..."></textarea> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" required class="mr-2 text-primary-600 focus:ring-primary-500"> | |
| <span class="text-sm text-gray-700">I agree to receive communications about volunteer opportunities and community updates.</span> | |
| </label> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button type="submit" class="bg-primary-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-primary-700 transition-colors text-lg"> | |
| Submit Application | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <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">Frequently Asked Questions</h2> | |
| <div class="w-24 h-1 bg-secondary-500 mx-auto"></div> | |
| </div> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <details class="bg-white rounded-lg p-6 shadow-sm"> | |
| <summary class="font-semibold cursor-pointer">What kind of volunteer opportunities are available?</summary> | |
| <p class="mt-3 text-gray-600">We offer a wide range of volunteer opportunities including event support, youth mentoring, administrative assistance, fundraising, and more. We match volunteers with roles based on their skills, interests, and availability.</p> | |
| </details> | |
| <details class="bg-white rounded-lg p-6 shadow-sm"> | |
| <summary class="font-semibold cursor-pointer">How much time do I need to commit?</summary> | |
| <p class="mt-3 text-gray-600">We have opportunities ranging from one-time events to regular weekly commitments. You can choose what works best for your schedule - even a few hours a month can make a difference!</p> | |
| </details> | |
| <details class="bg-white rounded-lg p-6 shadow-sm"> | |
| <summary class="font-semibold cursor-pointer">Do I need specific skills to volunteer?</summary> | |
| <p class="mt-3 text-gray-600">Not at all! We welcome volunteers with all skill levels. Whether you're great with people, organized, creative, or just willing to help, there's a place for you in our community.</p> | |
| </details> | |
| <details class="bg-white rounded-lg p-6 shadow-sm"> | |
| <summary class="font-semibold cursor-pointer">What happens after I submit the form?</summary> | |
| <p class="mt-3 text-gray-600">Our volunteer coordinator will review your application and contact you within 3-5 business days to discuss your interests and next steps. We'll then match you with opportunities that align with your preferences.</p> | |
| </details> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact 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">Still Have Questions?</h2> | |
| <p class="text-xl mb-8 text-primary-100">We're here to help you find the perfect way to contribute.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="mailto:volunteer@communityconnect.org" class="bg-white text-primary-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors inline-flex items-center"> | |
| <i data-feather="mail" class="w-5 h-5 mr-2"></i> | |
| Email Us | |
| </a> | |
| <a href="tel:555-123-4567" class="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary-600 transition-colors inline-flex items-center"> | |
| <i data-feather="phone" class="w-5 h-5 mr-2"></i> | |
| Call Us | |
| </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> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| document.getElementById('get-involved-form').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(e.target); | |
| const data = Object.fromEntries(formData.entries()); | |
| try { | |
| // Collect checked interests | |
| const interests = []; | |
| e.target.querySelectorAll('input[type="checkbox"]:checked').forEach(checkbox => { | |
| if (checkbox.nextElementSibling) { | |
| interests.push(checkbox.nextElementSibling.textContent); | |
| } | |
| }); | |
| const submissionData = { | |
| ...data, | |
| interests: interests, | |
| submittedAt: new Date().toISOString() | |
| }; | |
| // Simulate form submission | |
| await api.submitGetInvolvedForm(submissionData); | |
| alert('Thank you for your interest! We\'ll be in touch soon with opportunities that match your preferences.'); | |
| e.target.reset(); | |
| } catch (error) { | |
| alert('Error submitting form. Please try again.'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |