From 90c33e662b18b19f5ecb8a4c7d86fd6a57bf6888 Mon Sep 17 00:00:00 2001
From: Eduard Itrich <eduard.itrich@porsche.de>
Date: Mon, 18 Dec 2023 10:47:35 +0100
Subject: [PATCH] Center hero image on blog posts

Signed-off-by: Eduard Itrich <eduard.itrich@porsche.de>
on-behalf-of: @porscheofficial <open_source_office@porsche.de>
---
 content/blog/porsche-digital-campus.mdx                     | 2 +-
 src/app/blog/[...slug]/page.tsx                             | 3 ++-
 src/components/03_organisms/heroSection/HeroSection.tsx     | 3 +++
 .../03_organisms/heroSection/heroSection.module.scss        | 6 ++++--
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/content/blog/porsche-digital-campus.mdx b/content/blog/porsche-digital-campus.mdx
index 80ec7b4..5458ecd 100644
--- a/content/blog/porsche-digital-campus.mdx
+++ b/content/blog/porsche-digital-campus.mdx
@@ -8,7 +8,7 @@ author:
   description: The Porsche Digital Campus is an innovative initiative with the goal of bringing together research and real-world application in the fields of AI, machine learning, and data science.
   image: https://uploads-ssl.webflow.com/6419a4c2c9609e21b02a47e8/6454e539d4ea54c08e42aedb_Frame%2010683.png
   slug: https://campus.porsche.digital/
-readTime: 5min
+readTime: 3min
 ---
 
 <ImageText imageSrc="/assets/blog/pdc/team.jpg" imageAlt="Porsche Digital Campus" theme="light"
diff --git a/src/app/blog/[...slug]/page.tsx b/src/app/blog/[...slug]/page.tsx
index 137823e..7104e7d 100644
--- a/src/app/blog/[...slug]/page.tsx
+++ b/src/app/blog/[...slug]/page.tsx
@@ -82,7 +82,8 @@ const BlogPage: React.FC<PageProps> = ({ params }: PageProps) => {
         description={description}
         subtitle="FOSS@Porsche"
         imageSrc={blog.image}
-        imageAlt=""
+        imageAlt="Hero Image"
+        position="center center"
       />
 
       <Section spacing="none">
diff --git a/src/components/03_organisms/heroSection/HeroSection.tsx b/src/components/03_organisms/heroSection/HeroSection.tsx
index 3e21b0a..326d22f 100644
--- a/src/components/03_organisms/heroSection/HeroSection.tsx
+++ b/src/components/03_organisms/heroSection/HeroSection.tsx
@@ -13,6 +13,7 @@ interface HeroSectionProps {
   description?: string;
   imageSrc: string | StaticImageData;
   imageAlt: string;
+  position?: string;
 }
 
 export const HeroSection: React.FC<HeroSectionProps> = ({
@@ -21,12 +22,14 @@ export const HeroSection: React.FC<HeroSectionProps> = ({
   description,
   imageSrc,
   imageAlt,
+  position = "right center",
 }) => {
   return (
     <div className={s["hero-container"]}>
       <div className={s["background-image-container"]}>
         <ExportedImage
           className={s["hero-image"]}
+          style={{ objectPosition: position }}
           src={imageSrc}
           alt={imageAlt}
           fill
diff --git a/src/components/03_organisms/heroSection/heroSection.module.scss b/src/components/03_organisms/heroSection/heroSection.module.scss
index 8999837..d7a70bb 100644
--- a/src/components/03_organisms/heroSection/heroSection.module.scss
+++ b/src/components/03_organisms/heroSection/heroSection.module.scss
@@ -6,12 +6,14 @@
 
   .background-image-container {
     grid-row: 1;
-    height: 50rem;
+    @include pds-media-query-min("m") {
+      height: 50rem;
+    }
+    height: 40rem;
     position: relative;
 
     .hero-image {
       object-fit: cover;
-      object-position: right center;
     }
     .image-overlay {
       background: linear-gradient(