finn-staging #5
@@ -1,4 +1,4 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1920 923" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg preserveAspectRatio="xMidYMid slice" width="1920" height="923" overflow="visible" style="display: block;" viewBox="0 0 1920 923" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Layer_1" clip-path="url(#clip0_0_4)">
|
||||
<path id="Vector" d="M12.1851 -29.997L0.00488281 -17.7969L12.1851 -5.59676L24.3653 -17.7969L12.1851 -29.997Z" fill="var(--fill-0, #FFF0E8)"/>
|
||||
<path id="Vector_2" d="M102.45 -30.0001L90.2725 -17.7969L102.45 -5.59361L114.627 -17.7969L102.45 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
BIN
public/assets/why-illustration.mp4
Normal file
BIN
public/assets/why-illustration.mp4
Normal file
Binary file not shown.
@@ -7,8 +7,6 @@ export interface Props {
|
||||
|
||||
const { t } = Astro.props
|
||||
const logoFull = "/assets/footer-logo.png";
|
||||
const androidIcon = "/assets/footer-android-icon.svg";
|
||||
const appleIcon = "/assets/footer-apple-icon.svg";
|
||||
---
|
||||
|
||||
<footer class="site-footer">
|
||||
@@ -21,37 +19,6 @@ const appleIcon = "/assets/footer-apple-icon.svg";
|
||||
<p class="site-footer__description">
|
||||
{t.description}
|
||||
</p>
|
||||
<div class="store-badges">
|
||||
<div class="store-badge store-badge--android">
|
||||
<img alt="Android" class="store-badge__icon" src={androidIcon} />
|
||||
<div class="store-badge__copy">
|
||||
<p class="store-badge__platform">{t.android}</p>
|
||||
<p class="store-badge__label">{t.androidCta}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="store-badge store-badge--ios">
|
||||
<div class="store-badge__icon-frame">
|
||||
<img alt="Apple" class="store-badge__apple-icon" src={appleIcon} />
|
||||
</div>
|
||||
<div class="store-badge__copy">
|
||||
<p class="store-badge__platform">{t.ios}</p>
|
||||
<p class="store-badge__label">{t.iosCta}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="site-footer__links">
|
||||
<div class="site-footer__link-column">
|
||||
<a href="#download" class="site-footer__link">{t.links.download}</a>
|
||||
<a href="#features" class="site-footer__link">{t.links.features}</a>
|
||||
<a href="#" class="site-footer__link">{t.links.about}</a>
|
||||
</div>
|
||||
<div class="site-footer__link-column">
|
||||
<p class="site-footer__text site-footer__text--heading">{t.links.contact}</p>
|
||||
<p class="site-footer__text">{t.email}</p>
|
||||
<p class="site-footer__text">{t.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -40,7 +40,17 @@ const iconClasses = ['why-card__icon--square', 'why-card__icon--familiar', 'why-
|
||||
</div>
|
||||
|
||||
<div class="why__illustration">
|
||||
<img alt={t.illustrationAlt} class="why__illustration-image" src="/assets/why-illustration.png" />
|
||||
<video
|
||||
aria-label={t.illustrationAlt}
|
||||
class="why__illustration-image"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="metadata"
|
||||
>
|
||||
<source src="/assets/why-illustration.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
width: 1920px;
|
||||
max-width: none;
|
||||
height: 923px;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
@@ -35,34 +35,41 @@
|
||||
|
||||
.download-cta__content {
|
||||
display: flex;
|
||||
order: 2;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
gap: 36px;
|
||||
overflow: clip;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.download-cta__copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.download-cta__heading {
|
||||
--download-heading-title-size: 32px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.download-cta__title {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
flex-shrink: 0;
|
||||
font-size: var(--download-heading-title-size);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #1a1a1a;
|
||||
@@ -72,8 +79,8 @@
|
||||
.download-cta__logo-frame {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 188px;
|
||||
height: 72px;
|
||||
width: calc(var(--download-heading-title-size) * 3.9167);
|
||||
height: calc(var(--download-heading-title-size) * 1.5);
|
||||
}
|
||||
|
||||
.download-cta__logo {
|
||||
@@ -88,10 +95,11 @@
|
||||
.download-cta__description {
|
||||
max-width: 542px;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #7a726d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.store-badges {
|
||||
@@ -189,10 +197,11 @@
|
||||
|
||||
.download-cta__phone {
|
||||
position: relative;
|
||||
display: none;
|
||||
display: block;
|
||||
order: 1;
|
||||
flex-shrink: 0;
|
||||
width: 418px;
|
||||
height: 510px;
|
||||
width: min(418px, calc(100vw - 32px));
|
||||
aspect-ratio: 418 / 510;
|
||||
}
|
||||
|
||||
.download-cta__phone-crop {
|
||||
@@ -211,17 +220,36 @@
|
||||
height: 136.1%;
|
||||
}
|
||||
|
||||
@media (min-width: 570px) {
|
||||
.store-badges {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
@media (max-width: 397px) {
|
||||
.download-cta__heading {
|
||||
--download-heading-title-size: clamp(24px, 8vw, 32px);
|
||||
gap: clamp(8px, 2.5vw, 12px);
|
||||
}
|
||||
|
||||
.download-cta__title {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.download-cta__title {
|
||||
font-size: 40px;
|
||||
@media (max-width: 569px) {
|
||||
.store-badge {
|
||||
width: min(100%, calc(100vw - 32px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 570px) {
|
||||
.download-cta__heading {
|
||||
--download-heading-title-size: 40px;
|
||||
}
|
||||
|
||||
.download-cta__description {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.store-badges {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -236,12 +264,31 @@
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.download-cta__title {
|
||||
font-size: 48px;
|
||||
.download-cta__content {
|
||||
order: 1;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.download-cta__copy {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.download-cta__description {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.store-badges {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.download-cta__heading {
|
||||
--download-heading-title-size: 48px;
|
||||
}
|
||||
|
||||
.download-cta__phone {
|
||||
display: block;
|
||||
order: 2;
|
||||
width: 418px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -61,46 +61,6 @@
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
.site-footer__links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 32px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.site-footer__link-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 160px;
|
||||
gap: 24px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.site-footer__link,
|
||||
.site-footer__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
color: #4a4a4a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.site-footer__link {
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
transition: color 160ms ease;
|
||||
}
|
||||
|
||||
.site-footer__link:hover {
|
||||
color: #f28a4b;
|
||||
}
|
||||
|
||||
.site-footer__text--heading {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.site-footer__divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
||||
@@ -134,6 +134,7 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
gap: 14px;
|
||||
overflow: clip;
|
||||
@@ -211,13 +212,31 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 433px) {
|
||||
.hero__actions {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero__button {
|
||||
width: min(100%, calc(100vw - 32px));
|
||||
padding-right: 14px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.hero__button-label {
|
||||
font-size: clamp(13px, 3.5vw, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hero__title {
|
||||
font-size: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1023px) {
|
||||
@media (min-width: 1024px) {
|
||||
.hero {
|
||||
height: 891px;
|
||||
}
|
||||
|
||||
@@ -41,12 +41,15 @@
|
||||
}
|
||||
|
||||
.app-preview__carousel {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
gap: 24px;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-preview__side-phone {
|
||||
@@ -96,7 +99,9 @@
|
||||
border: 0;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
transition: background-color 160ms ease, transform 160ms ease;
|
||||
transition:
|
||||
background-color 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.app-preview__button:hover {
|
||||
@@ -120,21 +125,89 @@
|
||||
.app-preview__center-phone {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: min(420px, calc(100vw - 144px));
|
||||
width: min(420px, calc(100vw - 168px));
|
||||
aspect-ratio: 459 / 542;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 594px) {
|
||||
.app-preview__carousel {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.app-preview__button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.app-preview__button-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.app-preview__center-phone {
|
||||
width: min(420px, calc(100vw - 120px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 554px) {
|
||||
.app-preview__carousel {
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.app-preview__button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.app-preview__button-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.app-preview__center-phone {
|
||||
width: min(420px, calc(100vw - 104px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
.app-preview__center-phone {
|
||||
width: min(390px, calc(100vw - 120px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.app-preview__title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.app-preview__carousel {
|
||||
gap: clamp(10px, 1.4vw, 16px);
|
||||
padding: 0 clamp(16px, 3vw, 32px);
|
||||
}
|
||||
|
||||
.app-preview__side-phone,
|
||||
.app-preview__control-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-preview__side-phone {
|
||||
display: block;
|
||||
width: clamp(128px, 17vw, 190px);
|
||||
height: auto;
|
||||
aspect-ratio: 336 / 396;
|
||||
}
|
||||
|
||||
.app-preview__center-phone {
|
||||
width: clamp(220px, 31vw, 320px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1023px) {
|
||||
.app-preview {
|
||||
padding: 120px 130px 0;
|
||||
padding: 120px clamp(32px, 6vw, 130px) 0;
|
||||
}
|
||||
|
||||
.app-preview__title {
|
||||
@@ -147,16 +220,18 @@
|
||||
}
|
||||
|
||||
.app-preview__carousel {
|
||||
gap: 20px;
|
||||
gap: clamp(16px, 1.4vw, 20px);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-preview__side-phone {
|
||||
display: block;
|
||||
width: clamp(190px, 20vw, 336px);
|
||||
}
|
||||
|
||||
.app-preview__center-phone {
|
||||
width: 459px;
|
||||
height: 542px;
|
||||
aspect-ratio: auto;
|
||||
width: clamp(300px, 27vw, 459px);
|
||||
height: auto;
|
||||
aspect-ratio: 459 / 542;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -174,6 +174,25 @@
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
@media (max-width: 1294px) {
|
||||
.use-cases__inner {
|
||||
grid-template-columns: minmax(0, 1128px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.use-cases__copy {
|
||||
justify-self: start;
|
||||
width: min(580px, 100%);
|
||||
max-width: 580px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.use-cases__title,
|
||||
.use-cases__description {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.section-eyebrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -201,6 +220,7 @@
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #1a1a1a;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.use-cases__description {
|
||||
@@ -210,13 +230,32 @@
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #7a726d;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.use-cases__copy {
|
||||
align-items: flex-start;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.use-cases__title,
|
||||
.use-cases__description {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.use-cases__rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
max-width: 1128px;
|
||||
min-width: 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
border-radius: 30px;
|
||||
gap: 1px;
|
||||
@@ -264,10 +303,33 @@
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.use-cases__rows {
|
||||
gap: 24px;
|
||||
overflow: visible;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.use-case-row {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.use-case-row__title-cell,
|
||||
.use-case-row__description-cell {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.use-case-row__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.use-case-row {
|
||||
grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr);
|
||||
min-height: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.use-case-row__title-cell,
|
||||
@@ -327,7 +389,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (min-width: 1295px) {
|
||||
.use-cases {
|
||||
padding: 120px 64px;
|
||||
}
|
||||
|
||||
@@ -158,13 +158,34 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1022px) {
|
||||
.trust-card__copy {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.trust-card__title,
|
||||
.trust-card__description {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.trust__title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.trust__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.trust__divider {
|
||||
display: block;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.trust__divider:nth-of-type(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -91,13 +91,16 @@
|
||||
order: 1;
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
width: 480px;
|
||||
max-width: calc(100vw - 32px);
|
||||
height: 480px;
|
||||
max-height: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
.why__illustration-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
@@ -216,10 +219,6 @@
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.why__illustration {
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
|
||||
Reference in New Issue
Block a user