kofi-stack-template-generator 2.1.37 → 2.1.38

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

@@ -0,0 +1,33 @@
+import type { Block } from "payload"
+
+export const Code: Block = {
+	slug: "code",
+	interfaceName: "CodeBlock",
+	fields: [
+		{
+			name: "language",
+			type: "select",
+			defaultValue: "typescript",
+			options: [
+				{
+					label: "Typescript",
+					value: "typescript",
+				},
+				{
+					label: "Javascript",
+					value: "javascript",
+				},
+				{
+					label: "CSS",
+					value: "css",
+				},
+			],
+		},
+		{
+			name: "code",
+			type: "code",
+			label: false,
+			required: true,
+		},
+	],
+}

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

@@ -0,0 +1,41 @@
+import RichText from "@/components/RichText"
+import type React from "react"
+
+import type { ContentBlock as ContentBlockProps } from "@/payload-types"
+
+import { CMSLink } from "../../components/Link"
+
+// Use static class mappings for Tailwind to properly detect classes
+const colSpanClasses: Record<string, string> = {
+	full: "col-span-4 lg:col-span-12",
+	half: "col-span-4 md:col-span-2 lg:col-span-6",
+	oneThird: "col-span-4 md:col-span-2 lg:col-span-4",
+	twoThirds: "col-span-4 md:col-span-2 lg:col-span-8",
+}
+
+export const ContentBlock: React.FC<ContentBlockProps> = (props) => {
+	const { columns } = props
+
+	return (
+		<div className="container my-16">
+			<div className="grid grid-cols-4 lg:grid-cols-12 gap-y-8 gap-x-16">
+				{columns &&
+					columns.length > 0 &&
+					columns.map((col, index) => {
+						const { enableLink, link, richText, size } = col
+						const sizeKey = size || "full"
+
+						return (
+							<div className={colSpanClasses[sizeKey] || colSpanClasses.full} key={index}>
+								{richText && (
+									<RichText data={richText} enableGutter={false} className="max-w-none" />
+								)}
+
+								{enableLink && <CMSLink {...link} />}
+							</div>
+						)
+					})}
+			</div>
+		</div>
+	)
+}

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

@@ -0,0 +1,105 @@
+import type { Block, Field } 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 { link } from "@/fields/link"
+
+const columnFields: Field[] = [
+	{
+		name: "size",
+		type: "select",
+		defaultValue: "oneThird",
+		options: [
+			{
+				label: "One Third",
+				value: "oneThird",
+			},
+			{
+				label: "Half",
+				value: "half",
+			},
+			{
+				label: "Two Thirds",
+				value: "twoThirds",
+			},
+			{
+				label: "Full",
+				value: "full",
+			},
+		],
+	},
+	{
+		name: "richText",
+		type: "richText",
+		editor: lexicalEditor({
+			features: ({ rootFeatures }) => {
+				return [
+					...rootFeatures,
+					HeadingFeature({ enabledHeadingSizes: ["h2", "h3", "h4"] }),
+					FixedToolbarFeature(),
+					InlineToolbarFeature(),
+					StrikethroughFeature(),
+					SubscriptFeature(),
+					SuperscriptFeature(),
+					InlineCodeFeature(),
+					BlockquoteFeature(),
+					UnorderedListFeature(),
+					OrderedListFeature(),
+					ChecklistFeature(),
+					AlignFeature(),
+					IndentFeature(),
+					RelationshipFeature(),
+					UploadFeature(),
+					EXPERIMENTAL_TableFeature(),
+				]
+			},
+		}),
+		label: false,
+	},
+	{
+		name: "enableLink",
+		type: "checkbox",
+	},
+	link({
+		overrides: {
+			admin: {
+				condition: (_data, siblingData) => {
+					return Boolean(siblingData?.enableLink)
+				},
+			},
+		},
+	}),
+]
+
+export const Content: Block = {
+	slug: "content",
+	interfaceName: "ContentBlock",
+	fields: [
+		{
+			name: "columns",
+			type: "array",
+			admin: {
+				initCollapsed: true,
+			},
+			fields: columnFields,
+		},
+	],
+}

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

