andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

fix typo

Browse Source
This commit is contained in:
kayela
2026-01-12 20:37:38 -06:00
parent 7694532d53
commit 9c2d516f9d
74 changed files with 1842 additions and 1842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/Donate.js
View File

@@ -58,17 +58,17 @@ const Donate = () => {
<div className="min-h-screen">
<PublicNavbar />
<main className="bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
<main className="bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
{/* Hero Section */}
<section className="py-12">
<div className="max-w-4xl mx-auto text-center h-full">
<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-3xl sm:text-4xl md:text-5xl font-bold text-var(--purple-deep) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[var(--purple-deep)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
Donate
</h1>
<p className="text-xl text-var(--purple-deep) font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
<p className="text-xl text-[var(--purple-deep)] font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
We really appreciate your donations. You can make your donation online
or send a check by mail.
</p>
@@ -84,8 +84,8 @@ const Donate = () => {
<div className="mx-auto flex-1 w-full h-full">
<Card className="p-8 bg-background rounded-3xl w-full h-full content-center">
<div className="flex items-center gap-4 mb-6">
<CreditCard className="size-24 text-var(--purple-lavender)" />
<h2 className="text-3xl font-bold text-var(--purple-deep)" style={{ fontFamily: "'Inter', sans-serif" }}>
<CreditCard className="size-24 text-[var(--purple-lavender)]" />
<h2 className="text-3xl font-bold text-[var(--purple-deep)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Select Your Donation Amount
</h2>
</div>
@@ -97,7 +97,7 @@ const Donate = () => {
key={amount}
onClick={() => handleDonateAmount(amount * 100)}
disabled={processingAmount === amount * 100}
className="bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white text-xl py-8 rounded-full disabled:opacity-50"
className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-deep)] text-white text-xl py-8 rounded-full disabled:opacity-50"
>
{processingAmount === amount * 100 ? (
<Loader2 className="h-6 w-6 animate-spin" />
@@ -112,13 +112,13 @@ const Donate = () => {
<Button
onClick={() => setCustomAmountDialogOpen(true)}
disabled={processingAmount !== null}
className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-deep)] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
>
<Heart className="h-6 w-6" />
Donate Any Amount
</Button>
<p className="text-sm text-var(--purple-lavender) text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Secure donation processing powered by Stripe
</p>
</Card>
@@ -131,13 +131,13 @@ const Donate = () => {
<div className="flex flex-col gap-8 w-full">
{/* Mail Check */}
<Card className="p-8 bg-background rounded-3xl flex gap-4 items-center flex-1">
<Mail className="size-24 text-var(--purple-lavender)" />
<Mail className="size-24 text-[var(--purple-lavender)]" />
<div>
<h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-2xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Mail a Check
</h3>
<p className="text-lg text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-[var(--purple-deep)] 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 />
@@ -153,14 +153,14 @@ const Donate = () => {
</div>
<div>
<h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-2xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Pay with Zelle
</h3>
<p className="text-lg text-var(--purple-deep) leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-[var(--purple-deep)] 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-var(--purple-lavender) text-lg font-bold underline hover:text-var(--purple-deep) transition-colors"
className="text-[var(--purple-lavender)] text-lg font-bold underline hover:text-[var(--purple-deep)] transition-colors"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAFHoustonTX@gmail.com
</a>
@@ -181,21 +181,21 @@ const Donate = () => {
<Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}>
<DialogContent className="sm:max-w-[450px] bg-background rounded-3xl">
<DialogHeader>
<DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Enter Donation Amount
</DialogTitle>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Choose how much you'd like to donate to support our community
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div>
<Label htmlFor="customAmount" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
<Label htmlFor="customAmount" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
Amount (USD)
</Label>
<div className="relative mt-2">
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-var(--purple-lavender) text-xl font-semibold">
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[var(--purple-lavender)] text-xl font-semibold">
$
</span>
<Input
@@ -206,7 +206,7 @@ const Donate = () => {
value={customAmount}
onChange={(e) => setCustomAmount(e.target.value)}
placeholder="50.00"
className="pl-10 h-14 text-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-xl"
className="pl-10 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-xl"
onKeyPress={(e) => {
if (e.key === 'Enter') {
handleCustomDonate();
@@ -214,13 +214,13 @@ const Donate = () => {
}}
/>
</div>
<p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Minimum donation: $1.00
</p>
</div>
<div className="bg-var(--lavender-300) rounded-lg p-4">
<p className="text-sm text-var(--purple-ink) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="bg-[var(--lavender-300)] rounded-lg p-4">
<p className="text-sm text-[var(--purple-ink)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<strong>Thank you for supporting LOAF!</strong><br />
Your donation helps us continue our mission and provide meaningful experiences for our community.
</p>
@@ -232,14 +232,14 @@ const Donate = () => {
type="button"
variant="outline"
onClick={() => setCustomAmountDialogOpen(false)}
className="rounded-full border-2 border-var(--neutral-800)"
className="rounded-full border-2 border-[var(--neutral-800)]"
>
Cancel
</Button>
<Button
type="button"
onClick={handleCustomDonate}
className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-deep) rounded-full"
className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-deep)] rounded-full"
>
Continue to Payment
</Button>