blocks-dusted 0.1.10 → 0.1.11

package/templates/blocks/DDHG-CTASection2/Component.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import React from 'react'
+
+import { cn } from '@/utilities/ui'
+
+type PortableDoc = {
+  slug?: string | null
+  breadcrumbs?: Array<{ url?: string | null }> | null
+  [key: string]: unknown
+}
+
+type LinkReference =
+  | { relationTo: 'pages'; value: number | PortableDoc }
+  | { relationTo: 'posts'; value: number | PortableDoc }
+  | { relationTo: 'projects'; value: number | PortableDoc }
+  | { relationTo: 'thoughts'; value: number | PortableDoc }
+
+type BlockLinkField = {
+  type?: 'reference' | 'custom' | null
+  reference?: LinkReference | null
+  url?: string | null
+  label?: string | null
+  newTab?: boolean | null
+} | null
+
+export type DDHGCTASection2Props = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  blockId?: string | null
+  scrollSpeed?: string | number | null
+  eyebrowPrefix?: string | null
+  eyebrowEmphasis?: string | null
+  headingLineOne?: string | null
+  headingLineTwo?: string | null
+  description?: string | null
+  showDivider?: boolean | null
+  primaryLink?: BlockLinkField
+  secondaryLink?: BlockLinkField
+}
+
+function getHref(link?: BlockLinkField): string | null {
+  if (!link) return null
+
+  if (link.type === 'custom' && link.url) return link.url
+
+  if (link.type === 'reference' && link.reference?.value) {
+    const { relationTo, value } = link.reference
+    if (typeof value === 'number') return null
+
+    if (relationTo === 'pages') {
+      const crumbs = Array.isArray(value.breadcrumbs) ? value.breadcrumbs : []
+      const last = crumbs[crumbs.length - 1]
+      if (last?.url) return last.url
+
+      const slug = value.slug
+      if (!slug || slug === 'home') return '/'
+      return slug.startsWith('/') ? slug : `/${slug}`
+    }
+
+    const slug = value.slug
+    if (!slug) return null
+
+    if (relationTo === 'projects') return `/archives/${slug}`
+    if (relationTo === 'posts' || relationTo === 'thoughts') return `/thoughts/${slug}`
+    return `/${slug}`
+  }
+
+  return null
+}
+
+function CTAButton({ link, variant }: { link?: BlockLinkField; variant: 'primary' | 'secondary' }) {
+  const href = getHref(link)
+  if (!href) return null
+
+  const target = link?.newTab ? '_blank' : undefined
+  const rel = link?.newTab ? 'noopener noreferrer' : undefined
+
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={rel}
+      className={cn(
+        'inline-flex min-h-10 items-center justify-center px-5 py-2.5 text-sm font-medium transition-all duration-300',
+        variant === 'primary'
+          ? 'bg-stone-800 text-white hover:bg-stone-700'
+          : 'border border-stone-400 text-stone-700 dark:text-stone-200 hover:bg-stone-100'
+      )}
+    >
+      {link?.label || 'Learn More'}
+    </a>
+  )
+}
+
+const revealMotion = {
+  initial: { opacity: 0, y: 18 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true, amount: 0.25 },
+  transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] }
+}
+
+export const DDHGCTASection2: React.FC<DDHGCTASection2Props> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  blockId,
+  scrollSpeed,
+  eyebrowPrefix = 'ready to',
+  eyebrowEmphasis = 'begin?',
+  headingLineOne = "LET'S BUILD YOUR",
+  headingLineTwo = 'NEXT SPACE',
+  description = 'Every great space begins with a conversation. Share your vision, and we will map the path from where you are to where you want to be.',
+  showDivider = true,
+  primaryLink,
+  secondaryLink
+}) => {
+  const hasButtons = Boolean(getHref(primaryLink) || getHref(secondaryLink))
+
+  return (
+    <div
+      id={sectionId ?? undefined}
+      data-block-id={blockId ?? undefined}
+      data-scroll={scrollSpeed ? true : undefined}
+      data-scroll-speed={scrollSpeed ? String(scrollSpeed) : undefined}
+      className={cn('mb-10 px-5 py-20 md:px-8', customClassName)}
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div className="mx-auto max-w-7xl">
+        <motion.div
+          className="z-plane-2 relative overflow-hidden"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.25 }}
+          transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
+        >
+          <div className="relative p-8 text-center md:p-12 lg:p-16">
+            {(eyebrowPrefix || eyebrowEmphasis) && (
+              <p className="mb-4 text-[10px] uppercase tracking-[0.2em] text-stone-600 dark:text-stone-300">
+                {eyebrowPrefix && <span className="font-light">{eyebrowPrefix} </span>}
+                {eyebrowEmphasis && <span className="font-medium">{eyebrowEmphasis}</span>}
+              </p>
+            )}
+
+            <motion.div className="heading" {...revealMotion}>
+              {(headingLineOne || headingLineTwo) && (
+                <h2 className="mb-4 text-3xl font-medium leading-none tracking-tight text-purple-700 dark:text-purple-500 md:text-5xl">
+                  {headingLineOne}
+                  {headingLineOne && headingLineTwo && <br />}
+                  <span className="font-bold">{headingLineTwo}</span>
+                </h2>
+              )}
+            </motion.div>
+
+            {showDivider && <div className="mx-auto mb-6 h-px w-12 bg-stone-500" />}
+
+            <motion.div
+              className="description"
+              {...revealMotion}
+              transition={{ ...revealMotion.transition, delay: 0.08 }}
+            >
+              {description && (
+                <p className="mx-auto mb-8 max-w-lg text-[14px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                  {description}
+                </p>
+              )}
+            </motion.div>
+
+            {hasButtons && (
+              <div className="flex flex-wrap items-center justify-center gap-3">
+                <CTAButton link={primaryLink} variant="primary" />
+                <CTAButton link={secondaryLink} variant="secondary" />
+              </div>
+            )}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+export default DDHGCTASection2

