Skip to content

Upgrade donation page #712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apple-developer-merchantid-domain-association
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
7B227073704964223A2239373943394538343346343131343044463144313834343232393232313734313034353044314339464446394437384337313531303944334643463542433731222C2276657273696F6E223A312C22637265617465644F6E223A313536363233343735303036312C227369676E6174757265223A22333038303036303932613836343838366637306430313037303261303830333038303032303130313331306633303064303630393630383634383031363530333034303230313035303033303830303630393261383634383836663730643031303730313030303061303830333038323033653333303832303338386130303330323031303230323038346333303431343935313964353433363330306130363038326138363438636533643034303330323330376133313265333032633036303335353034303330633235343137303730366336353230343137303730366336393633363137343639366636653230343936653734363536373732363137343639366636653230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333031653137306433313339333033353331333833303331333333323335333735613137306433323334333033353331333633303331333333323335333735613330356633313235333032333036303335353034303330633163363536333633326437333664373032643632373236663662363537323264373336393637366535663535343333343264353035323466343433313134333031323036303335353034306230633062363934663533323035333739373337343635366437333331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333035393330313330363037326138363438636533643032303130363038326138363438636533643033303130373033343230303034633231353737656465626436633762323231386636386464373039306131323138646337623062643666326332383364383436303935643934616634613534313162383334323065643831316633343037653833333331663163353463336637656233323230643662616435643465666634393238393839336537633066313361333832303231313330383230323064333030633036303335353164313330313031666630343032333030303330316630363033353531643233303431383330313638303134323366323439633434663933653465663237653663346636323836633366613262626664326534623330343530363038326230363031303530353037303130313034333933303337333033353036303832623036303130353035303733303031383632393638373437343730336132663266366636333733373032653631373037303663363532653633366636643266366636333733373033303334326436313730373036633635363136393633363133333330333233303832303131643036303335353164323030343832303131343330383230313130333038323031306330363039326138363438383666373633363430353031333038316665333038316333303630383262303630313035303530373032303233303831623630633831623335323635366336393631366536333635323036663665323037343638363937333230363336353732373436393636363936333631373436353230363237393230363136653739323037303631373237343739323036313733373337353664363537333230363136333633363537303734363136653633363532303666363632303734363836353230373436383635366532303631373037303663363936333631363236633635323037333734363136653634363137323634323037343635373236643733323036313665363432303633366636653634363937343639366636653733323036663636323037353733363532633230363336353732373436393636363936333631373436353230373036663663363936333739323036313665363432303633363537323734363936363639363336313734363936663665323037303732363136333734363936333635323037333734363137343635366436353665373437333265333033363036303832623036303130353035303730323031313632613638373437343730336132663266373737373737326536313730373036633635326536333666366432663633363537323734363936363639363336313734363536313735373436383666373236393734373932663330333430363033353531643166303432643330326233303239613032376130323538363233363837343734373033613266326636333732366332653631373037303663363532653633366636643266363137303730366336353631363936333631333332653633373236633330316430363033353531643065303431363034313439343537646236666435373438313836383938393736326637653537383530376537396235383234333030653036303335353164306630313031666630343034303330323037383033303066303630393261383634383836663736333634303631643034303230353030333030613036303832613836343863653364303430333032303334393030333034363032323130306265303935373166653731653165373335623535653561666163623463373266656234343566333031383532323263373235313030326236316562643666353530323231303064313862333530613564643664643665623137343630333562313165623263653837636661336536616636636264383338303839306463383263646461613633333038323032656533303832303237356130303330323031303230323038343936643266626633613938646139373330306130363038326138363438636533643034303330323330363733313162333031393036303335353034303330633132343137303730366336353230353236663666373432303433343132303264323034373333333132363330323430363033353530343062306331643431373037303663363532303433363537323734363936363639363336313734363936663665323034313735373436383666373236393734373933313133333031313036303335353034306130633061343137303730366336353230343936653633326533313062333030393036303335353034303631333032353535333330316531373064333133343330333533303336333233333334333633333330356131373064333233393330333533303336333233333334333633333330356133303761333132653330326330363033353530343033306332353431373037303663363532303431373037303663363936333631373436393666366532303439366537343635363737323631373436393666366532303433343132303264323034373333333132363330323430363033353530343062306331643431373037303663363532303433363537323734363936363639363336313734363936663665323034313735373436383666373236393734373933313133333031313036303335353034306130633061343137303730366336353230343936653633326533313062333030393036303335353034303631333032353535333330353933303133303630373261383634386365336430323031303630383261383634386365336430333031303730333432303030346630313731313834313964373634383564353161356532353831303737366538383061326566646537626165346465303864666334623933653133333536643536363562333561653232643039373736306432323465376262613038666437363137636538386362373662623636373062656338653832393834666635343435613338316637333038316634333034363036303832623036303130353035303730313031303433613330333833303336303630383262303630313035303530373330303138363261363837343734373033613266326636663633373337303265363137303730366336353265363336663664326636663633373337303330333432643631373037303663363537323666366637343633363136373333333031643036303335353164306530343136303431343233663234396334346639336534656632376536633466363238366333666132626266643265346233303066303630333535316431333031303166663034303533303033303130316666333031663036303335353164323330343138333031363830313462626230646561313538333338383961613438613939646562656264656261666461636232346162333033373036303335353164316630343330333032653330326361303261613032383836323636383734373437303361326632663633373236633265363137303730366336353265363336663664326636313730373036633635373236663666373436333631363733333265363337323663333030653036303335353164306630313031666630343034303330323031303633303130303630613261383634383836663736333634303630323065303430323035303033303061303630383261383634386365336430343033303230333637303033303634303233303361636637323833353131363939623138366662333563333536636136326266663431376564643930663735346461323865626566313963383135653432623738396638393866373962353939663938643534313064386639646539633266653032333033323264643534343231623061333035373736633564663333383362393036376664313737633263323136643936346663363732363938323132366635346638376137643162393963623962303938393231363130363939306630393932316430303030333138323031386233303832303138373032303130313330383138363330376133313265333032633036303335353034303330633235343137303730366336353230343137303730366336393633363137343639366636653230343936653734363536373732363137343639366636653230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533303230383463333034313439353139643534333633303064303630393630383634383031363530333034303230313035303061303831393533303138303630393261383634383836663730643031303930333331306230363039326138363438383666373064303130373031333031633036303932613836343838366637306430313039303533313066313730643331333933303338333133393331333733313332333333303561333032613036303932613836343838366637306430313039333433313164333031623330306430363039363038363438303136353033303430323031303530306131306130363038326138363438636533643034303330323330326630363039326138363438383666373064303130393034333132323034323062303731303365313430613462386231376262613230316130336163643036396234653431366232613263383066383661383338313435633239373566633131333030613036303832613836343863653364303430333032303434363330343430323230343639306264636637626461663833636466343934396534633035313039656463663334373665303564373261313264376335666538633033303033343464663032323032363764353863393365626233353031333836363062353730373938613064643731313734316262353864626436613138363633353038353431656565393035303030303030303030303030227D
18 changes: 18 additions & 0 deletions src/components/common/thank-you-block.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const ThankYouBlock = ({
heading = "Thank You for Your Support",
message = "With your support, we help veterans find meaningful employment in technology.",
}: {
heading?: string;
message?: string;
}) => {
return (
<div className="tw-bg-gray-100 tw-py-16">
<div className="tw-container tw-text-center">
<h2 className="tw-mb-6 tw-text-3xl tw-font-bold">{heading}</h2>
<p className="tw-mx-auto tw-max-w-3xl tw-text-lg">{message}</p>
</div>
</div>
);
};

