From 61074be5c3f5d8cc0c167e5051e628bbfbab9a74 Mon Sep 17 00:00:00 2001
From: becarta <github.devotee752@passmail.net>
Date: Sun, 18 May 2025 22:04:22 +0200
Subject: [PATCH] Refactor Header and LanguageSelector components for improved
 layout and responsiveness

---
 src/components/Header.astro           | 24 +++++++++++++++---------
 src/components/LanguageSelector.astro |  6 +++---
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 751953f..464a6fd 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -18,21 +18,27 @@ const phone = t['phone'];
 ---
 <header class="sticky top-0 z-50 bg-gradient-to-r from-black-deep to-black-medium backdrop-blur-md border-b border-silver-dark/30">
   <div class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3">
-    <a href={`/${currentLang}/`} class="flex items-center gap-3 group">
-      <div class="relative w-14 h-14 flex items-center justify-center shadow-lg">
-        <img src="/Logo.png" alt="JPM Security Logo" class="h-12 w-12 object-contain transition-all group-hover:scale-110" />
+    <!-- Logo and JPM text -->
+    <a href={`/${currentLang}/`} class="flex items-center gap-2 group">
+      <div class="relative w-10 h-10 md:w-14 md:h-14 flex items-center justify-center shadow-lg">
+        <img src="/Logo.png" alt="JPM Security Logo" class="h-8 w-8 md:h-12 md:w-12 object-contain transition-all group-hover:scale-110" />
       </div>
-      <span class="text-xl font-bold tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light">JPM</span>
+      <span class="text-lg md:text-xl font-bold tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light">JPM</span>
     </a>
-    <div class="flex items-center gap-6">
+    
+    <!-- Right side content -->
+    <div class="flex items-center gap-3 md:gap-6">
+      <!-- Language selector -->
       <LanguageSelector />
+      
+      <!-- Security & Services and phone -->
       <div class="flex flex-col items-end text-right">
-        <span class="text-xl font-bold tracking-wide text-silver-light">Security & Services</span>
-        <div class="flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-gold" viewBox="0 0 20 20" fill="currentColor">
+        <span class="text-base md:text-xl font-bold tracking-wide text-silver-light hidden sm:block">Security & Services</span>
+        <div class="flex items-center gap-1 md:gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 md:h-4 md:w-4 text-accent-gold" viewBox="0 0 20 20" fill="currentColor">
             <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
           </svg>
-          <span class="text-silver-light text-sm font-medium">{phone}</span>
+          <span class="text-silver-light text-xs sm:text-sm font-medium">{phone}</span>
         </div>
       </div>
     </div>
diff --git a/src/components/LanguageSelector.astro b/src/components/LanguageSelector.astro
index aac5303..e2f3d30 100644
--- a/src/components/LanguageSelector.astro
+++ b/src/components/LanguageSelector.astro
@@ -5,7 +5,7 @@ import { languages } from '../i18n/ui';
 const { pathname } = Astro.url;
 
 // Function to get the current language and generate the URL for a different language
-function getTargetPath(targetLang) {
+function getTargetPath(targetLang: string): string {
   // Check if the current path starts with a language code, if so, replace it
   const langPathRegex = /^\/(en|nl)\//;
   const matches = pathname.match(langPathRegex);
@@ -20,11 +20,11 @@ function getTargetPath(targetLang) {
 }
 ---
 
-<div class="flex items-center space-x-2">
+<div class="flex items-center">
   {Object.entries(languages).map(([lang, label]) => (
     <a
       href={getTargetPath(lang)}
-      class={`text-sm px-2 py-1 rounded ${pathname.includes(`/${lang}/`) || (pathname === '/' && lang === 'en') 
+      class={`text-xs md:text-sm px-1.5 md:px-2 py-0.5 md:py-1 rounded ${pathname.includes(`/${lang}/`) || (pathname === '/' && lang === 'en') 
         ? 'bg-accent-blue/20 text-silver-metallic font-medium' 
         : 'text-silver-light/70 hover:text-silver-metallic'}`}
     >