blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-Pricing/config.ts

@@ -1,215 +1,215 @@
-import type { Block } from 'payload'
-
-export const DDPricing: Block = {
-  slug: 'DD-Pricing',
-  interfaceName: 'DDPricing',
-  labels: {
-    singular: 'Studio Pricing Block',
-    plural: 'Studio Pricing Blocks',
-  },
-  fields: [
-    {
-      type: 'tabs',
-      tabs: [
-        {
-          label: 'Content',
-          fields: [
-            {
-              name: 'eyebrow',
-              type: 'text',
-              defaultValue: 'Pricing',
-            },
-            {
-              name: 'heading',
-              type: 'text',
-              defaultValue: 'Simple pricing for modern digital teams',
-              required: true,
-            },
-            {
-              name: 'description',
-              type: 'textarea',
-              defaultValue:
-                'Choose the plan that fits your workflow. Scale from solo creators to full production teams.',
-            },
-            {
-              type: 'row',
-              fields: [
-                {
-                  name: 'monthlyLabel',
-                  type: 'text',
-                  defaultValue: 'Pay Monthly',
-                  admin: {
-                    width: '50%',
-                  },
-                },
-                {
-                  name: 'annualLabel',
-                  type: 'text',
-                  defaultValue: 'Pay Annually',
-                  admin: {
-                    width: '50%',
-                  },
-                },
-              ],
-            },
-            {
-              type: 'row',
-              fields: [
-                {
-                  name: 'annualDiscountLabel',
-                  type: 'text',
-                  defaultValue: '-20%',
-                  admin: {
-                    width: '50%',
-                  },
-                },
-                {
-                  name: 'defaultBilling',
-                  type: 'select',
-                  defaultValue: 'monthly',
-                  admin: {
-                    width: '50%',
-                  },
-                  options: [
-                    {
-                      label: 'Monthly',
-                      value: 'monthly',
-                    },
-                    {
-                      label: 'Annual',
-                      value: 'annual',
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-        {
-          label: 'Pricing Tiers',
-          fields: [
-            {
-              name: 'tiers',
-              type: 'array',
-              minRows: 1,
-              fields: [
-                {
-                  type: 'row',
-                  fields: [
-                    {
-                      name: 'name',
-                      type: 'text',
-                      required: true,
-                      admin: {
-                        width: '33%',
-                      },
-                    },
-                    {
-                      name: 'badge',
-                      type: 'text',
-                      admin: {
-                        width: '33%',
-                      },
-                    },
-                    {
-                      name: 'highlight',
-                      type: 'checkbox',
-                      defaultValue: false,
-                      admin: {
-                        width: '33%',
-                      },
-                    },
-                  ],
-                },
-                {
-                  name: 'tagline',
-                  type: 'text',
-                },
-                {
-                  type: 'row',
-                  fields: [
-                    {
-                      name: 'monthlyPrice',
-                      type: 'number',
-                      defaultValue: 0,
-                      admin: {
-                        width: '50%',
-                      },
-                    },
-                    {
-                      name: 'annualPrice',
-                      type: 'number',
-                      defaultValue: 0,
-                      admin: {
-                        width: '50%',
-                      },
-                    },
-                  ],
-                },
-                {
-                  type: 'row',
-                  fields: [
-                    {
-                      name: 'cta',
-                      type: 'text',
-                      defaultValue: 'Get Started',
-                      admin: {
-                        width: '50%',
-                      },
-                    },
-                    {
-                      name: 'ctaLink',
-                      type: 'text',
-                      defaultValue: '#',
-                      admin: {
-                        width: '50%',
-                      },
-                    },
-                  ],
-                },
-                {
-                  name: 'features',
-                  type: 'array',
-                  label: 'Included Features',
-                  fields: [
-                    {
-                      name: 'label',
-                      type: 'text',
-                      required: true,
-                    },
-                  ],
-                },
-                {
-                  name: 'missing',
-                  type: 'array',
-                  label: 'Missing Features',
-                  fields: [
-                    {
-                      name: 'label',
-                      type: 'text',
-                      required: true,
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      name: 'guaranteeText',
-      type: 'text',
-      defaultValue: 'All paid plans include a',
-    },
-    {
-      name: 'guaranteeHighlight',
-      type: 'text',
-      defaultValue: '14-day money-back guarantee',
-    },
-    {
-      name: 'sectionId',
-      type: 'text',
-    },
-  ],
-}
+import type { Block } from 'payload'
+
+export const DDPricing: Block = {
+  slug: 'DD-Pricing',
+  interfaceName: 'DDPricing',
+  labels: {
+    singular: 'Studio Pricing Block',
+    plural: 'Studio Pricing Blocks',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              defaultValue: 'Pricing',
+            },
+            {
+              name: 'heading',
+              type: 'text',
+              defaultValue: 'Simple pricing for modern digital teams',
+              required: true,
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              defaultValue:
+                'Choose the plan that fits your workflow. Scale from solo creators to full production teams.',
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'monthlyLabel',
+                  type: 'text',
+                  defaultValue: 'Pay Monthly',
+                  admin: {
+                    width: '50%',
+                  },
+                },
+                {
+                  name: 'annualLabel',
+                  type: 'text',
+                  defaultValue: 'Pay Annually',
+                  admin: {
+                    width: '50%',
+                  },
+                },
+              ],
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'annualDiscountLabel',
+                  type: 'text',
+                  defaultValue: '-20%',
+                  admin: {
+                    width: '50%',
+                  },
+                },
+                {
+                  name: 'defaultBilling',
+                  type: 'select',
+                  defaultValue: 'monthly',
+                  admin: {
+                    width: '50%',
+                  },
+                  options: [
+                    {
+                      label: 'Monthly',
+                      value: 'monthly',
+                    },
+                    {
+                      label: 'Annual',
+                      value: 'annual',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Pricing Tiers',
+          fields: [
+            {
+              name: 'tiers',
+              type: 'array',
+              minRows: 3,
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'name',
+                      type: 'text',
+                      required: true,
+                      admin: {
+                        width: '33%',
+                      },
+                    },
+                    {
+                      name: 'badge',
+                      type: 'text',
+                      admin: {
+                        width: '33%',
+                      },
+                    },
+                    {
+                      name: 'highlight',
+                      type: 'checkbox',
+                      defaultValue: false,
+                      admin: {
+                        width: '33%',
+                      },
+                    },
+                  ],
+                },
+                {
+                  name: 'tagline',
+                  type: 'text',
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'monthlyPrice',
+                      type: 'number',
+                      defaultValue: 0,
+                      admin: {
+                        width: '50%',
+                      },
+                    },
+                    {
+                      name: 'annualPrice',
+                      type: 'number',
+                      defaultValue: 0,
+                      admin: {
+                        width: '50%',
+                      },
+                    },
+                  ],
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'cta',
+                      type: 'text',
+                      defaultValue: 'Get Started',
+                      admin: {
+                        width: '50%',
+                      },
+                    },
+                    {
+                      name: 'ctaLink',
+                      type: 'text',
+                      defaultValue: '#',
+                      admin: {
+                        width: '50%',
+                      },
+                    },
+                  ],
+                },
+                {
+                  name: 'features',
+                  type: 'array',
+                  label: 'Included Features',
+                  fields: [
+                    {
+                      name: 'label',
+                      type: 'text',
+                      required: true,
+                    },
+                  ],
+                },
+                {
+                  name: 'missing',
+                  type: 'array',
+                  label: 'Missing Features',
+                  fields: [
+                    {
+                      name: 'label',
+                      type: 'text',
+                      required: true,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'guaranteeText',
+      type: 'text',
+      defaultValue: 'All paid plans include a',
+    },
+    {
+      name: 'guaranteeHighlight',
+      type: 'text',
+      defaultValue: '14-day money-back guarantee',
+    },
+    {
+      name: 'sectionId',
+      type: 'text',
+    },
+  ],
+}

package/templates/blocks/DD-Process/Component.tsx

@@ -64,9 +64,9 @@ export const DDProcess: React.FC<DDProcessProps> = ({
     <>
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
 
-      <div id={sectionId ?? 'process'} className="py-24">
+      <div id={sectionId ?? 'process'} className="py-4">
         <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}#BlockName-DDProcess
+          {/* Header */}
           <div className="text-center max-w-2xl mx-auto mb-16">
             {eyebrow && (
               <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">

package/templates/blocks/DD-ProjHeader/Component.tsx

@@ -1,91 +1,93 @@
-'use client'
-import React from 'react'
-import { DDProjSlider } from '../DD-ProjSlider/Component'
-
-export interface Project2HeaderInfo {
-  label: string
-  value: string
-}
-
-export interface Project2HeaderImage {
-  image: string | { url: string; alt?: string }
-  alt?: string
-  id?: string
-}
-
-export interface Project2HeaderBlockProps {
-  title?: string
-  description?: string
-  projectInfo?: Project2HeaderInfo[]
-  images?: Project2HeaderImage[]
-  slidesPerView?: number
-  spaceBetween?: number
-  loop?: boolean
-  centeredSlides?: boolean
-  showSlider?: boolean
-}
-
-function Project2HeaderBlock({
-  title = 'Media Agency',
-  description = 'We provide digital experience services to startups and small businesses. We help our clients succeed by creating brand identities.',
-  projectInfo = [
-    { label: 'Category', value: 'Marketing' },
-    { label: 'Client', value: 'DustedClient' },
-    { label: 'Start Date', value: '4 July 2021' },
-    { label: 'Designer', value: 'DustedUi' }
-  ],
-  images = [
-    {
-      id: '1',
-      image:
-        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E'
-    },
-    {
-      id: '2',
-      image:
-        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E'
-    },
-    {
-      id: '3',
-      image:
-        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E'
-    }
-  ],
-  slidesPerView = 2,
-  spaceBetween = 30,
-  loop = true,
-  centeredSlides = true,
-  showSlider = true
-}: Project2HeaderBlockProps) {
-  return (
-    <>
-      <section className="container py-12">
-        <h1 className="text-3xl md:text-5xl font-semibold mb-4">{title}</h1>
-        <p className="text-stone-400 mb-8 max-w-3xl">{description}</p>
-        {projectInfo?.length ? (
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-            {projectInfo.map((info, index) => (
-              <div key={`${info.label}-${index}`} className="rounded border border-stone-800 p-3">
-                <p className="text-xs uppercase text-stone-400">{info.label}</p>
-                <p className="text-sm text-stone-200">{info.value}</p>
-              </div>
-            ))}
-          </div>
-        ) : null}
-      </section>
-      {showSlider && (
-        <DDProjSlider
-          images={images}
-          slidesPerView={slidesPerView}
-          spaceBetween={spaceBetween}
-          loop={loop}
-          centeredSlides={centeredSlides}
-        />
-      )}
-    </>
-  )
-}
-
-export const DDProjHeader = Project2HeaderBlock
-export default DDProjHeader
-
+'use client'
+import React from 'react'
+import { DDProjSlider } from '../DD-ProjSlider/Component'
+
+export interface Project2HeaderInfo {
+  label: string
+  value: string
+}
+
+export interface Project2HeaderImage {
+  image: string | { url: string; alt?: string }
+  alt?: string
+  id?: string
+}
+
+export interface Project2HeaderBlockProps {
+  title?: string
+  description?: string
+  projectInfo?: Project2HeaderInfo[]
+  images?: Project2HeaderImage[]
+  slidesPerView?: number
+  spaceBetween?: number
+  loop?: boolean
+  centeredSlides?: boolean
+  showSlider?: boolean
+}
+
+function Project2HeaderBlock({
+  title = 'Media Agency',
+  description = 'We provide digital experience services to startups and small businesses. We help our clients succeed by creating brand identities.',
+  projectInfo = [
+    { label: 'Category', value: 'Marketing' },
+    { label: 'Client', value: 'DustedClient' },
+    { label: 'Start Date', value: '4 July 2021' },
+    { label: 'Designer', value: 'DustedUi' },
+  ],
+  images = [
+    {
+      id: '1',
+      image:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E',
+    },
+    {
+      id: '2',
+      image:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E',
+    },
+    {
+      id: '3',
+      image:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E',
+    },
+  ],
+  slidesPerView = 2,
+  spaceBetween = 30,
+  loop = true,
+  centeredSlides = true,
+  showSlider = true,
+}: Project2HeaderBlockProps) {
+  return (
+    <>
+      <section className="container py-12">
+        <h1 className="text-3xl md:text-5xl font-semibold mb-4">{title}</h1>
+        <p className="text-stone-600 dark:text-stone-400 mb-8 max-w-3xl">{description}</p>
+        {projectInfo?.length ? (
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            {projectInfo.map((info, index) => (
+              <div
+                key={`${info.label}-${index}`}
+                className="rounded border border-stone-300 dark:border-stone-800 p-3"
+              >
+                <p className="text-xs uppercase text-stone-600 dark:text-stone-400">{info.label}</p>
+                <p className="text-sm text-stone-900 dark:text-stone-200">{info.value}</p>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </section>
+      {showSlider && (
+        <DDProjSlider
+          images={images}
+          slidesPerView={slidesPerView}
+          spaceBetween={spaceBetween}
+          loop={loop}
+          centeredSlides={centeredSlides}
+        />
+      )}
+    </>
+  )
+}
+
+export const DDProjHeader = Project2HeaderBlock
+export default DDProjHeader

package/templates/blocks/DD-ProjSlider/Component.tsx

@@ -98,7 +98,7 @@ export const DDProjSlider: React.FC<ProjectSliderBlockProps> = ({
   if (!images.length) return null
 
   return (
-    <section className="project-slider-block w-full overflow-hidden py-10">
+    <section className="project-slider-block relative left-0 mx-auto w-screen max-w-none overflow-hidden py-10">
       <div ref={swiperRef} className="swiper w-full overflow-visible">
         <div className="swiper-wrapper items-center">
           {images.map((image, index) => (