export default ThankYouBlock;
154 changes: 146 additions & 8 deletions src/components/forms/donate-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,154 @@ type TProps = {

const DonateForm = forwardRef<HTMLDivElement, TProps>(({ className }, ref) => {
return (
<div className={clsx(className)} ref={ref}>
<iframe
title="#VWC Donorbox"
src="https://donorbox.org/embed/vetswhocode-donation?show_content=true"
name="vwc-donorbox"
seamless
className="tw-overflow-x-hidden tw-min-h-[900px] md:tw-min-h-[700px]"
/>
<div
className={clsx("tw-flex tw-flex-col tw-gap-8 tw-py-10 lg:tw-flex-row", className)}
ref={ref}
>
{/* Donation form column */}
<div className="tw-w-full lg:tw-w-full">
<div className="tw-flex tw-flex-col tw-overflow-hidden tw-rounded-lg tw-bg-white tw-shadow-lg md:tw-flex-row">
<div className="tw-bg-primary tw-p-3 tw-text-white lg:tw-w-1/4">
<h3 className="tw-text-xl tw-font-bold tw-text-white">
Make a Difference Today
</h3>
<p className="tw-mt-1 tw-text-sm tw-text-gray-100">
Your donation directly supports veterans learning to code
</p>

<div className="tw-mt-3 tw-text-xs">
<div className="tw-mb-1 tw-flex tw-items-center">
<svg
className="tw-mr-1 tw-h-4 tw-w-4 tw-text-green-300"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span>501(c)(3) nonprofit</span>
</div>
<div className="tw-flex tw-items-center">
<svg
className="tw-mr-1 tw-h-4 tw-w-4 tw-text-green-300"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span>Tax-deductible</span>
</div>
</div>

<div className="tw-mt-2 tw-flex tw-items-center tw-justify-between tw-text-xs">
<a
href="mailto:[email protected]"
className="tw-text-white hover:tw-underline"
>
Contact us
</a>
</div>
</div>

<div className="md:tw-w-3/4">
<iframe
title="#VWC Donorbox"
src="https://donorbox.org/embed/vetswhocode-donation?show_content=true&default_interval=o&amount=25&hide_donation_meter=true&compact=true"
name="vwc-donorbox"
seamless
className="tw-h-[950px] tw-w-full tw-border-none"
/>
</div>
</div>
</div>

{/* Impact information column */}
<div className="tw-w-full lg:tw-w-5/12">
<div className="tw-h-full tw-rounded-lg tw-bg-gray-100 tw-p-8 tw-shadow-sm">
<h3 className="tw-mb-6 tw-text-2xl tw-font-bold tw-text-primary">
Your Impact
</h3>

<div className="tw-mb-8">
<h4 className="tw-mb-2 tw-text-lg tw-font-semibold">
Where Your Money Goes
</h4>
<ul className="tw-ml-5 tw-list-disc tw-space-y-2">
<li>Providing training materials and resources for our veterans</li>
<li>Supporting our mentorship program</li>
<li>Maintaining our learning infrastructure</li>
<li>Offering career support and job placement assistance</li>
</ul>
</div>

<div className="tw-mb-8">
<h4 className="tw-mb-2 tw-text-lg tw-font-semibold">Donation Impact</h4>
<div className="tw-mb-4 tw-grid tw-grid-cols-2 tw-gap-4">
<div className="tw-rounded-lg tw-bg-white tw-p-4 tw-text-center tw-shadow-sm">
<span className="tw-block tw-text-3xl tw-font-bold tw-text-primary">
$50
</span>
<span className="tw-mt-1 tw-block tw-text-sm">
Learning resources for one veteran
</span>
</div>
<div className="tw-rounded-lg tw-bg-white tw-p-4 tw-text-center tw-shadow-sm">
<span className="tw-block tw-text-3xl tw-font-bold tw-text-primary">
$100
</span>
<span className="tw-mt-1 tw-block tw-text-sm">
Technical mentorship session
</span>
</div>
<div className="tw-rounded-lg tw-bg-white tw-p-4 tw-text-center tw-shadow-sm">
<span className="tw-block tw-text-3xl tw-font-bold tw-text-primary">
$500
</span>
<span className="tw-mt-1 tw-block tw-text-sm">
Coding bootcamp scholarship
</span>
</div>
<div className="tw-rounded-lg tw-bg-white tw-p-4 tw-text-center tw-shadow-sm">
<span className="tw-block tw-text-3xl tw-font-bold tw-text-primary">
$1000
</span>
<span className="tw-mt-1 tw-block tw-text-sm">
Complete training for one veteran
</span>
</div>
</div>
</div>

<div>
<h4 className="tw-mb-2 tw-text-lg tw-font-semibold">Need Help?</h4>
<p className="tw-mb-2">
For questions about donations or to explore other ways to support our
mission, please contact us:
</p>
<a
href="mailto:[email protected]"
className="tw-font-medium tw-text-primary tw-underline"
>
[email protected]
</a>
</div>
</div>
</div>
</div>
);
});

DonateForm.displayName = "DonateForm";

export default DonateForm;
Loading