kofi-stack-template-generator 2.1.37 → 2.1.39

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

@@ -0,0 +1,132 @@
+"use client"
+
+import { useState } from "react"
+
+import type { IndustryTabsBlock as IndustryTabsBlockProps } from "@/payload-types"
+
+import { CMSLink } from "@/components/Link"
+import { Media } from "@/components/Media"
+import { cn } from "@/utilities/ui"
+
+export const IndustryTabsBlock: React.FC<IndustryTabsBlockProps> = ({
+	heading,
+	subheading,
+	tabs,
+}) => {
+	const [activeTab, setActiveTab] = useState(0)
+
+	if (!Array.isArray(tabs) || tabs.length === 0) {
+		return null
+	}
+
+	const activeTabData = tabs[activeTab]
+	const hasMedia = activeTabData?.media && typeof activeTabData.media === "object"
+
+	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 lg:text-5xl font-bold mb-4">{heading}</h2>
+						)}
+						{subheading && <p className="text-lg text-muted-foreground max-w-2xl">{subheading}</p>}
+					</div>
+				)}
+
+				{/* Tabs */}
+				<div className="flex flex-wrap gap-2 mb-12 border-b border-border pb-4">
+					{tabs.map((tab, index) => (
+						<button
+							type="button"
+							// biome-ignore lint/suspicious/noArrayIndexKey: Tab order is static
+							key={index}
+							onClick={() => setActiveTab(index)}
+							className={cn(
+								"px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200",
+								activeTab === index
+									? "bg-primary text-primary-foreground"
+									: "text-muted-foreground hover:text-foreground hover:bg-muted",
+							)}
+						>
+							{tab.name}
+						</button>
+					))}
+				</div>
+
+				{/* Tab Content */}
+				<div className="grid lg:grid-cols-2 gap-12 items-center">
+					{/* Stats Side */}
+					<div className="industry-tab-content">
+						{activeTabData?.stat && (
+							<div className="mb-6">
+								<span className="text-6xl md:text-7xl lg:text-8xl font-bold text-primary leading-none">
+									{activeTabData.stat}
+								</span>
+							</div>
+						)}
+
+						{activeTabData?.statLabel && (
+							<h3 className="text-2xl md:text-3xl font-semibold mb-4">{activeTabData.statLabel}</h3>
+						)}
+
+						{activeTabData?.description && (
+							<p className="text-lg text-muted-foreground mb-8">{activeTabData.description}</p>
+						)}
+
+						{activeTabData?.link?.label && <CMSLink {...activeTabData.link} />}
+					</div>
+
+					{/* Visual Side */}
+					<div className="relative hidden lg:block">
+						<div className="aspect-[4/3] rounded-2xl bg-gradient-to-br from-muted via-accent to-muted/50 overflow-hidden">
+							{hasMedia ? (
+								/* Uploaded Image */
+								<Media
+									resource={activeTabData.media}
+									imgClassName="w-full h-full object-cover"
+									size="(max-width: 1024px) 100vw, 50vw"
+								/>
+							) : (
+								/* Decorative Placeholder */
+								<>
+									{/* Decorative grid pattern */}
+									<div className="absolute inset-0 opacity-30">
+										<div
+											className="w-full h-full"
+											style={{
+												backgroundImage: `
+                          linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
+                          linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px)
+                        `,
+												backgroundSize: "40px 40px",
+											}}
+										/>
+									</div>
+
+									{/* Floating stat card */}
+									<div className="absolute bottom-8 left-8 right-8">
+										<div className="bg-card border border-border rounded-xl p-6 shadow-lg">
+											<div className="flex items-center gap-4">
+												<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
+													<span className="text-xl font-bold text-primary">
+														{activeTabData?.stat?.charAt(0)}
+													</span>
+												</div>
+												<div>
+													<p className="font-semibold">{activeTabData?.statLabel}</p>
+													<p className="text-sm text-muted-foreground">{activeTabData?.name}</p>
+												</div>
+											</div>
+										</div>
+									</div>
+								</>
+							)}
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	)
+}

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

@@ -0,0 +1,77 @@
+import type { Block } from "payload"
+
+import { link } from "@/fields/link"
+
+export const IndustryTabs: Block = {
+	slug: "industryTabs",
+	interfaceName: "IndustryTabsBlock",
+	fields: [
+		{
+			name: "heading",
+			type: "text",
+			label: "Section Heading",
+		},
+		{
+			name: "subheading",
+			type: "textarea",
+			label: "Section Subheading",
+		},
+		{
+			name: "tabs",
+			type: "array",
+			label: "Industry Tabs",
+			minRows: 2,
+			maxRows: 6,
+			fields: [
+				{
+					name: "name",
+					type: "text",
+					label: "Tab Name",
+					required: true,
+					admin: {
+						description: 'e.g., "Ecommerce and Retail"',
+					},
+				},
+				{
+					name: "stat",
+					type: "text",
+					label: "Stat Number",
+					required: true,
+					admin: {
+						description: 'e.g., "340%" or "$2M+"',
+					},
+				},
+				{
+					name: "statLabel",
+					type: "text",
+					label: "Stat Label",
+					required: true,
+					admin: {
+						description: 'e.g., "Higher conversion rates"',
+					},
+				},
+				{
+					name: "description",
+					type: "textarea",
+					label: "Description",
+				},
+				{
+					name: "media",
+					type: "upload",
+					relationTo: "media",
+					label: "Tab Image",
+					admin: {
+						description: "Optional image/illustration for this tab (recommended: 800x600)",
+					},
+				},
+				link({
+					appearances: ["default", "outline"],
+				}),
+			],
+		},
+	],
+	labels: {
+		plural: "Industry Tabs",
+		singular: "Industry Tabs",
+	},
+}

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

