blocks-dusted 0.1.11 → 0.1.13

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

@@ -121,8 +121,8 @@ const defaultSteps: ProcessStep[] = [
     substeps: [
       { label: 'Site analysis' },
       { label: 'User research' },
-      { label: 'Brief definition' }
-    ]
+      { label: 'Brief definition' },
+    ],
   },
   {
     num: '02',
@@ -132,8 +132,8 @@ const defaultSteps: ProcessStep[] = [
     substeps: [
       { label: 'Spatial planning' },
       { label: 'Material selection' },
-      { label: 'Mood boards' }
-    ]
+      { label: 'Mood boards' },
+    ],
   },
   {
     num: '03',
@@ -143,8 +143,8 @@ const defaultSteps: ProcessStep[] = [
     substeps: [
       { label: 'Technical drawings' },
       { label: '3D visualization' },
-      { label: 'Specification' }
-    ]
+      { label: 'Specification' },
+    ],
   },
   {
     num: '04',
@@ -154,9 +154,9 @@ const defaultSteps: ProcessStep[] = [
     substeps: [
       { label: 'Construction oversight' },
       { label: 'Quality assurance' },
-      { label: 'Final handover' }
-    ]
-  }
+      { label: 'Final handover' },
+    ],
+  },
 ]
 
 let globalInstanceCounter = 0