package/templates/blocks/DDHG-CTASection2/config.ts

@@ -0,0 +1,140 @@
+import type { Block } from 'payload'
+
+import { link } from '@/fields/link'
+
+export const DDHGCTASection2: Block = {
+  slug: 'DDHG-CTASection2',
+  interfaceName: 'DDHGCTASection2',
+  dbName: 'ddhg_cta_sec_2',
+  labels: {
+    singular: 'CTA Section 2',
+    plural: 'CTA Sections 2',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'eyebrowPrefix',
+                  type: 'text',
+                  label: 'Eyebrow Prefix',
+                  defaultValue: 'ready to',
+                  admin: { width: '50%' },
+                },
+                {
+                  name: 'eyebrowEmphasis',
+                  type: 'text',
+                  label: 'Eyebrow Emphasis',
+                  defaultValue: 'begin?',
+                  admin: { width: '50%' },
+                },
+              ],
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'headingLineOne',
+                  type: 'text',
+                  label: 'Heading Line 1',
+                  defaultValue: "LET'S BUILD YOUR",
+                  admin: { width: '50%' },
+                },
+                {
+                  name: 'headingLineTwo',
+                  type: 'text',
+                  label: 'Heading Line 2',
+                  defaultValue: 'NEXT SPACE',
+                  admin: { width: '50%' },
+                },
+              ],
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                'Every great space begins with a conversation. Share your vision, and we will map the path from where you are to where you want to be.',
+            },
+            {
+              name: 'showDivider',
+              type: 'checkbox',
+              label: 'Show Divider',
+              defaultValue: true,
+            },
+          ],
+        },
+        {
+          label: 'Buttons',
+          fields: [
+            link({
+              overrides: {
+                name: 'primaryLink',
+                label: 'Primary Link',
+                defaultValue: {
+                  type: 'custom',
+                  url: '/book-a-call',
+                  label: 'Book a Consultation',
+                },
+              },
+            }),
+            link({
+              overrides: {
+                name: 'secondaryLink',
+                label: 'Secondary Link',
+                defaultValue: {
+                  type: 'custom',
+                  url: '/reach',
+                  label: 'Get in Touch',
+                },
+              },
+            }),
+          ],
+        },
+        {
+          label: 'Advanced',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'sectionId',
+                  type: 'text',
+                  label: 'Section ID',
+                  admin: { width: '50%' },
+                },
+                {
+                  name: 'customClassName',
+                  type: 'text',
+                  label: 'Custom CSS Classes',
+                  admin: { width: '50%' },
+                },
+              ],
+            },
+            {
+              name: 'scrollSpeed',
+              type: 'text',
+              label: 'Scroll Speed',
+              admin: { description: 'Optional data-scroll-speed value.' },
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: {
+                language: 'css',
+                description: 'Injected as a style tag. Use with caution.',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}

package/templates/blocks/DDHG-CTASection2/manifest.json

@@ -0,0 +1,45 @@
+{
+  "type": "block",
+  "name": "DDHG-CTASection2",
+  "label": "CTA Section 2",
+  "sourceName": "CTASection2",
+  "portableName": "DDHG-CTASection2",
+  "slug": "DDHG-CTASection2",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/HeatherGrey2025",
+    "originalPath": "src/blocks/CTASection2",
+    "originalSlug": "ctaSection2",
+    "originalConfigExport": "CTASection2",
+    "originalComponentExport": "CTASection2Block",
+    "originalInterfaceName": "CTASection2BlockProps"
+  },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-CTASection2/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-CTASection2/config.ts" }
+  ],
+  "dependencies": [{ "name": "framer-motion" }],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    { "path": "src/fields/link.ts", "reason": "Payload config uses the shared link field." },
+    { "path": "src/utilities/ui.ts", "reason": "Component uses the cn utility." }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": { "enabled": true, "collections": ["Pages", "Posts"] },
+  "renderBlocksRegistration": { "enabled": true },
+  "renderBlocksBehavior": { "wrapperless": false },
+  "pageRouteIntegration": { "required": false, "manualSteps": [] },
+  "manualSteps": [
+    "Confirm the destination link field supports reference and custom links.",
+    "Run payload generate:types after schema changes."
+  ],
+  "notes": [
+    "Converted from HeatherGrey2025 CTASection2.",
+    "The top-level dbName was namespaced to ddhg_cta_sec_2 for portability.",
+    "ButtonMain and TextFade dependencies were removed; the block now renders standard CTA anchors and uses framer-motion directly.",
+    "Generated Payload document types were replaced with portable structural types.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDHGCTASection2",
+  "interfaceName": "DDHGCTASection2"
+}

