refactor: update layout and styling for multiple components to enhance responsiveness and visual consistency

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]">
+  <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">
-    <!-- Row 1 -->
+    {cards.map(card => (
-    <div class="flex gap-[22px] items-start w-full">
+      <div class="bg-[rgba(255,255,255,0.78)] flex flex-col gap-[16px] items-center p-[32px] rounded-[30px]">
-      {cards.slice(0, 3).map(card => (
+        <div class="relative shrink-0 size-[160px] overflow-hidden">
-        <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">
+          <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
-          <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>
-      ))}
+        <div class="flex flex-col gap-[12px] items-start text-center w-full">
-    </div>
+          <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
-    <!-- Row 2 -->
+          <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
-    <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>
-      ))}
+      </div>
-    </div>
+    ))}
   </div>
 </section>

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]">
+<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-[1008px]">
+  <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-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
+    <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="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-[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-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-[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-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-[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" />

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>

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>

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]">
+<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-[1280px]">
+  <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>

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]">
+<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-[1280px]">
+  <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">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
-      <!-- Row 1 -->
+      <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="flex gap-[24px] items-center w-full">
+        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
-        <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]">
+          <img alt="" class="block size-[44px]" src={iconSimple} />
-          <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>
-        <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="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
-          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Simple</p>
-            <img alt="" class="block" style="width:38px;height:40px;" src={iconFamiliar} />
+          <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="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>
-      <!-- Row 2 -->
+      <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="flex gap-[24px] items-center w-full">
+        <div class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
-        <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]">
+          <img alt="" class="block" style="width:38px;height:40px;" src={iconFamiliar} />
-          <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>
-        <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="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
-          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+          <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Familiar</p>
-            <img alt="" class="block" style="width:24px;height:44px;" src={iconModern} />
+          <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="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
+      </div>
-            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Modern</p>
+      <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]">
-            <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 class="bg-[#f08458] aspect-square h-[80px] flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
-          </div>
+          <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>