edde746
09656fa4d3
Pin external actions, images, toolchains, native archives, and tvOS engine artifacts; enforce fail-closed CI checks and keep website privacy disclosures aligned with shipped behavior.
242 lines
7.3 KiB
Svelte
242 lines
7.3 KiB
Svelte
<script lang="ts">
|
|
import DownloadButtons from "./DownloadButtons.svelte";
|
|
import Logo from "./Logo.svelte";
|
|
import homeImage from '$lib/assets/screenshots/phone-home.png?enhanced';
|
|
import libraryImage from '$lib/assets/screenshots/phone-library.png?enhanced';
|
|
</script>
|
|
|
|
<section id="home" class="hero-section">
|
|
<div class="hero-shell">
|
|
<div class="hero-grid">
|
|
<div class="hero-copy">
|
|
<div class="brand-row fade-in">
|
|
<span class="brand-logo"><Logo /></span>
|
|
<span>Plezy</span>
|
|
</div>
|
|
|
|
<h1 class="hero-title fade-in" style="animation-delay: 60ms;">
|
|
A beautiful client for <span>Plex & Jellyfin</span>
|
|
</h1>
|
|
<p class="hero-description fade-in" style="animation-delay: 120ms;">
|
|
Stream your media library with HDR, Dolby Vision, offline downloads, and an experience built for every
|
|
screen.
|
|
</p>
|
|
|
|
<div id="download" class="download-area fade-in" style="animation-delay: 180ms;">
|
|
<DownloadButtons />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual fade-in" style="animation-delay: 240ms;">
|
|
<div class="shape-field" aria-hidden="true">
|
|
<svg
|
|
class="hero-shape arch-shape"
|
|
viewBox="0 0 1 1"
|
|
preserveAspectRatio="none"
|
|
data-material-shape="Arch"
|
|
>
|
|
<path
|
|
d="M0.146447 0.146447C0.236929 0.055964 0.361929 0 0.5 0C0.776142 0 1 0.223858 1 0.5C1 0.619526 1 0.739052 1 0.858579C1 0.936684 0.936683 1 0.858579 1C0.619526 1 0.380474 1 0.141421 1C0.063317 1 0 0.936683 0 0.858579C0 0.739052 0 0.619526 0 0.5C0 0.361929 0.055964 0.236929 0.146447 0.146447Z"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
class="hero-shape cookie-shape"
|
|
viewBox="0 0 1 1"
|
|
data-material-shape="Cookie6Sided"
|
|
>
|
|
<path
|
|
d="M0.716525 0.8729C0.699648 0.882624 0.683956 0.894405 0.669829 0.908026C0.669329 0.908507 0.66883 0.908989 0.66833 0.90947C0.574432 1 0.425694 0.999869 0.331956 0.909174C0.303749 0.881883 0.269272 0.861938 0.231554 0.851089C0.230887 0.850897 0.23022 0.850705 0.229553 0.850514C0.104204 0.81446 0.029948 0.685584 0.061623 0.559056C0.071154 0.520984 0.071189 0.481153 0.061725 0.443063C0.061558 0.44239 0.06139 0.441717 0.061223 0.441043C0.029771 0.31446 0.104254 0.185715 0.229667 0.149882C0.267404 0.1391 0.301917 0.119215 0.330171 0.091974C0.330671 0.091493 0.33117 0.091011 0.331669 0.09053C0.425568 0 0.574306 0.000131 0.668044 0.090826C0.696251 0.118116 0.730728 0.138062 0.768446 0.148911C0.769113 0.149103 0.76978 0.149294 0.770446 0.149486C0.895796 0.18554 0.970052 0.314416 0.938377 0.440944C0.928846 0.479016 0.928811 0.518847 0.938275 0.556937C0.938442 0.55761 0.93861 0.558283 0.938777 0.558957C0.970229 0.685539 0.895746 0.814285 0.770333 0.850118C0.751464 0.855509 0.733402 0.863176 0.716525 0.8729Z"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
class="hero-shape diamond-shape"
|
|
viewBox="0 0 1 1"
|
|
data-material-shape="Diamond"
|
|
>
|
|
<path
|
|
d="M0.5 1C0.472713 1 0.445426 0.992561 0.421304 0.977684C0.398028 0.963329 0.371729 0.929255 0.319131 0.861106C0.252 0.774128 0.184869 0.68715 0.117738 0.600171C0.073881 0.543348 0.073881 0.46409 0.117738 0.407267C0.184869 0.320289 0.252 0.233311 0.319131 0.146333C0.371729 0.078184 0.398028 0.044109 0.421304 0.029754C0.469549 0 0.530451 0 0.578696 0.029754C0.601972 0.044109 0.628271 0.078184 0.680869 0.146333C0.748 0.233311 0.815131 0.320289 0.882262 0.407267C0.926119 0.46409 0.926119 0.543348 0.882262 0.600171C0.815131 0.68715 0.748 0.774128 0.680869 0.861106C0.628271 0.929255 0.601972 0.963329 0.578696 0.977684C0.554573 0.992561 0.527287 1 0.5 1Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="phone secondary-phone">
|
|
<enhanced:img
|
|
src={libraryImage}
|
|
alt="Plezy library screen on phone"
|
|
class="phone-image"
|
|
loading="eager"
|
|
sizes="(min-width: 1024px) 250px, (min-width: 640px) 34vw, 42vw"
|
|
/>
|
|
</div>
|
|
<div class="phone primary-phone">
|
|
<enhanced:img
|
|
src={homeImage}
|
|
alt="Plezy home screen on phone"
|
|
class="phone-image"
|
|
fetchpriority="high"
|
|
sizes="(min-width: 1024px) 280px, (min-width: 640px) 38vw, 48vw"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.hero-section {
|
|
overflow-x: clip;
|
|
padding-inline: var(--page-gutter);
|
|
}
|
|
|
|
.hero-shell {
|
|
width: min(100%, var(--page-width));
|
|
margin-inline: auto;
|
|
padding-block: clamp(3rem, 8vw, 7rem) clamp(5rem, 10vw, 9rem);
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
align-items: center;
|
|
gap: clamp(4rem, 9vw, 8rem);
|
|
}
|
|
|
|
.hero-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.brand-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: clamp(2rem, 5vw, 3rem);
|
|
font-family: var(--font-display);
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.brand-logo :global(img) {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
}
|
|
|
|
.hero-title {
|
|
max-width: 10ch;
|
|
font-family: var(--font-display);
|
|
font-size: clamp(3rem, 10vw, 5.75rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.055em;
|
|
line-height: 0.98;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.hero-title span {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.hero-description {
|
|
max-width: 31rem;
|
|
margin-top: 1.5rem;
|
|
color: var(--color-text-muted);
|
|
font-size: clamp(1rem, 2vw, 1.125rem);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.download-area {
|
|
margin-top: 2rem;
|
|
scroll-margin-top: 2rem;
|
|
}
|
|
|
|
.hero-visual {
|
|
position: relative;
|
|
isolation: isolate;
|
|
display: flex;
|
|
width: min(100%, 35rem);
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: clamp(0.5rem, 2vw, 1.25rem);
|
|
margin-inline: auto;
|
|
padding: 0.5rem 0 2.5rem;
|
|
}
|
|
|
|
.shape-field {
|
|
position: absolute;
|
|
z-index: 0;
|
|
inset: -1.5rem -1.5rem -1rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-shape {
|
|
position: absolute;
|
|
display: block;
|
|
fill: currentColor;
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.arch-shape {
|
|
top: -4%;
|
|
right: -12%;
|
|
width: 78%;
|
|
height: 96%;
|
|
color: var(--color-surface-high);
|
|
transform: rotate(4deg);
|
|
}
|
|
|
|
.cookie-shape {
|
|
top: 6%;
|
|
left: -10%;
|
|
width: clamp(11rem, 32vw, 17rem);
|
|
color: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface-high));
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
.diamond-shape {
|
|
bottom: -8%;
|
|
left: -10%;
|
|
width: clamp(10rem, 28vw, 15rem);
|
|
aspect-ratio: 1;
|
|
color: var(--color-surface-highest);
|
|
transform: rotate(-18deg);
|
|
}
|
|
|
|
|
|
.phone {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
border-radius: clamp(1.75rem, 4vw, 2.75rem);
|
|
background: #000;
|
|
}
|
|
|
|
.secondary-phone {
|
|
width: 44%;
|
|
margin-top: clamp(3rem, 8vw, 6rem);
|
|
transform: rotate(-2.5deg);
|
|
}
|
|
|
|
.primary-phone {
|
|
width: 50%;
|
|
transform: rotate(2deg);
|
|
}
|
|
|
|
.phone :global(picture),
|
|
.phone-image {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fade-in-up var(--motion-expressive) var(--ease-standard) both;
|
|
}
|
|
|
|
@media (min-width: 960px) {
|
|
.hero-grid {
|
|
grid-template-columns: minmax(28rem, 1fr) minmax(28rem, 0.9fr);
|
|
}
|
|
|
|
.hero-visual {
|
|
justify-self: end;
|
|
}
|
|
}
|
|
</style>
|