kofi-stack-template-generator 2.1.37 → 2.1.39

package/templates/marketing/payload/src/blocks/Banner/Component.tsx

@@ -0,0 +1,26 @@
+import type { BannerBlock as BannerBlockProps } from "src/payload-types"
+
+import RichText from "@/components/RichText"
+import { cn } from "@/utilities/ui"
+import type React from "react"
+
+type Props = {
+	className?: string
+} & BannerBlockProps
+
+export const BannerBlock: React.FC<Props> = ({ className, content, style }) => {
+	return (
+		<div className={cn("mx-auto my-8 w-full", className)}>
+			<div
+				className={cn("border py-3 px-6 flex items-center rounded", {
+					"border-border bg-card": style === "info",
+					"border-error bg-error/30": style === "error",
+					"border-success bg-success/30": style === "success",
+					"border-warning bg-warning/30": style === "warning",
+				})}
+			>
+				<RichText data={content} enableGutter={false} enableProse={false} />
+			</div>
+		</div>
+	)
+}

package/templates/marketing/payload/src/blocks/Banner/config.ts

@@ -0,0 +1,67 @@
+import type { Block } from "payload"
+
+import {
+	AlignFeature,
+	BlockquoteFeature,
+	ChecklistFeature,
+	EXPERIMENTAL_TableFeature,
+	FixedToolbarFeature,
+	IndentFeature,
+	InlineCodeFeature,
+	InlineToolbarFeature,
+	OrderedListFeature,
+	RelationshipFeature,
+	StrikethroughFeature,
+	SubscriptFeature,
+	SuperscriptFeature,
+	UnorderedListFeature,
+	UploadFeature,
+	lexicalEditor,
+} from "@payloadcms/richtext-lexical"
+
+export const Banner: Block = {
+	slug: "banner",
+	fields: [
+		{
+			name: "style",
+			type: "select",
+			defaultValue: "info",
+			options: [
+				{ label: "Info", value: "info" },
+				{ label: "Warning", value: "warning" },
+				{ label: "Error", value: "error" },
+				{ label: "Success", value: "success" },
+			],
+			required: true,
+		},
+		{
+			name: "content",
+			type: "richText",
+			editor: lexicalEditor({
+				features: ({ rootFeatures }) => {
+					return [
+						...rootFeatures,
+						FixedToolbarFeature(),
+						InlineToolbarFeature(),
+						StrikethroughFeature(),
+						SubscriptFeature(),
+						SuperscriptFeature(),
+						InlineCodeFeature(),
+						BlockquoteFeature(),
+						UnorderedListFeature(),
+						OrderedListFeature(),
+						ChecklistFeature(),
+						AlignFeature(),
+						IndentFeature(),
+						RelationshipFeature(),
+						UploadFeature(),
+						EXPERIMENTAL_TableFeature(),
+					]
+				},
+			}),
+			label: false,
+			required: true,
+		},
+	],
+	interfaceName: "BannerBlock",
+}

package/templates/marketing/payload/src/blocks/BentoFeatures/Component.tsx

