diff --git a/src/pages/GetInvolved.tsx b/src/pages/GetInvolved.tsx new file mode 100644 index 0000000..c530c13 --- /dev/null +++ b/src/pages/GetInvolved.tsx @@ -0,0 +1,212 @@ +import { useState } from "react"; +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Textarea } from "@/components/ui/textarea"; +import { Heart, HandHeart, Megaphone, Calendar, MapPin, Clock, ArrowRight, DollarSign, Users, Sparkles } from "lucide-react"; +import { useSaasMutation } from "@/hooks/use-tygarun"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; +import { toast } from "sonner"; + +export default function GetInvolvedPage() { + const [donationAmount, setDonationAmount] = useState("50"); + const [customAmount, setCustomAmount] = useState(""); + const [donating, setDonating] = useState(false); + const [applying, setApplying] = useState(false); + const amounts = ["25", "50", "100"]; + const { mutate: donate } = useSaasMutation("billing", "/checkout"); + const { mutate: applyVolunteer } = useSaasMutation("crm", "/leads"); + + const handleDonate = async (e: React.FormEvent) => { + e.preventDefault(); + const form = e.currentTarget as HTMLFormElement; + const dollars = Number(donationAmount === "custom" ? customAmount : donationAmount); + if (!dollars || dollars < 1) return; + const email = (new FormData(form).get("email") as string) || ""; + setDonating(true); + try { + const res = await donate({ plan: "Donation", amount: Math.round(dollars * 100), email }); + if (res?.url && res.url !== "#") { window.location.href = res.url; return; } + toast.success(`Thank you for your generous $\${dollars} donation!`); + } catch { + toast.error("Could not start checkout. Please try again."); + } finally { + setDonating(false); + } + }; + + const handleVolunteer = async (e: React.FormEvent) => { + e.preventDefault(); + const form = e.currentTarget as HTMLFormElement; + const body = Object.fromEntries(new FormData(form).entries()); + setApplying(true); + try { + await applyVolunteer({ ...body, interest: "volunteer" }); + toast.success("Application received! We will be in touch within 48 hours."); + form.reset(); + } catch { + toast.error("Could not submit application. Please try again."); + } finally { + setApplying(false); + } + }; + + const events = [ + { title: "Annual Charity Gala", date: "June 15, 2026", location: "New York, NY", desc: "An evening of inspiration, live music, and fundraising. Join us to celebrate our impact and support the next chapter." }, + { title: "Run for Water 5K", date: "August 22, 2026", location: "San Francisco, CA", desc: "Lace up for clean water. Every registration funds one month of clean water for a family in need." }, + { title: "Global Volunteer Summit", date: "October 10, 2026", location: "Virtual", desc: "Connect with volunteers worldwide, hear from program leaders, and discover new ways to make an impact." }, + ]; + + return ( +
+
+ + {/* ── Hero ── */} +
+
+

Get Involved

+

Your Support Changes Lives

+

Whether you donate, volunteer, or fundraise, every action creates ripples of positive change in communities around the world.

+
+
+ + {/* ── Three Ways ── */} +
+
+
+ + {/* Donate */} + + +
+ +
+

Make a Donation

+

Every dollar goes directly to the communities we serve. 95% of funds reach programs.

+
+
+ {amounts.map((a) => ( + + ))} + +
+ {donationAmount === "custom" && ( +
+ + setCustomAmount(e.target.value)} className="pl-9 rounded-full" required /> +
+ )} + + +
+ + + + {/* Volunteer */} + + +
+ +
+

Volunteer With Us

+

Join our global network of volunteers making a hands-on difference in communities.

+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ +