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

refactor: update layout and styling for multiple components to enhance responsiveness and visual consistency

Browse Source
This commit is contained in:
TerryM
2026-05-12 18:14:48 +08:00
parent b0329e3863
commit a23dcf0a95
6 changed files with 76 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/WhyTalkPro.astro
View File

@@ -6,18 +6,18 @@ 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]">
<section class="bg-white w-full flex flex-col items-center justify-center py-16 lg:py-[120px]">
<div class="flex flex-col gap-[40px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0">
<!-- Header row -->
<div class="flex gap-[36px] items-start overflow-clip w-full">
<div class="flex flex-col lg:flex-row 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">
<div class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg: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>
@@ -34,53 +34,47 @@ const iconModern = "/assets/why-icon-modern.svg";
</div>
<!-- Right: illustration -->
<div class="relative shrink-0 size-[480px]">
<div class="hidden lg:block 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 class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
<div class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
<div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
<img alt="" class="block size-[44px]" src={iconSimple} />
</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 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>
<!-- 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 class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
<div class="bg-[#f08458] aspect-square h-[80px] 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="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 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 class="bg-[#fef0eb] border border-[#e8e4de] flex gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
<div class="bg-[#f08458] aspect-square h-[80px] 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 gap-[24px] h-auto md:h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
<div class="bg-[#f08458] aspect-square h-[80px] 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>