From 8a3f69a5505a95e35031b55090559cac6322bead Mon Sep 17 00:00:00 2001
From: danji90 <daniel.marsh-hunn@geops.com>
Date: Thu, 17 Oct 2024 08:55:57 +0200
Subject: [PATCH] fix(hero image): add prop to maintain aspect ratio of image

---
 components/PageHeader.js      | 13 +++++++++++--
 components/SolutionArticle.js |  1 +
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/PageHeader.js b/components/PageHeader.js
index f6f78687..530d7817 100644
--- a/components/PageHeader.js
+++ b/components/PageHeader.js
@@ -1,6 +1,13 @@
 import Image from "next/image";
 
-export default function PageHeader({ src, srcMobile, title, titleDown, text }) {
+export default function PageHeader({
+  src,
+  srcMobile,
+  title,
+  titleDown,
+  text,
+  maintainAspectRatio,
+}) {
   return (
     <>
       <div
@@ -11,7 +18,9 @@ export default function PageHeader({ src, srcMobile, title, titleDown, text }) {
           "h-[calc(100vh-8rem)] lg:h-[50vh]"
         }`}
       >
-        <div className={`relative ${titleDown ? "h-[50vh]" : "h-full"}`}>
+        <div
+          className={`relative ${titleDown ? "h-[max(75vw,300px)] sm:h-[min(50vw,600px)]" : "h-full"} ${maintainAspectRatio ? "w-[min(100%,1800px)] sm:h-[min(50vw,900px)] m-auto" : ""}`}
+        >
           {src && (
             <Image
               alt={`${title} Cover`}
diff --git a/components/SolutionArticle.js b/components/SolutionArticle.js
index 06baddbc..6e6a378a 100644
--- a/components/SolutionArticle.js
+++ b/components/SolutionArticle.js
@@ -28,6 +28,7 @@ export default function Solution(props) {
         srcMobile={solution.pageCoverMobile}
         title={solution.title}
         titleDown
+        maintainAspectRatio
       />
       <Article body={solution.body} imageSizes={solution.imageSizes} />
       <ContactPerson