feat: add rounded option to hero component and use it for about page

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"

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">