@@ -0,0 +1,90 @@
+"use client"
+
+import RichText from "@/components/RichText"
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion"
+import type { FAQAccordionBlock as FAQAccordionBlockProps, Faq } from "@/payload-types"
+import { cn } from "@/utilities/ui"
+import type React from "react"
+
+export const FAQAccordionBlock: React.FC<FAQAccordionBlockProps> = ({
+	heading,
+	subheading,
+	style = "default",
+	faqs,
+}) => {
+	// Type guard to ensure we have FAQ objects, not just IDs
+	const faqItems = (faqs || []).filter((faq): faq is Faq => typeof faq === "object" && faq !== null)
+
+	if (faqItems.length === 0) {
+		return null
+	}
+
+	const isCentered = style === "centered"
+	const isTwoColumn = style === "twoColumn"
+
+	// Split FAQs into two columns for two-column layout
+	const midpoint = Math.ceil(faqItems.length / 2)
+	const leftColumnFaqs = isTwoColumn ? faqItems.slice(0, midpoint) : faqItems
+	const rightColumnFaqs = isTwoColumn ? faqItems.slice(midpoint) : []
+
+	const renderFAQAccordion = (items: Faq[], columnKey: string) => (
+		<Accordion type="single" collapsible className="w-full">
+			{items.map((faq, index) => (
+				<AccordionItem
+					key={faq.id || `${columnKey}-${index}`}
+					value={`${columnKey}-item-${index}`}
+					className="border-b border-border/50"
+				>
+					<AccordionTrigger className="text-left text-base md:text-lg font-semibold hover:no-underline py-5">
+						{faq.question}
+					</AccordionTrigger>
+					<AccordionContent className="text-muted-foreground pb-5">
+						{faq.answer && (
+							<RichText
+								data={faq.answer}
+								enableGutter={false}
+								enableProse={false}
+								className="prose-sm"
+							/>
+						)}
+					</AccordionContent>
+				</AccordionItem>
+			))}
+		</Accordion>
+	)
+
+	return (
+		<section className="py-16 md:py-24">
+			<div className="container">
+				{/* Header */}
+				{(heading || subheading) && (
+					<div className={cn("mb-12 md:mb-16", isCentered && "text-center max-w-3xl mx-auto")}>
+						{heading && (
+							<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mb-4">
+								{heading}
+							</h2>
+						)}
+						{subheading && <p className="text-lg md:text-xl text-muted-foreground">{subheading}</p>}
+					</div>
+				)}
+
+				{/* FAQ Content */}
+				{isTwoColumn ? (
+					<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
+						<div>{renderFAQAccordion(leftColumnFaqs, "left")}</div>
+						<div>{renderFAQAccordion(rightColumnFaqs, "right")}</div>
+					</div>
+				) : (
+					<div className={cn(isCentered && "max-w-3xl mx-auto")}>
+						{renderFAQAccordion(faqItems, "main")}
+					</div>
+				)}
+			</div>
+		</section>
+	)
+}

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

