Seed: nonprofit template (15 files)

2026-07-23 22:13:46 +00:00
parent 17ffa47d76
commit c45306fa8d
1 changed files with 87 additions and 0 deletions
@@ -0,0 +1,87 @@
+import { Link } from "react-router-dom";
+import { Heart, Mail, Facebook, Twitter, Instagram, Linkedin, Send, ShieldCheck } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useSaasMutation } from "@/hooks/use-tygarun";
+import { toast } from "sonner";
+
+export default function Footer() {
+  const { mutate: subscribe } = useSaasMutation("email", "/send/newsletter-confirm");
+
+  const handleNewsletter = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const form = e.currentTarget as HTMLFormElement;
+    const email = (new FormData(form).get("email") as string) || "";
+    try {
+      await subscribe({ email });
+      toast.success("Subscribed! You will receive our impact updates.");
+      form.reset();
+    } catch {
+      toast.error("Could not subscribe. Please try again.");
+    }
+  };
+
+  return (
+    <footer className="bg-slate-950 text-slate-300 py-16 border-t border-slate-800">
+      <div className="mx-auto max-w-7xl px-6">
+        <div className="grid md:grid-cols-5 gap-10">
+          <div className="md:col-span-2">
+            <div className="flex items-center gap-2 mb-4">
+              <Heart className="h-6 w-6 text-emerald-400 fill-current" />
+              <span className="text-xl font-bold text-white">Green Horizons Foundation</span>
+            </div>
+            <p className="text-sm leading-relaxed mb-4">Empowering communities worldwide through sustainable programs in clean water, education, and healthcare. Together, we build brighter futures.</p>
+            <form onSubmit={handleNewsletter} className="flex gap-2">
+              <Input type="email" name="email" placeholder="Your email" required className="bg-slate-900 border-slate-700 rounded-full text-sm" />
+              <Button type="submit" size="icon" className="bg-emerald-600 hover:bg-emerald-700 rounded-full shrink-0"><Send className="h-4 w-4" /></Button>
+            </form>
+            <div className="flex items-center gap-2 mt-4 text-xs text-slate-500">
+              <ShieldCheck className="h-3.5 w-3.5 text-emerald-500" />
+              <span>EIN: 47-1234567 | 501(c)(3) Tax-Exempt Organization. All donations are tax-deductible.</span>
+            </div>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-white mb-4 text-sm uppercase tracking-wider">Programs</h4>
+            <ul className="space-y-2.5 text-sm">
+              <li><Link to="/programs" className="hover:text-emerald-400 transition-colors">All Programs</Link></li>
+              <li><Link to="/programs" className="hover:text-emerald-400 transition-colors">Clean Water</Link></li>
+              <li><Link to="/programs" className="hover:text-emerald-400 transition-colors">Education</Link></li>
+              <li><Link to="/programs" className="hover:text-emerald-400 transition-colors">Healthcare</Link></li>
+              <li><Link to="/programs" className="hover:text-emerald-400 transition-colors">Sustainability</Link></li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-white mb-4 text-sm uppercase tracking-wider">Get Involved</h4>
+            <ul className="space-y-2.5 text-sm">
+              <li><Link to="/get-involved" className="hover:text-emerald-400 transition-colors">Donate</Link></li>
+              <li><Link to="/get-involved" className="hover:text-emerald-400 transition-colors">Volunteer</Link></li>
+              <li><Link to="/get-involved" className="hover:text-emerald-400 transition-colors">Fundraise</Link></li>
+              <li><Link to="/get-involved" className="hover:text-emerald-400 transition-colors">Events</Link></li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-white mb-4 text-sm uppercase tracking-wider">About</h4>
+            <ul className="space-y-2.5 text-sm">
+              <li><Link to="/about" className="hover:text-emerald-400 transition-colors">Our Story</Link></li>
+              <li><Link to="/about" className="hover:text-emerald-400 transition-colors">Leadership</Link></li>
+              <li><Link to="/about" className="hover:text-emerald-400 transition-colors">Annual Report</Link></li>
+              <li><Link to="/about" className="hover:text-emerald-400 transition-colors">Contact Us</Link></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4">
+          <p className="text-sm text-slate-500">© 2026 Green Horizons Foundation. All rights reserved.</p>
+          <div className="flex gap-4">
+            {[Facebook, Twitter, Instagram, Linkedin].map((Icon, i) => (
+              <a key={i} href="#" className="text-slate-500 hover:text-emerald-400 transition-colors"><Icon className="h-5 w-5" /></a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}