@@ -0,0 +1,243 @@
+import {
+	BarChart3,
+	Building,
+	Database,
+	DollarSign,
+	Globe,
+	Layers,
+	Layout,
+	type LucideIcon,
+	Rocket,
+	Search,
+	Settings,
+	Shield,
+	Star,
+	Target,
+	Users,
+	Zap,
+} from "lucide-react"
+import type React from "react"
+
+import type { BentoFeaturesBlock as BentoFeaturesBlockProps } from "@/payload-types"
+
+import { FeatureSectionTracker } from "@/components/Analytics"
+import { Media } from "@/components/Media"
+import RichText from "@/components/RichText"
+import { cn } from "@/utilities/ui"
+
+const iconMap: Record<string, LucideIcon> = {
+	rocket: Rocket,
+	zap: Zap,
+	building: Building,
+	target: Target,
+	layout: Layout,
+	star: Star,
+	dollarSign: DollarSign,
+	search: Search,
+	users: Users,
+	globe: Globe,
+	shield: Shield,
+	settings: Settings,
+	database: Database,
+	barChart: BarChart3,
+	layers: Layers,
+}
+
+// Creative grid positions for asymmetric bento layout (8 cards)
+const gridPositions = [
+	"md:col-span-1 md:row-span-1", // Small card (top-left)
+	"md:col-span-1 md:row-span-1", // Small card (top-middle)
+	"md:col-span-1 md:row-span-1", // Small card (top-right)
+	"md:col-span-1 md:row-span-2", // Tall card (left side, rows 2-3)
+	"md:col-span-1 md:row-span-1", // Small card (row 2, middle)
+	"md:col-span-1 md:row-span-1", // Small card (row 2, right)
+	"md:col-span-1 md:row-span-1", // Small card (row 3, middle)
+	"md:col-span-1 md:row-span-1", // Small card (row 3, right)
+]
+
+const styleClasses: Record<string, { bg: string; text: string; icon: string; statText: string }> = {
+	default: {
+		bg: "bg-card border border-border/50 hover:border-border",
+		text: "text-foreground",
+		icon: "bg-primary/10 text-primary",
+		statText: "text-primary",
+	},
+	primary: {
+		bg: "bg-primary hover:bg-primary/95",
+		text: "text-primary-foreground",
+		icon: "bg-white/20 text-white",
+		statText: "text-white",
+	},
+	accent: {
+		bg: "bg-gradient-to-br from-teal-500 to-teal-600 hover:from-teal-500/95 hover:to-teal-600/95",
+		text: "text-white",
+		icon: "bg-white/20 text-white",
+		statText: "text-white",
+	},
+	gradient: {
+		bg: "bg-gradient-to-br from-primary via-primary/90 to-secondary hover:from-primary/95",
+		text: "text-white",
+		icon: "bg-white/20 text-white",
+		statText: "text-white",
+	},
+	warm: {
+		bg: "bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400",
+		text: "text-white",
+		icon: "bg-white/20 text-white",
+		statText: "text-white",
+	},
+	cool: {
+		bg: "bg-gradient-to-br from-violet-500 via-purple-500 to-fuchsia-500",
+		text: "text-white",
+		icon: "bg-white/20 text-white",
+		statText: "text-white",
+	},
+}
+
+export const BentoFeaturesBlock: React.FC<BentoFeaturesBlockProps> = ({
+	heading,
+	subheading,
+	features,
+}) => {
+	if (!Array.isArray(features) || features.length === 0) {
+		return null
+	}
+
+	return (
+		<FeatureSectionTracker featureName={heading || "bento-features"}>
+			<section className="py-16 md:py-24">
+				<div className="container">
+					{/* Header */}
+					{(heading || subheading) && (
+						<div className="text-center mb-12 md:mb-16 max-w-3xl mx-auto">
+							{heading && (
+								<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6">
+									{heading}
+								</h2>
+							)}
+							{subheading && (
+								<p className="text-xl md:text-2xl text-muted-foreground">{subheading}</p>
+							)}
+						</div>
+					)}
+
+					{/* Creative Bento Grid */}
+					<div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5 md:grid-rows-[repeat(3,minmax(140px,160px))]">
+						{features.map((feature, index) => {
+							const style = feature.style || "default"
+							const iconKey = feature.icon
+							const Icon =
+								iconKey && iconKey !== "none" && iconKey in iconMap
+									? iconMap[iconKey as keyof typeof iconMap]
+									: null
+							const styleConfig = styleClasses[style] || styleClasses.default
+							const gridPosition = gridPositions[index] || "md:col-span-1 md:row-span-1"
+							const isLarge =
+								gridPosition.includes("col-span-2") && gridPosition.includes("row-span-2")
+							const featureKey = feature.id || feature.title || `bento-feature-${index}`
+
+							return (
+								<div
+									key={featureKey}
+									className={cn(
+										"relative rounded-2xl overflow-hidden p-5 md:p-6 flex flex-col transition-all duration-300 group",
+										"hover:shadow-lg hover:-translate-y-0.5",
+										"col-span-1 row-span-1",
+										gridPosition,
+										styleConfig.bg,
+									)}
+								>
+									{/* Background Image */}
+									{feature.image && typeof feature.image === "object" && (
+										<>
+											<div className="absolute inset-0">
+												<Media
+													resource={feature.image}
+													imgClassName="w-full h-full object-cover"
+													fill
+													size="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+												/>
+											</div>
+											<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
+										</>
+									)}
+
+									{/* Decorative elements for visual interest */}
+									{!feature.image && isLarge && (
+										<div className="absolute -right-6 -bottom-6 w-24 h-24 md:w-32 md:h-32 rounded-full bg-white/10 blur-xl" />
+									)}
+
+									{/* Content */}
+									<div
+										className={cn(
+											"relative z-10 flex flex-col h-full",
+											feature.image && "text-white",
+										)}
+									>
+										{/* Icon */}
+										{Icon && (
+											<div
+												className={cn(
+													"w-10 h-10 md:w-11 md:h-11 rounded-xl flex items-center justify-center mb-auto",
+													feature.image ? "bg-white/20 backdrop-blur-sm" : styleConfig.icon,
+												)}
+											>
+												<Icon className={cn("w-5 h-5 md:w-5 md:h-5", isLarge && "md:w-6 md:h-6")} />
+											</div>
+										)}
+
+										{/* Spacer for better vertical distribution */}
+										<div className="flex-1 min-h-2" />
+
+										{/* Stat - only show on larger cards or when explicitly set */}
+										{feature.stat && (
+											<div
+												className={cn(
+													"font-bold mb-0.5 leading-none",
+													isLarge ? "text-5xl md:text-6xl" : "text-3xl md:text-4xl",
+													feature.image ? "text-white" : styleConfig.statText,
+												)}
+											>
+												{feature.stat}
+											</div>
+										)}
+
+										{/* Title */}
+										{feature.title && (
+											<h3
+												className={cn(
+													"font-semibold mb-1",
+													isLarge ? "text-lg md:text-xl" : "text-base md:text-lg",
+													feature.image ? "text-white" : styleConfig.text,
+												)}
+											>
+												{feature.title}
+											</h3>
+										)}
+
+										{/* Description */}
+										{feature.description && (
+											<div
+												className={cn(
+													"leading-snug",
+													isLarge ? "text-sm md:text-base" : "text-xs md:text-sm",
+													feature.image
+														? "text-white/80"
+														: style === "default"
+															? "text-muted-foreground"
+															: "text-white/80",
+												)}
+											>
+												<RichText data={feature.description} enableGutter={false} />
+											</div>
+										)}
+									</div>
+								</div>
+							)
+						})}
+					</div>
+				</div>
+			</section>
+		</FeatureSectionTracker>
+	)
+}

