blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,44 @@
+{
+  "type": "block",
+  "name": "DDHG-ServiceOverview",
+  "label": "Service Overview",
+  "sourceName": "ServiceOverview",
+  "portableName": "DDHG-ServiceOverview",
+  "slug": "DDHG-ServiceOverview",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/HeatherGrey2025",
+    "originalPath": "src/blocks/ServiceOverview",
+    "originalSlug": "serviceOverview",
+    "originalConfigExport": "ServiceOverview",
+    "originalComponentExport": "ServiceOverviewBlock",
+    "originalInterfaceName": "ServiceOverviewBlockProps"
+  },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-ServiceOverview/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-ServiceOverview/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 ServiceOverview.",
+    "dbName namespaced to ddhg_svc_overview.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDHGServiceOverview",
+  "interfaceName": "DDHGServiceOverview"
+}

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

@@ -0,0 +1,389 @@
+'use client'
+
+import { AnimatePresence, motion } from 'framer-motion'
+import {
+  CalendarCheck,
+  ChevronDown,
+  ChevronUp,
+  ClipboardList,
+  FileText,
+  HandHeart,
+  RefreshCw,
+  ShieldCheck,
+  User,
+  UserStar,
+} from 'lucide-react'
+import React, { useState } from 'react'
+
+import { cn } from '@/utilities/ui'
+
+type TrustBadge = {
+  icon?:
+    | 'shieldCheck'
+    | 'calendarCheck'
+    | 'userStar'
+    | 'fileText'
+    | 'refreshCw'
+    | 'handHeart'
+    | 'clipboardList'
+    | null
+  title?: string | null
+  description?: string | null
+  desc?: string | null
+  id?: string | null
+}
+
+type TestimonialItem = {
+  quote?: string | null
+  author?: string | null
+  role?: string | null
+  id?: string | null
+}
+
+type FAQItem = {
+  question?: string | null
+  q?: string | null
+  answer?: string | null
+  a?: string | null
+  id?: string | null
+}
+
+export type DDHGStatsFAQProps = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  blockId?: string | null
+  scrollSpeed?: string | number | null
+  testimonials?: TestimonialItem[] | null
+  commitmentLabel?: string | null
+  commitmentHeading?: string | null
+  trustBadges?: TrustBadge[] | null
+  faqEyebrowPrefix?: string | null
+  faqEyebrowEmphasis?: string | null
+  faqHeading?: string | null
+  showFaqDivider?: boolean | null
+  faqs?: FAQItem[] | null
+}
+
+const defaultTrustBadges: TrustBadge[] = [
+  {
+    icon: 'shieldCheck',
+    title: 'Transparent Pricing',
+    description: 'Every quote is itemized. No hidden fees, no surprise charges at the end.',
+  },
+  {
+    icon: 'calendarCheck',
+    title: 'Fixed Timeline Guarantee',
+    description: 'We commit to a delivery date and stick to it. If we miss it, you get a credit.',
+  },
+  {
+    icon: 'userStar',
+    title: 'Dedicated Project Lead',
+    description: 'One senior designer owns your project from kickoff to handover. No handoffs.',
+  },
+  {
+    icon: 'fileText',
+    title: 'Full Documentation',
+    description: 'Every finish, fixture, and specification is documented for future reference.',
+  },
+  {
+    icon: 'refreshCw',
+    title: 'Revision Rounds Included',
+    description: 'Three structured revision cycles are included in every engagement.',
+  },
+  {
+    icon: 'handHeart',
+    title: 'Post-Completion Support',
+    description: '30 days of complimentary support after handover. We stand by our work.',
+  },
+]
+
+const defaultTestimonials: TestimonialItem[] = [
+  {
+    quote:
+      'They delivered exactly what they promised, on the date they promised it, at the price they quoted. That alone is rare in this industry.',
+    author: 'Margaret Chen',
+    role: 'Director of Operations, Meridian Holdings',
+  },
+  {
+    quote:
+      'The transparency throughout the process was remarkable. We knew exactly where we stood at every phase. No surprises.',
+    author: 'James Oduya',
+    role: 'Founder, The Atelier Collective',
+  },
+]
+
+const defaultFaqs: FAQItem[] = [
+  {
+    question: 'How long does a typical project take?',
+    answer:
+      'Project timelines vary based on scope. A residential interior typically takes 8-16 weeks from concept to completion. Commercial fit-outs range from 12-24 weeks. We provide detailed timelines during our initial consultation.',
+  },
+  {
+    question: 'Do you handle both design and construction?',
+    answer:
+      'Yes, our Turn-Key Services cover the complete journey from initial concept through construction to final handover. We coordinate all contractors and trades, ensuring the design vision is executed faithfully.',
+  },
+  {
+    question: 'Can you work with existing furniture and art?',
+    answer:
+      'Absolutely. Our Atmospheric Curation service specializes in integrating existing pieces into new designs. We view heirlooms and collected art as anchors of identity within the space.',
+  },
+  {
+    question: 'What is your fee structure?',
+    answer:
+      'We offer both fixed-fee and percentage-based pricing depending on project type. Design Consultancy is typically fixed-fee, while Turn-Key projects use a percentage of construction cost. We provide transparent quotes upfront.',
+  },
+  {
+    question: 'Do you offer sustainability-focused design?',
+    answer:
+      'Sustainability is woven into our material selection and spatial planning. We prioritize low-VOC finishes, responsibly sourced materials, energy-efficient lighting, and biophilic elements that reduce environmental impact.',
+  },
+]
+
+const iconMap = {
+  shieldCheck: ShieldCheck,
+  calendarCheck: CalendarCheck,
+  userStar: UserStar,
+  fileText: FileText,
+  refreshCw: RefreshCw,
+  handHeart: HandHeart,
+  clipboardList: ClipboardList,
+}
+
+function RevealBlock({
+  children,
+  className,
+  delay = 0,
+}: {
+  children: React.ReactNode
+  className?: string
+  delay?: number
+}) {
+  return (
+    <motion.div
+      className={className}
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.18 }}
+      transition={{ duration: 0.9, delay, ease: [0.22, 1, 0.36, 1] }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+const getItems = <T,>(items: T[] | null | undefined, fallback: T[]) =>
+  Array.isArray(items) && items.length > 0 ? items : fallback
+
+export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  blockId,
+  scrollSpeed,
+  testimonials,
+  commitmentLabel = 'Our Commitment',
+  commitmentHeading = 'Why Clients Trust Us',
+  trustBadges,
+  faqEyebrowPrefix = 'common',
+  faqEyebrowEmphasis = 'questions',
+  faqHeading = 'FAQ',
+  showFaqDivider = true,
+  faqs,
+}) => {
+  const [openFAQ, setOpenFAQ] = useState<number | null>(null)
+  const testimonialItems = getItems(testimonials, defaultTestimonials)
+  const badgeItems = getItems(trustBadges, defaultTrustBadges)
+  const faqItems = getItems(faqs, defaultFaqs)
+
+  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="mx-auto max-w-7xl">
+        {testimonialItems.length > 0 && (
+          <RevealBlock className="testimonial-section mb-16">
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              {testimonialItems.map((testimonial, i) => (
+                <div
+                  key={testimonial.id || `testimonial-${i}`}
+                  className="z-plane-1 chamfer-accent rounded-md squircle border border-stone-300 bg-stone-100/50 p-6 transition-all duration-300 dark:border-stone-700/10 dark:bg-stone-900/50 md:p-8"
+                >
+                  <div className="mb-4 h-px w-8 bg-[#C4A882]" />
+                  {testimonial.quote && (
+                    <p className="mb-6 text-base font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                      &ldquo;{testimonial.quote}&rdquo;
+                    </p>
+                  )}
+                  <div className="flex items-center gap-3">
+                    <div
+                      className="flex h-8 w-8 items-center justify-center bg-stone-500"
+                      style={{ borderRadius: '6px' }}
+                    >
+                      <User className="h-3.5 w-3.5 text-stone-50" strokeWidth={1.6} />
+                    </div>
+                    <div>
+                      {testimonial.author && (
+                        <p className="text-base font-medium text-stone-700 dark:text-stone-200">
+                          {testimonial.author}
+                        </p>
+                      )}
+                      {testimonial.role && (
+                        <p className="text-base text-stone-600 dark:text-stone-300">
+                          {testimonial.role}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </RevealBlock>
+        )}
+
+        {badgeItems.length > 0 && (
+          <RevealBlock className="whytrustus-section mb-16">
+            <div className="z-plane-1 rounded-md squircle border border-stone-300 bg-stone-100/50 p-6 dark:border-stone-700/10 dark:bg-stone-900/50 md:p-8">
+              <div className="mb-6">
+                {commitmentLabel && (
+                  <p className="mb-2 font-mono text-base uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                    {commitmentLabel}
+                  </p>
+                )}
+                {commitmentHeading && (
+                  <h3 className="text-xl font-semibold text-purple-700 dark:text-purple-500">
+                    {commitmentHeading}
+                  </h3>
+                )}
+              </div>
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                {badgeItems.map((badge, i) => {
+                  const Icon = iconMap[badge.icon || 'shieldCheck'] || ShieldCheck
+                  const description = badge.description || badge.desc || ''
+                  return (
+                    <div
+                      key={badge.id || `${badge.title || 'badge'}-${i}`}
+                      className="arch-edge-sm flex items-start gap-3 rounded-md squircle border border-stone-300 bg-stone-100/50 p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:border-stone-700/10 dark:bg-stone-900/50"
+                    >
+                      <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center">
+                        <Icon className="h-4 w-4 text-[#C4A882]" strokeWidth={1.7} />
+                      </div>
+                      <div>
+                        {badge.title && (
+                          <p className="mb-1 text-base font-medium text-stone-700 dark:text-stone-200">
+                            {badge.title}
+                          </p>
+                        )}
+                        {description && (
+                          <p className="text-xs font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                            {description}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </RevealBlock>
+        )}
+
+        <RevealBlock className="faq-section max-w-4xl mx-auto mb-10">
+          {(faqEyebrowPrefix || faqEyebrowEmphasis) && (
+            <p className="mb-2 text-xs uppercase tracking-[0.2em] text-stone-600 dark:text-stone-300">
+              {faqEyebrowPrefix && <span className="font-light">{faqEyebrowPrefix} </span>}
+              {faqEyebrowEmphasis && <span className="font-medium">{faqEyebrowEmphasis}</span>}
+            </p>
+          )}
+          {faqHeading && (
+            <h2 className="mb-3 text-3xl font-medium leading-none tracking-tight text-purple-700 dark:text-purple-500 md:text-4xl">
+              {faqHeading}
+            </h2>
+          )}
+          {showFaqDivider && <div className="h-px w-12 bg-stone-500" />}
+        </RevealBlock>
+
+        {faqItems.length > 0 && (
+          <div className="faq-wrapper max-w-4xl mx-auto space-y-3">
+            {faqItems.map((faq, i) => {
+              const isOpen = openFAQ === i
+              const question = faq.question || faq.q || ''
+              const answer = faq.answer || faq.a || ''
+              const ToggleIcon = isOpen ? ChevronUp : ChevronDown
+              return (
+                <RevealBlock key={faq.id || `${question || 'faq'}-${i}`} delay={i * 0.06}>
+                  <div
+                    className={cn(
+                      'accordion-card z-plane-1 rounded-md squircle border-border border chamfer-accent bg-stone-100/50 transition-all duration-300 dark:bg-stone-900/50',
+                      isOpen &&
+                        'border-border border z-depth-hover hover:shadow-2xl hover:-translate-y-2',
+                    )}
+                  >
+                    <button
+                      type="button"
+                      onClick={() => setOpenFAQ(isOpen ? null : i)}
+                      className="accordion-btn flex w-full items-center justify-between p-5 text-left md:p-6"
+                      aria-expanded={isOpen}
+                    >
+                      <div className="flex items-center gap-4">
+                        <span className="font-mono text-base text-stone-600 dark:text-stone-300">
+                          {String(i + 1).padStart(2, '0')}
+                        </span>
+                        {question && (
+                          <h3 className="text-sm font-medium text-purple-700 dark:text-purple-500">
+                            {question}
+                          </h3>
+                        )}
+                      </div>
+                      <div
+                        className={cn(
+                          'ml-4 flex h-6 w-6 shrink-0 items-center justify-center rounded-md squircle border border-stone-300 dark:border-stone-700/10 transition-all duration-300',
+                          isOpen && 'border-[#292524] bg-[#292524]',
+                        )}
+                        style={{ borderRadius: '6px' }}
+                      >
+                        <ToggleIcon
+                          className={cn(
+                            'h-3 w-3',
+                            isOpen ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300',
+                          )}
+                          strokeWidth={1.8}
+                        />
+                      </div>
+                    </button>
+                    <AnimatePresence initial={false}>
+                      {isOpen && answer && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: 'auto', opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
+                          className="overflow-hidden"
+                        >
+                          <div className="px-5 pb-5 pl-14 md:px-6 md:pb-6 md:pl-16">
+                            <div className="mb-4 h-px w-full bg-stone-500" />
+                            <p className="text-base font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                              {answer}
+                            </p>
+                          </div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </div>
+                </RevealBlock>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DDHGStatsFAQ

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

@@ -0,0 +1,204 @@
+import type { Block } from 'payload'
+
+export const DDHGStatsFAQ: Block = {
+  slug: 'DDHG-StatsFAQ',
+  interfaceName: 'DDHGStatsFAQ',
+  dbName: 'ddhg_stats_faq',
+  labels: {
+    singular: 'Stats FAQ',
+    plural: 'Stats FAQs',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Testimonials',
+          fields: [
+            {
+              name: 'testimonials',
+              type: 'array',
+              label: 'Testimonials',
+              dbName: 'quotes',
+              labels: { singular: 'Testimonial', plural: 'Testimonials' },
+              fields: [
+                { name: 'quote', type: 'textarea', label: 'Quote', required: true },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'author',
+                      type: 'text',
+                      label: 'Author',
+                      required: true,
+                      admin: { width: '50%' },
+                    },
+                    {
+                      name: 'role',
+                      type: 'text',
+                      label: 'Role / Company',
+                      admin: { width: '50%' },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Trust Badges',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'commitmentLabel',
+                  type: 'text',
+                  label: 'Commitment Label',
+                  defaultValue: 'Our Commitment',
+                  admin: { width: '50%' },
+                },
+                {
+                  name: 'commitmentHeading',
+                  type: 'text',
+                  label: 'Commitment Heading',
+                  defaultValue: 'Why Clients Trust Us',
+                  admin: { width: '50%' },
+                },
+              ],
+            },
+            {
+              name: 'trustBadges',
+              type: 'array',
+              label: 'Trust Badges',
+              dbName: 'badges',
+              labels: { singular: 'Trust Badge', plural: 'Trust Badges' },
+              fields: [
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'icon',
+                      type: 'select',
+                      label: 'Icon',
+                      defaultValue: 'shieldCheck',
+                      admin: { width: '33.33%' },
+                      options: [
+                        { label: 'Shield Check', value: 'shieldCheck' },
+                        { label: 'Calendar Check', value: 'calendarCheck' },
+                        { label: 'User Star', value: 'userStar' },
+                        { label: 'File Text', value: 'fileText' },
+                        { label: 'Refresh', value: 'refreshCw' },
+                        { label: 'Hand Heart', value: 'handHeart' },
+                        { label: 'Clipboard List', value: 'clipboardList' },
+                      ],
+                    },
+                    {
+                      name: 'title',
+                      type: 'text',
+                      label: 'Title',
+                      required: true,
+                      admin: { width: '66.66%' },
+                    },
+                  ],
+                },
+                { name: 'description', type: 'textarea', label: 'Description' },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'FAQ',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'faqEyebrowPrefix',
+                  type: 'text',
+                  label: 'FAQ Eyebrow Prefix',
+                  defaultValue: 'common',
+                  admin: { width: '50%' },
+                },
+                {
+                  name: 'faqEyebrowEmphasis',
+                  type: 'text',
+                  label: 'FAQ Eyebrow Emphasis',
+                  defaultValue: 'questions',
+                  admin: { width: '50%' },
+                },
+              ],
+            },
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'faqHeading',
+                  type: 'text',
+                  label: 'FAQ Heading',
+                  defaultValue: 'FAQ',
+                  admin: { width: '75%' },
+                },
+                {
+                  name: 'showFaqDivider',
+                  type: 'checkbox',
+                  label: 'Show Divider',
+                  defaultValue: true,
+                  admin: { width: '25%' },
+                },
+              ],
+            },
+            {
+              name: 'faqs',
+              type: 'array',
+              label: 'FAQ Items',
+              dbName: 'faqs',
+              labels: { singular: 'FAQ Item', plural: 'FAQ Items' },
+              fields: [
+                { name: 'question', type: 'text', label: 'Question', required: true },
+                { name: 'answer', type: 'textarea', label: 'Answer', 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.',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}

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

@@ -0,0 +1,45 @@
+{
+  "type": "block",
+  "name": "DDHG-StatsFAQ",
+  "label": "Stats FAQ",
+  "sourceName": "StatsFAQ",
+  "portableName": "DDHG-StatsFAQ",
+  "slug": "DDHG-StatsFAQ",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/HeatherGrey2025",
+    "originalPath": "src/blocks/StatsFAQ",
+    "originalSlug": "statsFAQ",
+    "originalConfigExport": "StatsFAQ",
+    "originalComponentExport": "StatsFAQBlock",
+    "originalInterfaceName": "StatsFAQBlockProps"
+  },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-StatsFAQ/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-StatsFAQ/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": [
+    "Review HeatherGrey-specific utility classes such as z-plane, chamfer and arch-edge in the destination theme.",
+    "Run payload generate:types after schema changes."
+  ],
+  "notes": [
+    "Converted from HeatherGrey2025 StatsFAQ.",
+    "The top-level dbName was namespaced to ddhg_stats_faq for portability.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDHGStatsFAQ",
+  "interfaceName": "DDHGStatsFAQ"
+}