kofi-stack-template-generator 2.1.37 → 2.1.38

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

@@ -0,0 +1,142 @@
+import type { Block } from "payload"
+
+import { link } from "@/fields/link"
+
+export const PricingTable: Block = {
+	slug: "pricingTable",
+	interfaceName: "PricingTableBlock",
+	fields: [
+		{
+			name: "heading",
+			type: "text",
+			label: "Section Heading",
+			defaultValue: "Simple, Transparent Pricing",
+		},
+		{
+			name: "subheading",
+			type: "textarea",
+			label: "Section Subheading",
+		},
+		{
+			name: "useDynamicPricing",
+			type: "checkbox",
+			label: "Use Dynamic Pricing from Stripe",
+			defaultValue: true,
+			admin: {
+				description:
+					"When enabled, prices and features are fetched dynamically from Stripe Entitlements. CMS plans below are used as fallback and for CTA links.",
+			},
+		},
+		{
+			name: "showComparisonTable",
+			type: "checkbox",
+			label: "Show Feature Comparison Table",
+			defaultValue: true,
+			admin: {
+				description:
+					"Display a full feature comparison table below the pricing cards (requires dynamic pricing)",
+			},
+		},
+		{
+			name: "showViewAllLink",
+			type: "checkbox",
+			label: "Show 'View Full Comparison' Link",
+			defaultValue: false,
+			admin: {
+				description:
+					"Show a link to the /pricing page for full comparison (useful for home page where comparison table is hidden)",
+			},
+		},
+		{
+			name: "maxFeaturesOnCard",
+			type: "number",
+			label: "Max Features on Card",
+			defaultValue: 4,
+			admin: {
+				description: "Maximum number of features to show on each pricing card (default: 4)",
+			},
+		},
+		{
+			name: "plans",
+			type: "array",
+			label: "Pricing Plans",
+			minRows: 1,
+			maxRows: 4,
+			admin: {
+				description:
+					"When using dynamic pricing, only the CTA links from these plans are used. Prices and features come from Stripe.",
+			},
+			fields: [
+				{
+					name: "name",
+					type: "text",
+					required: true,
+					label: "Plan Name",
+					admin: {
+						description: "Must match Stripe plan name (Free, Pro, Business) for CTA link mapping",
+					},
+				},
+				{
+					name: "price",
+					type: "text",
+					required: true,
+					label: "Price",
+					admin: {
+						description:
+							'e.g., "$29/mo" or "Custom" - Only used as fallback when dynamic pricing is disabled',
+					},
+				},
+				{
+					name: "description",
+					type: "textarea",
+					label: "Plan Description",
+					admin: {
+						description: "Only used as fallback when dynamic pricing is disabled",
+					},
+				},
+				{
+					name: "featured",
+					type: "checkbox",
+					label: "Featured Plan",
+					defaultValue: false,
+					admin: {
+						description: "Only used as fallback when dynamic pricing is disabled",
+					},
+				},
+				{
+					name: "features",
+					type: "array",
+					label: "Features",
+					admin: {
+						description: "Only used as fallback when dynamic pricing is disabled",
+					},
+					fields: [
+						{
+							name: "feature",
+							type: "text",
+							required: true,
+						},
+						{
+							name: "included",
+							type: "checkbox",
+							defaultValue: true,
+						},
+					],
+				},
+				link({
+					overrides: {
+						label: "CTA Button",
+						admin: {
+							description:
+								"The call-to-action button link - used for both dynamic and static pricing",
+						},
+					},
+				}),
+			],
+		},
+	],
+	labels: {
+		plural: "Pricing Tables",
+		singular: "Pricing Table",
+	},
+}

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

