feat: rebuild landing page from new Figma design (node 9505:537)
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
89
src/components/WhyTalkPro.astro
Normal file
89
src/components/WhyTalkPro.astro
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
const underline = "/assets/why-underline.svg";
|
||||
const iconSimple = "/assets/why-icon-simple.svg";
|
||||
const iconFamiliar = "/assets/why-icon-familiar.svg";
|
||||
const iconConn = "/assets/why-icon-connected.svg";
|
||||
const iconModern = "/assets/why-icon-modern.svg";
|
||||
---
|
||||
|
||||
<section class="bg-white w-full flex flex-col items-center justify-center py-[120px]">
|
||||
<div class="flex flex-col gap-[40px] items-start w-[1280px]">
|
||||
|
||||
<!-- Header row -->
|
||||
<div class="flex gap-[36px] items-start overflow-clip w-full">
|
||||
<!-- Left: pill + heading + description -->
|
||||
<div class="flex flex-1 flex-col gap-[36px] items-start min-w-0">
|
||||
<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">WHY TALKPRO</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-[24px] items-start w-full">
|
||||
<div class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] w-full">
|
||||
<p class="leading-[1.2] mb-0">Designed for the Way</p>
|
||||
<p class="leading-[1.2]">People Communicate Today</p>
|
||||
</div>
|
||||
<!-- Underline decoration -->
|
||||
<div class="relative h-0 w-[295.5px] shrink-0">
|
||||
<div class="absolute inset-[-0.5px_0]">
|
||||
<img alt="" class="block max-w-none size-full" src={underline} />
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
|
||||
Communication today happens across personal conversations, communities, work groups, and content channels. TalkPro brings these essential communication experiences together in a simple and familiar interface, making it easier for users to connect, share, and stay updated.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: illustration -->
|
||||
<div class="relative shrink-0 size-[480px]">
|
||||
<img alt="People communicating with TalkPro" class="absolute inset-0 size-full object-contain" src="/assets/why-illustration.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2×2 card grid -->
|
||||
<div class="flex flex-col gap-[24px] items-start overflow-clip w-full">
|
||||
<!-- Row 1 -->
|
||||
<div class="flex gap-[24px] items-center w-full">
|
||||
<div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
|
||||
<div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
|
||||
<img alt="" class="block size-[44px]" src={iconSimple} />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Simple</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">An easy-to-use experience designed for everyday communication.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
|
||||
<div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
|
||||
<img alt="" class="block" style="width:38px;height:40px;" src={iconFamiliar} />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Familiar</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A messaging structure that feels natural from the first use.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="flex gap-[24px] items-center w-full">
|
||||
<div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
|
||||
<div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
|
||||
<img alt="" class="block size-[44px]" src={iconConn} />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Connected</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Private chats, groups, channels, voice, and video in one app.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
|
||||
<div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
|
||||
<img alt="" class="block" style="width:24px;height:44px;" src={iconModern} />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
|
||||
<p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Modern</p>
|
||||
<p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A refined interface with clean visuals and smooth interaction.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user