Update:- Membership Plan- Donation- Member detail for Member Directory

src/pages/Donate.js

@@ -0,0 +1,113 @@
+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;