Skip to content

Commit 47f5567

Browse files
CodeDoctorDECodeDoctorDE
committed
Redesign landing page to sell the app
1 parent 61d29d1 commit 47f5567

8 files changed

Lines changed: 268 additions & 30 deletions

File tree

‎docs/src/assets/img/showcase-add.png‎

43.5 KB
Loading

‎docs/src/assets/img/showcase-canvas.png‎

38 KB
Loading

‎docs/src/assets/img/showcase-home.png‎

48.2 KB
Loading

‎docs/src/assets/img/showcase-phone.png‎

17.3 KB
Loading

‎docs/src/assets/img/showcase-templates.png‎

39.6 KB
Loading

‎docs/src/assets/img/showcase-tools.png‎

29.9 KB
Loading

‎docs/src/components/LandingFeature.astro‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
---
2+
import { Image } from 'astro:assets';
3+
import type { ImageMetadata } from 'astro';
4+
5+
interface Props {
6+
image: ImageMetadata;
7+
alt: string;
8+
reverse?: boolean;
9+
portrait?: boolean;
10+
}
11+
12+
const { image, alt, reverse = false, portrait = false } = Astro.props;
13+
---
14+
15+
<section class:list={['landing-feature', { reverse, portrait }]}>
16+
<div class="landing-feature__copy">
17+
<slot />
18+
</div>
19+
<div class="landing-feature__visual">
20+
<Image src={image} alt={alt} widths={[480, 720, 960]} sizes="(min-width: 50rem) 52vw, 100vw" />
21+
</div>
22+
</section>
23+
24+
<style>
25+
.landing-feature {
26+
display: grid;
27+
grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.55fr);
28+
gap: clamp(1.5rem, 4vw, 3.5rem);
29+
align-items: center;
30+
margin-block: clamp(2.5rem, 6vw, 5rem);
31+
padding: clamp(1.25rem, 3vw, 2rem);
32+
overflow: hidden;
33+
border: 1px solid var(--sl-color-gray-5);
34+
border-radius: 1rem;
35+
background: var(--sl-color-gray-6);
36+
}
37+
38+
.landing-feature.reverse {
39+
grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.65fr);
40+
}
41+
42+
.landing-feature.reverse .landing-feature__visual {
43+
order: -1;
44+
}
45+
46+
.landing-feature__copy :global(h3) {
47+
margin-top: 0;
48+
font-size: clamp(1.6rem, 3vw, 2.35rem);
49+
line-height: 1.12;
50+
}
51+
52+
.landing-feature__copy :global(p:last-child) {
53+
margin-bottom: 0;
54+
}
55+
56+
.landing-feature__visual {
57+
display: grid;
58+
place-items: center;
59+
}
60+
61+
.landing-feature__visual :global(img) {
62+
width: 100%;
63+
max-height: 40rem;
64+
object-fit: contain;
65+
border: 1px solid var(--sl-color-gray-5);
66+
border-radius: 0.65rem;
67+
background: white;
68+
box-shadow: var(--sl-shadow-md);
69+
}
70+
71+
.landing-feature.portrait .landing-feature__visual :global(img) {
72+
width: auto;
73+
max-width: min(100%, 22rem);
74+
}
75+
76+
.landing-feature.portrait,
77+
.landing-feature.portrait.reverse {
78+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
79+
}
80+
81+
@media (max-width: 50rem) {
82+
.landing-feature,
83+
.landing-feature.reverse {
84+
grid-template-columns: 1fr;
85+
}
86+
87+
.landing-feature.reverse .landing-feature__visual {
88+
order: initial;
89+
}
90+
}
91+
92+
@keyframes landing-feature-reveal {
93+
from {
94+
opacity: 0.35;
95+
transform: translateY(1.25rem);
96+
}
97+
98+
to {
99+
opacity: 1;
100+
transform: translateY(0);
101+
}
102+
}
103+
104+
@keyframes landing-heading-reveal {
105+
from {
106+
opacity: 0;
107+
transform: translateY(0.75rem);
108+
}
109+
110+
to {
111+
opacity: 1;
112+
transform: translateY(0);
113+
}
114+
}
115+
116+
@keyframes landing-group-reveal {
117+
from {
118+
opacity: 0.25;
119+
transform: scale(0.985);
120+
}
121+
122+
to {
123+
opacity: 1;
124+
transform: scale(1);
125+
}
126+
}
127+
128+
:global(html:has(.landing-feature)) {
129+
--sl-content-width: 86rem;
130+
}
131+
132+
@media (prefers-reduced-motion: no-preference) {
133+
@supports (animation-timeline: view()) {
134+
.landing-feature {
135+
animation: landing-feature-reveal linear both;
136+
animation-timeline: view();
137+
animation-range: entry 5% cover 24%;
138+
}
139+
140+
:global(html:has(.landing-feature) .sl-markdown-content > h2) {
141+
animation: landing-heading-reveal linear both;
142+
animation-timeline: view();
143+
animation-range: entry 10% cover 20%;
144+
}
145+
146+
:global(html:has(.landing-feature) .sl-markdown-content > .card-grid) {
147+
animation: landing-group-reveal linear both;
148+
animation-timeline: view();
149+
animation-range: entry 5% cover 18%;
150+
}
151+
}
152+
}
153+
</style>

