Create a non-profit organization website with mission statement hero, our impact statistics, current campaigns, donation form with amounts, volunteer opportunities, success stories, upcoming events, and newsletter signup.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Heartwave Foundation
-emoji: 😻
-colorFrom: indigo
-colorTo: indigo
+title: HeartWave Foundation ❤️🌊
+colorFrom: pink
+colorTo: gray
+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).

components/campaign-card.js

@@ -0,0 +1,47 @@
+class CampaignCard extends HTMLElement {
+  connectedCallback() {
+    const image = this.getAttribute('image') || '';
+    const title = this.getAttribute('title') || '';
+    const description = this.getAttribute('description') || '';
+    const progress = this.getAttribute('progress') || '0';
+    
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .progress-bar {
+          height: 8px;
+        }
+        .progress-bar::-webkit-progress-bar {
+          background-color: #e5e7eb;
+          border-radius: 4px;
+        }
+        .progress-bar::-webkit-progress-value {
+          background-color: #4f46e5;
+          border-radius: 4px;
+        }
+      </style>
+      <div class="bg-white rounded-xl shadow-md overflow-hidden h-full flex flex-col">
+        <div class="relative overflow-hidden">
+          <img src="${image}" alt="${title}" class="campaign-image w-full h-48 object-cover">
+          <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
+            <h3 class="text-xl font-bold text-white">${title}</h3>
+          </div>
+        </div>
+        <div class="p-6 flex-grow">
+          <p class="text-gray-600 mb-4">${description}</p>
+          <div class="mb-4">
+            <div class="flex justify-between text-sm text-gray-600 mb-1">
+              <span>Progress</span>
+              <span>${progress}%</span>
+            </div>
+            <progress class="progress-bar w-full" value="${progress}" max="100"></progress>
+          </div>
+          <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
+            Learn More
+          </a>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define('campaign-card', CampaignCard);

components/event-card.js

@@ -0,0 +1,5 @@
+class EventCard extends HTMLElement {
+  connectedCallback() {
+    const date = this.getAttribute('date') || '';
+    const title = this.getAttribute('title') || '';
+    const location = this.get{"ok":false,"message":"terminated"}

components/footer.js

@@ -0,0 +1,104 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .footer-link:hover {
+          color: #4f46e5;
+          transform: translateX(4px);
+        }
+        .footer-link {
+          transition: all 0.2s ease;
+        }
+        .social-icon {
+          transition: all 0.2s ease;
+        }
+        .social-icon:hover {
+          transform: translateY(-3px);
+        }
+      </style>
+      <footer class="bg-gray-900 text-white py-12 px-4">
+        <div class="max-w-6xl mx-auto">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <!-- About -->
+            <div>
+              <h3 class="text-xl font-bold mb-4 flex items-center">
+                <i data-feather="heart" class="text-red-500 mr-2"></i>
+                <span>HeartWave Foundation</span>
+              </h3>
+              <p class="text-gray-400 mb-4">Creating waves of positive change through education, healthcare, and sustainable development.</p>
+              <div class="flex space-x-4">
+                <a href="#" class="social-icon text-gray-400 hover:text-blue-400">
+                  <i data-feather="facebook"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-blue-400">
+                  <i data-feather="twitter"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-pink-500">
+                  <i data-feather="instagram"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-red-500">
+                  <i data-feather="youtube"></i>
+                </a>
+              </div>
+            </div>
+            
+            <!-- Quick Links -->
+            <div>
+              <h3 class="text-lg font-bold mb-4">Quick Links</h3>
+              <ul class="space-y-2">
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">About Us</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">Our Mission</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">Success Stories</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">Financial Reports</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">Careers</a></li>
+              </ul>
+            </div>
+            
+            <!-- Programs -->
+            <div>
+              <h3 class="text-lg font-bold mb-4">Programs</h3>
+              <ul class="space-y-2">
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">Education</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">Healthcare</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">Clean Water</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">Women Empowerment</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-white">Disaster Relief</a></li>
+              </ul>
+            </div>
+            
+            <!-- Contact -->
+            <div>
+              <h3 class="text-lg font-bold mb-4">Contact Us</h3>
+              <address class="not-italic text-gray-400">
+                <p class="flex items-center mb-2">
+                  <i data-feather="map-pin" class="mr-2"></i>
+                  123 Charity Ave, Suite 100<br>
+                  San Francisco, CA 94107
+                </p>
+                <p class="flex items-center mb-2">
+                  <i data-feather="mail" class="mr-2"></i>
+                  info@heartwave.org
+                </p>
+                <p class="flex items-center">
+                  <i data-feather="phone" class="mr-2"></i>
+                  (415) 555-0199
+                </p>
+              </address>
+            </div>
+          </div>
+          
+          <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
+            <p>© 2023 HeartWave Foundation. All rights reserved. | <a href="#" class="hover:text-white">Privacy Policy</a> | <a href="#" class="hover:text-white">Terms of Service</a></p>
+          </div>
+        </div>
+      </footer>
+      <script>
+        if (typeof feather !== 'undefined') {
+          feather.replace();
+        }
+      </script>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,77 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          transition: all 0.3s ease;
+        }
+        .navbar.scrolled {
+          background-color: white;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .nav-link {
+          position: relative;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: -2px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background-color: #4f46e5;
+          transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+          width: 100%;
+        }
+      </style>
+      <nav class="navbar fixed w-full z-50 py-4 px-6 bg-transparent">
+        <div class="max-w-6xl mx-auto flex justify-between items-center">
+          <a href="#" class="flex items-center">
+            <i data-feather="heart" class="text-red-500 mr-2"></i>
+            <span class="text-xl font-bold text-blue-600">HeartWave</span>
+          </a>
+          <div class="hidden md:flex items-center space-x-8">
+            <a href="#" class="nav-link text-gray-800 hover:text-blue-600">Home</a>
+            <a href="#impact" class="nav-link text-gray-800 hover:text-blue-600">Impact</a>
+            <a href="#campaigns" class="nav-link text-gray-800 hover:text-blue-600">Campaigns</a>
+            <a href="#donate" class="nav-link text-gray-800 hover:text-blue-600">Donate</a>
+            <a href="#volunteer" class="nav-link text-gray-800 hover:text-blue-600">Volunteer</a>
+            <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300">
+              Contact Us
+            </a>
+          </div>
+          <button class="md:hidden text-gray-800 focus:outline-none">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+      </nav>
+      <script>
+        // Navbar scroll effect
+        window.addEventListener('scroll', function() {
+          const navbar = this.shadowRoot.querySelector('.navbar');
+          if (window.scrollY > 50) {
+            navbar.classList.add('scrolled');
+          } else {
+            navbar.classList.remove('scrolled');
+          }
+        });
+        
+        // Mobile menu toggle
+        const mobileMenuButton = this.shadowRoot.querySelector('button');
+        mobileMenuButton.addEventListener('click', function() {
+          // This would toggle a mobile menu (implementation depends on your mobile menu structure)
+          console.log('Mobile menu clicked');
+        });
+        
+        // Initialize feather icons
+        if (typeof feather !== 'undefined') {
+          feather.replace();
+        }
+      </script>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/stats-card.js

@@ -0,0 +1,27 @@
+class StatsCard extends HTMLElement {
+  connectedCallback() {
+    const icon = this.getAttribute('icon') || 'activity';
+    const number = this.getAttribute('number') || '0';
+    const label = this.getAttribute('label') || 'Label';
+    
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .stat-card {
+          transition: transform 0.3s ease;
+        }
+        .stat-card:hover {
+          transform: translateY(-5px);
+        }
+      </style>
+      <div class="stat-card bg-white p-6 rounded-xl shadow-sm text-center">
+        <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+          <i data-feather="${icon}" class="text-blue-600"></i>
+        </div>
+        <h3 class="text-3xl font-bold text-gray-800 mb-2">${number}</h3>
+        <p class="text-gray-600">${label}</p>
+      </div>
+    `;
+  }
+}
+customElements.define('stats-card', StatsCard);

index.html

@@ -1,19 +1,279 @@
-<!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>HeartWave Foundation | Making Waves of Change</title>
+    <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 src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/stats-card.js"></script>
+    <script src="components/campaign-card.js"></script>
+    <script src="components/event-card.js"></script>
+    <script src="components/testimonial-card.js"></script>
+</head>
+<body class="font-sans bg-gray-50">
+    <custom-navbar></custom-navbar>
+
+    <!-- Hero Section -->
+    <section class="relative bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20 px-4">
+        <div class="max-w-6xl mx-auto text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6">Creating Waves of Change</h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Empowering communities through education, healthcare, and sustainable development initiatives worldwide.</p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="#donate" class="bg-white text-blue-600 hover:bg-blue-50 font-bold py-3 px-6 rounded-full transition duration-300">
+                    Donate Now
+                </a>
+                <a href="#volunteer" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 font-bold py-3 px-6 rounded-full transition duration-300">
+                    Volunteer
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Impact Stats -->
+    <section class="py-16 px-4 bg-white">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our Impact</h2>
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+                <stats-card icon="users" number="25,000" label="People Helped"></stats-card>
+                <stats-card icon="globe" number="15" label="Countries"></stats-card>
+                <stats-card icon="home" number="42" label="Communities"></stats-card>
+                <stats-card icon="heart" number="500+" label="Volunteers"></stats-card>
+            </div>
+        </div>
+    </section>
+
+    <!-- Current Campaigns -->
+    <section class="py-16 px-4 bg-gray-100">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Current Campaigns</h2>
+            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Join us in making a difference through our ongoing initiatives.</p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <campaign-card 
+                    image="http://static.photos/education/640x360/1" 
+                    title="Education for All"
+                    description="Building schools and providing educational materials for underprivileged children."
+                    progress="65"
+                ></campaign-card>
+                <campaign-card 
+                    image="http://static.photos/medical/640x360/2" 
+                    title="Clean Water Initiative"
+                    description="Installing water purification systems in rural communities."
+                    progress="42"
+                ></campaign-card>
+                <campaign-card 
+                    image="http://static.photos/people/640x360/3" 
+                    title="Women Empowerment"
+                    description="Vocational training and microfinance programs for women."
+                    progress="78"
+                ></campaign-card>
+            </div>
+        </div>
+    </section>
+
+    <!-- Donation Form -->
+    <section id="donate" class="py-16 px-4 bg-white">
+        <div class="max-w-4xl mx-auto bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 shadow-lg">
+            <h2 class="text-3xl font-bold text-center mb-6 text-gray-800">Make a Difference</h2>
+            <form class="space-y-6">
+                <div>
+                    <label class="block text-gray-700 mb-2">Donation Amount</label>
+                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                        <button type="button" class="donation-amount bg-white border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white py-3 px-4 rounded-lg transition duration-300">
+                            $25
+                        </button>
+                        <button type="button" class="donation-amount bg-white border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white py-3 px-4 rounded-lg transition duration-300">
+                            $50
+                        </button>
+                        <button type="button" class="donation-amount bg-white border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white py-3 px-4 rounded-lg transition duration-300">
+                            $100
+                        </button>
+                        <button type="button" class="donation-amount bg-white border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white py-3 px-4 rounded-lg transition duration-300">
+                            Custom
+                        </button>
+                    </div>
+                </div>
+                <div id="custom-amount" class="hidden">
+                    <label for="amount" class="block text-gray-700 mb-2">Enter Amount</label>
+                    <input type="number" id="amount" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                </div>
+                <div>
+                    <label for="name" class="block text-gray-700 mb-2">Full Name</label>
+                    <input type="text" id="name" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                </div>
+                <div>
+                    <label for="email" class="block text-gray-700 mb-2">Email</label>
+                    <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                </div>
+                <div>
+                    <label for="card" class="block text-gray-700 mb-2">Payment Information</label>
+                    <div class="bg-white p-4 rounded-lg border border-gray-300">
+                        <div class="flex items-center mb-4">
+                            <input type="radio" id="credit" name="payment" checked class="mr-2">
+                            <label for="credit" class="flex items-center">
+                                <i data-feather="credit-card" class="mr-2"></i>
+                                Credit Card
+                            </label>
+                        </div>
+                        <input type="text" id="card" placeholder="Card Number" class="w-full p-3 border border-gray-300 rounded-lg mb-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <div class="grid grid-cols-2 gap-4">
+                            <input type="text" placeholder="MM/YY" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <input type="text" placeholder="CVV" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                    </div>
+                </div>
+                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-6 rounded-lg transition duration-300">
+                    Donate Now
+                </button>
+            </form>
+        </div>
+    </section>
+
+    <!-- Volunteer Opportunities -->
+    <section id="volunteer" class="py-16 px-4 bg-gray-100">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Volunteer With Us</h2>
+            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Join our team of passionate volunteers making a difference around the world.</p>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                    <img src="http://static.photos/education/640x360/4" alt="Education Volunteer" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">Education Volunteer</h3>
+                        <p class="text-gray-600 mb-4">Teach basic literacy and numeracy skills in underserved communities.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Remote</span>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">6 months</span>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Part-time</span>
+                        </div>
+                        <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
+                            Apply Now
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                    <img src="http://static.photos/medical/640x360/5" alt="Medical Volunteer" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">Medical Volunteer</h3>
+                        <p class="text-gray-600 mb-4">Provide basic healthcare services in rural areas with limited access.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">On-site</span>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">3 months</span>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Full-time</span>
+                        </div>
+                        <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
+                            Apply Now
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                    <img src="http://static.photos/technology/640x360/6" alt="Tech Volunteer" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">Tech Volunteer</h3>
+                        <p class="text-gray-600 mb-4">Help develop tools and solutions for our digital initiatives.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Remote</span>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Flexible</span>
+                            <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Project-based</span>
+                        </div>
+                        <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300">
+                            Apply Now
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Success Stories -->
+    <section class="py-16 px-4 bg-white">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Success Stories</h2>
+            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Hear from those whose lives we've touched.</p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <testimonial-card 
+                    image="http://static.photos/people/200x200/7" 
+                    name="Maria Gonzalez"
+                    role="Beneficiary, Education Program"
+                    quote="Thanks to HeartWave, my children now have access to quality education and a brighter future."
+                ></testimonial-card>
+                <testimonial-card 
+                    image="http://static.photos/people/200x200/8" 
+                    name="James Wilson"
+                    role="Volunteer, Clean Water Project"
+                    quote="The most rewarding experience of my life. Seeing the impact of our work first-hand is priceless."
+                ></testimonial-card>
+                <testimonial-card 
+                    image="http://static.photos/people/200x200/9" 
+                    name="Amina Diallo"
+                    role="Women Empowerment Participant"
+                    quote="The skills I learned through the program helped me start my own business and support my family."
+                ></testimonial-card>
+            </div>
+        </div>
+    </section>
+
+    <!-- Upcoming Events -->
+    <section class="py-16 px-4 bg-blue-600 text-white">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-4">Upcoming Events</h2>
+            <p class="text-center text-blue-100 mb-12 max-w-2xl mx-auto">Join us for our next fundraising and community events.</p>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <event-card 
+                    date="Jun 15, 2023" 
+                    title="Annual Charity Gala"
+                    location="Grand Ballroom, Downtown"
+                    description="An evening of fine dining and entertainment to support our education initiatives."
+                ></event-card>
+                <event-card 
+                    date="Jul 22, 2023" 
+                    title="Community Beach Cleanup"
+                    location="Sunset Beach"
+                    description="Join us for a day of environmental conservation and community building."
+                ></event-card>
+            </div>
+        </div>
+    </section>
+
+    <!-- Newsletter Signup -->
+    <section class="py-16 px-4 bg-gray-100">
+        <div class="max-w-2xl mx-auto text-center">
+            <h2 class="text-3xl font-bold mb-4 text-gray-800">Stay Connected</h2>
+            <p class="text-gray-600 mb-8">Subscribe to our newsletter for updates on our work, events, and how you can help.</p>
+            <form class="flex flex-col sm:flex-row gap-4 justify-center">
+                <input type="email" placeholder="Your email address" class="flex-grow max-w-md p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
+                    Subscribe
+                </button>
+            </form>
+        </div>
+    </section>
+
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+        
+        // Handle donation amount selection
+        document.querySelectorAll('.donation-amount').forEach(button => {
+            button.addEventListener('click', function() {
+                document.querySelectorAll('.donation-amount').forEach(btn => {
+                    btn.classList.remove('bg-blue-500', 'text-white');
+                    btn.classList.add('bg-white', 'border', 'border-blue-500', 'text-blue-500');
+                });
+                
+                if (this.textContent.trim() === 'Custom') {
+                    document.getElementById('custom-amount').classList.remove('hidden');
+                } else {
+                    document.getElementById('custom-amount').classList.add('hidden');
+                    this.classList.remove('bg-white', 'border', 'border-blue-500', 'text-blue-500');
+                    this.classList.add('bg-blue-500', 'text-white');
+                }
+            });
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,62 @@
+// Initialize components and animations
+document.addEventListener('DOMContentLoaded', function() {
+    // Intersection Observer for animations
+    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-fadeIn');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+
+    // Observe all elements with data-animate attribute
+    document.querySelectorAll('[data-animate]').forEach(el => {
+        observer.observe(el);
+    });
+
+    // Smooth scrolling 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'
+                });
+            }
+        });
+    });
+});
+
+// Form validation for donation form
+function validateDonationForm() {
+    const form = document.querySelector('#donate form');
+    if (form) {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            // Validate form fields
+            const name = document.getElementById('name').value;
+            const email = document.getElementById('email').value;
+            const card = document.getElementById('card').value;
+            
+            if (!name || !email || !card) {
+                alert('Please fill in all required fields');
+                return;
+            }
+            
+            // Simulate donation processing
+            alert('Thank you for your donation! A receipt has been sent to your email.');
+            form.reset();
+        });
+    }
+}
+
+// Initialize form validation when DOM is loaded
+document.addEventListener('DOMContentLoaded', validateDonationForm);

style.css

@@ -1,28 +1,52 @@
+/* Global Styles */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    scroll-behavior: smooth;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #4f46e5;
+    border-radius: 4px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #4338ca;
 }
+
+/* Animation for stats cards */
+@keyframes countUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.stats-card {
+    animation: countUp 0.6s ease-out forwards;
+}
+
+/* Hover effects for campaign cards */
+.campaign-card:hover .campaign-image {
+    transform: scale(1.05);
+}
+
+.campaign-image {
+    transition: transform 0.3s ease;
+}
+
+/* Pulse animation for CTA buttons */
+@keyframes pulse {
+    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
+    70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
+}
+
+.pulse {
+    animation: pulse 2s infinite;
+}