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

README.md

@@ -1,10 +1,13 @@
 ---
-title: Communityconnect Hub
-emoji: 👁
+title: CommunityConnect Hub 🌟
 colorFrom: blue
-colorTo: red
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

api.js

@@ -0,0 +1,365 @@
+// API simulation layer for CommunityConnect Hub
+class CommunityAPI {
+    constructor() {
+        this.baseURL = 'https://api.communityconnect.org';
+    }
+
+    // Simulate API delay
+    delay(ms = 500) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    // Events API
+    async getUpcomingEvents(limit = 20) {
+        await this.delay();
+        return [
+            {
+                id: 1,
+                title: "Community Health Fair",
+                date: "2024-01-15",
+                time: "10:00 AM - 4:00 PM",
+                location: "Community Center",
+                description: "Free health screenings, wellness workshops, and nutrition advice for all ages.",
+                category: "social",
+                attendees: "Open to all"
+            },
+            {
+                id: 2,
+                title: "Youth Mentorship Program Kickoff",
+                date: "2024-01-20",
+                time: "6:00 PM - 8:00 PM",
+                location: "Main Hall",
+                description: "Join us for the launch of our new youth mentorship initiative.",
+                category: "volunteer",
+                attendees: "Registration required"
+            },
+            {
+                id: 3,
+                title: "Career Development Workshop",
+                date: "2024-01-25",
+                time: "9:00 AM - 12:00 PM",
+                location: "Conference Room A",
+                description: "Learn resume writing, interview skills, and job search strategies.",
+                category: "workshop",
+                attendees: "Limited seats"
+            },
+            {
+                id: 4,
+                title: "Annual Fundraising Gala",
+                date: "2024-02-10",
+                time: "7:00 PM - 11:00 PM",
+                location: "Grand Ballroom",
+                description: "An evening of celebration and fundraising for our community programs.",
+                category: "fundraiser",
+                attendees: "Ticketed event"
+            }
+        ].slice(0, limit);
+    }
+
+    // Member spotlights API
+    async getMemberSpotlights(limit = 12) {
+        await this.delay();
+        const members = [
+            {
+                id: 1,
+                name: "Sarah Johnson",
+                role: "Community Leader",
+                avatar: "https://static.photos/people/200x200/1",
+                testimonial: "Being part of this community has transformed my life. The support and opportunities here are incredible.",
+                category: "leader",
+                rating: 5,
+                socialLinks: [
+                    { icon: "linkedin", url: "#" },
+                    { icon: "twitter", url: "#" }
+                ]
+            },
+            {
+                id: 2,
+                name: "Michael Chen",
+                role: "Volunteer Coordinator",
+                avatar: "https://static.photos/people/200x200/2",
+                testimonial: "I've found my purpose here helping others. Every day brings new opportunities to make a difference.",
+                category: "volunteer",
+                rating: 5,
+                socialLinks: [
+                    { icon: "facebook", url: "#" },
+                    { icon: "instagram", url: "#" }
+                ]
+            },
+            {
+                id: 3,
+                name: "Emily Rodriguez",
+                role: "Program Director",
+                avatar: "https://static.photos/people/200x200/3",
+                testimonial: "Our programs are changing lives daily. I'm proud to be part of such an impactful organization.",
+                category: "staff",
+                rating: 5,
+                socialLinks: [
+                    { icon: "linkedin", url: "#" },
+                    { icon: "mail", url: "#" }
+                ]
+            },
+            {
+                id: 4,
+                name: "David Kim",
+                role: "Youth Mentor",
+                avatar: "https://static.photos/people/200x200/4",
+                testimonial: "Mentoring young people is the most rewarding work I've ever done. Seeing them succeed is priceless.",
+                category: "volunteer",
+                rating: 5
+            },
+            {
+                id: 5,
+                name: "Lisa Thompson",
+                role: "Board Member",
+                avatar: "https://static.photos/people/200x200/5",
+                testimonial: "This organization represents the best of our community - collaboration, compassion, and commitment.",
+                category: "leader",
+                rating: 5
+            },
+            {
+                id: 6,
+                name: "James Wilson",
+                role: "Operations Manager",
+                avatar: "https://static.photos/people/200x200/6",
+                testimonial: "Keeping our programs running smoothly is my passion. Behind the scenes work that makes magic happen!",
+                category: "staff",
+                rating: 4
+            }
+        ];
+        return members.slice(0, limit);
+    }
+
+    // Programs API
+    async getPrograms() {
+        await this.delay();
+        return [
+            {
+                id: 1,
+                title: "Youth Mentorship",
+                description: "Pair young community members with experienced mentors for guidance and support.",
+                icon: "users",
+                color: "primary",
+                features: [
+                    "One-on-one mentoring",
+                    "Academic support",
+                    "Career guidance",
+                    "Personal development workshops"
+                ]
+            },
+            {
+                id: 2,
+                title: "Career Development",
+                description: "Comprehensive job training and career advancement resources.",
+                icon: "briefcase",
+                color: "secondary",
+                features: [
+                    "Resume workshops",
+                    "Interview preparation",
+                    "Job placement assistance",
+                    "Skills training programs"
+                ]
+            },
+            {
+                id: 3,
+                title: "Health & Wellness",
+                description: "Programs promoting physical and mental well-being for all ages.",
+                icon: "heart",
+                color: "primary",
+                features: [
+                    "Health screenings",
+                    "Fitness classes",
+                    "Mental health support",
+                    "Nutrition workshops"
+                ]
+            },
+            {
+                id: 4,
+                title: "Senior Services",
+                description: "Support and activities tailored for our senior community members.",
+                icon: "home",
+                color: "secondary",
+                features: [
+                    "Social gatherings",
+                    "Transportation assistance",
+                    "Health monitoring",
+                    "Educational programs"
+                ]
+            },
+            {
+                id: 5,
+                title: "Education & Tutoring",
+                description: "Academic support and educational enrichment programs.",
+                icon: "book-open",
+                color: "primary",
+                features: [
+                    "After-school tutoring",
+                    "Adult education classes",
+                    "STEM workshops",
+                    "Literacy programs"
+                ]
+            },
+            {
+                id: 6,
+                title: "Community Events",
+                description: "Regular events fostering community connection and engagement.",
+                icon: "calendar",
+                color: "secondary",
+                features: [
+                    "Seasonal festivals",
+                    "Cultural celebrations",
+                    "Community clean-ups",
+                    "Sports tournaments"
+                ]
+            }
+        ];
+    }
+
+    // Services API
+    async getServices() {
+        await this.delay();
+        return [
+            {
+                id: 1,
+                title: "Legal Aid Clinic",
+                description: "Free legal consultation services for community members in need.",
+                icon: "gavel",
+                tags: ["Legal", "Free", "Appointment Required"]
+            },
+            {
+                id: 2,
+                title: "Food Bank",
+                description: "Emergency food assistance for families and individuals.",
+                icon: "shopping-cart",
+                tags: ["Food Security", "Emergency", "Weekly Distribution"]
+            },
+            {
+                id: 3,
+                title: "Childcare Services",
+                description: "Affordable childcare for working parents and guardians.",
+                icon: "baby",
+                tags: ["Childcare", "Affordable", "Licensed"]
+            },
+            {
+                id: 4,
+                title: "Transportation Services",
+                description: "Transportation assistance for medical appointments and community events.",
+                icon: "truck",
+                tags: ["Transport", "Medical", "Senior Focus"]
+            }
+        ];
+    }
+
+    // Resources API
+    async getResources() {
+        await this.delay();
+        return [
+            {
+                id: 1,
+                title: "Community Resource Guide",
+                description: "Comprehensive guide to all local services and support systems.",
+                type: "guides",
+                featured: true,
+                tags: ["Guide", "Resource", "Local"],
+                downloads: 1240,
+                date: "2024-01-10"
+            },
+            {
+                id: 2,
+                title: "Resume Template Pack",
+                description: "Professional resume templates for various industries and experience levels.",
+                type: "templates",
+                featured: true,
+                tags: ["Resume", "Job Search", "Career"],
+                downloads: 890,
+                date: "2024-01-08"
+            },
+            {
+                id: 3,
+                title: "Budget Planning Worksheet",
+                description: "Interactive worksheet for personal and family budget planning.",
+                type: "templates",
+                tags: ["Finance", "Planning", "Budget"],
+                downloads: 567,
+                date: "2024-01-05"
+            },
+            {
+                id: 4,
+                title: "Volunteer Training Videos",
+                description: "Video series on effective volunteering and community engagement.",
+                type: "videos",
+                featured: true,
+                tags: ["Training", "Volunteer", "Video"],
+                downloads: 432,
+                date: "2024-01-03"
+            },
+            {
+                id: 5,
+                title: "Health Information Packet",
+                description: "Important health resources and wellness information.",
+                type: "documents",
+                tags: ["Health", "Wellness", "Information"],
+                downloads: 780,
+                date: "2024-01-02"
+            },
+            {
+                id: 6,
+                title: "Youth Activity Guide",
+                description: "Fun and educational activities for children and teens.",
+                type: "guides",
+                tags: ["Youth", "Activities", "Education"],
+                downloads: 654,
+                date: "2023-12-28"
+            }
+        ];
+    }
+
+    // Success Stories API
+    async getSuccessStories() {
+        await this.delay();
+        return [
+            {
+                id: 1,
+                name: "Maria Garcia",
+                role: "Program Graduate",
+                avatar: "https://static.photos/people/200x200/7",
+                story: "The career development program helped me land my dream job. I'm now financially independent and giving back to the community.",
+                achievement: "Secured Management Position"
+            },
+            {
+                id: 2,
+                name: "Robert Taylor",
+                role: "Youth Program Participant",
+                avatar: "https://static.photos/people/200x200/8",
+                story: "The mentorship program changed my life. My mentor guided me through college applications and scholarship opportunities.",
+                achievement: "Full Scholarship Winner"
+            },
+            {
+                id: 3,
+                name: "Amanda Lee",
+                role: "Volunteer of the Year",
+                avatar: "https://static.photos/people/200x200/9",
+                story: "Volunteering here gave me purpose. I've helped organize over 20 events and mentored 15 young people this year alone.",
+                achievement: "500+ Volunteer Hours"
+            }
+        ];
+    }
+
+    // Form submission APIs
+    async processDonation(donationData) {
+        await this.delay();
+        console.log('Processing donation:', donationData);
+        // In a real implementation, this would send data to a backend server
+        return { success: true, message: 'Donation processed successfully' };
+    }
+
+    async submitGetInvolvedForm(formData) {
+        await this.delay();
+        console.log('Submitting involvement form:', formData);
+        // In a real implementation, this would save to a database and trigger notifications
+        return { success: true, message: 'Form submitted successfully' };
+    }
+}
+
+// Initialize API
+const api = new CommunityAPI();

