Spaces:

Abmacode12
/

heartbeats-for-humanity

Running

App Files Files Community

Abmacode12 commited on Dec 19, 2025

Commit

4abcd02

verified ·

1 Parent(s): 189b50b

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.

Browse files

Files changed (6) hide show

README.md +8 -5
components/footer.js +107 -0
components/navbar.js +122 -0
index.html +342 -19
script.js +71 -0
style.css +42 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Heartbeats For Humanity
-emoji: 🏆
-colorFrom: blue
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: HeartBeats for Humanity  ❤️
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,107 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .footer-link {
+          transition: all 0.2s ease;
+        }
+        .footer-link:hover {
+          color: #dc2626;
+          transform: translateX(4px);
+        }
+        .social-icon {
+          transition: all 0.2s ease;
+        }
+        .social-icon:hover {
+          transform: translateY(-3px);
+          color: #dc2626;
+        }
+      </style>
+      <footer class="bg-gray-900 text-white pt-16 pb-8">
+        <div class="max-w-6xl mx-auto px-4">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
+            <div>
+              <div class="flex items-center space-x-2 mb-6">
+                <i data-feather="heart" class="w-6 h-6 text-red-600"></i>
+                <span class="font-bold text-xl">HeartBeats</span>
+              </div>
+              <p class="text-gray-400 mb-6">Making the world a better place through compassion, action, and community.</p>
+              <div class="flex space-x-4">
+                <a href="#" class="social-icon text-gray-400 hover:text-red-600">
+                  <i data-feather="facebook"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-red-600">
+                  <i data-feather="twitter"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-red-600">
+                  <i data-feather="instagram"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-red-600">
+                  <i data-feather="linkedin"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-red-600">
+                  <i data-feather="youtube"></i>
+                </a>
+              </div>
+            </div>
+            <div>
+              <h3 class="text-lg font-semibold mb-6">Quick Links</h3>
+              <ul class="space-y-3">
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> About Us</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Our Work</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Success Stories</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Careers</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Contact Us</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 class="text-lg font-semibold mb-6">Ways to Help</h3>
+              <ul class="space-y-3">
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Donate</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Fundraise</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Volunteer</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Partner With Us</a></li>
+                <li><a href="#" class="footer-link text-gray-400 hover:text-red-600 flex items-center"><i data-feather="chevron-right" class="w-4 h-4 mr-2"></i> Corporate Giving</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 class="text-lg font-semibold mb-6">Contact Info</h3>
+              <ul class="space-y-3 text-gray-400">
+                <li class="flex items-start">
+                  <i data-feather="map-pin" class="w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                  <span>123 Charity Lane, Compassion City, CC 12345</span>
+                </li>
+                <li class="flex items-center">
+                  <i data-feather="mail" class="w-5 h-5 mr-3"></i>
+                  <span>info@heartbeats.org</span>
+                </li>
+                <li class="flex items-center">
+                  <i data-feather="phone" class="w-5 h-5 mr-3"></i>
+                  <span>(123) 456-7890</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+            <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 HeartBeats for Humanity. All rights reserved.</p>
+            <div class="flex space-x-6">
+              <a href="#" class="text-gray-500 hover:text-gray-400 text-sm">Privacy Policy</a>
+              <a href="#" class="text-gray-500 hover:text-gray-400 text-sm">Terms of Service</a>
+              <a href="#" class="text-gray-500 hover:text-gray-400 text-sm">Sitemap</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+    // Initialize feather icons
+    feather.replace();
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,122 @@

