Chris Haulmark
224a219dbb
- Verified all pages against lad1908.org via puppeteer scrape
- About: official DDBHH mission/vision/values, current 2023-2027 board
- Membership: real bylaws types (Full/Associate/Honorary/Student/Senior),
real payment methods (Venmo @LAD1908, mail check)
- Donate: real $100K stat, real established funds, real mailing address
- Contact: added mailing address card
- Homepage: removed stale May 23 banner, updated to official DDBHH
language and correct mission statement
- Updates: removed inaccurate members-only footer note (all 235 public)
- Deaf Focus: local logo (no longer depends on Directus), 30-day advance
notice CTA, portal.deaffocus.org/request button, fax + business hours
- Add sanitize-html.ts utility — strips Facebook CSS classes and editor
data-attributes from HTML content before dangerouslySetInnerHTML
- Render update.body, event.description, article.body as sanitized HTML
- Fix Deaf capitalization throughout all pages and metadata
- Redesign nav: 9 flat links → About/Updates/Events/Deaf Focus/
Get Involved dropdown (Membership, Minutes, Contact) + Donate button
- Add nav-dropdown CSS classes with high-contrast theme variants
- Fix homepage Hero gap: py-16 matches other pages; initial={false} on
Framer Motion prevents SSR opacity:0 invisible flash
230 lines
12 KiB
TypeScript
230 lines
12 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import type { Metadata } from 'next';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Donate | Louisiana Association of the Deaf',
|
|
description: 'Support the Louisiana Association of the Deaf through donations. Your contribution helps us serve the Deaf community across Louisiana.',
|
|
};
|
|
|
|
export default function DonatePage() {
|
|
return (
|
|
<div className="bg-color-bg">
|
|
{/* Hero section */}
|
|
<section className="py-16 bg-color-bg-secondary">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
<h1 className="hero-title text-4xl md:text-5xl font-bold mb-6">Support Our Mission</h1>
|
|
<p className="hero-subtitle text-xl">
|
|
Your donations help us continue to serve and support the Deaf community across Louisiana.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Zeffy Donation Widget - placeholder */}
|
|
<section className="py-16 bg-color-bg">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h2 className="section-heading text-3xl font-bold mb-8 text-center">Make a Donation</h2>
|
|
<div className="card video-container-gold shadow-md rounded-lg overflow-hidden">
|
|
{/* Placeholder for Zeffy widget */}
|
|
<div className="p-8 text-center">
|
|
<div className="video-container p-12 rounded-lg mb-6">
|
|
<p className="video-placeholder-text text-lg">
|
|
Zeffy donation widget will be embedded here.
|
|
</p>
|
|
</div>
|
|
<p className="section-text">
|
|
Donations are processed securely through Zeffy, a platform for nonprofit organizations.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Ways to Give */}
|
|
<section className="py-16 bg-color-bg-secondary">
|
|
<div className="container mx-auto px-4">
|
|
<h2 className="section-heading text-3xl font-bold mb-12 text-center">Ways to Give</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
|
<div className="card event-card-gold-border p-6">
|
|
<div className="text-center mb-6">
|
|
<h3 className="benefit-card-title event-card-title-gold text-2xl font-bold mb-2">One-Time Donation</h3>
|
|
</div>
|
|
<p className="benefit-card-description mb-6">
|
|
Make a one-time donation to support our programs and events. Every contribution, big or small, makes a difference in our community.
|
|
</p>
|
|
<div className="text-center mt-auto">
|
|
<a href="#donation-form" className="btn-primary inline-block px-8 py-3 rounded-lg">
|
|
Donate Now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="card event-card-gold-border p-6 border-primary">
|
|
<div className="text-center mb-6">
|
|
<span className="inline-block featured-badge px-3 py-1 rounded-full text-sm font-medium mb-2">Most Impactful</span>
|
|
<h3 className="benefit-card-title event-card-title-gold text-2xl font-bold mb-2">Monthly Giving</h3>
|
|
</div>
|
|
<p className="benefit-card-description mb-6">
|
|
Join our sustaining donors by setting up a monthly donation. This provides reliable support for our ongoing programs and operations.
|
|
</p>
|
|
<div className="text-center mt-auto">
|
|
<a href="#donation-form" className="btn-primary inline-block px-8 py-3 rounded-lg">
|
|
Donate Monthly
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="card event-card-gold-border p-6">
|
|
<div className="text-center mb-6">
|
|
<h3 className="benefit-card-title event-card-title-gold text-2xl font-bold mb-2">In-Kind Donations</h3>
|
|
</div>
|
|
<p className="benefit-card-description mb-6">
|
|
Donate goods, services, or equipment to support our operations. Contact us to discuss your in-kind donation.
|
|
</p>
|
|
<div className="text-center mt-auto">
|
|
<Link href="/contact" className="btn-primary inline-block px-8 py-3 rounded-lg">
|
|
Contact Us
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Impact */}
|
|
<section className="py-16 bg-color-bg">
|
|
<div className="container mx-auto px-4">
|
|
<h2 className="section-heading text-3xl font-bold mb-4 text-center">Your Impact</h2>
|
|
<p className="section-text text-xl text-center mb-12 max-w-3xl mx-auto">
|
|
Since 2019, LAD has disbursed over <strong>$100,000</strong> directly supporting our community — services, project funding, sponsorships, scholarships, and more.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
|
|
<div>
|
|
<h3 className="card-title text-2xl font-bold mb-6">How Your Donation Helps</h3>
|
|
<ul className="space-y-4">
|
|
<li className="flex items-start">
|
|
<span className="card-date font-bold mr-3">•</span>
|
|
<p className="section-text">
|
|
<strong>Community Events:</strong> Funds community gatherings, social events, and cultural celebrations that bring our Deaf community together.
|
|
</p>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="card-date font-bold mr-3">•</span>
|
|
<p className="section-text">
|
|
<strong>Educational Programs:</strong> Supports ASL classes, tutoring, and educational workshops for members and the broader community.
|
|
</p>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="card-date font-bold mr-3">•</span>
|
|
<p className="section-text">
|
|
<strong>Advocacy:</strong> Enables our work advancing Deaf rights through legislation, policy, and public awareness.
|
|
</p>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="card-date font-bold mr-3">•</span>
|
|
<p className="section-text">
|
|
<strong>Youth & Emergency:</strong> Supports Deaf youth programs, toy drives, book drives, and emergency disaster relief.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="card-title text-2xl font-bold mb-6">Established Funds</h3>
|
|
<p className="section-text mb-4">You may designate your contribution to a specific fund:</p>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{['Youth Fund', 'Apparel Fund', 'Book Drive Fund', 'Toy Drive Fund', 'Office Renovations Fund', 'Emergency Disaster Fund'].map((fund) => (
|
|
<div key={fund} className="card event-card-gold-border p-3 text-center">
|
|
<p className="card-title text-sm font-semibold">{fund}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="mt-4 card-date text-sm">
|
|
Undesignated contributions support general operations. Financial information and annual reports are available upon request.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Corporate Sponsorship */}
|
|
<section className="py-16 bg-color-bg-secondary">
|
|
<div className="container mx-auto px-4">
|
|
<h2 className="section-heading text-3xl font-bold mb-8 text-center">Corporate Sponsorship</h2>
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
<p className="section-text text-lg mb-8">
|
|
We welcome partnerships with businesses and organizations that share our commitment to the Deaf community.
|
|
Corporate sponsors receive recognition in our events, publications, and website.
|
|
</p>
|
|
<Link href="/contact" className="btn-primary inline-block px-8 py-3 rounded-lg">
|
|
Become a Sponsor
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ */}
|
|
<section className="py-16 bg-color-bg">
|
|
<div className="container mx-auto px-4">
|
|
<h2 className="section-heading text-3xl font-bold mb-12 text-center">Donation FAQs</h2>
|
|
<div className="max-w-3xl mx-auto space-y-6">
|
|
<div className="card event-card-gold-border p-6">
|
|
<h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">Is my donation tax-deductible?</h3>
|
|
<p className="section-text">
|
|
Yes, the Louisiana Association of the Deaf is a 501(c)(3) nonprofit organization. All donations are tax-deductible to the extent allowed by law.
|
|
</p>
|
|
</div>
|
|
<div className="card event-card-gold-border p-6">
|
|
<h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">Can I specify how my donation is used?</h3>
|
|
<p className="section-text">
|
|
Yes, you can designate your donation for a specific program or project. Please include a note with your donation or contact us to discuss your preferences.
|
|
</p>
|
|
</div>
|
|
<div className="card event-card-gold-border p-6">
|
|
<h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">Do you accept donations by check or mail?</h3>
|
|
<p className="section-text">
|
|
Yes. Make checks or money orders payable to <strong>Louisiana Association of the Deaf</strong> and mail to:
|
|
</p>
|
|
<p className="section-text mt-2">
|
|
3112 Valley Creek Drive, Suite E<br />
|
|
Baton Rouge, LA 70808
|
|
</p>
|
|
</div>
|
|
<div className="card event-card-gold-border p-6">
|
|
<h3 className="card-title event-card-title-gold text-xl font-semibold mb-2">Can I donate in memory or honor of someone?</h3>
|
|
<p className="section-text">
|
|
Absolutely. Memorial and honorary donations are a meaningful way to celebrate someone special. We can send a notification of your gift to the person or family you designate.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section id="donation-form" className="py-16 cta-section">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<h2 className="cta-title text-3xl font-bold mb-4">Ready to Make a Difference?</h2>
|
|
<p className="cta-description text-xl max-w-3xl mx-auto mb-8">
|
|
Your support helps us continue our mission of serving the Deaf community across Louisiana.
|
|
</p>
|
|
<div className="card video-container-gold rounded-lg p-8 max-w-3xl mx-auto">
|
|
<p className="section-text text-center mb-6">
|
|
Zeffy donation widget integration will be placed here.
|
|
</p>
|
|
<div className="flex justify-center">
|
|
<a
|
|
href="https://zeffy.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="cta-button-primary px-8 py-3 rounded-lg hero-button-gold-accent"
|
|
>
|
|
Donate via Zeffy
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|