package/templates/marketing/payload/src/blocks/BentoFeatures/config.ts

@@ -0,0 +1,147 @@
+import type { Block } from "payload"
+
+import {
+	AlignFeature,
+	BlockquoteFeature,
+	ChecklistFeature,
+	EXPERIMENTAL_TableFeature,
+	FixedToolbarFeature,
+	IndentFeature,
+	InlineCodeFeature,
+	InlineToolbarFeature,
+	OrderedListFeature,
+	RelationshipFeature,
+	StrikethroughFeature,
+	SubscriptFeature,
+	SuperscriptFeature,
+	UnorderedListFeature,
+	UploadFeature,
+	lexicalEditor,
+} from "@payloadcms/richtext-lexical"
+
+export const BentoFeatures: Block = {
+	slug: "bentoFeatures",
+	interfaceName: "BentoFeaturesBlock",
+	fields: [
+		{
+			name: "heading",
+			type: "text",
+			label: "Section Heading",
+		},
+		{
+			name: "subheading",
+			type: "textarea",
+			label: "Section Subheading",
+		},
+		{
+			name: "features",
+			type: "array",
+			label: "Bento Features",
+			minRows: 1,
+			maxRows: 8,
+			fields: [
+				{
+					name: "size",
+					type: "select",
+					defaultValue: "small",
+					options: [
+						{ label: "Small (1x1)", value: "small" },
+						{ label: "Medium (2x1)", value: "medium" },
+						{ label: "Large (2x2)", value: "large" },
+						{ label: "Tall (1x2)", value: "tall" },
+					],
+					admin: {
+						description: "Card size in the bento grid",
+					},
+				},
+				{
+					name: "style",
+					type: "select",
+					defaultValue: "default",
+					options: [
+						{ label: "Default (Light)", value: "default" },
+						{ label: "Primary (Navy)", value: "primary" },
+						{ label: "Accent (Teal)", value: "accent" },
+						{ label: "Gradient", value: "gradient" },
+						{ label: "Warm (Orange/Rose)", value: "warm" },
+						{ label: "Cool (Purple)", value: "cool" },
+					],
+				},
+				{
+					name: "icon",
+					type: "select",
+					options: [
+						{ label: "None", value: "none" },
+						{ label: "Rocket", value: "rocket" },
+						{ label: "Zap", value: "zap" },
+						{ label: "Building", value: "building" },
+						{ label: "Target", value: "target" },
+						{ label: "Layout", value: "layout" },
+						{ label: "Star", value: "star" },
+						{ label: "DollarSign", value: "dollarSign" },
+						{ label: "Search", value: "search" },
+						{ label: "Users", value: "users" },
+						{ label: "Globe", value: "globe" },
+						{ label: "Shield", value: "shield" },
+						{ label: "Settings", value: "settings" },
+						{ label: "Database", value: "database" },
+						{ label: "BarChart", value: "barChart" },
+						{ label: "Layers", value: "layers" },
+					],
+				},
+				{
+					name: "stat",
+					type: "text",
+					label: "Stat/Number",
+					admin: {
+						description: 'Optional large stat to display (e.g., "5x", "99.9%")',
+					},
+				},
+				{
+					name: "title",
+					type: "text",
+					required: true,
+				},
+				{
+					name: "description",
+					type: "richText",
+					editor: lexicalEditor({
+						features: ({ rootFeatures }) => {
+							return [
+								...rootFeatures,
+								FixedToolbarFeature(),
+								InlineToolbarFeature(),
+								StrikethroughFeature(),
+								SubscriptFeature(),
+								SuperscriptFeature(),
+								InlineCodeFeature(),
+								BlockquoteFeature(),
+								UnorderedListFeature(),
+								OrderedListFeature(),
+								ChecklistFeature(),
+								AlignFeature(),
+								IndentFeature(),
+								RelationshipFeature(),
+								UploadFeature(),
+								EXPERIMENTAL_TableFeature(),
+							]
+						},
+					}),
+				},
+				{
+					name: "image",
+					type: "upload",
+					relationTo: "media",
+					label: "Background Image",
+					admin: {
+						description: "Optional background image for the card",
+					},
+				},
+			],
+		},
+	],
+	labels: {
+		plural: "Bento Features",
+		singular: "Bento Features",
+	},
+}

