fix(feat): add locales and refine responsive landing page UI #6
Binary file not shown.
|
Before Width: | Height: | Size: 427 KiB After Width: | Height: | Size: 402 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 417 KiB After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 928 KiB |
@@ -1,6 +1,13 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Icon">
|
||||
<rect width="44" height="44" rx="12" fill="var(--fill-0, #D55F31)"/>
|
||||
<path id="Vector" d="M23.8954 10H15.6259C14.728 10 14 10.8028 14 11.793V32.207C14 33.1972 14.728 34 15.6259 34H28.3741C29.272 34 30 33.1972 30 32.207V16.7328C30 16.1165 29.7778 15.5252 29.3827 15.0895L25.3848 10.6807C24.9897 10.245 24.4536 10 23.8947 10H23.8954Z" fill="var(--fill-0, white)"/>
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_9846_29800)">
|
||||
<path d="M3.79923 9.12891H3.7275C2.80804 9.12891 2.05835 9.88098 2.05835 10.7981V18.0653C2.05835 18.986 2.80804 19.7356 3.7275 19.7356H3.80045C4.71991 19.7356 5.4696 18.9835 5.4696 18.0653V10.798C5.46838 9.88098 4.71753 9.12891 3.79923 9.12891Z" fill="white"/>
|
||||
<path d="M6.26831 20.8732C6.26831 21.7173 6.95819 22.4048 7.80233 22.4048H9.4416V26.3302C9.4416 27.252 10.1937 28.0017 11.1108 28.0017H11.1825C12.1032 28.0017 12.854 27.2509 12.854 26.3302V22.4048H15.1449V26.3302C15.1449 27.252 15.8994 28.0017 16.8165 28.0017H16.887C17.8077 28.0017 18.5573 27.2509 18.5573 26.3302V22.4048H20.1978C21.0407 22.4048 21.7306 21.7173 21.7306 20.8732V9.39844H6.26831V20.8732Z" fill="white"/>
|
||||
<path d="M17.8506 2.43795L19.1527 0.428069C19.2364 0.301301 19.1993 0.127973 19.0714 0.045438C18.9447 -0.0382608 18.7713 -0.00356184 18.6887 0.126753L17.3389 2.20603C16.3262 1.79114 15.1951 1.558 14.0006 1.558C12.8049 1.558 11.6762 1.79114 10.6611 2.20603L9.3136 0.126753C9.23112 -0.00356184 9.05651 -0.0382608 8.92858 0.045438C8.80065 0.127917 8.76357 0.301301 8.84727 0.428069L10.1505 2.43795C7.80103 3.58939 6.2168 5.75951 6.2168 8.24886C6.2168 8.4019 6.22639 8.55256 6.23952 8.70199H21.7628C21.7759 8.55256 21.7843 8.4019 21.7843 8.24886C21.7843 5.75951 20.1989 3.58939 17.8506 2.43795ZM10.4016 6.03688C9.98912 6.03688 9.65432 5.70447 9.65432 5.2908C9.65432 4.87713 9.98912 4.54588 10.4016 4.54588C10.8165 4.54588 11.1489 4.87707 11.1489 5.2908C11.1489 5.70453 10.8141 6.03688 10.4016 6.03688ZM17.5983 6.03688C17.1858 6.03688 16.851 5.70447 16.851 5.2908C16.851 4.87713 17.1858 4.54588 17.5983 4.54588C18.012 4.54588 18.3444 4.87707 18.3444 5.2908C18.3444 5.70447 18.012 6.03688 17.5983 6.03688Z" fill="white"/>
|
||||
<path d="M24.2714 9.12891H24.2021C23.2826 9.12891 22.5305 9.88098 22.5305 10.7981V18.0653C22.5305 18.986 23.2838 19.7356 24.2021 19.7356H24.2726C25.1932 19.7356 25.9418 18.9835 25.9418 18.0653V10.798C25.9418 9.88098 25.1909 9.12891 24.2714 9.12891Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9846_29800">
|
||||
<rect width="28" height="28" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 559 B After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 343 KiB After Width: | Height: | Size: 369 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 284 KiB After Width: | Height: | Size: 206 KiB |
@@ -36,7 +36,9 @@ const phoneArt = "/assets/cta-phone-art.png";
|
||||
|
||||
<div class="store-badges">
|
||||
<div class="store-badge store-badge--android">
|
||||
<img alt={t.androidAlt} class="store-badge__icon" src={androidIcon} />
|
||||
<div class="store-badge__icon-frame">
|
||||
<img alt={t.androidAlt} class="store-badge__android-icon" src={androidIcon} />
|
||||
</div>
|
||||
<div class="store-badge__copy">
|
||||
<p class="store-badge__platform">{t.android}</p>
|
||||
<p class="store-badge__label">{t.androidCta}</p>
|
||||
|
||||
@@ -3,11 +3,14 @@ import type { Translations } from '../i18n/translations'
|
||||
|
||||
export interface Props {
|
||||
t: Translations['hero']
|
||||
download: Translations['download']
|
||||
}
|
||||
|
||||
const { t } = Astro.props
|
||||
const { t, download } = Astro.props
|
||||
const heroBg = "/assets/hero-bg.png";
|
||||
const phoneMockup = "/assets/hero-phone.png";
|
||||
const androidIcon = "/assets/cta-android-icon.svg";
|
||||
const appleIcon = "/assets/cta-apple-icon.svg";
|
||||
---
|
||||
|
||||
<section id="hero" class="hero">
|
||||
@@ -36,11 +39,23 @@ const phoneMockup = "/assets/hero-phone.png";
|
||||
{t.description}
|
||||
</p>
|
||||
<div class="hero__actions">
|
||||
<a href="#download" class="hero__button hero__button--primary">
|
||||
<span class="hero__button-label">{t.download}</span>
|
||||
<a href="#download" class="store-badge store-badge--android hero__store-badge">
|
||||
<div class="store-badge__icon-frame">
|
||||
<img alt={download.androidAlt} class="store-badge__android-icon" src={androidIcon} />
|
||||
</div>
|
||||
<div class="store-badge__copy">
|
||||
<p class="store-badge__platform">{download.android}</p>
|
||||
<p class="store-badge__label">{download.androidCta}</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#features" class="hero__button hero__button--secondary">
|
||||
<span class="hero__button-label">{t.explore}</span>
|
||||
<a href="#download" class="store-badge store-badge--ios hero__store-badge">
|
||||
<div class="store-badge__icon-frame">
|
||||
<img alt={download.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
|
||||
</div>
|
||||
<div class="store-badge__copy">
|
||||
<p class="store-badge__platform">{download.ios}</p>
|
||||
<p class="store-badge__label">{download.iosCta}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export const languages = ["en", "zh-cn", "zh-tw"] as const;
|
||||
export const languages = ["en", "zh-cn", "zh-tw", "ms", "ja", "ko"] as const;
|
||||
|
||||
export type Lang = (typeof languages)[number];
|
||||
|
||||
@@ -8,12 +8,18 @@ export const languageLabels: Record<Lang, string> = {
|
||||
en: "EN",
|
||||
"zh-cn": "简中",
|
||||
"zh-tw": "繁中",
|
||||
ms: "MS",
|
||||
ja: "日本語",
|
||||
ko: "한국어",
|
||||
};
|
||||
|
||||
export const languageNames: Record<Lang, string> = {
|
||||
en: "English",
|
||||
"zh-cn": "简体中文",
|
||||
"zh-tw": "繁體中文",
|
||||
ms: "Bahasa Melayu",
|
||||
ja: "日本語",
|
||||
ko: "한국어",
|
||||
};
|
||||
|
||||
export function isLang(value: string | undefined): value is Lang {
|
||||
@@ -203,7 +209,7 @@ export const translations = {
|
||||
android: "ANDROID",
|
||||
androidCta: "APK Coming Soon",
|
||||
ios: "IOS",
|
||||
iosCta: "Coming on App Store",
|
||||
iosCta: "Get it on the App Store",
|
||||
androidAlt: "Android",
|
||||
appleAlt: "Apple",
|
||||
phoneAlt: "TalkPro on phone",
|
||||
@@ -223,7 +229,7 @@ export const translations = {
|
||||
android: "ANDROID",
|
||||
androidCta: "APK Coming Soon",
|
||||
ios: "IOS",
|
||||
iosCta: "Coming on App Store",
|
||||
iosCta: "Get it on the App Store",
|
||||
copyright: "© 2026 TalkPro. All rights reserved.",
|
||||
legal: "Terms of Use · Privacy Policy · Support",
|
||||
},
|
||||
@@ -366,7 +372,7 @@ export const translations = {
|
||||
android: "ANDROID",
|
||||
androidCta: "APK 即将推出",
|
||||
ios: "IOS",
|
||||
iosCta: "即将上线 App Store",
|
||||
iosCta: "在 App Store 上获取",
|
||||
androidAlt: "Android",
|
||||
appleAlt: "Apple",
|
||||
phoneAlt: "手机上的 TalkPro",
|
||||
@@ -386,7 +392,7 @@ export const translations = {
|
||||
android: "ANDROID",
|
||||
androidCta: "APK 即将推出",
|
||||
ios: "IOS",
|
||||
iosCta: "即将上线 App Store",
|
||||
iosCta: "在 App Store 上获取",
|
||||
copyright: "© 2026 TalkPro. 版权所有。",
|
||||
legal: "使用条款 · 隐私政策 · 支持",
|
||||
},
|
||||
@@ -529,7 +535,7 @@ export const translations = {
|
||||
android: "ANDROID",
|
||||
androidCta: "APK 即將推出",
|
||||
ios: "IOS",
|
||||
iosCta: "即將上線 App Store",
|
||||
iosCta: "在 App Store 上取得",
|
||||
androidAlt: "Android",
|
||||
appleAlt: "Apple",
|
||||
phoneAlt: "手機上的 TalkPro",
|
||||
@@ -549,11 +555,620 @@ export const translations = {
|
||||
android: "ANDROID",
|
||||
androidCta: "APK 即將推出",
|
||||
ios: "IOS",
|
||||
iosCta: "即將上線 App Store",
|
||||
iosCta: "在 App Store 上取得",
|
||||
copyright: "© 2026 TalkPro. 版權所有。",
|
||||
legal: "使用條款 · 隱私權政策 · 支援",
|
||||
},
|
||||
},
|
||||
ms: {
|
||||
meta: {
|
||||
title: "Talk Pro - Satu Pengguna. Pelbagai Dunia.",
|
||||
description:
|
||||
"Talk Pro ialah aplikasi pemesejan moden untuk sembang peribadi, perbualan kumpulan, saluran, panggilan suara dan panggilan video.",
|
||||
},
|
||||
header: {
|
||||
navLabel: "Navigasi utama",
|
||||
logoIconAlt: "Ikon TalkPro",
|
||||
logoAlt: "TalkPro",
|
||||
languageAlt: "Bahasa",
|
||||
openMenu: "Buka menu",
|
||||
closeMenu: "Tutup menu",
|
||||
nav: {
|
||||
home: "Utama",
|
||||
features: "Ciri",
|
||||
experience: "Pengalaman",
|
||||
useCases: "Kegunaan",
|
||||
reliability: "Kebolehpercayaan",
|
||||
},
|
||||
download: "Muat Turun",
|
||||
},
|
||||
hero: {
|
||||
phoneAlt: "Aplikasi TalkPro pada iPhone",
|
||||
badge: "✦ Tersedia di iOS dan Android",
|
||||
titleLine1: "Cara Moden untuk",
|
||||
titleLine2: "Kekal Berhubung",
|
||||
description:
|
||||
"TalkPro ialah aplikasi pemesejan moden yang direka untuk komunikasi yang jelas, ringkas dan boleh dipercayai. Daripada sembang peribadi hingga perbualan kumpulan, saluran, panggilan suara dan panggilan video, TalkPro membantu pengguna kekal berhubung dalam satu pengalaman yang biasa.",
|
||||
download: "Muat Turun TalkPro ↓",
|
||||
explore: "Terokai Ciri →",
|
||||
tags: ["Lapisan Identiti", "Pemesejan AI Asli", "Privasi Adaptif"],
|
||||
},
|
||||
why: {
|
||||
eyebrow: "MENGAPA TALKPRO",
|
||||
titleLine1: "Direka untuk Cara",
|
||||
titleLine2: "Orang Berkomunikasi Hari Ini",
|
||||
description:
|
||||
"Komunikasi hari ini berlaku merentasi perbualan peribadi, komuniti, kumpulan kerja dan saluran kandungan. TalkPro menyatukan pengalaman komunikasi penting ini dalam antara muka yang ringkas dan biasa, memudahkan pengguna berhubung, berkongsi dan mengikuti perkembangan.",
|
||||
illustrationAlt: "Orang berkomunikasi dengan TalkPro",
|
||||
cards: [
|
||||
{
|
||||
title: "Ringkas",
|
||||
desc: "Pengalaman mudah digunakan yang direka untuk komunikasi harian.",
|
||||
},
|
||||
{
|
||||
title: "Biasa",
|
||||
desc: "Struktur pemesejan yang terasa semula jadi sejak penggunaan pertama.",
|
||||
},
|
||||
{
|
||||
title: "Terhubung",
|
||||
desc: "Sembang peribadi, kumpulan, saluran, suara dan video dalam satu aplikasi.",
|
||||
},
|
||||
{
|
||||
title: "Moden",
|
||||
desc: "Antara muka yang diperhalus dengan visual bersih dan interaksi lancar.",
|
||||
},
|
||||
],
|
||||
},
|
||||
core: {
|
||||
eyebrow: "CIRI UTAMA",
|
||||
title: "Semua yang Anda Perlukan untuk Berkomunikasi",
|
||||
description:
|
||||
"Identiti berbeza, perbualan berbeza dan tahap privasi berbeza tidak sepatutnya dipaksa ke dalam satu antara muka yang rata. TalkPro membiarkannya tersusun dalam satu platform.",
|
||||
cards: [
|
||||
{
|
||||
title: "Pemesejan Peribadi",
|
||||
desc: "Kekal berhubung melalui perbualan satu-ke-satu yang pantas dan biasa.",
|
||||
},
|
||||
{
|
||||
title: "Sembang Kumpulan",
|
||||
desc: "Cipta ruang untuk rakan, pasukan, komuniti dan perbincangan bersama.",
|
||||
},
|
||||
{
|
||||
title: "Saluran",
|
||||
desc: "Ikuti kemas kini, pengumuman dan kandungan daripada orang atau komuniti yang anda peduli.",
|
||||
},
|
||||
{
|
||||
title: "Panggilan Suara",
|
||||
desc: "Berbual secara masa nyata apabila mesej sahaja tidak mencukupi.",
|
||||
},
|
||||
{
|
||||
title: "Panggilan Video",
|
||||
desc: "Berhubung secara bersemuka dengan pengalaman panggilan video yang ringkas dan boleh dipercayai.",
|
||||
},
|
||||
{
|
||||
title: "Perkongsian Media",
|
||||
desc: "Kongsi foto, video, fail dan kemas kini dalam perbualan anda.",
|
||||
},
|
||||
],
|
||||
},
|
||||
experience: {
|
||||
title: "Pengalaman Pemesejan yang Lebih Bersih dan Selesa",
|
||||
cards: [
|
||||
{
|
||||
title: "Antara Muka Jelas",
|
||||
desc: "Susun atur bersih yang memudahkan perbualan diikuti.",
|
||||
alt: "Tangkapan skrin antara muka jelas",
|
||||
},
|
||||
{
|
||||
title: "Navigasi Lancar",
|
||||
desc: "Bergerak antara sembang, kumpulan dan saluran dengan kawalan yang biasa.",
|
||||
alt: "Tangkapan skrin navigasi lancar",
|
||||
},
|
||||
{
|
||||
title: "Reka Bentuk Visual Halus",
|
||||
desc: "Ikon, warna dan butiran antara muka moden mencipta pengalaman yang lebih kemas.",
|
||||
alt: "Tangkapan skrin reka bentuk visual halus",
|
||||
},
|
||||
],
|
||||
caption:
|
||||
"TalkPro direka dengan kejelasan sebagai keutamaan. Setiap skrin dibina untuk membantu pengguna fokus pada perbualan, mengurangkan gangguan dan bergerak secara semula jadi antara sembang, kumpulan, saluran dan panggilan.",
|
||||
},
|
||||
useCases: {
|
||||
eyebrow: "KEGUNAAN",
|
||||
title: "Dibina untuk Komunikasi Peribadi, Sosial dan Komuniti",
|
||||
description:
|
||||
"Dengan ruang berasingan untuk setiap konteks, TalkPro memastikan komunikasi peribadi, sosial dan profesional anda kekal jelas dan teratur.",
|
||||
rows: [
|
||||
{
|
||||
title: "Perbualan Peribadi",
|
||||
desc: "Hantar mesej kepada rakan, keluarga dan kenalan rapat dalam pengalaman sembang peribadi yang ringkas.",
|
||||
},
|
||||
{
|
||||
title: "Komuniti",
|
||||
desc: "Sertai perbualan kumpulan dan kekal aktif dalam ruang minat bersama.",
|
||||
},
|
||||
{
|
||||
title: "Pasukan dan Projek",
|
||||
desc: "Selaraskan perbincangan, kemas kini dan keputusan pantas dalam sembang kumpulan.",
|
||||
},
|
||||
{
|
||||
title: "Berita dan Kemas Kini",
|
||||
desc: "Ikuti saluran untuk pengumuman, maklumat dan kandungan komuniti.",
|
||||
},
|
||||
],
|
||||
},
|
||||
trust: {
|
||||
eyebrow: "KEBOLEHPERCAYAAN",
|
||||
title: "Dibina dengan Kepercayaan Pengguna sebagai Keutamaan",
|
||||
description:
|
||||
"TalkPro direka dengan pendekatan yang mengambil kira privasi dan fokus pada komunikasi yang boleh dipercayai. Aplikasi ini memastikan pengalaman pengguna kekal ringkas sambil menyokong ciri komunikasi utama yang diharapkan daripada platform pemesejan moden.",
|
||||
cards: [
|
||||
{
|
||||
title: "Reka Bentuk Peka Privasi",
|
||||
desc: "Dibina dengan pertimbangan teliti terhadap komunikasi pengguna dan pengendalian data.",
|
||||
},
|
||||
{
|
||||
title: "Minimum dan Fokus",
|
||||
desc: "Direka sekitar ciri pemesejan penting tanpa kerumitan yang tidak perlu.",
|
||||
},
|
||||
{
|
||||
title: "Pengalaman Boleh Dipercayai",
|
||||
desc: "Berfokus pada penyediaan pengalaman komunikasi yang stabil dan biasa.",
|
||||
},
|
||||
{
|
||||
title: "Penambahbaikan Berterusan",
|
||||
desc: "TalkPro akan terus menambah baik antara muka, ciri dan pengalaman keseluruhannya.",
|
||||
},
|
||||
],
|
||||
},
|
||||
preview: {
|
||||
title: "Pengalaman Aplikasi yang Biasa, Diperbaharui dengan Rupa Moden",
|
||||
description:
|
||||
"TalkPro mengekalkan pengalaman komunikasi yang biasa sambil memperhalus lapisan visual dengan ikon, warna, jarak dan butiran antara muka yang dikemas kini.",
|
||||
phoneAlt: "Pratonton aplikasi TalkPro",
|
||||
previous: "Sebelumnya",
|
||||
next: "Seterusnya",
|
||||
},
|
||||
download: {
|
||||
eyebrow: "MUAT TURUN",
|
||||
title: "Muat Turun",
|
||||
logoAlt: "TalkPro",
|
||||
description:
|
||||
"Muat turun TalkPro dan alami cara yang lebih bersih, ringkas dan moden untuk kekal berhubung.",
|
||||
android: "ANDROID",
|
||||
androidCta: "APK Akan Datang",
|
||||
ios: "IOS",
|
||||
iosCta: "Dapatkan di App Store",
|
||||
androidAlt: "Android",
|
||||
appleAlt: "Apple",
|
||||
phoneAlt: "TalkPro pada telefon",
|
||||
},
|
||||
footer: {
|
||||
logoAlt: "TalkPro",
|
||||
description:
|
||||
"TalkPro ialah aplikasi komunikasi moden yang direka untuk pemesejan, perbualan kumpulan, saluran, panggilan suara dan panggilan video.",
|
||||
links: {
|
||||
download: "Muat Turun",
|
||||
features: "Ciri",
|
||||
about: "Tentang",
|
||||
contact: "Hubungi",
|
||||
},
|
||||
email: "email@hotmail.com",
|
||||
phone: "+01 123 45562334",
|
||||
android: "ANDROID",
|
||||
androidCta: "APK Akan Datang",
|
||||
ios: "IOS",
|
||||
iosCta: "Dapatkan di App Store",
|
||||
copyright: "© 2026 TalkPro. Hak cipta terpelihara.",
|
||||
legal: "Terma Penggunaan · Dasar Privasi · Sokongan",
|
||||
},
|
||||
},
|
||||
ja: {
|
||||
meta: {
|
||||
title: "Talk Pro - ひとりのユーザーに、複数の世界を。",
|
||||
description:
|
||||
"Talk Pro は、個人チャット、グループ会話、チャンネル、音声通話、ビデオ通話に対応したモダンなメッセージアプリです。",
|
||||
},
|
||||
header: {
|
||||
navLabel: "メインナビゲーション",
|
||||
logoIconAlt: "TalkPro アイコン",
|
||||
logoAlt: "TalkPro",
|
||||
languageAlt: "言語",
|
||||
openMenu: "メニューを開く",
|
||||
closeMenu: "メニューを閉じる",
|
||||
nav: {
|
||||
home: "ホーム",
|
||||
features: "機能",
|
||||
experience: "体験",
|
||||
useCases: "活用例",
|
||||
reliability: "信頼性",
|
||||
},
|
||||
download: "ダウンロード",
|
||||
},
|
||||
hero: {
|
||||
phoneAlt: "iPhone 上の TalkPro アプリ",
|
||||
badge: "✦ iOS と Android に対応",
|
||||
titleLine1: "つながり続けるための",
|
||||
titleLine2: "新しい方法",
|
||||
description:
|
||||
"TalkPro は、明快でシンプル、信頼できるコミュニケーションのために設計されたモダンなメッセージアプリです。個人チャットからグループ会話、チャンネル、音声通話、ビデオ通話まで、TalkPro はひとつの使い慣れた体験の中で人々のつながりを支えます。",
|
||||
download: "TalkPro をダウンロード ↓",
|
||||
explore: "機能を見る →",
|
||||
tags: ["アイデンティティレイヤー", "AI ネイティブメッセージ", "適応型プライバシー"],
|
||||
},
|
||||
why: {
|
||||
eyebrow: "TALKPRO を選ぶ理由",
|
||||
titleLine1: "現代のコミュニケーションに",
|
||||
titleLine2: "合わせて設計",
|
||||
description:
|
||||
"今日のコミュニケーションは、個人の会話、コミュニティ、仕事のグループ、コンテンツチャンネルにまたがっています。TalkPro は、これらの重要な体験をシンプルで使い慣れたインターフェースにまとめ、つながる、共有する、最新情報を追うことをより簡単にします。",
|
||||
illustrationAlt: "TalkPro でコミュニケーションする人々",
|
||||
cards: [
|
||||
{
|
||||
title: "シンプル",
|
||||
desc: "日常のコミュニケーションのために設計された使いやすい体験。",
|
||||
},
|
||||
{
|
||||
title: "使い慣れた操作感",
|
||||
desc: "初めて使うときから自然に感じられるメッセージ構造。",
|
||||
},
|
||||
{
|
||||
title: "つながる",
|
||||
desc: "個人チャット、グループ、チャンネル、音声、ビデオをひとつのアプリに。",
|
||||
},
|
||||
{
|
||||
title: "モダン",
|
||||
desc: "クリーンなビジュアルとスムーズな操作を備えた洗練されたインターフェース。",
|
||||
},
|
||||
],
|
||||
},
|
||||
core: {
|
||||
eyebrow: "主な機能",
|
||||
title: "コミュニケーションに必要なものをすべて",
|
||||
description:
|
||||
"異なるアイデンティティ、異なる会話、異なるプライバシーレベルを、ひとつの平坦な画面に押し込む必要はありません。TalkPro なら、それらをひとつのプラットフォーム上で整理して扱えます。",
|
||||
cards: [
|
||||
{
|
||||
title: "個人メッセージ",
|
||||
desc: "すばやく使い慣れた一対一の会話でつながり続けられます。",
|
||||
},
|
||||
{
|
||||
title: "グループチャット",
|
||||
desc: "友人、チーム、コミュニティ、共同の議論のための場所を作れます。",
|
||||
},
|
||||
{
|
||||
title: "チャンネル",
|
||||
desc: "気になる人やコミュニティからの更新、告知、コンテンツをフォローできます。",
|
||||
},
|
||||
{
|
||||
title: "音声通話",
|
||||
desc: "メッセージだけでは足りないときに、リアルタイムで話せます。",
|
||||
},
|
||||
{
|
||||
title: "ビデオ通話",
|
||||
desc: "シンプルで信頼できるビデオ通話体験で顔を見ながらつながれます。",
|
||||
},
|
||||
{
|
||||
title: "メディア共有",
|
||||
desc: "写真、動画、ファイル、更新情報を会話の中で共有できます。",
|
||||
},
|
||||
],
|
||||
},
|
||||
experience: {
|
||||
title: "よりクリーンで快適なメッセージ体験",
|
||||
cards: [
|
||||
{
|
||||
title: "見やすいインターフェース",
|
||||
desc: "会話を追いやすくするクリーンなレイアウト。",
|
||||
alt: "見やすいインターフェースのスクリーンショット",
|
||||
},
|
||||
{
|
||||
title: "スムーズなナビゲーション",
|
||||
desc: "使い慣れた操作でチャット、グループ、チャンネルを移動できます。",
|
||||
alt: "スムーズなナビゲーションのスクリーンショット",
|
||||
},
|
||||
{
|
||||
title: "洗練されたビジュアル",
|
||||
desc: "モダンなアイコン、色、インターフェースの細部が、より完成度の高い体験を作ります。",
|
||||
alt: "洗練されたビジュアルデザインのスクリーンショット",
|
||||
},
|
||||
],
|
||||
caption:
|
||||
"TalkPro は明快さを重視して設計されています。すべての画面は、ユーザーが会話に集中し、気を散らす要素を減らし、チャット、グループ、チャンネル、通話を自然に移動できるように作られています。",
|
||||
},
|
||||
useCases: {
|
||||
eyebrow: "活用例",
|
||||
title: "個人、ソーシャル、コミュニティの会話に対応",
|
||||
description:
|
||||
"文脈ごとに分かれたスペースにより、TalkPro は個人、ソーシャル、仕事のコミュニケーションを明確で整理された状態に保ちます。",
|
||||
rows: [
|
||||
{
|
||||
title: "個人の会話",
|
||||
desc: "友人、家族、親しい連絡先とシンプルな個人チャットでメッセージできます。",
|
||||
},
|
||||
{
|
||||
title: "コミュニティ",
|
||||
desc: "グループ会話に参加し、共通の関心を持つスペースで活動できます。",
|
||||
},
|
||||
{
|
||||
title: "チームとプロジェクト",
|
||||
desc: "グループチャットで議論、更新、すばやい意思決定を調整できます。",
|
||||
},
|
||||
{
|
||||
title: "ニュースと更新",
|
||||
desc: "チャンネルをフォローして、告知、情報、コミュニティコンテンツを受け取れます。",
|
||||
},
|
||||
],
|
||||
},
|
||||
trust: {
|
||||
eyebrow: "信頼性",
|
||||
title: "ユーザーの信頼を大切にした設計",
|
||||
description:
|
||||
"TalkPro は、プライバシーを意識したアプローチと信頼できるコミュニケーションへの注力によって設計されています。現代のメッセージプラットフォームに期待される主要な機能を支えながら、ユーザー体験をシンプルに保ちます。",
|
||||
cards: [
|
||||
{
|
||||
title: "プライバシーを意識した設計",
|
||||
desc: "ユーザーのコミュニケーションとデータの扱いを慎重に考慮して構築されています。",
|
||||
},
|
||||
{
|
||||
title: "最小限で集中",
|
||||
desc: "不要な複雑さを避け、重要なメッセージ機能を中心に設計されています。",
|
||||
},
|
||||
{
|
||||
title: "信頼できる体験",
|
||||
desc: "安定した使い慣れたコミュニケーション体験の提供に焦点を当てています。",
|
||||
},
|
||||
{
|
||||
title: "継続的な改善",
|
||||
desc: "TalkPro はインターフェース、機能、全体的な体験を継続的に改善します。",
|
||||
},
|
||||
],
|
||||
},
|
||||
preview: {
|
||||
title: "使い慣れたアプリ体験を、モダンな見た目で再構築",
|
||||
description:
|
||||
"TalkPro は、使い慣れたコミュニケーション体験を保ちながら、更新されたアイコン、色、余白、インターフェースの細部でビジュアルを磨き上げます。",
|
||||
phoneAlt: "TalkPro アプリのプレビュー",
|
||||
previous: "前へ",
|
||||
next: "次へ",
|
||||
},
|
||||
download: {
|
||||
eyebrow: "ダウンロード",
|
||||
title: "ダウンロード",
|
||||
logoAlt: "TalkPro",
|
||||
description:
|
||||
"TalkPro をダウンロードして、よりクリーンでシンプル、モダンなつながり方を体験してください。",
|
||||
android: "ANDROID",
|
||||
androidCta: "APK 近日公開",
|
||||
ios: "IOS",
|
||||
iosCta: "App Store で入手",
|
||||
androidAlt: "Android",
|
||||
appleAlt: "Apple",
|
||||
phoneAlt: "スマートフォン上の TalkPro",
|
||||
},
|
||||
footer: {
|
||||
logoAlt: "TalkPro",
|
||||
description:
|
||||
"TalkPro は、メッセージ、グループ会話、チャンネル、音声通話、ビデオ通話のために設計されたモダンなコミュニケーションアプリです。",
|
||||
links: {
|
||||
download: "ダウンロード",
|
||||
features: "機能",
|
||||
about: "概要",
|
||||
contact: "連絡先",
|
||||
},
|
||||
email: "email@hotmail.com",
|
||||
phone: "+01 123 45562334",
|
||||
android: "ANDROID",
|
||||
androidCta: "APK 近日公開",
|
||||
ios: "IOS",
|
||||
iosCta: "App Store で入手",
|
||||
copyright: "© 2026 TalkPro. All rights reserved.",
|
||||
legal: "利用規約 · プライバシーポリシー · サポート",
|
||||
},
|
||||
},
|
||||
ko: {
|
||||
meta: {
|
||||
title: "Talk Pro - 한 명의 사용자. 여러 세계.",
|
||||
description:
|
||||
"Talk Pro는 개인 채팅, 그룹 대화, 채널, 음성 통화, 영상 통화를 위한 현대적인 메시징 앱입니다.",
|
||||
},
|
||||
header: {
|
||||
navLabel: "주요 내비게이션",
|
||||
logoIconAlt: "TalkPro 아이콘",
|
||||
logoAlt: "TalkPro",
|
||||
languageAlt: "언어",
|
||||
openMenu: "메뉴 열기",
|
||||
closeMenu: "메뉴 닫기",
|
||||
nav: {
|
||||
home: "홈",
|
||||
features: "기능",
|
||||
experience: "경험",
|
||||
useCases: "사용 사례",
|
||||
reliability: "신뢰성",
|
||||
},
|
||||
download: "다운로드",
|
||||
},
|
||||
hero: {
|
||||
phoneAlt: "iPhone의 TalkPro 앱",
|
||||
badge: "✦ iOS 및 Android 지원",
|
||||
titleLine1: "연결을 유지하는",
|
||||
titleLine2: "현대적인 방법",
|
||||
description:
|
||||
"TalkPro는 명확하고 단순하며 신뢰할 수 있는 커뮤니케이션을 위해 설계된 현대적인 메시징 앱입니다. 개인 채팅부터 그룹 대화, 채널, 음성 통화, 영상 통화까지 TalkPro는 익숙한 하나의 경험 안에서 사람들이 계속 연결되도록 돕습니다.",
|
||||
download: "TalkPro 다운로드 ↓",
|
||||
explore: "기능 살펴보기 →",
|
||||
tags: ["아이덴티티 레이어", "AI 네이티브 메시징", "적응형 개인정보 보호"],
|
||||
},
|
||||
why: {
|
||||
eyebrow: "TALKPRO를 선택하는 이유",
|
||||
titleLine1: "오늘날 사람들이 소통하는",
|
||||
titleLine2: "방식에 맞춘 설계",
|
||||
description:
|
||||
"오늘날의 커뮤니케이션은 개인 대화, 커뮤니티, 업무 그룹, 콘텐츠 채널 전반에서 이루어집니다. TalkPro는 이러한 핵심 커뮤니케이션 경험을 단순하고 익숙한 인터페이스에 모아 사용자가 더 쉽게 연결하고, 공유하고, 최신 소식을 확인할 수 있게 합니다.",
|
||||
illustrationAlt: "TalkPro로 소통하는 사람들",
|
||||
cards: [
|
||||
{
|
||||
title: "단순함",
|
||||
desc: "일상적인 커뮤니케이션을 위해 설계된 사용하기 쉬운 경험.",
|
||||
},
|
||||
{
|
||||
title: "익숙함",
|
||||
desc: "처음 사용할 때부터 자연스럽게 느껴지는 메시징 구조.",
|
||||
},
|
||||
{
|
||||
title: "연결됨",
|
||||
desc: "개인 채팅, 그룹, 채널, 음성, 영상을 하나의 앱에서.",
|
||||
},
|
||||
{
|
||||
title: "모던함",
|
||||
desc: "깔끔한 시각 요소와 부드러운 상호작용을 갖춘 정제된 인터페이스.",
|
||||
},
|
||||
],
|
||||
},
|
||||
core: {
|
||||
eyebrow: "핵심 기능",
|
||||
title: "소통에 필요한 모든 것",
|
||||
description:
|
||||
"서로 다른 정체성, 대화, 개인정보 보호 수준이 하나의 평면적인 인터페이스에 강제로 섞일 필요는 없습니다. TalkPro는 이를 하나의 플랫폼 안에서 질서 있게 유지합니다.",
|
||||
cards: [
|
||||
{
|
||||
title: "개인 메시징",
|
||||
desc: "빠르고 익숙한 일대일 대화로 계속 연결됩니다.",
|
||||
},
|
||||
{
|
||||
title: "그룹 채팅",
|
||||
desc: "친구, 팀, 커뮤니티, 공동 토론을 위한 공간을 만듭니다.",
|
||||
},
|
||||
{
|
||||
title: "채널",
|
||||
desc: "관심 있는 사람이나 커뮤니티의 업데이트, 공지, 콘텐츠를 팔로우합니다.",
|
||||
},
|
||||
{
|
||||
title: "음성 통화",
|
||||
desc: "메시지만으로 부족할 때 실시간으로 대화합니다.",
|
||||
},
|
||||
{
|
||||
title: "영상 통화",
|
||||
desc: "단순하고 신뢰할 수 있는 영상 통화 경험으로 얼굴을 보며 연결됩니다.",
|
||||
},
|
||||
{
|
||||
title: "미디어 공유",
|
||||
desc: "대화 안에서 사진, 동영상, 파일, 업데이트를 공유합니다.",
|
||||
},
|
||||
],
|
||||
},
|
||||
experience: {
|
||||
title: "더 깔끔하고 편안한 메시징 경험",
|
||||
cards: [
|
||||
{
|
||||
title: "명확한 인터페이스",
|
||||
desc: "대화를 쉽게 따라갈 수 있는 깔끔한 레이아웃.",
|
||||
alt: "명확한 인터페이스 스크린샷",
|
||||
},
|
||||
{
|
||||
title: "부드러운 탐색",
|
||||
desc: "익숙한 컨트롤로 채팅, 그룹, 채널 사이를 이동합니다.",
|
||||
alt: "부드러운 탐색 스크린샷",
|
||||
},
|
||||
{
|
||||
title: "정제된 시각 디자인",
|
||||
desc: "현대적인 아이콘, 색상, 인터페이스 디테일이 더 완성도 높은 경험을 만듭니다.",
|
||||
alt: "정제된 시각 디자인 스크린샷",
|
||||
},
|
||||
],
|
||||
caption:
|
||||
"TalkPro는 명확성을 중심에 두고 설계되었습니다. 모든 화면은 사용자가 대화에 집중하고, 방해 요소를 줄이며, 채팅, 그룹, 채널, 통화 사이를 자연스럽게 이동할 수 있도록 만들어졌습니다.",
|
||||
},
|
||||
useCases: {
|
||||
eyebrow: "사용 사례",
|
||||
title: "개인, 소셜, 커뮤니티 커뮤니케이션을 위해",
|
||||
description:
|
||||
"각 상황에 맞는 별도 공간을 통해 TalkPro는 개인, 소셜, 업무 커뮤니케이션을 명확하고 정리된 상태로 유지합니다.",
|
||||
rows: [
|
||||
{
|
||||
title: "개인 대화",
|
||||
desc: "친구, 가족, 가까운 연락처와 단순한 개인 채팅 경험으로 메시지를 주고받습니다.",
|
||||
},
|
||||
{
|
||||
title: "커뮤니티",
|
||||
desc: "그룹 대화에 참여하고 공통 관심사 공간에서 활발히 소통합니다.",
|
||||
},
|
||||
{
|
||||
title: "팀과 프로젝트",
|
||||
desc: "그룹 채팅에서 토론, 업데이트, 빠른 결정을 조율합니다.",
|
||||
},
|
||||
{
|
||||
title: "뉴스와 업데이트",
|
||||
desc: "채널을 팔로우하여 공지, 정보, 커뮤니티 콘텐츠를 확인합니다.",
|
||||
},
|
||||
],
|
||||
},
|
||||
trust: {
|
||||
eyebrow: "신뢰성",
|
||||
title: "사용자 신뢰를 염두에 둔 설계",
|
||||
description:
|
||||
"TalkPro는 개인정보 보호를 의식한 접근 방식과 안정적인 커뮤니케이션에 대한 집중으로 설계되었습니다. 이 앱은 현대 메시징 플랫폼에서 기대되는 핵심 커뮤니케이션 기능을 지원하면서도 사용자 경험을 단순하게 유지합니다.",
|
||||
cards: [
|
||||
{
|
||||
title: "개인정보를 고려한 디자인",
|
||||
desc: "사용자 커뮤니케이션과 데이터 처리에 대한 신중한 고려를 바탕으로 구축되었습니다.",
|
||||
},
|
||||
{
|
||||
title: "최소화와 집중",
|
||||
desc: "불필요한 복잡함 없이 핵심 메시징 기능을 중심으로 설계되었습니다.",
|
||||
},
|
||||
{
|
||||
title: "신뢰할 수 있는 경험",
|
||||
desc: "안정적이고 익숙한 커뮤니케이션 경험 제공에 집중합니다.",
|
||||
},
|
||||
{
|
||||
title: "지속적인 개선",
|
||||
desc: "TalkPro는 인터페이스, 기능, 전반적인 경험을 계속 개선해 나갑니다.",
|
||||
},
|
||||
],
|
||||
},
|
||||
preview: {
|
||||
title: "익숙한 앱 경험을 현대적인 모습으로 재해석",
|
||||
description:
|
||||
"TalkPro는 익숙한 커뮤니케이션 경험을 유지하면서 업데이트된 아이콘, 색상, 간격, 인터페이스 디테일로 시각적 레이어를 다듬습니다.",
|
||||
phoneAlt: "TalkPro 앱 미리보기",
|
||||
previous: "이전",
|
||||
next: "다음",
|
||||
},
|
||||
download: {
|
||||
eyebrow: "다운로드",
|
||||
title: "다운로드",
|
||||
logoAlt: "TalkPro",
|
||||
description:
|
||||
"TalkPro를 다운로드하고 더 깔끔하고 단순하며 현대적인 연결 방식을 경험하세요.",
|
||||
android: "ANDROID",
|
||||
androidCta: "APK 곧 출시",
|
||||
ios: "IOS",
|
||||
iosCta: "App Store에서 받기",
|
||||
androidAlt: "Android",
|
||||
appleAlt: "Apple",
|
||||
phoneAlt: "휴대폰의 TalkPro",
|
||||
},
|
||||
footer: {
|
||||
logoAlt: "TalkPro",
|
||||
description:
|
||||
"TalkPro는 메시징, 그룹 대화, 채널, 음성 통화, 영상 통화를 위해 설계된 현대적인 커뮤니케이션 앱입니다.",
|
||||
links: {
|
||||
download: "다운로드",
|
||||
features: "기능",
|
||||
about: "소개",
|
||||
contact: "문의",
|
||||
},
|
||||
email: "email@hotmail.com",
|
||||
phone: "+01 123 45562334",
|
||||
android: "ANDROID",
|
||||
androidCta: "APK 곧 출시",
|
||||
ios: "IOS",
|
||||
iosCta: "App Store에서 받기",
|
||||
copyright: "© 2026 TalkPro. All rights reserved.",
|
||||
legal: "이용 약관 · 개인정보 처리방침 · 지원",
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
|
||||
export type Translations = (typeof translations)[Lang];
|
||||
|
||||
@@ -31,6 +31,42 @@ const {
|
||||
(() => {
|
||||
const header = document.getElementById('site-header');
|
||||
const getOffset = () => header ? header.offsetHeight : 0;
|
||||
let activeScrollAnimation = 0;
|
||||
|
||||
const easeInCubic = (t: number) => t * t * t;
|
||||
|
||||
const animateScrollTo = (targetTop: number) => {
|
||||
const startTop = window.scrollY;
|
||||
const distance = targetTop - startTop;
|
||||
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
window.scrollTo(0, targetTop);
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeScrollAnimation) {
|
||||
cancelAnimationFrame(activeScrollAnimation);
|
||||
}
|
||||
|
||||
const duration = Math.min(1300, Math.max(650, Math.abs(distance) * 0.7));
|
||||
const startTime = performance.now();
|
||||
|
||||
const step = (now: number) => {
|
||||
const elapsed = now - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easedProgress = easeInCubic(progress);
|
||||
|
||||
window.scrollTo(0, startTop + distance * easedProgress);
|
||||
|
||||
if (progress < 1) {
|
||||
activeScrollAnimation = requestAnimationFrame(step);
|
||||
} else {
|
||||
activeScrollAnimation = 0;
|
||||
}
|
||||
};
|
||||
|
||||
activeScrollAnimation = requestAnimationFrame(step);
|
||||
};
|
||||
|
||||
document.querySelectorAll('a[href^="#"]').forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
@@ -40,7 +76,7 @@ const {
|
||||
if (!target) return;
|
||||
e.preventDefault();
|
||||
const top = target.getBoundingClientRect().top + window.scrollY - getOffset();
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
animateScrollTo(top);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -7,7 +7,6 @@ import CoreSystem from '../../components/CoreSystem.astro'
|
||||
import Experience from '../../components/Experience.astro'
|
||||
import UseCases from '../../components/UseCases.astro'
|
||||
import Trust from '../../components/Trust.astro'
|
||||
import AppPreview from '../../components/AppPreview.astro'
|
||||
import DownloadCTA from '../../components/DownloadCTA.astro'
|
||||
import Footer from '../../components/Footer.astro'
|
||||
import { defaultLang, getTranslations, isLang, languages } from '../../i18n/translations'
|
||||
@@ -25,13 +24,13 @@ const t = getTranslations(lang)
|
||||
|
||||
<Base lang={lang} title={t.meta.title} description={t.meta.description}>
|
||||
<Header lang={lang} t={t.header} />
|
||||
<Hero t={t.hero} />
|
||||
<Hero t={t.hero} download={t.download} />
|
||||
<WhyTalkPro t={t.why} />
|
||||
<CoreSystem t={t.core} />
|
||||
<Experience t={t.experience} />
|
||||
<UseCases t={t.useCases} />
|
||||
<Trust t={t.trust} />
|
||||
<AppPreview t={t.preview} />
|
||||
<!-- AppPreview section disabled per lead request. -->
|
||||
<DownloadCTA t={t.download} />
|
||||
<Footer t={t.footer} />
|
||||
</Base>
|
||||
|
||||
@@ -7,7 +7,6 @@ import CoreSystem from '../components/CoreSystem.astro'
|
||||
import Experience from '../components/Experience.astro'
|
||||
import UseCases from '../components/UseCases.astro'
|
||||
import Trust from '../components/Trust.astro'
|
||||
import AppPreview from '../components/AppPreview.astro'
|
||||
import DownloadCTA from '../components/DownloadCTA.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
import { defaultLang, getTranslations } from '../i18n/translations'
|
||||
@@ -18,13 +17,13 @@ const t = getTranslations(lang)
|
||||
|
||||
<Base lang={lang} title={t.meta.title} description={t.meta.description}>
|
||||
<Header lang={lang} t={t.header} />
|
||||
<Hero t={t.hero} />
|
||||
<Hero t={t.hero} download={t.download} />
|
||||
<WhyTalkPro t={t.why} />
|
||||
<CoreSystem t={t.core} />
|
||||
<Experience t={t.experience} />
|
||||
<UseCases t={t.useCases} />
|
||||
<Trust t={t.trust} />
|
||||
<AppPreview t={t.preview} />
|
||||
<!-- AppPreview section disabled per lead request. -->
|
||||
<DownloadCTA t={t.download} />
|
||||
<Footer t={t.footer} />
|
||||
</Base>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
max-width: 1280px;
|
||||
gap: 32px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 16px;
|
||||
padding: 60px 16px;
|
||||
}
|
||||
|
||||
.download-cta__content {
|
||||
@@ -72,6 +72,7 @@
|
||||
font-size: var(--download-heading-title-size);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: var(--ls-32);
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -98,6 +99,7 @@
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-16);
|
||||
color: #7a726d;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -161,6 +163,16 @@
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.store-badge--android .store-badge__icon-frame {
|
||||
background: #d55f31;
|
||||
}
|
||||
|
||||
.store-badge__android-icon {
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.store-badge__copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -192,6 +204,7 @@
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-15);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -242,8 +255,13 @@
|
||||
--download-heading-title-size: 40px;
|
||||
}
|
||||
|
||||
.download-cta__title {
|
||||
letter-spacing: var(--ls-40);
|
||||
}
|
||||
|
||||
.download-cta__description {
|
||||
font-size: 18px;
|
||||
letter-spacing: var(--ls-18);
|
||||
}
|
||||
|
||||
.store-badges {
|
||||
@@ -286,6 +304,10 @@
|
||||
--download-heading-title-size: 48px;
|
||||
}
|
||||
|
||||
.download-cta__title {
|
||||
letter-spacing: var(--ls-48);
|
||||
}
|
||||
|
||||
.download-cta__phone {
|
||||
order: 2;
|
||||
width: 418px;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 60px;
|
||||
padding: 64px 0;
|
||||
padding: 60px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -38,9 +38,10 @@
|
||||
.features__title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: var(--ls-28);
|
||||
color: #1a1a1a;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -51,6 +52,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-18);
|
||||
color: #7a726d;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -105,9 +107,10 @@
|
||||
.feature-card__title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-20);
|
||||
color: #2e2a28;
|
||||
}
|
||||
|
||||
@@ -117,35 +120,73 @@
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-15);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 440px) {
|
||||
.features__header,
|
||||
.features__grid {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.features__title {
|
||||
font-size: 40px;
|
||||
font-size: 32px;
|
||||
letter-spacing: var(--ls-32);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.features__header,
|
||||
.features__grid {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.features__title {
|
||||
font-size: 36px;
|
||||
letter-spacing: var(--ls-36);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.features__header,
|
||||
.features__grid {
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.features__title {
|
||||
font-size: 42px;
|
||||
letter-spacing: var(--ls-42);
|
||||
}
|
||||
|
||||
.features__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.feature-card__title {
|
||||
font-size: 24px;
|
||||
letter-spacing: var(--ls-24);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1023px) {
|
||||
.features {
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.features__header {
|
||||
padding: 0 clamp(24px, 14vw, 180px);
|
||||
}
|
||||
|
||||
.features__title {
|
||||
font-size: 48px;
|
||||
padding: 0 clamp(36px, 14vw, 180px);
|
||||
}
|
||||
|
||||
.features__grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
padding: 0 24px;
|
||||
padding: 0 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.features__title {
|
||||
font-size: 48px;
|
||||
letter-spacing: var(--ls-48);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -154,3 +195,10 @@
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1376px) {
|
||||
.features {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 64px 0;
|
||||
padding: 60px 0;
|
||||
background: #fef0eb;
|
||||
}
|
||||
|
||||
@@ -58,6 +58,7 @@
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-14);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@@ -80,6 +81,7 @@
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-14);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@@ -103,7 +105,7 @@
|
||||
|
||||
@media (min-width: 1023px) {
|
||||
.site-footer {
|
||||
padding: 120px 0;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.site-footer__inner {
|
||||
|
||||
@@ -8,3 +8,68 @@
|
||||
@import './features.css';
|
||||
@import './trust.css';
|
||||
@import './preview.css';
|
||||
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
--ls-12: 0.01px;
|
||||
--ls-13: -0.04px;
|
||||
--ls-14: -0.09px;
|
||||
--ls-15: -0.13px;
|
||||
--ls-16: -0.18px;
|
||||
--ls-17: -0.22px;
|
||||
--ls-18: -0.26px;
|
||||
--ls-19: -0.30px;
|
||||
--ls-20: -0.33px;
|
||||
--ls-21: -0.37px;
|
||||
--ls-22: -0.40px;
|
||||
--ls-23: -0.44px;
|
||||
--ls-24: -0.47px;
|
||||
--ls-25: -0.50px;
|
||||
--ls-26: -0.53px;
|
||||
--ls-27: -0.56px;
|
||||
--ls-28: -0.59px;
|
||||
--ls-29: -0.61px;
|
||||
--ls-30: -0.64px;
|
||||
--ls-31: -0.67px;
|
||||
--ls-32: -0.69px;
|
||||
--ls-33: -0.72px;
|
||||
--ls-34: -0.74px;
|
||||
--ls-35: -0.77px;
|
||||
--ls-36: -0.79px;
|
||||
--ls-37: -0.81px;
|
||||
--ls-38: -0.84px;
|
||||
--ls-39: -0.86px;
|
||||
--ls-40: -0.89px;
|
||||
--ls-41: -0.91px;
|
||||
--ls-42: -0.93px;
|
||||
--ls-43: -0.95px;
|
||||
--ls-44: -0.98px;
|
||||
--ls-45: -1.00px;
|
||||
--ls-46: -1.02px;
|
||||
--ls-47: -1.05px;
|
||||
--ls-48: -1.07px;
|
||||
--ls-49: -1.09px;
|
||||
--ls-50: -1.11px;
|
||||
--ls-51: -1.14px;
|
||||
--ls-52: -1.16px;
|
||||
--ls-53: -1.18px;
|
||||
--ls-54: -1.20px;
|
||||
--ls-55: -1.23px;
|
||||
--ls-56: -1.25px;
|
||||
--ls-57: -1.27px;
|
||||
--ls-58: -1.29px;
|
||||
--ls-59: -1.32px;
|
||||
--ls-60: -1.34px;
|
||||
--ls-61: -1.36px;
|
||||
--ls-62: -1.38px;
|
||||
--ls-63: -1.40px;
|
||||
--ls-64: -1.43px;
|
||||
--ls-65: -1.45px;
|
||||
--ls-66: -1.47px;
|
||||
--ls-67: -1.49px;
|
||||
--ls-68: -1.52px;
|
||||
--ls-69: -1.54px;
|
||||
--ls-70: -1.56px;
|
||||
--ls-71: -1.58px;
|
||||
--ls-72: -1.61px;
|
||||
}
|
||||
|
||||
@@ -86,6 +86,7 @@
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-14);
|
||||
color: #7a726d;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
@@ -133,6 +134,7 @@
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
letter-spacing: var(--ls-14);
|
||||
color: #2e2a28;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -160,6 +162,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-18);
|
||||
color: #7a726d;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
@@ -197,6 +200,7 @@
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-14);
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -249,6 +253,7 @@
|
||||
padding: 16px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-16);
|
||||
color: #2e2a28;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #e3d9d1;
|
||||
@@ -269,6 +274,7 @@
|
||||
.mobile-nav__language-link {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--ls-15);
|
||||
color: #2e2a28;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -277,6 +283,19 @@
|
||||
color: #f28a4b;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.mobile-nav__languages {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
align-items: center;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
.mobile-nav__language-link {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav__download-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -290,6 +309,7 @@
|
||||
padding: 14px 24px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--ls-15);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -96,6 +96,7 @@
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-14);
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
@@ -110,9 +111,10 @@
|
||||
|
||||
.hero__title {
|
||||
width: 100%;
|
||||
font-size: 40px;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: var(--ls-36);
|
||||
color: #2e2a28;
|
||||
}
|
||||
|
||||
@@ -124,9 +126,10 @@
|
||||
.hero__description {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-15);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@@ -136,52 +139,21 @@
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
gap: 14px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.hero__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 14px 24px;
|
||||
overflow: clip;
|
||||
border-radius: 17px;
|
||||
.hero__store-badge {
|
||||
text-decoration: none;
|
||||
transition: background-color 160ms ease;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
filter 160ms ease;
|
||||
}
|
||||
|
||||
.hero__button--primary {
|
||||
background: #f28a4b;
|
||||
}
|
||||
|
||||
.hero__button--primary:hover {
|
||||
background: #e07a3b;
|
||||
}
|
||||
|
||||
.hero__button--secondary {
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
border: 1px solid #e3d9d1;
|
||||
}
|
||||
|
||||
.hero__button--secondary:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.hero__button-label {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hero__button--primary .hero__button-label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero__button--secondary .hero__button-label {
|
||||
color: #2e2a28;
|
||||
.hero__store-badge:hover {
|
||||
filter: brightness(0.96);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.hero__tags {
|
||||
@@ -208,31 +180,71 @@
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-14);
|
||||
color: #7a726d;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 433px) {
|
||||
.hero__store-badge {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.hero__actions {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.hero__store-badge {
|
||||
flex: 1 1 calc((100% - 14px) / 2);
|
||||
width: calc((100% - 14px) / 2);
|
||||
min-width: 0;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.hero__store-badge .store-badge__copy,
|
||||
.hero__store-badge .store-badge__label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
.hero__actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero__store-badge {
|
||||
flex-basis: auto;
|
||||
width: min(100%, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.hero__tags {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__button {
|
||||
width: min(100%, calc(100vw - 32px));
|
||||
padding-right: 14px;
|
||||
padding-left: 14px;
|
||||
@media (min-width: 440px) {
|
||||
.hero__title {
|
||||
font-size: 42px;
|
||||
letter-spacing: var(--ls-42);
|
||||
}
|
||||
}
|
||||
|
||||
.hero__button-label {
|
||||
font-size: clamp(13px, 3.5vw, 15px);
|
||||
@media (min-width: 576px) {
|
||||
.hero__title {
|
||||
font-size: 48px;
|
||||
letter-spacing: var(--ls-48);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hero__title {
|
||||
font-size: 56px;
|
||||
letter-spacing: var(--ls-56);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -265,9 +277,17 @@
|
||||
width: 660px;
|
||||
padding: 80px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.hero__title {
|
||||
font-size: 72px;
|
||||
font-size: 64px;
|
||||
letter-spacing: var(--ls-64);
|
||||
}
|
||||
|
||||
.hero__description {
|
||||
font-size: 18px;
|
||||
letter-spacing: var(--ls-18);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -276,3 +296,10 @@
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1376px) {
|
||||
.hero__title {
|
||||
font-size: 72px;
|
||||
letter-spacing: var(--ls-72);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 64px 16px;
|
||||
padding: 60px 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -21,9 +21,10 @@
|
||||
.experience__title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: var(--ls-28);
|
||||
color: #1a1a1a;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -47,10 +48,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
gap: 28px;
|
||||
gap: 16px;
|
||||
padding: 0 0 36px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to bottom, #fef0eb, #fff);
|
||||
@@ -85,21 +84,21 @@
|
||||
}
|
||||
|
||||
.experience-card__image--one {
|
||||
top: -58.58%;
|
||||
top: -86.50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 298.5%;
|
||||
}
|
||||
|
||||
.experience-card__image--two {
|
||||
top: -335.6%;
|
||||
left: -5.95%;
|
||||
width: 137.79%;
|
||||
height: 411.28%;
|
||||
top: -137.86%;
|
||||
left: -3.13%;
|
||||
width: 130.62%;
|
||||
height: 389.91%;
|
||||
}
|
||||
|
||||
.experience-card__image--three {
|
||||
top: -99.23%;
|
||||
top: -115.66%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 298.5%;
|
||||
@@ -123,7 +122,7 @@
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.47px;
|
||||
letter-spacing: var(--ls-24);
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
@@ -133,7 +132,7 @@
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.18px;
|
||||
letter-spacing: var(--ls-16);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@@ -143,6 +142,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-18);
|
||||
color: #7a726d;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -152,7 +152,7 @@
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 64px 16px;
|
||||
padding: 60px 16px;
|
||||
background: #fef0eb;
|
||||
}
|
||||
|
||||
@@ -208,6 +208,7 @@
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-14);
|
||||
color: #f08458;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
@@ -216,9 +217,10 @@
|
||||
.use-cases__title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: var(--ls-28);
|
||||
color: #1a1a1a;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -229,6 +231,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-18);
|
||||
color: #7a726d;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -291,6 +294,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
letter-spacing: var(--ls-18);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -300,6 +304,7 @@
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-15);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@@ -323,6 +328,51 @@
|
||||
|
||||
.use-case-row__title {
|
||||
font-size: 20px;
|
||||
letter-spacing: var(--ls-20);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 440px) {
|
||||
.experience,
|
||||
.use-cases {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.experience__title,
|
||||
.use-cases__title {
|
||||
font-size: 32px;
|
||||
letter-spacing: var(--ls-32);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.experience,
|
||||
.use-cases {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.experience__title,
|
||||
.use-cases__title {
|
||||
font-size: 36px;
|
||||
letter-spacing: var(--ls-36);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 626px) {
|
||||
.experience__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 320px));
|
||||
}
|
||||
|
||||
.experience-card {
|
||||
max-width: 320px;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.experience-card:nth-child(3):last-child {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -339,24 +389,21 @@
|
||||
|
||||
.use-case-row__title {
|
||||
font-size: 20px;
|
||||
letter-spacing: var(--ls-20);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.experience,
|
||||
.use-cases {
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.experience__title,
|
||||
.use-cases__title {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 626px) {
|
||||
.experience__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 320px));
|
||||
}
|
||||
|
||||
.experience-card:nth-child(3):last-child {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: center;
|
||||
font-size: 42px;
|
||||
letter-spacing: var(--ls-42);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -372,26 +419,28 @@
|
||||
|
||||
@media (min-width: 1023px) {
|
||||
.experience {
|
||||
padding: 120px 16px;
|
||||
}
|
||||
|
||||
.experience-card {
|
||||
height: 477px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.experience-card__title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.experience__title,
|
||||
.use-cases__title {
|
||||
font-size: 48px;
|
||||
letter-spacing: var(--ls-48);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1295px) {
|
||||
.use-cases {
|
||||
padding: 120px 64px;
|
||||
padding: 60px 64px;
|
||||
}
|
||||
|
||||
.use-cases__inner {
|
||||
@@ -401,6 +450,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1376px) {
|
||||
.experience {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.use-cases {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.use-cases {
|
||||
padding-right: 130px;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 64px 16px;
|
||||
padding: 60px 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -30,9 +30,10 @@
|
||||
.trust__title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: var(--ls-28);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
@@ -42,6 +43,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-18);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@@ -126,6 +128,7 @@
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
letter-spacing: var(--ls-16);
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
@@ -135,12 +138,13 @@
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-15);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
.trust__divider {
|
||||
position: relative;
|
||||
display: none;
|
||||
display: none; /* shown only in desktop flex row via 1023px breakpoint */
|
||||
flex-shrink: 0;
|
||||
width: 0;
|
||||
height: 118px;
|
||||
@@ -170,32 +174,72 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 440px) {
|
||||
.trust {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.trust__title {
|
||||
font-size: 40px;
|
||||
font-size: 32px;
|
||||
letter-spacing: var(--ls-32);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.trust {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.trust__title {
|
||||
font-size: 36px;
|
||||
letter-spacing: var(--ls-36);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.trust {
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.trust__title {
|
||||
font-size: 42px;
|
||||
letter-spacing: var(--ls-42);
|
||||
}
|
||||
|
||||
.trust__grid {
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
position: relative;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1022px) {
|
||||
.trust__grid > .trust-card:nth-child(1),
|
||||
.trust__grid > .trust-card:nth-child(5) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.trust__divider {
|
||||
display: block;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.trust__divider:nth-of-type(4) {
|
||||
display: none;
|
||||
.trust__grid > .trust-card:nth-child(1)::after,
|
||||
.trust__grid > .trust-card:nth-child(5)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -16px;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 118px;
|
||||
border-left: 1px solid rgba(240, 132, 88, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1023px) {
|
||||
.trust {
|
||||
padding: 120px;
|
||||
}
|
||||
|
||||
.trust__title {
|
||||
font-size: 48px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.trust__grid {
|
||||
@@ -211,3 +255,19 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.trust__title {
|
||||
font-size: 48px;
|
||||
letter-spacing: var(--ls-48);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1376px) {
|
||||
.trust {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 64px 16px;
|
||||
padding: 60px 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -47,8 +47,9 @@
|
||||
|
||||
.why__title {
|
||||
width: 100%;
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--ls-28);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
@@ -82,6 +83,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-18);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@@ -169,9 +171,10 @@
|
||||
.why-card__title {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
line-height: 23px;
|
||||
letter-spacing: var(--ls-20);
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
@@ -181,12 +184,43 @@
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: var(--ls-16);
|
||||
color: #7a726d;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 440px) {
|
||||
.why {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.why__title {
|
||||
font-size: 40px;
|
||||
font-size: 32px;
|
||||
letter-spacing: var(--ls-32);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.why {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.why__title {
|
||||
font-size: 36px;
|
||||
letter-spacing: var(--ls-36);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.why {
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.why__title {
|
||||
font-size: 42px;
|
||||
letter-spacing: var(--ls-42);
|
||||
}
|
||||
|
||||
.why__grid {
|
||||
@@ -196,11 +230,19 @@
|
||||
.why-card {
|
||||
min-height: 152px;
|
||||
}
|
||||
|
||||
.why-card__title {
|
||||
font-size: 24px;
|
||||
letter-spacing: var(--ls-24);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1023px) {
|
||||
.why {
|
||||
padding: 120px 24px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.why__intro {
|
||||
@@ -214,16 +256,20 @@
|
||||
.why__illustration {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.why__title {
|
||||
font-size: 48px;
|
||||
letter-spacing: var(--ls-48);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (min-width: 1376px) {
|
||||
.why {
|
||||
padding-right: 0;
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user