103 lines
4.2 KiB
JavaScript
103 lines
4.2 KiB
JavaScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import PublicNavbar from '../components/PublicNavbar';
|
|
import PublicFooter from '../components/PublicFooter-kc';
|
|
import { Card } from '../components/ui/card';
|
|
import { Button } from '../components/ui/button';
|
|
import { CheckCircle, Heart } from 'lucide-react';
|
|
|
|
const DonationSuccess = () => {
|
|
const navigate = useNavigate();
|
|
const loafHearts = `${process.env.PUBLIC_URL}/loaf-hearts.png`;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<PublicNavbar />
|
|
|
|
<main className="bg-gradient-to-b from-white to-[#f1eef9] px-6 py-20">
|
|
<div className="max-w-2xl mx-auto">
|
|
<Card className="p-6 sm:p-8 md:p-12 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-xl text-center">
|
|
{/* Success Icon */}
|
|
<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>
|
|
<div className="inline-flex items-center justify-center w-20 h-20 bg-[#81B29A]/10 rounded-full mb-6">
|
|
<CheckCircle className="h-12 w-12 text-[#81B29A]" />
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Thank You for Your Donation!
|
|
</h1>
|
|
|
|
{/* Message */}
|
|
<div className="space-y-4 mb-8">
|
|
<p className="text-xl text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Your generous contribution helps support our community and continue our mission.
|
|
</p>
|
|
|
|
<div className="bg-gradient-to-r from-[#f1eef9] to-[#DDD8EB]/30 rounded-2xl p-6 border-2 border-[#ddd8eb]">
|
|
<div className="flex items-center justify-center gap-2 text-[#ff9e77] mb-2">
|
|
<Heart className="h-6 w-6" />
|
|
<span className="text-lg font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Your Support Makes a Difference
|
|
</span>
|
|
</div>
|
|
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
A receipt for your donation has been sent to your email address.
|
|
</p>
|
|
</div>
|
|
|
|
<p className="text-base text-[#664fa3] pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
We deeply appreciate your support and commitment to LOAF's mission of building a vibrant, inclusive community.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
onClick={() => navigate('/')}
|
|
className="bg-[#664fa3] text-white hover:bg-[#422268] rounded-full px-8 py-6 text-lg font-medium shadow-lg"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
Return to Home
|
|
</Button>
|
|
<Button
|
|
onClick={() => navigate('/donate')}
|
|
variant="outline"
|
|
className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#DDD8EB]/20 rounded-full px-8 py-6 text-lg font-medium"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
Make Another Donation
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Additional Info */}
|
|
<div className="mt-12 text-center">
|
|
<p className="text-sm text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Have questions about your donation?
|
|
</p>
|
|
<a
|
|
href="mailto:support@loaf.org"
|
|
className="text-[#ff9e77] hover:text-[#664fa3] font-medium transition-colors"
|
|
style={{ fontFamily: "'Inter', sans-serif" }}
|
|
>
|
|
Contact us at support@loaf.org
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<PublicFooter />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DonationSuccess;
|