Merge pull request #322 from guillermoscript/feat/puck-vertical-template-packs

feat(puck): 5 vertical landing-page template packs

Author: guillermoscript

components/admin/landing-page/template-picker.tsx

@@ -41,6 +41,10 @@ const CATEGORY_COLORS: Record<string, string> = {
   creative: 'bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20',
   business: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20',
   'code-school': 'bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20',
+  'language-school': 'bg-teal-500/10 text-teal-600 dark:text-teal-400 border-teal-500/20',
+  fitness: 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20',
+  music: 'bg-fuchsia-500/10 text-fuchsia-600 dark:text-fuchsia-400 border-fuchsia-500/20',
+  design: 'bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20',
 }
 
 export function TemplatePicker({ open, onClose, templates, onSelect, loading }: Props) {

lib/puck/templates/_shared.ts

@@ -0,0 +1,48 @@
+import type { Data } from '@measured/puck'
+import { sectionSpacingDefaults } from '../utils/section-spacing'
+
+export interface PuckTemplate {
+  name: string
+  description: string
+  category: string
+  puck_data: Data
+  sort_order: number
+  pageType: string
+}
+
+// LMS component types that use section spacing — these get the shared
+// spacing defaults injected so vertical templates render with consistent
+// vertical rhythm without repeating the spacing props on every block.
+const SPACED_COMPONENTS = new Set([
+  'FeaturesGrid', 'CourseGrid', 'TestimonialGrid', 'CtaBlock',
+  'PricingTable', 'FaqAccordion', 'StatsCounter', 'ContactForm',
+  'LogoCloud', 'Banner', 'TeamGrid', 'ImageGallery', 'SocialProof',
+])
+
+// Module-level counter for stable, unique build-time IDs. Real per-instance
+// IDs are regenerated when a template is applied (see deepCloneWithFreshIds).
+let idCounter = 0
+
+/** Build a Puck content node with an auto-generated id + spacing defaults. */
+export function c(type: string, props: Record<string, unknown>, id?: string) {
+  const spacing = SPACED_COMPONENTS.has(type) ? sectionSpacingDefaults : {}
+  return { type, props: { id: id || `${type}-tpl-${++idCounter}`, ...spacing, ...props } }
+}
+
+/** Deep-clone a template's puck_data and assign fresh random IDs to all components. */
+export function deepCloneWithFreshIds(data: Data): Data {
+  const cloned = JSON.parse(JSON.stringify(data)) as Data
+  for (const item of cloned.content) {
+    if (item.props?.id) {
+      item.props.id = `${item.type}-${Math.random().toString(36).slice(2, 10)}`
+    }
+  }
+  for (const zoneItems of Object.values(cloned.zones || {})) {
+    for (const item of zoneItems as Array<{ type: string; props: Record<string, unknown> }>) {
+      if (item.props?.id) {
+        item.props.id = `${item.type}-${Math.random().toString(36).slice(2, 10)}`
+      }
+    }
+  }
+  return cloned
+}

lib/puck/templates/business-coaching.ts

@@ -1,47 +1,14 @@
-import type { Data } from '@measured/puck'
-import { sectionSpacingDefaults } from '../utils/section-spacing'
+import { c, deepCloneWithFreshIds, type PuckTemplate } from './_shared'
+import { languageSchoolTemplates } from './language-school'
+import { fitnessStudioTemplates } from './fitness-studio'
+import { musicAcademyTemplates } from './music-academy'
+import { businessCoachingTemplates } from './business-coaching'
+import { designSchoolTemplates } from './design-school'
 
-export interface PuckTemplate {
-  name: string
-  description: string
-  category: string
-  puck_data: Data
-  sort_order: number
-  pageType: string
-}
-
-// Counter to generate unique-per-template IDs at module level.
-// Fresh IDs are generated when templates are applied via deepCloneWithFreshIds().
-// LMS component types that use section spacing
-const SPACED_COMPONENTS = new Set([
-  'FeaturesGrid', 'CourseGrid', 'TestimonialGrid', 'CtaBlock',
-  'PricingTable', 'FaqAccordion', 'StatsCounter', 'ContactForm',
-  'LogoCloud', 'Banner', 'TeamGrid', 'ImageGallery', 'SocialProof',
-])
-
-let idCounter = 0
-function c(type: string, props: Record<string, unknown>, id?: string) {
-  const spacing = SPACED_COMPONENTS.has(type) ? sectionSpacingDefaults : {}
-  return { type, props: { id: id || `${type}-tpl-${++idCounter}`, ...spacing, ...props } }
-}
-
-/** Deep-clone a template's puck_data and assign fresh random IDs to all components */
-export function deepCloneWithFreshIds(data: Data): Data {
-  const cloned = JSON.parse(JSON.stringify(data)) as Data
-  for (const item of cloned.content) {
-    if (item.props?.id) {
-      item.props.id = `${item.type}-${Math.random().toString(36).slice(2, 10)}`
-    }
-  }
-  for (const zoneItems of Object.values(cloned.zones || {})) {
-    for (const item of zoneItems as Array<{ type: string; props: Record<string, unknown> }>) {
-      if (item.props?.id) {
-        item.props.id = `${item.type}-${Math.random().toString(36).slice(2, 10)}`
-      }
-    }
-  }
-  return cloned
-}
+// Re-export shared helpers so existing importers (`@/lib/puck/templates`)
+// keep working unchanged.
+export { deepCloneWithFreshIds }
+export type { PuckTemplate }
 
 // ─── Blank Template ──────────────────────────────────────────────────────────
 
@@ -1136,4 +1103,10 @@ export const PUCK_TEMPLATES: PuckTemplate[] = [
   codeSchoolFaqTemplate,
   codeSchoolContactTemplate,
   codeSchoolCatalogTemplate,
+  // Vertical packs (Home / About / FAQ / Contact each)
+  ...languageSchoolTemplates,
+  ...fitnessStudioTemplates,
+  ...musicAcademyTemplates,
+  ...businessCoachingTemplates,
+  ...designSchoolTemplates,
 ]