Skip to content

Commit a3a5977

Browse files
bugarelabugarela
authored
Merge pull request #1563 from informalsystems/aaronmw/with-newsletter
Add newsletter signp form
2 parents c999f19 + b48f391 commit a3a5977

File tree

7 files changed

+460
-125
lines changed

7 files changed

+460
-125
lines changed

‎docs/components/NewsletterSignupBanner.tsx

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
2+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3+
import { Button } from './atomic-ui-elements/button'
4+
import { Input } from './atomic-ui-elements/input'
5+
6+
export function NewsletterSignupBanner() {
7+
return (
8+
<div
9+
id="mc_embed_shell"
10+
className="
11+
relative
12+
p-12
13+
grid
14+
md:grid-cols-2
15+
gap-12
16+
items-center
17+
"
18+
>
19+
<div className="flex flex-col gap-3 items-start">
20+
<h1
21+
className="
22+
text-2xl
23+
font-bold
24+
leading-tight
25+
text-inherit
26+
sm:text-5xl
27+
sm:leading-tight
28+
lg:text-6xl
29+
lg:leading-tight
30+
font-pj
31+
"
32+
>
33+
Quint
34+
</h1>
35+
36+
<h2
37+
className="
38+
text-quint-purple
39+
text-lg
40+
text-balance
41+
font-bold
42+
leading-tight
43+
sm:text-2xl
44+
sm:leading-tight
45+
lg:text-3xl
46+
lg:leading-tight
47+
font-pj
48+
"
49+
>
50+
A modern and executable specification language
51+
</h2>
52+
</div>
53+
54+
<form
55+
action="https://systems.us4.list-manage.com/subscribe/post?u=0f6ea1a79dbcc56e2f4c22ec8&amp;id=06adecf928&amp;v_id=9754&amp;f_id=0018d4edf0"
56+
method="post"
57+
id="mc-embedded-subscribe-form"
58+
name="mc-embedded-subscribe-form"
59+
className="
60+
flex
61+
flex-col
62+
gap-3
63+
items-start
64+
"
65+
target="_blank"
66+
noValidate
67+
>
68+
<FontAwesomeIcon
69+
icon={faEnvelope}
70+
className="text-quint-purple text-6xl"
71+
/>
72+
73+
<p className="text-2xl">
74+
Subscribe to our newsletter for the latest
75+
updates&nbsp;and&nbsp;features
76+
</p>
77+
78+
<div className="flex items-center gap-3 w-full">
79+
<label className="w-full">
80+
<span className="sr-only">First Name</span>
81+
<Input
82+
type="text"
83+
name="FNAME"
84+
id="mce-FNAME"
85+
placeholder="First Name"
86+
className="w-full"
87+
/>
88+
</label>
89+
90+
<label className="w-full">
91+
<span className="sr-only">Email Address</span>
92+
<Input
93+
type="email"
94+
name="EMAIL"
95+
id="mce-EMAIL"
96+
required
97+
className="w-full"
98+
placeholder="Email Address"
99+
/>
100+
</label>
101+
</div>
102+
103+
<div
104+
style={{ position: 'absolute', left: '-5000px' }}
105+
aria-hidden="true"
106+
>
107+
<input
108+
type="checkbox"
109+
id="gdpr_41607"
110+
name="gdpr[41607]"
111+
className="gdpr"
112+
value="Y"
113+
checked={true}
114+
onChange={() => {}}
115+
/>
116+
<input
117+
type="text"
118+
name="b_0f6ea1a79dbcc56e2f4c22ec8_06adecf928"
119+
tabIndex={-1}
120+
value=""
121+
onChange={() => {}}
122+
/>
123+
<input
124+
type="hidden"
125+
name="tags"
126+
value="8032881"
127+
onChange={() => {}}
128+
/>
129+
</div>
130+
131+
<Button
132+
type="submit"
133+
name="subscribe"
134+
id="mc-embedded-subscribe"
135+
variant="primary"
136+
className="w-full justify-center"
137+
>
138+
Subscribe
139+
</Button>
140+
</form>
141+
142+
{/* The purple background */}
143+
<div
144+
className="
145+
absolute
146+
-z-10
147+
top-1/2
148+
left-1/2
149+
w-[100vw]
150+
h-full
151+
bg-quint-purple/10
152+
-translate-x-1/2
153+
-translate-y-1/2
154+
"
155+
/>
156+
</div>
157+
)
158+
}