‎docs/src/content/docs/index.mdx‎

Lines changed: 115 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,150 @@
11
---
22
title: Linwood Butterfly
3-
description: 🎨 Powerful, minimalistic, cross-platform, opensource note-taking app 🎨
3+
description: A free and open-source canvas for handwriting, drawing, PDF annotation, and visual thinking on every device.
44
template: splash
55
hero:
6-
tagline: 🎨 Powerful, minimalistic, cross-platform, opensource note-taking app 🎨
6+
tagline: Your ideas should not have to fit inside a page. Handwrite, sketch, annotate, and organize on an infinite canvas that stays yours.
77
image:
88
file: /public/img/logo.svg
99
actions:
10-
- text: Download
10+
- text: Download Butterfly
1111
link: /downloads/
1212
icon: download
1313
variant: primary
14-
- text: Getting started
15-
link: /docs/v2/intro/
16-
icon: document
17-
- text: Web App
14+
- text: Try it in your browser
1815
link: https://web.butterfly.linwood.dev
1916
icon: rocket
20-
- text: Blog
17+
- text: Read the Butterfly blog
2118
link: https://linwood.dev/butterfly
2219
icon: external
2320
variant: secondary
2421
---
2522

2623
import { LinkCard, Card, CardGrid } from '@astrojs/starlight/components';
24+
import LandingFeature from '@components/LandingFeature.astro';
25+
import showcaseAdd from '@assets/img/showcase-add.png';
26+
import showcaseHome from '@assets/img/showcase-home.png';
27+
import showcasePhone from '@assets/img/showcase-phone.png';
28+
import showcaseTemplates from '@assets/img/showcase-templates.png';
29+
import showcaseTools from '@assets/img/showcase-tools.png';
2730

28-
## Principles
31+
## Notes are only the beginning
32+
33+
Butterfly is a creative workspace for people who think visually. Capture lecture notes with a stylus, mark up a PDF, sketch an interface, build a diagram, plan a project, or mix all of them in the same document. Everything remains movable, resizable, recolorable, and ready to evolve with your idea.
34+
35+
<LandingFeature
36+
image={showcaseTools}
37+
alt="Pen settings for a Butterfly drawing tool"
38+
>
39+
### Tune every stroke
40+
41+
Draw with a stylus, touch, or mouse and shape the pen around the way you work. Adjust stroke width, thinning, smoothing, pressure behavior, and shape detection. If a mark is not quite right, select it and keep editing instead of starting over.
42+
</LandingFeature>
43+
44+
<LandingFeature
45+
image={showcaseAdd}
46+
alt="The Butterfly add menu with import and creative tool options"
47+
reverse
48+
>
49+
### Mix ink, text, shapes, and media
50+
51+
Handwrite beside rich text or Markdown, add precise shapes and lines, place images, and capture photos without leaving your document. Import PDFs, SVGs, and images to annotate existing work, then export the result as PDF, SVG, or an image when it is ready to share.
52+
</LandingFeature>
53+
54+
<LandingFeature
55+
image={showcaseTemplates}
56+
alt="The Butterfly template browser with several paper styles"
57+
>
58+
### Make Butterfly fit your workflow
59+
60+
Create templates that remember content, backgrounds, tools, settings, layers, areas, and pages. Save frequently used elements as reusable components in packs, build custom color palettes and text styles, and arrange the toolbar around what you actually use.
61+
</LandingFeature>
62+
63+
## Powerful when your projects grow
64+
65+
An infinite canvas should still be easy to navigate. Butterfly lets one document contain multiple infinite pages, page folders, layers, named areas, and waypoints. Move from the big picture to one exact detail without losing your place.
66+
67+
![A large Butterfly canvas with pages, handwritten notes, and drawing tools](@assets/img/showcase-canvas.png)
2968

