From b0329e38637706a7189c1eb30a20a8f735fbcb3c Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Tue, 12 May 2026 17:45:23 +0800
Subject: [PATCH] fix: ensure layout works at 360px minimum viewport width

- 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>
---
 src/components/AppPreview.astro  | 38 ++++++++++++++++----------------
 src/components/DownloadCTA.astro | 18 +++++++--------
 src/components/Footer.astro      | 12 +++++-----
 src/components/UseCases.astro    | 16 +++++++-------
 4 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/components/AppPreview.astro b/src/components/AppPreview.astro
index dddd0da..6296592 100644
--- a/src/components/AppPreview.astro
+++ b/src/components/AppPreview.astro
@@ -6,10 +6,10 @@ const slides = [
 ]
 ---
 
-<section class="bg-[#fef0eb] w-full flex flex-col gap-[60px] items-center pt-[120px] px-[130px] overflow-hidden">
+<section class="bg-[#fef0eb] w-full flex flex-col gap-[60px] items-center pt-16 lg:pt-[120px] px-4 lg:px-[130px] overflow-hidden">
   <!-- Heading -->
-  <div class="flex flex-col gap-[40px] items-start overflow-clip w-[940px]">
-    <p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
+  <div class="flex flex-col gap-[40px] items-start overflow-clip w-full max-w-[940px] mx-auto">
+    <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 Familiar App Experience, Reimagined with a Modern Look
     </p>
     <p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full">
@@ -20,13 +20,13 @@ const slides = [
   <!-- Carousel -->
   <div class="flex gap-[20px] items-end justify-center shrink-0" id="carousel">
 
-    <!-- Left phone -->
-    <div class="relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
+    <!-- Left phone (hidden on mobile) -->
+    <div class="hidden lg:block relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
       <img id="phone-left" alt="" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[slides.length - 1]} />
     </div>
 
-    <!-- Prev button -->
-    <div class="flex items-end self-stretch shrink-0">
+    <!-- Prev button (hidden on mobile) -->
+    <div class="hidden lg:flex items-end self-stretch shrink-0">
       <div class="flex items-center justify-center h-full">
         <button id="btn-prev" class="bg-[#f08458] flex items-center justify-center rounded-[9999px] size-[48px] hover:bg-[#e07a3b] active:scale-95 transition-all shrink-0 cursor-pointer">
           <img alt="Previous" class="block size-[24px]" src="/assets/preview-arrow-left.svg" />
@@ -35,12 +35,12 @@ const slides = [
     </div>
 
     <!-- Center phone -->
-    <div class="relative h-[542px] w-[459px] shrink-0 overflow-hidden pointer-events-none">
+    <div class="relative w-full lg:w-[459px] aspect-[459/542] lg:aspect-auto lg:h-[542px] shrink-0 overflow-hidden pointer-events-none">
       <img id="phone-center" alt="TalkPro app preview" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[0]} />
     </div>
 
-    <!-- Next button -->
-    <div class="flex items-end self-stretch shrink-0">
+    <!-- Next button (hidden on mobile) -->
+    <div class="hidden lg:flex items-end self-stretch shrink-0">
       <div class="flex items-center justify-center h-full">
         <button id="btn-next" class="bg-[#f08458] flex items-center justify-center rounded-[9999px] size-[48px] hover:bg-[#e07a3b] active:scale-95 transition-all shrink-0 cursor-pointer">
           <img alt="Next" class="block size-[24px] rotate-180" src="/assets/preview-arrow-right.svg" />
@@ -48,8 +48,8 @@ const slides = [
       </div>
     </div>
 
-    <!-- Right phone -->
-    <div class="relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
+    <!-- Right phone (hidden on mobile) -->
+    <div class="hidden lg:block relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
       <img id="phone-right" alt="" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[1]} />
     </div>
 