package/templates/blocks/DDHG-HighlightArc/Component.tsx

@@ -0,0 +1,243 @@
+'use client'
+
+import { ArrowRight } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import React, { useState } from 'react'
+
+import { cn } from '@/utilities/ui'
+
+type PortableDoc = {
+  slug?: string | null
+  breadcrumbs?: Array<{ url?: string | null }> | null
+  [key: string]: unknown
+}
+
+type Media = {
+  url?: string | null
+  alt?: string | null
+  [key: string]: unknown
+}
+
+type LinkReference =
+  | { relationTo: 'pages'; value: number | PortableDoc }
+  | { relationTo: 'posts'; value: number | PortableDoc }
+  | { relationTo: 'projects'; value: number | PortableDoc }
+  | { relationTo: 'thoughts'; value: number | PortableDoc }
+
+type HighlightArchiveCardsLink = {
+  type?: 'reference' | 'custom' | null
+  reference?: LinkReference | null
+  url?: string | null
+  label?: string | null
+  newTab?: boolean | null
+} | null
+
+type HighlightArchiveCardsItem = {
+  id?: string | null
+  code?: string | null
+  title?: string | null
+  type?: string | null
+  bgImage?: number | Media | null
+  priority?: boolean | null
+  link?: HighlightArchiveCardsLink
+}
+
+export type DDHGHighlightArcProps = {
+  gridColumns?: '1' | '2' | '3' | '4' | null
+  highlights?: HighlightArchiveCardsItem[] | null
+}
+
+const getGridClassName = (gridColumns?: DDHGHighlightArcProps['gridColumns']) => {
+  switch (gridColumns) {
+    case '2':
+      return 'grid-cols-1 md:grid-cols-2'
+    case '3':
+      return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3'
+    case '4':
+      return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4'
+    case '1':
+    default:
+      return 'grid-cols-1'
+  }
+}
+
+const getPageURLFromDoc = (doc: PortableDoc | number): string | null => {
+  if (typeof doc === 'number') return null
+
+  const crumbs = Array.isArray(doc?.breadcrumbs) ? doc.breadcrumbs : []
+  if (crumbs.length) {
+    const last = crumbs[crumbs.length - 1]
+    if (typeof last?.url === 'string' && last.url) return last.url
+  }
+
+  const slug = doc?.slug
+  if (!slug || slug === 'home') return '/'
+  return slug.startsWith('/') ? slug : `/${slug}`
+}
+
+const getDocumentSlug = (doc: PortableDoc | number): string | null => {
+  if (typeof doc === 'number') return null
+  return doc?.slug || null
+}
+
+const getCollectionPath = (relationTo: LinkReference['relationTo']): string => {
+  if (relationTo === 'posts') return 'thoughts'
+  if (relationTo === 'thoughts') return 'thoughts'
+  if (relationTo === 'projects') return 'archives'
+  return ''
+}
+
+const resolveHref = (link: HighlightArchiveCardsLink): string | null => {
+  if (!link) return null
+  if (link.type === 'custom' && link.url) return link.url
+
+  if (link.type === 'reference' && link.reference?.value) {
+    const { relationTo, value } = link.reference
+    if (relationTo === 'pages') return getPageURLFromDoc(value)
+
+    const slug = getDocumentSlug(value)
+    if (!slug) return null
+    const basePath = getCollectionPath(relationTo)
+    return basePath ? `/${basePath}/${slug}` : `/${slug}`
+  }
+
+  return null
+}
+
+const isExternalHref = (href: string): boolean =>
+  href.startsWith('http://') ||
+  href.startsWith('https://') ||
+  href.startsWith('mailto:') ||
+  href.startsWith('tel:')
+
+export const DDHGHighlightArc: React.FC<DDHGHighlightArcProps> = ({
+  gridColumns = '1',
+  highlights,
+}) => {
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)
+
+  if (!Array.isArray(highlights) || highlights.length === 0) return null
+
+  return (
+    <div className={cn('grid origin-top scale-100 !gap-0', getGridClassName(gridColumns))}>
+      {highlights.map((h, i) => {
+        const isHovered = hoveredIdx === i
+        const bgImage = typeof h.bgImage === 'object' && h.bgImage !== null ? h.bgImage : null
+        const href = resolveHref(h.link || null)
+        const label = h.link?.label || 'View Archive'
+        const target = h.link?.newTab ? '_blank' : undefined
+        const rel = h.link?.newTab ? 'noopener noreferrer' : undefined
+        const isExternal = href ? isExternalHref(href) : false
+        const key = h.id != null ? `id-${h.id}` : `idx-${i}`
+
+        const cardClassName = cn(
+          'group relative block h-[4rem] overflow-hidden rounded-[0px] border border-border px-5 py-5 !no-underline shadow-[0_18px_60px_rgba(31,31,30,0.12),inset_0_1px_0_rgba(255,255,255,0.62)] transition-all duration-500 ease-out hover:shadow-[0_24px_74px_rgba(31,31,30,0.16),inset_0_1px_0_rgba(255,255,255,0.72)]',
+          'before:pointer-events-none before:absolute before:inset-0 before:z-[1] --before:bg-[linear-gradient(90deg,rgba(255,255,255,0.62),rgba(255,255,255,0.22)_42%,rgba(255,255,255,0.06))] before:transition-opacity before:duration-500',
+          'after:pointer-events-none after:absolute after:inset-0 after:z-[2] after:opacity-[0.08] after:mix-blend-multiply --after:[background-image:radial-gradient(circle_at_20%_30%,rgba(31,31,30,0.5)_0_1px,transparent_1px),--radial-gradient(circle_at_80%_70%,rgba(255,255,255,0.8)_0_1px,transparent_1px)] after:[background-size:14px_14px,19px_19px]',
+          href
+            ? 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-500/40 focus-visible:ring-offset-2'
+            : 'cursor-default',
+        )
+
+        const buttonClassName = cn(
+          'inline-flex items-center gap-2 whitespace-nowrap text-xs font-medium tracking-[0.04em] text-stone-700 transition-all duration-300',
+          'group-hover:text-[#1F1F1E]',
+          isHovered ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-100',
+          !href && 'opacity-40',
+        )
+
+        const cardContent = (
+          <>
+            <div className="HighCardsContent absolute inset-0 z-0 bg-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-70" />
+
+            {bgImage?.url && (
+              <div className="HighCardImg absolute inset-0 z-[1] overflow-hidden opacity-0 transition-opacity duration-500 ease-out group-hover:opacity-100">
+                <div className="absolute left-0 top-0 h-[260%] w-full transition-transform duration-700 ease-out group-hover:-translate-y-[60%]">
+                  <Image
+                    src={bgImage.url}
+                    alt={bgImage.alt ?? h.title ?? ''}
+                    fill
+                    priority={Boolean(h.priority)}
+                    className="object-cover"
+                    sizes="(max-width: 768px) 100vw, 400px"
+                  />
+                </div>
+
+                {h.title && (
+                  <p className="HighCardTitle absolute left-0 top-0 z-10 px-4 py-4 text-[10px] font-semibold leading-snug text-stone-100 dark:text-stone-100 transition-colors duration-300">
+                    {h.title}
+                  </p>
+                )}
+
+                <div className="HighCardImgBg absolute inset-0 z-[2] bg-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-70" />
+                <div className="absolute mix-blend-darken inset-0 z-[2] bg-gradient-to-r from-[#151515bf] via-[#20202029] to-[#00000000] opacity-0 transition-opacity duration-500 group-hover:opacity-70" />
+              </div>
+            )}
+
+            <div className="card-info relative z-[3] translate-y-0 transition-transform duration-500 group-hover:translate-y-[-7rem]">
+              <div className="relative z-10 flex h-full items-start justify-between gap-6">
+                <span className="relative w-full ml-auto max-w-fit right-0 -top-2 block origin-top-right scale-80">
+                  <span className={buttonClassName}>
+                    <span className="block">{label}</span>
+                    <ArrowRight
+                      size={14}
+                      className="transition-transform duration-300 group-hover:translate-x-1"
+                    />
+                  </span>
+                </span>
+              </div>
+            </div>
+          </>
+        )
+
+        if (!href) {
+          return (
+            <article
+              key={key}
+              className={cardClassName}
+              onMouseEnter={() => setHoveredIdx(i)}
+              onMouseLeave={() => setHoveredIdx(null)}
+            >
+              {cardContent}
+            </article>
+          )
+        }
+
+        if (isExternal) {
+          return (
+            <a
+              key={key}
+              href={href}
+              target={target}
+              rel={rel}
+              aria-label={label}
+              className={cardClassName}
+              onMouseEnter={() => setHoveredIdx(i)}
+              onMouseLeave={() => setHoveredIdx(null)}
+            >
+              {cardContent}
+            </a>
+          )
+        }
+
+        return (
+          <Link
+            key={key}
+            href={href}
+            target={target}
+            rel={rel}
+            aria-label={label}
+            className={cardClassName}
+            onMouseEnter={() => setHoveredIdx(i)}
+            onMouseLeave={() => setHoveredIdx(null)}
+          >
+            {cardContent}
+          </Link>
+        )
+      })}
+    </div>
+  )
+}
+
+export default DDHGHighlightArc

