update admin dashboard & landing page editor

apps/next/payload-types.ts

@@ -281,7 +281,12 @@ export interface PayloadMigrationsSelect<T extends boolean = true> {
  */
 export interface LandingPage {
   id: number;
-  hero?: {
+  /**
+   * Add, remove, and reorder landing page sections while keeping live preview and autosave.
+   */
+  layout?:
+    | (
+        | {
             badgeEmoji?: string | null;
             badgeText?: string | null;
             headingPrefix?: string | null;
@@ -297,8 +302,11 @@ export interface LandingPage {
                   id?: string | null;
                 }[]
               | null;
-  };
+            id?: string | null;
-  features?: {
+            blockName?: string | null;
+            blockType: 'hero';
+          }
+        | {
             heading?: string | null;
             description?: string | null;
             items?:
@@ -309,8 +317,11 @@ export interface LandingPage {
                   id?: string | null;
                 }[]
               | null;
-  };
+            id?: string | null;
-  techStack?: {
+            blockName?: string | null;
+            blockType: 'features';
+          }
+        | {
             heading?: string | null;
             description?: string | null;
             categories?:
@@ -326,13 +337,21 @@ export interface LandingPage {
                   id?: string | null;
                 }[]
               | null;
-  };
+            id?: string | null;
-  cta?: {
+            blockName?: string | null;
+            blockType: 'techStack';
+          }
+        | {
             heading?: string | null;
             description?: string | null;
             commandLabel?: string | null;
             command?: string | null;
-  };
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'cta';
+          }
+      )[]
+    | null;
   _status?: ('draft' | 'published') | null;
   updatedAt?: string | null;
   createdAt?: string | null;
@@ -342,6 +361,9 @@ export interface LandingPage {
  * via the `definition` "landing-page_select".
  */
 export interface LandingPageSelect<T extends boolean = true> {
+  layout?:
+    | T
+    | {
         hero?:
           | T
           | {
@@ -362,6 +384,8 @@ export interface LandingPageSelect<T extends boolean = true> {
                     label?: T;
                     id?: T;
                   };
+              id?: T;
+              blockName?: T;
             };
         features?:
           | T
@@ -376,6 +400,8 @@ export interface LandingPageSelect<T extends boolean = true> {
                     description?: T;
                     id?: T;
                   };
+              id?: T;
+              blockName?: T;
             };
         techStack?:
           | T
@@ -395,6 +421,8 @@ export interface LandingPageSelect<T extends boolean = true> {
                         };
                     id?: T;
                   };
+              id?: T;
+              blockName?: T;
             };
         cta?:
           | T
@@ -403,6 +431,9 @@ export interface LandingPageSelect<T extends boolean = true> {
               description?: T;
               commandLabel?: T;
               command?: T;
+              id?: T;
+              blockName?: T;
+            };
       };
   _status?: T;
   updatedAt?: T;

apps/next/src/app/(frontend)/page.tsx

@@ -1,4 +1,4 @@
-import { CTA, Features, Hero, TechStack } from '@/components/landing';
+import { LandingPageBuilder } from '@/components/landing';
 import { RefreshRouteOnSave } from '@/components/payload/refresh-route-on-save';
 import { getLandingPageContent } from '@/lib/payload/get-landing-page-content';
 
@@ -19,10 +19,7 @@ const Home = async ({ searchParams }: HomeProps) => {
   return (
     <main className='flex min-h-screen flex-col'>
       {isPreview ? <RefreshRouteOnSave /> : null}
-      <Hero content={content.hero} />
+      <LandingPageBuilder blocks={content.layout} />
-      <Features content={content.features} />
-      <TechStack content={content.techStack} />
-      <CTA content={content.cta} />
     </main>
   );
 };

apps/next/src/components/landing/content.ts

@@ -46,15 +46,86 @@ export interface LandingCtaContent {
   command: string;
 }
 
-export interface LandingPageContent {
+export interface LandingBlockMetadata {
-  hero: LandingHeroContent;
+  id?: string;
-  features: LandingFeaturesContent;
+  blockName?: string;
-  techStack: LandingTechStackContent;
-  cta: LandingCtaContent;
 }
 
-export const defaultLandingPageContent: LandingPageContent = {
+export interface LandingHeroBlock
-  hero: {
+  extends LandingHeroContent, LandingBlockMetadata {
+  blockType: 'hero';
+}
+
+export interface LandingFeaturesBlock
+  extends LandingFeaturesContent, LandingBlockMetadata {
+  blockType: 'features';
+}
+
+export interface LandingTechStackBlock
+  extends LandingTechStackContent, LandingBlockMetadata {
+  blockType: 'techStack';
+}
+
+export interface LandingCtaBlock
+  extends LandingCtaContent, LandingBlockMetadata {
+  blockType: 'cta';
+}
+
+export type LandingPageBlock =
+  | LandingHeroBlock
+  | LandingFeaturesBlock
+  | LandingTechStackBlock
+  | LandingCtaBlock;
+
+export interface LandingPageContent {
+  layout: LandingPageBlock[];
+}
+
+interface PayloadLandingHeroRow {
+  blockType: 'hero';
+  badgeEmoji: string;
+  badgeText: string;
+  headingPrefix: string;
+  headingHighlight: string;
+  description: string;
+  primaryCta: {
+    label: string;
+    url: string;
+  };
+  highlights: Array<{
+    label: string;
+  }>;
+}
+
+interface PayloadLandingFeaturesRow {
+  blockType: 'features';
+  heading: string;
+  description: string;
+  items: LandingFeatureItem[];
+}
+
+interface PayloadLandingTechStackRow {
+  blockType: 'techStack';
+  heading: string;
+  description: string;
+  categories: LandingTechCategory[];
+}
+
+interface PayloadLandingCtaRow {
+  blockType: 'cta';
+  heading: string;
+  description: string;
+  commandLabel: string;
+  command: string;
+}
+
+export type PayloadLandingPageRow =
+  | PayloadLandingHeroRow
+  | PayloadLandingFeaturesRow
+  | PayloadLandingTechStackRow
+  | PayloadLandingCtaRow;
+
+export const defaultLandingHeroContent: LandingHeroContent = {
   badgeEmoji: '🚀',
   badgeText: 'Production-ready monorepo template',
   headingPrefix: 'Build Full-Stack Apps with',
@@ -66,8 +137,9 @@ export const defaultLandingPageContent: LandingPageContent = {
     url: 'https://git.gbrown.org/gib/convex-monorepo',
   },
   highlights: ['TypeScript', 'Self-Hosted', 'Real-time', 'Auth Included'],
-  },
+};
-  features: {
+
+export const defaultLandingFeaturesContent: LandingFeaturesContent = {
   heading: 'Everything You Need to Ship Fast',
   description:
     'A complete monorepo template with all the tools and patterns you need for production-ready applications.',
@@ -127,8 +199,9 @@ export const defaultLandingPageContent: LandingPageContent = {
       icon: '⚙️',
     },
   ],
-  },
+};
-  techStack: {
+
+export const defaultLandingTechStackContent: LandingTechStackContent = {
   heading: 'Modern Tech Stack',
   description:
     'Built with the latest and greatest tools for maximum productivity and performance.',
@@ -175,21 +248,29 @@ export const defaultLandingPageContent: LandingPageContent = {
       ],
     },
   ],
-  },
+};
-  cta: {
+
+export const defaultLandingCtaContent: LandingCtaContent = {
   heading: 'Ready to Build Something Amazing?',
   description:
     'Clone the repository and start building your next project with everything pre-configured.',
   commandLabel: 'Quick Start',
   command:
     'git clone https://git.gbrown.org/gib/convex-monorepo.git\ncd convex-monorepo\nbun i',
-  },
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === 'object' && value !== null;
 };
 
 const sanitizeString = (value: unknown, fallback: string) => {
   return typeof value === 'string' && value.length > 0 ? value : fallback;
 };
 