3069
<CardGrid stagger>
31-
<Card title="Cross platform" icon="laptop">
32-
You can use the app on your phone, tablet, laptop, or desktop. The app is available on Linux, Android, and Windows. You can also use the app on the web.
70+
<Card title="Every element stays editable" icon="pencil">
71+
Move, resize, recolor, and reorganize content after placing it. Your first attempt never has to be your final one.
3372
</Card>
34-
<Card title="Simple and intuitive" icon="puzzle">
35-
Every tool is on the right place. Open the app and start drawing. Change your tools by clicking on it.
73+
<Card title="From paper to presentation" icon="document">
74+
Import camera photos, gallery images, PDFs, and SVGs. Combine them with your own notes and export clean results in common formats.
3675
</Card>
37-
<Card title="Customizable" icon="pencil">
38-
Change everything to your needs. Choose your custom color, create a palette and add your pages to the paper. The paper has an infinite size, perfect for your ideas and notes.
76+
<Card title="Reusable building blocks" icon="puzzle">
77+
Turn favorite layouts into templates and frequently used content into packs, stamps, palettes, and styles available across documents.
3978
</Card>
40-
<Card title="Choose where your data is stored" icon="open-book">
41-
You can choose to store your data locally or in your favorite cloud (webdav). You can also export your data to a file and import it again.
79+
<Card title="Fast access to a deep toolbox" icon="open-book">
80+
Go beyond pen and eraser with labels, shapes, polygons, rulers, grids, textures, stamps, a laser pointer, presentation tools, and more.
4281
</Card>
4382
</CardGrid>
4483

45-
## Features
84+
<LandingFeature
85+
image={showcasePhone}
86+
alt="A handwritten Butterfly document on a phone"
87+
reverse
88+
portrait
89+
>
90+
### Start here. Continue anywhere.
4691

47-
<div class="dark:sl-hidden">
48-
![Main view](@assets/img/main.png)
49-
</div>
50-
<div class="light:sl-hidden">
51-
![Main view](@assets/img/main_dark.png)
52-
</div>
92+
Use the same adaptable workspace on Android, iOS, Windows, macOS, Linux, and the web. Butterfly is equally at home with a phone in your hand, a stylus on a tablet, or a keyboard and mouse at your desk.
93+
</LandingFeature>
5394

54-
<CardGrid stagger>
55-
<Card title="Let your ideas flow on an infinite canvas">
95+
## Your work belongs to you
96+
97+
Butterfly is offline-first, free, and open source. Save documents directly on your device, choose a different data directory, connect your own WebDAV server, or keep readable `.tbfly` files in version control. There is no required account and no proprietary cloud standing between you and your notes.
98+
99+
<CardGrid>
100+
<Card title="Local by default" icon="laptop">
101+
Keep working without an internet connection. Your documents live on your device unless you choose another destination.
56102
</Card>
57-
<Card title="Use your pen, markdown or rich text to let your ideas flow">
103+
<Card title="Bring your own cloud" icon="rocket">
104+
Connect WebDAV, including services such as Nextcloud, and make remote files available for offline work when you need them.
58105
</Card>
59-
<Card title="Load PDF, SVG, PNG and more files into your notes or take pictures from the camera">
106+
<Card title="Open formats and open code" icon="open-book">
107+
Use portable Butterfly files, a JSON-based format suited to Git, and familiar export formats. The app itself is licensed under AGPL-3.0.
60108
</Card>
61-
<Card title="Structure your notes by adding areas and waypoints or use multiple pages">
109+
<Card title="Create together" icon="puzzle">
110+
Experimental collaboration supports end-to-end encrypted sessions through Swamp or a WebSocket server you host yourself.
62111
</Card>
63112
</CardGrid>
64113

65-
<LinkCard title="Download today" href="/downloads/" />
114+
<LandingFeature
115+
image={showcaseHome}
116+
alt="The Butterfly home screen with recent documents and quick-start templates"
117+
>
118+
### Open Butterfly and begin
119+
120+
Recent documents, file search, folders, imports, storage locations, and quick-start templates are all close at hand. The interface stays focused while the deeper controls appear when you need them.
121+
</LandingFeature>
122+
123+
## Make your next idea tangible
124+
125+
No subscription is required. Download Butterfly, open the web app, and create your first canvas today.
126+
127+
<CardGrid>
128+
<LinkCard
129+
title="Download Butterfly"
130+
description="Install the app on your phone, tablet, or computer."
131+
href="/downloads/"
132+
/>
133+
<LinkCard
134+
title="Try the web app"
135+
description="Start a canvas in your browser without installing anything."
136+
href="https://web.butterfly.linwood.dev"
137+
/>
138+
<LinkCard
139+
title="Read the Butterfly blog"
140+
description="Follow releases, project news, and stories from development."
141+
href="https://linwood.dev/butterfly"
142+
/>
143+
<LinkCard
144+
title="Learn the essentials"
145+
description="Create your first document and explore the complete toolbox."
146+
href="/docs/v2/intro/"
147+
/>
148+
</CardGrid>
149+
150+
Butterfly is built in the open and available in many languages. [Join the community](/community/) to share feedback, help with translations, or contribute to the project.

0 commit comments

Comments
 (0)