Chris Haulmark
c9e042fa98
Backend: - New models: Update, Article (Deaf Focus) - Expanded Event + Document models: directusId, photoUrl, new minute types - New routes/controllers: /api/updates, /api/articles (full CRUD) - Migration script: pulls all data from db.lad1908.org Directus API, downloads public PDFs into uploads/documents/, idempotent re-runs - .env.example for production deployment reference - Rename ocd_db → lad_db throughout Frontend: - Contact: LAD contact info, removed Olathe address and map - Membership: LAD copy, membership fees replaced with contact-us prompt - Donate: LAD name in metadata, hero, and FAQs Infrastructure: - mongo-init: simplified, uses MONGO_USER/MONGO_PASSWORD env vars, lad_db - docker-compose: rename volumes ocd-* → lad-*, image names updated - Upload directory structure committed via .gitkeep files
253 lines
13 KiB
TypeScript
253 lines
13 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-12 text-center">Your Impact</h2>
|
|
<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 Workshops:</strong> Supports ASL classes, interpreter training, 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 advocating for accessibility and deaf rights in local businesses, schools, and government.
|
|
</p>
|
|
</li>
|
|
<li className="flex items-start">
|
|
<span className="card-date font-bold mr-3">•</span>
|
|
<p className="section-text">
|
|
<strong>Youth Programs:</strong> Funds activities and mentorship opportunities for deaf and hard-of-hearing youth in our community.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="card-title text-2xl font-bold mb-6">Donation Allocation</h3>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="flex justify-between mb-1">
|
|
<span className="section-text font-medium">Community Events</span>
|
|
<span className="section-text font-medium">40%</span>
|
|
</div>
|
|
<div className="w-full video-container rounded-full h-2.5">
|
|
<div className="bg-primary h-2.5 rounded-full" style={{ width: '40%' }}></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between mb-1">
|
|
<span className="section-text font-medium">Educational Programs</span>
|
|
<span className="section-text font-medium">30%</span>
|
|
</div>
|
|
<div className="w-full video-container rounded-full h-2.5">
|
|
<div className="bg-primary h-2.5 rounded-full" style={{ width: '30%' }}></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between mb-1">
|
|
<span className="section-text font-medium">Advocacy</span>
|
|
<span className="section-text font-medium">15%</span>
|
|
</div>
|
|
<div className="w-full video-container rounded-full h-2.5">
|
|
<div className="bg-primary h-2.5 rounded-full" style={{ width: '15%' }}></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between mb-1">
|
|
<span className="section-text font-medium">Youth Programs</span>
|
|
<span className="section-text font-medium">15%</span>
|
|
</div>
|
|
<div className="w-full video-container rounded-full h-2.5">
|
|
<div className="bg-primary h-2.5 rounded-full" style={{ width: '15%' }}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="mt-4 card-date text-sm">
|
|
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, checks can be made payable to "Louisiana Association of the Deaf" and mailed to our office address. Please contact us for the current mailing address.
|
|
</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>
|
|
);
|
|
}
|