Finn/talk-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(style): Seperate CSS style to src\styles

Browse Source
This commit is contained in:
SeekingGamer
2026-05-13 13:46:21 +08:00
parent 93049e9044
commit dbda554d28
13 changed files with 472 additions and 477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/DownloadCTA.astro
View File

@@ -1,4 +1,11 @@
---
import type { Translations } from '../i18n/translations'
export interface Props {
t: Translations['download']
}
const { t } = Astro.props
const bgPattern = "/assets/cta-bg-pattern.svg";
const talkproLogo = "/assets/cta-talkpro-logo.svg";
const androidIcon = "/assets/cta-android-icon.svg";
@@ -6,54 +13,50 @@ const appleIcon = "/assets/cta-apple-icon.svg";
const phoneArt = "/assets/cta-phone-art.png";
---
<section id="download" class="relative bg-white border-t border-[#eec8b8] w-full flex items-center justify-center overflow-hidden min-h-[400px] lg:h-[600px]">
<!-- Background pattern -->
<img alt="" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[923px] w-full max-w-[1920px] pointer-events-none" src={bgPattern} />
<section id="download" class="download-cta">
<img alt="" class="download-cta__pattern" src={bgPattern} />
<div class="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-0 w-full max-w-[1280px] mx-auto px-4 lg:px-0 py-12 lg:py-0">
<!-- Left: download panel -->
<div class="flex flex-1 flex-col gap-[36px] items-start justify-center min-w-0 overflow-clip">
<div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
<span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">DOWNLOAD</span>
<div class="download-cta__inner">
<div class="download-cta__content">
<div class="section-eyebrow">
<span class="section-eyebrow__text">{t.eyebrow}</span>
</div>
<div class="flex flex-col gap-[16px] items-start w-full">
<div class="flex gap-[20px] items-start shrink-0 flex-wrap">
<p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] tracking-[-1.16px] leading-[1.2] whitespace-nowrap">Download</p>
<div class="relative shrink-0 h-[72px] w-[188px]">
<img alt="TalkPro" class="absolute inset-0 block max-w-none size-full" src={talkproLogo} />
<div class="download-cta__copy">
<div class="download-cta__heading">
<p class="download-cta__title">{t.title}</p>
<div class="download-cta__logo-frame">
<img alt={t.logoAlt} class="download-cta__logo" src={talkproLogo} />
</div>
</div>
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] max-w-[542px]">
Download TalkPro and experience a cleaner, simpler, and more modern way to stay connected.
<p class="download-cta__description">
{t.description}
</p>
</div>
<!-- Store badges -->
<div class="flex flex-wrap gap-[16px] items-center overflow-clip shrink-0 w-full">
<div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] w-full sm:w-[260px] shrink-0">
<img alt="Android" class="block shrink-0 size-[44px]" src={androidIcon} />
<div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">
<p class="font-semibold text-[#ffd6bc] text-[11px] tracking-[0.05px] leading-normal">ANDROID</p>
<p class="font-semibold text-white text-[15px] tracking-[-0.13px] leading-normal">APK Coming Soon</p>
<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__copy">
<p class="store-badge__platform">{t.android}</p>
<p class="store-badge__label">{t.androidCta}</p>
</div>
</div>
<div class="bg-[#383838] border border-[#141414] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] w-full sm:w-[260px] shrink-0">
<div class="bg-[#151515] flex items-center justify-center rounded-[12px] shrink-0 size-[44px]">
<img alt="Apple" class="block h-[27px] w-[22px]" src={appleIcon} />
<div class="store-badge store-badge--ios">
<div class="store-badge__icon-frame">
<img alt={t.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
</div>
<div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">
<p class="font-semibold text-[#ccc] text-[11px] tracking-[0.05px] leading-normal">IOS</p>
<p class="font-semibold text-white text-[15px] tracking-[-0.13px] leading-normal">Coming on App Store</p>
<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>
<!-- Right: phone art (hidden on mobile) -->
<div class="hidden lg:block relative shrink-0 h-[510px] w-[418px]">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="TalkPro on phone" class="absolute h-[136.1%] left-[3.8%] max-w-none top-[-18.05%] w-[92.43%]" src={phoneArt} />
<div class="download-cta__phone">
<div class="download-cta__phone-crop">
<img alt={t.phoneAlt} class="download-cta__phone-image" src={phoneArt} />
</div>
</div>
</div>