114 lines
4.7 KiB
JavaScript
114 lines
4.7 KiB
JavaScript
import React from 'react';
|
|
import PublicNavbar from '../components/PublicNavbar';
|
|
import PublicFooter from '../components/PublicFooter';
|
|
import { Button } from '../components/ui/button';
|
|
import { Card } from '../components/ui/card';
|
|
import { CreditCard, Mail } from 'lucide-react';
|
|
|
|
const Donate = () => {
|
|
const loafHearts = `${process.env.PUBLIC_URL}/loaf-hearts.png`;
|
|
const zelleLogo = `${process.env.PUBLIC_URL}/zelle-logo.png`;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<PublicNavbar />
|
|
|
|
<main className="bg-gradient-to-b from-white to-[#f1eef9] px-16 py-12">
|
|
{/* Hero Section */}
|
|
<section className="py-12">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<div className="flex justify-center mb-4">
|
|
<img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
|
|
</div>
|
|
<h1 className="text-5xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Donate
|
|
</h1>
|
|
<p className="text-xl text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
We really appreciate your donations. You can make your donation online
|
|
or send a check by mail.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Donation Amount Buttons */}
|
|
<section className="py-12">
|
|
<div className="max-w-4xl mx-auto">
|
|
<Card className="p-8 bg-white rounded-2xl shadow-lg">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<CreditCard className="w-12 h-12 text-[#664fa3]" />
|
|
<h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Select Your Donation Amount
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Donation Buttons Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
{[25, 50, 100, 250].map(amount => (
|
|
<Button key={amount}
|
|
className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full"
|
|
disabled>
|
|
${amount}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Custom Amount Button */}
|
|
<Button className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full"
|
|
disabled>
|
|
Donate Any Amount
|
|
</Button>
|
|
|
|
<p className="text-sm text-[#48286e] text-center mt-4 opacity-75" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Online donations coming soon
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Alternative Payment Methods */}
|
|
<section className="py-12">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{/* Mail Check */}
|
|
<Card className="p-8 bg-white rounded-2xl shadow-lg">
|
|
<Mail className="w-12 h-12 text-[#664fa3] mb-4" />
|
|
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Mail a Check
|
|
</h3>
|
|
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Our mailing address for checks:<br />
|
|
<span className="font-semibold">LOAF</span><br />
|
|
P.O. Box 7207<br />
|
|
Houston, Texas 77248-7207
|
|
</p>
|
|
</Card>
|
|
|
|
{/* Zelle */}
|
|
<Card className="p-8 bg-white rounded-2xl shadow-lg">
|
|
<div className="mb-4">
|
|
<img src={zelleLogo} alt="Zelle" className="h-32" onError={(e) => e.target.style.display = 'none'} />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Pay with Zelle
|
|
</h3>
|
|
<p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
If your bank allows the use of Zelle, please feel free to send money to:
|
|
</p>
|
|
<a href="mailto:LOAFHoustonTX@gmail.com"
|
|
className="text-[#664fa3] text-lg font-bold underline hover:text-[#48286e] transition-colors"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
LOAFHoustonTX@gmail.com
|
|
</a>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<PublicFooter />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Donate;
|