feat: payload cms

src/payload/collections/FormSubmissions.ts

@@ -0,0 +1,67 @@
+import type { CollectionConfig } from 'payload';
+
+export const FormSubmissions: CollectionConfig = {
+  slug: 'form-submissions',
+  admin: {
+    useAsTitle: 'name',
+    defaultColumns: ['name', 'email', 'type', 'createdAt'],
+    description: 'Captured leads from Contact and Product Quote forms.',
+  },
+  access: {
+    // Only Admins can view and delete leads via dashboard.
+    read: ({ req: { user } }) => Boolean(user) || process.env.NODE_ENV === 'development',
+    update: ({ req: { user } }) => Boolean(user) || process.env.NODE_ENV === 'development',
+    delete: ({ req: { user } }) => Boolean(user) || process.env.NODE_ENV === 'development',
+    // Next.js server actions handle secure inserts natively. No public client create access.
+    create: () => false,
+  },
+  fields: [
+    {
+      name: 'name',
+      type: 'text',
+      required: true,
+      admin: {
+        readOnly: true,
+      },
+    },
+    {
+      name: 'email',
+      type: 'email',
+      required: true,
+      admin: {
+        readOnly: true,
+      },
+    },
+    {
+      name: 'type',
+      type: 'select',
+      options: [
+        { label: 'General Contact', value: 'contact' },
+        { label: 'Product Quote', value: 'product_quote' },
+      ],
+      required: true,
+      admin: {
+        position: 'sidebar',
+        readOnly: true,
+      },
+    },
+    {
+      name: 'productName',
+      type: 'text',
+      admin: {
+        position: 'sidebar',
+        readOnly: true,
+        condition: (data) => data.type === 'product_quote',
+        description: 'The specific KLZ product the user requested a quote for.',
+      },
+    },
+    {
+      name: 'message',
+      type: 'textarea',
+      required: true,
+      admin: {
+        readOnly: true,
+      },
+    },
+  ],
+};

src/payload/collections/Media.ts

@@ -0,0 +1,48 @@
+import type { CollectionConfig } from 'payload';
+
+export const Media: CollectionConfig = {
+  slug: 'media',
+  access: {
+    read: () => true,
+  },
+  admin: {
+    useAsTitle: 'alt',
+    defaultColumns: ['filename', 'alt', 'updatedAt'],
+  },
+  upload: {
+    staticDir: 'public/media',
+    adminThumbnail: 'thumbnail',
+    imageSizes: [
+      {
+        name: 'thumbnail',
+        width: 600,
+        // height: undefined allows wide 5:1 aspect ratios to be preserved without cropping
+        height: undefined,
+        position: 'centre',
+      },
+      {
+        name: 'card',
+        width: 768,
+        height: undefined,
+        position: 'centre',
+      },
+      {
+        name: 'tablet',
+        width: 1024,
+        height: undefined,
+        position: 'centre',
+      },
+    ],
+  },
+  fields: [
+    {
+      name: 'alt',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'caption',
+      type: 'text',
+    },
+  ],
+};

src/payload/collections/Pages.ts

@@ -0,0 +1,61 @@
+import { CollectionConfig } from 'payload';
+import { lexicalEditor } from '@payloadcms/richtext-lexical';
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['title', 'slug', 'locale', 'updatedAt'],
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'locale',
+      type: 'select',
+      options: [
+        { label: 'English', value: 'en' },
+        { label: 'German', value: 'de' },
+      ],
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'excerpt',
+      type: 'textarea',
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'featuredImage',
+      type: 'upload',
+      relationTo: 'media',
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({}),
+      required: true,
+    },
+  ],
+};

src/payload/collections/Posts.ts

