blocks-dusted 0.1.11 → 0.1.13

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

@@ -33,7 +33,7 @@ const defaultServices: ServiceOverviewItem[] = [
     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'
+    engagement: 'Fixed Fee',
   },
   {
     code: 'SVC-02',
@@ -41,7 +41,7 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We translate business goals into a clear spatial direction, balancing brand, movement, function, and atmosphere.',
     timeline: '12-16 weeks',
-    engagement: 'Project-based'
+    engagement: 'Project-based',
   },
   {
     code: 'SVC-03',
@@ -49,7 +49,7 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We develop the interior architecture, material language, lighting, furniture strategy, and practical user experience.',
     timeline: '16-24 weeks',
-    engagement: 'Fixed Fee'
+    engagement: 'Fixed Fee',
   },
   {
     code: 'SVC-04',
@@ -57,7 +57,7 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We prepare the technical drawings, schedules, and coordination notes required for approval, pricing, and buildability.',
     timeline: '8-12 weeks',
-    engagement: 'Project-based'
+    engagement: 'Project-based',
   },
   {
     code: 'SVC-05',
@@ -65,7 +65,7 @@ const defaultServices: ServiceOverviewItem[] = [
     description:
       'We support selection, specification, and sourcing so the design intent remains consistent through delivery.',
     timeline: '12-16 weeks',
-    engagement: 'Fixed Fee'
+    engagement: 'Fixed Fee',
   },
   {
     code: 'SVC-06',
@@ -73,8 +73,8 @@ const defaultServices: ServiceOverviewItem[] = [
     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'
-  }
+    engagement: 'Project-based',
+  },
 ]
 
 function getServices(services?: ServiceOverviewItem[] | null) {
@@ -116,7 +116,7 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
   scrollSpeed,
   eyebrowPrefix = 'service',
   eyebrowEmphasis = 'catalog',
-  services
+  services,
 }) => {
   const serviceItems = useMemo(() => getServices(services), [services])
   const [activeIndex, setActiveIndex] = useState(0)
@@ -141,7 +141,7 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
           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">
+            <p className="ServiceOverview03 mb-2 text-xs 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>
@@ -168,17 +168,17 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                   <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',
+                        'ServiceOverview09 mb-3 flex h-12 w-12 items-center justify-center rounded-md squircle border transition-all duration-500',
                         isActive
                           ? 'border-[#444444] bg-[#444444]'
-                          : 'border-[#444444] bg-[#e5e7eb] group-hover:border-[#A8A29E]'
+                          : 'border-[#444444] bg-[#e5e7eb] group-hover:border-[#A8A29E]',
                       )}
-                      style={{ borderRadius: '2px' }}
+                      style={{ borderRadius: '6px' }}
                     >
                       <span
                         className={cn(
                           'ServiceOverview10 text-xs font-semibold transition-colors duration-500',
-                          isActive ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300'
+                          isActive ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300',
                         )}
                       >
                         {String(i + 1).padStart(2, '0')}
@@ -186,16 +186,16 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                     </div>
                     <span
                       className={cn(
-                        'ServiceOverview11 text-[13px] font-medium uppercase tracking-[0.1em] transition-colors duration-500',
+                        'ServiceOverview11 text-base font-medium uppercase tracking-widest transition-colors duration-500',
                         isActive
                           ? 'text-stone-700 dark:text-stone-200'
-                          : 'text-stone-600 dark:text-stone-300 group-hover:text-stone-700'
+                          : '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">
+                      <span className="ServiceOverview12 mt-1 font-mono text-xs text-stone-600 dark:text-stone-300">
                         {service.code}
                       </span>
                     )}
@@ -213,15 +213,15 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
           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"
+            className="ServiceOverview14 z-plane-1 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"
             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">
+              <div className="shrink-0">
                 {activeService.code && (
-                  <span className="mb-2 block font-mono text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                  <span className="mb-2 block font-mono text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
                     {activeService.code}
                   </span>
                 )}
@@ -237,9 +237,9 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                   </p>
                 )}
               </div>