@@ -0,0 +1,95 @@
+"use client"
+
+import { Media } from "@/components/Media"
+import { cn } from "@/utilities/ui"
+import type React from "react"
+
+import type { LogoBannerBlock as LogoBannerBlockProps } from "@/payload-types"
+
+// Placeholder logos for initial setup (before real logos are added)
+const placeholderLogos = [
+	{ name: "TechCorp", initials: "TC" },
+	{ name: "StartupX", initials: "SX" },
+	{ name: "GrowthCo", initials: "GC" },
+	{ name: "InnovateLab", initials: "IL" },
+	{ name: "ScaleUp", initials: "SU" },
+	{ name: "VenturePro", initials: "VP" },
+]
+
+export const LogoBannerBlock: React.FC<LogoBannerBlockProps> = ({
+	heading,
+	logos,
+	style = "scroll",
+}) => {
+	const hasLogos = Array.isArray(logos) && logos.length > 0
+	const displayLogos = hasLogos ? logos : placeholderLogos
+
+	return (
+		<section className="py-12 md:py-16 border-y border-border/50">
+			<div className="container">
+				{heading && (
+					<p className="text-center text-sm text-muted-foreground mb-8 uppercase tracking-wider">
+						{heading}
+					</p>
+				)}
+
+				{style === "scroll" ? (
+					<div className="logo-scroll-container">
+						<div className="logo-scroll-track">
+							{/* Double the logos for seamless loop */}
+							{[...displayLogos, ...displayLogos].map((logo, index) => (
+								// biome-ignore lint/suspicious/noArrayIndexKey: Logos are duplicated for animation, index is required
+								<LogoItem key={index} logo={logo} hasLogos={hasLogos} />
+							))}
+						</div>
+					</div>
+				) : (
+					<div className="grid grid-cols-3 md:grid-cols-6 gap-8 items-center justify-items-center">
+						{displayLogos.map((logo, index) => (
+							// biome-ignore lint/suspicious/noArrayIndexKey: Logo order is static
+							<LogoItem key={index} logo={logo} hasLogos={hasLogos} />
+						))}
+					</div>
+				)}
+			</div>
+		</section>
+	)
+}
+
+interface LogoItemProps {
+	logo: {
+		name?: string | null
+		initials?: string
+		logo?: unknown
+	}
+	hasLogos: boolean
+}
+
+const LogoItem: React.FC<LogoItemProps> = ({ logo, hasLogos }) => {
+	const hasImage = hasLogos && logo.logo && typeof logo.logo === "object"
+
+	return (
+		<div
+			className={cn(
+				"logo-item flex items-center justify-center px-6 md:px-8",
+				"grayscale hover:grayscale-0 transition-all duration-300",
+			)}
+		>
+			{hasImage ? (
+				<Media
+					resource={logo.logo as Parameters<typeof Media>[0]["resource"]}
+					imgClassName="h-8 md:h-10 w-auto object-contain opacity-60 hover:opacity-100 transition-opacity"
+				/>
+			) : (
+				<div className="flex items-center gap-2">
+					<span className="w-8 h-8 rounded bg-muted flex items-center justify-center text-xs font-bold text-foreground">
+						{"initials" in logo ? logo.initials : logo.name?.slice(0, 2).toUpperCase()}
+					</span>
+					<span className="text-sm font-medium text-muted-foreground hidden md:block">
+						{logo.name}
+					</span>
+				</div>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,48 @@
+import type { Block } from "payload"
+
+export const LogoBanner: Block = {
+	slug: "logoBanner",
+	interfaceName: "LogoBannerBlock",
+	fields: [
+		{
+			name: "heading",
+			type: "text",
+			label: "Heading",
+			defaultValue: "Trusted by entrepreneurs worldwide",
+		},
+		{
+			name: "logos",
+			type: "array",
+			label: "Logos",
+			minRows: 1,
+			maxRows: 12,
+			fields: [
+				{
+					name: "name",
+					type: "text",
+					required: true,
+					label: "Company Name",
+				},
+				{
+					name: "logo",
+					type: "upload",
+					relationTo: "media",
+					label: "Logo Image",
+				},
+			],
+		},
+		{
+			name: "style",
+			type: "select",
+			defaultValue: "scroll",
+			options: [
+				{ label: "Scrolling", value: "scroll" },
+				{ label: "Static Grid", value: "grid" },
+			],
+		},
+	],
+	labels: {
+		plural: "Logo Banners",
+		singular: "Logo Banner",
+	},
+}

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

@@ -0,0 +1,67 @@
+import type { StaticImageData } from "next/image"
+
+import RichText from "@/components/RichText"
+import { cn } from "@/utilities/ui"
+import type React from "react"
+
+import type { MediaBlock as MediaBlockProps } from "@/payload-types"
+
+import { Media } from "../../components/Media"
+
+type Props = MediaBlockProps & {
+	breakout?: boolean
+	captionClassName?: string
+	className?: string
+	enableGutter?: boolean
+	imgClassName?: string
+	staticImage?: StaticImageData
+	disableInnerContainer?: boolean
+}
+
+export const MediaBlock: React.FC<Props> = (props) => {
+	const {
+		captionClassName,
+		className,
+		enableGutter = true,
+		imgClassName,
+		media,
+		staticImage,
+		disableInnerContainer,
+	} = props
+
+	let caption
+	if (media && typeof media === "object") caption = media.caption
+
+	return (
+		<div
+			className={cn(
+				"",
+				{
+					container: enableGutter,
+				},
+				className,
+			)}
+		>
+			{(media || staticImage) && (
+				<Media
+					imgClassName={cn("border border-border rounded-[0.8rem]", imgClassName)}
+					resource={media}
+					src={staticImage}
+				/>
+			)}
+			{caption && (
+				<div
+					className={cn(
+						"mt-6",
+						{
+							container: !disableInnerContainer,
+						},
+						captionClassName,
+					)}
+				>
+					<RichText data={caption} enableGutter={false} />
+				</div>
+			)}
+		</div>
+	)
+}

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

@@ -0,0 +1,14 @@
+import type { Block } from "payload"
+
+export const MediaBlock: Block = {
+	slug: "mediaBlock",
+	interfaceName: "MediaBlock",
+	fields: [
+		{
+			name: "media",
+			type: "upload",
+			relationTo: "media",
+			required: true,
+		},
+	],
+}

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

@@ -0,0 +1,69 @@
+import {
+	Award,
+	Briefcase,
+	Building,
+	Code,
+	Lightbulb,
+	type LucideIcon,
+	TrendingUp,
+	User,
+	Users,
+} from "lucide-react"
+import type React from "react"
+
+import type { PersonasBlock as PersonasBlockProps } from "@/payload-types"
+
+import RichText from "@/components/RichText"
+
+const iconMap: Record<string, LucideIcon> = {
+	user: User,
+	briefcase: Briefcase,
+	users: Users,
+	award: Award,
+	building: Building,
+	lightbulb: Lightbulb,
+	trendingUp: TrendingUp,
+	code: Code,
+}
+
+export const PersonasBlock: React.FC<PersonasBlockProps> = ({ heading, subheading, personas }) => {
+	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(personas) && personas.length > 0 && (
+					<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+						{personas.map((persona, index) => {
+							const Icon = persona.icon ? iconMap[persona.icon] : User
+
+							return (
+								<div
+									key={index}
+									className="text-center p-8 rounded-lg border border-border bg-card hover:shadow-lg transition-shadow"
+								>
+									{Icon && (
+										<div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
+											<Icon className="w-8 h-8 text-primary" />
+										</div>
+									)}
+									{persona.title && <h3 className="text-xl font-semibold mb-2">{persona.title}</h3>}
+									{persona.description && (
+										<div className="text-muted-foreground text-sm">
+											<RichText data={persona.description} enableGutter={false} />
+										</div>
+									)}
+								</div>
+							)
+						})}
+					</div>
+				)}
+			</div>
+		</section>
+	)
+}

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

@@ -0,0 +1,96 @@
+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 Personas: Block = {
+	slug: "personas",
+	interfaceName: "PersonasBlock",
+	fields: [
+		{
+			name: "heading",
+			type: "text",
+			label: "Section Heading",
+			defaultValue: "Who It's For",
+		},
+		{
+			name: "subheading",
+			type: "textarea",
+			label: "Section Subheading",
+		},
+		{
+			name: "personas",
+			type: "array",
+			label: "Personas",
+			minRows: 1,
+			maxRows: 8,
+			fields: [
+				{
+					name: "icon",
+					type: "select",
+					options: [
+						{ label: "User", value: "user" },
+						{ label: "Briefcase", value: "briefcase" },
+						{ label: "Users", value: "users" },
+						{ label: "Award", value: "award" },
+						{ label: "Building", value: "building" },
+						{ label: "Lightbulb", value: "lightbulb" },
+						{ label: "TrendingUp", value: "trendingUp" },
+						{ label: "Code", value: "code" },
+					],
+				},
+				{
+					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: "Personas Sections",
+		singular: "Personas",
+	},
+}