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

fix: ensure layout works at 360px minimum viewport width

Browse Source 
- Store badges: w-full on mobile, sm:w-[260px] on larger screens
- AppPreview phone: w-full with aspect-ratio on mobile, fixed size on lg
- UseCases rows: stack vertically on mobile (flex-col sm:flex-row)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-12 17:45:23 +08:00
parent ede669051b
commit b0329e3863
4 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Footer.astro
View File

@@ -4,10 +4,10 @@ const androidIcon = "/assets/footer-android-icon.svg";
const appleIcon = "/assets/footer-apple-icon.svg";
---
<footer class="bg-[#fef0eb] w-full flex flex-col items-center justify-center py-[120px]">
<div class="flex flex-col gap-[36px] items-start w-[1280px]">
<footer class="bg-[#fef0eb] w-full flex flex-col items-center justify-center py-16 lg:py-[120px]">
<div class="flex flex-col gap-[36px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0">
<!-- Top row -->
<div class="flex items-start justify-between w-full">
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-10 lg:gap-0 w-full">
<!-- Brand col -->
<div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0">
<div class="relative h-[64px] w-[220px]">
@@ -17,15 +17,15 @@ const appleIcon = "/assets/footer-apple-icon.svg";
TalkPro is a modern communication app designed for messaging, group conversations, channels, voice calls, and video calls.
</p>
<!-- Store badges -->
<div class="flex gap-[16px] items-center overflow-clip shrink-0">
<div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
<div class="flex flex-wrap gap-[16px] items-center overflow-clip shrink-0">
<div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] w-full sm:w-[260px] shrink-0">
<img alt="Android" class="block shrink-0 size-[44px]" src={androidIcon} />
<div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">
<p class="font-semibold text-[#ffd6bc] text-[11px] tracking-[0.05px] leading-normal">ANDROID</p>
<p class="font-semibold text-white text-[15px] tracking-[-0.13px] leading-normal">APK Coming Soon</p>
</div>
</div>
<div class="bg-[#383838] border border-[#141414] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
<div class="bg-[#383838] border border-[#141414] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] w-full sm:w-[260px] shrink-0">
<div class="bg-[#151515] flex items-center justify-center rounded-[12px] shrink-0 size-[44px]">
<img alt="Apple" class="block h-[27px] w-[22px]" src={appleIcon} />
</div>