From 0c25a191c6ca8bf0015def22c262d41deeded3f2 Mon Sep 17 00:00:00 2001
From: Giang Nguyen <giang.nguyentruong@optimizely.com>
Date: Fri, 21 Nov 2025 13:45:50 +0700
Subject: [PATCH 1/2] Add width height to image of aboutus component

Bug: CMS-47074
---
 samples/nextjs-template/src/components/AboutUs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/samples/nextjs-template/src/components/AboutUs.tsx b/samples/nextjs-template/src/components/AboutUs.tsx
index 650cc21..a83184c 100644
--- a/samples/nextjs-template/src/components/AboutUs.tsx
+++ b/samples/nextjs-template/src/components/AboutUs.tsx
@@ -38,7 +38,7 @@ export default function AboutUs({ opti }: AboutUsProps) {
     <section className="about-us">
       {opti?.image?.url?.default && (
         <div className="about-us-image">
-          <Image src={src(opti.image.url.default)} alt="" fill={true}/>
+          <Image src={src(opti.image.url.default)} alt="" width={500} height={500}/>
         </div>
       )}
       <h2>{opti.heading}</h2>

From e44869c906e9a89a03d14695c8e4565b0067f3af Mon Sep 17 00:00:00 2001
From: Giang Nguyen <giang.nguyentruong@optimizely.com>
Date: Mon, 24 Nov 2025 09:43:51 +0700
Subject: [PATCH 2/2] Fix PR comment: Add css to style for the size of image

Bug: CMS-47074
---
 samples/nextjs-template/src/app/globals.css        | 10 ++++++++++
 samples/nextjs-template/src/components/AboutUs.tsx |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/samples/nextjs-template/src/app/globals.css b/samples/nextjs-template/src/app/globals.css
index f5fd584..049fa29 100644
--- a/samples/nextjs-template/src/app/globals.css
+++ b/samples/nextjs-template/src/app/globals.css
@@ -411,6 +411,16 @@ a:hover span.animate {
   background-image: linear-gradient(180deg, #10141d 55.03%, #191e28 100%);
 }
 
+.about-us .about-us-image {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+}
+
+.about-us .about-us-image img {
+  object-fit: cover;
+}
+
 .blog-card {
   color: #333;
   cursor: pointer;
diff --git a/samples/nextjs-template/src/components/AboutUs.tsx b/samples/nextjs-template/src/components/AboutUs.tsx
index a83184c..650cc21 100644
--- a/samples/nextjs-template/src/components/AboutUs.tsx
+++ b/samples/nextjs-template/src/components/AboutUs.tsx
@@ -38,7 +38,7 @@ export default function AboutUs({ opti }: AboutUsProps) {
     <section className="about-us">
       {opti?.image?.url?.default && (
         <div className="about-us-image">
-          <Image src={src(opti.image.url.default)} alt="" width={500} height={500}/>
+          <Image src={src(opti.image.url.default)} alt="" fill={true}/>
         </div>
       )}
       <h2>{opti.heading}</h2>