blocks-dusted 0.1.12 → 0.1.13

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

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

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

@@ -21,7 +21,6 @@ type Media = {
 
 type LinkReference =
   | { relationTo: 'pages'; value: number | PortableDoc }
-  | { relationTo: 'posts'; value: number | PortableDoc }
   | { relationTo: 'projects'; value: number | PortableDoc }
   | { relationTo: 'thoughts'; value: number | PortableDoc }
 
@@ -82,7 +81,6 @@ const getDocumentSlug = (doc: PortableDoc | number): string | null => {
 }
 
 const getCollectionPath = (relationTo: LinkReference['relationTo']): string => {
-  if (relationTo === 'posts') return 'thoughts'
   if (relationTo === 'thoughts') return 'thoughts'
   if (relationTo === 'projects') return 'archives'
   return ''
@@ -120,7 +118,12 @@ export const DDHGHighlightArc: React.FC<DDHGHighlightArcProps> = ({
   if (!Array.isArray(highlights) || highlights.length === 0) return null
 
   return (
-    <div className={cn('grid origin-top scale-100 gap-0!', getGridClassName(gridColumns))}>
+    <div
+      className={cn(
+        'mx-auto grid w-full max-w-7xl origin-top scale-100 gap-0!',
+        getGridClassName(gridColumns),
+      )}
+    >
       {highlights.map((h, i) => {
         const isHovered = hoveredIdx === i
         const bgImage = typeof h.bgImage === 'object' && h.bgImage !== null ? h.bgImage : null

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

@@ -3,6 +3,7 @@
 import React, { useState } from 'react'
 import { motion } from 'framer-motion'
 import Image from 'next/image'
+import * as LucideIcons from 'lucide-react'
 import { cn } from '@/utilities/ui'
 // DDHG TODO: Re-enable after reviewing the project-specific separator/custom CSS bundle.
 // import { Separator } from '@/components/ui/separator'
@@ -19,8 +20,21 @@ type LogoItem = {
   imageClass?: string | null
   imageStyle?: React.CSSProperties
   imageAltClass?: string | null
+  icon?: string | null
+  label?: string | null
+  showLabel?: boolean | null
 }
 
+function DynamicIcon({
+  name,
+  size = 36,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
+  if (!name) return null
+  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
+  if (!Icon) return null
+  return <Icon size={size} {...props} />
+}
 export type DDHGLogoMarqueeProps = {
   sectionId?: string | null
   logos?: LogoItem[] | null
@@ -79,6 +93,8 @@ export const DDHGLogoMarquee: React.FC<DDHGLogoMarqueeProps> = ({
   const validLogos = Array.isArray(logos) ? logos : []
   if (validLogos.length === 0) return null
   const calculatedItemWidth = itemWidth || 100
+  const defaultIcons = ['Code2', 'Database', 'PanelsTopLeft', 'Braces', 'Workflow', 'GitBranch']
+  const defaultLabels = ['Interface', 'Data', 'Layout', 'Types', 'Workflow', 'Collaboration']
   const totalWidth = validLogos.length * (calculatedItemWidth + (spacing || 0))
 
   // DDHG TODO: Re-enable with extractCustomCSS when that bundle is reviewed.
@@ -105,14 +121,35 @@ export const DDHGLogoMarquee: React.FC<DDHGLogoMarqueeProps> = ({
             : { minWidth: `${calculatedItemWidth}px` }),
         }}
       >
-        <LogoImage
-          src={logo.image?.url || placeholderBlur}
-          alt={logo.image?.alt}
-          customClass={logo.imageClass}
-          imageStyle={logo.imageStyle}
-          priority={Boolean(priority)}
-        />
-        <p className={cn('text-base text-center', logo.imageAltClass)}>{logo.image?.alt || null}</p>
+        {true ? (
+          <>
+            <div className="flex h-20 w-20 items-center justify-center rounded-2xl border border-[#2A2A30] bg-linear-to-b from-[#1a1a1f] to-[#0f0f12] p-4 invert-[1] transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(140,138,132,0.15)] dark:invert-[0]">
+              <DynamicIcon
+                className="text-[#9A9790]"
+                name={logo.icon || defaultIcons[index % defaultIcons.length]}
+                size={36}
+              />
+            </div>
+            {logo.showLabel !== false && (
+              <span className="mt-2 block whitespace-nowrap text-center text-sm text-[#9A9790]">
+                {logo.label || defaultLabels[index % defaultLabels.length]}
+              </span>
+            )}
+          </>
+        ) : (
+          <>
+            <LogoImage
+              src={logo.image?.url || placeholderBlur}
+              alt={logo.image?.alt}
+              customClass={logo.imageClass}
+              imageStyle={logo.imageStyle}
+              priority={Boolean(priority)}
+            />
+            <p className={cn('text-center text-base', logo.imageAltClass)}>
+              {logo.label || logo.image?.alt || null}
+            </p>
+          </>
+        )}
       </div>
     ))
 

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

@@ -22,7 +22,6 @@ type Media = {
 
 type LinkReference =
   | { relationTo: 'pages'; value: number | PortableDoc }
-  | { relationTo: 'posts'; value: number | PortableDoc }
   | { relationTo: 'projects'; value: number | PortableDoc }
   | { relationTo: 'thoughts'; value: number | PortableDoc }
 
@@ -70,7 +69,6 @@ const getDocumentSlug = (doc: PortableDoc | number): string | null => {
 }
 
 const getCollectionPath = (relationTo: LinkReference['relationTo']): string => {
-  if (relationTo === 'posts') return 'internal-docs'
   if (relationTo === 'thoughts') return 'thoughts'
   if (relationTo === 'projects') return 'archives'
   return ''
@@ -163,7 +161,7 @@ export const DDHGNavCodeGrid: React.FC<DDHGNavCodeGridProps> = ({
           const target = link?.newTab ? '_blank' : undefined
           const rel = link?.newTab ? 'noopener noreferrer' : undefined
           const className = cn(
-            'menu-cell-hover group relative flex items-center justify-center gap-2 bg-stone-200/50 py-2.5 text-xs font-normal uppercase tracking-[0.1em] text-sm [text-shadow:0px_2px_4px_#ffffff45] backdrop-blur-2xl transition-all duration-300 hover:-translate-y-0.5 hover:bg-stone-200/80 hover:text-stone-700 dark:bg-stone-900/50 dark:text-stone-200 dark:hover:bg-stone-800/70 sm:py-3 sm:text-xs md:py-4 hover:shadow-2xl',
+            'menu-cell-hover group relative flex items-center justify-center gap-2 bg-stone-200/50 py-2.5 text-xs font-normal uppercase tracking-[0.1em] text-sm !text-stone-900 [text-shadow:0px_2px_4px_#ffffff45] backdrop-blur-2xl transition-all duration-300 hover:-translate-y-0.5 hover:bg-stone-200/80 hover:!text-stone-700 dark:bg-stone-900/50 dark:!text-stone-100 dark:hover:bg-stone-800/70 dark:hover:!text-white sm:py-3 sm:text-xs md:py-4 hover:shadow-2xl',
             'border-r border-b border-border',
             (index + 1) % 4 === 0 ? 'sm:border-r-0' : ' ',
             index >= 4 ? 'sm:border-b-0' : '',

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-75 w-full overflow-hidden rounded-md squircle border border-stone-300/10 bg-stone-100/50 p-4 dark:border-stone-700/10 dark:bg-stone-900/50 hover:shadow-xl transition-all duration-300">
-        <RichText
-          data={content}
-          enableGutter={false}
-          enableProse={false}
-          className="h-full min-h-75 w-full *:m-0 [&_.media-block]:m-0 [&_img]:m-0"
-        />
-      </div>
-    )
-  }
   return (
-    <div className="min-h-75 w-full rounded-md squircle bg-linear-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>
   )
 }

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 rounded-md squircle bg-stone-100/50 p-6 dark:bg-stone-900/50 md:p-8"
+        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 }}