feat: content grid section

src/blocks/content-grid/config.ts

@@ -0,0 +1,57 @@
+import { HeadingField } from "@/fields/heading";
+import type { Block } from "payload";
+
+export const ContentGrid: Block = {
+  slug: "contentGrid",
+  interfaceName: "ContentGridBlock",
+  fields: [
+    {
+      type: "row",
+      fields: [
+        {
+          name: "variant",
+          type: "select",
+          defaultValue: "sideBySide",
+          enumName: "enum_content_grid_variant",
+          label: {
+            en: "Variant",
+            de: "Variante",
+          },
+          options: [
+            {
+              label: "Side by Side",
+              value: "sideBySide",
+            },
+          ],
+        },
+      ],
+    },
+    HeadingField(),
+    {
+      name: "content",
+      type: "richText",
+      required: true,
+      localized: true,
+    },
+    {
+      name: "cells",
+      type: "array",
+      fields: [
+        {
+          name: "heading",
+          type: "text",
+          required: true,
+          localized: true,
+        },
+        {
+          name: "description",
+          type: "textarea",
+          required: false,
+          localized: true,
+        },
+      ],
+      minRows: 1,
+      maxRows: 8,
+    },
+  ],
+};

src/blocks/content-grid/content-grid-block.tsx

@@ -0,0 +1,49 @@
+import { RichText } from "@/components/cms/rich-text";
+import { Heading, Paragraph } from "@/components/ui/typography";
+import { HeadingVariants } from "@/components/ui/typography/heading";
+import type { ContentGridBlock as ContentGridBlockProps } from "@/payload-types";
+
+type Props = ContentGridBlockProps;
+
+export const ContentGridBlock = ({
+  content,
+  cells,
+  heading,
+  headingLevel,
+  headingTag,
+}: Props) => {
+  return (
+    <div className="layout pt-xhuge">
+      <div className="col-span-full lg:col-span-4 space-y-4">
+        <Heading
+          as={headingTag}
+          level={
+            (headingLevel
+              ? (Number.parseInt(headingLevel) ?? 3)
+              : 3) as HeadingVariants["level"]
+          }
+        >
+          {heading}
+        </Heading>
+        {content && <RichText size="lg" content={content} />}
+      </div>
+      <div className="col-span-full lg:col-span-8">
+        <div className="layout">
+          {cells?.map((cell) => (
+            <div
+              key={`${cell.id}`}
+              className="col-span-full lg:col-span-6 w-full @container space-y-2"
+            >
+              {cell.heading && (
+                <Heading as="h4" level={5}>
+                  {cell.heading}
+                </Heading>
+              )}
+              {cell.description && <Paragraph>{cell.description}</Paragraph>}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

src/blocks/feature-section/feature-section-block.tsx

@@ -85,8 +85,8 @@ function VariantOne({
       {Array.isArray(links) && links.length > 0 && (
         <div className="col-span-full">
           <div className="flex flex-col lg:flex-row gap-4">
-            {links.map((link) => (
-              <CMSLink key={link.id} {...link.link} />
+            {links.map((link, i) => (
+              <CMSLink key={`${link.id}-${i}`} {...link.link} />
             ))}
           </div>
         </div>

src/blocks/render-blocks.tsx

@@ -17,6 +17,7 @@ import {
   type RelatedPostsBlock,
 } from "./related-posts/related-posts-block";
 import { FeatureSectionBlock } from "./feature-section/feature-section-block";
+import { ContentGridBlock } from "./content-grid/content-grid-block";
 
 type Block = Page["layout"][0] | RelatedPostsBlock;
 
@@ -69,10 +70,13 @@ export const RenderBlocks = ({ blocks }: RenderBlocksProps) => {
         return <LatestArticlesBlock key={`${block.id}`} {...block} />;
       }
       case "relatedPosts": {
-        return <RelatedPosts key={`${block.blockName}`} {...block} />;
+        return <RelatedPosts key={`${block.id}`} {...block} />;
       }
       case "featureSection": {
-        return <FeatureSectionBlock key={`${block.blockName}`} {...block} />;
+        return <FeatureSectionBlock key={`${block.id}`} {...block} />;
+      }
+      case "contentGrid": {
+        return <ContentGridBlock key={`${block.id}`} {...block} />;
       }
       default: {
         return null;

src/collections/pages/index.ts

@@ -21,6 +21,7 @@ import { Form } from "@/blocks/form/config";
 import { FAQBlock } from "@/blocks/faq/config";
 import { LatestArticles } from "@/blocks/latest-articles/config";
 import { FeatureSection } from "@/blocks/feature-section/config";
+import { ContentGrid } from "@/blocks/content-grid/config";
 
 export const Pages: CollectionConfig<"pages"> = {
   slug: "pages",
@@ -91,6 +92,7 @@ export const Pages: CollectionConfig<"pages"> = {
                 Divider,
                 Metrics,
                 Content,
+                ContentGrid,
                 CardGrid,
                 FeatureGrid,
                 SolutionShowcase,

src/components/cms/rich-text/index.tsx

@@ -18,6 +18,7 @@ import { formatAnchor } from "./format-anchor";
 type Props = {
   content: SerializedEditorState;
   className?: string;
+  size?: "default" | "sm" | "md" | "lg" | "xl";
 };
 
 type NodeTypes = DefaultNodeTypes;
@@ -67,16 +68,21 @@ const converters = (locale: string) => {
   return jsxConverters;
 };
 
-export const RichText = ({ content, className }: Props) => {
+export const RichText = ({ content, className, size = "xl" }: Props) => {
   const locale = useLocale();
 
+  const proseSize = {
+    default: "prose",
+    sm: "prose-sm",
+    md: "prose md:prose-md",
+    lg: "prose md:prose-md lg:prose-lg",
+    xl: "prose md:prose-md lg:prose-xl",
+  }[size];
+
   return (
     <SerializedRichText
       converters={converters(locale)}
-      className={cn(
-        "max-w-none prose md:prose-md lg:prose-xl dark:prose-invert",
-        className
-      )}
+      className={cn("max-w-none", proseSize, " dark:prose-invert", className)}
       data={content}
     />
   );

src/components/ui/typography/paragraph.tsx

@@ -5,10 +5,10 @@ import { tv, type VariantProps } from "tailwind-variants";
 import { cn } from "@/lib/utils";
 
 export const paragraphVariants = tv({
-  base: "font-normal text-base m-0",
+  base: "font-normal m-0",
   variants: {
     level: {
-      default: "",
+      default: "text-base",
       label: "font-semibold md:text-lg",
       small: "text-sm",
       large: "text-lg",