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

20
src/components/Experience.astro
View File

@@ -1,19 +1,19 @@
---
---
<section id="experience" class="bg-white w-full flex flex-col items-center justify-center py-[120px]">
<div class="flex flex-col gap-[40px] items-center justify-center w-[1008px]">
<p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
<section id="experience" 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-center justify-center w-full max-w-[1008px] mx-auto px-4 lg:px-0">
<p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
A Cleaner, More Comfortable Messaging Experience
</p>
<div class="flex flex-col items-start w-full">
<!-- 3 cards row -->
<div class="flex gap-[24px] h-[477px] items-center w-full shrink-0">
<div class="flex flex-col lg:flex-row lg:gap-[24px] lg:h-[477px] lg:items-center gap-6 w-full shrink-0">
<!-- Card 1: Clear Interface -->
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
<div class="relative h-[232px] shrink-0 w-[320px]">
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] lg:h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-full lg:w-[320px]">
<div class="relative h-[232px] shrink-0 w-full lg:w-[320px]">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="Clear interface screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-58.58%] w-full" src="/assets/exp-card-1.png" />
</div>
@@ -25,8 +25,8 @@
</div>
<!-- Card 2: Smooth Navigation -->
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
<div class="bg-[#ffeddf] flex flex-col items-start shrink-0 w-[320px]">
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] lg:h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-full lg:w-[320px]">
<div class="bg-[#ffeddf] flex flex-col items-start shrink-0 w-full lg:w-[320px]">
<div class="relative h-[232px] shrink-0 w-full">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="Smooth navigation screenshot" class="absolute h-[411.28%] left-[-5.95%] max-w-none top-[-335.6%] w-[137.79%]" src="/assets/exp-card-2.png" />
@@ -40,8 +40,8 @@
</div>
<!-- Card 3: Refined Visual Design -->
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
<div class="bg-[#ffeddf] flex flex-col h-[232px] items-start overflow-clip shrink-0 w-[320px]">
<div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] lg:h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-full lg:w-[320px]">
<div class="bg-[#ffeddf] flex flex-col h-[232px] items-start overflow-clip shrink-0 w-full lg:w-[320px]">
<div class="flex-1 min-h-0 relative w-full">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="Refined visual design screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-99.23%] w-full" src="/assets/exp-card-3.png" />