+const sanitizeOptionalString = (value: unknown) => {
+  return typeof value === 'string' && value.length > 0 ? value : undefined;
+};
+
 const sanitizeStringArray = (value: unknown, fallback: string[]) => {
   if (!Array.isArray(value)) return fallback;
 
@@ -197,9 +278,7 @@ const sanitizeStringArray = (value: unknown, fallback: string[]) => {
     .map((item) => {
       if (typeof item === 'string' && item.length > 0) return item;
       if (
-        typeof item === 'object' &&
+        isRecord(item) &&
-        item !== null &&
-        'label' in item &&
         typeof item.label === 'string' &&
         item.label.length > 0
       ) {
@@ -213,154 +292,283 @@ const sanitizeStringArray = (value: unknown, fallback: string[]) => {
   return items.length > 0 ? items : fallback;
 };
 
-export const mergeLandingPageContent = (
+const sanitizeBlockMetadata = (value: unknown): LandingBlockMetadata => {
-  value: Partial<LandingPageContent> | null | undefined,
+  if (!isRecord(value)) return {};
-): LandingPageContent => {
+
-  const defaultFeatureFallback = {
+  return {
+    id: sanitizeOptionalString(value.id),
+    blockName: sanitizeOptionalString(value.blockName),
+  };
+};
+
+const sanitizeFeatureItems = (
+  value: unknown,
+  fallback: LandingFeatureItem[],
+): LandingFeatureItem[] => {
+  if (!Array.isArray(value)) return fallback;
+
+  const items = value
+    .map((item, index) => {
+      if (!isRecord(item)) return null;
+
+      const fallbackItem = fallback[index] ?? {
         title: '',
         description: '',
         icon: '',
       };
-  const defaultTechCategoryFallback = {
+
+      return {
+        title: sanitizeString(item.title, fallbackItem.title),
+        description: sanitizeString(item.description, fallbackItem.description),
+        icon: sanitizeString(item.icon, fallbackItem.icon),
+      };
+    })
+    .filter((item): item is LandingFeatureItem => item !== null);
+
+  return items.length > 0 ? items : fallback;
+};
+
+const sanitizeTechCategories = (
+  value: unknown,
+  fallback: LandingTechCategory[],
+): LandingTechCategory[] => {
+  if (!Array.isArray(value)) return fallback;
+
+  const categories = value
+    .map((category, categoryIndex) => {
+      if (!isRecord(category)) return null;
+
+      const fallbackCategory = fallback[categoryIndex] ?? {
         category: '',
         technologies: [{ name: '', description: '' }],
       };
-  const defaultTechItemFallback = { name: '', description: '' };
+
-  const heroValue = value?.hero;
+      const technologies = Array.isArray(category.technologies)
-  const featuresValue = value?.features;
+        ? category.technologies
-  const techStackValue = value?.techStack;
+            .map((technology, technologyIndex) => {
-  const ctaValue = value?.cta;
+              if (!isRecord(technology)) return null;
+
+              const fallbackTechnology = fallbackCategory.technologies[
+                technologyIndex
+              ] ?? {
+                name: '',
+                description: '',
+              };
 
               return {
-    hero: {
+                name: sanitizeString(technology.name, fallbackTechnology.name),
+                description: sanitizeString(
+                  technology.description,
+                  fallbackTechnology.description,
+                ),
+              };
+            })
+            .filter((item): item is LandingTechItem => item !== null)
+        : fallbackCategory.technologies;
+
+      return {
+        category: sanitizeString(category.category, fallbackCategory.category),
+        technologies:
+          technologies.length > 0
+            ? technologies
+            : fallbackCategory.technologies,
+      };
+    })
+    .filter((item): item is LandingTechCategory => item !== null);
+
+  return categories.length > 0 ? categories : fallback;
+};
+
+const sanitizeHeroBlock = (value: unknown): LandingHeroBlock => {
+  const metadata = sanitizeBlockMetadata(value);
+  const source = isRecord(value) ? value : {};
+
+  return {
+    blockType: 'hero',
+    ...metadata,
     badgeEmoji: sanitizeString(
-        heroValue?.badgeEmoji,
+      source.badgeEmoji,
-        defaultLandingPageContent.hero.badgeEmoji,
+      defaultLandingHeroContent.badgeEmoji,
     ),
     badgeText: sanitizeString(
-        heroValue?.badgeText,
+      source.badgeText,
-        defaultLandingPageContent.hero.badgeText,
+      defaultLandingHeroContent.badgeText,
     ),
     headingPrefix: sanitizeString(
-        heroValue?.headingPrefix,
+      source.headingPrefix,
-        defaultLandingPageContent.hero.headingPrefix,
+      defaultLandingHeroContent.headingPrefix,
     ),
     headingHighlight: sanitizeString(
-        heroValue?.headingHighlight,
+      source.headingHighlight,
-        defaultLandingPageContent.hero.headingHighlight,
+      defaultLandingHeroContent.headingHighlight,
     ),
     description: sanitizeString(
-        heroValue?.description,
+      source.description,
-        defaultLandingPageContent.hero.description,
+      defaultLandingHeroContent.description,
     ),
     primaryCta: {
       label: sanitizeString(
-          heroValue?.primaryCta?.label,
+        isRecord(source.primaryCta) ? source.primaryCta.label : undefined,
-          defaultLandingPageContent.hero.primaryCta.label,
+        defaultLandingHeroContent.primaryCta.label,
       ),
       url: sanitizeString(
-          heroValue?.primaryCta?.url,
+        isRecord(source.primaryCta) ? source.primaryCta.url : undefined,
-          defaultLandingPageContent.hero.primaryCta.url,
+        defaultLandingHeroContent.primaryCta.url,
       ),
     },
     highlights: sanitizeStringArray(
-        heroValue?.highlights,
+      source.highlights,
-        defaultLandingPageContent.hero.highlights,
+      defaultLandingHeroContent.highlights,
     ),
-    },
+  };
-    features: {
+};
+
+const sanitizeFeaturesBlock = (value: unknown): LandingFeaturesBlock => {
+  const metadata = sanitizeBlockMetadata(value);
+  const source = isRecord(value) ? value : {};
+
+  return {
+    blockType: 'features',
+    ...metadata,
     heading: sanitizeString(
-        featuresValue?.heading,
+      source.heading,
-        defaultLandingPageContent.features.heading,
+      defaultLandingFeaturesContent.heading,
     ),
     description: sanitizeString(
-        featuresValue?.description,
+      source.description,
-        defaultLandingPageContent.features.description,
+      defaultLandingFeaturesContent.description,
     ),
-      items:
+    items: sanitizeFeatureItems(
-        Array.isArray(featuresValue?.items) && featuresValue.items.length > 0
+      source.items,
-          ? featuresValue.items.map((item, index) => ({
+      defaultLandingFeaturesContent.items,
-              title: sanitizeString(
-                item?.title,
-                defaultLandingPageContent.features.items[index]?.title ??
-                  defaultFeatureFallback.title,
     ),
-              description: sanitizeString(
+  };
-                item?.description,
+};
-                defaultLandingPageContent.features.items[index]?.description ??
+
-                  defaultFeatureFallback.description,
+const sanitizeTechStackBlock = (value: unknown): LandingTechStackBlock => {
-              ),
+  const metadata = sanitizeBlockMetadata(value);
-              icon: sanitizeString(
+  const source = isRecord(value) ? value : {};
-                item?.icon,
+
-                defaultLandingPageContent.features.items[index]?.icon ??
+  return {
-                  defaultFeatureFallback.icon,
+    blockType: 'techStack',
-              ),
+    ...metadata,
-            }))
-          : defaultLandingPageContent.features.items,
-    },
-    techStack: {
     heading: sanitizeString(
-        techStackValue?.heading,
+      source.heading,
-        defaultLandingPageContent.techStack.heading,
+      defaultLandingTechStackContent.heading,
     ),
     description: sanitizeString(
-        techStackValue?.description,
+      source.description,
-        defaultLandingPageContent.techStack.description,
+      defaultLandingTechStackContent.description,
     ),
-      categories:
+    categories: sanitizeTechCategories(
-        Array.isArray(techStackValue?.categories) &&
+      source.categories,
-        techStackValue.categories.length > 0
+      defaultLandingTechStackContent.categories,
-          ? techStackValue.categories.map((category, categoryIndex) => ({
-              category: sanitizeString(
-                category?.category,
-                defaultLandingPageContent.techStack.categories[categoryIndex]
-                  ?.category ?? defaultTechCategoryFallback.category,
-              ),
-              technologies:
-                Array.isArray(category?.technologies) &&
-                category.technologies.length > 0
-                  ? category.technologies.map(
-                      (technology, technologyIndex) => ({
-                        name: sanitizeString(
-                          technology?.name,
-                          defaultLandingPageContent.techStack.categories[
-                            categoryIndex
-                          ]?.technologies[technologyIndex]?.name ??
-                            defaultTechItemFallback.name,
     ),
+  };
+};
+
+const sanitizeCtaBlock = (value: unknown): LandingCtaBlock => {
+  const metadata = sanitizeBlockMetadata(value);
+  const source = isRecord(value) ? value : {};
+
+  return {
+    blockType: 'cta',
+    ...metadata,
+    heading: sanitizeString(source.heading, defaultLandingCtaContent.heading),
     description: sanitizeString(
-                          technology?.description,
+      source.description,
-                          defaultLandingPageContent.techStack.categories[
+      defaultLandingCtaContent.description,
-                            categoryIndex
-                          ]?.technologies[technologyIndex]?.description ??
-                            defaultTechItemFallback.description,
-                        ),
-                      }),
-                    )
-                  : (defaultLandingPageContent.techStack.categories[
-                      categoryIndex
-                    ]?.technologies ??
-                    defaultTechCategoryFallback.technologies),
-            }))
-          : defaultLandingPageContent.techStack.categories,
-    },
-    cta: {
-      heading: sanitizeString(
-        ctaValue?.heading,
-        defaultLandingPageContent.cta.heading,
-      ),
-      description: sanitizeString(
-        ctaValue?.description,
-        defaultLandingPageContent.cta.description,
     ),
     commandLabel: sanitizeString(
-        ctaValue?.commandLabel,
+      source.commandLabel,
-        defaultLandingPageContent.cta.commandLabel,
+      defaultLandingCtaContent.commandLabel,
-      ),
-      command: sanitizeString(
-        ctaValue?.command,
-        defaultLandingPageContent.cta.command,
     ),
+    command: sanitizeString(source.command, defaultLandingCtaContent.command),
+  };
+};
+
+const sanitizeLayout = (value: unknown): LandingPageBlock[] => {
+  if (!Array.isArray(value)) return [];
+
+  return value
+    .map((block) => {
+      if (!isRecord(block) || typeof block.blockType !== 'string') return null;
+
+      switch (block.blockType) {
+        case 'hero': {
+          return sanitizeHeroBlock(block);
+        }
+        case 'features': {
+          return sanitizeFeaturesBlock(block);
+        }
+        case 'techStack': {
+          return sanitizeTechStackBlock(block);
+        }
+        case 'cta': {
+          return sanitizeCtaBlock(block);
+        }
+        default: {
+          return null;
+        }
+      }
+    })
+    .filter((block): block is LandingPageBlock => block !== null);
+};
+
+const buildLegacyLandingPageLayout = (value: unknown): LandingPageBlock[] => {
+  const source = isRecord(value) ? value : {};
+
+  return [
+    sanitizeHeroBlock(source.hero),
+    sanitizeFeaturesBlock(source.features),
+    sanitizeTechStackBlock(source.techStack),
+    sanitizeCtaBlock(source.cta),
+  ];
+};
+
+export const createDefaultLandingPageLayout = (): LandingPageBlock[] => {
+  return buildLegacyLandingPageLayout({
+    hero: defaultLandingHeroContent,
+    features: defaultLandingFeaturesContent,
+    techStack: defaultLandingTechStackContent,
+    cta: defaultLandingCtaContent,
+  });
+};
+
+export const createDefaultLandingPageLayoutForPayload =
+  (): PayloadLandingPageRow[] => {
+    return [
+      {
+        blockType: 'hero',
+        ...defaultLandingHeroContent,
+        highlights: defaultLandingHeroContent.highlights.map((label) => ({
+          label,
+        })),
       },
+      {
+        blockType: 'features',
+        ...defaultLandingFeaturesContent,
+      },
+      {
+        blockType: 'techStack',
+        ...defaultLandingTechStackContent,
+      },
+      {
+        blockType: 'cta',
+        ...defaultLandingCtaContent,
+      },
+    ];
+  };
+
+export const defaultLandingPageContent: LandingPageContent = {
+  layout: createDefaultLandingPageLayout(),
+};
+
+export const mergeLandingPageContent = (value: unknown): LandingPageContent => {
+  const source = isRecord(value) ? value : {};
+  const layout = sanitizeLayout(source.layout);
+
+  return {
+    layout: layout.length > 0 ? layout : buildLegacyLandingPageLayout(source),
   };
 };

apps/next/src/components/landing/index.tsx

@@ -2,3 +2,4 @@ export { Hero } from './hero';
 export { Features } from './features';
 export { TechStack } from './tech-stack';
 export { CTA } from './cta';
+export { LandingPageBuilder } from './page-builder';

apps/next/src/components/landing/page-builder.tsx

@@ -0,0 +1,33 @@
+import type { LandingPageBlock } from './content';
+import { CTA } from './cta';
+import { Features } from './features';
+import { Hero } from './hero';
+import { TechStack } from './tech-stack';
+
+interface LandingPageBuilderProps {
+  blocks: LandingPageBlock[];
+}
+
+export const LandingPageBuilder = ({ blocks }: LandingPageBuilderProps) => {
+  return blocks.map((block, index) => {
+    const key = block.id ?? `${block.blockType}-${index}`;
+
+    switch (block.blockType) {
+      case 'hero': {
+        return <Hero key={key} content={block} />;
+      }
+      case 'features': {
+        return <Features key={key} content={block} />;
+      }
+      case 'techStack': {
+        return <TechStack key={key} content={block} />;
+      }
+      case 'cta': {
+        return <CTA key={key} content={block} />;
+      }
+      default: {
+        return null;
+      }
+    }
+  });
+};

apps/next/src/lib/payload/get-landing-page-content.ts

@@ -1,9 +1,6 @@
 import type { LandingPageContent } from '@/components/landing/content';
 import { cache } from 'react';
-import {
+import { mergeLandingPageContent } from '@/components/landing/content';
-  defaultLandingPageContent,
-  mergeLandingPageContent,
-} from '@/components/landing/content';
 
 import { getPayloadClient } from './get-payload';
 
@@ -19,9 +16,6 @@ export const getLandingPageContent = cache(
       }
     ).findGlobal({ slug: 'landing-page', draft: isPreview });
 
-    return mergeLandingPageContent(
+    return mergeLandingPageContent(landingPage as Partial<LandingPageContent>);
-      (landingPage as Partial<LandingPageContent> | null | undefined) ??
-        defaultLandingPageContent,
-    );
   },
 );

apps/next/src/payload/globals/landing-page-blocks.ts

@@ -0,0 +1,186 @@
+import type { Block } from 'payload';
+
+import {
+  defaultLandingCtaContent,
+  defaultLandingFeaturesContent,
+  defaultLandingHeroContent,
+  defaultLandingTechStackContent,
+} from '../../components/landing/content';
+
+export const landingPageBlocks: Block[] = [
+  {
+    slug: 'hero',
+    labels: {
+      singular: 'Hero Section',
+      plural: 'Hero Sections',
+    },
+    fields: [
+      {
+        name: 'badgeEmoji',
+        type: 'text',
+        defaultValue: defaultLandingHeroContent.badgeEmoji,
+      },
+      {
+        name: 'badgeText',
+        type: 'text',
+        defaultValue: defaultLandingHeroContent.badgeText,
+      },
+      {
+        name: 'headingPrefix',
+        type: 'text',
+        defaultValue: defaultLandingHeroContent.headingPrefix,
+      },
+      {
+        name: 'headingHighlight',
+        type: 'text',
+        defaultValue: defaultLandingHeroContent.headingHighlight,
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        defaultValue: defaultLandingHeroContent.description,
+      },
+      {
+        name: 'primaryCta',
+        label: 'Primary CTA',
+        type: 'group',
+        fields: [
+          {
+            name: 'label',
+            type: 'text',
+            defaultValue: defaultLandingHeroContent.primaryCta.label,
+          },
+          {
+            name: 'url',
+            type: 'text',
+            defaultValue: defaultLandingHeroContent.primaryCta.url,
+          },
+        ],
+      },
+      {
+        name: 'highlights',
+        type: 'array',
+        defaultValue: defaultLandingHeroContent.highlights.map((label) => ({
+          label,
+        })),
+        fields: [
+          {
+            name: 'label',
+            type: 'text',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    slug: 'features',
+    labels: {
+      singular: 'Features Section',
+      plural: 'Features Sections',
+    },
+    fields: [
+      {
+        name: 'heading',
+        type: 'text',
+        defaultValue: defaultLandingFeaturesContent.heading,
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        defaultValue: defaultLandingFeaturesContent.description,
+      },
+      {
+        name: 'items',
+        type: 'array',
+        defaultValue: defaultLandingFeaturesContent.items,
+        fields: [
+          {
+            name: 'icon',
+            type: 'text',
+          },
+          {
+            name: 'title',
+            type: 'text',
+          },
+          {
+            name: 'description',
+            type: 'textarea',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    slug: 'techStack',
+    labels: {
+      singular: 'Tech Stack Section',
+      plural: 'Tech Stack Sections',
+    },
+    fields: [
+      {
+        name: 'heading',
+        type: 'text',
+        defaultValue: defaultLandingTechStackContent.heading,
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        defaultValue: defaultLandingTechStackContent.description,
+      },
+      {
+        name: 'categories',
+        type: 'array',
+        defaultValue: defaultLandingTechStackContent.categories,
+        fields: [
+          {
+            name: 'category',
+            type: 'text',
+          },
+          {
+            name: 'technologies',
+            type: 'array',
+            fields: [
+              {
+                name: 'name',
+                type: 'text',
+              },
+              {
+                name: 'description',
+                type: 'text',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    slug: 'cta',
+    labels: {
+      singular: 'CTA Section',
+      plural: 'CTA Sections',
+    },
+    fields: [
+      {
+        name: 'heading',
+        type: 'text',
+        defaultValue: defaultLandingCtaContent.heading,
+      },
+      {
+        name: 'description',
+        type: 'textarea',
+        defaultValue: defaultLandingCtaContent.description,
+      },
+      {
+        name: 'commandLabel',
+        type: 'text',
+        defaultValue: defaultLandingCtaContent.commandLabel,
+      },
+      {
+        name: 'command',
+        type: 'textarea',
+        defaultValue: defaultLandingCtaContent.command,
+      },
+    ],
+  },
+];

apps/next/src/payload/globals/landing-page.ts

@@ -1,6 +1,7 @@
 import type { GlobalConfig } from 'payload';
 
-import { defaultLandingPageContent } from '../../components/landing/content';
+import { createDefaultLandingPageLayoutForPayload } from '../../components/landing/content';
+import { landingPageBlocks } from './landing-page-blocks';
 
 export const LandingPage: GlobalConfig = {
   slug: 'landing-page',
@@ -42,194 +43,17 @@ export const LandingPage: GlobalConfig = {
   },
   fields: [
     {
-      type: 'tabs',
+      name: 'layout',
-      tabs: [
+      label: 'Layout Builder',
-        {
+      type: 'blocks',
-          label: 'Hero',
+      minRows: 1,
-          fields: [
+      defaultValue: () => createDefaultLandingPageLayoutForPayload(),
-            {
+      blocks: landingPageBlocks,
-              name: 'hero',
+      admin: {
-              type: 'group',
+        description:
-              fields: [
+          'Add, remove, and reorder landing page sections while keeping live preview and autosave.',
-                {
+        initCollapsed: true,
-                  name: 'badgeEmoji',
-                  type: 'text',
-                  defaultValue: defaultLandingPageContent.hero.badgeEmoji,
       },
-                {
-                  name: 'badgeText',
-                  type: 'text',
-                  defaultValue: defaultLandingPageContent.hero.badgeText,
-                },
-                {
-                  name: 'headingPrefix',
-                  type: 'text',
-                  defaultValue: defaultLandingPageContent.hero.headingPrefix,
-                },
-                {
-                  name: 'headingHighlight',
-                  type: 'text',
-                  defaultValue: defaultLandingPageContent.hero.headingHighlight,
-                },
-                {
-                  name: 'description',
-                  type: 'textarea',
-                  defaultValue: defaultLandingPageContent.hero.description,
-                },
-                {
-                  name: 'primaryCta',
-                  label: 'Primary CTA',
-                  type: 'group',
-                  fields: [
-                    {
-                      name: 'label',
-                      type: 'text',
-                      defaultValue:
-                        defaultLandingPageContent.hero.primaryCta.label,
-                    },
-                    {
-                      name: 'url',
-                      type: 'text',
-                      defaultValue:
-                        defaultLandingPageContent.hero.primaryCta.url,
-                    },
-                  ],
-                },
-                {
-                  name: 'highlights',
-                  type: 'array',
-                  defaultValue: defaultLandingPageContent.hero.highlights.map(
-                    (label) => ({ label }),
-                  ),
-                  fields: [
-                    {
-                      name: 'label',
-                      type: 'text',
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: 'Features',
-          fields: [
-            {
-              name: 'features',
-              type: 'group',
-              fields: [
-                {
-                  name: 'heading',
-                  type: 'text',
-                  defaultValue: defaultLandingPageContent.features.heading,
-                },
-                {
-                  name: 'description',
-                  type: 'textarea',
-                  defaultValue: defaultLandingPageContent.features.description,
-                },
-                {
-                  name: 'items',
-                  type: 'array',
-                  defaultValue: defaultLandingPageContent.features.items,
-                  fields: [
-                    {
-                      name: 'icon',
-                      type: 'text',
-                    },
-                    {
-                      name: 'title',
-                      type: 'text',
-                    },
-                    {
-                      name: 'description',
-                      type: 'textarea',
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: 'Tech Stack',
-          fields: [
-            {
-              name: 'techStack',
-              type: 'group',
-              fields: [
-                {
-                  name: 'heading',
-                  type: 'text',
-                  defaultValue: defaultLandingPageContent.techStack.heading,
-                },
-                {
-                  name: 'description',
-                  type: 'textarea',
-                  defaultValue: defaultLandingPageContent.techStack.description,
-                },
-                {
-                  name: 'categories',
-                  type: 'array',
-                  defaultValue: defaultLandingPageContent.techStack.categories,
-                  fields: [
-                    {
-                      name: 'category',
-                      type: 'text',
-                    },
-                    {
-                      name: 'technologies',
-                      type: 'array',
-                      fields: [
-                        {
-                          name: 'name',
-                          type: 'text',
-                        },
-                        {
-                          name: 'description',
-                          type: 'text',
-                        },
-                      ],
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: 'CTA',
-          fields: [
-            {
-              name: 'cta',
-              type: 'group',
-              fields: [
-                {
-                  name: 'heading',
-                  type: 'text',
-                  defaultValue: defaultLandingPageContent.cta.heading,
-                },
-                {
-                  name: 'description',
-                  type: 'textarea',
-                  defaultValue: defaultLandingPageContent.cta.description,
-                },
-                {
-                  name: 'commandLabel',
-                  type: 'text',
-                  defaultValue: defaultLandingPageContent.cta.commandLabel,
-                },
-                {
-                  name: 'command',
-                  type: 'textarea',
-                  defaultValue: defaultLandingPageContent.cta.command,
-                },
-              ],
-            },
-          ],
-        },
-      ],
     },
   ],
 };