-              <div className="flex flex-grow flex-col gap-5 md:flex-row md:items-center md:gap-8">
+              <div className="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">
+                  <p className="mb-1 text-xs 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">
@@ -248,7 +248,7 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                 </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">
+                  <p className="mb-1 text-xs 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">
@@ -258,7 +258,7 @@ export const DDHGServiceOverview: React.FC<DDHGServiceOverviewProps> = ({
                 </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">
+                  <p className="mb-1 text-xs 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">

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

@@ -11,7 +11,7 @@ import {
   RefreshCw,
   ShieldCheck,
   User,
-  UserStar
+  UserStar,
 } from 'lucide-react'
 import React, { useState } from 'react'
 
@@ -69,33 +69,33 @@ const defaultTrustBadges: TrustBadge[] = [
   {
     icon: 'shieldCheck',
     title: 'Transparent Pricing',
-    description: 'Every quote is itemized. No hidden fees, no surprise charges at the end.'
+    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.'
+    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.'
+    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.'
+    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.'
+    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.'
-  }
+    description: '30 days of complimentary support after handover. We stand by our work.',
+  },
 ]
 
 const defaultTestimonials: TestimonialItem[] = [
@@ -103,42 +103,42 @@ 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'
+    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'
-  }
+    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.'
+      '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.'
+      '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.'
+      '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.'
+      '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.'
-  }
+      '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 = {
@@ -148,13 +148,13 @@ const iconMap = {
   fileText: FileText,
   refreshCw: RefreshCw,
   handHeart: HandHeart,
-  clipboardList: ClipboardList
+  clipboardList: ClipboardList,
 }
 
 function RevealBlock({
   children,
   className,
-  delay = 0
+  delay = 0,
 }: {
   children: React.ReactNode
   className?: string
@@ -190,7 +190,7 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
   faqEyebrowEmphasis = 'questions',
   faqHeading = 'FAQ',
   showFaqDivider = true,
-  faqs
+  faqs,
 }) => {
   const [openFAQ, setOpenFAQ] = useState<number | null>(null)
   const testimonialItems = getItems(testimonials, defaultTestimonials)
@@ -213,29 +213,29 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
               {testimonialItems.map((testimonial, i) => (
                 <div
                   key={testimonial.id || `testimonial-${i}`}
-                  className="z-plane-1 chamfer-accent p-6 md:p-8"
+                  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-[13px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                    <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: '2px' }}
+                      style={{ borderRadius: '6px' }}
                     >
                       <User className="h-3.5 w-3.5 text-stone-50" strokeWidth={1.6} />
                     </div>
                     <div>
                       {testimonial.author && (
-                        <p className="text-[13px] font-medium text-stone-700 dark:text-stone-200">
+                        <p className="text-base font-medium text-stone-700 dark:text-stone-200">
                           {testimonial.author}
                         </p>
                       )}
                       {testimonial.role && (
-                        <p className="text-[13px] text-stone-600 dark:text-stone-300">
+                        <p className="text-base text-stone-600 dark:text-stone-300">
                           {testimonial.role}
                         </p>
                       )}
@@ -249,10 +249,10 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
 
         {badgeItems.length > 0 && (
           <RevealBlock className="whytrustus-section mb-16">
-            <div className="z-plane-1 p-6 md:p-8">
+            <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-[13px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+                  <p className="mb-2 font-mono text-base uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
                     {commitmentLabel}
                   </p>
                 )}
@@ -269,19 +269,19 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                   return (
                     <div
                       key={badge.id || `${badge.title || 'badge'}-${i}`}
-                      className="arch-edge-sm flex items-start gap-3 border border-[#D9D7D1] p-4"
+                      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 flex-shrink-0 items-center justify-center">
+                      <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-[13px] font-medium text-stone-700 dark:text-stone-200">
+                          <p className="mb-1 text-base font-medium text-stone-700 dark:text-stone-200">
                             {badge.title}
                           </p>
                         )}
                         {description && (
-                          <p className="text-[10px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                          <p className="text-xs font-light leading-relaxed text-stone-700 dark:text-stone-200">
                             {description}
                           </p>
                         )}
@@ -296,7 +296,7 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
 
         <RevealBlock className="faq-section max-w-4xl mx-auto mb-10">
           {(faqEyebrowPrefix || faqEyebrowEmphasis) && (
-            <p className="mb-2 text-[10px] uppercase tracking-[0.2em] text-stone-600 dark:text-stone-300">
+            <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>
@@ -320,9 +320,9 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                 <RevealBlock key={faq.id || `${question || 'faq'}-${i}`} delay={i * 0.06}>
                   <div
                     className={cn(
-                      'accordion-card z-plane-1 border-border border chamfer-accent transition-all duration-300',
+                      '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'
+                        'border-border border z-depth-hover hover:shadow-2xl hover:-translate-y-2',
                     )}
                   >
                     <button
@@ -332,7 +332,7 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                       aria-expanded={isOpen}
                     >
                       <div className="flex items-center gap-4">
-                        <span className="font-mono text-[13px] text-stone-600 dark:text-stone-300">
+                        <span className="font-mono text-base text-stone-600 dark:text-stone-300">
                           {String(i + 1).padStart(2, '0')}
                         </span>
                         {question && (
@@ -343,15 +343,15 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                       </div>
                       <div
                         className={cn(
-                          'ml-4 flex h-6 w-6 flex-shrink-0 items-center justify-center border border-[#D9D7D1] transition-all duration-300',
-                          isOpen && 'border-[#292524] bg-[#292524]'
+                          '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: '2px' }}
+                        style={{ borderRadius: '6px' }}
                       >
                         <ToggleIcon
                           className={cn(
                             'h-3 w-3',
-                            isOpen ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300'
+                            isOpen ? 'text-[#F5F3EF]' : 'text-stone-600 dark:text-stone-300',
                           )}
                           strokeWidth={1.8}
                         />
@@ -368,7 +368,7 @@ export const DDHGStatsFAQ: React.FC<DDHGStatsFAQProps> = ({
                         >
                           <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-[13px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                            <p className="text-base font-light leading-relaxed text-stone-700 dark:text-stone-200">
                               {answer}
                             </p>
                           </div>