+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 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        .nav-link {
+          position: relative;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 2px;
+          bottom: -2px;
+          left: 0;
+          background-color: #dc2626;
+          transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        .mobile-menu {
+          max-height: 0;
+          overflow: hidden;
+          transition: max-height 0.3s ease-out;
+        }
+        .mobile-menu.open {
+          max-height: 500px;
+        }
+        @media (min-width: 768px) {
+          .mobile-menu {
+            max-height: none !important;
+          }
+        }
+      </style>
+      <nav class="navbar fixed w-full z-50 bg-white md:bg-transparent text-gray-800 md:text-white">
+        <div class="max-w-6xl mx-auto px-4">
+          <div class="flex justify-between items-center py-4">
+            <a href="/" class="flex items-center space-x-2">
+              <i data-feather="heart" class="w-6 h-6 text-red-600"></i>
+              <span class="font-bold text-xl">HeartBeats</span>
+            </a>
+            <!-- Desktop Navigation -->
+            <div class="hidden md:flex items-center space-x-8">
+              <a href="#about" class="nav-link">About</a>
+              <a href="#campaigns" class="nav-link">Campaigns</a>
+              <a href="#donate" class="nav-link">Donate</a>
+              <a href="#volunteer" class="nav-link">Volunteer</a>
+              <a href="#contact" class="nav-link">Contact</a>
+              <a href="#donate" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full font-medium transition duration-300">Donate Now</a>
+            </div>
+            <!-- Mobile menu button -->
+            <div class="md:hidden">
+              <button id="mobile-menu-button" class="outline-none">
+                <i data-feather="menu" class="w-6 h-6"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Mobile Menu -->
+        <div id="mobile-menu" class="mobile-menu md:hidden bg-white text-gray-800">
+          <div class="px-4 py-2 space-y-4">
+            <a href="#about" class="block px-3 py-2 rounded hover:bg-gray-100">About</a>
+            <a href="#campaigns" class="block px-3 py-2 rounded hover:bg-gray-100">Campaigns</a>
+            <a href="#donate" class="block px-3 py-2 rounded hover:bg-gray-100">Donate</a>
+            <a href="#volunteer" class="block px-3 py-2 rounded hover:bg-gray-100">Volunteer</a>
+            <a href="#contact" class="block px-3 py-2 rounded hover:bg-gray-100">Contact</a>
+            <a href="#donate" class="block bg-red-600 text-white text-center px-3 py-2 rounded-full font-medium">Donate Now</a>
+          </div>
+        </div>
+      </nav>
+    `;
+    // Mobile menu toggle
+    const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
+    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+    mobileMenuButton.addEventListener('click', () => {
+      mobileMenu.classList.toggle('open');
+      const icon = mobileMenuButton.querySelector('i');
+      if (mobileMenu.classList.contains('open')) {
+        feather.replace();
+        icon.setAttribute('data-feather', 'x');
+      } else {
+        feather.replace();
+        icon.setAttribute('data-feather', 'menu');
+      }
+      feather.replace();
+    });
+    // Change navbar style on scroll
+    window.addEventListener('scroll', () => {
+      const navbar = this.shadowRoot.querySelector('.navbar');
+      if (window.scrollY > 50) {
+        navbar.classList.add('scrolled');
+        navbar.classList.remove('text-white');
+        navbar.classList.add('text-gray-800');
+      } else {
+        navbar.classList.remove('scrolled');
+        if (window.innerWidth >= 768) {
+          navbar.classList.remove('text-gray-800');
+          navbar.classList.add('text-white');
+        }
+      }
+    });
+    // Initialize feather icons
+    feather.replace();
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,342 @@
-<!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>HeartBeats for Humanity | Making the World Better</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>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <!-- Hero Section -->
+    <section class="relative bg-gradient-to-r from-red-600 to-red-800 text-white py-20 md:py-32 px-4">
+        <div class="max-w-6xl mx-auto text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6">Every Heartbeat Counts</h1>
+            <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">We're on a mission to create lasting change through compassion, action, and community.</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#donate" class="bg-white text-red-700 hover:bg-gray-100 px-8 py-3 rounded-full font-bold text-lg transition duration-300">Donate Now</a>
+                <a href="#volunteer" class="border-2 border-white hover:bg-white hover:text-red-700 px-8 py-3 rounded-full font-bold text-lg transition duration-300">Volunteer</a>
+            </div>
+        </div>
+        <div class="absolute bottom-0 left-0 right-0 h-16 bg-white transform skew-y-1 origin-top-left"></div>
+    </section>
+    <!-- Impact Stats -->
+    <section class="py-16 bg-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our Impact in Numbers</h2>
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div class="text-center p-6 rounded-lg bg-red-50">
+                    <div class="text-5xl font-bold text-red-600 mb-2" id="lives-changed">25,000+</div>
+                    <p class="text-gray-600">Lives Changed</p>
+                </div>
+                <div class="text-center p-6 rounded-lg bg-red-50">
+                    <div class="text-5xl font-bold text-red-600 mb-2" id="volunteers">1,200+</div>
+                    <p class="text-gray-600">Dedicated Volunteers</p>
+                </div>
+                <div class="text-center p-6 rounded-lg bg-red-50">
+                    <div class="text-5xl font-bold text-red-600 mb-2" id="countries">18</div>
+                    <p class="text-gray-600">Countries Reached</p>
+                </div>
+                <div class="text-center p-6 rounded-lg bg-red-50">
+                    <div class="text-5xl font-bold text-red-600 mb-2" id="projects">47</div>
+                    <p class="text-gray-600">Active Projects</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Current Campaigns -->
+    <section class="py-16 bg-gray-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Current Campaigns</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
+                    <img src="http://static.photos/people/640x360/1" alt="Education for All" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">Education for All</h3>
+                        <p class="text-gray-600 mb-4">Building schools and providing supplies for underprivileged children.</p>
+                        <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
+                            <div class="bg-red-600 h-2.5 rounded-full" style="width: 65%"></div>
+                        </div>
+                        <div class="flex justify-between text-sm text-gray-500">
+                            <span>$65,000 raised</span>
+                            <span>$100,000 goal</span>
+                        </div>
+                        <a href="#" class="mt-4 inline-block text-red-600 font-semibold hover:text-red-700">Learn More →</a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
+                    <img src="http://static.photos/food/640x360/2" alt="End Hunger" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">End Hunger</h3>
+                        <p class="text-gray-600 mb-4">Providing meals and sustainable food solutions to communities in need.</p>
+                        <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
+                            <div class="bg-red-600 h-2.5 rounded-full" style="width: 45%"></div>
+                        </div>
+                        <div class="flex justify-between text-sm text-gray-500">
+                            <span>$45,000 raised</span>
+                            <span>$100,000 goal</span>
+                        </div>
+                        <a href="#" class="mt-4 inline-block text-red-600 font-semibold hover:text-red-700">Learn More →</a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
+                    <img src="http://static.photos/medical/640x360/3" alt="Health First" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">Health First</h3>
+                        <p class="text-gray-600 mb-4">Mobile clinics and medical supplies for remote communities.</p>
+                        <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
+                            <div class="bg-red-600 h-2.5 rounded-full" style="width: 80%"></div>
+                        </div>
+                        <div class="flex justify-between text-sm text-gray-500">
+                            <span>$80,000 raised</span>
+                            <span>$100,000 goal</span>
+                        </div>
+                        <a href="#" class="mt-4 inline-block text-red-600 font-semibold hover:text-red-700">Learn More →</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Donation Form -->
+    <section id="donate" class="py-16 bg-white">
+        <div class="max-w-4xl mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Make a Difference Today</h2>
+            <div class="bg-red-50 rounded-xl p-8 shadow-md">
+                <form id="donation-form" class="space-y-6">
+                    <div>
+                        <label class="block text-gray-700 font-medium mb-2">Select Amount</label>
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                            <button type="button" class="donation-amount bg-white border border-gray-300 rounded-lg py-3 px-4 hover:bg-red-100 hover:border-red-300 focus:bg-red-100 focus:border-red-500 focus:ring-2 focus:ring-red-200 transition duration-200">$25</button>
+                            <button type="button" class="donation-amount bg-white border border-gray-300 rounded-lg py-3 px-4 hover:bg-red-100 hover:border-red-300 focus:bg-red-100 focus:border-red-500 focus:ring-2 focus:ring-red-200 transition duration-200">$50</button>
+                            <button type="button" class="donation-amount bg-white border border-gray-300 rounded-lg py-3 px-4 hover:bg-red-100 hover:border-red-300 focus:bg-red-100 focus:border-red-500 focus:ring-2 focus:ring-red-200 transition duration-200">$100</button>
+                            <button type="button" class="donation-amount bg-white border border-gray-300 rounded-lg py-3 px-4 hover:bg-red-100 hover:border-red-300 focus:bg-red-100 focus:border-red-500 focus:ring-2 focus:ring-red-200 transition duration-200">$250</button>
+                        </div>
+                        <div class="mt-4">
+                            <label for="custom-amount" class="block text-gray-700 font-medium mb-2">Or enter custom amount</label>
+                            <div class="relative">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">$</span>
+                                <input type="number" id="custom-amount" class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500" placeholder="Other amount">
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <label for="frequency" class="block text-gray-700 font-medium mb-2">Donation Frequency</label>
+                        <select id="frequency" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500">
+                            <option value="one-time">One-time donation</option>
+                            <option value="monthly">Monthly donation</option>
+                            <option value="quarterly">Quarterly donation</option>
+                            <option value="yearly">Yearly donation</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label>
+                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500" required>
+                    </div>
+                    <div>
+                        <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
+                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500" required>
+                    </div>
+                    <div>
+                        <label for="payment" class="block text-gray-700 font-medium mb-2">Payment Method</label>
+                        <div class="space-y-3">
+                            <div class="flex items-center">
+                                <input id="credit-card" name="payment" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300" checked>
+                                <label for="credit-card" class="ml-3 block text-gray-700">Credit/Debit Card</label>
+                            </div>
+                            <div class="flex items-center">
+                                <input id="paypal" name="payment" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
+                                <label for="paypal" class="ml-3 block text-gray-700">PayPal</label>
+                            </div>
+                            <div class="flex items-center">
+                                <input id="bank-transfer" name="payment" type="radio" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300">
+                                <label for="bank-transfer" class="ml-3 block text-gray-700">Bank Transfer</label>
+                            </div>
+                        </div>
+                    </div>
+                    <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Donate Now</button>
+                </form>
+            </div>
+        </div>
+    </section>
+    <!-- Volunteer Opportunities -->
+    <section id="volunteer" class="py-16 bg-gray-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Volunteer Opportunities</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
+                    <img src="http://static.photos/education/640x360/4" alt="Teaching Volunteer" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">Teaching Volunteer</h3>
+                        <p class="text-gray-600 mb-4">Help educate children in underserved communities with basic literacy and numeracy skills.</p>
+                        <div class="flex items-center text-gray-500 mb-4">
+                            <i data-feather="clock" class="w-4 h-4 mr-2"></i>
+                            <span>4-8 hours/week</span>
+                        </div>
+                        <div class="flex items-center text-gray-500 mb-4">
+                            <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
+                            <span>Local & International</span>
+                        </div>
+                        <a href="#" class="inline-block bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-6 rounded-full transition duration-300">Apply Now</a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
+                    <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 and health education in rural communities.</p>
+                        <div class="flex items-center text-gray-500 mb-4">
+                            <i data-feather="clock" class="w-4 h-4 mr-2"></i>
+                            <span>Flexible hours</span>
+                        </div>
+                        <div class="flex items-center text-gray-500 mb-4">
+                            <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
+                            <span>International</span>
+                        </div>
+                        <a href="#" class="inline-block bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-6 rounded-full transition duration-300">Apply Now</a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
+                    <img src="http://static.photos/event/640x360/6" alt="Event Volunteer" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2 text-gray-800">Event Volunteer</h3>
+                        <p class="text-gray-600 mb-4">Help organize and run fundraising events in your local community.</p>
+                        <div class="flex items-center text-gray-500 mb-4">
+                            <i data-feather="clock" class="w-4 h-4 mr-2"></i>
+                            <span>Occasional</span>
+                        </div>
+                        <div class="flex items-center text-gray-500 mb-4">
+                            <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
+                            <span>Your City</span>
+                        </div>
+                        <a href="#" class="inline-block bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-6 rounded-full transition duration-300">Apply Now</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Success Stories -->
+    <section class="py-16 bg-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Success Stories</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-gray-50 rounded-xl p-8">
+                    <div class="flex items-center mb-6">
+                        <img src="http://static.photos/people/200x200/7" alt="Maria" class="w-16 h-16 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="font-bold text-gray-800">Maria's Story</h4>
+                            <p class="text-gray-600">Beneficiary, Education Program</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 mb-4">"Thanks to HeartBeats for Humanity, I was able to go back to school after dropping out at age 12. Now I'm studying to become a nurse and help my community."</p>
+                    <div class="flex space-x-2">
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                    </div>
+                </div>
+                <div class="bg-gray-50 rounded-xl p-8">
+                    <div class="flex items-center mb-6">
+                        <img src="http://static.photos/people/200x200/8" alt="James" class="w-16 h-16 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="font-bold text-gray-800">James' Journey</h4>
+                            <p class="text-gray-600">Volunteer, 3 years</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 mb-4">"Volunteering with HeartBeats has been the most rewarding experience of my life. Seeing the direct impact of our work on communities keeps me motivated to do more."</p>
+                    <div class="flex space-x-2">
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Upcoming Events -->
+    <section class="py-16 bg-gray-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Upcoming Events</h2>
+            <div class="space-y-6">
+                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
+                    <div class="md:flex">
+                        <div class="md:w-1/3">
+                            <img src="http://static.photos/event/640x360/9" alt="Annual Gala" class="w-full h-full object-cover">
+                        </div>
+                        <div class="p-6 md:w-2/3">
+                            <div class="flex justify-between items-start mb-2">
+                                <h3 class="text-xl font-bold text-gray-800">Annual Charity Gala</h3>
+                                <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">Featured</span>
+                            </div>
+                            <div class="flex items-center text-gray-600 mb-4">
+                                <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
+                                <span>June 15, 2023 | 6:00 PM</span>
+                            </div>
+                            <div class="flex items-center text-gray-600 mb-4">
+                                <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
+                                <span>Grand Ballroom, City Convention Center</span>
+                            </div>
+                            <p class="text-gray-700 mb-4">Join us for an evening of inspiration and giving as we celebrate our achievements and plan for the year ahead.</p>
+                            <a href="#" class="inline-block text-red-600 font-semibold hover:text-red-700">RSVP Now →</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
+                    <div class="md:flex">
+                        <div class="md:w-1/3">
+                            <img src="http://static.photos/education/640x360/10" alt="Education Summit" class="w-full h-full object-cover">
+                        </div>
+                        <div class="p-6 md:w-2/3">
+                            <h3 class="text-xl font-bold text-gray-800 mb-2">Education for All Summit</h3>
+                            <div class="flex items-center text-gray-600 mb-4">
+                                <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
+                                <span>July 8, 2023 | 9:00 AM</span>
+                            </div>
+                            <div class="flex items-center text-gray-600 mb-4">
+                                <i data-feather="map-pin" class="w-4 h-4 mr-2"></i>
+                                <span>Virtual Event</span>
+                            </div>
+                            <p class="text-gray-700 mb-4">A gathering of educators, policymakers, and activists to discuss innovative solutions for global education challenges.</p>
+                            <a href="#" class="inline-block text-red-600 font-semibold hover:text-red-700">Register Now →</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Newsletter Signup -->
+    <section class="py-16 bg-red-600 text-white">
+        <div class="max-w-4xl mx-auto px-4 text-center">
+            <h2 class="text-3xl font-bold mb-4">Stay Connected</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Subscribe to our newsletter to receive updates on our work, events, and how you can help make a difference.</p>
+            <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
+                <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-300 text-gray-800">
+                <button type="submit" class="bg-white text-red-600 hover:bg-gray-100 font-bold py-3 px-6 rounded-lg transition duration-300">Subscribe</button>
+            </form>
+            <p class="text-sm mt-4 opacity-80">We respect your privacy. Unsubscribe at any time.</p>
+        </div>
+    </section>
+    <custom-footer></custom-footer>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,71 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Animate impact numbers
+    const animateNumbers = () => {
+        const counters = document.querySelectorAll('#lives-changed, #volunteers, #countries, #projects');
+        const speed = 200;
+        counters.forEach(counter => {
+            const target = +counter.innerText.replace('+', '');
+            const increment = target / speed;
+            let current = 0;
+            const updateCount = () => {
+                current += increment;
+                if (current < target) {
+                    counter.innerText = Math.floor(current) + (counter.id === 'lives-changed' || counter.id === 'volunteers' ? '+' : '');
+                    setTimeout(updateCount, 1);
+                } else {
+                    counter.innerText = target + (counter.id === 'lives-changed' || counter.id === 'volunteers' ? '+' : '');
+                }
+            };
+            updateCount();
+            counter.classList.add('count-up');
+        });
+    };
+    // Intersection Observer for animations
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                if (entry.target.id === 'lives-changed') {
+                    animateNumbers();
+                }
+                entry.target.classList.add('animate-fadeIn');
+            }
+        });
+    }, { threshold: 0.1 });
+    // Observe elements
+    document.querySelectorAll('#lives-changed, #volunteers, #countries, #projects').forEach(el => {
+        observer.observe(el);
+    });
+    // Donation amount selection
+    const donationAmounts = document.querySelectorAll('.donation-amount');
+    donationAmounts.forEach(button => {
+        button.addEventListener('click', function() {
+            donationAmounts.forEach(btn => {
+                btn.classList.remove('bg-red-100', 'border-red-500', 'text-red-700');
+                btn.classList.add('bg-white', 'border-gray-300');
+            });
+            this.classList.remove('bg-white', 'border-gray-300');
+            this.classList.add('bg-red-100', 'border-red-500', 'text-red-700');
+            document.getElementById('custom-amount').value = this.textContent.replace('$', '');
+        });
+    });
+    // Form submission
+    const donationForm = document.getElementById('donation-form');
+    if (donationForm) {
+        donationForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Here you would typically handle the form submission
+            alert('Thank you for your donation! A confirmation has been sent to your email.');
+            this.reset();
+        });
+    }
+    // Initialize feather icons
+    feather.replace();
+});

style.css CHANGED Viewed

@@ -1,28 +1,51 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom animations */
+@keyframes countUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+.count-up {
+    animation: countUp 1s ease-out forwards;
 }
+/* Custom scroll behavior */
+html {
+    scroll-behavior: smooth;
 }
+/* Custom button hover effects */
+.btn-donate {
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
+.btn-donate:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
+/* Custom form input focus */
+.form-input:focus {
+    border-color: #dc2626;
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
+}
+/* Custom card hover effect */
+.card-hover {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.card-hover:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+/* Responsive tweaks */
+@media (max-width: 640px) {
+    .hero-title {
+        font-size: 2.5rem;
+    }
+    .hero-subtitle {
+        font-size: 1.2rem;
+    }
+}