landing hero container
This commit is contained in:
Dominique Deschatre
@@ -408,79 +408,81 @@ onBeforeUnmount(() => {
|
|||||||
<section class="hero" id="hero">
|
<section class="hero" id="hero">
|
||||||
<span class="corner-ticks" aria-hidden="true"><span></span></span>
|
<span class="corner-ticks" aria-hidden="true"><span></span></span>
|
||||||
|
|
||||||
<div class="hero-copy">
|
<div class="hero-inner">
|
||||||
<h1 class="display">
|
<div class="hero-copy">
|
||||||
<span class="line">Memory is</span>
|
<h1 class="display">
|
||||||
<span class="line line-2">identity.</span>
|
<span class="line">Memory is</span>
|
||||||
</h1>
|
<span class="line line-2">identity.</span>
|
||||||
<p class="lede">
|
</h1>
|
||||||
An AI that forgets cannot know you. MemPalace keeps every word you have
|
<p class="lede">
|
||||||
shared — verbatim, on your machine, forever available. One hundred
|
An AI that forgets cannot know you. MemPalace keeps every word you have
|
||||||
percent recall by design.
|
shared — verbatim, on your machine, forever available. One hundred
|
||||||
</p>
|
percent recall by design.
|
||||||
<form class="waitlist waitlist-hero" data-source="hero" novalidate>
|
</p>
|
||||||
<div class="waitlist-head">
|
<form class="waitlist waitlist-hero" data-source="hero" novalidate>
|
||||||
<span class="waitlist-pulse" aria-hidden="true"></span>
|
<div class="waitlist-head">
|
||||||
<span class="waitlist-eyebrow">Subscribe for updates</span>
|
<span class="waitlist-pulse" aria-hidden="true"></span>
|
||||||
</div>
|
<span class="waitlist-eyebrow">Subscribe for updates</span>
|
||||||
<div class="waitlist-row">
|
</div>
|
||||||
<input
|
<div class="waitlist-row">
|
||||||
type="email"
|
<input
|
||||||
class="waitlist-input"
|
type="email"
|
||||||
name="email"
|
class="waitlist-input"
|
||||||
placeholder="you@example.com"
|
name="email"
|
||||||
autocomplete="email"
|
placeholder="you@example.com"
|
||||||
aria-label="Email address"
|
autocomplete="email"
|
||||||
required
|
aria-label="Email address"
|
||||||
/>
|
required
|
||||||
<button type="submit" class="waitlist-submit">
|
/>
|
||||||
<span class="waitlist-label-default">Join the list</span>
|
<button type="submit" class="waitlist-submit">
|
||||||
<span class="waitlist-label-pending" aria-hidden="true">Joining…</span>
|
<span class="waitlist-label-default">Join the list</span>
|
||||||
<svg class="waitlist-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
<span class="waitlist-label-pending" aria-hidden="true">Joining…</span>
|
||||||
<path d="M5 12h14M13 6l6 6-6 6"/>
|
<svg class="waitlist-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
|
||||||
</svg>
|
<path d="M5 12h14M13 6l6 6-6 6"/>
|
||||||
<svg class="waitlist-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
</svg>
|
||||||
<path d="M5 12l5 5 9-11"/>
|
<svg class="waitlist-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
|
||||||
</svg>
|
<path d="M5 12l5 5 9-11"/>
|
||||||
</button>
|
</svg>
|
||||||
</div>
|
</button>
|
||||||
<p class="waitlist-msg" aria-live="polite"></p>
|
</div>
|
||||||
</form>
|
<p class="waitlist-msg" aria-live="polite"></p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="hero-secondary">
|
||||||
|
<a href="/guide/getting-started">Read the docs</a>
|
||||||
|
<span class="sep" aria-hidden="true">·</span>
|
||||||
|
<a href="https://github.com/MemPalace/mempalace">GitHub ↗</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="hero-secondary">
|
|
||||||
<a href="/guide/getting-started">Read the docs</a>
|
|
||||||
<span class="sep" aria-hidden="true">·</span>
|
|
||||||
<a href="https://github.com/MemPalace/mempalace">GitHub ↗</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<!-- Palace video visual -->
|
||||||
|
<div class="palace-stage" aria-hidden="true">
|
||||||
|
<div class="halo"></div>
|
||||||
|
|
||||||
<!-- Palace video visual -->
|
<div class="stars">
|
||||||
<div class="palace-stage" aria-hidden="true">
|
<i style="top:12%; left:22%; --t:5s; --d:0.0s"></i>
|
||||||
<div class="halo"></div>
|
<i style="top:18%; left:74%; --t:6s; --d:1.2s"></i>
|
||||||
|
<i style="top:34%; left:8%; --t:4s; --d:0.6s"></i>
|
||||||
|
<i style="top:44%; left:88%; --t:7s; --d:0.3s"></i>
|
||||||
|
<i style="top:62%; left:14%; --t:5.5s; --d:1.8s"></i>
|
||||||
|
<i style="top:72%; left:82%; --t:4.5s; --d:0.9s"></i>
|
||||||
|
<i style="top:82%; left:38%; --t:6.2s; --d:2.4s"></i>
|
||||||
|
<i style="top:28%; left:52%; --t:5.2s; --d:3.0s"></i>
|
||||||
|
<i style="top:88%; left:60%; --t:4.8s; --d:1.5s"></i>
|
||||||
|
<i style="top:6%; left:48%; --t:6.8s; --d:0.4s"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="stars">
|
<video
|
||||||
<i style="top:12%; left:22%; --t:5s; --d:0.0s"></i>
|
class="palace-video"
|
||||||
<i style="top:18%; left:74%; --t:6s; --d:1.2s"></i>
|
src="/hero_video.mp4"
|
||||||
<i style="top:34%; left:8%; --t:4s; --d:0.6s"></i>
|
autoplay
|
||||||
<i style="top:44%; left:88%; --t:7s; --d:0.3s"></i>
|
muted
|
||||||
<i style="top:62%; left:14%; --t:5.5s; --d:1.8s"></i>
|
loop
|
||||||
<i style="top:72%; left:82%; --t:4.5s; --d:0.9s"></i>
|
playsinline
|
||||||
<i style="top:82%; left:38%; --t:6.2s; --d:2.4s"></i>
|
disablepictureinpicture
|
||||||
<i style="top:28%; left:52%; --t:5.2s; --d:3.0s"></i>
|
></video>
|
||||||
<i style="top:88%; left:60%; --t:4.8s; --d:1.5s"></i>
|
|
||||||
<i style="top:6%; left:48%; --t:6.8s; --d:0.4s"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<video
|
|
||||||
class="palace-video"
|
|
||||||
src="/hero_video.mp4"
|
|
||||||
autoplay
|
|
||||||
muted
|
|
||||||
loop
|
|
||||||
playsinline
|
|
||||||
disablepictureinpicture
|
|
||||||
></video>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -1039,15 +1041,24 @@ body.mempalace-active { overflow-x: hidden; }
|
|||||||
|
|
||||||
/* Hero */
|
/* Hero */
|
||||||
.mempalace-landing .hero {
|
.mempalace-landing .hero {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
min-height: calc(100vh - 54px);
|
min-height: calc(100vh - 54px);
|
||||||
max-height: 900px;
|
max-height: 900px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: clamp(2rem, 4vw, 3.5rem);
|
||||||
|
padding-bottom: clamp(2rem, 4vw, 3.5rem);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.mempalace-landing .hero-inner {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1240px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
||||||
gap: clamp(2rem, 4vw, 4rem);
|
gap: clamp(2rem, 4vw, 4rem);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: clamp(2rem, 4vw, 3.5rem);
|
|
||||||
padding-bottom: clamp(2rem, 4vw, 3.5rem);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
.mempalace-landing .hero-copy { position: relative; z-index: 3; }
|
.mempalace-landing .hero-copy { position: relative; z-index: 3; }
|
||||||
.mempalace-landing .hero h1 {
|
.mempalace-landing .hero h1 {
|
||||||
@@ -1957,7 +1968,7 @@ body.mempalace-active { overflow-x: hidden; }
|
|||||||
.mempalace-landing .mech:nth-child(2) { border-bottom: var(--rule) solid var(--hair); }
|
.mempalace-landing .mech:nth-child(2) { border-bottom: var(--rule) solid var(--hair); }
|
||||||
}
|
}
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.mempalace-landing .hero { grid-template-columns: 1fr; gap: 2rem; }
|
.mempalace-landing .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
|
||||||
.mempalace-landing .palace-stage { justify-self: center; max-width: 400px; order: -1; aspect-ratio: 1 / 0.85; }
|
.mempalace-landing .palace-stage { justify-self: center; max-width: 400px; order: -1; aspect-ratio: 1 / 0.85; }
|
||||||
.mempalace-landing .anatomy-head { grid-template-columns: 1fr; }
|
.mempalace-landing .anatomy-head { grid-template-columns: 1fr; }
|
||||||
.mempalace-landing .anatomy-diagram { grid-template-columns: 1fr; }
|
.mempalace-landing .anatomy-diagram { grid-template-columns: 1fr; }
|
||||||
|
|||||||
Reference in New Issue
Block a user