blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-FeatProd/manifest.json

@@ -0,0 +1,93 @@
+{
+  "type": "block",
+  "name": "DD-FeatProd",
+  "label": "Featured Products",
+  "sourceName": "DD-FeatProd",
+  "portableName": "DD-FeatProd",
+  "slug": "DD-FeatProd",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/DD-FeatProd",
+    "originalSlug": "DD-FeatProd",
+    "originalConfigExport": "DDFeatProd",
+    "originalComponentExport": "DDFeatProd",
+    "originalInterfaceName": "DDFeatProd"
+  },
+  "files": [
+    {
+      "from": "CircularGallery.tsx",
+      "to": "src/blocks/DD-FeatProd/CircularGallery.tsx"
+    },
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-FeatProd/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-FeatProd/config.ts"
+    }
+  ],
+  "dependencies": [
+    "embla-carousel-react",
+    "framer-motion",
+    "lucide-react",
+    "ogl"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/fields/link.ts",
+      "reason": "Payload config uses the shared link field."
+    },
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Component imports cn from @/utilities/ui."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDFeatProd in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-FeatProd in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register DDFeatProd in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register DD-FeatProd in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can register DDFeatProd from @/blocks/DD-FeatProd/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-FeatProd with component export DDFeatProd."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "DDFeatProd",
+  "componentExportName": "DDFeatProd",
+  "interfaceName": "DDFeatProd"
+}

package/templates/blocks/DD-FeatServ/Component.tsx

