From d17bca09b1f5dbe51174a43f5a6f0471f5f52d61 Mon Sep 17 00:00:00 2001
From: Julio Ruiz <julio.ruiz@fusionary.com>
Date: Thu, 12 Feb 2026 02:49:03 -0500
Subject: [PATCH] Fixed responsive header

---
 src/components/Header.astro   |  9 ++++-----
 src/components/HeroHome.astro | 22 ++++++++++------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index dfb68e1..62548ce 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,17 +3,16 @@ import Button from "./ui/Button.astro";
 ---
 
 <div>
-  <div class="flex justify-between py-4">
+  <div class="md:flex justify-between px-8 md:px-0 md:py-4">
     <div class="border-l-4 border-primary pl-4">
-      <p class="font-secondary text-primary font-bold leading-none py-2 text-md">
-        Centro del Reino<br /> De Paz y Justicia
+      <p class="font-secondary text-primary font-bold leading-none py-2 text-3xl md:text-lg">
+        <a href="/">Centro del Reino<br /> De Paz y Justicia</a>
       </p>
     </div>
     <nav
       class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
     >
-      <div class="flex gap-8 font-primary font-bold">
-        <a class="hover:text-primary transition" href="/">Inicio</a>
+      <div class="hidden md:flex gap-8 font-primary font-bold">
         <a class="hover:text-primary transition" href="#somos">Somos</a>
         <a class="hover:text-primary transition" href="#programs">Programas</a>
         <a class="hover:text-primary transition" href="#news">Noticias</a>
diff --git a/src/components/HeroHome.astro b/src/components/HeroHome.astro
index d6695cd..a9f9fd9 100644
--- a/src/components/HeroHome.astro
+++ b/src/components/HeroHome.astro
@@ -6,34 +6,32 @@ import Header from './Header.astro';
     <div class="top-16 relative mb container mx-auto">
             <Header />
         </div>
-    <div class="h-screen max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">
+    <div class="h-screen pb-20 max-h-[700px] sm:max-h-[900px] md:max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">
 
-        <div class="grid grid-cols-2 h-full">
-            <div class="gap-8 flex flex-col justify-end">
-                <div>
+        <div class="grid md:grid-cols-2 h-full px-6">
+            <div class="gap-8 md:flex flex-col justify-end">
                     <img
                         src="/img/logo-metalico.webp"
                         alt="Logo Metalico"
-                        class="w-58 mb-4"
+                        class="w-20 sm:24 md:w-32 lg:w-58 mb-4 mt-0"
                     />
-                </div>
-                <div class="text-primary font-semibold font-secondary mb-24 mt-40">
-                    <h1 class="text-6xl mb-8">
+                <div class="text-primary font-semibold font-secondary sm:mb-24 mt-8">
+                    <h1 class="text-3xl md:text-6xl sm:mb-8">
                         Dr. José Benjamín<br /> Pérez Matos
                     </h1>
                     <h6 class="font-primary font-light uppercase text-white">Lider Fundador</h6>
                 </div>
             </div>
-            <div class="flex flex-col justify-end items-end gap-8">
+            <div class="order-first md:order-last flex flex-col md:justify-end items-end gap-8 ">
                 <div
-                    class="w-1/2 font-primary font-medium text-2xl text-primary gap-8 flex flex-col justify-end mb-24"
+                    class="md:w-1/2 font-primary font-medium text-2xl text-primary gap-8 flex flex-col justify-end mb-24"
                 >
-                    <h2 class="text-[#EAE6D2]">
+                    <h2 class="text-[#EAE6D2] text-lg py-8">
                         “El sueño de mi vida es ver cumplida la visión de los
                         profetas: un mundo de justicia y paz para el bien de
                         Israel y de toda la humanidad.”
                     </h2>
-                    <div class="w-16 self-end mt-64">
+                    <div class="w-16 self-end md:mt-64">
                         <img
                             src="/img/white-dove.webp"
                             alt="White Dove"