feat: logo cloud

apps/studio/public/assets/css/preview-tw.css

@@ -1414,6 +1414,10 @@ video {
   -webkit-line-clamp: 3;
 }
 
+.\!block {
+  display: block !important;
+}
+
 .block {
   display: block;
 }
@@ -1686,6 +1690,10 @@ video {
   max-width: 10rem;
 }
 
+.max-w-52 {
+  max-width: 13rem;
+}
+
 .max-w-5xl {
   max-width: 64rem;
 }
@@ -3129,6 +3137,11 @@ video {
   color: rgb(26 86 229 / var(--tw-text-opacity));
 }
 
+.text-link-hover {
+  --tw-text-opacity: 1;
+  color: rgb(21 71 190 / var(--tw-text-opacity));
+}
+
 .text-site-secondary {
   --tw-text-opacity: 1;
   color: rgb(78 69 65 / var(--tw-text-opacity));
@@ -5466,6 +5479,12 @@ video {
   margin-top: 2.25rem;
 }
 
+.\[\&\:not\(\:first-child\)\]\:first-of-type\:mt-7:first-of-type:not(
+    :first-child
+  ) {
+  margin-top: 1.75rem;
+}
+
 .\[\&\:not\(\:last-child\)\]\:mb-0:not(:last-child) {
   margin-bottom: 0px;
 }

packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { LogoCloud } from "./LogoCloud"
+
+const meta: Meta<typeof LogoCloud> = {
+  title: "Next/Components/Logo Cloud",
+  component: LogoCloud,
+  argTypes: {},
+  parameters: {
+    themes: {
+      themeOverride: "Isomer Next",
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof LogoCloud>
+
+const IMAGE = { src: "https://via.placeholder.com/150", alt: "placeholder" }
+const HORIZONTAL_IMAGE = {
+  src: "https://via.placeholder.com/1000x100",
+  alt: "placeholder",
+}
+const VERTICAL_IMAGE = {
+  src: "https://via.placeholder.com/100x1000",
+  alt: "placeholder",
+}
+
+// Default scenario
+export const Default: Story = {
+  args: {
+    images: [IMAGE],
+  },
+}
+
+export const ManyImages: Story = {
+  args: {
+    images: Array(10).fill(IMAGE),
+  },
+}
+
+export const Agency: Story = {
+  args: {
+    images: [
+      {
+        alt: "Some image",
+        src: "https://www.ncss.gov.sg/images/default-source/asset/fwdsg_logo.png?sfvrsn=91b23ea8_1",
+      },
+      {
+        alt: "Some image",
+        src: "https://www.ncss.gov.sg/images/default-source/asset/togsgcares_logo.png?sfvrsn=d499b7ea_2",
+      },
+      {
+        alt: "Some image",
+        src: "https://www.ncss.gov.sg/images/default-source/asset/celebrating-volunteers-logo.png?sfvrsn=44b85185_2 ",
+      },
+    ],
+  },
+}
+
+export const HugeHorizontalLogo: Story = {
+  args: {
+    images: [...Array(4).fill(IMAGE), HORIZONTAL_IMAGE],
+  },
+}
+
+export const HugeVerticalLogo: Story = {
+  args: {
+    images: [...Array(4).fill(IMAGE), VERTICAL_IMAGE],
+  },
+}

packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.tsx

@@ -0,0 +1,45 @@
+import type { IsomerSiteProps } from "~/types"
+import { isExternalUrl } from "~/utils"
+import { ImageClient } from "../Image"
+
+interface Image {
+  src: string
+  alt: string
+}
+interface LogoCloudProps extends Pick<IsomerSiteProps, "assetsBaseUrl"> {
+  images: Image[]
+  title?: string
+}
+export const LogoCloud = ({
+  images: baseImages,
+  title,
+  assetsBaseUrl,
+}: LogoCloudProps) => {
+  const images = baseImages.map(({ src, alt }) => {
+    const transformedSrc =
+      isExternalUrl(src) || (assetsBaseUrl === undefined && !!src)
+        ? src
+        : `${assetsBaseUrl}${src}`
+
+    return { src: transformedSrc, alt }
+  })
+  return (
+    <div className="px-10 py-12">
+      <div className="flex flex-col gap-4">
+        <p className="prose-headline-base-medium self-center text-base-content-light">
+          {title ?? "With support from these agencies"}
+        </p>
+        <div className="flex flex-wrap justify-center">
+          {images.map((props) => (
+            <ImageClient
+              {...props}
+              width="100%"
+              className="inset-0 w-fit max-w-52 object-contain p-2"
+              assetsBaseUrl={assetsBaseUrl}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

packages/components/src/templates/next/components/complex/LogoCloud/index.ts

@@ -0,0 +1 @@
+export * from "./LogoCloud"

packages/components/src/utils/isExternalUrl.ts

@@ -1,5 +1,5 @@
 // Determine if the provided URL is an external link
-export const isExternalUrl = (url?: string) => {
+export const isExternalUrl = (url?: string): boolean => {
   return (
     !!url &&
     !url.startsWith("/") &&