feat: standalone card section

Author: mvriu5

src/blocks/StandaloneBlock.ts

@@ -0,0 +1,141 @@
+import type { Block } from "payload"
+
+export const StandaloneBlock: Block = {
+    slug: "standaloneCard",
+    labels: {
+        singular: "Standalone Card",
+        plural: "Standalone Card Blocks",
+    },
+    fields: [
+        {
+            name: "title",
+            type: "text",
+            required: true,
+            localized: true,
+        },
+        {
+            name: "description",
+            type: "textarea",
+            required: false,
+            localized: true,
+        },
+        {
+            name: "showImageBorder",
+            label: "Show Image Border",
+            type: "checkbox",
+            defaultValue: true,
+        },
+        {
+            name: "sectionLayout",
+            label: "Section Layout",
+            type: "select",
+            required: true,
+            defaultValue: "imageRight",
+            options: [
+                {
+                    label: "Image right",
+                    value: "imageRight",
+                },
+                {
+                    label: "Image left",
+                    value: "imageLeft",
+                },
+                {
+                    label: "Image fullscreen",
+                    value: "imageFullscreen",
+                },
+            ],
+        },
+        {
+            name: "gradient",
+            label: "Gradient",
+            type: "select",
+            required: false,
+            defaultValue: "blue",
+            options: [
+                {
+                    label: "Blue",
+                    value: "blue",
+                },
+                {
+                    label: "Yellow",
+                    value: "yellow",
+                },
+                {
+                    label: "Pink",
+                    value: "pink",
+                },
+                {
+                    label: "Aqua",
+                    value: "aqua",
+                },
+                {
+                    label: "Brand",
+                    value: "brand",
+                },
+                {
+                    label: "Neutral",
+                    value: "neutral",
+                },
+            ],
+        },
+        {
+            name: "gradientDirection",
+            label: "Gradient Direction",
+            type: "select",
+            required: false,
+            defaultValue: "topLeft",
+            options: [
+                {
+                    label: "Top left",
+                    value: "topLeft",
+                },
+                {
+                    label: "Top right",
+                    value: "topRight",
+                },
+                {
+                    label: "Bottom left",
+                    value: "bottomLeft",
+                },
+                {
+                    label: "Bottom right",
+                    value: "bottomRight",
+                },
+            ],
+        },
+        {
+            name: "bulletPoints",
+            label: "Bullet Points",
+            type: "text",
+            required: false,
+            hasMany: true,
+            localized: true,
+        },
+        {
+            name: "image",
+            label: "Image",
+            type: "upload",
+            relationTo: "media",
+            required: false,
+        },
+        {
+            name: "link",
+            label: "Link",
+            type: "group",
+            fields: [
+                {
+                    name: "label",
+                    type: "text",
+                    required: false,
+                    localized: true,
+                },
+                {
+                    name: "url",
+                    type: "text",
+                    required: false,
+                },
+            ],
+        },
+    ],
+}

src/collections/pages.ts

@@ -15,6 +15,7 @@ import { OffsetCardsBlock } from "../blocks/OffsetCardsBlock"
 import { RoadmapBlock } from "../blocks/RoadmapBlock"
 import { ScrollCardBlock } from "../blocks/ScrollCardBlock"
 import type { CollectionConfig } from "payload"