@@ -0,0 +1,75 @@
+import type { Block } from "payload"
+
+export const FAQAccordion: Block = {
+	slug: "faqAccordion",
+	interfaceName: "FAQAccordionBlock",
+	labels: {
+		singular: "FAQ Accordion",
+		plural: "FAQ Accordions",
+	},
+	fields: [
+		{
+			name: "heading",
+			type: "text",
+			label: "Section Heading",
+			defaultValue: "Frequently Asked Questions",
+		},
+		{
+			name: "subheading",
+			type: "textarea",
+			label: "Section Subheading",
+		},
+		{
+			name: "style",
+			type: "select",
+			defaultValue: "default",
+			options: [
+				{ label: "Default", value: "default" },
+				{ label: "Centered", value: "centered" },
+				{ label: "Two Column", value: "twoColumn" },
+			],
+			admin: {
+				description: "Layout style for the FAQ section",
+			},
+		},
+		{
+			name: "faqs",
+			type: "relationship",
+			relationTo: "faqs",
+			hasMany: true,
+			label: "FAQs to Display",
+			admin: {
+				description: "Select FAQs to display in this section. Leave empty to show all FAQs.",
+			},
+		},
+		{
+			name: "filterByCategory",
+			type: "select",
+			label: "Filter by Category",
+			options: [
+				{ label: "All Categories", value: "all" },
+				{ label: "General", value: "general" },
+				{ label: "Pricing", value: "pricing" },
+				{ label: "Features", value: "features" },
+				{ label: "Getting Started", value: "getting-started" },
+				{ label: "Technical", value: "technical" },
+				{ label: "Support", value: "support" },
+			],
+			defaultValue: "all",
+			admin: {
+				condition: (data, siblingData) => !siblingData?.faqs?.length,
+				description: "Only used when no specific FAQs are selected",
+			},
+		},
+		{
+			name: "maxItems",
+			type: "number",
+			label: "Maximum Items",
+			defaultValue: 10,
+			admin: {
+				condition: (data, siblingData) => !siblingData?.faqs?.length,
+				description: "Maximum number of FAQs to display (only when using category filter)",
+			},
+		},
+	],
+}

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

@@ -0,0 +1,108 @@
+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 { FeatureGridBlock as FeatureGridBlockProps } from "@/payload-types"
+
+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,
+}
+
+export const FeatureGridBlock: React.FC<FeatureGridBlockProps> = ({
+	heading,
+	subheading,
+	columns,
+	features,
+}) => {
+	const gridCols: Record<string, string> = {
+		"2": "md:grid-cols-2",
+		"3": "md:grid-cols-2 lg:grid-cols-3",
+		"4": "md:grid-cols-2 lg:grid-cols-4",
+	}
+
+	const columnClass = columns && columns in gridCols ? gridCols[columns] : gridCols["3"]
+
+	return (
+		<section className="py-20 md:py-28">
+			<div className="container">
+				{(heading || subheading) && (
+					<div className="text-center mb-16 max-w-3xl mx-auto">
+						{heading && <h2 className="text-3xl md:text-4xl font-bold mb-4">{heading}</h2>}
+						{subheading && <p className="text-lg text-muted-foreground">{subheading}</p>}
+					</div>
+				)}
+
+				{Array.isArray(features) && features.length > 0 && (
+					<div className={cn("grid gap-6 lg:gap-8", columnClass)}>
+						{features.map((feature, index) => {
+							const iconKey = feature.icon
+							const Icon =
+								iconKey && iconKey in iconMap ? iconMap[iconKey as keyof typeof iconMap] : null
+
+							return (
+								<div
+									key={index}
+									className="group relative p-6 lg:p-8 rounded-xl border border-border bg-card hover:border-primary/30 hover:shadow-lg transition-all duration-300"
+								>
+									{/* Subtle gradient hover effect */}
+									<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+									<div className="relative">
+										{Icon && (
+											<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-5 group-hover:bg-primary/15 group-hover:scale-105 transition-all duration-300">
+												<Icon className="w-7 h-7 text-primary" />
+											</div>
+										)}
+										{feature.title && (
+											<h3 className="text-lg lg:text-xl font-semibold mb-3 group-hover:text-primary transition-colors duration-300">
+												{feature.title}
+											</h3>
+										)}
+										{feature.description && (
+											<div className="text-muted-foreground text-sm lg:text-base leading-relaxed">
+												<RichText data={feature.description} enableGutter={false} />
+											</div>
+										)}
+									</div>
+								</div>
+							)
+						})}
+					</div>
+				)}
+			</div>
+		</section>
+	)
+}

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

