feat: mobile-friendly refactor (#256)

Author: marco-souza

src/components/marketing/Hero.astro

@@ -15,7 +15,7 @@ const { content } = Astro.props;
 ---
 
 <section
-  class="from-base-100 via-base-200/40 to-base-100 relative overflow-hidden border-b border-base-300/60 bg-linear-to-br py-28 md:py-36"
+  class="from-base-100 via-base-200/40 to-base-100 relative overflow-hidden border-b border-base-300/60 bg-linear-to-br py-16 md:py-28 lg:py-36"
   aria-labelledby="hero-heading"
 >
   <div
@@ -25,17 +25,17 @@ const { content } = Astro.props;
   >
   </div>
 
-  <div class="relative mx-auto grid grid-cols-2 max-w-6xl gap-10 px-4 py-16 md:flex-row md:items-center md:py-24 lg:gap-16">
-    <div class="flex-1">
-      <p class="text-primary mb-3 text-sm font-semibold tracking-wide uppercase">{content.eyebrow}</p>
-      <h1 id="hero-heading" class="mb-5 text-4xl leading-tight font-bold tracking-tight md:text-5xl lg:text-6xl">
+  <div class="relative mx-auto flex flex-col md:flex-row max-w-6xl gap-8 md:gap-10 lg:gap-16 px-4 py-12 md:py-16 lg:py-24 items-center">
+    <div class="flex-1 text-center md:text-left">
+      <p class="text-primary mb-2 md:mb-3 text-xs md:text-sm font-semibold tracking-wide uppercase">{content.eyebrow}</p>
+      <h1 id="hero-heading" class="mb-4 md:mb-5 text-3xl md:text-5xl lg:text-6xl leading-tight font-bold tracking-tight">
         {content.headline}
       </h1>
-      <p class="text-base-content/90 mb-8 text-lg leading-relaxed md:text-xl">
+      <p class="text-base-content/90 mb-6 md:mb-8 text-base md:text-lg leading-relaxed md:text-xl">
         {content.subhead}
       </p>
       {(content.primaryCta ?? content.secondaryCta) && (
-        <div class="flex flex-wrap gap-3">
+        <div class="flex flex-wrap gap-3 justify-center md:justify-start">
           {content.primaryCta && (
             <a href={content.primaryCta.href} class="btn btn-primary btn-lg no-underline">
               {content.primaryCta.label}
@@ -50,6 +50,6 @@ const { content } = Astro.props;
       )}
     </div>
 
-    <Logo size="full" showTitle={false} class="mb-4 scale-scale"/>
+    <Logo size="full" showTitle={false} class="mb-4 scale-scale hidden md:block"/>
   </div>
 </section>

src/components/marketing/HowToHelp.astro

@@ -10,7 +10,7 @@ const { items } = Astro.props;
 const t = useTranslations();
 ---
 
-<div class="grid gap-6 md:grid-cols-3">
+<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
   {
     items.map((item) => (
       <article class="card border-base-300 bg-base-100 border shadow-sm">

src/components/marketing/Section.astro

@@ -19,14 +19,14 @@ const bg =
 ---
 
 <section id={id} class:list={[bg, 'scroll-mt-28 border-b border-base-300/60', className]}>
-  <div class="mx-auto max-w-6xl px-4 py-16 md:py-24">
+  <div class="mx-auto max-w-6xl px-4 py-12 md:py-16 lg:py-24">
     {
       eyebrow && (
-        <p class="text-primary mb-2 text-sm font-semibold tracking-wide uppercase">{eyebrow}</p>
+        <p class="text-primary mb-2 text-xs md:text-sm font-semibold tracking-wide uppercase">{eyebrow}</p>
       )
     }
-    <h2 class="mb-4 text-3xl font-bold tracking-tight md:text-4xl">{title}</h2>
-    {subtitle && <p class="text-base-content/85 mb-8 max-w-3xl text-lg leading-relaxed">{subtitle}</p>}
+    <h2 class="mb-3 md:mb-4 text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight">{title}</h2>
+    {subtitle && <p class="text-base-content/85 mb-6 md:mb-8 max-w-3xl text-base md:text-lg leading-relaxed">{subtitle}</p>}
     <slot />
   </div>
 </section>

src/components/marketing/TestimonialGrid.astro

@@ -10,7 +10,7 @@ const { items } = Astro.props;
 const t = useTranslations();
 ---
 
-<div class="grid gap-8 md:grid-cols-2">
+<div class="grid gap-4 md:gap-8 grid-cols-1 md:grid-cols-2">
   {
     items.map((item) => (
       <figure class="border-base-300 bg-base-100/80 flex flex-col gap-4 rounded-2xl border p-6 shadow-sm">

src/components/ui/CallToAction.astro

@@ -4,26 +4,24 @@ import { Icon } from 'astro-icon/components';
 interface Props {
   icon: string;
   title: string;
-  description: string;
+  description?: string;
   class?: string;
 }
 
 const { icon, title, description, class: className = '' } = Astro.props;
 ---
 
-<section class={`py-16 md:py-24 relative overflow-hidden ${className}`}>
-  <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-base-100 to-secondary/5"></div>
-  <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent"></div>
+<section class={`relative overflow-hidden bg-linear-to-br from-primary/5 via-base-100 to-secondary/5 py-12 md:py-16 lg:py-24 ${className}`}>
+  <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent"></div>
 
-  <div class="relative mx-auto max-w-6xl px-4">
-    <div class="max-w-2xl mx-auto text-center">
-      <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/20 mx-auto mb-6">
-        <Icon name={icon} class="w-8 h-8 text-primary-content" />
-      </div>
-      <h2 class="text-3xl font-bold mb-4">{title}</h2>
-      <p class="text-lg text-base-content/70 mb-8">{description}</p>
+  <div class="relative mx-auto max-w-4xl px-4 text-center">
+    <div class="w-12 h-12 md:w-16 md:h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/20 mx-auto mb-4 md:mb-6">
+      <Icon name={icon} class="w-6 h-6 md:w-8 md:h-8 text-primary-content" />
+    </div>
+    <h2 class="text-xl md:text-2xl lg:text-3xl font-bold mb-3 md:mb-4">{title}</h2>
+    {description && <p class="text-base-content/70 mb-6 md:mb-8 max-w-2xl mx-auto text-base md:text-lg leading-relaxed">{description}</p>}
+    <div class="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center">
       <slot />
     </div>
-    <slot name="footer" />
   </div>
 </section>

src/components/ui/HeroSection.astro

@@ -27,26 +27,26 @@ const { eyebrow, title, subtitle, stats, class: className = '' } = Astro.props;
     <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-r from-primary/3 to-secondary/3 rounded-full blur-3xl"></div>
   </div>
 
-  <div class="relative mx-auto max-w-6xl px-4 py-24 md:py-32">
+  <div class="relative mx-auto max-w-6xl px-4 py-16 md:py-20 lg:py-32">
     {eyebrow && (
-      <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
+      <div class="inline-flex items-center gap-2 px-3 py-1.5 md:px-4 md:py-2 rounded-full bg-primary/10 text-primary text-xs md:text-sm font-medium mb-4 md:mb-6">
         <slot name="eyebrow-icon" />
         <span>{eyebrow}</span>
       </div>
     )}
 
-    <h1 class="text-5xl md:text-6xl font-bold tracking-tight mb-6 bg-gradient-to-r from-base-content via-base-content to-base-content/70 bg-clip-text">
+    <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-4 md:mb-6 bg-gradient-to-r from-base-content via-base-content to-base-content/70 bg-clip-text">
       {title}
     </h1>
 
     {subtitle && (
-      <p class="text-xl text-base-content/70 max-w-2xl leading-relaxed">
+      <p class="text-base md:text-lg lg:text-xl text-base-content/70 max-w-2xl leading-relaxed">
         {subtitle}
       </p>
     )}
 
     {stats.length > 0 && (
-      <div class="flex flex-wrap gap-6 mt-10">
+      <div class="flex flex-wrap gap-4 md:gap-6 mt-8 md:mt-10">
         {stats.map((stat) => {
           const colorClasses = {
             primary: 'bg-primary/10 text-primary',
@@ -56,13 +56,13 @@ const { eyebrow, title, subtitle, stats, class: className = '' } = Astro.props;
           };
           const color = stat.color ?? 'blue';
           return (
-            <div class="flex items-center gap-3">
-              <div class={`w-12 h-12 rounded-xl ${colorClasses[color]} flex items-center justify-center`}>
-                <Icon name={stat.icon} class="w-6 h-6" />
+            <div class="flex items-center gap-2 md:gap-3">
+              <div class={`w-10 h-10 md:w-12 md:h-12 rounded-xl ${colorClasses[color]} flex items-center justify-center`}>
+                <Icon name={stat.icon} class="w-5 h-5 md:w-6 md:h-6" />
               </div>
               <div>
-                <span class="block text-2xl font-bold">{stat.value}</span>
-                <span class="text-sm text-base-content/60">{stat.label}</span>
+                <span class="block text-xl md:text-2xl font-bold">{stat.value}</span>
+                <span class="text-xs md:text-sm text-base-content/60">{stat.label}</span>
               </div>
             </div>
           );

src/components/ui/SectionHeader.astro

@@ -19,12 +19,12 @@ const colorGradients = {
 };
 ---
 
-<div class={`flex items-center gap-4 ${className}`}>
-  <div class={`w-14 h-14 rounded-2xl bg-gradient-to-br ${colorGradients[color]} flex items-center justify-center shadow-lg`}>
-    <Icon name={icon} class="w-7 h-7 text-primary-content" />
+<div class={`flex items-center gap-3 md:gap-4 ${className}`}>
+  <div class={`w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-gradient-to-br ${colorGradients[color]} flex items-center justify-center shadow-lg`}>
+    <Icon name={icon} class="w-6 h-6 md:w-7 md:h-7 text-primary-content" />
   </div>
   <div>
-    <h2 class="text-3xl font-bold">{title}</h2>
-    {subtitle && <p class="text-base-content/60">{subtitle}</p>}
+    <h2 class="text-2xl md:text-3xl font-bold">{title}</h2>
+    {subtitle && <p class="text-sm md:text-base text-base-content/60">{subtitle}</p>}
   </div>
 </div>

src/components/ui/StepItem.astro

@@ -39,14 +39,14 @@ const COLORS: Record<StepColor, { text: string; gradient: string; gradientHover:
 const c = COLORS[color];
 ---
 
-<li class="group relative pl-16">
-  <div class={`absolute left-0 top-0 w-12 h-12 rounded-xl bg-gradient-to-br ${c.gradient} flex items-center justify-center group-hover:scale-110 ${c.gradientHover} transition-all duration-300`}>
-    <Icon name={icon} class={`w-5 h-5 ${c.text}`} />
+<li class="group relative pl-14 md:pl-16">
+  <div class={`absolute left-0 top-0 w-10 h-10 md:w-12 md:h-12 rounded-xl bg-gradient-to-br ${c.gradient} flex items-center justify-center group-hover:scale-110 ${c.gradientHover} transition-all duration-300`}>
+    <Icon name={icon} class={`w-4 h-4 md:w-5 md:h-5 ${c.text}`} />
   </div>
-  <div class="absolute left-5 top-12 bottom-0 w-px bg-gradient-to-b from-base-300 to-transparent"></div>
+  <div class="absolute left-4 md:left-5 top-10 md:top-12 bottom-0 w-px bg-gradient-to-b from-base-300 to-transparent"></div>
   <div>
-    <h3 class="text-lg font-semibold flex items-center gap-2">
-      <span class={`${c.text} font-mono text-sm`}>{step}</span>
+    <h3 class="text-base md:text-lg font-semibold flex items-center gap-2">
+      <span class={`${c.text} font-mono text-xs md:text-sm`}>{step}</span>
       {title}
     </h3>
     <p class="text-base-content/70 text-sm leading-relaxed mt-1">{desc}</p>

src/pages/about.astro

@@ -61,7 +61,7 @@ const description = t('about.hero.subtitle');
         class="mb-12"
       />
 
-      <ul class="grid gap-6 md:grid-cols-1 lg:grid-cols-3">
+      <ul class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {coreValues.map((value, index) => {
           const cards = [
             { from: 'from-blue-500/5', to: 'to-blue-600/10', border: 'hover:border-blue-500/30', gradient: 'from-blue-500 to-blue-600', icon: 'lucide:users' },
@@ -127,7 +127,7 @@ const description = t('about.hero.subtitle');
         class="mb-8"
       />
 
-      <ul class="grid gap-4 md:grid-cols-1 lg:grid-cols-3">
+      <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {communicationChannels.map((ch) => (
           <ChannelCard icon={ch.icon} title={t(ch.nameKey)} subtitle={t(ch.descKey)} color={ch.color} />
         ))}

src/styles/global.css

@@ -209,8 +209,19 @@
 	}
 }
 
-@media (max-width: 720px) {
+/* Reduced text size on mobile to keep content readable without aggressive scaling */
+@media (max-width: 640px) {
 	body {
-		@apply text-lg;
+		@apply text-base;
+	}
+
+	h1 {
+		@apply text-4xl;
+	}
+	h2 {
+		@apply text-3xl;
+	}
+	h3 {
+		@apply text-2xl;
 	}
 }