+import { StandaloneBlock } from "@/blocks/StandaloneBlock"
 
 export const Pages: CollectionConfig = {
     slug: "pages",
@@ -79,6 +80,7 @@ export const Pages: CollectionConfig = {
                 CardRowBlock,
                 RoadmapBlock,
                 ScrollCardBlock,
+                StandaloneBlock,
             ],
             required: false,
             localized: true,

src/components/PageBlockRenderer.tsx

@@ -12,6 +12,7 @@ import { SwipeCardSection } from "@/components/sections/SwipeCardSection"
 import type { AppLocale } from "@/lib/i18n"
 import type { Page } from "@/payload-types"
 import React, { type ReactNode } from "react"
+import { StandaloneCardSection } from "./sections/StandaloneCardSection"
 
 type PageBlock = NonNullable<Page["layout"]>[number]
 
@@ -37,6 +38,7 @@ const pageBlockRenderers: Partial<Record<PageBlock["blockType"], BlockRenderer>>
     roadmap: (block) => <RoadmapSection content={block as Extract<PageBlock, { blockType: "roadmap" }>} />,
     scrollCards: (block) => <ScrollCardSection content={block as Extract<PageBlock, { blockType: "scrollCards" }>} />,
     swipeCards: (block) => <SwipeCardSection content={block as Extract<PageBlock, { blockType: "swipeCards" }>} />,
+    standaloneCard: (block) => <StandaloneCardSection content={block as Extract<PageBlock, { blockType: "standaloneCard" }>} />,
 }
 
 function renderPageBlock(block: PageBlock, options: PageBlockRenderOptions) {

src/components/sections/StandaloneCardSection.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { LinkButton } from "@/components/ui/LinkButton"
+import { Section } from "@/components/ui/Section"
+import { getMediaUrl } from "@/lib/media"
+import { cn } from "@/lib/utils"
+import type { Media } from "@/payload-types"
+import Image from "next/image"
+import { Card } from "../ui/Card"
+
+interface StandaloneCardSectionProps {
+    content?: any | null
+}
+
+function getImage(image: number | Media | null | undefined) {
+    return typeof image === "object" ? image : null
+}
+
+export function StandaloneCardSection({ content }: StandaloneCardSectionProps) {
+    if (!content || !content.title) return null
+
+    const image = getImage(content.image)
+    const imageUrl = getMediaUrl(image?.url)
+    const itemSettings = content as {
+        sectionLayout?: "imageRight" | "imageLeft" | "imageFullscreen" | null
+        showImageBorder?: boolean | null
+        gradient?: string | null
+        gradientDirection?: string | null
+    }
+    const isImageLeft = itemSettings.sectionLayout === "imageLeft"
+    const isFullscreen = itemSettings.sectionLayout === "imageFullscreen"
+    const showImageBorder = itemSettings.showImageBorder ?? true
+
+    return (
+        <Section showFunnel={false} animation={{ preset: "none" }} className="h-[calc(100vh-6rem)]">
+            <Card
+                size="lg"
+                gradientDirection={itemSettings.gradientDirection as any}
+                radialGradient={itemSettings.gradient as any}
+                className={cn(isFullscreen ? "relative h-[80%] overflow-hidden bg-primary p-0" : "relative grid h-[80%] overflow-hidden bg-primary p-12 md:grid-cols-[0.95fr_1.05fr]")}
+            >
+                {isFullscreen ? (
+                    <div className={cn("relative z-10 h-full w-full overflow-hidden rounded-3xl", showImageBorder && "border border-white/10")}>
+                        {imageUrl && <Image src={imageUrl} alt={image?.alt ?? content.title} fill sizes="100vw" className="object-cover object-center" />}
+                    </div>
+                ) : (
+                    <>
+                        <div className={cn("relative z-10 flex h-full flex-col justify-center gap-8 rounded-3xl", isImageLeft && "md:order-2")}>
+                            <div className="flex flex-col gap-4">
+                                <h2 className="max-w-xl text-3xl font-semibold text-white md:text-5xl">{content.title}</h2>
+                                <p className="max-w-xl text-base leading-7 text-white/75 md:text-lg">{content.description}</p>
+                            </div>
+
+                            <div className="space-y-6">
+                                <ul className="grid gap-2 text-sm text-white/75 md:text-base">
+                                    {content.bulletPoints?.map((point: any, pointIndex: number) => (
+                                        <li key={`point-${pointIndex}`} className="flex items-start gap-3">
+                                            <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-brand" />
+                                            <span>{point}</span>
+                                        </li>
+                                    ))}
+                                </ul>
+
+                                {content.link?.label && content.link?.url && <LinkButton href={content.link.url}>{content.link.label}</LinkButton>}
+                            </div>
+                        </div>
+
+                        <div className={cn("relative z-10 aspect-video w-full self-center overflow-hidden rounded-2xl", showImageBorder && "border border-white/10", isImageLeft && "md:order-1")}>
+                            {imageUrl && <Image src={imageUrl} alt={image?.alt ?? content.title} fill sizes="(min-width: 768px) 50vw, 100vw" className="object-contain object-center" />}
+                        </div>
+                    </>
+                )}
+            </Card>
+        </Section>
+    )
+}

src/payload-types.ts

@@ -496,6 +496,23 @@ export interface Page {
             blockName?: string | null;
             blockType: 'scrollCards';
           }
+        | {
+            title: string;
+            description?: string | null;
+            showImageBorder?: boolean | null;
+            sectionLayout: 'imageRight' | 'imageLeft' | 'imageFullscreen';
+            gradient?: ('blue' | 'yellow' | 'pink' | 'aqua' | 'brand' | 'neutral') | null;
+            gradientDirection?: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight') | null;
+            bulletPoints?: string[] | null;
+            image?: (number | null) | Media;
+            link?: {
+              label?: string | null;
+              url?: string | null;
+            };
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'standaloneCard';
+          }
       )[]
     | null;
   meta?: {
@@ -1321,6 +1338,26 @@ export interface PagesSelect<T extends boolean = true> {
               id?: T;
               blockName?: T;
             };
+        standaloneCard?:
+          | T
+          | {
+              title?: T;
+              description?: T;
+              showImageBorder?: T;
+              sectionLayout?: T;
+              gradient?: T;
+              gradientDirection?: T;
+              bulletPoints?: T;
+              image?: T;
+              link?:
+                | T
+                | {
+                    label?: T;
+                    url?: T;
+                  };
+              id?: T;
+              blockName?: T;
+            };
       };
   meta?:
     | T