@@ -0,0 +1,607 @@
+'use client'
+
+import React, { useCallback, useEffect, useState } from 'react'
+import type { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
+import { motion } from 'framer-motion'
+import useEmblaCarousel from 'embla-carousel-react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import * as LucideIcons from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
+import RichText from '@/components/RichText'
+import { cn } from '@/utilities/ui'
+
+/* ── Inlined CSS (converted from the original SCSS) ── */
+
+const featuredServicesBlockStyles = `
+.serviceHref-card.group {
+  box-shadow: var(--shadow-md);
+  border-radius: 1.5rem;
+  border: 1px solid var(--border);
+  corner-shape: ;
+  transition: all 0.3s;
+}
+.serviceHref-card.group .imageSrc-wrapper {
+  background: var(--bg-steel);
+  border-radius: 1.5rem 1.5rem;
+  background-repeat: repeat;
+  transition: all 0.3s;
+  corner-shape: ;
+}
+.serviceHref-card.group .imageSrc-wrapper img {
+  border-radius: 1rem 1rem 0 0 !important;
+  user-select: none;
+  corner-shape: ;
+}
+.serviceHref-card.group .card-content.serv-card {
+  backdrop-filter: blur(4px);
+  margin: -1rem 1rem 0;
+  z-index: 2;
+  border-radius: 1rem;
+  corner-shape: ;
+  transition: all 0.3s;
+}
+
+.featured-services-block .serviceHref-card.group .serviceContent {
+  overflow: visible;
+}
+.featured-services-block .serviceHref-card.group .serviceContent p {
+  display: -webkit-box;
+  max-height: calc(1.625em * 2);
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  transition: max-height 0.3s ease;
+}
+.featured-services-block .serviceHref-card.group:hover .serviceContent p,
+.featured-services-block .serviceHref-card.group:focus-within .serviceContent p {
+  display: block;
+  max-height: 20rem;
+  -webkit-line-clamp: unset;
+}
+.featured-services-block .serviceHref-card.group .serviceContent .button-custom-contained,
+.featured-services-block .serviceHref-card.group .serviceContent .button-custom-outlined {
+  width: 100% !important;
+  max-width: none;
+}
+.featured-services-block .serviceHref-card.group .serviceContent .button-custom-contained-label {
+  flex: 1;
+  text-align: center;
+}
+.featured-services-block .serviceHref-card.group .serviceContent .relative.z-20,
+.featured-services-block .serviceHref-card.group .serviceContent .relative.z-20 > div,
+.featured-services-block .serviceHref-card.group .serviceContent .relative.z-20 > div > div {
+  width: 100%;
+  transform-origin: center;
+}
+
+.featured-services-block .serviceHref-card.group .serviceContent h4 {
+  margin-top:1rem;
+}
+
+.featured-services-block .serviceHref-card.group .serviceContent .accordion-wrapper {
+    box-shadow: var(--shadow-3xl);
+    margin-left: -1rem;
+    margin-right: -1rem;
+    padding: 0 1rem;
+}
+
+
+
+.serviceHref-card.group:hover {
+  box-shadow: none !important;
+  border: 0;
+  transform: translateY(-0.5rem);
+  margin-bottom: -1.5rem;
+  transition: all 0.3s;
+  background: transparent !important;
+}
+.serviceHref-card.group:hover .imageSrc-wrapper {
+  box-shadow: var(--shadow-2xl);
+  transition: all 0.3s;
+}
+.serviceHref-card.group:hover .card-content.serv-card {
+  transform: translateY(-1rem);
+  box-shadow: var(--shadow-2xl), inset 0px 0px 60px 11px #eee;
+  transition: all 0.6s;
+}
+.serviceHref-card.group:hover .cardButton {
+  scale: 1.05;
+  filter: brightness(1.1);
+  transition: all 0.4s;
+}
+.serviceHref-card.group ul.list-bullet {
+  margin: 1rem 0rem !important;
+}
+.serviceHref-card.group li {
+  position: relative;
+  list-style: none !important;
+  margin-bottom: 0.775rem !important;
+  padding-left: 1rem;
+  letter-spacing: 0.5px;
+  font-size: 0.775rem !important;
+  line-height: normal !important;
+}
+.serviceHref-card.group li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.15em;
+  width: 1rem;
+  height: 1rem;
+  background: url("/assets/svg/icon-bfschevron-24.svg") center/contain no-repeat;
+}
+
+.serviceLink {
+  display: none;
+}
+
+.card-content.serv-card h4 span {
+  font-size: 2rem !important;
+}
+
+.viewAllHref-link:hover {
+  gap: 0.75rem;
+  transition: all 0.3s;
+}
+.viewAllHref-link:hover svg {
+  scale: 1.5;
+  transform-origin: right;
+  transition: all 0.2s;
+}
+`
+const fadeUp = {
+  hidden: { opacity: 0, y: 40 },
+  visible: (i: number) => ({
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: 'easeOut', delay: i * 0.1 },
+  }),
+}
+
+type MediaObj = {
+  url?: string | null
+  alt?: string | null
+}
+
+type CategoryValue = {
+  id?: string | number | null
+  title?: string | null
+}
+
+type LinkGroup = {
+  type?: 'custom' | 'reference' | null
+  newTab?: boolean | null
+  url?: string | null
+  label?: string | null
+  icon?: string | null
+  iconPosition?: 'before' | 'after' | 'only' | null
+  reference?: {
+    relationTo?: 'pages' | 'posts'
+    value?: { slug?: string | null } | string | number | null
+  } | null
+}
+
+type ServiceItem = {
+  id?: string | null
+  isClickableCard?: boolean | null
+  serviceLink: LinkGroup
+  serviceCategory?: CategoryValue | string | number | null
+  serviceContent: DefaultTypedEditorState
+  serviceBadge?: string | null
+  serviceImage?: MediaObj | string | null
+  serviceFeatures?:
+    | {
+        id?: string | null
+        serviceFeature: string
+      }[]
+    | null
+}
+
+export type DDFeatServProps = {
+  blockType?: 'DD-FeatServ'
+  blockName?: string | null
+  servicesEyebrow?: string | null
+  servicesHeading?: string | null
+  servicesDescription?: string | null
+  servicesViewAllLink?: LinkGroup | null
+  featuredServices?: ServiceItem[] | null
+  sectionId?: string | null
+  customCSS?: string | null
+}
+
+function getLinkHref(linkGroup?: LinkGroup | null): string | null {
+  if (
+    linkGroup?.type === 'reference' &&
+    linkGroup.reference?.value &&
+    typeof linkGroup.reference.value === 'object' &&
+    linkGroup.reference.value.slug
+  ) {
+    const collectionPrefix = linkGroup.reference.relationTo === 'posts' ? '/posts' : ''
+    return `${collectionPrefix}/${linkGroup.reference.value.slug}`
+  }
+
+  return linkGroup?.url || null
+}
+
+function getServiceLinkLabel(service: ServiceItem, index: number): string {
+  return (
+    service.serviceLink?.label ||
+    getServiceCategoryLabel(service) ||
+    service.serviceBadge ||
+    `Service ${index + 1}`
+  )
+}
+
+function getServiceCategoryLabel(service: ServiceItem): string | null {
+  if (service.serviceCategory && typeof service.serviceCategory === 'object') {
+    return service.serviceCategory.title || null
+  }
+
+  return typeof service.serviceCategory === 'string' ? service.serviceCategory : null
+}
+
+function createServicePlaceholder(_label?: string): string {
+  return `data:image/svg+xml,${encodeURIComponent(`
+    <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="700" viewBox="0 0 1200 700">
+      <defs>
+        <linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stop-color="#292524" />
+          <stop offset="1" stop-color="#4f46e5" />
+        </linearGradient>
+      </defs>
+      <rect width="1200" height="700" fill="url(#background)" />
+      <circle cx="1030" cy="120" r="250" fill="#ffffff" opacity="0.08" />
+      <circle cx="150" cy="650" r="300" fill="#ffffff" opacity="0.05" />
+     </svg>
+  `)}`
+}
+
+function getImageSrc(service: ServiceItem, index: number): string {
+  if (
+    service.serviceImage &&
+    typeof service.serviceImage === 'object' &&
+    service.serviceImage.url
+  ) {
+    return service.serviceImage.url
+  }
+
+  if (typeof service.serviceImage === 'string') {
+    return service.serviceImage
+  }
+
+  return createServicePlaceholder(getServiceLinkLabel(service, index))
+}
+
+function useSlidesPerView() {
+  const [slidesPerView, setSlidesPerView] = useState(3)
+
+  useEffect(() => {
+    const update = () => {
+      const width = window.innerWidth
+
+      if (width < 640) setSlidesPerView(1)
+      else if (width < 1024) setSlidesPerView(2)
+      else setSlidesPerView(3)
+    }
+
+    update()
+    window.addEventListener('resize', update)
+
+    return () => window.removeEventListener('resize', update)
+  }, [])
+
+  return slidesPerView
+}
+
+export const DDFeatServ: React.FC<DDFeatServProps> = ({
+  servicesEyebrow = 'What We Do',
+  servicesHeading = 'Our Services',
+  servicesDescription,
+  servicesViewAllLink,
+  featuredServices: servicesProp,
+  sectionId = 'featured-services',
+  customCSS,
+}) => {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (document.getElementById('featured-services-block-inline-styles')) return
+
+    const style = document.createElement('style')
+    style.id = 'featured-services-block-inline-styles'
+    style.textContent = featuredServicesBlockStyles
+    document.head.appendChild(style)
+
+    return () => style.remove()
+  }, [])
+
+  const services = servicesProp ?? []
+  const viewAllHref = getLinkHref(servicesViewAllLink)
+  const ViewAllIcon = servicesViewAllLink?.icon
+    ? (LucideIcons[servicesViewAllLink.icon as keyof typeof LucideIcons] as LucideIcon | undefined)
+    : undefined
+  const viewAllIconPosition = servicesViewAllLink?.iconPosition ?? 'after'
+  const slidesPerView = useSlidesPerView()
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: 'start',
+    slidesToScroll: 1,
+    containScroll: 'trimSnaps',
+  })
+
+  const [loadedImages, setLoadedImages] = useState<Record<number, boolean>>({})
+
+  const interactiveSelector =
+    'a,button,input,select,textarea,[role="button"],[role="link"],[data-card-interactive]'
+
+  const handleCardNavigate = useCallback(
+    (
+      event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+      service: ServiceItem,
+    ) => {
+      const target = event.target as HTMLElement
+
+      if (target.closest(interactiveSelector)) return
+
+      const serviceHref = getLinkHref(service.serviceLink)
+      const isClickableCard = service.isClickableCard !== false
+
+      if (!isClickableCard || !serviceHref) return
+
+      if (service.serviceLink.newTab) {
+        window.open(serviceHref, '_blank', 'noopener,noreferrer')
+        return
+      }
+
+      router.push(serviceHref)
+    },
+    [router],
+  )
+
+  const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi])
+  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi])
+
+  if (!services.length) return null
+
+  return (
+    <div
+      id={sectionId ?? undefined}
+      className="featured-services-block relative left-0 mx-auto w-screen max-w-none overflow-hidden py-20 text-stone-900 dark:text-stone-100"
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div className="container-fluid">
+        <div className="mx-auto max-w-7xl px-4 md:px-6">
+          {(servicesEyebrow || servicesHeading || servicesDescription || viewAllHref) && (
+            <motion.div
+              className="mb-12 flex flex-col justify-between gap-4 md:flex-row md:items-end"
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, amount: 0.3 }}
+              custom={0}
+              variants={fadeUp}
+            >
+              <div>
+                {servicesEyebrow && (
+                  <div
+                    data-type={`eyebrow-${servicesEyebrow}`}
+                    className="text-xs tracking-widest text-indigo-700 dark:text-indigo-300"
+                  >
+                    {servicesEyebrow}
+                  </div>
+                )}
+
+                {servicesHeading && (
+                  <h2 className="text-3xl font-black leading-tight text-stone-900 dark:text-stone-100 md:text-4xl lg:text-5xl">
+                    {servicesHeading}
+                  </h2>
+                )}
+
+                {servicesDescription && (
+                  <p className="mt-3 max-w-xl text-sm text-stone-600 dark:text-stone-300 md:text-base">
+                    {servicesDescription}
+                  </p>
+                )}
+              </div>
+
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  onClick={scrollPrev}
+                  aria-label="Previous service"
+                  className="flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border-2 border-stone-800 text-stone-900 transition-all hover:bg-stone-900 hover:text-stone-50 dark:border-stone-200 dark:text-stone-100 dark:hover:bg-stone-100 dark:hover:text-stone-950 disabled:cursor-not-allowed disabled:opacity-30"
+                >
+                  <ChevronLeft className="h-5 w-5" />
+                </button>
+
+                <button
+                  type="button"
+                  onClick={scrollNext}
+                  aria-label="Next service"
+                  className="flex h-11 w-11 cursor-pointer items-center justify-center rounded-full bg-indigo-600 text-white transition-all hover:bg-indigo-700 dark:bg-indigo-500 dark:text-stone-950 dark:hover:bg-indigo-300 disabled:cursor-not-allowed disabled:opacity-30"
+                >
+                  <ChevronRight className="h-5 w-5" />
+                </button>
+
+                {viewAllHref && servicesViewAllLink?.label && (
+                  <Link
+                    href={viewAllHref}
+                    aria-label={
+                      viewAllIconPosition === 'only' ? servicesViewAllLink.label : undefined
+                    }
+                    className="viewAllHref-link ml-2 inline-flex items-center gap-1.5 whitespace-nowrap text-sm font-semibold text-stone-900 dark:text-stone-100 transition-colors hover:text-indigo-700 dark:text-stone-100 dark:hover:text-indigo-300"
+                    {...(servicesViewAllLink.newTab
+                      ? { rel: 'noopener noreferrer', target: '_blank' }
+                      : {})}
+                  >
+                    {ViewAllIcon && viewAllIconPosition === 'before' && (
+                      <ViewAllIcon aria-hidden="true" className="h-4 w-4 shrink-0" />
+                    )}
+                    {viewAllIconPosition !== 'only' && servicesViewAllLink.label}
+                    {ViewAllIcon && ['after', 'only'].includes(viewAllIconPosition) && (
+                      <ViewAllIcon aria-hidden="true" className="h-4 w-4 shrink-0" />
+                    )}
+                    {!ViewAllIcon && viewAllIconPosition !== 'only' && (
+                      <span aria-hidden="true">
+                        <svg
+                          width="9"
+                          height="18"
+                          viewBox="0 0 9 18"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.53846 0H0L3.46154 8.86957L0 18H5.53846L9 8.86957L5.53846 0Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span>
+                    )}
+                  </Link>
+                )}
+              </div>
+            </motion.div>
+          )}
+
+          <div
+            ref={emblaRef}
+            data-container-type="serviceCarouselContainer"
+            className="overflow-x-visible overflow-y-visible pb-8"
+          >
+            <div className="flex py-4">
+              {services.map((service, index) => {
+                const imageSrc = getImageSrc(service, index)
+                const serviceHref = getLinkHref(service.serviceLink)
+                const serviceCategoryLabel = getServiceCategoryLabel(service)
+                const serviceLinkLabel = getServiceLinkLabel(service, index)
+                const isClickableCard = service.isClickableCard !== false && !!serviceHref
+
+                return (
+                  <motion.div
+                    key={service.id ?? service.serviceLink?.label ?? serviceCategoryLabel ?? index}
+                    className={cn(
+                      'slidesWidth min-w-0 flex-none px-2',
+                      slidesPerView === 1 && 'w-full',
+                      slidesPerView === 2 && 'w-1/2',
+                      slidesPerView === 3 && 'w-1/3',
+                    )}
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, amount: 0.2 }}
+                    custom={index}
+                    variants={fadeUp}
+                  >
+                    <div
+                      className={cn(
+                        'serviceHref-card group relative block h-fit my-4',
+                        isClickableCard &&
+                          'cursor-pointer focus-visible:outline focus-visible:outline-2 outline-4 outline-solid focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]',
+                      )}
+                      role={isClickableCard ? 'link' : undefined}
+                      tabIndex={isClickableCard ? 0 : undefined}
+                      aria-label={isClickableCard ? serviceLinkLabel : undefined}
+                      onClick={
+                        isClickableCard ? (event) => handleCardNavigate(event, service) : undefined
+                      }
+                      onKeyDown={
+                        isClickableCard
+                          ? (event) => {
+                              if (event.key !== 'Enter' && event.key !== ' ') return
+
+                              event.preventDefault()
+                              handleCardNavigate(event, service)
+                            }
+                          : undefined
+                      }
+                    >
+                      <div className="imageSrc-wrapper flex h-full flex-col overflow-hidden border border-stone-200 dark:border-stone-700 bg-stone-50 text-stone-900 transition-all duration-300 dark:bg-stone-900 dark:text-stone-100 hover:-translate-y-2 hover:border-indigo-500/40 hover:shadow-xl">
+                        <div className="imageSrc rounded-t-2xl relative h-52 flex-shrink-0 overflow-hidden bg-stone-100 dark:bg-stone-800">
+                          {imageSrc ? (
+                            <>
+                              {!loadedImages[index] && (
+                                <div className="absolute inset-0 animate-pulse bg-stone-200 dark:bg-stone-800   overflow-hidden" />
+                              )}
+
+                              <Image
+                                src={imageSrc}
+                                alt={
+                                  service.serviceImage && typeof service.serviceImage === 'object'
+                                    ? service.serviceImage.alt || serviceLinkLabel
+                                    : serviceLinkLabel
+                                }
+                                fill
+                                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                                priority={index === 0}
+                                unoptimized={imageSrc.startsWith('data:')}
+                                className="h-full w-full object-cover object-top transition-transform duration-500 group-hover:scale-105 rounded-t-2xl overflow-hidden"
+                                draggable={false}
+                                onLoad={() =>
+                                  setLoadedImages((previous) => ({
+                                    ...previous,
+                                    [index]: true,
+                                  }))
+                                }
+                              />
+                            </>
+                          ) : (
+                            <div className="h-full w-full bg-stone-200 dark:bg-stone-800" />
+                          )}
+
+                          {service.serviceBadge && (
+                            <div className="serviceBadge absolute left-3 top-0 rounded-b-md  shadow-sm bg-indigo-600 uppercase  tracking-wide px-2 pt-1 pb-0.5 text-xs font-semibold text-white">
+                              {service.serviceBadge}
+                            </div>
+                          )}
+
+                          <div className="absolute inset-0 bg-gradient-to-t from-[#292524]/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+
+                          <div className="serviceLink absolute bottom-3 left-3 right-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100 hidden">
+                            {/* <span className="text-sm font-semibold text-white">
+                              {serviceLinkLabel}
+                            </span> */}
+                          </div>
+                        </div>
+
+                        <div className="card-content serv-card flex bg-stone-200/50 dark:bg-stone-900/50 dark:group-hover:bg-stone-100/80 group-hover:shadow-2xl flex-1 flex-col px-4 pb-5 pt-2">
+                          {serviceCategoryLabel && (
+                            <div className="mb-1 w-fit -mt-4 rounded-lg bg-stone-700 dark:bg-stone-300 px-2 py-[0.2rem] text-xs font-semibold uppercase tracking-widest text-indigo-700 dark:text-indigo-300 [box-shadow:var(--shadow-xl)] [text-shadow:0_1px_0_#8a7f7f] [corner-shape:] scale-90 origin-top-left">
+                              {serviceCategoryLabel}
+                            </div>
+                          )}
+
+                          <RichText
+                            data={service.serviceContent}
+                            enableGutter={false}
+                            enableProse={false}
+                            className="serviceContent mb-4 flex-1 [&_a]:relative [&_a]:z-20 [&_h4]:mb-2 [&_h4]:line-clamp-none [&_h4]:text-base [&_h4]:font-bold [&_h4]:leading-snug [&_h4]:text-stone-900 dark:[&_h4]:text-stone-100 dark:group-hover:[&_h4]:text-stone-900 dark:text-stone-500 [&_p]:line-clamp-none [&_p]:text-sm [&_p]:leading-relaxed [&_p]:text-stone-700 dark:[&_p]:text-stone-300 dark:group-hover:[&_p]:text-stone-700 dark:hover:text-stone-900"
+                          />
+
+                          {!!service.serviceFeatures?.length && (
+                            <div className="flex flex-wrap gap-1.5">
+                              {service.serviceFeatures.slice(0, 2).map((item) => (
+                                <span
+                                  key={item.id ?? item.serviceFeature}
+                                  className="rounded-full bg-indigo-100 dark:bg-indigo-950/70 px-2.5 py-1 text-xs text-indigo-700 dark:text-indigo-300"
+                                >
+                                  {item.serviceFeature}
+                                </span>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </motion.div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}