@@ -0,0 +1,154 @@
+import type { CollectionConfig } from 'payload';
+import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical';
+
+import { StickyNarrative } from '../blocks/StickyNarrative';
+import { ComparisonGrid } from '../blocks/ComparisonGrid';
+import { VisualLinkPreview } from '../blocks/VisualLinkPreview';
+import { TechnicalGrid } from '../blocks/TechnicalGrid';
+import { HighlightBox } from '../blocks/HighlightBox';
+import { AnimatedImage } from '../blocks/AnimatedImage';
+import { ChatBubble } from '../blocks/ChatBubble';
+import { PowerCTA } from '../blocks/PowerCTA';
+import { Callout } from '../blocks/Callout';
+import { Stats } from '../blocks/Stats';
+import { SplitHeading } from '../blocks/SplitHeading';
+
+export const Posts: CollectionConfig = {
+  slug: 'posts',
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['featuredImage', 'title', 'date', 'updatedAt', '_status'],
+  },
+  versions: {
+    drafts: true, // Enables Draft/Published workflows
+  },
+  access: {
+    read: ({ req: { user } }) => {
+      // In local development, always show everything (including Drafts and scheduled future posts)
+      if (process.env.NODE_ENV === 'development') {
+        return true;
+      }
+
+      // If an Admin user is logged in, they can view everything
+      if (user) {
+        return true;
+      }
+
+      // For public unauthenticated visitors in PROD/STAGING contexts:
+      // Only serve Posts where Status = "published" AND the publish Date is in the past!
+      return {
+        and: [
+          {
+            _status: {
+              equals: 'published',
+            },
+          },
+          {
+            date: {
+              less_than_equal: new Date().toISOString(),
+            },
+          },
+        ],
+      };
+    },
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      unique: true,
+      admin: {
+        position: 'sidebar',
+      },
+      hooks: {
+        beforeValidate: [
+          ({ value, data }) => {
+            // Auto-generate slug from title if left blank
+            if (value || !data?.title) return value;
+            return data.title
+              .toLowerCase()
+              .replace(/ /g, '-')
+              .replace(/[^\w-]+/g, '');
+          },
+        ],
+      },
+    },
+    {
+      name: 'excerpt',
+      type: 'text',
+      admin: {
+        description: 'A short summary for blog feed cards and SEO.',
+      },
+    },
+    {
+      name: 'date',
+      type: 'date',
+      required: true,
+      admin: {
+        position: 'sidebar',
+        description: 'Future dates will schedule the post to publish automatically.',
+      },
+      defaultValue: () => new Date().toISOString(),
+    },
+    {
+      name: 'featuredImage',
+      type: 'upload',
+      relationTo: 'media',
+      admin: {
+        position: 'sidebar',
+        description: 'The primary Hero image used for headers and OpenGraph previews.',
+      },
+    },
+    {
+      name: 'locale',
+      type: 'select',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+      options: [
+        { label: 'English', value: 'en' },
+        { label: 'German', value: 'de' },
+      ],
+      defaultValue: 'en',
+    },
+    {
+      name: 'category',
+      type: 'text',
+      admin: {
+        position: 'sidebar',
+        description: 'Used for tag bucketing (e.g. "Kabel Technologie").',
+      },
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          BlocksFeature({
+            blocks: [
+              StickyNarrative,
+              ComparisonGrid,
+              VisualLinkPreview,
+              TechnicalGrid,
+              HighlightBox,
+              AnimatedImage,
+              ChatBubble,
+              PowerCTA,
+              Callout,
+              Stats,
+              SplitHeading,
+            ],
+          }),
+        ],
+      }),
+    },
+  ],
+};

src/payload/collections/Products.ts

@@ -0,0 +1,144 @@
+import type { CollectionConfig } from 'payload';
+import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical';
+
+import { StickyNarrative } from '../blocks/StickyNarrative';
+import { ComparisonGrid } from '../blocks/ComparisonGrid';
+import { VisualLinkPreview } from '../blocks/VisualLinkPreview';
+import { TechnicalGrid } from '../blocks/TechnicalGrid';
+import { HighlightBox } from '../blocks/HighlightBox';
+import { AnimatedImage } from '../blocks/AnimatedImage';
+import { ChatBubble } from '../blocks/ChatBubble';
+import { PowerCTA } from '../blocks/PowerCTA';
+import { Callout } from '../blocks/Callout';
+import { Stats } from '../blocks/Stats';
+import { SplitHeading } from '../blocks/SplitHeading';
+import { ProductTabs } from '../blocks/ProductTabs';
+
+export const Products: CollectionConfig = {
+  slug: 'products',
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['featuredImage', 'title', 'sku', 'locale', 'updatedAt', '_status'],
+  },
+  versions: {
+    drafts: true,
+  },
+  access: {
+    read: ({ req: { user } }) => {
+      if (process.env.NODE_ENV === 'development') {
+        return true;
+      }
+      if (user) {
+        return true;
+      }
+      return {
+        _status: {
+          equals: 'published',
+        },
+      };
+    },
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'sku',
+      type: 'text',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'slug',
+      type: 'text',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+      required: true,
+    },
+    {
+      name: 'locale',
+      type: 'select',
+      required: true,
+      admin: {
+        position: 'sidebar',
+      },
+      options: [
+        { label: 'English', value: 'en' },
+        { label: 'German', value: 'de' },
+      ],
+      defaultValue: 'de',
+    },
+    {
+      name: 'categories',
+      type: 'array',
+      required: true,
+      fields: [
+        {
+          name: 'category',
+          type: 'text',
+        },
+      ],
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'featuredImage',
+      type: 'upload',
+      relationTo: 'media',
+      admin: {
+        position: 'sidebar',
+        description: 'The primary thumbnail used in list views.',
+      },
+    },
+    {
+      name: 'images',
+      type: 'upload',
+      relationTo: 'media',
+      hasMany: true,
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'application',
+      type: 'richText',
+      editor: lexicalEditor({}),
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          BlocksFeature({
+            blocks: [
+              StickyNarrative,
+              ComparisonGrid,
+              VisualLinkPreview,
+              TechnicalGrid,
+              HighlightBox,
+              AnimatedImage,
+              ChatBubble,
+              PowerCTA,
+              Callout,
+              Stats,
+              SplitHeading,
+              ProductTabs,
+            ],
+          }),
+        ],
+      }),
+    },
+  ],
+};

src/payload/collections/Users.ts

@@ -0,0 +1,12 @@
+import type { CollectionConfig } from 'payload';
+
+export const Users: CollectionConfig = {
+  slug: 'users',
+  admin: {
+    useAsTitle: 'email',
+  },
+  auth: true,
+  fields: [
+    // Email added by default
+  ],
+};