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

14
src/components/Trust.astro
View File

@@ -1,22 +1,22 @@
---
---
<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]">
<section id="reliability" class="bg-white w-full flex flex-col items-center justify-center py-16 px-4 lg:p-[120px]">
<div class="flex flex-col gap-[40px] items-start w-full max-w-[1280px] mx-auto">
<!-- 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-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg: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">
<div class="grid grid-cols-1 md:grid-cols-2 lg:flex lg:gap-[24px] lg:items-center gap-8 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]">
@@ -32,7 +32,7 @@
</div>
<!-- Divider -->
<div class="relative h-[118px] shrink-0 w-0">
<div class="hidden lg:block 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>
@@ -52,7 +52,7 @@
</div>
<!-- Divider -->
<div class="relative h-[118px] shrink-0 w-0">
<div class="hidden lg:block 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>
@@ -72,7 +72,7 @@
</div>
<!-- Divider -->
<div class="relative h-[118px] shrink-0 w-0">
<div class="hidden lg:block 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>