components/footer.js

@@ -0,0 +1,222 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: #1f2937;
+                    color: white;
+                    padding: 3rem 1rem 1rem;
+                }
+                
+                .footer-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                }
+                
+                .footer-grid {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    gap: 2rem;
+                    margin-bottom: 2rem;
+                }
+                
+                .footer-section h3 {
+                    font-size: 1.25rem;
+                    font-weight: bold;
+                    margin-bottom: 1rem;
+                    color: #60a5fa;
+                }
+                
+                .footer-links {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+                
+                .footer-link {
+                    color: #d1d5db;
+                    text-decoration: none;
+                    transition: color 0.3s;
+                }
+                
+                .footer-link:hover {
+                    color: #60a5fa;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                
+                .social-link {
+                    width: 40px;
+                    height: 40px;
+                    background: #374151;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #d1d5db;
+                    transition: background 0.3s, color 0.3s;
+                }
+                
+                .social-link:hover {
+                    background: #2563eb;
+                    color: white;
+                }
+                
+                .newsletter-form {
+                    display: flex;
+                    margin-top: 1rem;
+                }
+                
+                .newsletter-input {
+                    flex: 1;
+                    padding: 0.5rem 1rem;
+                    border: none;
+                    border-radius: 0.375rem 0 0 0.375rem;
+                    background: #374151;
+                    color: white;
+                }
+                
+                .newsletter-input::placeholder {
+                    color: #9ca3af;
+                }
+                
+                .newsletter-button {
+                    padding: 0.5rem 1.25rem;
+                    background: #2563eb;
+                    color: white;
+                    border: none;
+                    border-radius: 0 0.375rem 0.375rem 0;
+                    cursor: pointer;
+                    transition: background 0.3s;
+                }
+                
+                .newsletter-button:hover {
+                    background: #1d4ed8;
+                }
+                
+                .footer-bottom {
+                    padding-top: 2rem;
+                    border-top: 1px solid #374151;
+                    display: flex;
+                    flex-direction: column;
+                    sm:flex-direction: row;
+                    justify-content: space-between;
+                    align-items: center;
+                    gap: 1rem;
+                }
+                
+                .footer-bottom-text {
+                    color: #9ca3af;
+                    font-size: 0.875rem;
+                }
+                
+                .footer-bottom-links {
+                    display: flex;
+                    gap: 1rem;
+                }
+                
+                .footer-bottom-link {
+                    color: #9ca3af;
+                    text-decoration: none;
+                    font-size: 0.875rem;
+                    transition: color 0.3s;
+                }
+                
+                .footer-bottom-link:hover {
+                    color: #60a5fa;
+                }
+                
+                @media (min-width: 640px) {
+                    .footer-grid {
+                        grid-template-columns: 2fr 1fr 1fr 1fr;
+                    }
+                    
+                    .footer-bottom {
+                        flex-direction: row;
+                    }
+                }
+            </style>
+            
+            <footer>
+                <div class="footer-container">
+                    <div class="footer-grid">
+                        <div class="footer-section">
+                            <h3>CommunityConnect Hub</h3>
+                            <p class="text-gray-300 mb-4">
+                                Building stronger communities through collaboration, education, and meaningful connections.
+                            </p>
+                            <div class="social-links">
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+                                    </svg>
+                                </a>
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+                                    </svg>
+                                </a>
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                                    </svg>
+                                </a>
+                                <a href="#" class="social-link">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.857-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.857a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 110 6.666 3.333 3.333 0 010-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"/>
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Quick Links</h3>
+                            <div class="footer-links">
+                                <a href="index.html" class="footer-link">Home</a>
+                                <a href="programs.html" class="footer-link">Programs</a>
+                                <a href="events.html" class="footer-link">Events</a>
+                                <a href="members.html" class="footer-link">Members</a>
+                                <a href="resources.html" class="footer-link">Resources</a>
+                            </div>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Get Involved</h3>
+                            <div class="footer-links">
+                                <a href="get-involved.html" class="footer-link">Volunteer</a>
+                                <a href="donate.html" class="footer-link">Donate</a>
+                                <a href="#" class="footer-link">Partner With Us</a>
+                                <a href="#" class="footer-link">Join Newsletter</a>
+                            </div>
+                        </div>
+                        
+                        <div class="footer-section">
+                            <h3>Stay Updated</h3>
+                            <p class="text-gray-300 mb-4">Subscribe to our newsletter for the latest updates.</p>
+                            <form class="newsletter-form" onsubmit="handleNewsletterSubmit(event)">
+                                <input type="email" class="newsletter-input" placeholder="Your email" required>
+                                <button type="submit" class="newsletter-button">→</button>
+                            </form>
+                        </div>
+                    </div>
+                    
+                    <div class="footer-bottom">
+                        <p class="footer-bottom-text">© 2024 CommunityConnect Hub. All rights reserved.</p>
+                        <div class="footer-bottom-links">
+                            <a href="#" class="footer-bottom-link">Privacy Policy</a>
+                            <a href="#" class="footer-bottom-link">Terms of Service</a>
+                            <a href="#" class="footer-bottom-link">Contact</a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,172 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background: white;
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                    position: sticky;
+                    top: 0;
+                    z-index: 1000;
+                }
+                
+                .nav-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 1rem 1.5rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                    color: #2563eb;
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+                }
+                
+                .logo-text {
+                    margin-left: 0.5rem;
+                }
+                
+                .nav-links {
+                    display: none;
+                    gap: 2rem;
+                    align-items: center;
+                }
+                
+                .nav-link {
+                    color: #4b5563;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: color 0.3s;
+                    position: relative;
+                }
+                
+                .nav-link:hover {
+                    color: #2563eb;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -0.25rem;
+                    left: 0;
+                    right: 0;
+                    height: 2px;
+                    background: #2563eb;
+                    transform: scaleX(0);
+                    transition: transform 0.3s;
+                }
+                
+                .nav-link:hover::after {
+                    transform: scaleX(1);
+                }
+                
+                .nav-button {
+                    background: #2563eb;
+                    color: white;
+                    padding: 0.5rem 1.25rem;
+                    border-radius: 0.5rem;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: background 0.3s;
+                }
+                
+                .nav-button:hover {
+                    background: #1d4ed8;
+                }
+                
+                .mobile-menu-button {
+                    display: block;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 0.5rem;
+                }
+                
+                .mobile-menu {
+                    display: none;
+                    position: absolute;
+                    top: 100%;
+                    left: 0;
+                    right: 0;
+                    background: white;
+                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+                    padding: 1rem;
+                }
+                
+                .mobile-menu.active {
+                    display: block;
+                }
+                
+                .mobile-link {
+                    display: block;
+                    padding: 0.75rem 0;
+                    color: #4b5563;
+                    text-decoration: none;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+                
+                .mobile-link:last-child {
+                    border-bottom: none;
+                }
+                
+                @media (min-width: 768px) {
+                    .nav-links {
+                        display: flex;
+                    }
+                    
+                    .mobile-menu-button {
+                        display: none;
+                    }
+                    
+                    .mobile-menu {
+                        display: none !important;
+                    }
+                }
+            </style>
+            
+            <nav>
+                <div class="nav-container">
+                    <a href="index.html" class="logo">
+                        🌟
+                        <span class="logo-text">CommunityConnect</span>
+                    </a>
+                    
+                    <div class="nav-links">
+                        <a href="index.html" class="nav-link">Home</a>
+                        <a href="programs.html" class="nav-link">Programs</a>
+                        <a href="events.html" class="nav-link">Events</a>
+                        <a href="members.html" class="nav-link">Members</a>
+                        <a href="resources.html" class="nav-link">Resources</a>
+                        <a href="donate.html" class="nav-button">Donate</a>
+                    </div>
+                    
+                    <button class="mobile-menu-button" onclick="toggleMobileMenu()">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="3" y1="12" x2="21" y2="12"></line>
+                            <line x1="3" y1="6" x2="21" y2="6"></line>
+                            <line x1="3" y1="18" x2="21" y2="18"></line>
+                        </svg>
+                    </button>
+                    
+                    <div class="mobile-menu" id="mobile-menu">
+                        <a href="index.html" class="mobile-link">Home</a>
+                        <a href="programs.html" class="mobile-link">Programs</a>
+                        <a href="events.html" class="mobile-link">Events</a>
+                        <a href="members.html" class="mobile-link">Members</a>
+                        <a href="resources.html" class="mobile-link">Resources</a>
+                        <a href="donate.html" class="mobile-link">Donate</a>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

donate.html

@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Donate & Support - 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">Donate & Support</h1>
+            <p class="text-xl text-primary-100">Your generosity helps us continue our mission of building stronger communities.</p>
+        </div>
+    </section>
+
+    <!-- Donation Progress -->
+    <section class="py-12 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto">
+                <div class="text-center mb-8">
+                    <h2 class="text-3xl font-bold text-gray-800 mb-4">Annual Campaign Progress</h2>
+                    <p class="text-gray-600 mb-6">Help us reach our goal of $100,000 this year</p>
+                    <div class="relative">
+                        <div class="bg-gray-200 rounded-full h-8 mb-2">
+                            <div class="bg-gradient-to-r from-primary-500 to-secondary-500 h-8 rounded-full transition-all duration-500" style="width: 75%"></div>
+                        </div>
+                        <div class="flex justify-between text-sm">
+                            <span class="font-semibold">$75,000 raised</span>
+                            <span class="font-semibold">$100,000 goal</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Donation Options -->
+    <section class="py-12">
+        <div class="container mx-auto px-6">
+            <div class="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
+                <!-- One-time Donation -->
+                <div class="bg-white rounded-xl shadow-lg p-8">
+                    <h3 class="text-2xl font-bold mb-6">Make a One-Time Donation</h3>
+                    <form id="one-time-form">
+                        <div class="grid grid-cols-3 gap-4 mb-6">
+                            <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="25">
+                                $25
+                            </button>
+                            <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="50">
+                                $50
+                            </button>
+                            <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="100">
+                                $100
+                            </button>
+                            <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="250">
+                                $250
+                            </button>
+                            <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="500">
+                                $500
+                            </button>
+                            <input type="number" placeholder="Other" class="px-4 py-3 border-2 rounded-lg focus:outline-none focus:border-primary-500" id="custom-amount">
+                        </div>
+                        
+                        <div class="mb-4">
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Donation Type</label>
+                            <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
+                                <option>General Support</option>
+                                <option>Youth Programs</option>
+                                <option>Education</option>
+                                <option>Health & Wellness</option>
+                                <option>Infrastructure</option>
+                            </select>
+                        </div>
+                        
+                        <div class="mb-6">
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Dedication (Optional)</label>
+                            <input type="text" placeholder="In honor of..." class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
+                        </div>
+                        
+                        <button type="submit" class="w-full bg-primary-600 text-white py-3 rounded-lg font-semibold hover:bg-primary-700 transition-colors">
+                            Donate Now
+                        </button>
+                    </form>
+                </div>
+
+                <!-- Monthly Donation -->
+                <div class="bg-gradient-to-br from-secondary-50 to-primary-50 rounded-xl shadow-lg p-8">
+                    <div class="flex items-center mb-6">
+                        <i data-feather="repeat" class="w-8 h-8 text-secondary-600 mr-3"></i>
+                        <h3 class="text-2xl font-bold">Become a Monthly Partner</h3>
+                    </div>
+                    <p class="text-gray-600 mb-6">Join our community of monthly donors and provide steady support for our programs throughout the year.</p>
+                    
+                    <form id="monthly-form">
+                        <div class="grid grid-cols-2 gap-4 mb-6">
+                            <button type="button" class="monthly-amount-btn py-3 bg-white border-2 rounded-lg hover:border-secondary-500 hover:bg-secondary-50 transition-colors" data-amount="10">
+                                $10/mo
+                            </button>
+                            <button type="button" class="monthly-amount-btn py-3 bg-white border-2 rounded-lg hover:border-secondary-500 hover:bg-secondary-50 transition-colors" data-amount="25">
+                                $25/mo
+                            </button>
+                            <button type="button" class="monthly-amount-btn py-3 bg-white border-2 rounded-lg hover:border-secondary-500 hover:bg-secondary-50 transition-colors" data-amount="50">
+                                $50/mo
+                            </button>
+                            <button type="button" class="monthly-amount-btn py-3 bg-white border-2 rounded-lg hover:border-secondary-500 hover:bg-secondary-50 transition-colors" data-amount="100">
+                                $100/mo
+                            </button>
+                        </div>
+                        
+                        <button type="submit" class="w-full bg-secondary-600 text-white py-3 rounded-lg font-semibold hover:bg-secondary-700 transition-colors">
+                            Start Monthly Donation
+                        </button>
+                    </form>
+                    
+                    <div class="mt-6 p-4 bg-white rounded-lg">
+                        <p class="text-sm text-gray-600">
+                            <strong>Monthly donors receive:</strong><br>
+                            ✓ Quarterly impact reports<br>
+                            ✓ Exclusive event invitations<br>
+                            ✓ Special recognition
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Other Ways to Give -->
+    <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">Other Ways to Give</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="text-center p-6 rounded-xl hover:shadow-lg transition-shadow">
+                    <div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="credit-card" class="w-8 h-8 text-primary-600"></i>
+                    </div>
+                    <h3 class="font-semibold mb-2">Corporate Sponsorship</h3>
+                    <p class="text-sm text-gray-600 mb-4">Partner with us as a corporate sponsor</p>
+                    <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
+                </div>
+                <div class="text-center p-6 rounded-xl hover:shadow-lg transition-shadow">
+                    <div class="bg-secondary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="gift" class="w-8 h-8 text-secondary-600"></i>
+                    </div>
+                    <h3 class="font-semibold mb-2">In-Kind Donations</h3>
+                    <p class="text-sm text-gray-600 mb-4">Donate goods and services</p>
+                    <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
+                </div>
+                <div class="text-center p-6 rounded-xl hover:shadow-lg transition-shadow">
+                    <div class="bg-primary-100 w-16 h-16 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="font-semibold mb-2">Volunteer</h3>
+                    <p class="text-sm text-gray-600 mb-4">Give your time and skills</p>
+                    <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
+                </div>
+                <div class="text-center p-6 rounded-xl hover:shadow-lg transition-shadow">
+                    <div class="bg-secondary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="heart" class="w-8 h-8 text-secondary-600"></i>
+                    </div>
+                    <h3 class="font-semibold mb-2">Planned Giving</h3>
+                    <p class="text-sm text-gray-600 mb-4">Include us in your estate planning</p>
+                    <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Impact Section -->
+    <section class="py-20 bg-gradient-to-br from-primary-600 to-secondary-600 text-white">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold mb-8">Your Impact in Action</h2>
+                <div class="grid md:grid-cols-3 gap-8">
+                    <div>
+                        <div class="text-4xl font-bold mb-2">5,000+</div>
+                        <p class="text-primary-100">Lives Impacted Annually</p>
+                    </div>
+                    <div>
+                        <div class="text-4xl font-bold mb-2">95%</div>
+                        <p class="text-primary-100">Goes Directly to Programs</p>
+                    </div>
+                    <div>
+                        <div class="text-4xl font-bold mb-2">4-Star</div>
+                        <p class="text-primary-100">Charity Navigator Rating</p>
+                    </div>
+                </div>
+            </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();
+            
+            let selectedAmount = 0;
+            let selectedMonthlyAmount = 0;
+            
+            // One-time donation amount buttons
+            document.querySelectorAll('.amount-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    document.querySelectorAll('.amount-btn').forEach(b => {
+                        b.classList.remove('border-primary-500', 'bg-primary-50');
+                        b.classList.add('border-gray-300');
+                    });
+                    e.target.classList.remove('border-gray-300');
+                    e.target.classList.add('border-primary-500', 'bg-primary-50');
+                    selectedAmount = parseInt(e.target.dataset.amount);
+                    document.getElementById('custom-amount').value = '';
+                });
+            });
+            
+            // Custom amount input
+            document.getElementById('custom-amount').addEventListener('input', (e) => {
+                document.querySelectorAll('.amount-btn').forEach(b => {
+                    b.classList.remove('border-primary-500', 'bg-primary-50');
+                    b.classList.add('border-gray-300');
+                });
+                selectedAmount = parseInt(e.target.value) || 0;
+            });
+            
+            // Monthly donation amount buttons
+            document.querySelectorAll('.monthly-amount-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    document.querySelectorAll('.monthly-amount-btn').forEach(b => {
+                        b.classList.remove('border-secondary-500', 'bg-secondary-50');
+                        b.classList.add('border-gray-300');
+                    });
+                    e.target.classList.remove('border-gray-300');
+                    e.target.classList.add('border-secondary-500', 'bg-secondary-50');
+                    selectedMonthlyAmount = parseInt(e.target.dataset.amount);
+                });
+            });
+            
+            // Form submissions
+            document.getElementById('one-time-form').addEventListener('submit', async (e) => {
+                e.preventDefault();
+                
+                if (!selectedAmount && !document.getElementById('custom-amount').value) {
+                    alert('Please select or enter a donation amount');
+                    return;
+                }
+                
+                const amount = selectedAmount || parseInt(document.getElementById('custom-amount').value);
+                
+                try {
+                    // Simulate donation processing
+                    await api.processDonation({
+                        type: 'one-time',
+                        amount: amount,
+                        date: new Date().toISOString()
+                    });
+                    
+                    alert(`Thank you for your one-time donation of $${amount}!`);
+                    e.target.reset();
+                    selectedAmount = 0;
+                    document.querySelectorAll('.amount-btn').forEach(b => {
+                        b.classList.remove('border-primary-500', 'bg-primary-50');
+                        b.classList.add('border-gray-300');
+                    });
+                } catch (error) {
+                    alert('Error processing donation. Please try again.');
+                }
+            });
+            
+            document.getElementById('monthly-form').addEventListener('submit', async (e) => {
+                e.preventDefault();
+                
+                if (!selectedMonthlyAmount) {
+                    alert('Please select a monthly donation amount');
+                    return;
+                }
+                
+                try {
+                    // Simulate monthly donation setup
+                    await api.processDonation({
+                        type: 'monthly',
+                        amount: selectedMonthlyAmount,
+                        date: new Date().toISOString()
+                    });
+                    
+                    alert(`Thank you for becoming a monthly donor with $${selectedMonthlyAmount}/month!`);
+                    e.target.reset();
+                    selectedMonthlyAmount = 0;
+                    document.querySelectorAll('.monthly-amount-btn').forEach(b => {
+                        b.classList.remove('border-secondary-500', 'bg-secondary-50');
+                        b.classList.add('border-gray-300');
+                    });
+                } catch (error) {
+                    alert('Error setting up monthly donation. Please try again.');
+                }
+            });
+        });
+    </script>
+</body>
+</html>

