Skip to content

Refactor homepage copy/layout and tighten spacing #141

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.

Sign up for GitHub

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
feynon wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor homepage copy/layout and tighten spacing #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
39 changes: 26 additions & 13 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -904,31 +904,34 @@ html[data-site-announcement-ready="true"] .minimal-topbar {
h1 hero title (elsewhere) → section heading → section lede → item title → item body */
.minimal-copy {
width: min(100% - 2rem, 720px);
margin: 7rem auto 0;
margin: 7.5rem auto 0;
padding: 0 12px;
display: flex;
flex-direction: column;
gap: 2.5rem;
gap: 2rem;
}
.minimal-copy.minimal-copy--after-device {
margin-top: 4.5rem;
margin-top: 5rem;
}
.minimal-copy-heading {
margin: 0;
font-size: 1.5rem;
line-height: 1.25;
letter-spacing: -0.02em;
font-size: 1.625rem;
line-height: 1.2;
letter-spacing: -0.025em;
font-weight: 600;
}
.minimal-copy-content {
min-width: 0;
}
.minimal-copy-lede {
margin: 1rem 0 0;
margin: 0;
font-size: 1rem;
line-height: 1.5;
line-height: 1.6;
letter-spacing: 0;
font-weight: 400;
}
.minimal-copy article h3 {
margin: 0 0 1rem;
margin: 0 0 0.65rem;
display: flex;
flex-wrap: wrap;
align-items: center;
Expand All @@ -940,13 +943,18 @@ html[data-site-announcement-ready="true"] .minimal-topbar {
.minimal-copy article p {
margin: 0;
font-size: 1rem;
line-height: 1.5;
line-height: 1.6;
font-weight: 400;
}
.minimal-disclosure-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
gap: 1.25rem;
}
.minimal-use-case-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.minimal-disclosure summary {
cursor: pointer;
Expand Down Expand Up @@ -978,7 +986,7 @@ html[data-site-announcement-ready="true"] .minimal-topbar {
.minimal-disclosure > p {
margin: 0.85rem 0 0;
font-size: 1rem;
line-height: 1.5;
line-height: 1.6;
font-weight: 400;
}
.minimal-feature-icon {
Expand All @@ -993,13 +1001,18 @@ html[data-site-announcement-ready="true"] .minimal-topbar {
height: 1rem;
}
.minimal-atmosphere-list {
margin: 1.25rem 0 0;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.minimal-atmosphere-content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.minimal-atmosphere-list li {
display: flex;
align-items: center;
Expand Down
72 changes: 35 additions & 37 deletions components/home-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,23 +159,21 @@ export function HomeContent() {
className="minimal-copy minimal-copy--after-device"
aria-labelledby="why-tiles-heading"
>
<div>
<h2 id="why-tiles-heading" className="minimal-copy-heading">
Why Tiles?
</h2>
<h2 id="why-tiles-heading" className="minimal-copy-heading">
Why Tiles?
</h2>
<div className="minimal-copy-content">
<p className="minimal-copy-lede">
For sensitive knowledge work or personal tasks, your AI shouldn’t require you to trust a third party with your conversations and intellectual property. Run models locally, sync chats peer-to-peer with end-to-end encryption, and use social features, such as sharing chats, built on <a href="https://atproto.com">AT Protocol</a>. Tiles gives you user-owned keys for your digital life with <a href="https://www.w3.org/TR/did-1.1/">DIDs</a> and <a href="https://ucan.xyz">UCANs</a>, so your data and identity truly remain yours.
</p>
</div>
</section>

<section className="minimal-copy" aria-labelledby="whats-inside-heading">
<div>
<h2 id="whats-inside-heading" className="minimal-copy-heading">
What&apos;s inside
</h2>
</div>
<div className="minimal-disclosure-list">
<h2 id="whats-inside-heading" className="minimal-copy-heading">
What&apos;s inside
</h2>
<div className="minimal-copy-content minimal-disclosure-list">
{features.map((feature) => (
<details className="minimal-disclosure" key={feature.title}>
<summary>
Expand All @@ -194,29 +192,29 @@ export function HomeContent() {
</section>

<section className="minimal-copy" aria-labelledby="use-cases-heading">
<div>
<h2 id="use-cases-heading" className="minimal-copy-heading">
Use cases
</h2>
<h2 id="use-cases-heading" className="minimal-copy-heading">
Use cases
</h2>
<div className="minimal-copy-content minimal-use-case-list">
{useCases.map((useCase) => (
<article key={useCase.title}>
<h3>
<span className="minimal-feature-icon" aria-hidden="true">
<useCase.icon strokeWidth={1.75} />
</span>
{useCase.title}
</h3>
<p>{useCase.body}</p>
</article>
))}
</div>
{useCases.map((useCase) => (
<article key={useCase.title}>
<h3>
<span className="minimal-feature-icon" aria-hidden="true">
<useCase.icon strokeWidth={1.75} />
</span>
{useCase.title}
</h3>
<p>{useCase.body}</p>
</article>
))}
</section>

<section className="minimal-copy" aria-labelledby="atmosphere-heading">
<div>
<h2 id="atmosphere-heading" className="minimal-copy-heading">
Designed for the ATmosphere
</h2>
<h2 id="atmosphere-heading" className="minimal-copy-heading">
Designed for the ATmosphere
</h2>
<div className="minimal-copy-content minimal-atmosphere-content">
<ul className="minimal-atmosphere-list">
{atmosphereBullets.map((bullet) => (
<li key={bullet}>
Expand All @@ -227,15 +225,15 @@ export function HomeContent() {
</li>
))}
</ul>
<div className="minimal-atmosphere-note">
<p>
Learn more about AT Protocol in{" "}
<AtmosphereExternalLink href="https://overreacted.io/open-social/">Open Social</AtmosphereExternalLink>{" "}
by Dan Abramov.
</p>
</div>
<span className="minimal-atmosphere-icon" aria-hidden="true" />
</div>
<div className="minimal-atmosphere-note">
<p>
Learn more about AT Protocol in{" "}
<AtmosphereExternalLink href="https://overreacted.io/open-social/">Open Social</AtmosphereExternalLink>{" "}
by Dan Abramov.
</p>
</div>
<span className="minimal-atmosphere-icon" aria-hidden="true" />
</section>

<SiteFooter />
Expand Down