blocks-dusted 0.1.10 → 0.1.11

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

@@ -0,0 +1,234 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { ArrowDown } from 'lucide-react'
+import React, { useEffect, useId, useRef, useState } from 'react'
+import { cn } from '@/utilities/ui'
+
+export type DDHGServiceHeroProps = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  blockId?: string | null
+  scrollSpeed?: string | number | null
+  eyebrowPrefix?: string | null
+  eyebrowEmphasis?: string | null
+  heading?: string | null
+  description?: string | null
+  minHeight?: 'screen' | 'large' | 'medium' | 'compact' | null
+  showDivider?: boolean | null
+  showScrollIndicator?: boolean | null
+}
+
+const minHeightClassMap: Record<NonNullable<DDHGServiceHeroProps['minHeight']>, string> = {
+  screen: 'min-h-screen',
+  large: 'min-h-[70vh]',
+  medium: 'min-h-[56vh]',
+  compact: 'min-h-[42vh]'
+}
+
+let globalInstanceCounter = 0
+
+function FadeUpOnInView({
+  children,
+  className = '',
+  delay = 0
+}: {
+  children: React.ReactNode
+  className?: string
+  delay?: number
+}) {
+  const ref = useRef<HTMLSpanElement | null>(null)
+  useEffect(() => {
+    const node = ref.current
+    if (!node) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          node.style.opacity = '1'
+          node.style.transform = 'translateY(0)'
+          node.style.transitionDelay = `${delay}s`
+        } else {
+          node.style.opacity = '0'
+          node.style.transform = 'translateY(24px)'
+          node.style.transitionDelay = '0s'
+        }
+      },
+      { threshold: 0.25 }
+    )
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [delay])
+  return (
+    <span
+      ref={ref}
+      className={className}
+      style={{
+        display: 'inline-block',
+        opacity: 0,
+        transform: 'translateY(24px)',
+        transition: 'opacity 700ms ease, transform 700ms ease'
+      }}
+    >
+      {children}
+    </span>
+  )
+}
+
+function RevealText({
+  text,
+  className = '',
+  instanceIndex
+}: {
+  text: string[]
+  className?: string
+  instanceIndex?: number
+}) {
+  const uniqueId = useId()
+  const uniqueInstanceId = useRef<number | undefined>(undefined)
+  const textRef = useRef<HTMLSpanElement | null>(null)
+  const [isVisible, setIsVisible] = useState(false)
+  const [animationKey, setAnimationKey] = useState(0)
+  if (uniqueInstanceId.current === undefined)
+    uniqueInstanceId.current = instanceIndex ?? globalInstanceCounter++
+  useEffect(() => {
+    const node = textRef.current
+    if (!node) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          setIsVisible(true)
+          setAnimationKey((key) => key + 1)
+        } else setIsVisible(false)
+      },
+      { threshold: 0.3 }
+    )
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [uniqueId])
+  const value = text?.[0] || ''
+  const words = value.split(' ')
+  const baseDelay = (uniqueInstanceId.current ?? 0) * 0.05
+  return (
+    <>
+      <style>{`@keyframes ddhgServiceHeroReveal { from { opacity: 0; transform: translateX(200px); } to { opacity: 1; transform: translateX(0%); } }`}</style>
+      <FadeUpOnInView delay={(uniqueInstanceId.current ?? 0) * 0.1}>
+        <span
+          ref={textRef}
+          className={cn(
+            'inline-block h-auto bg-transparent text-left font-bold uppercase leading-none tracking-[1px]',
+            className
+          )}
+        >
+          {words.map((word, wordIndex) => {
+            const previousLength = words.slice(0, wordIndex).join(' ').length
+            const offset = wordIndex === 0 ? 0 : previousLength + 1
+            return (
+              <span
+                key={`${animationKey}-word-${wordIndex}`}
+                className="inline-block whitespace-nowrap"
+              >
+                {word.split('').map((char, charIndex) => {
+                  const index = offset + charIndex
+                  return (
+                    <span
+                      key={`${animationKey}-${index}-${char}`}
+                      style={{
+                        display: 'inline-block',
+                        opacity: 0,
+                        transform: isVisible ? undefined : 'translateX(200px)',
+                        animationName: isVisible ? 'ddhgServiceHeroReveal' : 'none',
+                        animationDuration: '1s',
+                        animationFillMode: 'forwards',
+                        animationDelay: `${baseDelay + index * 0.05}s`
+                      }}
+                    >
+                      {char}
+                    </span>
+                  )
+                })}
+                {wordIndex < words.length - 1 ? <span>&nbsp;</span> : null}
+              </span>
+            )
+          })}
+        </span>
+      </FadeUpOnInView>
+    </>
+  )
+}
+
+export const DDHGServiceHero: React.FC<DDHGServiceHeroProps> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  blockId,
+  scrollSpeed,
+  eyebrowPrefix = 'what we',
+  eyebrowEmphasis = 'do',
+  heading = 'SERVICES',
+  description = 'From initial vision to final handover, our services span the full spectrum of interior architecture. Each engagement is shaped by the same principle: spaces should serve the people inside them.',
+  minHeight = 'large',
+  showDivider = true,
+  showScrollIndicator = true
+}) => {
+  const minHeightClass = minHeightClassMap[minHeight || 'large']
+  return (
+    <div
+      id={sectionId ?? undefined}
+      data-block-id={blockId ?? undefined}
+      data-scroll={scrollSpeed ? true : undefined}
+      data-scroll-speed={scrollSpeed ? String(scrollSpeed) : undefined}
+      className={cn('relative flex w-full overflow-hidden', minHeightClass, customClassName)}
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <motion.div
+        className="ServiceHeroCard relative z-10 mx-auto max-w-4xl overflow-clip"
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.35 }}
+        transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
+      >
+        {(eyebrowPrefix || eyebrowEmphasis) && (
+          <p className="mb-2 origin-left !scale-80 text-xs uppercase tracking-[0.2em] text-stone-400 dark:text-stone-400">
+            {eyebrowPrefix && <span className="font-light">{eyebrowPrefix} </span>}
+            {eyebrowEmphasis && <span className="font-medium">{eyebrowEmphasis}</span>}
+          </p>
+        )}
+        {heading && (
+          <span className="mt-2 block leading-[0.82] tracking-[0.08em]">
+            <RevealText
+              text={[heading]}
+              instanceIndex={1}
+              className="text-4xl font-extrabold md:text-6xl lg:text-8xl"
+            />
+          </span>
+        )}
+        {showDivider && <div className="mx-auto mb-6 h-px w-full bg-stone-400" />}
+        {description && (
+          <p className="mx-auto max-w-xl text-sm font-light leading-relaxed text-stone-700 dark:text-stone-200">
+            {description}
+          </p>
+        )}
+      </motion.div>
+      {showScrollIndicator && (
+        <motion.div
+          className="absolute bottom-8 left-1/2 flex -translate-x-1/2 flex-col items-center gap-2"
+          initial={{ opacity: 0, y: -8 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.35 }}
+          transition={{ delay: 0.4, duration: 0.7 }}
+          aria-hidden="true"
+        >
+          <motion.div
+            className="h-10 w-px bg-stone-500"
+            animate={{ scaleY: [0.65, 1, 0.65], opacity: [0.45, 1, 0.45] }}
+            transition={{ duration: 1.8, repeat: Infinity, ease: 'easeInOut' }}
+          />
+          <ArrowDown className="h-3.5 w-3.5 text-stone-600 dark:text-stone-300" strokeWidth={1.5} />
+        </motion.div>
+      )}
+    </div>
+  )
+}
+
+export default DDHGServiceHero

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