events.html

@@ -0,0 +1,316 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Events Calendar - 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">Events Calendar</h1>
+            <p class="text-xl text-primary-100">Join us for exciting community events and activities.</p>
+        </div>
+    </section>
+
+    <!-- Calendar View Toggle -->
+    <section class="py-8 bg-white border-b">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
+                <div class="flex space-x-4">
+                    <button id="list-view-btn" class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
+                        List View
+                    </button>
+                    <button id="calendar-view-btn" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                        Calendar View
+                    </button>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <select id="month-filter" class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
+                        <option value="">All Months</option>
+                        <option value="1">January</option>
+                        <option value="2">February</option>
+                        <option value="3">March</option>
+                        <option value="4">April</option>
+                        <option value="5">May</option>
+                        <option value="6">June</option>
+                        <option value="7">July</option>
+                        <option value="8">August</option>
+                        <option value="9">September</option>
+                        <option value="10">October</option>
+                        <option value="11">November</option>
+                        <option value="12">December</option>
+                    </select>
+                    <select id="category-filter" class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
+                        <option value="">All Categories</option>
+                        <option value="workshop">Workshop</option>
+                        <option value="social">Social</option>
+                        <option value="volunteer">Volunteer</option>
+                        <option value="fundraiser">Fundraiser</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Events List -->
+    <section id="events-list" class="py-12">
+        <div class="container mx-auto px-6">
+            <div id="events-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Events will be loaded here -->
+            </div>
+        </div>
+    </section>
+
+    <!-- Calendar View (Hidden by default) -->
+    <section id="events-calendar" class="py-12 hidden">
+        <div class="container mx-auto px-6">
+            <div class="bg-white rounded-xl shadow-lg p-6">
+                <div id="calendar-header" class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold"></h2>
+                    <div class="flex space-x-2">
+                        <button id="prev-month" class="p-2 hover:bg-gray-100 rounded-lg">
+                            <i data-feather="chevron-left" class="w-5 h-5"></i>
+                        </button>
+                        <button id="next-month" class="p-2 hover:bg-gray-100 rounded-lg">
+                            <i data-feather="chevron-right" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
+                <div id="calendar-grid" class="grid grid-cols-7 gap-2">
+                    <!-- Calendar will be generated here -->
+                </div>
+            </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', async () => {
+            feather.replace();
+            
+            let currentView = 'list';
+            let events = [];
+            
+            // Load all events
+            try {
+                events = await api.getUpcomingEvents(20);
+                renderEventsList(events);
+                initializeCalendar(events);
+            } catch (error) {
+                document.getElementById('events-container').innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load events at this time.</div>';
+            }
+            
+            // View toggle
+            document.getElementById('list-view-btn').addEventListener('click', () => {
+                currentView = 'list';
+                document.getElementById('events-list').classList.remove('hidden');
+                document.getElementById('events-calendar').classList.add('hidden');
+                document.getElementById('list-view-btn').className = 'px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors';
+                document.getElementById('calendar-view-btn').className = 'px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors';
+            });
+            
+            document.getElementById('calendar-view-btn').addEventListener('click', () => {
+                currentView = 'calendar';
+                document.getElementById('events-list').classList.add('hidden');
+                document.getElementById('events-calendar').classList.remove('hidden');
+                document.getElementById('calendar-view-btn').className = 'px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors';
+                document.getElementById('list-view-btn').className = 'px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors';
+            });
+            
+            // Filter events
+            function filterEvents() {
+                const monthFilter = document.getElementById('month-filter').value;
+                const categoryFilter = document.getElementById('category-filter').value;
+                
+                let filtered = events;
+                
+                if (monthFilter) {
+                    filtered = filtered.filter(event => new Date(event.date).getMonth() + 1 == monthFilter);
+                }
+                
+                if (categoryFilter) {
+                    filtered = filtered.filter(event => event.category === categoryFilter);
+                }
+                
+                renderEventsList(filtered);
+            }
+            
+            document.getElementById('month-filter').addEventListener('change', filterEvents);
+            document.getElementById('category-filter').addEventListener('change', filterEvents);
+            
+            function renderEventsList(eventsToRender) {
+                const container = document.getElementById('events-container');
+                
+                if (eventsToRender.length === 0) {
+                    container.innerHTML = '<div class="col-span-full text-center text-gray-500">No events found.</div>';
+                    return;
+                }
+                
+                container.innerHTML = eventsToRender.map(event => `
+                    <div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow">
+                        <div class="flex items-start justify-between mb-4">
+                            <div>
+                                <span class="inline-block px-3 py-1 bg-${getEventColor(event.category)}-100 text-${getEventColor(event.category)}-700 text-sm rounded-full mb-2">
+                                    ${event.category}
+                                </span>
+                                <h3 class="text-lg font-semibold">${event.title}</h3>
+                            </div>
+                            <button class="text-gray-400 hover:text-primary-600">
+                                <i data-feather="bookmark" class="w-5 h-5"></i>
+                            </button>
+                        </div>
+                        <div class="space-y-2 text-sm text-gray-600 mb-4">
+                            <p class="flex items-center">
+                                <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
+                                ${new Date(event.date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                            </p>
+                            <p class="flex items-center">
+                                <i data-feather="clock" class="w-4 h-4 mr-2"></i>
+                                ${event.time}
+                            </p>
+                            <p class="flex items-center">
+                                <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
+                                ${event.location}
+                            </p>
+                            <p class="flex items-center">
+                                <i data-feather="users" class="w-4 h-4 mr-2"></i>
+                                ${event.attendees || 'Open to all'}
+                            </p>
+                        </div>
+                        <p class="text-gray-600 mb-4">${event.description}</p>
+                        <button class="w-full bg-primary-600 text-white py-2 rounded-lg hover:bg-primary-700 transition-colors">
+                            Register Now
+                        </button>
+                    </div>
+                `).join('');
+                
+                feather.replace();
+            }
+            
+            function getEventColor(category) {
+                const colors = {
+                    workshop: 'primary',
+                    social: 'secondary',
+                    volunteer: 'green',
+                    fundraiser: 'yellow'
+                };
+                return colors[category] || 'gray';
+            }
+            
+            function initializeCalendar(eventsData) {
+                const today = new Date();
+                const currentMonth = today.getMonth();
+                const currentYear = today.getFullYear();
+                
+                function renderCalendar(month = currentMonth, year = currentYear) {
+                    const firstDay = new Date(year, month, 1).getDay();
+                    const daysInMonth = new Date(year, month + 1, 0).getDate();
+                    
+                    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+                    
+                    document.querySelector('#calendar-header h2').textContent = `${monthNames[month]} ${year}`;
+                    
+                    let calendarHTML = '';
+                    
+                    // Day headers
+                    const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+                    dayNames.forEach(day => {
+                        calendarHTML += `<div class="text-center font-semibold text-gray-600 p-2">${day}</div>`;
+                    });
+                    
+                    // Empty cells
+                    for (let i = 0; i < firstDay; i++) {
+                        calendarHTML += '<div></div>';
+                    }
+                    
+                    // Days
+                    for (let day = 1; day <= daysInMonth; day++) {
+                        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+                        const dayEvents = eventsData.filter(e => e.date.startsWith(dateStr));
+                        const hasEvents = dayEvents.length > 0;
+                        const isToday = today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
+                        
+                        calendarHTML += `
+                            <div class="relative p-2 border rounded-lg ${hasEvents ? 'bg-primary-50 border-primary-200' : ''} ${isToday ? 'bg-primary-100 border-primary-400' : ''} hover:bg-gray-50 cursor-pointer">
+                                <div class="font-semibold text-sm">${day}</div>
+                                ${hasEvents ? `
+                                    <div class="mt-1">
+                                        <span class="text-xs bg-primary-600 text-white px-1 py-0.5 rounded">${dayEvents.length} event${dayEvents.length > 1 ? 's' : ''}</span>
+                                    </div>
+                                ` : ''}
+                            </div>
+                        `;
+                    }
+                    
+                    document.getElementById('calendar-grid').innerHTML = calendarHTML;
+                }
+                
+                document.getElementById('prev-month').addEventListener('click', () => {
+                    const month = parseInt(document.querySelector('#calendar-header h2').textContent.split(' ')[0]) - 1;
+                    const year = parseInt(document.querySelector('#calendar-header h2').textContent.split(' ')[1]);
+                    renderCalendar(month - 1 < 0 ? 11 : month - 1, month - 1 < 0 ? year - 1 : year);
+                });
+                
+                document.getElementById('next-month').addEventListener('click', () => {
+                    const month = parseInt(document.querySelector('#calendar-header h2').textContent.split(' ')[0]) - 1;
+                    const year = parseInt(document.querySelector('#calendar-header h2').textContent.split(' ')[1]);
+                    renderCalendar(month + 1 > 11 ? 0 : month + 1, month + 1 > 11 ? year + 1 : year);
+                });
+                
+                renderCalendar();
+            }
+        });
+    </script>
+</body>
+</html>

