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

feat: rebuild landing page from new Figma design (node 9505:537)

Browse Source 
Complete redesign with 9 sections matching the updated 1920px layout:
- Header: sticky nav with globe/language toggle and Download CTA
- Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected"
- WhyTalkPro: 2x2 card grid with SVG icons and illustration
- CoreSystem: halftone bg, 6-card feature grid with 3D icons
- Experience: 3 vertical screenshot cards with exact Figma clip positions
- UseCases: split layout with 4 orange-header rows
- Trust: 4-column reliability features with sprite clipping and SVG dividers
- AppPreview: interactive phone carousel with prev/next fade transition
- DownloadCTA: polka-dot bg, TalkPro logo script, store badges
- Footer: logo, description, store badges, link columns

All 35 Figma assets downloaded locally (SVGs correctly named .svg).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-12 17:14:50 +08:00
parent 3d1d674419
commit 02102dd046
46 changed files with 1038 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/DownloadCTA.astro
View File

@@ -1,39 +1,59 @@
---
const bgPattern = "/assets/cta-bg-pattern.png";
const talkproLogo = "/assets/cta-talkpro-logo.png";
const androidIcon = "/assets/cta-android-icon.svg";
const appleIcon = "/assets/cta-apple-icon.svg";
const phoneArt = "/assets/cta-phone-art.png";
---
<section class="flex flex-col items-center bg-surface-alt px-[130px] py-[110px] w-full">
<div class="bg-[rgba(255,255,255,0.78)] rounded-[34px] p-[52px] flex flex-col items-center max-w-[1180px] w-full">
<p class="font-bold text-brand text-[13px] tracking-[2.86px]">DOWNLOAD</p>
<div class="h-[15px]"></div>
<div class="font-bold text-text-primary text-[44px] text-center tracking-[-2.2px] leading-[1.04] max-w-[1076px]">
<p>Start with one conversation.</p>
<p>Build your own communication space.</p>
</div>
<div class="h-5"></div>
<p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[800px]">
Talk Pro supports iOS and Android. Official store links, QR codes, version information, and compatibility notes are reserved on the download page.
</p>
<div class="h-8"></div>
<section id="download" class="relative bg-white border-t border-[#eec8b8] w-full flex items-center justify-center overflow-hidden 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} />
<div class="flex gap-2 items-center">
<!-- Android badge -->
<div class="bg-brand border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
<img src="/assets/badge-android-icon.png" alt="Android" class="size-[44px]" />
<div class="flex flex-col gap-[3px]">
<p class="font-bold text-[#ffd6bc] text-[11px] tracking-[0.66px]">ANDROID</p>
<p class="font-bold text-white text-[15px]">Download APK</p>
</div>
<div class="relative flex items-center w-[1280px]">
<!-- 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>
<!-- iOS badge -->
<div class="bg-[rgba(18,18,18,0.94)] border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
<div class="bg-[#323232] rounded-[12px] size-[44px] flex items-center justify-center">
<img src="/assets/badge-ios-icon.png" alt="Apple" class="w-[22px] h-[27px]" />
<div class="flex flex-col gap-[16px] items-start w-full">
<div class="flex gap-[20px] items-start shrink-0">
<p class="font-bold text-[#1a1a1a] 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>
</div>
<div class="flex flex-col gap-[3px]">
<p class="font-bold text-[#ccc] text-[11px] tracking-[0.66px]">IOS</p>
<p class="font-bold text-white text-[15px]">Coming on App Store</p>
<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>
</div>
<!-- Store badges -->
<div class="flex gap-[16px] items-center overflow-clip shrink-0">
<div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
<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>
</div>
<div class="bg-[#383838] border border-[#141414] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
<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>
<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>
</div>
</div>
</div>
<!-- Right: phone art -->
<div class="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>
</div>
</div>