package/templates/marketing/payload/src/blocks/CallToAction/Component.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import type React from "react"
+
+import type { CallToActionBlock as CTABlockProps } from "@/payload-types"
+
+import { CTATracker } from "@/components/Analytics"
+import { CMSLink } from "@/components/Link"
+import RichText from "@/components/RichText"
+
+export const CallToActionBlock: React.FC<CTABlockProps> = ({ links, richText }) => {
+	return (
+		<div className="container">
+			<div className="bg-card rounded border-border border p-4 flex flex-col gap-8 md:flex-row md:justify-between md:items-center">
+				<div className="max-w-[48rem] flex items-center">
+					{richText && <RichText className="mb-0" data={richText} enableGutter={false} />}
+				</div>
+				<div className="flex flex-col gap-8">
+					{(links || []).map(({ link }, i) => {
+						return (
+							// biome-ignore lint/suspicious/noArrayIndexKey: CMS links don't have stable IDs
+							<CTATracker key={i} location="cta_block" variant={link?.label || `cta_${i}`}>
+								<CMSLink size="lg" {...link} />
+							</CTATracker>
+						)
+					})}
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/marketing/payload/src/blocks/CallToAction/config.ts

@@ -0,0 +1,68 @@
+import type { Block } from "payload"
+
+import {
+	AlignFeature,
+	BlockquoteFeature,
+	ChecklistFeature,
+	EXPERIMENTAL_TableFeature,
+	FixedToolbarFeature,
+	HeadingFeature,
+	IndentFeature,
+	InlineCodeFeature,
+	InlineToolbarFeature,
+	OrderedListFeature,
+	RelationshipFeature,
+	StrikethroughFeature,
+	SubscriptFeature,
+	SuperscriptFeature,
+	UnorderedListFeature,
+	UploadFeature,
+	lexicalEditor,
+} from "@payloadcms/richtext-lexical"
+
+import { linkGroup } from "../../fields/linkGroup"
+
+export const CallToAction: Block = {
+	slug: "cta",
+	interfaceName: "CallToActionBlock",
+	fields: [
+		{
+			name: "richText",
+			type: "richText",
+			editor: lexicalEditor({
+				features: ({ rootFeatures }) => {
+					return [
+						...rootFeatures,
+						HeadingFeature({ enabledHeadingSizes: ["h1", "h2", "h3", "h4"] }),
+						FixedToolbarFeature(),
+						InlineToolbarFeature(),
+						StrikethroughFeature(),
+						SubscriptFeature(),
+						SuperscriptFeature(),
+						InlineCodeFeature(),
+						BlockquoteFeature(),
+						UnorderedListFeature(),
+						OrderedListFeature(),
+						ChecklistFeature(),
+						AlignFeature(),
+						IndentFeature(),
+						RelationshipFeature(),
+						UploadFeature(),
+						EXPERIMENTAL_TableFeature(),
+					]
+				},
+			}),
+			label: false,
+		},
+		linkGroup({
+			appearances: ["default", "outline"],
+			overrides: {
+				maxRows: 2,
+			},
+		}),
+	],
+	labels: {
+		plural: "Calls to Action",
+		singular: "Call to Action",
+	},
+}

package/templates/marketing/payload/src/blocks/Code/Component.client.tsx

@@ -0,0 +1,33 @@
+"use client"
+import { Highlight, themes } from "prism-react-renderer"
+import type React from "react"
+import { CopyButton } from "./CopyButton"
+
+type Props = {
+	code: string
+	language?: string
+}
+
+export const Code: React.FC<Props> = ({ code, language = "" }) => {
+	if (!code) return null
+
+	return (
+		<Highlight code={code} language={language} theme={themes.vsDark}>
+			{({ getLineProps, getTokenProps, tokens }) => (
+				<pre className="bg-black p-4 border text-xs border-border rounded overflow-x-auto">
+					{tokens.map((line, i) => (
+						<div key={i} {...getLineProps({ className: "table-row", line })}>
+							<span className="table-cell select-none text-right text-white/25">{i + 1}</span>
+							<span className="table-cell pl-4">
+								{line.map((token, key) => (
+									<span key={key} {...getTokenProps({ token })} />
+								))}
+							</span>
+						</div>
+					))}
+					<CopyButton code={code} />
+				</pre>
+			)}
+		</Highlight>
+	)
+}

package/templates/marketing/payload/src/blocks/Code/Component.tsx

@@ -0,0 +1,21 @@
+import type React from "react"
+
+import { Code } from "./Component.client"
+
+export type CodeBlockProps = {
+	code: string
+	language?: string
+	blockType: "code"
+}
+
+type Props = CodeBlockProps & {
+	className?: string
+}
+
+export const CodeBlock: React.FC<Props> = ({ className, code, language }) => {
+	return (
+		<div className={[className, "not-prose"].filter(Boolean).join(" ")}>
+			<Code code={code} language={language} />
+		</div>
+	)
+}

package/templates/marketing/payload/src/blocks/Code/CopyButton.tsx

@@ -0,0 +1,33 @@
+"use client"
+import { Button } from "@/components/ui/button"
+import { CopyIcon } from "@payloadcms/ui/icons/Copy"
+import { useState } from "react"
+
+export function CopyButton({ code }: { code: string }) {
+	const [text, setText] = useState("Copy")
+
+	function updateCopyStatus() {
+		if (text === "Copy") {
+			setText(() => "Copied!")
+			setTimeout(() => {
+				setText(() => "Copy")
+			}, 1000)
+		}
+	}
+
+	return (
+		<div className="flex justify-end align-middle">
+			<Button
+				className="flex gap-1"
+				variant={"secondary"}
+				onClick={async () => {
+					await navigator.clipboard.writeText(code)
+					updateCopyStatus()
+				}}
+			>
+				<p>{text}</p>
+				<CopyIcon />
+			</Button>
+		</div>
+	)
+}