Skip to content

Commit b779587

Browse files
author
ComputelessComputer
committed
add responsive hero video layout
1 parent ce0ebf1 commit b779587

2 files changed

Lines changed: 231 additions & 109 deletions

File tree

‎apps/landing/public/philo-video-poster.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎apps/landing/src/pages/index.astro‎

Lines changed: 214 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -79,123 +79,159 @@ posts.sort((a, b) => b.data.publishedAt.getTime() - a.data.publishedAt.getTime()
7979
</head>
8080
<body>
8181
<div class="ambient"></div>
82-
<main class="shell">
83-
<header class="enter" style="--delay: 0ms;">
84-
<div class="brand-row">
85-
<p class="brand">Philo</p>
86-
<p class="status">macOS beta</p>
87-
</div>
88-
</header>
89-
90-
<section class="hero enter" style="--delay: 70ms;">
91-
<h1>A daily journal that builds things for you.</h1>
92-
<p class="lede">
93-
Capture notes. Track tasks that roll forward. Generate tiny tools in place when you need
94-
them.
95-
</p>
96-
<p class="release-note">
97-
Download Philo from <a href="https://github.com/ComputelessComputer/philo/releases/latest">GitHub Releases</a>.
98-
</p>
99-
<form class="waitlist" action="#" method="post">
100-
<label for="email">Get early access</label>
101-
<div class="input-row">
102-
<input id="email" type="email" name="email" placeholder="name@domain.com" />
103-
<button type="submit">→</button>
82+
<div class="page-layout">
83+
<main class="shell">
84+
<header class="enter" style="--delay: 0ms;">
85+
<div class="brand-row">
86+
<p class="brand">Philo</p>
87+
<p class="status">macOS beta</p>
10488
</div>
105-
</form>
106-
</section>
107-
108-
<section class="panel enter" style="--delay: 140ms;">
109-
<h2>Core flow</h2>
110-
<ul class="detail-list">
111-
{
112-
capabilities.map((item,) => (
113-
<li class="detail-item">
114-
<div class="detail-copy">
115-
<p class="item-title">{item.title} <span>→</span></p>
116-
<p class="item-copy">{item.description}</p>
117-
</div>
118-
<div class="detail-placeholder" role="img" aria-label={`${item.title} image placeholder`}>
119-
<span>{item.placeholder}</span>
120-
</div>
121-
</li>
122-
))
123-
}
124-
</ul>
125-
</section>
126-
127-
<section class="panel enter" style="--delay: 210ms;">
128-
<h2>Things people build in Philo</h2>
129-
<div class="carousel" data-carousel>
130-
<div class="carousel-controls">
131-
<button type="button" class="carousel-button" data-carousel-prev aria-label="Previous example">←</button>
132-
<button type="button" class="carousel-button" data-carousel-next aria-label="Next example">→</button>
89+
</header>
90+
91+
<section class="hero enter" style="--delay: 70ms;">
92+
<h1>A daily journal that builds things for you.</h1>
93+
<p class="lede">
94+
Capture notes. Track tasks that roll forward. Generate tiny tools in place when you
95+
need them.
96+
</p>
97+
<p class="release-note">
98+
Download Philo from <a href="https://github.com/ComputelessComputer/philo/releases/latest">GitHub Releases</a>.
99+
</p>
100+
<div class="video-mobile">
101+
<p class="video-label">Product walkthrough</p>
102+
<div class="video-frame">
103+
<video
104+
class="product-video"
105+
controls
106+
muted
107+
loop
108+
playsinline
109+
preload="metadata"
110+
poster="/philo-video-poster.svg"
111+
>
112+
<source src="/philo-demo.mp4" type="video/mp4" />
113+
</video>
114+
</div>
133115
</div>
134-
<div class="carousel-track" data-carousel-track>
116+
<form class="waitlist" action="#" method="post">
117+
<label for="email">Get early access</label>
118+
<div class="input-row">
119+
<input id="email" type="email" name="email" placeholder="name@domain.com" />
120+
<button type="submit">→</button>
121+
</div>
122+
</form>
123+
</section>
124+
125+
<section class="panel enter" style="--delay: 140ms;">
126+
<h2>Core flow</h2>
127+
<ul class="detail-list">
135128
{
136-
examples.map((item,) => (
137-
<article class="example-card">
138-
<p class="example-title">{item.title}</p>
139-
<p class="example-summary">{item.summary}</p>
140-
<div class="example-preview" role="img" aria-label={`${item.title} preview`}>
141-
<ul>
142-
{item.lines.map((line,) => <li>{line}</li>)}
143-
</ul>
129+
capabilities.map((item,) => (
130+
<li class="detail-item">
131+
<div class="detail-copy">
132+
<p class="item-title">{item.title} <span>→</span></p>
133+
<p class="item-copy">{item.description}</p>
134+
</div>
135+
<div class="detail-placeholder" role="img" aria-label={`${item.title} image placeholder`}>
136+
<span>{item.placeholder}</span>
144137
</div>
145-
</article>
138+
</li>
146139
))
147140
}
141+
</ul>
142+
</section>
143+
144+
<section class="panel enter" style="--delay: 210ms;">
145+
<h2>Things people build in Philo</h2>
146+
<div class="carousel" data-carousel>
147+
<div class="carousel-controls">
148+
<button type="button" class="carousel-button" data-carousel-prev aria-label="Previous example">←</button>
149+
<button type="button" class="carousel-button" data-carousel-next aria-label="Next example">→</button>
150+
</div>
151+
<div class="carousel-track" data-carousel-track>
152+
{
153+
examples.map((item,) => (
154+
<article class="example-card">
155+
<p class="example-title">{item.title}</p>
156+
<p class="example-summary">{item.summary}</p>
157+
<div class="example-preview" role="img" aria-label={`${item.title} preview`}>
158+
<ul>
159+
{item.lines.map((line,) => <li>{line}</li>)}
160+
</ul>
161+
</div>
162+
</article>
163+
))
164+
}
165+
</div>
166+
<div class="carousel-dots">
167+
{
168+
examples.map((item, index,) => (
169+
<button
170+
type="button"
171+
class={`carousel-dot ${index === 0 ? "is-active" : ""}`}
172+
data-carousel-dot
173+
data-index={index}
174+
aria-label={`Go to ${item.title}`}
175+
aria-current={index === 0 ? "true" : "false"}
176+
></button>
177+
))
178+
}
179+
</div>
148180
</div>
149-
<div class="carousel-dots">
181+
</section>
182+
183+
<section class="panel enter" style="--delay: 280ms;">
184+
<h2>Notes from the team</h2>
185+
<ul class="link-list">
150186
{
151-
examples.map((item, index,) => (
152-
<button
153-
type="button"
154-
class={`carousel-dot ${index === 0 ? "is-active" : ""}`}
155-
data-carousel-dot
156-
data-index={index}
157-
aria-label={`Go to ${item.title}`}
158-
aria-current={index === 0 ? "true" : "false"}
159-
></button>
187+
posts.map((post,) => (
188+
<li>
189+
<a href={`/blog/${post.slug}`}>
190+
{post.data.title}
191+
<span>→</span>
192+
</a>
193+
</li>
160194
))
161195
}
162-
</div>
196+
</ul>
197+
</section>
198+
199+
<section class="panel enter" style="--delay: 350ms;">
200+
<h2>Philo runs local-first</h2>
201+
<p class="item-copy">
202+
Your journal lives on disk as markdown files. Keep your data close, move fast, and
203+
shape the app around your own workflow.
204+
</p>
205+
</section>
206+
207+
<footer class="enter" style="--delay: 420ms;">
208+
<nav>
209+
<a href="#">X</a>
210+
<a href="https://github.com/ComputelessComputer/philo">GitHub</a>
211+
<a href="#">Docs</a>
212+
<a href="mailto:team@philo.app">Email</a>
213+
</nav>
214+
</footer>
215+
</main>
216+
217+
<aside class="video-column enter" style="--delay: 120ms;">
218+
<p class="video-label">Product walkthrough</p>
219+
<div class="video-frame">
220+
<video
221+
class="product-video"
222+
controls
223+
muted
224+
loop
225+
playsinline
226+
preload="metadata"
227+
poster="/philo-video-poster.svg"
228+
>
229+
<source src="/philo-demo.mp4" type="video/mp4" />
230+
</video>
163231
</div>
164-
</section>
165-
166-
<section class="panel enter" style="--delay: 280ms;">
167-
<h2>Notes from the team</h2>
168-
<ul class="link-list">
169-
{
170-
posts.map((post,) => (
171-
<li>
172-
<a href={`/blog/${post.slug}`}>
173-
{post.data.title}
174-
<span>→</span>
175-
</a>
176-
</li>
177-
))
178-
}
179-
</ul>
180-
</section>
181-
182-
<section class="panel enter" style="--delay: 350ms;">
183-
<h2>Philo runs local-first</h2>
184-
<p class="item-copy">
185-
Your journal lives on disk as markdown files. Keep your data close, move fast, and shape
186-
the app around your own workflow.
187-
</p>
188-
</section>
189-
190-
<footer class="enter" style="--delay: 420ms;">
191-
<nav>
192-
<a href="#">X</a>
193-
<a href="https://github.com/ComputelessComputer/philo">GitHub</a>
194-
<a href="#">Docs</a>
195-
<a href="mailto:team@philo.app">Email</a>
196-
</nav>
197-
</footer>
198-
</main>
232+
<p class="video-note">Place `philo-demo.mp4` in `apps/landing/public/` to use your own demo.</p>
233+
</aside>
234+
</div>
199235
</body>
200236
</html>
201237

@@ -302,11 +338,20 @@ posts.sort((a, b) => b.data.publishedAt.getTime() - a.data.publishedAt.getTime()
302338
opacity: 0.8;
303339
}
304340

305-
.shell {
341+
.page-layout {
306342
position: relative;
307-
width: min(100%, 720px);
343+
width: min(100%, 1160px);
308344
margin: 0 auto;
309345
padding: 68px 24px 88px;
346+
display: grid;
347+
grid-template-columns: minmax(0, 720px) minmax(0, 320px);
348+
gap: 34px;
349+
align-items: start;
350+
}
351+
352+
.shell {
353+
position: relative;
354+
width: 100%;
310355
}
311356

312357
.brand-row {
@@ -362,6 +407,11 @@ posts.sort((a, b) => b.data.publishedAt.getTime() - a.data.publishedAt.getTime()
362407
text-underline-offset: 2px;
363408
}
364409

410+
.video-mobile {
411+
display: none;
412+
margin-top: 18px;
413+
}
414+
365415
.waitlist {
366416
margin-top: 36px;
367417
max-width: 430px;
@@ -615,6 +665,42 @@ posts.sort((a, b) => b.data.publishedAt.getTime() - a.data.publishedAt.getTime()
615665
background: var(--accent);
616666
}
617667

668+
.video-column {
669+
position: sticky;
670+
top: 20px;
671+
border-top: 1px solid var(--line);
672+
padding-top: 24px;
673+
}
674+
675+
.video-label {
676+
margin: 0 0 10px;
677+
color: #3f3f3d;
678+
font-size: var(--fs-sm);
679+
font-weight: 500;
680+
letter-spacing: 0.04em;
681+
text-transform: uppercase;
682+
}
683+
684+
.video-frame {
685+
border: 1px solid var(--line);
686+
background: color-mix(in srgb, var(--bg-soft) 90%, #ffffff);
687+
padding: 8px;
688+
}
689+
690+
.product-video {
691+
display: block;
692+
width: 100%;
693+
aspect-ratio: 16 / 9;
694+
border: 1px dashed color-mix(in srgb, var(--line) 82%, #bfc2ce);
695+
background: #efefe9;
696+
}
697+
698+
.video-note {
699+
margin: 10px 0 0;
700+
color: #676762;
701+
font-size: var(--fs-xs);
702+
}
703+
618704
footer {
619705
margin-top: 42px;
620706
border-top: 1px solid var(--line);
@@ -654,11 +740,30 @@ posts.sort((a, b) => b.data.publishedAt.getTime() - a.data.publishedAt.getTime()
654740
}
655741
}
656742

743+
@media (max-width: 980px) {
744+
.page-layout {
745+
grid-template-columns: 1fr;
746+
gap: 0;
747+
}
748+
749+
.video-column {
750+
display: none;
751+
}
752+
753+
.video-mobile {
754+
display: block;
755+
}
756+
}
757+
657758
@media (max-width: 720px) {
658-
.shell {
759+
.page-layout {
659760
padding: 42px 18px 62px;
660761
}
661762

763+
.shell {
764+
width: 100%;
765+
}
766+
662767
.brand {
663768
font-size: var(--fs-lg);
664769
}

0 commit comments

Comments
 (0)