From 95432d9059cc05afc1a97033e42d7a4322c27a54 Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Tue, 3 Feb 2026 16:56:03 -0600
Subject: [PATCH] feat: add rounded option to hero component and use it for
 about page

---
 src/components/ui/sections/HeroSection.astro | 5 ++++-
 src/pages/about.astro                        | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/sections/HeroSection.astro b/src/components/ui/sections/HeroSection.astro
index 844352b..e07d4d4 100644
--- a/src/components/ui/sections/HeroSection.astro
+++ b/src/components/ui/sections/HeroSection.astro
@@ -15,7 +15,10 @@ interface Props {
   secondaryBtnURL?: string;
   src?: any;
   alt?: string;
+  rounded?: boolean;
 }
+
+const roundedClasses = Astro.props.rounded ? "rounded-xl" : null;
 ---
 
 <section
@@ -48,7 +51,7 @@ interface Props {
           <Image
             src={src}
             alt={alt}
-            class="h-full w-[420px] scale-100 object-cover object-center"
+            class={`h-full w-[420px] scale-100 object-cover object-center ${roundedClasses}`}
             draggable="false"
             loading="eager"
             format="webp"
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 24d356c..52f035f 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -37,6 +37,7 @@ const global = await directus.request(readSingleton('site_global'));
     subTitle={global.about}
     src={portraitImg}
     alt={global.portrait_alt}
+    rounded={true}
   />
 
   <section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">