‎docs/components/atomic-ui-elements/button.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { ComponentProps, ElementType } from 'react'
2+
3+
type ButtonProps<T extends 'a' | 'button'> = ComponentProps<T> & {
4+
children: React.ReactNode
5+
as?: T
6+
variant?: keyof typeof classNamesByVariant
7+
}
8+
9+
const classNamesByVariant = {
10+
primary: `
11+
border-2
12+
border-quint-purple
13+
bg-quint-purple
14+
text-white
15+
hover:bg-quint-purple-dark
16+
hover:text-quint-purple
17+
px-8
18+
py-3
19+
`,
20+
secondary: `
21+
border-2
22+
border-quint-purple
23+
text-quint-purple
24+
hover:bg-quint-purple/10
25+
hover:border-quint-purple-dark
26+
hover:text-quint-purple-dark
27+
px-8
28+
py-3
29+
`,
30+
}
31+
32+
export function Button<T extends 'a' | 'button'>({
33+
as,
34+
children,
35+
className,
36+
variant = 'primary',
37+
...props
38+
}: ButtonProps<T>) {
39+
const Component = (as ?? 'button') as ElementType
40+
return (
41+
<Component
42+
{...props}
43+
role="button"
44+
className={`
45+
inline-flex
46+
text-lg
47+
font-bold
48+
transition-all
49+
duration-200
50+
rounded
51+
font-pj
52+
focus:outline-none
53+
focus:ring-2
54+
focus:ring-offset-2
55+
focus:ring-gray-900
56+
${classNamesByVariant[variant]}
57+
${className}
58+
`}
59+
>
60+
{children}
61+
</Component>
62+
)
63+
}

‎docs/components/atomic-ui-elements/input.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { ComponentProps, ElementType } from 'react'
2+
3+
type InputProps<T extends 'input' | 'textarea'> = Omit<
4+
ComponentProps<T>,
5+
'children'
6+
> & {
7+
as?: T
8+
variant?: keyof typeof classNamesByVariant
9+
}
10+
11+
const classNamesByVariant = {
12+
text: `
13+
px-8
14+
py-4
15+
bg-white
16+
rounded
17+
`,
18+
}
19+
20+
export function Input<T extends 'input' | 'textarea' = 'input'>({
21+
as,
22+
className,
23+
variant = 'text',
24+
...props
25+
}: InputProps<T>) {
26+
const Component = (as ?? 'input') as ElementType
27+
return (
28+
<Component
29+
{...props}
30+
className={`
31+
${classNamesByVariant[variant]}
32+
${className}
33+
`}
34+
/>
35+
)
36+
}

‎docs/components/home/InformalSystemsLogo.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Image from 'next/image'
2+
import { useTheme } from 'nextra-theme-docs'
3+
import { useEffect, useState } from 'react'
4+
5+
export function InformalSystemsLogo() {
6+
const { resolvedTheme } = useTheme()
7+
const [theme, setTheme] = useState(null)
8+
useEffect(() => {
9+
setTheme(resolvedTheme)
10+
}, [resolvedTheme])
11+
12+
return (
13+
<a href="https://informal.systems">
14+
<Image
15+
src={
16+
theme == 'dark'
17+
? '/informal-systems-white.png'
18+
: '/informal-systems.png'
19+
}
20+
alt="Informal Systems"
21+
width={200}
22+
height={200}
23+
/>
24+
</a>
25+
)
26+
}

0 commit comments

Comments
 (0)