|
| 1 | +import Image from 'next/image' |
| 2 | +import Link from 'next/link' |
| 3 | +import { Metadata } from 'next' |
| 4 | +import CopyField from '@/components/CopyField' |
| 5 | + |
| 6 | +export const metadata: Metadata = { |
| 7 | + title: 'Support the Pythoness | Pythoness Programmer', |
| 8 | + description: 'Support the Pythoness Programmer through tips, donations, and other ways to show appreciation for the work.', |
| 9 | +} |
| 10 | + |
| 11 | +// Define interface for link objects |
| 12 | +interface LinkItem { |
| 13 | + name: string; |
| 14 | + url: string; |
| 15 | + color: string; |
| 16 | + icon?: string; |
| 17 | + boldPart?: string; |
| 18 | +} |
| 19 | + |
| 20 | +// Support links section |
| 21 | +const supportLinks: LinkItem[] = [ |
| 22 | + { |
| 23 | + name: 'Tip the Pythoness ☕', |
| 24 | + url: 'https://buy.stripe.com/eVaeWq6303RIejK28g', |
| 25 | + color: 'bg-white/10 hover:bg-white/20' |
| 26 | + }, |
| 27 | + { |
| 28 | + name: 'Amazon Wishlist 🛍️', |
| 29 | + url: 'https://www.amazon.com/hz/wishlist/ls/1ZXXDBUXYDDOC?ref_=wl_share', |
| 30 | + color: 'bg-brand-purple-light text-black hover:bg-brand-purple-light/90' |
| 31 | + } |
| 32 | +] |
| 33 | + |
| 34 | +export default function SupportPage() { |
| 35 | + return ( |
| 36 | + <div className="min-h-screen bg-brand-green-dark text-white py-12 px-4"> |
| 37 | + <div className="max-w-3xl mx-auto flex flex-col items-center"> |
| 38 | + {/* Profile Section */} |
| 39 | + <div className="text-center mb-8"> |
| 40 | + <div className="mb-4 relative mx-auto"> |
| 41 | + <div className="w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-brand-green-accent relative mx-auto"> |
| 42 | + <Image |
| 43 | + src="/images/headshot.png" |
| 44 | + alt="Pythoness Programmer" |
| 45 | + fill |
| 46 | + className="object-cover" |
| 47 | + priority |
| 48 | + /> |
| 49 | + </div> |
| 50 | + </div> |
| 51 | + <Link href="/" className="hover:opacity-80 transition-opacity"> |
| 52 | + <h1 className="font-display text-3xl md:text-4xl text-white mb-2">Pythoness Programmer</h1> |
| 53 | + </Link> |
| 54 | + <p className="text-white/80 max-w-2xl mx-auto text-lg"> |
| 55 | + Your support keeps me on my digital psychic quest, making tech accessible and empowering for everyone. |
| 56 | + </p> |
| 57 | + </div> |
| 58 | + |
| 59 | + {/* Personal Story Section */} |
| 60 | + <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-lg p-6 mb-8 max-w-2xl"> |
| 61 | + <h2 className="font-display text-xl text-white mb-4 text-center">Why Your Support Matters Right Now</h2> |
| 62 | + <div className="text-white/90 space-y-4 text-left"> |
| 63 | + <p> |
| 64 | + We're currently in a government shutdown, and I've been out of work since January 2025. This is all I do now. |
| 65 | + As someone navigating the SSDI process while my husband works as a federal employee, our income depends on |
| 66 | + government budget approvals. We're in the middle of another long furlough with no end in sight. |
| 67 | + </p> |
| 68 | + <p> |
| 69 | + I have no 401K, no savings to fall back on. Your contributions literally help me pay my bills, keep the lights on, |
| 70 | + continue my research into accessible technology, and yes, keep my cats fed with their favorite treats. |
| 71 | + More importantly, they let me keep creating content, tools, and resources that make technology more approachable |
| 72 | + for neurodivergent folks and everyone who's ever felt overwhelmed by the digital world. |
| 73 | + </p> |
| 74 | + <p className="text-brand-green-accent font-medium"> |
| 75 | + Every coffee, every tip, every share makes a real difference in keeping this mission alive during this difficult time. |
| 76 | + </p> |
| 77 | + </div> |
| 78 | + </div> |
| 79 | + |
| 80 | + {/* Support Links section */} |
| 81 | + <div className="w-full space-y-8"> |
| 82 | + {supportLinks.length > 0 && ( |
| 83 | + <div className="space-y-3"> |
| 84 | + <h2 className="font-display text-xl text-white text-center">Ways to Support</h2> |
| 85 | + <p className="text-white/80 text-sm text-center mb-3"> |
| 86 | + Every contribution, no matter the size, helps keep this mission going. |
| 87 | + </p> |
| 88 | + {/* Direct support usernames */} |
| 89 | + <div className="grid grid-cols-1 md:grid-cols-3 gap-3"> |
| 90 | + <CopyField |
| 91 | + label="Cash App" |
| 92 | + value="$ANCreative" |
| 93 | + ariaLabel="Cash App username" |
| 94 | + /> |
| 95 | + <CopyField |
| 96 | + label="Venmo" |
| 97 | + value="@ANCreative" |
| 98 | + ariaLabel="Venmo username" |
| 99 | + /> |
| 100 | + <CopyField |
| 101 | + label="Zelle" |
| 102 | + value="hello@amanda-nelson.com" |
| 103 | + ariaLabel="Zelle email address" |
| 104 | + /> |
| 105 | + </div> |
| 106 | + <div className="space-y-3"> |
| 107 | + {supportLinks.map((link) => ( |
| 108 | + <Link |
| 109 | + key={link.name} |
| 110 | + href={link.url} |
| 111 | + target="_blank" |
| 112 | + rel="noopener noreferrer" |
| 113 | + className={`block ${link.color} py-2.5 md:py-3 px-6 rounded-lg text-center transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 focus:ring-offset-brand-green-dark font-medium`} |
| 114 | + > |
| 115 | + {link.name} |
| 116 | + </Link> |
| 117 | + ))} |
| 118 | + </div> |
| 119 | + </div> |
| 120 | + )} |
| 121 | + |
| 122 | + {/* Link to Main Website */} |
| 123 | + <div className="pt-8 text-center"> |
| 124 | + <Link |
| 125 | + href="/" |
| 126 | + className="inline-flex items-center text-brand-green-accent hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 focus:ring-offset-brand-green-dark" |
| 127 | + > |
| 128 | + <span>Visit my website →</span> |
| 129 | + </Link> |
| 130 | + </div> |
| 131 | + </div> |
| 132 | + |
| 133 | + {/* Footer */} |
| 134 | + <div className="mt-12 text-center text-white/60 text-sm"> |
| 135 | + <p>© {new Date().getFullYear()} Pythoness Programmer</p> |
| 136 | + </div> |
| 137 | + </div> |
| 138 | + </div> |
| 139 | + ) |
| 140 | +} |
0 commit comments