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

96
src/components/Trust.astro Normal file
View File

@@ -0,0 +1,96 @@
---
---
<section id="reliability" class="bg-white w-full flex flex-col items-center justify-center p-[120px]">
<div class="flex flex-col gap-[40px] items-start w-[1280px]">
<!-- Header -->
<div class="flex flex-col gap-[24px] items-start overflow-clip w-full">
<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">RELIABILITY</span>
</div>
<p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">Built with User Trust in Mind</p>
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
TalkPro is designed with a privacy-conscious approach and a focus on dependable communication. The app keeps the user experience simple while supporting the core communication features people expect from a modern messaging platform.
</p>
</div>
<!-- 4-column feature row -->
<div class="flex gap-[24px] items-center justify-center w-full">
<!-- Card 1: Privacy-Conscious Design -->
<div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
<div class="relative shrink-0 size-[128px]">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="" class="absolute h-[174.55%] left-[-31.48%] max-w-none top-[7.04%] w-[312.73%]" src="/assets/trust-icon-sprite.png" />
</div>
</div>
<div class="flex flex-col gap-[8px] items-start w-full">
<p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Privacy-Conscious Design</p>
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Built with careful consideration for user communication and data handling.</p>
</div>
</div>
<!-- Divider -->
<div class="relative h-[118px] shrink-0 w-0">
<div class="absolute inset-[0_-0.5px]">
<img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
</div>
</div>
<!-- Card 2: Minimal and Focused -->
<div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
<div class="relative shrink-0 size-[128px]">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="" class="absolute h-[187.32%] left-[-164.72%] max-w-none top-[3.1%] w-[335.61%]" src="/assets/trust-icon-sprite.png" />
</div>
</div>
<div class="flex flex-col gap-[8px] items-start w-full">
<p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Minimal and Focused</p>
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Designed around essential messaging features without unnecessary complexity.</p>
</div>
</div>
<!-- Divider -->
<div class="relative h-[118px] shrink-0 w-0">
<div class="absolute inset-[0_-0.5px]">
<img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
</div>
</div>
<!-- Card 3: Reliable Experience -->
<div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
<div class="relative shrink-0 size-[128px]">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="" class="absolute h-[211.46%] left-[-187.93%] max-w-none top-[-105.62%] w-[378.86%]" src="/assets/trust-icon-sprite.png" />
</div>
</div>
<div class="flex flex-col gap-[8px] items-start w-full">
<p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Reliable Experience</p>
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Focused on providing a stable and familiar communication experience.</p>
</div>
</div>
<!-- Divider -->
<div class="relative h-[118px] shrink-0 w-0">
<div class="absolute inset-[0_-0.5px]">
<img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
</div>
</div>
<!-- Card 4: Continuous Improvement -->
<div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
<div class="relative shrink-0 size-[128px]">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="" class="absolute left-[4.14%] max-w-none size-full top-0" src="/assets/trust-icon-improvement.png" />
</div>
</div>
<div class="flex flex-col gap-[8px] items-start w-full">
<p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Continuous Improvement</p>
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">TalkPro will continue to improve its interface, features, and overall user experience.</p>
</div>
</div>
</div>
</div>
</section>