add cards component

src/components/AspectRatio.tsx

@@ -38,7 +38,9 @@ export const EmbedAspectRatio = styled.div<{ $aspectRatio: string }>(
 )
 
 export const ImageAspectRatio = styled(EmbedAspectRatio)<{ $url: string }>(
-  ({ $url }) => ({
+  ({ theme, $url }) => ({
+    borderRadius: theme.borderRadiuses.large,
+    border: theme.borders['fill-three'],
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     backgroundImage: `url(${$url})`,

src/components/custom-page/BlogCards.tsx

@@ -1,5 +1,6 @@
 import { type BlogCardsComponentFragment } from '@src/generated/graphqlDirectus'
 
-export function BlogCards({ spacing }: BlogCardsComponentFragment) {
-  return <div>BlogCards</div>
+export function BlogCards({ spacing: _spacing }: BlogCardsComponentFragment) {
+  // TODO
+  return null
 }

src/components/custom-page/CallToAction.tsx

@@ -19,7 +19,7 @@ export function CallToAction({
     <section
       className={cn(
         getSpacingClassName(spacing),
-        'm-auto flex w-1/2 flex-col items-center gap-medium text-center'
+        'mx-auto flex w-1/2 flex-col items-center gap-medium text-center'
       )}
     >
       <Hero2>{heading}</Hero2>

src/components/custom-page/Cards.tsx

@@ -1,5 +1,74 @@
-import { type CardsComponentFragment } from '@src/generated/graphqlDirectus'
+import { Card } from '@pluralsh/design-system'
 
-export function Cards({ spacing }: CardsComponentFragment) {
-  return <div>Cards</div>
+import styled from 'styled-components'
+
+import { getImageUrl } from '@src/consts/routes'
+import {
+  type CardFragment,
+  type CardsComponentFragment,
+} from '@src/generated/graphqlDirectus'
+import { cn } from '@src/utils/cn'
+
+import { ImageAspectRatio } from '../AspectRatio'
+import { Body2, OverlineLabel } from '../Typography'
+
+import { getSpacingClassName } from './common'
+
+export function Cards({ spacing, cards }: CardsComponentFragment) {
+  return (
+    <section
+      className={cn(
+        getSpacingClassName(spacing),
+        'flex gap-xxlarge px-xxxlarge'
+      )}
+    >
+      {cards?.map((c) => c?.card_id && <CardComponent {...c?.card_id} />)}
+    </section>
+  )
 }
+
+export function CardComponent({
+  image,
+  heading,
+  body_text: bodyText,
+  url,
+}: CardFragment) {
+  return (
+    <CardComponentWrapperSC
+      {...(url
+        ? {
+            forwardedAs: 'a',
+            href: url,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            $clickable: true,
+          }
+        : {})}
+    >
+      <ImageAspectRatio
+        $aspectRatio="16/10"
+        $url={getImageUrl(image) ?? ''}
+      />
+      <OverlineLabel>{heading}</OverlineLabel>
+      <Body2 $color="text">{bodyText}</Body2>
+    </CardComponentWrapperSC>
+  )
+}
+
+const CardComponentWrapperSC = styled(Card)<{ $clickable: boolean }>(
+  ({ theme, $clickable }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing.xlarge,
+    gap: theme.spacing.medium,
+    transition: 'border 0.16s ease-in-out',
+    ...($clickable
+      ? {
+          cursor: 'pointer',
+          '&:hover': {
+            border: theme.borders.selected,
+          },
+        }
+      : {}),
+  })
+)

src/components/custom-page/SectionHeader.tsx

@@ -15,7 +15,7 @@ export function SectionHeader({
     <section
       className={cn(
         getSpacingClassName(spacing),
-        'm-auto flex w-1/2 flex-col items-center gap-medium text-center'
+        'mx-auto flex w-1/2 flex-col items-center gap-medium text-center'
       )}
     >
       {overline && <OverlineLabel>{overline}</OverlineLabel>}