@@ -0,0 +1,65 @@
+import type React from "react"
+
+import type { ProofBannerBlock as ProofBannerBlockProps } from "@/payload-types"
+
+import { CMSLink } from "@/components/Link"
+import { cn } from "@/utilities/ui"
+
+export const ProofBannerBlock: React.FC<ProofBannerBlockProps> = ({
+	style = "centered",
+	headline,
+	subtext,
+	links,
+}) => {
+	const isWithBackground = style === "withBackground"
+	const isMinimal = style === "minimal"
+
+	return (
+		<section
+			className={cn(
+				"py-16 md:py-24",
+				isWithBackground && "bg-primary text-primary-foreground",
+				isMinimal && "py-12",
+			)}
+		>
+			<div className="container">
+				<div className="text-center max-w-4xl mx-auto">
+					{headline && (
+						<h2
+							className={cn(
+								"font-bold mb-4",
+								isMinimal ? "text-2xl md:text-3xl" : "text-3xl md:text-4xl lg:text-5xl",
+							)}
+						>
+							{headline}
+						</h2>
+					)}
+
+					{subtext && (
+						<p
+							className={cn(
+								"text-lg md:text-xl mb-8",
+								isWithBackground ? "text-primary-foreground/80" : "text-muted-foreground",
+							)}
+						>
+							{subtext}
+						</p>
+					)}
+
+					{Array.isArray(links) && links.length > 0 && (
+						<div className="flex flex-wrap gap-4 justify-center">
+							{links.map(({ link }, i) => (
+								<CMSLink
+									key={i}
+									{...link}
+									size="lg"
+									appearance={isWithBackground && i === 0 ? "outline" : link.appearance}
+								/>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+		</section>
+	)
+}

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

@@ -0,0 +1,42 @@
+import type { Block } from "payload"
+
+import { linkGroup } from "../../fields/linkGroup"
+
+export const ProofBanner: Block = {
+	slug: "proofBanner",
+	interfaceName: "ProofBannerBlock",
+	fields: [
+		{
+			name: "style",
+			type: "select",
+			defaultValue: "centered",
+			options: [
+				{ label: "Centered", value: "centered" },
+				{ label: "With Background", value: "withBackground" },
+				{ label: "Minimal", value: "minimal" },
+			],
+		},
+		{
+			name: "headline",
+			type: "text",
+			required: true,
+			label: "Headline",
+		},
+		{
+			name: "subtext",
+			type: "textarea",
+			label: "Supporting Text",
+		},
+		linkGroup({
+			appearances: ["default", "outline"],
+			overrides: {
+				maxRows: 2,
+				label: "CTA Buttons (optional)",
+			},
+		}),
+	],
+	labels: {
+		plural: "Proof Banners",
+		singular: "Proof Banner",
+	},
+}

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

@@ -0,0 +1,32 @@
+import RichText from "@/components/RichText"
+import clsx from "clsx"
+import type React from "react"
+
+import type { Post } from "@/payload-types"
+
+import type { DefaultTypedEditorState } from "@payloadcms/richtext-lexical"
+import { Card } from "../../components/Card"
+
+export type RelatedPostsProps = {
+	className?: string
+	docs?: Post[]
+	introContent?: DefaultTypedEditorState
+}
+
+export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
+	const { className, docs, introContent } = props
+
+	return (
+		<div className={clsx("lg:container", className)}>
+			{introContent && <RichText data={introContent} enableGutter={false} />}
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 items-stretch">
+				{docs?.map((doc, index) => {
+					if (typeof doc === "string") return null
+
+					return <Card key={index} doc={doc} relationTo="posts" showCategories />
+				})}
+			</div>
+		</div>
+	)
+}

package/templates/marketing/payload/src/blocks/RenderBlocks.tsx

@@ -0,0 +1,92 @@
+import type React from "react"
+import { Fragment } from "react"
+
+import type { Page } from "@/payload-types"
+
+import { ArchiveBlock } from "@/blocks/ArchiveBlock/Component"
+import { BentoFeaturesBlock } from "@/blocks/BentoFeatures/Component"
+import { CallToActionBlock } from "@/blocks/CallToAction/Component"
+import { ContentBlock } from "@/blocks/Content/Component"
+import { FAQAccordionBlock } from "@/blocks/FAQAccordion/Component"
+import { FeatureGridBlock } from "@/blocks/FeatureGrid/Component"
+import { FeatureShowcaseBlock } from "@/blocks/FeatureShowcase/Component"
+import { FinalCTABlock } from "@/blocks/FinalCTA/Component"
+import { FormBlock } from "@/blocks/Form/Component"
+import { HowItWorksBlock } from "@/blocks/HowItWorks/Component"
+import { IndustryTabsBlock } from "@/blocks/IndustryTabs/Component"
+import { LogoBannerBlock } from "@/blocks/LogoBanner/Component"
+import { MediaBlock } from "@/blocks/MediaBlock/Component"
+import { PersonasBlock } from "@/blocks/Personas/Component"
+import { PricingTableBlock } from "@/blocks/PricingTable/Component"
+import { ProofBannerBlock } from "@/blocks/ProofBanner/Component"
+import { TestimonialsGridBlock } from "@/blocks/TestimonialsGrid/Component"
+import { TrustColumnsBlock } from "@/blocks/TrustColumns/Component"
+
+const blockComponents = {
+	archive: ArchiveBlock,
+	bentoFeatures: BentoFeaturesBlock,
+	content: ContentBlock,
+	cta: CallToActionBlock,
+	faqAccordion: FAQAccordionBlock,
+	featureGrid: FeatureGridBlock,
+	featureShowcase: FeatureShowcaseBlock,
+	finalCta: FinalCTABlock,
+	formBlock: FormBlock,
+	howItWorks: HowItWorksBlock,
+	industryTabs: IndustryTabsBlock,
+	logoBanner: LogoBannerBlock,
+	mediaBlock: MediaBlock,
+	personas: PersonasBlock,
+	pricingTable: PricingTableBlock,
+	proofBanner: ProofBannerBlock,
+	testimonialsGrid: TestimonialsGridBlock,
+	trustColumns: TrustColumnsBlock,
+}
+
+// Blocks that handle their own full-width styling (e.g., background colors)
+const fullWidthBlocks = [
+	"proofBanner",
+	"howItWorks",
+	"logoBanner",
+	"industryTabs",
+	"testimonialsGrid",
+	"trustColumns",
+	"finalCta",
+	"bentoFeatures",
+]
+
+export const RenderBlocks: React.FC<{
+	blocks: Page["layout"][0][]
+}> = (props) => {
+	const { blocks } = props
+
+	const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
+
+	if (hasBlocks) {
+		return (
+			<Fragment>
+				{blocks.map((block, index) => {
+					const { blockType } = block
+
+					if (blockType && blockType in blockComponents) {
+						const Block = blockComponents[blockType]
+						const isFullWidth = fullWidthBlocks.includes(blockType)
+
+						if (Block) {
+							return (
+								// biome-ignore lint/suspicious/noArrayIndexKey: Blocks don't have stable IDs
+								<div className={isFullWidth ? "my-8" : "my-16 first:mt-0"} key={index}>
+									{/* @ts-expect-error there may be some mismatch between the expected types here */}
+									<Block {...block} disableInnerContainer />
+								</div>
+							)
+						}
+					}
+					return null
+				})}
+			</Fragment>
+		)
+	}
+
+	return null
+}

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

@@ -0,0 +1,107 @@
+import type React from "react"
+
+import type { TestimonialsGridBlock as TestimonialsGridBlockProps } from "@/payload-types"
+
+import { Media } from "@/components/Media"
+import { cn } from "@/utilities/ui"
+
+export const TestimonialsGridBlock: React.FC<TestimonialsGridBlockProps> = ({
+	heading,
+	subheading,
+	testimonials,
+}) => {
+	if (!Array.isArray(testimonials) || testimonials.length === 0) {
+		return null
+	}
+
+	return (
+		<section className="py-20 md:py-28">
+			<div className="container">
+				{/* Header */}
+				{(heading || subheading) && (
+					<div className="mb-12">
+						{heading && <h2 className="text-3xl md:text-4xl font-bold mb-4">{heading}</h2>}
+						{subheading && <p className="text-lg text-muted-foreground max-w-2xl">{subheading}</p>}
+					</div>
+				)}
+
+				{/* Testimonials Grid */}
+				<div
+					className={cn(
+						"grid gap-6",
+						testimonials.length === 1 && "grid-cols-1",
+						testimonials.length === 2 && "grid-cols-1 md:grid-cols-2",
+						testimonials.length >= 3 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+					)}
+				>
+					{testimonials.map((testimonial, index) => (
+						<div
+							key={testimonial.id || `testimonial-${index}`}
+							className="group relative overflow-hidden rounded-2xl aspect-[4/5] md:aspect-[3/4]"
+						>
+							{/* Background Image or Gradient */}
+							{testimonial.image && typeof testimonial.image === "object" ? (
+								<div className="absolute inset-0 overflow-hidden">
+									<Media
+										resource={testimonial.image}
+										imgClassName="w-full h-full object-cover"
+										fill
+										size="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
+									/>
+								</div>
+							) : (
+								<div
+									className={cn(
+										"absolute inset-0 bg-gradient-to-br",
+										index % 3 === 0 && "from-blue-100 to-blue-200",
+										index % 3 === 1 && "from-emerald-100 to-emerald-200",
+										index % 3 === 2 && "from-amber-100 to-amber-200",
+									)}
+								/>
+							)}
+
+							{/* Gradient Overlay */}
+							<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
+
+							{/* Content */}
+							<div className="absolute inset-0 flex flex-col justify-end p-6">
+								{/* Stat Badge */}
+								<div className="mb-4">
+									<span className="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-none">
+										{testimonial.stat}
+									</span>
+								</div>
+
+								{/* Stat Label */}
+								<p className="text-lg md:text-xl font-semibold text-white mb-3">
+									{testimonial.statLabel}
+								</p>
+
+								{/* Quote (if provided) */}
+								{testimonial.quote && (
+									<p className="text-sm text-white/80 mb-3 line-clamp-3">
+										&ldquo;{testimonial.quote}&rdquo;
+									</p>
+								)}
+
+								{/* Author */}
+								{(testimonial.author || testimonial.company) && (
+									<div className="flex items-center gap-2 text-sm text-white/70">
+										{testimonial.author && <span>{testimonial.author}</span>}
+										{testimonial.author && testimonial.company && <span>•</span>}
+										{testimonial.company && (
+											<span className="font-medium">{testimonial.company}</span>
+										)}
+									</div>
+								)}
+							</div>
+
+							{/* Hover Effect */}
+							<div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	)
+}

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

@@ -0,0 +1,76 @@
+import type { Block } from "payload"
+
+export const TestimonialsGrid: Block = {
+	slug: "testimonialsGrid",
+	interfaceName: "TestimonialsGridBlock",
+	fields: [
+		{
+			name: "heading",
+			type: "text",
+			label: "Section Heading",
+		},
+		{
+			name: "subheading",
+			type: "textarea",
+			label: "Section Subheading",
+		},
+		{
+			name: "testimonials",
+			type: "array",
+			label: "Testimonials",
+			minRows: 1,
+			maxRows: 6,
+			fields: [
+				{
+					name: "image",
+					type: "upload",
+					relationTo: "media",
+					label: "Background Image",
+					admin: {
+						description: "Stock photo or image for the testimonial card background",
+					},
+				},
+				{
+					name: "stat",
+					type: "text",
+					label: "Stat Number",
+					required: true,
+					admin: {
+						description: 'e.g., "94.4%" or "+300%"',
+					},
+				},
+				{
+					name: "statLabel",
+					type: "text",
+					label: "Stat Label",
+					required: true,
+					admin: {
+						description: 'e.g., "SMS deliverability improved"',
+					},
+				},
+				{
+					name: "quote",
+					type: "textarea",
+					label: "Quote",
+					admin: {
+						description: "Optional testimonial quote",
+					},
+				},
+				{
+					name: "author",
+					type: "text",
+					label: "Author Name",
+				},
+				{
+					name: "company",
+					type: "text",
+					label: "Company Name",
+				},
+			],
+		},
+	],
+	labels: {
+		plural: "Testimonials Grids",
+		singular: "Testimonials Grid",
+	},
+}

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

@@ -0,0 +1,83 @@
+import {
+	Award,
+	Check,
+	Cloud,
+	Database,
+	Globe,
+	Lock,
+	type LucideIcon,
+	Plug,
+	Server,
+	Shield,
+	Zap,
+} from "lucide-react"
+import type React from "react"
+
+import type { TrustColumnsBlock as TrustColumnsBlockProps } from "@/payload-types"
+
+const iconMap: Record<string, LucideIcon> = {
+	check: Check,
+	shield: Shield,
+	lock: Lock,
+	globe: Globe,
+	zap: Zap,
+	server: Server,
+	cloud: Cloud,
+	database: Database,
+	plug: Plug,
+	award: Award,
+}
+
+export const TrustColumnsBlock: React.FC<TrustColumnsBlockProps> = ({ columns }) => {
+	if (!Array.isArray(columns) || columns.length === 0) {
+		return null
+	}
+
+	return (
+		<section className="py-20 md:py-28 bg-muted/30">
+			<div className="container">
+				<div className="grid md:grid-cols-2 gap-12 lg:gap-20">
+					{columns.map((column, columnIndex) => (
+						<div key={columnIndex}>
+							{/* Label */}
+							{column.label && (
+								<span className="inline-block text-sm font-medium text-secondary mb-3 tracking-wide">
+									{column.label}
+								</span>
+							)}
+
+							{/* Heading */}
+							{column.heading && (
+								<h2 className="text-2xl md:text-3xl font-bold mb-4">{column.heading}</h2>
+							)}
+
+							{/* Description */}
+							{column.description && (
+								<p className="text-muted-foreground mb-6">{column.description}</p>
+							)}
+
+							{/* Feature Items */}
+							{Array.isArray(column.items) && column.items.length > 0 && (
+								<ul className="space-y-4">
+									{column.items.map((item, itemIndex) => {
+										const iconKey = item.icon || "check"
+										const Icon = iconMap[iconKey] || Check
+
+										return (
+											<li key={itemIndex} className="flex items-center gap-3">
+												<div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+													<Icon className="w-4 h-4 text-primary" />
+												</div>
+												<span className="text-foreground font-medium">{item.text}</span>
+											</li>
+										)
+									})}
+								</ul>
+							)}
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	)
+}