slot

src/components/AboutUs.tsx

@@ -1,4 +1,5 @@
 import type { StaticImageSlot } from "@/lib/types";
+import { toCssAspectRatio } from "@/lib/format";
 import { ShieldIcon, TagIcon, TruckIcon } from "./icons";
 
 const points = [
@@ -21,7 +22,8 @@ const points = [
 
 export default function AboutUs({ slot }: { slot?: StaticImageSlot }) {
   const img = slot?.images[0];
-  const aspectStyle = slot?.aspectRatio ? { aspectRatio: slot.aspectRatio } : undefined;
+  const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
+  const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;
   const src = img?.url ?? "/images/about/about.svg";
 
   return (

src/components/FullBanner.tsx

@@ -1,8 +1,10 @@
 import type { StaticImageSlot } from "@/lib/types";
+import { toCssAspectRatio } from "@/lib/format";
 
 export default function FullBanner({ slot }: { slot?: StaticImageSlot }) {
   const img = slot?.images[0];
-  const aspectStyle = slot?.aspectRatio ? { aspectRatio: slot.aspectRatio } : undefined;
+  const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
+  const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;
 
   const src = img?.url ?? "/images/banners/full-banner.svg";
   const href = img?.linkUrl ?? "#";

src/components/HeroSlider.tsx

@@ -5,6 +5,7 @@ import { Autoplay, Pagination } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/pagination";
 import type { StaticImageSlot } from "@/lib/types";
+import { toCssAspectRatio } from "@/lib/format";
 
 const fallbackSlides = [
   "/images/hero/slide-1.svg",
@@ -14,7 +15,8 @@ const fallbackSlides = [
 
 export default function HeroSlider({ slot }: { slot?: StaticImageSlot }) {
   const slides = slot?.images ?? [];
-  const aspectStyle = slot?.aspectRatio ? { aspectRatio: slot.aspectRatio } : undefined;
+  const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
+  const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;
 
   return (
     <section className="boxed pt-4 md:pt-6">

src/components/TwoBanners.tsx

@@ -1,4 +1,5 @@
 import type { StaticImageSlot } from "@/lib/types";
+import { toCssAspectRatio } from "@/lib/format";
 
 const fallbackBanners = [
   { image: "/images/banners/banner-1.svg", href: "#" },
@@ -7,7 +8,8 @@ const fallbackBanners = [
 
 export default function TwoBanners({ slot }: { slot?: StaticImageSlot }) {
   const images = slot?.images ?? [];
-  const aspectStyle = slot?.aspectRatio ? { aspectRatio: slot.aspectRatio } : undefined;
+  const cssAspectRatio = toCssAspectRatio(slot?.aspectRatio);
+  const aspectStyle = cssAspectRatio ? { aspectRatio: cssAspectRatio } : undefined;
 
   const banners =
     images.length > 0