@@ -0,0 +1,49 @@
+import type { Block } from 'payload'
+
+export const DDHGServiceHero: Block = {
+  slug: 'DDHG-ServiceHero',
+  interfaceName: 'DDHGServiceHero',
+  dbName: 'ddhg_svc_hero',
+  labels: { singular: 'Service Hero', plural: 'Service Heroes' },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            { type: 'row', fields: [
+              { name: 'eyebrowPrefix', type: 'text', label: 'Eyebrow Prefix', defaultValue: 'what we', admin: { width: '50%' } },
+              { name: 'eyebrowEmphasis', type: 'text', label: 'Eyebrow Emphasis', defaultValue: 'do', admin: { width: '50%' } },
+            ] },
+            { name: 'heading', type: 'text', label: 'Heading', defaultValue: 'SERVICES', required: true },
+            { name: 'description', type: 'textarea', label: 'Description', defaultValue: 'From initial vision to final handover, our services span the full spectrum of interior architecture. Each engagement is shaped by the same principle: spaces should serve the people inside them.' },
+          ],
+        },
+        {
+          label: 'Layout',
+          fields: [
+            { name: 'minHeight', type: 'select', label: 'Minimum Height', defaultValue: 'large', options: [
+              { label: 'Screen', value: 'screen' }, { label: 'Large', value: 'large' }, { label: 'Medium', value: 'medium' }, { label: 'Compact', value: 'compact' },
+            ] },
+            { type: 'row', fields: [
+              { name: 'showDivider', type: 'checkbox', label: 'Show Divider', defaultValue: true, admin: { width: '50%' } },
+              { name: 'showScrollIndicator', type: 'checkbox', label: 'Show Scroll Indicator', defaultValue: true, admin: { width: '50%' } },
+            ] },
+          ],
+        },
+        {
+          label: 'Advanced',
+          fields: [
+            { type: 'row', fields: [
+              { name: 'sectionId', type: 'text', label: 'Section ID', admin: { width: '50%' } },
+              { name: 'customClassName', type: 'text', defaultValue: 'items-center justify-center', 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-ServiceHero/manifest.json

@@ -0,0 +1,26 @@
+{
+  "type": "block",
+  "name": "DDHG-ServiceHero",
+  "label": "Service Hero",
+  "sourceName": "ServiceHero",
+  "portableName": "DDHG-ServiceHero",
+  "slug": "DDHG-ServiceHero",
+  "version": "0.0.1",
+  "source": { "repo": "Hadizainal/HeatherGrey2025", "originalPath": "src/blocks/ServiceHero", "originalSlug": "serviceHero", "originalConfigExport": "ServiceHero", "originalComponentExport": "ServiceHeroBlock", "originalInterfaceName": "ServiceHeroBlockProps" },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-ServiceHero/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-ServiceHero/config.ts" }
+  ],
+  "dependencies": [{ "name": "framer-motion" }, { "name": "lucide-react" }],
+  "sharedFiles": [],
+  "requiredProjectFiles": [{ "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": ["Run payload generate:types after schema changes."],
+  "notes": ["Converted from HeatherGrey2025 ServiceHero.", "dbName namespaced to ddhg_svc_hero.", "Installer must not overwrite existing target files."],
+  "exportName": "DDHGServiceHero",
+  "interfaceName": "DDHGServiceHero"
+}

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

@@ -0,0 +1,277 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { CircleDot } from 'lucide-react'
+import React, { useMemo, useState } from 'react'
+import { cn } from '@/utilities/ui'
+
+type ServiceOverviewItem = {
+  code?: string | null
+  title?: string | null
+  description?: string | null
+  details?: { label?: string | null; id?: string | null }[] | null
+  timeline?: string | null
+  engagement?: string | null
+  id?: string | null
+}
+
+export type DDHGServiceOverviewProps = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  blockId?: string | null
+  scrollSpeed?: string | number | null
+  eyebrowPrefix?: string | null
+  eyebrowEmphasis?: string | null
+  services?: ServiceOverviewItem[] | null
+}
+
+const defaultServices: ServiceOverviewItem[] = [
+  {
+    code: 'SVC-01',
+    title: 'Discovery',
+    description:
+      'We begin by understanding the brief, the existing space, operational needs, and the people who will use it every day.',
+    timeline: '8-12 weeks',
+    engagement: 'Fixed Fee'
+  },
+  {
+    code: 'SVC-02',
+    title: 'Concept',
+    description:
+      'We translate business goals into a clear spatial direction, balancing brand, movement, function, and atmosphere.',
+    timeline: '12-16 weeks',
+    engagement: 'Project-based'
+  },
+  {
+    code: 'SVC-03',
+    title: 'Design',
+    description:
+      'We develop the interior architecture, material language, lighting, furniture strategy, and practical user experience.',
+    timeline: '16-24 weeks',
+    engagement: 'Fixed Fee'
+  },
+  {
+    code: 'SVC-04',
+    title: 'Documentation',
+    description:
+      'We prepare the technical drawings, schedules, and coordination notes required for approval, pricing, and buildability.',
+    timeline: '8-12 weeks',
+    engagement: 'Project-based'
+  },
+  {
+    code: 'SVC-05',
+    title: 'Procurement',
+    description:
+      'We support selection, specification, and sourcing so the design intent remains consistent through delivery.',
+    timeline: '12-16 weeks',
+    engagement: 'Fixed Fee'
+  },
+  {
+    code: 'SVC-06',
+    title: 'Handover',
+    description:
+      'We help close the project with practical review, refinements, and alignment between the completed space and the original intent.',
+    timeline: '16-24 weeks',
+    engagement: 'Project-based'
+  }
+]
+
+function getServices(services?: ServiceOverviewItem[] | null) {
+  return Array.isArray(services) && services.length > 0 ? services : defaultServices
+}
+
+function getDeliverableCount(service: ServiceOverviewItem) {
+  return Array.isArray(service.details) && service.details.length > 0 ? service.details.length : 4
+}
+
+function slugifyServiceTitle(value?: string | null) {
+  if (!value) return ''
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/&/g, 'and')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+function scrollToServiceDetail(title?: string | null) {
+  const targetId = slugifyServiceTitle(title)
+  if (!targetId) return
+  const targetEl = document.getElementById(targetId)
+  if (targetEl) {
+    const targetTop = targetEl.getBoundingClientRect().top + window.scrollY - 120
+    window.history.pushState(null, '', `#${targetId}`)
+    window.scrollTo({ top: targetTop, behavior: 'smooth' })
+    return
+  }
+  window.location.hash = targetId
+}
+
+export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  blockId,
+  scrollSpeed,
+  eyebrowPrefix = 'service',
+  eyebrowEmphasis = 'catalog',
+  services
+}) => {
+  const serviceItems = useMemo(() => getServices(services), [services])
+  const [activeIndex, setActiveIndex] = useState(0)
+  const activeService = serviceItems[activeIndex] || serviceItems[0]
+  if (!activeService) return null
+
+  return (
+    <div
+      id={sectionId ?? undefined}
+      data-block-id={blockId ?? undefined}
+      data-scroll={scrollSpeed ? true : undefined}
+      data-scroll-speed={scrollSpeed ? String(scrollSpeed) : undefined}
+      className={cn('px-5 py-16 md:px-8', customClassName)}
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="ServiceOverview01 mx-auto max-w-7xl">
+        <motion.div
+          className="ServiceOverview02 mb-10"
+          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] }}
+        >
+          {(eyebrowPrefix || eyebrowEmphasis) && (
+            <p className="ServiceOverview03 mb-2 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>
+        <div className="ServiceOverview04 relative">
+          <div className="ServiceOverview05 absolute left-0 right-0 top-6 hidden h-px bg-[#444444] md:block" />
+          <div className="ServiceOverview06 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
+            {serviceItems.map((service, i) => {
+              const isActive = activeIndex === i
+              return (
+                <motion.button
+                  key={service.id || service.code || `service-${i}`}
+                  type="button"
+                  className="ServiceOverview07 group relative cursor-pointer text-left"
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, amount: 0.2 }}
+                  transition={{ duration: 0.9, delay: i * 0.08, ease: [0.22, 1, 0.36, 1] }}
+                  onMouseEnter={() => setActiveIndex(i)}
+                  onFocus={() => setActiveIndex(i)}
+                  onClick={() => scrollToServiceDetail(service.title)}
+                >
+                  <div className="ServiceOverview08 flex flex-col items-center text-center">
+                    <div
+                      className={cn(
+                        'ServiceOverview09 mb-3 flex h-12 w-12 items-center justify-center border transition-all duration-500',
+                        isActive
+                          ? 'border-[#444444] bg-[#444444]'
+                          : 'border-[#444444] bg-[#e5e7eb] group-hover:border-[#A8A29E]'
+                      )}
+                      style={{ borderRadius: '2px' }}
+                    >
+                      <span
+                        className={cn(
+                          'ServiceOverview10 text-xs font-semibold transition-colors duration-500',
+                          isActive ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300'
+                        )}
+                      >
+                        {String(i + 1).padStart(2, '0')}
+                      </span>
+                    </div>
+                    <span
+                      className={cn(
+                        'ServiceOverview11 text-[13px] font-medium uppercase tracking-[0.1em] transition-colors duration-500',
+                        isActive
+                          ? 'text-stone-700 dark:text-stone-200'
+                          : 'text-stone-600 dark:text-stone-300 group-hover:text-stone-700'
+                      )}
+                    >
+                      {service.title}
+                    </span>
+                    {service.code && (
+                      <span className="ServiceOverview12 mt-1 font-mono text-[10px] text-stone-600 dark:text-stone-300">
+                        {service.code}
+                      </span>
+                    )}
+                  </div>
+                </motion.button>
+              )
+            })}
+          </div>
+        </div>
+        <motion.div
+          key={`service-overview-card-${activeIndex}`}
+          className="ServiceOverview13 mt-10"
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.2, delay: 0.05, ease: [0.22, 1, 0.36, 1] }}
+        >
+          <motion.div
+            className="ServiceOverview14 z-plane-1 p-6 md:p-8"
+            initial={{ x: -40, filter: 'blur(20px)', opacity: 0 }}
+            animate={{ x: 0, filter: 'blur(0px)', opacity: 1 }}
+            transition={{ duration: 0.2, delay: 0.08, ease: [0.22, 1, 0.36, 1] }}
+          >
+            <div className="flex flex-col gap-6 md:flex-row md:gap-10">
+              <div className="flex-shrink-0">
+                {activeService.code && (
+                  <span className="mb-2 block font-mono text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                    {activeService.code}
+                  </span>
+                )}
+                {activeService.title && (
+                  <h3 className="mb-2 text-xl font-semibold text-purple-700 dark:text-purple-500">
+                    {activeService.title}
+                  </h3>
+                )}
+                <div className="mb-3 h-px w-8 bg-stone-500" />
+                {activeService.description && (
+                  <p className="max-w-md text-[14px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                    {activeService.description}
+                  </p>
+                )}
+              </div>
+              <div className="flex flex-grow flex-col gap-5 md:flex-row md:items-center md:gap-8">
+                <div className="text-center">
+                  <p className="mb-1 text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                    Typical Timeline
+                  </p>
+                  <p className="text-md font-semibold text-stone-700 dark:text-stone-200">
+                    {activeService.timeline || '8-12 weeks'}
+                  </p>
+                </div>
+                <div className="hidden h-10 w-px bg-stone-500 md:block" />
+                <div className="text-center">
+                  <p className="mb-1 text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                    Deliverables
+                  </p>
+                  <p className="inline-flex items-center gap-2 text-md font-semibold text-stone-700 dark:text-stone-200">
+                    <CircleDot className="h-3.5 w-3.5" strokeWidth={1.7} />
+                    {getDeliverableCount(activeService)}
+                  </p>
+                </div>
+                <div className="hidden h-10 w-px bg-stone-500 md:block" />
+                <div className="text-center">
+                  <p className="mb-1 text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                    Engagement
+                  </p>
+                  <p className="text-md font-semibold text-stone-700 dark:text-stone-200">
+                    {activeService.engagement || 'Fixed Fee'}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+export default DDHGServiceOverview

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