package/templates/blocks/DDHG-HighlightArc/config.ts

@@ -0,0 +1,85 @@
+import type { Block } from 'payload'
+
+import { link } from '@/fields/link'
+
+export const DDHGHighlightArc: Block = {
+  slug: 'DDHG-HighlightArc',
+  interfaceName: 'DDHGHighlightArc',
+  labels: {
+    singular: 'Highlight Archive Cards',
+    plural: 'Highlight Archive Cards',
+  },
+  fields: [
+    // DDHG TODO: Re-enable when the archive bundle providing BeforeSidebar is imported.
+    // {
+    //   name: 'beforeSidebar',
+    //   type: 'ui',
+    //   admin: {
+    //     position: 'sidebar',
+    //     components: {
+    //       Field: '@/components/Admin/BeforeSidebar',
+    //     },
+    //   },
+    // },
+    {
+      name: 'gridColumns',
+      type: 'select',
+      label: 'Grid Columns',
+      defaultValue: '1',
+      options: [
+        { label: '1 Column', value: '1' },
+        { label: '2 Columns', value: '2' },
+        { label: '3 Columns', value: '3' },
+        { label: '4 Columns', value: '4' },
+      ],
+    },
+    {
+      name: 'highlights',
+      type: 'array',
+      label: 'Highlights',
+      minRows: 1,
+      fields: [
+        {
+          name: 'code',
+          type: 'text',
+          hidden: true,
+          label: 'Project Code',
+        },
+        {
+          name: 'title',
+          type: 'text',
+          label: 'Project Name',
+          required: true,
+        },
+        {
+          name: 'type',
+          type: 'text',
+          hidden: true,
+          label: 'Project Type',
+        },
+        {
+          name: 'bgImage',
+          type: 'upload',
+          relationTo: 'media',
+          label: 'Background Image',
+        },
+        {
+          name: 'priority',
+          type: 'checkbox',
+          label: 'High Priority Image',
+          defaultValue: false,
+          admin: {
+            description: 'Enable only when this card appears above the fold.',
+          },
+        },
+        link({
+          appearances: false,
+          overrides: {
+            name: 'link',
+            label: 'Project Code',
+          },
+        }),
+      ],
+    },
+  ],
+}