@@ -164,7 +164,7 @@ let globalInstanceCounter = 0
 function FadeUpOnInView({
   children,
   className = '',
-  delay = 0
+  delay = 0,
 }: {
   children: React.ReactNode
   className?: string
@@ -188,7 +188,7 @@ function FadeUpOnInView({
           node.style.transitionDelay = '0s'
         }
       },
-      { threshold: 0.25 }
+      { threshold: 0.25 },
     )
 
     observer.observe(node)
@@ -203,7 +203,7 @@ function FadeUpOnInView({
         display: 'inline-block',
         opacity: 0,
         transform: 'translateY(24px)',
-        transition: 'opacity 700ms ease, transform 700ms ease'
+        transition: 'opacity 700ms ease, transform 700ms ease',
       }}
     >
       {children}
@@ -214,7 +214,7 @@ function FadeUpOnInView({
 function RevealText({
   text,
   className = '',
-  instanceIndex
+  instanceIndex,
 }: {
   text: string[]
   className?: string
@@ -243,7 +243,7 @@ function RevealText({
           setIsVisible(false)
         }
       },
-      { threshold: 0.3 }
+      { threshold: 0.3 },
     )
 
     observer.observe(node)
@@ -271,7 +271,7 @@ function RevealText({
           ref={textRef}
           className={cn(
             'process-section-reveal-text reveal-text animation inline-block h-auto bg-transparent text-left font-bold uppercase leading-none tracking-[1px]',
-            className
+            className,
           )}
         >
           {words.map((word, wordIndex) => {
@@ -297,7 +297,7 @@ function RevealText({
                         animationDuration: '1s',
                         animationFillMode: 'forwards',
                         animationDelay: `${baseDelay + index * 0.05}s`,
-                        transitionTimingFunction: 'cubic-bezier(0.075, 0.82, 0.165, 1)'
+                        transitionTimingFunction: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
                       }}
                     >
                       {char}
@@ -321,7 +321,7 @@ function StaggerFadeUp({
   className = '',
   delay = 0,
   as: Tag = 'div',
-  style
+  style,
 }: {
   children: React.ReactNode
   className?: string
@@ -344,7 +344,7 @@ function StaggerFadeUp({
         node.style.transitionDelay = `${delay}s`
         observer.unobserve(node)
       },
-      { threshold: 0.18 }
+      { threshold: 0.18 },
     )
 
     observer.observe(node)
@@ -361,7 +361,7 @@ function StaggerFadeUp({
         filter: 'blur(6px)',
         transition:
           'opacity 820ms ease, transform 820ms cubic-bezier(0.22, 1, 0.36, 1), filter 820ms ease',
-        ...style
+        ...style,
       }}
     >
       {children}
@@ -395,25 +395,24 @@ function ProcessDiagram({ label, content }: { label?: string | null; content?: a
       transition={{ duration: 0.9, delay: 0.3, ease: [0.22, 1, 0.36, 1] }}
     >
       <div className="ProcessSectionDiagram02 z-plane-0 p-5 md:p-8">
-        <p className="ProcessSectionDiagram03 mb-4 flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+        <p className="ProcessSectionDiagram03 mb-4 flex items-center gap-2 font-mono text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
           <Workflow className="ProcessSectionDiagram04 h-3.5 w-3.5" strokeWidth={1.5} />
           {label || 'Process Flow Diagram'}
         </p>
 
         {hasRichTextContent(content) ? (
-          <div className="ProcessSectionDiagram05 relative min-h-[300px] w-full overflow-hidden">
+          <div className="ProcessSectionDiagram05 relative min-h-75 w-full overflow-hidden">
             <RichText
               data={content}
               enableGutter={false}
               enableProse={false}
-              className="ProcessSectionDiagram06 ProcessSectionRichTextVisual h-full min-h-[300px] w-full [&>*]:m-0 [&_.media-block]:m-0 [&_img]:m-0"
+              className="ProcessSectionDiagram06 ProcessSectionRichTextVisual h-full min-h-75 w-full bg-stone-100/50 p-4 dark:bg-stone-900/50 *:m-0 [&_.media-block]:m-0 [&_img]:m-0"
             />
           </div>
         ) : (
-          <div className="ProcessSectionDiagram07 flex min-h-[300px] w-full bg-gradient-to-br from-[#838383] to-[#8e887c] dark:from-[#838383] dark:to-[#8e887c] items-center justify-center">
-            <span className="ProcessSectionDiagram08 inline-flex items-center gap-2 text-[10px] uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
-              <InlineLogoIcon className="ProcessSectionDiagram09 h-auto w-[6rem] opacity-90" />
-              |{' '}
+          <div className="ProcessSectionDiagram07 flex min-h-75 w-full bg-linear-to-br from-[#838383] to-[#8e887c] dark:from-[#838383] dark:to-[#8e887c] items-center justify-center">
+            <span className="ProcessSectionDiagram08 inline-flex items-center gap-2 text-xs uppercase tracking-[0.15em] text-stone-600 dark:text-stone-300">
+              <InlineLogoIcon className="ProcessSectionDiagram09 h-auto w-24 opacity-90" />|{' '}
             </span>
           </div>
         )}
@@ -435,7 +434,7 @@ export const DDHGProcessSec: React.FC<DDHGProcessSecProps> = ({
   diagramLabel = 'Process Flow Diagram',
   diagramContent,
   diagramVisualContent,
-  steps
+  steps,
 }) => {
   const processSteps = getSteps(steps)
   const visualContent = diagramContent || diagramVisualContent
@@ -461,7 +460,7 @@ export const DDHGProcessSec: React.FC<DDHGProcessSecProps> = ({
             <StaggerFadeUp
               as="p"
               delay={0.05}
-              className="ProcessSection04 eyebrowPrefix eyebrowEmphasis mb-2 origin-left !scale-80 text-xs uppercase tracking-[0.2em] text-stone-400 dark:text-stone-400"
+              className="ProcessSection04 eyebrowPrefix eyebrowEmphasis mb-2 origin-left text-xs uppercase tracking-[0.2em] text-stone-400 dark:text-stone-400"
             >
               {eyebrowPrefix && (
                 <span className="ProcessSection05 eyebrowPrefix font-light">{eyebrowPrefix} </span>
@@ -503,37 +502,37 @@ export const DDHGProcessSec: React.FC<DDHGProcessSecProps> = ({
                   transition={{ duration: 0.9, delay: i * 0.1, ease: [0.22, 1, 0.36, 1] }}
                 >
                   <div className="ProcessSection13 flex gap-6">
-                    <div className="ProcessSection14 flex flex-shrink-0 flex-col items-center">
-                      <div className="ProcessSection15 z-plane-1 flex h-14 w-14 items-center justify-center border border-[#D9D7D1]">
+                    <div className="ProcessSection14 flex shrink-0 flex-col items-center">
+                      <div className="ProcessSection15 bg-stone-200 dark:bg-zinc-900 z-plane-1 flex h-14 w-14 items-center justify-center rounded-md squircle border border-stone-100 dark:border-zinc-800">
                         <span className="ProcessSection16 text-lg font-semibold text-stone-700 dark:text-stone-200">
                           {step.num || String(i + 1).padStart(2, '0')}
                         </span>
                       </div>
                       {i < processSteps.length - 1 && (
                         <motion.div
-                          className="ProcessSection17 mb-2 mt-2 w-px flex-grow bg-stone-500"
+                          className="ProcessSection17 mb-2 mt-2 w-px grow bg-indigo-500"
                           initial={{ scaleY: 0, opacity: 0 }}
                           whileInView={{ scaleY: 1, opacity: 1 }}
                           viewport={{ once: true, amount: 0.2 }}
                           transition={{
                             duration: 0.8,
                             delay: i * 0.1 + 0.2,
-                            ease: [0.22, 1, 0.36, 1]
+                            ease: [0.22, 1, 0.36, 1],
                           }}
                           style={{ minHeight: 40, transformOrigin: 'top' }}
                         />
                       )}
                     </div>
 
-                    <div className="ProcessSection18 flex-grow pb-2">
-                      <div className="ProcessSection19 p-5 md:p-6 border-border border z-depth-hover hover:shadow-2xl hover:-translate-y-2">
+                    <div className="ProcessSection18 grow pb-2">
+                      <div className="ProcessSection19 bg-stone-200 dark:bg-zinc-900 rounded-md squircle border-border border p-5 transition-all duration-300 z-depth-hover hover:shadow-2xl hover:-translate-y-2 md:p-6">
                         {step.title && (
-                          <h3 className="ProcessSection20 mb-2 text-lg font-semibold text-purple-700 dark:text-purple-500">
+                          <h2 className="ProcessSection20 mb-2 text-2xl font-semibold text-indigo-700 dark:text-indigo-500 md:text-3xl">
                             {step.title}
-                          </h3>
+                          </h2>
                         )}
                         {getStepDescription(step) && (
-                          <p className="ProcessSection21 mb-4 text-[13px] font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                          <p className="ProcessSection21 mb-4 text-base font-light leading-relaxed text-stone-700 dark:text-stone-200">
                             {getStepDescription(step)}
                           </p>
                         )}
@@ -545,8 +544,8 @@ export const DDHGProcessSec: React.FC<DDHGProcessSecProps> = ({
                                 <span
                                   key={substep.id || `${substep.label}-${subIndex}`}
                                   className={cn(
-                                    'ProcessSection23 arch-edge-sm border border-[#D9D7D1] px-2 py-1 text-[10px] text-stone-600 dark:text-stone-300',
-                                    `ProcessSectionSubstep${i + 1}-${subIndex + 1}`
+                                    'ProcessSection23 arch-edge-sm rounded-md squircle border border-stone-300 px-2 py-1 text-xs text-stone-600 dark:border-stone-700 dark:text-stone-300',
+                                    `ProcessSectionSubstep${i + 1}-${subIndex + 1}`,
                                   )}
                                 >
                                   {substep.label}

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

@@ -6,7 +6,7 @@ import { cn } from '@/utilities/ui'
 import {
   ServiceDetailCard,
   type ServiceDetailItem,
-  type ServiceDetailLayout
+  type ServiceDetailLayout,
 } from './ServiceDetailCard'
 
 export type DDHGServiceDetailsProps = {
@@ -35,8 +35,8 @@ const defaultServices: ServiceDetailItem[] = [
       { label: 'Brief development' },
       { label: 'Space audit' },
       { label: 'Stakeholder alignment' },
-      { label: 'Design direction' }
-    ]
+      { label: 'Design direction' },
+    ],
   },
   {
     code: 'SVC-02',
@@ -49,8 +49,8 @@ const defaultServices: ServiceDetailItem[] = [
       { label: 'Concept strategy' },
       { label: 'Mood and material direction' },
       { label: 'Spatial planning' },
-      { label: 'Preliminary visualisation' }
-    ]
+      { label: 'Preliminary visualisation' },
+    ],
   },
   {
     code: 'SVC-03',
@@ -63,9 +63,9 @@ const defaultServices: ServiceDetailItem[] = [
       { label: 'Interior detailing' },
       { label: 'Material schedules' },
       { label: 'Furniture direction' },
-      { label: 'Lighting coordination' }
-    ]
-  }
+      { label: 'Lighting coordination' },
+    ],
+  },
 ]
 
 function getServices(services?: ServiceDetailItem[] | null) {
@@ -75,7 +75,7 @@ function getServices(services?: ServiceDetailItem[] | null) {
 function getLayout(
   service: ServiceDetailItem,
   index: number,
-  layoutMode?: 'cycle' | 'manual' | null
+  layoutMode?: 'cycle' | 'manual' | null,
 ): ServiceDetailLayout {
   if (layoutMode === 'manual' && service.layout && service.layout !== 'auto') return service.layout
   return layoutCycle[index % layoutCycle.length]
@@ -100,7 +100,7 @@ export const DDHGServiceDetails: React.FC<DDHGServiceDetailsProps> = ({
   eyebrowPrefix = 'detailed',
   eyebrowEmphasis = 'breakdown',
   layoutMode = 'cycle',
-  services
+  services,
 }) => {
   const serviceItems = useMemo(() => getServices(services), [services])
   const [expanded, setExpanded] = useState<number | null>(null)
@@ -123,7 +123,7 @@ export const DDHGServiceDetails: React.FC<DDHGServiceDetailsProps> = ({
           transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
         >
           {(eyebrowPrefix || eyebrowEmphasis) && (
-            <p className="ServiceDetails04 mb-2 text-[10px] uppercase tracking-[0.2em] text-stone-600 dark:text-stone-200">
+            <p className="ServiceDetails04 mb-2 text-xs uppercase tracking-[0.2em] text-stone-600 dark:text-stone-200">
               {eyebrowPrefix && <span className="font-light">{eyebrowPrefix} </span>}
               {eyebrowEmphasis && <span className="font-medium">{eyebrowEmphasis}</span>}
             </p>

package/templates/blocks/DDHG-ServiceDetails/ServiceDetailCard.tsx

@@ -2,8 +2,8 @@
 
 import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronDown, ChevronUp, CircleDot } from 'lucide-react'
+import Image from 'next/image'
 import React from 'react'
-import RichText from '@/components/RichText/index'
 import { cn } from '@/utilities/ui'
 
 export type ServiceDetailLayout = 'left' | 'right' | 'center' | 'split' | 'asym' | 'bleed'
@@ -161,12 +161,6 @@ type ServiceDetailCardProps = {
   onToggle: () => void
 }
 
-function hasRichTextContent(value: unknown): boolean {
-  if (!value || typeof value !== 'object') return false
-  const root = (value as any)?.root
-  return Array.isArray(root?.children) && root.children.length > 0
-}
-
 function getDescription(service: ServiceDetailItem) {
   return service.description || service.desc || ''
 }
@@ -180,22 +174,15 @@ function getPoints(service: ServiceDetailItem) {
 }
 
 function VisualContent({ service }: { service: ServiceDetailItem }) {
-  const content = service.visualContent || service.mediaContent || null
-  if (hasRichTextContent(content)) {
-    return (
-      <div className="relative h-full min-h-[300px] w-full overflow-hidden bg-[#FAFAF8]">
-        <RichText
-          data={content}
-          enableGutter={false}
-          enableProse={false}
-          className="h-full min-h-[300px] w-full [&>*]:m-0 [&_.media-block]:m-0 [&_img]:m-0"
-        />
-      </div>
-    )
-  }
   return (
-    <div className="min-h-[300px] w-full bg-gradient-to-br from-[#838383] to-[#8e887c] m-auto flex items-center justify-center">
-      <InlineLogoIcon />
+    <div className="relative h-full min-h-75 w-full overflow-hidden rounded-md squircle border border-stone-300/10 bg-stone-100/50 dark:border-stone-700/10 dark:bg-stone-900/50 hover:shadow-xl transition-all duration-300">
+      <Image
+        src="/media/placeholder-2-1920x1080.webp"
+        alt={`${service.title || 'Service detail'} visual`}
+        fill
+        className="object-cover"
+        sizes="(max-width: 768px) 100vw, 50vw"
+      />
     </div>
   )
 }
@@ -206,7 +193,7 @@ function ToggleButton({ isExpanded, onToggle }: { isExpanded: boolean; onToggle:
     <button
       type="button"
       onClick={onToggle}
-      className="btn-outline bg-[var(--border)] inline-flex items-center gap-2 self-start px-4 py-2 text-[13px] transition-colors duration-300 hover:brightness-105"
+      className="btn-outline inline-flex items-center gap-2 self-start rounded-md squircle border border-stone-300 bg-stone-100/50 px-4 py-2 text-base transition-all duration-300 hover:brightness-105 dark:border-stone-700/10 dark:bg-stone-900/50"
     >
       {isExpanded ? 'Close Details' : 'View Details'}
       <Icon className="h-3.5 w-3.5" strokeWidth={1.8} />
@@ -225,7 +212,7 @@ function ExpandPanel({ isExpanded, children }: { isExpanded: boolean; children:
           variants={{
             hidden: {
               height: 0,
-              opacity: 0
+              opacity: 0,
             },
             visible: {
               height: 'auto',
@@ -234,8 +221,8 @@ function ExpandPanel({ isExpanded, children }: { isExpanded: boolean; children:
                 duration: 0.5,
                 ease: [0.22, 1, 0.36, 1],
                 staggerChildren: 0.08,
-                delayChildren: 0.1
-              }
+                delayChildren: 0.1,
+              },
             },
             exit: {
               height: 0,
@@ -243,9 +230,9 @@ function ExpandPanel({ isExpanded, children }: { isExpanded: boolean; children:
               transition: {
                 duration: 0.35,
                 staggerChildren: 0.05,
-                staggerDirection: -1
-              }
-            }
+                staggerDirection: -1,
+              },
+            },
           }}
           className="overflow-hidden"
         >
@@ -254,20 +241,20 @@ function ExpandPanel({ isExpanded, children }: { isExpanded: boolean; children:
               variants={{
                 hidden: {
                   opacity: 0,
-                  y: 10
+                  y: 10,
                 },
                 visible: {
                   opacity: 1,
                   y: 0,
                   transition: {
                     duration: 0.3,
-                    ease: [0.22, 1, 0.36, 1]
-                  }
+                    ease: [0.22, 1, 0.36, 1],
+                  },
                 },
                 exit: {
                   opacity: 0,
-                  y: 6
-                }
+                  y: 6,
+                },
               }}
             >
               {child}
@@ -283,13 +270,13 @@ function DetailContent({
   service,
   index,
   isExpanded,
-  onToggle
+  onToggle,
 }: Omit<ServiceDetailCardProps, 'layout'>) {
   const points = getPoints(service)
   return (
     <div className="flex h-full flex-col justify-center p-4 md:p-6">
       {service.code && (
-        <span className="mb-3 block font-mono text-[10px] tracking-[0.15em] text-stone-600 dark:text-stone-300">
+        <span className="mb-3 block font-mono text-xs tracking-[0.15em] text-stone-600 dark:text-stone-300">
           {service.code}
         </span>
       )}
@@ -316,12 +303,12 @@ function DetailContent({
       </div>
       <ToggleButton isExpanded={isExpanded} onToggle={onToggle} />
       <ExpandPanel isExpanded={isExpanded}>
-        <div className="mt-4 border-t border-[#D9D7D1] pt-4">
+        <div className="mt-4 border-t border-stone-300 dark:border-stone-700/10 pt-4">
           <div className="flex flex-wrap gap-2">
             {points.map((detail) => (
               <span
                 key={detail}
-                className="arch-edge-sm border border-[#D9D7D1] px-3 py-1.5 text-[10px] text-stone-700 dark:text-stone-200"
+                className="arch-edge-sm rounded-md squircle border border-stone-300 px-3 py-1.5 text-xs text-stone-700 dark:border-stone-700/10 dark:text-stone-200"
               >
                 {detail}
               </span>
@@ -337,7 +324,7 @@ export function ServiceDetailCard(props: ServiceDetailCardProps) {
   const { service, layout } = props
   if (layout === 'center') {
     return (
-      <div className="z-plane-2 chamfer-accent relative overflow-hidden">
+      <div className="z-plane-2 chamfer-accent relative overflow-hidden rounded-md squircle border border-stone-300 bg-stone-100/50 transition-all duration-300 dark:border-stone-700/10 dark:bg-stone-900/50">
         <div className="pointer-events-none absolute inset-0 opacity-30">
           <VisualContent service={service} />
         </div>
@@ -350,8 +337,8 @@ export function ServiceDetailCard(props: ServiceDetailCardProps) {
 
   if (layout === 'bleed') {
     return (
-      <div className="z-plane-2 chamfer-accent relative overflow-hidden">
-        <div className="pointer-events-none absolute right-0 top-0 hidden h-full min-h-[300px] w-1/2 opacity-30 lg:block">
+      <div className="z-plane-2 chamfer-accent relative overflow-hidden rounded-md squircle border border-stone-300 bg-stone-100/50 transition-all duration-300 dark:border-stone-700/10 dark:bg-stone-900/50">
+        <div className="pointer-events-none absolute right-0 top-0 hidden h-full min-h-75 w-1/2 opacity-30 lg:block">
           <VisualContent service={service} />
         </div>
         <div className="relative max-w-2xl">
@@ -370,9 +357,7 @@ export function ServiceDetailCard(props: ServiceDetailCardProps) {
     <div className="z-plane-2 chamfer-accent">
       <div className={cn('grid grid-cols-1 gap-0', gridClass)}>
         {visualFirst && (
-          <div
-            className={cn('flex min-h-[300px] items-center justify-center p-4 md:p-6', visualClass)}
-          >
+          <div className={cn('flex min-h-75 items-center justify-center p-4 md:p-6', visualClass)}>
             <VisualContent service={service} />
           </div>
         )}
@@ -380,9 +365,7 @@ export function ServiceDetailCard(props: ServiceDetailCardProps) {
           <DetailContent {...props} />
         </div>
         {!visualFirst && (
-          <div
-            className={cn('flex min-h-[300px] items-center justify-center p-4 md:p-6', visualClass)}
-          >
+          <div className={cn('flex min-h-75 items-center justify-center p-4 md:p-6', visualClass)}>
             <VisualContent service={service} />
           </div>
         )}

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

@@ -24,7 +24,7 @@ const minHeightClassMap: Record<NonNullable<DDHGServiceHeroProps['minHeight']>,
   screen: 'min-h-screen',
   large: 'min-h-[70vh]',
   medium: 'min-h-[56vh]',
-  compact: 'min-h-[42vh]'
+  compact: 'min-h-[42vh]',
 }
 
 let globalInstanceCounter = 0
@@ -32,7 +32,7 @@ let globalInstanceCounter = 0
 function FadeUpOnInView({
   children,
   className = '',
-  delay = 0
+  delay = 0,
 }: {
   children: React.ReactNode
   className?: string
@@ -54,7 +54,7 @@ function FadeUpOnInView({
           node.style.transitionDelay = '0s'
         }
       },
-      { threshold: 0.25 }
+      { threshold: 0.25 },
     )
     observer.observe(node)
     return () => observer.disconnect()
@@ -67,7 +67,7 @@ function FadeUpOnInView({
         display: 'inline-block',
         opacity: 0,
         transform: 'translateY(24px)',
-        transition: 'opacity 700ms ease, transform 700ms ease'
+        transition: 'opacity 700ms ease, transform 700ms ease',
       }}
     >
       {children}
@@ -78,7 +78,7 @@ function FadeUpOnInView({
 function RevealText({
   text,
   className = '',
-  instanceIndex
+  instanceIndex,
 }: {
   text: string[]
   className?: string
@@ -101,7 +101,7 @@ function RevealText({
           setAnimationKey((key) => key + 1)
         } else setIsVisible(false)
       },
-      { threshold: 0.3 }
+      { threshold: 0.3 },
     )
     observer.observe(node)
     return () => observer.disconnect()
@@ -117,7 +117,7 @@ function RevealText({
           ref={textRef}
           className={cn(
             'inline-block h-auto bg-transparent text-left font-bold uppercase leading-none tracking-[1px]',
-            className
+            className,
           )}
         >
           {words.map((word, wordIndex) => {
@@ -140,7 +140,7 @@ function RevealText({
                         animationName: isVisible ? 'ddhgServiceHeroReveal' : 'none',
                         animationDuration: '1s',
                         animationFillMode: 'forwards',
-                        animationDelay: `${baseDelay + index * 0.05}s`
+                        animationDelay: `${baseDelay + index * 0.05}s`,
                       }}
                     >
                       {char}
@@ -169,7 +169,7 @@ export const DDHGServiceHero: React.FC<DDHGServiceHeroProps> = ({
   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
+  showScrollIndicator = true,
 }) => {
   const minHeightClass = minHeightClassMap[minHeight || 'large']
   return (
@@ -182,7 +182,7 @@ export const DDHGServiceHero: React.FC<DDHGServiceHeroProps> = ({
     >
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
       <motion.div
-        className="ServiceHeroCard relative z-10 mx-auto max-w-4xl overflow-clip"
+        className="ServiceHeroCard relative z-10 mx-auto w-full max-w-7xl overflow-clip rounded-md squircle bg-stone-100/50 p-6 dark:bg-stone-900/50 md:p-8"
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true, amount: 0.35 }}