From 89e07308e2220c3492611450a9c55ebafa69a8ec Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Thu, 6 Nov 2025 13:09:22 +0100
Subject: [PATCH] Refactor styles in Hero2.astro and index.astro for improved
 responsiveness and layout

- Adjusted padding and margin for elements in Hero2.astro to enhance layout consistency.
- Updated font sizes and margins for .neon-title and .neon-subtitle in index.astro to improve readability on various screen sizes.
- Introduced new media queries for better responsiveness across laptop, tablet, and mobile devices, ensuring a more adaptable design.
---
 src/components/widgets/Hero2.astro |  8 ++--
 src/pages/[lang]/index.astro       | 66 ++++++++++++++++++++++++++----
 2 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/src/components/widgets/Hero2.astro b/src/components/widgets/Hero2.astro
index 6678a48..06fe9f4 100644
--- a/src/components/widgets/Hero2.astro
+++ b/src/components/widgets/Hero2.astro
@@ -29,7 +29,7 @@ const {
   <div class="relative w-full px-0">
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
     <div class="py-12 md:py-20 lg:py-0 lg:flex lg:items-center lg:h-screen lg:gap-8">
-      <div class="basis-1/2 text-center lg:text-left pb-10 md:pb-16 mx-auto pl-4 md:pl-8 lg:pl-12">
+      <div class="basis-1/2 text-center lg:text-left pb-10 md:pb-16 lg:pb-0 mx-auto pl-4 md:pl-8 lg:pl-12">
         {
           tagline && (
             <p
@@ -74,15 +74,15 @@ const {
         </div>
         {content && <Fragment set:html={content} />}
       </div>
-      <div class="basis-1/2">
+      <div class="basis-1/2 hidden lg:flex items-center justify-center px-4 md:px-8 lg:px-12">
         {
           image && (
-            <div class="relative m-auto max-w-5xl z-10">
+            <div class="relative w-full max-w-2xl z-10">
               {typeof image === 'string' ? (
                 <Fragment set:html={image} />
               ) : (
                 <Image
-                  class="mx-auto rounded-md w-full"
+                  class="rounded-md w-full"
                   widths={[400, 768, 1024, 2040]}
                   sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
                   loading="eager"
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 8b72845..942f3d9 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -216,7 +216,7 @@ const metadata = {
 
   /* Refined text effects */
   .neon-title {
-    font-size: clamp(3rem, 8vw, 6rem);
+    font-size: clamp(2.5rem, 6vw, 4rem);
     font-weight: 900;
     background: linear-gradient(135deg, 
       #ff006e 0%, 
@@ -231,16 +231,16 @@ const metadata = {
     animation: neonPulse 4s ease-in-out infinite alternate;
     letter-spacing: -0.02em;
     line-height: 1.1;
-    margin-bottom: 2rem;
+    margin-bottom: 1.5rem;
     padding-left: 2rem;
   }
 
   .neon-subtitle {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 600;
     color: white;
     text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
     line-height: 1.4;
     max-width: 800px;
     padding-left: 2rem;
@@ -458,22 +458,68 @@ const metadata = {
 
   /* Hero full screen */
   .hero-fullscreen {
-    min-height: 100vh;
+    min-height: 85vh;
     display: flex;
     align-items: center;
     position: relative;
   }
 
-  /* Responsive */
+  /* Responsive - Laptop screens (13-15 inch) */
+  @media (max-width: 1440px) {
+    .neon-title {
+      font-size: clamp(2rem, 5vw, 3.5rem);
+      padding-left: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    
+    .neon-subtitle {
+      font-size: 1.1rem;
+      padding-left: 1.5rem;
+      margin-bottom: 1.5rem;
+    }
+    
+    .hero-fullscreen {
+      min-height: 75vh;
+    }
+
+    .cta-explosive,
+    .cta-secondary-explosive {
+      padding: 1rem 2.5rem;
+      font-size: 1.1rem;
+      margin-left: 1.5rem;
+    }
+  }
+
+  /* Responsive - Tablet */
+  @media (max-width: 1024px) {
+    .neon-title {
+      font-size: clamp(1.75rem, 5vw, 3rem);
+      padding-left: 1rem;
+    }
+    
+    .neon-subtitle {
+      font-size: 1rem;
+      padding-left: 1rem;
+    }
+
+    .cta-explosive,
+    .cta-secondary-explosive {
+      padding: 0.9rem 2rem;
+      font-size: 1rem;
+      margin-left: 1rem;
+    }
+  }
+
+  /* Responsive - Mobile */
   @media (max-width: 768px) {
     .neon-title {
-      font-size: clamp(2rem, 8vw, 4rem);
+      font-size: clamp(1.5rem, 7vw, 2.5rem);
       padding-left: 0;
       padding-right: 0;
     }
     
     .neon-subtitle {
-      font-size: 1.2rem;
+      font-size: 1rem;
       padding-left: 0;
       padding-right: 0;
     }
@@ -493,6 +539,10 @@ const metadata = {
     .cta-subtitle {
       font-size: 1.1rem !important;
     }
+
+    .hero-fullscreen {
+      min-height: auto;
+    }
   }
 </style>