@@ -0,0 +1,109 @@
+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 FeatureGrid: Block = {
+	slug: "featureGrid",
+	interfaceName: "FeatureGridBlock",
+	fields: [
+		{
+			name: "heading",
+			type: "text",
+			label: "Section Heading",
+		},
+		{
+			name: "subheading",
+			type: "textarea",
+			label: "Section Subheading",
+		},
+		{
+			name: "columns",
+			type: "select",
+			defaultValue: "3",
+			options: [
+				{ label: "2 Columns", value: "2" },
+				{ label: "3 Columns", value: "3" },
+				{ label: "4 Columns", value: "4" },
+			],
+		},
+		{
+			name: "features",
+			type: "array",
+			label: "Features",
+			minRows: 1,
+			maxRows: 12,
+			fields: [
+				{
+					name: "icon",
+					type: "select",
+					options: [
+						{ 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" },
+					],
+				},
+				{
+					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(),
+							]
+						},
+					}),
+				},
+			],
+		},
+	],
+	labels: {
+		plural: "Feature Grids",
+		singular: "Feature Grid",
+	},
+}

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

@@ -0,0 +1,107 @@
+import { CheckCircle2 } from "lucide-react"
+import type React from "react"
+
+import type { FeatureShowcaseBlock as FeatureShowcaseBlockProps } from "@/payload-types"
+
+import { CMSLink } from "@/components/Link"
+import { Media } from "@/components/Media"
+import RichText from "@/components/RichText"
+import { cn } from "@/utilities/ui"
+
+export const FeatureShowcaseBlock: React.FC<FeatureShowcaseBlockProps> = ({
+	label,
+	headline,
+	description,
+	link,
+	media,
+	imagePosition = "right",
+	features,
+}) => {
+	const isImageLeft = imagePosition === "left"
+
+	return (
+		<section className="py-16 md:py-24">
+			<div className="container">
+				<div
+					className={cn(
+						"grid gap-12 lg:gap-16 items-center",
+						"lg:grid-cols-2",
+						isImageLeft && "lg:[direction:rtl]",
+					)}
+				>
+					{/* Content Side */}
+					<div className={cn("lg:[direction:ltr]", "max-w-xl")}>
+						{label && (
+							<span className="inline-block text-sm font-medium text-secondary mb-4 tracking-wide">
+								{label}
+							</span>
+						)}
+
+						{headline && (
+							<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
+								{headline}
+							</h2>
+						)}
+
+						{description && (
+							<div className="text-lg text-muted-foreground mb-6">
+								<RichText data={description} enableGutter={false} />
+							</div>
+						)}
+
+						{/* Feature Bullets */}
+						{Array.isArray(features) && features.length > 0 && (
+							<ul className="space-y-3 mb-8">
+								{features.map((feature, index) => (
+									// biome-ignore lint/suspicious/noArrayIndexKey: CMS items don't have stable IDs
+									<li key={index} className="flex items-start gap-3">
+										<CheckCircle2 className="w-5 h-5 text-secondary mt-0.5 flex-shrink-0" />
+										<span className="text-muted-foreground">{feature.text}</span>
+									</li>
+								))}
+							</ul>
+						)}
+
+						{link?.label && <CMSLink {...link} size="lg" />}
+					</div>
+
+					{/* Image Side */}
+					<div className={cn("lg:[direction:ltr]", "relative")}>
+						{media && typeof media === "object" ? (
+							<div className="relative rounded-xl overflow-hidden bg-muted">
+								<Media
+									resource={media}
+									imgClassName="w-full h-auto object-cover"
+									size="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 600px"
+								/>
+							</div>
+						) : (
+							/* Placeholder when no image */
+							<div className="relative rounded-xl overflow-hidden bg-gradient-to-br from-muted to-accent aspect-[4/3] flex items-center justify-center">
+								<div className="text-center p-8">
+									<div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
+										<svg
+											className="w-8 h-8 text-primary"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+											aria-hidden="true"
+										>
+											<path
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												strokeWidth={1.5}
+												d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+											/>
+										</svg>
+									</div>
+									<p className="text-sm text-muted-foreground">Feature image placeholder</p>
+								</div>
+							</div>
+						)}
+					</div>
+				</div>
+			</div>
+		</section>
+	)
+}