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

112
src/components/Hero.astro
View File

@@ -1,82 +1,58 @@
---
const floatCards = [
{
icon: '☷',
title: 'Work / Private / Protected',
desc: 'One account, multiple communication worlds.',
pos: 'left-[-40px] top-[75.5px]',
},
{
icon: '✦',
title: 'AI Summary Ready',
desc: 'Long conversations and group highlights organized automatically.',
pos: 'left-[180px] top-[270px]',
},
{
icon: '◌',
title: 'Protected Hidden Space',
desc: 'When privacy needs more, enter a protected space.',
pos: 'left-[20px] top-[540px]',
},
]
const heroBg = "/assets/hero-bg.png";
const phoneMockup = "/assets/hero-phone.png";
---
<section class="relative w-full overflow-hidden">
<img src="/assets/hero-bg.png" alt="" class="absolute inset-0 w-full h-full object-cover pointer-events-none" aria-hidden="true" />
<section class="relative w-full flex items-start justify-center h-[891px] overflow-hidden">
<img alt="" class="absolute inset-0 max-w-none object-cover size-full pointer-events-none" src={heroBg} />
<div class="relative flex items-center gap-[70px] h-[683px] px-[130px] py-[80px] max-w-[1440px] mx-auto">
<!-- Left column -->
<div class="flex flex-col gap-[30px] items-start w-[600px] shrink-0">
<div class="flex flex-col gap-6">
<div class="bg-[rgba(255,255,255,0.62)] border border-white px-[14px] py-[9px] rounded-full w-fit">
<p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-pre">✦ Available on iOS and Android</p>
<div class="relative flex gap-[40px] items-start w-[1280px] h-full">
<!-- Phone mockup -->
<div class="flex flex-1 items-center min-w-0 pt-[60px] h-full">
<div class="relative w-full" style="aspect-ratio: 673/1108;">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="TalkPro app on iPhone" class="absolute h-[114.36%] left-[-2.67%] max-w-none top-[-7.18%] w-[105.35%]" src={phoneMockup} />
</div>
<div class="font-bold text-text-primary text-[72px] tracking-[-1.61px] leading-[0.96] w-[560px]">
<p>One User.</p>
<p>Multiple Worlds.</p>
</div>
<p class="text-text-secondary text-[20px] font-normal leading-[1.5] tracking-[-0.33px]">
Talk Pro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, Talk Pro helps people stay connected in one familiar experience.
</p>
</div>
<div class="flex items-center gap-[14px]">
<button class="bg-brand text-white font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:opacity-90 transition-opacity whitespace-pre">
Download Talk Pro ↓
</button>
<button class="bg-[rgba(255,255,255,0.55)] border border-border-light text-text-primary font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:bg-white transition-colors whitespace-pre">
Explore Features →
</button>
</div>
<div class="flex items-center gap-[10px]">
{['Identity Layer', 'AI Native Messaging', 'Adaptive Privacy'].map((tag) => (
<div class="bg-[rgba(255,255,255,0.68)] border border-white px-[14px] py-[9px] rounded-full">
<p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-nowrap">{tag}</p>
</div>
))}
</div>
</div>
<!-- Phone mockup -->
<div class="relative h-[690px] w-[430px] shrink-0">
<div class="absolute bg-text-primary h-[620px] left-[63px] rounded-[44px] top-[35px] w-[304px] overflow-hidden">
<img src="/assets/hero-phone.png" alt="Talk Pro app" class="absolute left-3 top-3 w-[280px] h-[596px] rounded-[34px] object-cover" />
<!-- Hero copy -->
<div class="flex flex-col gap-[60px] h-full items-start justify-center overflow-clip shrink-0 w-[660px]">
<!-- Pill -->
<div class="bg-white border border-[#f08458] flex items-center overflow-clip px-[16px] py-[12px] rounded-[999px] shrink-0">
<p class="font-bold text-[#0d0d0d] text-[14px] tracking-[-0.09px] leading-normal">✦&nbsp; Available on iOS and Android</p>
</div>
{floatCards.map((card) => (
<div class={`absolute ${card.pos} flex items-start gap-3 bg-[rgba(255,255,255,0.86)] border border-white backdrop-blur-[3.7px] rounded-[24px] pl-4 pr-[18px] py-4`}>
<div class="bg-[#fff0e5] rounded-[14px] size-[38px] flex items-center justify-center shrink-0">
<span class="text-brand font-bold text-[18px]">{card.icon}</span>
</div>
<div class="flex flex-col gap-1">
<p class="font-bold text-text-primary text-[14px] tracking-[-0.09px] whitespace-nowrap">{card.title}</p>
<p class="text-text-secondary text-[12px] font-normal leading-[1.45] tracking-[0.01px] w-[185px]">{card.desc}</p>
</div>
<div class="flex flex-col gap-[24px] items-start shrink-0 w-full">
<div class="font-bold text-[#2e2a28] text-[72px] tracking-[-1.61px] w-full">
<p class="leading-[1.1] mb-0">A Modern Way to</p>
<p class="leading-[1.1]">Stay Connected</p>
</div>
))}
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
TalkPro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, TalkPro helps people stay connected in one familiar experience.
</p>
<div class="flex gap-[14px] items-center overflow-clip shrink-0">
<a href="#download" class="bg-[#f28a4b] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-[#e07a3b] transition-colors">
<span class="font-bold text-white text-[15px] tracking-[-0.13px] leading-normal">Download TalkPro ↓</span>
</a>
<a href="#features" class="bg-[rgba(255,255,255,0.55)] border border-[#e3d9d1] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-white transition-colors">
<span class="font-bold text-[#2e2a28] text-[15px] tracking-[-0.13px] leading-normal">Explore Features →</span>
</a>
</div>
</div>
<!-- Tags -->
<div class="flex gap-[10px] items-center overflow-clip shrink-0">
<div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
<span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Identity Layer</span>
</div>
<div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
<span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">AI Native Messaging</span>
</div>
<div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
<span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Adaptive Privacy</span>
</div>
</div>
</div>
</div>
</section>