@@ -74,18 +74,18 @@ const slides = [
   function mod(n: number, m: number) { return ((n % m) + m) % m; }
 
   function transition(next: number) {
-    [leftImg, centerImg, rightImg].forEach(img => img.style.opacity = '0');
+    [leftImg, centerImg, rightImg].forEach(img => img && (img.style.opacity = '0'));
     setTimeout(() => {
       current = mod(next, allSlides.length);
-      leftImg.src   = allSlides[mod(current - 1, allSlides.length)];
-      centerImg.src = allSlides[current];
-      rightImg.src  = allSlides[mod(current + 1, allSlides.length)];
-      [leftImg, centerImg, rightImg].forEach(img => img.style.opacity = '1');
+      if (leftImg)  leftImg.src   = allSlides[mod(current - 1, allSlides.length)];
+      if (centerImg) centerImg.src = allSlides[current];
+      if (rightImg) rightImg.src  = allSlides[mod(current + 1, allSlides.length)];
+      [leftImg, centerImg, rightImg].forEach(img => img && (img.style.opacity = '1'));
     }, 200);
   }
 
-  btnPrev.addEventListener('click', () => transition(current - 1));
-  btnNext.addEventListener('click', () => transition(current + 1));
+  if (btnPrev) btnPrev.addEventListener('click', () => transition(current - 1));
+  if (btnNext) btnNext.addEventListener('click', () => transition(current + 1));
 </script>
 
 <script define:vars={{ slides }}>
diff --git a/src/components/DownloadCTA.astro b/src/components/DownloadCTA.astro
index 6b18f4e..25ed209 100644
--- a/src/components/DownloadCTA.astro
+++ b/src/components/DownloadCTA.astro
@@ -6,11 +6,11 @@ const appleIcon = "/assets/cta-apple-icon.svg";
 const phoneArt = "/assets/cta-phone-art.png";
 ---
 
-<section id="download" class="relative bg-white border-t border-[#eec8b8] w-full flex items-center justify-center overflow-hidden h-[600px]">
+<section id="download" class="relative bg-white border-t border-[#eec8b8] w-full flex items-center justify-center overflow-hidden min-h-[400px] lg:h-[600px]">
   <!-- Background pattern -->
   <img alt="" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[923px] w-full max-w-[1920px] pointer-events-none" src={bgPattern} />
 
-  <div class="relative flex items-center w-[1280px]">
+  <div class="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-0 w-full max-w-[1280px] mx-auto px-4 lg:px-0 py-12 lg:py-0">
     <!-- Left: download panel -->
     <div class="flex flex-1 flex-col gap-[36px] items-start justify-center min-w-0 overflow-clip">
       <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
@@ -18,8 +18,8 @@ const phoneArt = "/assets/cta-phone-art.png";
       </div>
 
       <div class="flex flex-col gap-[16px] items-start w-full">
-        <div class="flex gap-[20px] items-start shrink-0">
-          <p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] whitespace-nowrap">Download</p>
+        <div class="flex gap-[20px] items-start shrink-0 flex-wrap">
+          <p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] tracking-[-1.16px] leading-[1.2] whitespace-nowrap">Download</p>
           <div class="relative shrink-0 h-[72px] w-[188px]">
             <img alt="TalkPro" class="absolute inset-0 block max-w-none size-full" src={talkproLogo} />
           </div>
@@ -30,15 +30,15 @@ const phoneArt = "/assets/cta-phone-art.png";
       </div>
 
       <!-- 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>
@@ -50,8 +50,8 @@ const phoneArt = "/assets/cta-phone-art.png";
       </div>
     </div>
 
-    <!-- Right: phone art -->
-    <div class="relative shrink-0 h-[510px] w-[418px]">
+    <!-- Right: phone art (hidden on mobile) -->
+    <div class="hidden lg:block relative shrink-0 h-[510px] w-[418px]">
       <div class="absolute inset-0 overflow-hidden pointer-events-none">
         <img alt="TalkPro on phone" class="absolute h-[136.1%] left-[3.8%] max-w-none top-[-18.05%] w-[92.43%]" src={phoneArt} />
       </div>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 8691d56..405f954 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -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>
diff --git a/src/components/UseCases.astro b/src/components/UseCases.astro
index e7c070b..aa2dc7c 100644
--- a/src/components/UseCases.astro
+++ b/src/components/UseCases.astro
@@ -7,14 +7,14 @@ const rows = [
 ]
 ---
 
-<section id="use-cases" class="bg-[#fef0eb] w-full flex items-start justify-center px-[130px] py-[120px]">
-  <div class="flex gap-[40px] items-center w-[1280px]">
+<section id="use-cases" class="bg-[#fef0eb] w-full flex items-start justify-center py-16 lg:py-[120px] px-4 lg:px-[130px]">
+  <div class="flex flex-col lg:flex-row lg:gap-[40px] lg:items-center gap-8 w-full max-w-[1280px] mx-auto">
     <!-- Left: heading -->
-    <div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0 w-[540px]">
+    <div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0 w-full lg:w-[540px] lg:shrink-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">USE CASES</span>
       </div>
-      <p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">
+      <p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] tracking-[-1.16px] leading-[1.2] w-full">
         Made for Personal, Social, and Community Communication
       </p>
       <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
@@ -25,11 +25,11 @@ const rows = [
     <!-- Right: rows -->
     <div class="flex flex-1 flex-col items-start min-w-0 overflow-clip rounded-[30px] gap-px">
       {rows.map(row => (
-        <div class="bg-[#faede8] flex h-[120px] items-center overflow-clip w-full shrink-0">
-          <div class="bg-[#f08458] flex h-full items-center px-[36px] py-[24px] shrink-0 w-[300px]">
-            <p class="flex-1 font-semibold text-[20px] text-white tracking-[-0.6px] leading-normal min-w-0">{row.title}</p>
+        <div class="bg-[#faede8] flex flex-col sm:flex-row sm:h-[120px] items-stretch overflow-clip w-full shrink-0">
+          <div class="bg-[#f08458] flex items-center px-[24px] sm:px-[36px] py-[16px] sm:py-[24px] shrink-0 w-full sm:w-[300px]">
+            <p class="flex-1 font-semibold text-[18px] sm:text-[20px] text-white tracking-[-0.6px] leading-normal min-w-0">{row.title}</p>
           </div>
-          <div class="bg-white flex flex-1 h-full items-center min-w-0 px-[36px] py-[24px]">
+          <div class="bg-white flex flex-1 items-center min-w-0 px-[24px] sm:px-[36px] py-[16px] sm:py-[24px]">
             <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] flex-1 min-w-0">{row.desc}</p>
           </div>
         </div>