Skip to content

Commit a4549d5

Browse files
DanGouldDanGould
authored
Merge pull request #123 from payjoin/donate-page
Donate page
2 parents 4b32b52 + 6eb571b commit a4549d5

4 files changed

Lines changed: 214 additions & 26 deletions

File tree

‎docusaurus.config.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -129,11 +129,6 @@ const config: Config = {
129129
label: "Discord",
130130
position: "right",
131131
},
132-
{
133-
href: "https://payjoin.substack.com/",
134-
label: "News",
135-
position: "right",
136-
},
137132
{
138133
href: "https://github.com/payjoin",
139134
label: "GitHub",
@@ -192,7 +187,7 @@ const config: Config = {
192187
},
193188
{
194189
label: "Donate",
195-
href: "https://geyser.fund/project/payjoin/"
190+
to: "/donate"
196191
},
197192
{
198193
label: "Roadmap",

‎src/css/custom.css‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,31 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
/* You can override the default Infima variables here. */
6-
:root {
7-
--ifm-color-primary: #46192b;
8-
--ifm-color-primary-dark: #29784c;
9-
--ifm-color-primary-darker: #277148;
10-
--ifm-color-primary-darkest: #205d3b;
11-
--ifm-color-primary-light: #33925d;
12-
--ifm-color-primary-lighter: #359962;
13-
--ifm-color-primary-lightest: #3cad6e;
14-
--ifm-code-font-size: 95%;
15-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
16-
background-color: #242526;
17-
}
5+
/*
6+
* Payjoin brand colors:
7+
* primary: #f75394 (pink)
8+
* secondary: #46192b (dark burgundy)
9+
* tertiary: #6A394C (medium burgundy)
10+
*
11+
* Infima shades generated from #f75394.
12+
* Light mode is disabled (dark mode forced in docusaurus.config.ts).
13+
*/
1814

19-
/* For readability concerns, you should choose a lighter palette in dark mode. */
2015
[data-theme="dark"] {
2116
--ifm-color-primary: #f75394;
22-
--ifm-color-primary-dark: #21af90;
23-
--ifm-color-primary-darker: #1fa588;
24-
--ifm-color-primary-darkest: #1a8870;
25-
--ifm-color-primary-light: #29d5b0;
26-
--ifm-color-primary-lighter: #32d8b4;
27-
--ifm-color-primary-lightest: #4fddbf;
17+
--ifm-color-primary-dark: #f63382;
18+
--ifm-color-primary-darker: #f52379;
19+
--ifm-color-primary-darkest: #d70b60;
20+
--ifm-color-primary-light: #f873a6;
21+
--ifm-color-primary-lighter: #f983af;
22+
--ifm-color-primary-lightest: #fbb3cd;
23+
--ifm-code-font-size: 95%;
2824
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
25+
26+
}
27+
28+
.footer--dark {
29+
--ifm-footer-background-color: #2a1520;
30+
--ifm-footer-link-color: #ddd;
31+
--ifm-footer-title-color: #fff;
2932
}

‎src/pages/donate.tsx‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
import Layout from "@theme/Layout";
2+
3+
export default function Donate(): JSX.Element {
4+
return (
5+
<Layout title="Donate" description="Support Payjoin Foundation">
6+
<div className="container margin-vert--lg">
7+
<div className="col col--8 col--offset-2">
8+
<h1>Donate</h1>
9+
<p>
10+
Payjoin Foundation is a 501(c)(3) nonprofit preserving privacy
11+
in peer-to-peer digital transactions.
12+
</p>
13+
14+
<style>{`
15+
.donate-ring {
16+
position: relative;
17+
width: 312px;
18+
height: 312px;
19+
border-radius: 50%;
20+
border: 8px solid #f75394;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
margin: 48px 0;
25+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 312 312'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='312' height='312' fill='white'/%3E%3Cline x1='295' y1='17' x2='17' y2='295' stroke='black' stroke-width='8'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='312' height='312' mask='url(%23m)'/%3E%3C/svg%3E");
26+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 312 312'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='312' height='312' fill='white'/%3E%3Cline x1='295' y1='17' x2='17' y2='295' stroke='black' stroke-width='8'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='312' height='312' mask='url(%23m)'/%3E%3C/svg%3E");
27+
mask-size: 100% 100%;
28+
-webkit-mask-size: 100% 100%;
29+
}
30+
31+
.donate-monad {
32+
position: relative;
33+
width: 280px;
34+
height: 280px;
35+
border-radius: 50%;
36+
overflow: hidden;
37+
-webkit-mask-image: radial-gradient(circle at center, transparent 16px, black 17px);
38+
mask-image: radial-gradient(circle at center, transparent 16px, black 17px);
39+
}
40+
41+
.donate-form {
42+
position: absolute;
43+
width: 100%;
44+
height: 100%;
45+
}
46+
47+
.donate-form-top {
48+
clip-path: polygon(0 0, 98% 0, 0 98%);
49+
}
50+
51+
.donate-form-bottom {
52+
clip-path: polygon(100% 2%, 100% 100%, 2% 100%);
53+
}
54+
55+
.donate-half {
56+
width: 100%;
57+
height: 100%;
58+
border: none;
59+
cursor: pointer;
60+
transition: filter 0.3s ease;
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
padding: 0;
65+
}
66+
67+
.donate-half-top {
68+
background: #f75394;
69+
}
70+
71+
.donate-half-bottom {
72+
background: #d63a7a;
73+
}
74+
75+
.donate-half:hover {
76+
filter: brightness(1.2);
77+
}
78+
79+
.donate-half-label {
80+
color: #fff;
81+
font-weight: 600;
82+
text-align: center;
83+
line-height: 1.3;
84+
pointer-events: none;
85+
text-shadow: 0 1px 3px rgba(0,0,0,0.25);
86+
position: absolute;
87+
}
88+
89+
.donate-form-top .donate-half-label {
90+
font-size: 16px;
91+
top: 25%;
92+
left: 18%;
93+
}
94+
95+
.donate-form-bottom .donate-half-label {
96+
font-size: 16px;
97+
bottom: 25%;
98+
right: 18%;
99+
}
100+
101+
.donate-half-sublabel {
102+
display: block;
103+
font-size: 11px;
104+
font-weight: 400;
105+
opacity: 0.8;
106+
margin-top: 3px;
107+
}
108+
109+
@media (max-width: 480px) {
110+
.donate-ring { width: 280px; height: 280px; }
111+
.donate-monad { width: 230px; height: 230px; }
112+
.donate-form-top .donate-half-label,
113+
.donate-form-bottom .donate-half-label { font-size: 14px; }
114+
.donate-half-sublabel { font-size: 10px; }
115+
}
116+
`}</style>
117+
118+
<div className="donate-ring">
119+
<div className="donate-monad">
120+
<form
121+
method="POST"
122+
action="https://btcpay.payjoin.org/apps/ChsF92PR6Bg5G6vprg2Mrigbjju/pos"
123+
target="_blank"
124+
className="donate-form donate-form-top"
125+
>
126+
<input type="hidden" name="redirectUrl" value="https://payjoin.org/thank-you" />
127+
<button type="submit" className="donate-half donate-half-top">
128+
<span className="donate-half-label">
129+
Tax-Deductible
130+
<span className="donate-half-sublabel">receipt via email</span>
131+
</span>
132+
</button>
133+
</form>
134+
135+
<form
136+
method="POST"
137+
action="https://btcpay.payjoin.org/apps/2QGBRUqtx42txccW9kJZbCfZcd46/pos"
138+
target="_blank"
139+
className="donate-form donate-form-bottom"
140+
>
141+
<input type="hidden" name="redirectUrl" value="https://payjoin.org/thank-you" />
142+
<button type="submit" className="donate-half donate-half-bottom">
143+
<span className="donate-half-label">
144+
Anonymous
145+
<span className="donate-half-sublabel">no info collected</span>
146+
</span>
147+
</button>
148+
</form>
149+
</div>
150+
</div>
151+
152+
<hr style={{ margin: "40px 0", borderColor: "#333" }} />
153+
154+
<h2>Other ways to donate</h2>
155+
<p>
156+
<strong>Email:</strong>{" "}
157+
<a href="mailto:donate@payjoin.org">donate@payjoin.org</a>
158+
</p>
159+
<p>
160+
We can arrange wire transfers, checks, or other cryptocurrency
161+
donations. Reach out and we'll provide instructions.
162+
</p>
163+
</div>
164+
</div>
165+
</Layout>
166+
);
167+
}

‎src/pages/thank-you.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Layout from "@theme/Layout";
2+
3+
export default function ThankYou(): JSX.Element {
4+
return (
5+
<Layout title="Thank You" description="Thank you for your donation">
6+
<div className="container margin-vert--lg">
7+
<div className="col col--8 col--offset-2" style={{ textAlign: "center" }}>
8+
<h1>Thank you for your donation!</h1>
9+
<p style={{ fontSize: "1.2rem", color: "#aaa" }}>
10+
Your support helps us build private, scalable payments for Bitcoin.
11+
</p>
12+
<p>
13+
Questions about your donation?{" "}
14+
<a href="mailto:donate@payjoin.org">donate@payjoin.org</a>
15+
</p>
16+
<a href="/" style={{ display: "inline-block", marginTop: "24px" }}>
17+
Back to payjoin.org
18+
</a>
19+
</div>
20+
</div>
21+
</Layout>
22+
);
23+
}

0 commit comments

Comments
 (0)