@@ -0,0 +1,64 @@
+import type { Block } from 'payload'
+
+export const DDHGServiceOverview: Block = {
+  slug: 'DDHG-ServiceOverview',
+  interfaceName: 'DDHGServiceOverview',
+  dbName: 'ddhg_svc_overview',
+  labels: {
+    singular: 'Service Overview',
+    plural: 'Service Overviews',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                { name: 'eyebrowPrefix', type: 'text', label: 'Eyebrow Prefix', defaultValue: 'service', admin: { width: '50%' } },
+                { name: 'eyebrowEmphasis', type: 'text', label: 'Eyebrow Emphasis', defaultValue: 'catalog', admin: { width: '50%' } },
+              ],
+            },
+            {
+              name: 'services', type: 'array', label: 'Services', minRows: 1, maxRows: 8,
+              labels: { singular: 'Service', plural: 'Services' },
+              fields: [
+                {
+                  type: 'row', fields: [
+                    { name: 'code', type: 'text', label: 'Code', defaultValue: 'SVC-01', admin: { width: '33.33%' } },
+                    { name: 'title', type: 'text', label: 'Title', required: true, admin: { width: '33.33%' } },
+                    { name: 'timeline', type: 'text', label: 'Typical Timeline', defaultValue: '8-12 weeks', admin: { width: '33.33%' } },
+                  ],
+                },
+                { name: 'description', type: 'textarea', label: 'Description' },
+                {
+                  type: 'row', fields: [
+                    { name: 'engagement', type: 'text', label: 'Engagement', defaultValue: 'Fixed Fee', admin: { width: '50%' } },
+                    {
+                      name: 'details', type: 'array', label: 'Deliverables', admin: { width: '50%' },
+                      fields: [{ name: 'label', type: 'text', label: 'Deliverable', required: true }],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          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.' } },
+          ],
+        },
+      ],
+    },
+  ],
+}