fix: resolve tsconfig extends path for Vite/esbuild compatibility

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
fix: responsive layout for 360px minimum viewport width
2026-05-12 18:46:00 +08:00 · 2026-05-12 18:35:29 +08:00 · 2026-05-12 18:30:55 +08:00 · 2026-05-12 17:45:23 +08:00
11 changed files with 120 additions and 147 deletions
--- 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">
@@ -18,15 +18,15 @@ const slides = [
  </div>

  <!-- Carousel -->
-  <div class="flex gap-[20px] items-end justify-center shrink-0" id="carousel">
+  <div class="flex gap-[20px] items-end justify-center shrink-0 w-full" 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 }}>
--- a/src/components/CoreSystem.astro
+++ b/src/components/CoreSystem.astro
@@ -17,50 +17,33 @@ const cards = [
 ]
 ---

-<section id="features" class="relative w-full flex flex-col gap-[60px] items-center py-[120px] overflow-hidden">
+<section id="features" class="relative w-full flex flex-col gap-[60px] items-center py-16 lg:py-[120px] overflow-hidden">
  <!-- Background halftone -->
  <img alt="" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[1319px] w-[2363px] object-cover pointer-events-none opacity-20" src={halftone} />

  <!-- Section header -->
-  <div class="relative flex flex-col gap-[24px] items-center justify-end overflow-clip px-[180px] w-[1280px]">
+  <div class="relative flex flex-col gap-[24px] items-center justify-end overflow-clip w-full max-w-[1280px] mx-auto px-4 lg:px-[180px]">
    <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">CORE FEATURES</span>
    </div>
-    <p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">Everything You Need to Communicate</p>
+    <p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">Everything You Need to Communicate</p>
    <p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full">
      Different identities, different conversations, and different privacy levels should not be forced into one flat interface. TalkPro lets them exist in order inside one platform.
    </p>
  </div>

  <!-- Card grid -->
-  <div class="relative flex flex-col gap-[22px] items-start w-[1280px]">
-    <!-- Row 1 -->
-    <div class="flex gap-[22px] items-start w-full">
-      {cards.slice(0, 3).map(card => (
-        <div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
-          <div class="relative shrink-0 size-[160px] overflow-hidden">
-            <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
-          </div>
-          <div class="flex flex-col gap-[12px] items-start text-center w-full">
-            <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
-            <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
-          </div>
+  <div class="relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[22px] w-full max-w-[1280px] mx-auto px-4 lg:px-0">
+    {cards.map(card => (
+      <div class="bg-[rgba(255,255,255,0.78)] flex flex-col gap-[16px] items-center p-[32px] rounded-[30px]">
+        <div class="relative shrink-0 size-[160px] overflow-hidden">
+          <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
        </div>
-      ))}
-    </div>
-    <!-- Row 2 -->
-    <div class="flex gap-[22px] items-center w-full">
-      {cards.slice(3).map(card => (
-        <div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
-          <div class="relative shrink-0 size-[160px] overflow-hidden">
-            <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
-          </div>
-          <div class="flex flex-col gap-[12px] items-start text-center w-full">
-            <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
-            <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
-          </div>
+        <div class="flex flex-col gap-[12px] items-start text-center w-full">
+          <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
+          <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
        </div>
-      ))}
-    </div>
+      </div>
+    ))}
  </div>
 </section>
--- 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 w-full">
+        <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>
--- a/src/components/Experience.astro
+++ b/src/components/Experience.astro
@@ -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" />
--- 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 w-full">
+          <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>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -5,7 +5,7 @@ const globeIcon = "/assets/header-globe.svg";
 ---

 <header class="bg-white border-b border-[#e3d9d1] w-full flex items-center justify-center h-[72px] sticky top-0 z-50">
-  <div class="flex items-center w-[1280px]">
+  <div class="flex items-center w-full max-w-[1280px] mx-auto px-4 lg:px-6">
    <!-- Logo -->
    <div class="flex flex-1 items-center min-w-0">
      <a href="/" class="relative h-[42px] w-[143px] shrink-0 block">
@@ -19,7 +19,7 @@ const globeIcon = "/assets/header-globe.svg";
    </div>

    <!-- Nav -->
-    <nav class="flex items-center gap-[32px] shrink-0">
+    <nav class="hidden lg:flex items-center gap-[32px] shrink-0">
      <a href="#" class="font-semibold text-[14px] text-[#f28a4b] tracking-[-0.09px] whitespace-nowrap leading-normal">Home</a>
      <a href="#features" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Features</a>
      <a href="#experience" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Experience</a>
@@ -29,7 +29,7 @@ const globeIcon = "/assets/header-globe.svg";

    <!-- Actions -->
    <div class="flex flex-1 gap-[12px] items-center justify-end min-w-0">