get-involved.html

@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<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>

index.html

@@ -1,19 +1,274 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!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>

members.html

@@ -0,0 +1,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>

programs.html

@@ -0,0 +1,164 @@
+<!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>

resources.html

@@ -0,0 +1,329 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resources Library - 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">Resources Library</h1>
+            <p class="text-xl text-primary-100">Access valuable resources, guides, and tools to support your journey.</p>
+        </div>
+    </section>
+
+    <!-- Search Bar -->
+    <section class="py-8 bg-white border-b">
+        <div class="container mx-auto px-6">
+            <div class="max-w-2xl mx-auto">
+                <div class="relative">
+                    <input 
+                        type="text" 
+                        id="search-input"
+                        placeholder="Search resources..." 
+                        class="w-full px-6 py-4 pr-12 border rounded-full focus:outline-none focus:ring-2 focus:ring-primary-500 text-lg"
+                    >
+                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary-600 text-white p-3 rounded-full hover:bg-primary-700 transition-colors">
+                        <i data-feather="search" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <div class="flex flex-wrap gap-2 mt-4 justify-center">
+                    <span class="text-sm text-gray-600">Popular searches:</span>
+                    <button class="search-tag text-sm bg-gray-100 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">Job Training</button>
+                    <button class="search-tag text-sm bg-gray-100 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">Health Guide</button>
+                    <button class="search-tag text-sm bg-gray-100 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">Education</button>
+                    <button class="search-tag text-sm bg-gray-100 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">Legal Help</button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Categories -->
+    <section class="py-8">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-wrap justify-center gap-4">
+                <button class="category-btn px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors" data-category="all">
+                    All Resources
+                </button>
+                <button class="category-btn px-6 py-2 bg-white border rounded-lg hover:bg-gray-50 transition-colors" data-category="guides">
+                    Guides
+                </button>
+                <button class="category-btn px-6 py-2 bg-white border rounded-lg hover:bg-gray-50 transition-colors" data-category="templates">
+                    Templates
+                </button>
+                <button class="category-btn px-6 py-2 bg-white border rounded-lg hover:bg-gray-50 transition-colors" data-category="videos">
+                    Videos
+                </button>
+                <button class="category-btn px-6 py-2 bg-white border rounded-lg hover:bg-gray-50 transition-colors" data-category="documents">
+                    Documents
+                </button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Featured Resources -->
+    <section class="py-12 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">Featured Resources</h2>
+                <div class="w-24 h-1 bg-secondary-500 mx-auto"></div>
+            </div>
+            <div id="featured-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Featured resources will be loaded here -->
+            </div>
+        </div>
+    </section>
+
+    <!-- All Resources -->
+    <section class="py-12">
+        <div class="container mx-auto px-6">
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-2xl font-bold text-gray-800">All Resources</h2>
+                <select id="sort-select" class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
+                    <option value="recent">Most Recent</option>
+                    <option value="popular">Most Popular</option>
+                    <option value="name">Name (A-Z)</option>
+                </select>
+            </div>
+            <div id="resources-container" class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Resources will be loaded here -->
+            </div>
+        </div>
+    </section>
+
+    <!-- Newsletter Signup -->
+    <section class="py-20 bg-primary-600 text-white">
+        <div class="container mx-auto px-6">
+            <div class="max-w-2xl mx-auto text-center">
+                <h2 class="text-3xl font-bold mb-4">Stay Updated</h2>
+                <p class="text-xl mb-8 text-primary-100">Get the latest resources and community updates delivered to your inbox.</p>
+                <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
+                    <input type="email" placeholder="Enter your email" class="flex-1 px-4 py-3 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
+                    <button type="submit" class="bg-white text-primary-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
+                        Subscribe
+                    </button>
+                </form>
+            </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', async () => {
+            feather.replace();
+            
+            let allResources = [];
+            let filteredResources = [];
+            let currentCategory = 'all';
+            
+            try {
+                allResources = await api.getResources();
+                filteredResources = allResources;
+                renderFeaturedResources(allResources.filter(r => r.featured));
+                renderResources(filteredResources);
+            } catch (error) {
+                document.getElementById('resources-container').innerHTML = '<div class="col-span-full text-center text-gray-500">Unable to load resources at this time.</div>';
+            }
+            
+            // Search functionality
+            document.getElementById('search-input').addEventListener('input', (e) => {
+                const searchTerm = e.target.value.toLowerCase();
+                filteredResources = allResources.filter(resource => {
+                    const matchesSearch = resource.title.toLowerCase().includes(searchTerm) || 
+                                          resource.description.toLowerCase().includes(searchTerm) ||
+                                          resource.tags.some(tag => tag.toLowerCase().includes(searchTerm));
+                    const matchesCategory = currentCategory === 'all' || resource.type === currentCategory;
+                    return matchesSearch && matchesCategory;
+                });
+                renderResources(filteredResources);
+            });
+            
+            // Category filter
+            document.querySelectorAll('.category-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    // Update button styles
+                    document.querySelectorAll('.category-btn').forEach(b => {
+                        b.className = 'category-btn px-6 py-2 bg-white border rounded-lg hover:bg-gray-50 transition-colors';
+                    });
+                    e.target.className = 'category-btn px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors';
+                    
+                    currentCategory = e.target.dataset.category;
+                    filterResources();
+                });
+            });
+            
+            // Sort functionality
+            document.getElementById('sort-select').addEventListener('change', (e) => {
+                const sortBy = e.target.value;
+                let sorted = [...filteredResources];
+                
+                switch(sortBy) {
+                    case 'recent':
+                        sorted.sort((a, b) => new Date(b.date) - new Date(a.date));
+                        break;
+                    case 'popular':
+                        sorted.sort((a, b) => b.downloads - a.downloads);
+                        break;
+                    case 'name':
+                        sorted.sort((a, b) => a.title.localeCompare(b.title));
+                        break;
+                }
+                
+                renderResources(sorted);
+            });
+            
+            // Search tags
+            document.querySelectorAll('.search-tag').forEach(tag => {
+                tag.addEventListener('click', () => {
+                    document.getElementById('search-input').value = tag.textContent;
+                    document.getElementById('search-input').dispatchEvent(new Event('input'));
+                });
+            });
+            
+            function filterResources() {
+                filteredResources = currentCategory === 'all' 
+                    ? allResources 
+                    : allResources.filter(r => r.type === currentCategory);
+                renderResources(filteredResources);
+            }
+            
+            function renderFeaturedResources(resources) {
+                const container = document.getElementById('featured-container');
+                container.innerHTML = resources.map(resource => `
+                    <div class="bg-gradient-to-br from-primary-50 to-secondary-50 rounded-xl p-6 hover:shadow-lg transition-shadow">
+                        <div class="bg-white w-12 h-12 rounded-lg flex items-center justify-center mb-4">
+                            <i data-feather="${getResourceIcon(resource.type)}" class="w-6 h-6 text-primary-600"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold mb-2">${resource.title}</h3>
+                        <p class="text-gray-600 mb-4">${resource.description}</p>
+                        <button class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition-colors">
+                            Download
+                        </button>
+                    </div>
+                `).join('');
+                feather.replace();
+            }
+            
+            function renderResources(resources) {
+                const container = document.getElementById('resources-container');
+                
+                if (resources.length === 0) {
+                    container.innerHTML = '<div class="col-span-full text-center text-gray-500">No resources found.</div>';
+                    return;
+                }
+                
+                container.innerHTML = resources.map(resource => `
+                    <div class="bg-white rounded-xl p-6 shadow hover:shadow-lg transition-shadow">
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="bg-${getTypeColor(resource.type)}-100 p-2 rounded-lg">
+                                <i data-feather="${getResourceIcon(resource.type)}" class="w-6 h-6 text-${getTypeColor(resource.type)}-600"></i>
+                            </div>
+                            <span class="text-xs text-gray-500">${resource.downloads || 0} downloads</span>
+                        </div>
+                        <h3 class="font-semibold mb-2 line-clamp-2">${resource.title}</h3>
+                        <p class="text-sm text-gray-600 mb-4 line-clamp-3">${resource.description}</p>
+                        <div class="flex flex-wrap gap-1 mb-4">
+                            ${resource.tags.slice(0, 3).map(tag => `
+                                <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">${tag}</span>
+                            `).join('')}
+                        </div>
+                        <button onclick="downloadResource('${resource.id}')" class="w-full bg-${getTypeColor(resource.type)}-600 text-white py-2 rounded-lg hover:bg-${getTypeColor(resource.type)}-700 transition-colors text-sm">
+                            Download
+                        </button>
+                    </div>
+                `).join('');
+                
+                feather.replace();
+            }
+            
+            function getResourceIcon(type) {
+                const icons = {
+                    guides: 'book-open',
+                    templates: 'file-text',
+                    videos: 'play-circle',
+                    documents: 'folder'
+                };
+                return icons[type] || 'file';
+            }
+            
+            function getTypeColor(type) {
+                const colors = {
+                    guides: 'primary',
+                    templates: 'secondary',
+                    videos: 'purple',
+                    documents: 'green'
+                };
+                return colors[type] || 'gray';
+            }
+            
+            window.downloadResource = async (resourceId) => {
+                try {
+                    // Simulate download
+                    const resource = allResources.find(r => r.id === resourceId);
+                    if (resource) {
+                        // Increment download count
+                        resource.downloads = (resource.downloads || 0) + 1;
+                        renderResources(filteredResources);
+                        
+                        // In a real app, this would trigger a file download
+                        alert(`Downloading: ${resource.title}`);
+                    }
+                } catch (error) {
+                    alert('Error downloading resource');
+                }
+            };
+        });
+    </script>
+</body>
+</html>

