a tool for shared writing and social publishing
updated landing page just a smidge
+95
-84
+18
-16
app/about/AboutPage.tsx
+18
-16
app/about/AboutPage.tsx
···
22
22
<main
23
23
className={`${ibmPlexSerif.variable} aboutPage w-full bg-[#FDFCFA] flex flex-col justify-center sm:px-12 px-4 mx-auto overflow-x-clip overflow-y-auto`}
24
24
>
25
-
<div className="spacer h-[96px] sm:h-[160px]" />
26
-
<div className="aboutCover relative max-w-full mx-auto w-[800px] flex flex-col gap-3 sm:gap-4">
27
-
<h1
28
-
className={` text-[#57822B] leading-none absolute -top-16 left-4 sm:-top-28 md:-left-16 sm:left-6 z-10`}
29
-
style={{
30
-
textShadow: "3px 7px 0 #D9EA72",
31
-
WebkitTextStroke: "0.5px #D9EA72",
32
-
}}
33
-
>
34
-
Leaflet
35
-
</h1>
25
+
<div className="spacer h-[48px] sm:h-[96px]" />
26
+
<div className="aboutCover relative max-w-full mx-auto w-[960px] flex flex-col gap-3 sm:gap-4">
27
+
<h1 className={`hidden`}>Leaflet</h1>
28
+
<img
29
+
src="/about/HeroText.png"
30
+
alt=""
31
+
className="absolute left-1/2 -translate-x-1/2 top-0 sm:top-[3%] z-10 w-[90%] sm:w-[75%]"
32
+
/>
36
33
37
34
<img
38
35
src="/about/hero.webp"
···
42
39
<LandingCTA />
43
40
</div>
44
41
45
-
<p className=" pt-6 text-tertiary text-center leading-snug mx-auto text-lg sm:text-xl!">
46
-
Delightful writing and effortless publishing, to connect with your
47
-
community — whether you're writing a blog, newsletter, or secret third
48
-
thing.
42
+
<p className=" pt-6 sm:pt-12 text-tertiary text-center leading-snug mx-auto text-lg sm:text-xl!">
43
+
Delightful connection to your community <br />
44
+
with a blog, newsletter, or secret third thing.
49
45
</p>
50
-
<div className="pt-12">
46
+
<div className="mt-12 sm:mt-24 py-6 sm:p-12 bg-[#F1EDE5] rounded-[12px] sm:rounded-[24px]">
47
+
<div className="text-center mx-auto pb-3 sm:pb-6">
48
+
<h3>Powerful Publishing Tools</h3>
49
+
<p className="text-secondary">
50
+
Easily write and manage posts, and track subscriptions
51
+
</p>
52
+
</div>
51
53
<Media mobile={false}>
52
54
<InteractiveAppDemo />
53
55
</Media>
+19
-11
app/about/Features.tsx
+19
-11
app/about/Features.tsx
···
1
1
export const Features = () => {
2
2
return (
3
3
<>
4
-
<div className="aboutSpotlightFeatures pt-24 flex flex-col gap-16">
4
+
<div className="aboutSpotlightFeatures pt-16 sm:pt-32 flex flex-col gap-16 sm:gap-32">
5
5
<div className="flex md:flex-row flex-col md:gap-12 gap-4 justify-center">
6
6
<img
7
-
src="/about/reach-audience.webp"
7
+
src="/about/reach-audience.png"
8
8
alt=""
9
9
className="w-fill min-w-[160px] max-w-[720px] grow mx-auto"
10
10
/>
11
11
<div className="flex flex-col w-fill max-w-sm text-center md:text-left md:py-4 py-0 mx-auto">
12
12
<h3>Reach your readers</h3>
13
-
<p>
14
-
Send updates via email, Bluesky, and the Atmosphere — a social
15
-
ecosystem with millions of users
13
+
<p className="text-secondary">
14
+
Send updates via Email, Bluesky, and the Atmosphere{" "}
15
+
</p>
16
+
<p className="text-secondary pt-2">
17
+
Leverage a social ecosystem with millions of users
16
18
</p>
17
19
</div>
18
20
</div>
19
21
<div className="flex md:flex-row flex-col-reverse md:gap-8 gap-4 justify-center">
20
22
<div className="flex flex-col w-fill max-w-sm text-center md:text-right md:py-4 py-0 mx-auto">
21
23
<h3>Express yourself</h3>
22
-
<p>Custom themes and custom domains: $0</p>
24
+
<p className="text-secondary">
25
+
Free custom themes <br />
26
+
and domains
27
+
</p>
23
28
</div>
24
29
<img
25
-
src="/about/customize.webp"
30
+
src="/about/customize.png"
26
31
alt=""
27
32
className="w-fill min-w-[160px] max-w-[720px] grow mx-auto"
28
33
/>
29
34
</div>
30
35
</div>
31
-
<div className="flex gap-3 sm:gap-8 w-fit mx-auto pt-12 sm:pt-20 items-stretch">
36
+
<div className="flex sm:flex-row flex-col gap-4 sm:gap-8 w-fit mx-auto pt-12 sm:pt-20 items-stretch">
32
37
<div className="flex-1 flex flex-col text-center">
33
38
<h4>Write together</h4>
34
-
<p>
39
+
<p className="text-secondary">
35
40
Collaborative editing <br />
36
41
and easy sharing
37
42
</p>
38
43
</div>
39
-
<div className="border-l border-t border-border w-px " />
44
+
<div className="border-l border-t border-border sm:w-px w-full " />
40
45
<div className="flex-1 flex flex-col text-center">
41
46
<h4>Build your community</h4>
42
-
<p>Newsletters, events, conversations and more</p>
47
+
<p className="text-secondary">
48
+
Newsletters, events, <br />
49
+
conversations and more
50
+
</p>
43
51
</div>
44
52
</div>
45
53
</>
+58
-57
components/Blocks/StandardSitePostBlock/index.tsx
+58
-57
components/Blocks/StandardSitePostBlock/index.tsx
···
89
89
<SettingsTriggerButton aria-label="Standard Site Post Settings" />
90
90
}
91
91
>
92
-
<div className="flex flex-col gap-2 w-xs pt-1 p-3! overflow-y-auto">
92
+
<div className="flex flex-col gap-2 w-full sm:w-[1000px] sm:max-w-md pt-1 p-3! overflow-y-auto">
93
93
<div>
94
94
<h4>Post Size</h4>
95
-
<div className="text-sm text-tertiary italic">
96
-
This block links to a Standard Site article.
97
-
</div>
98
95
</div>
99
-
<div className="flex flex-col gap-3 w-full">
96
+
<div className="flex sm:flex-row flex-col sm:gap-1 gap-2 w-full items-stretch">
100
97
{(
101
98
[
102
99
{ value: "small", Icon: SmallIcon },
···
114
111
size !== "large");
115
112
return (
116
113
<button
117
-
className="text-left"
114
+
className={`PostBlockSizeSettingOption text-left flex flex-col flex-1 pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`}
118
115
key={option.value}
119
116
type="button"
120
117
aria-pressed={selected}
···
130
127
});
131
128
}}
132
129
>
133
-
<option.Icon selected={selected} />
130
+
<div className="text-xs font-bold text-secondary uppercase">
131
+
{option.value}
132
+
</div>
133
+
<div className="flex items-center grow w-full ">
134
+
<option.Icon selected={selected} />
135
+
</div>
134
136
</button>
135
137
);
136
138
})}
···
154
156
);
155
157
}
156
158
159
+
function PlaceholderText(size: "sm" | "md" | "lg", width?: string) {
160
+
return (
161
+
<div
162
+
className={`
163
+
${width ? `w-[${width}]` : "w-full"}
164
+
${
165
+
size === "sm"
166
+
? "h-1.5 bg-border-light"
167
+
: size === "lg"
168
+
? "h-3 bg-border"
169
+
: "w-full h-1.5 bg-border"
170
+
}
171
+
rounded-[2px]`}
172
+
/>
173
+
);
174
+
}
175
+
157
176
const SmallIcon = ({ selected }: { selected: boolean }) => {
158
177
return (
159
178
<div
160
-
className={`flex flex-col pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`}
179
+
className={`flex gap-2 p-2 w-full overflow-hidden opaque-container border-tertiary! ${selected && "border-accent-contrast!"}`}
161
180
>
162
-
<div className="text-xs font-bold text-secondary">SMALL</div>
163
-
<div
164
-
className={`flex gap-2 p-2 w-full overflow-hidden opaque-container border-tertiary! ${selected && "border-accent-contrast!"}`}
165
-
>
166
-
<div className="flex flex-col gap-1 grow min-w-0">
167
-
<div className="w-full h-4 bg-border rounded-[2px]" />
168
-
169
-
<div className="flex justify-between mt-1 w-full">
170
-
<div className="w-[60%] h-2 bg-border-light rounded-[2px]" />
171
-
<div className="w-6 h-2 bg-border-light rounded-[2px]" />
172
-
</div>
181
+
<div className="flex flex-col gap-1 grow min-w-0">
182
+
{PlaceholderText("lg")}
183
+
<div className="flex justify-between mt-1 w-full">
184
+
{PlaceholderText("sm", "60%")}
173
185
</div>
174
186
</div>
175
187
</div>
···
179
191
const MedIcon = ({ selected }: { selected: boolean }) => {
180
192
return (
181
193
<div
182
-
className={`flex flex-col pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`}
194
+
className={`flex opaque-container border-tertiary! overflow-hidden w-full ${selected && "border-accent-contrast!"}`}
183
195
>
184
-
<div className="text-xs font-bold text-secondary">MEDIUM</div>
185
-
<div
186
-
className={`flex opaque-container border-tertiary! overflow-hidden ${selected && "border-accent-contrast!"}`}
187
-
>
188
-
<div className="flex flex-col gap-1 p-2 grow min-w-0">
189
-
<div className="w-full h-4 bg-border rounded-[2px]" />
190
-
<div className="w-full h-2 bg-border mt-1 rounded-[2px]" />
191
-
<div className="w-full h-2 bg-border rounded-[2px]" />
192
-
<div className="flex justify-between mt-2 w-full">
193
-
<div className="w-[60%] h-2 bg-border-light rounded-[2px]" />
194
-
<div className="w-6 h-2 bg-border-light rounded-[2px]" />
195
-
</div>
196
+
<div className="flex flex-col gap-1 p-2 grow min-w-0">
197
+
{PlaceholderText("lg")}
198
+
{PlaceholderText("md")}
199
+
{PlaceholderText("md", "80%")}
200
+
<div className="flex justify-between mt-2 w-full">
201
+
{PlaceholderText("sm", "60%")}
196
202
</div>
197
-
<div
198
-
className="aspect-square h-[82px] bg-border border-l border-border shrink-0 bg-cover bg-center"
199
-
style={{
200
-
backgroundImage: "url(/imagePlaceholder.png)",
201
-
backgroundBlendMode: "hard-light",
202
-
}}
203
-
/>
204
203
</div>
204
+
<div
205
+
className="sm:aspect 1/2 aspect-square h-[68px] bg-border border-l border-border shrink-0 bg-cover bg-center"
206
+
style={{
207
+
backgroundImage: "url(/imagePlaceholder.png)",
208
+
backgroundBlendMode: "hard-light",
209
+
}}
210
+
/>
205
211
</div>
206
212
);
207
213
};
···
209
215
const LargeIcon = ({ selected }: { selected: boolean }) => {
210
216
return (
211
217
<div
212
-
className={`flex flex-col pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`}
218
+
className={`flex flex-col w-full gap-1 opaque-container border-tertiary! overflow-hidden ${selected && "border-accent-contrast!"}`}
213
219
>
214
-
<div className="text-xs font-bold text-secondary">LARGE</div>
215
220
<div
216
-
className={`flex flex-col gap-1 opaque-container border-tertiary! overflow-hidden ${selected && "border-accent-contrast!"}`}
217
-
>
218
-
<div
219
-
className="w-full aspect-video bg-border bg-cover bg-center border-b border-border"
220
-
style={{
221
-
backgroundImage: "url(/imagePlaceholder.png)",
222
-
backgroundBlendMode: "hard-light",
223
-
}}
224
-
/>
221
+
className="w-full aspect-4/1 sm:aspect-2/1 bg-border bg-cover bg-center border-b border-border"
222
+
style={{
223
+
backgroundImage: "url(/imagePlaceholder.png)",
224
+
backgroundBlendMode: "hard-light",
225
+
}}
226
+
/>
225
227
226
-
<div className="flex flex-col gap-1 p-2 pt-0.5!">
227
-
<div className="w-full h-4 bg-border rounded-[2px]" />
228
-
<div className="w-full h-2 bg-border mt-1 rounded-[2px]" />
229
-
<div className="flex justify-between mt-2 w-full">
230
-
<div className="w-[60%] h-2 bg-border-light rounded-[2px]" />
231
-
<div className="w-6 h-2 bg-border-light rounded-[2px]" />
232
-
</div>
228
+
<div className="flex flex-col gap-1 p-2 pt-0.5!">
229
+
{PlaceholderText("lg")}
230
+
{PlaceholderText("md")}
231
+
{PlaceholderText("md", "80%")}
232
+
<div className="flex justify-between mt-2 w-full">
233
+
{PlaceholderText("sm", "60%")}
233
234
</div>
234
235
</div>
235
236
</div>
public/about/HeroText.webp
public/about/HeroText.webp
This is a binary file and will not be displayed.
public/about/customize.webp
public/about/customize.webp
This is a binary file and will not be displayed.
public/about/reach-audience.webp
public/about/reach-audience.webp
This is a binary file and will not be displayed.