-      <button class="border border-[rgba(46,42,40,0.3)] flex gap-[8px] h-[43px] items-center justify-center pl-[12px] pr-[16px] rounded-[17px] shrink-0 hover:border-[#f28a4b] transition-colors">
+      <button class="hidden lg:flex border border-[rgba(46,42,40,0.3)] gap-[8px] h-[43px] items-center justify-center pl-[12px] pr-[16px] rounded-[17px] shrink-0 hover:border-[#f28a4b] transition-colors">
        <img alt="Language" class="block size-[26px] object-contain" src={globeIcon} />
        <span class="font-semibold text-[14px] text-[#2e2a28] tracking-[-0.09px] whitespace-nowrap leading-[14px]">EN</span>
      </button>
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -3,12 +3,12 @@ const heroBg = "/assets/hero-bg.png";
 const phoneMockup = "/assets/hero-phone.png";
 ---

-<section class="relative w-full flex items-start justify-center h-[891px] overflow-hidden">
+<section class="relative w-full flex items-start justify-center min-h-[600px] lg:h-[891px] overflow-hidden">
  <img alt="" class="absolute inset-0 max-w-none object-cover size-full pointer-events-none" src={heroBg} />

-  <div class="relative flex gap-[40px] items-start w-[1280px] h-full">
+  <div class="relative flex flex-col-reverse lg:flex-row gap-[40px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0 h-full">
    <!-- Phone mockup -->
-    <div class="flex flex-1 items-center min-w-0 pt-[60px] h-full">
+    <div class="hidden lg:flex flex-1 items-center min-w-0 pt-[60px] h-full">
      <div class="relative w-full" style="aspect-ratio: 673/1108;">
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
          <img alt="TalkPro app on iPhone" class="absolute h-[114.36%] left-[-2.67%] max-w-none top-[-7.18%] w-[105.35%]" src={phoneMockup} />
@@ -17,21 +17,21 @@ const phoneMockup = "/assets/hero-phone.png";
    </div>

    <!-- Hero copy -->
-    <div class="flex flex-col gap-[60px] h-full items-start justify-center overflow-clip shrink-0 w-[660px]">
+    <div class="flex flex-col gap-[60px] h-full items-start justify-center overflow-clip shrink-0 w-full lg:w-[660px] py-8 lg:py-[80px]">
      <!-- Pill -->
      <div class="bg-white border border-[#f08458] flex items-center overflow-clip px-[16px] py-[12px] rounded-[999px] shrink-0">
        <p class="font-bold text-[#0d0d0d] text-[14px] tracking-[-0.09px] leading-normal">✦&nbsp; Available on iOS and Android</p>
      </div>

      <div class="flex flex-col gap-[24px] items-start shrink-0 w-full">
-        <div class="font-bold text-[#2e2a28] text-[72px] tracking-[-1.61px] w-full">
+        <div class="font-bold text-[#2e2a28] text-[40px] md:text-[56px] lg:text-[72px] tracking-[-1.61px] w-full">
          <p class="leading-[1.1] mb-0">A Modern Way to</p>
          <p class="leading-[1.1]">Stay Connected</p>
        </div>
        <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
          TalkPro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, TalkPro helps people stay connected in one familiar experience.
        </p>
-        <div class="flex gap-[14px] items-center overflow-clip shrink-0">
+        <div class="flex flex-wrap gap-[14px] items-center overflow-clip shrink-0">
          <a href="#download" class="bg-[#f28a4b] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-[#e07a3b] transition-colors">
            <span class="font-bold text-white text-[15px] tracking-[-0.13px] leading-normal">Download TalkPro  ↓</span>
          </a>
@@ -42,7 +42,7 @@ const phoneMockup = "/assets/hero-phone.png";
      </div>

      <!-- Tags -->
-      <div class="flex gap-[10px] items-center overflow-clip shrink-0">
+      <div class="flex flex-wrap gap-[10px] items-center overflow-clip shrink-0">
        <div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
          <span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Identity Layer</span>
        </div>
--- a/src/components/Trust.astro
+++ b/src/components/Trust.astro
@@ -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>
--- 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>
--- a/src/components/WhyTalkPro.astro
+++ b/src/components/WhyTalkPro.astro
@@ -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>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,3 @@
 {
-  "extends": "astro/tsconfigs/strict",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {}
-  }
+  "extends": "./node_modules/astro/tsconfigs/strict.json"
 }
Author	SHA1	Message	Date
TerryM	dbaad19d0b	fix: resolve tsconfig extends path for Vite/esbuild compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 18:46:00 +08:00
TerryM	4134aec1f8	fix: responsive layout for 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 - UseCases rows: stack vertically on mobile (flex-col sm:flex-row) - Footer/DownloadCTA: responsive padding and container widths Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-12 18:35:29 +08:00
TerryM	a23dcf0a95	refactor: update layout and styling for multiple components to enhance responsiveness and visual consistency	2026-05-12 18:30:55 +08:00
TerryM	b0329e3863	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>	2026-05-12 17:45:23 +08:00