script.js

@@ -0,0 +1,87 @@
+// Global JavaScript functions and utilities
+
+// Initialize Feather icons after page load
+document.addEventListener('DOMContentLoaded', () => {
+    feather.replace();
+});
+
+// Mobile menu toggle
+function toggleMobileMenu() {
+    const menu = document.querySelector('.mobile-menu');
+    if (menu) {
+        menu.classList.toggle('hidden');
+    }
+}
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});
+
+// Add animation on scroll
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('animate-fade-in');
+        }
+    });
+}, observerOptions);
+
+// Observe all sections
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('section').forEach(section => {
+        observer.observe(section);
+    });
+});
+
+// Form validation helper
+function validateForm(formElement) {
+    let isValid = true;
+    const inputs = formElement.querySelectorAll('input[required], textarea[required], select[required]');
+    
+    inputs.forEach(input => {
+        if (!input.value.trim()) {
+            isValid = false;
+            input.classList.add('border-red-500');
+        } else {
+            input.classList.remove('border-red-500');
+        }
+    });
+    
+    return isValid;
+}
+
+// Show notification
+function showNotification(message, type = 'success') {
+    const notification = document.createElement('div');
+    notification.className = `fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg z-50 ${
+        type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
+    }`;
+    notification.innerHTML = `
+        <div class="flex items-center">
+            <i data-feather="${type === 'success' ? 'check-circle' : 'alert-circle'}" class="w-5 h-5 mr-2"></i>
+            <span>${message}</span>
+        </div>
+    `;
+    
+    document.body.appendChild(notification);
+    feather.replace();
+    
+    setTimeout(() => {
+        notification.remove();
+    }, 5000);
+}

style.css

@@ -1,28 +1,72 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom animations and utilities */
+@keyframes fade-in {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.animate-fade-in {
+    animation: fade-in 0.8s ease-out;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
 }
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #3b82f6;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #2563eb;
+}
+
+/* Focus styles for accessibility */
+button:focus,
+a:focus,
+input:focus,
+select:focus,
+textarea:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+
+/* Loading animation */
+.loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #3b82f6;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}