blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,45 @@
+{
+  "type": "block",
+  "name": "DDHG-NavCodeGrid",
+  "label": "Nav Code Grid",
+  "sourceName": "NavCodeGrid",
+  "portableName": "DDHG-NavCodeGrid",
+  "slug": "DDHG-NavCodeGrid",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/HeatherGrey2025",
+    "originalPath": "src/blocks/NavCodeGrid",
+    "originalSlug": "navCodeGrid",
+    "originalConfigExport": "NavCodeGrid",
+    "originalComponentExport": "NavCodeGridBlock",
+    "originalInterfaceName": "NavCodeGridBlock"
+  },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-NavCodeGrid/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-NavCodeGrid/config.ts" }
+  ],
+  "dependencies": [{ "name": "lucide-react" }],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    { "path": "src/fields/link.ts", "reason": "Payload config uses the shared link field." },
+    { "path": "src/utilities/ui.ts", "reason": "Component uses the cn utility." },
+    { "path": "src/utilities/getMediaUrl.ts", "reason": "Component resolves custom icon media URLs with getMediaUrl." }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": { "enabled": true, "collections": ["Pages", "Posts"] },
+  "renderBlocksRegistration": { "enabled": true },
+  "renderBlocksBehavior": { "wrapperless": false },
+  "pageRouteIntegration": { "required": false, "manualSteps": [] },
+  "manualSteps": [
+    "Confirm the destination link field supports icons, customIcon and reference collections used by this block.",
+    "Review the source-specific posts/projects/thoughts route mapping after installation.",
+    "Run payload generate:types after schema changes."
+  ],
+  "notes": [
+    "Converted from HeatherGrey2025 NavCodeGrid.",
+    "Generated Payload document types were replaced with portable structural types.",
+    "Installer must not overwrite existing target files."
+  ],
+  "exportName": "DDHGNavCodeGrid",
+  "interfaceName": "DDHGNavCodeGrid"
+}

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

@@ -0,0 +1,574 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Workflow } from 'lucide-react'
+import React, { useEffect, useId, useRef, useState } from 'react'
+
+import RichText from '@/components/RichText/index'
+import { cn } from '@/utilities/ui'
+
+const InlineLogoIcon = ({ className }: { className?: string }) => (
+  <svg
+    className={className}
+    aria-hidden="true"
+    width="65"
+    height="65"
+    viewBox="0 0 65 65"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.9815 60.0665C17.6553 60.043 19.2018 59.7404 20.4509 58.7466C20.4306 58.7306 20.414 58.7158 20.4004 58.7036C20.3775 58.6832 20.3625 58.6697 20.3532 58.672C18.8895 58.9593 17.3641 58.8192 15.8382 58.6791L15.7818 58.6738C15.1641 58.617 14.5488 58.5872 13.9406 58.6245C12.9115 58.6868 12.0332 59.0133 11.3364 59.6613C10.2367 60.6838 9.52216 61.9107 9.47662 63.577C8.83972 62.5158 8.44471 61.4873 8.2383 60.4265C7.88786 58.6258 7.87655 56.8647 8.32702 55.1749C8.4116 54.8558 8.40024 54.5328 8.30912 54.1977C7.86365 52.5559 7.92707 51.0023 8.54961 49.5441C8.55331 49.5356 8.55763 49.5269 8.56234 49.5181C8.56903 49.5057 8.5765 49.493 8.58407 49.4802C8.62768 49.4064 8.6744 49.3274 8.59255 49.2476C8.52155 49.1787 8.42482 49.1969 8.33291 49.2142C8.30609 49.2193 8.27967 49.2242 8.25443 49.227C6.57702 49.4017 5.27341 50.6829 5.14331 52.2818C5.1416 52.3016 5.13982 52.3214 5.13664 52.3414C5.1271 52.4015 5.10479 52.4626 5.03422 52.5273C5.02919 52.5058 5.02387 52.4842 5.01842 52.4627L5.00448 52.408L4.98426 52.3308C4.94678 52.1891 4.9093 52.0474 4.8913 51.906C4.52081 49.0377 5.37256 46.7529 7.82491 45.2849C8.63605 44.799 9.56474 44.4837 10.5573 44.3193C10.5821 44.3152 10.6109 44.3139 10.6405 44.3127C10.7451 44.3084 10.8606 44.3034 10.851 44.1704C10.847 44.116 10.8185 44.0828 10.7788 44.0601C10.7409 44.0384 10.6927 44.0263 10.6461 44.0145C10.6177 44.0075 10.59 44.0005 10.5654 43.9915C8.51421 43.245 6.56875 43.15 4.79275 44.0899C4.78098 44.0962 4.76408 44.0954 4.727 44.0935L4.72086 44.0932L4.69504 44.092C4.67499 44.0912 4.65078 44.0904 4.62135 44.0902C4.69181 43.9952 4.75703 43.9025 4.8203 43.8125L4.82186 43.8103C4.89669 43.7039 4.96884 43.6014 5.04344 43.5039C5.10153 43.428 5.16113 43.355 5.22482 43.2854C6.6361 41.7445 8.32654 40.5756 10.5919 40.1978C11.3391 40.0734 12.1135 40.079 12.8947 40.1353C12.9002 40.1357 12.9059 40.1362 12.9117 40.1369C12.9177 40.1377 12.9239 40.1386 12.9302 40.1397L12.9448 40.1423L12.9519 40.1437L12.9866 40.1509L12.9876 40.1511L12.9887 40.1513C13.0042 40.1546 13.0203 40.1581 13.0357 40.1609C13.0823 40.1695 13.127 40.1734 13.1598 40.1584C13.1815 40.1486 13.198 40.1305 13.2066 40.1001C13.2398 39.9827 13.126 39.9222 13.0235 39.8678L13.0222 39.8672C12.9993 39.855 12.9772 39.8431 12.9572 39.8311C11.5266 38.9584 9.9858 38.4209 8.40533 38.0064L8.3942 38.0035C8.26842 37.9704 8.14142 37.937 7.99972 37.818C8.14214 37.8127 8.28441 37.8061 8.42676 37.7995C8.76977 37.7836 9.11301 37.7677 9.45881 37.768C9.9542 37.7681 10.4526 37.7847 10.9521 37.8212C11.1071 37.8325 11.2624 37.8455 11.4179 37.8602C11.5532 37.873 11.6886 37.887 11.824 37.9022C11.9481 37.9161 12.0721 37.931 12.1961 37.9468C12.2961 37.9595 12.3962 37.9729 12.4961 37.9867C12.8346 38.0336 13.1733 38.0951 13.5564 38.1646C13.7339 38.1969 13.921 38.2308 14.122 38.2658C13.371 37.5246 12.818 36.8141 12.3342 36.0612C12.1312 35.7452 11.9415 35.4252 11.7737 35.0966H8.54634V11.4575H18.4186C20.9819 11.4575 23.245 11.964 25.2079 12.9771C27.1708 13.9677 28.695 15.3636 29.7804 17.1646C30.8657 18.9432 31.4084 20.9807 31.4084 23.2771C31.4084 25.5734 30.8657 27.6222 29.7804 29.4232C28.695 31.2018 27.1708 32.5976 25.2079 33.6108C23.245 34.6013 20.9819 35.0966 18.4186 35.0966H12.7908C14.5873 36.4569 16.6353 37.2084 18.8599 37.4806C20.9413 37.7345 22.9469 37.5737 24.8719 37.0739C25.2363 36.9793 25.44 36.8633 25.4014 36.4043C25.3253 35.4921 26.1558 34.7718 27.1538 34.8391C27.5074 34.8628 27.6752 34.7398 27.8514 34.5298C29.008 33.1493 29.6801 32.3487 30.3267 31.5785C31.0452 30.7227 31.732 29.9046 33.0168 28.3702C33.0975 28.274 33.183 28.1851 33.2751 28.1056L33.3408 28.0276C33.5225 27.811 33.5823 27.6142 33.5016 27.3023C33.2224 26.2187 33.8645 25.3376 34.9911 25.2531C35.2687 25.232 35.2754 25.0826 35.2827 24.9213L35.2838 24.8975L35.2851 24.8728C35.3588 23.6906 35.1641 22.5033 34.764 21.3268C33.5734 17.8283 31.3587 14.9284 28.1514 12.5312C29.155 12.5334 30.1021 12.7369 31.0433 13.0103C31.9956 13.2862 32.919 13.6635 33.934 14.1929C32.8624 12.3559 32.1365 10.5676 31.9007 8.55176C32.0576 8.76867 32.21 8.98344 32.3608 9.19611C33.0405 10.1547 33.6893 11.0696 34.5973 11.9384C33.9578 7.72892 35.6843 4.95063 39.2726 3.23441C38.2174 4.54938 37.9443 6.10457 38.2431 7.86275C40.0648 3.99782 43.49 3.3192 47.8653 4.51104L47.8634 4.51057C46.1896 4.53407 44.6431 4.83665 43.394 5.83047C43.4143 5.84641 43.431 5.86133 43.4447 5.87357L43.4547 5.88251C43.4721 5.8979 43.4838 5.90695 43.4917 5.90507C44.9553 5.6177 46.4807 5.7578 48.0064 5.89795L48.0631 5.90315C48.6808 5.96008 49.2961 5.98985 49.9044 5.95261C50.9333 5.89027 51.8117 5.5637 52.5085 4.91571C53.6082 3.89321 54.3227 2.66633 54.3683 1C55.0052 2.06128 55.4002 3.08979 55.6066 4.15055C55.957 5.95122 55.9684 7.71244 55.5179 9.40214C55.4333 9.72125 55.4446 10.0443 55.5358 10.3794C55.9812 12.0212 55.9178 13.5748 55.2953 15.0329C55.2899 15.0456 55.2831 15.0584 55.2757 15.0714C55.2709 15.0799 55.2659 15.0883 55.2608 15.0969C55.2172 15.1706 55.1705 15.2497 55.2523 15.3294C55.3035 15.3791 55.3679 15.3835 55.4344 15.3757L55.4436 15.3745L55.4545 15.3729L55.4672 15.371L55.4772 15.3693L55.4881 15.3674L55.5119 15.3629C55.5388 15.3578 55.5652 15.3528 55.5905 15.3501C57.2679 15.1754 58.5715 13.8941 58.7016 12.2953C58.7083 12.2159 58.7167 12.136 58.8107 12.0497C58.8183 12.082 58.8263 12.1143 58.8346 12.1467L58.8606 12.2463C58.8981 12.388 58.9356 12.5296 58.9536 12.6711C59.3241 15.5393 58.4723 17.8242 56.02 19.2922C55.2088 19.7781 54.2801 20.0933 53.2876 20.2578C53.2628 20.2618 53.2341 20.2631 53.2044 20.2643C53.0998 20.2688 52.9842 20.2737 52.9938 20.4067C53.0016 20.5128 53.1031 20.5384 53.1985 20.5624C53.2268 20.5695 53.2549 20.5766 53.2795 20.5855C55.3307 21.3321 57.2761 21.4271 59.0521 20.4872C59.062 20.4817 59.0756 20.4815 59.1019 20.4828L59.1176 20.4836C59.1424 20.4848 59.1762 20.4865 59.2235 20.4868C59.1846 20.5394 59.1473 20.5911 59.1109 20.6421L59.0243 20.7647L59.023 20.7667L59.022 20.7684C58.9675 20.8457 58.9145 20.9209 58.8611 20.9937C58.833 21.0318 58.8048 21.0693 58.7761 21.106L58.7438 21.1469C58.7038 21.1966 58.6629 21.2449 58.6201 21.2917C57.2088 22.8326 55.5183 24.0015 53.253 24.3792C52.5058 24.5036 51.7314 24.498 50.9502 24.4418C50.9223 24.4399 50.8906 24.433 50.858 24.426L50.8497 24.4242C50.84 24.4221 50.8304 24.4201 50.8208 24.4182C50.8081 24.4157 50.7953 24.4135 50.7828 24.4117C50.764 24.4092 50.746 24.4079 50.7293 24.4088L50.7209 24.4095L50.7131 24.4104L50.705 24.4119C50.7009 24.4129 50.6968 24.414 50.6929 24.4154C50.6897 24.4165 50.6866 24.4178 50.6836 24.4192L50.6784 24.4219L50.6732 24.4251C50.6574 24.4358 50.6452 24.4524 50.6383 24.477C50.6232 24.5303 50.6384 24.5718 50.6691 24.6064C50.6962 24.637 50.7354 24.6621 50.7765 24.685L50.7944 24.6949L50.8074 24.7018L50.8415 24.72C50.8576 24.7287 50.8733 24.7372 50.8877 24.746C52.3183 25.6187 53.8591 26.1561 55.4396 26.5707L55.4866 26.5831L55.5039 26.5878C55.5506 26.6006 55.5975 26.6152 55.6458 26.6357C55.6744 26.6479 55.7034 26.6622 55.7329 26.6794C55.7546 26.6922 55.7766 26.7065 55.799 26.7228L55.8145 26.7344L55.8263 26.7437L55.8366 26.7519L55.8452 26.759C55.7027 26.7644 55.5605 26.7709 55.4181 26.7775C55.0751 26.7934 54.7319 26.8093 54.3861 26.809C53.8907 26.809 53.3922 26.7924 52.8928 26.7558C52.6775 26.7402 52.4619 26.7211 52.246 26.699C51.947 26.6684 51.6476 26.6318 51.3488 26.5903C51.2637 26.5785 51.1787 26.5658 51.0929 26.5523L51.019 26.5405L50.9472 26.5287L50.8509 26.5125L50.768 26.4982C50.616 26.4719 50.4593 26.4434 50.2943 26.4135L50.2885 26.4125C50.111 26.3802 49.9239 26.3463 49.7229 26.3112C50.4739 27.0524 51.0269 27.763 51.5107 28.5159C51.8186 28.9952 52.0961 29.484 52.3127 29.9974H55.4346V53.9945H45.5623C42.999 53.9945 40.7359 53.4803 38.773 52.4518C36.8101 51.4463 35.286 50.0293 34.2006 48.2009C33.1152 46.3954 32.5725 44.3271 32.5725 41.996C32.5725 39.6648 33.1152 37.5851 34.2006 35.7567C35.286 33.9512 36.8101 32.5343 38.773 31.5058C40.7359 30.5002 42.999 29.9974 45.5623 29.9974H51.6908C49.7473 28.3077 47.4769 27.4013 44.985 27.0965C42.9036 26.8426 40.898 27.0033 38.973 27.5031C38.6086 27.5978 38.4049 27.7137 38.4435 28.1727C38.5196 29.085 37.6891 29.8052 36.6911 29.7379C36.3375 29.7142 36.1697 29.8373 35.9935 30.0473C35.3643 30.7984 34.8784 31.3778 34.4619 31.8741L33.5182 32.9986C32.7997 33.8544 32.1129 34.6725 30.8281 36.2068C30.7473 36.3031 30.6618 36.3919 30.5698 36.4715L30.5041 36.5494C30.3224 36.7661 30.2626 36.9628 30.3432 37.2747C30.6225 38.3584 29.9803 39.2395 28.8538 39.324C28.5761 39.345 28.5695 39.4946 28.5623 39.6558C28.5616 39.6719 28.5609 39.6881 28.5599 39.7043C28.4861 40.8864 28.6807 42.0738 29.0809 43.2502C30.2715 46.7488 32.4862 49.6486 35.6934 52.0458C34.6899 52.0437 33.7428 51.8401 32.8015 51.5667C31.8493 51.2908 30.9258 50.9135 29.9109 50.3841C30.9825 52.2212 31.7084 54.0095 31.9442 56.0253C31.7873 55.8084 31.6349 55.5936 31.4841 55.3809C30.8044 54.4224 30.1555 53.5074 29.2476 52.6386C29.887 56.8481 28.1606 59.6264 24.5723 61.3426C25.6275 60.0277 25.9006 58.4725 25.6018 56.7143C23.78 60.5792 20.3548 61.2578 15.9795 60.066L15.9815 60.0665ZM21.4149 59.5097L21.4634 59.5499C21.5212 59.5173 21.5792 59.4851 21.6372 59.4529L21.644 59.4493C21.709 59.4131 21.7741 59.3769 21.8386 59.3401C21.9121 59.2982 21.985 59.2555 22.0565 59.211C24.4576 57.723 25.5246 55.6009 24.8267 52.6409C24.692 52.069 24.5586 51.4973 24.4253 50.9254C24.3433 50.5742 24.2613 50.2229 24.1791 49.8717C24.1018 49.5415 24.0243 49.2114 23.9461 48.8813C23.9378 48.8463 23.9347 48.8071 23.9317 48.7675C23.9232 48.6584 23.9145 48.5457 23.795 48.5051C23.7838 48.5013 23.773 48.4986 23.7626 48.4969L23.7561 48.496C23.7498 48.4953 23.7437 48.4949 23.7378 48.4949C23.7189 48.4949 23.7013 48.4983 23.6848 48.5045C23.6203 48.5284 23.5724 48.5936 23.5276 48.6547L23.5085 48.6805L23.5024 48.6885C23.4948 48.6984 23.4873 48.7079 23.4797 48.7168C22.8099 49.5038 22.0576 50.2079 21.1797 50.7964C19.9499 51.6194 18.5507 52.1748 17.1532 52.7295L17.152 52.73L16.8516 52.8492C13.8591 54.0394 11.7765 56.0652 10.5315 58.873C10.5185 58.9027 10.5017 58.9321 10.4846 58.9619L10.4833 58.9643C10.4261 59.0638 10.3658 59.1689 10.423 59.3091C10.55 59.304 10.6084 59.2365 10.6639 59.1725C10.6771 59.1572 10.6902 59.1421 10.7041 59.1281C12.1267 57.6806 13.9082 56.7371 15.98 56.1893C16.0899 56.1603 16.2004 56.1327 16.3113 56.1062C16.5316 56.0535 16.7537 56.0053 16.9765 55.959C17.1605 55.9208 17.345 55.884 17.5295 55.8472L17.5328 55.8465L17.5389 55.8451L17.5399 55.8449C18.2226 55.7089 18.905 55.573 19.56 55.3675C19.568 55.3648 19.5856 55.381 19.6031 55.3971L19.6103 55.4037L19.6173 55.4099L19.6213 55.4134L19.626 55.4172C19.3481 55.8383 18.9319 56.1318 18.1387 56.3911C17.0158 56.7594 15.9098 57.1589 14.8201 57.5903C14.7984 57.599 14.7723 57.6057 14.7453 57.6126C14.6555 57.6355 14.5563 57.6607 14.5864 57.7663C14.6257 57.9033 14.7595 57.8999 14.876 57.8969C14.8941 57.8964 14.9119 57.8959 14.9287 57.896C15.6662 57.9028 16.4067 57.9535 17.148 58.0043L17.1519 58.0045L17.1559 58.0048L17.3929 58.021C17.4797 58.0268 17.5664 58.0327 17.6531 58.0383C19.6573 58.1703 21.3789 57.6719 22.7798 56.4943C22.7977 56.4791 22.8147 56.4612 22.832 56.4429C22.9018 56.369 22.979 56.2875 23.1606 56.3472C22.8193 57.5458 22.2211 58.5812 21.3692 59.4739H21.3716L21.4149 59.5097ZM23.6837 43.8172C23.4368 43.9951 23.1938 44.174 22.952 44.352C22.3995 44.759 21.8536 45.1611 21.2833 45.5342C20.0539 46.3405 18.6956 46.9541 17.3376 47.5676L17.0311 47.7061C16.8464 47.7897 16.6617 47.8737 16.4776 47.9584C16.2624 48.0574 16.048 48.1574 15.8348 48.2592C13.8311 49.2166 12.0166 50.3807 10.6856 52.0913C8.73366 54.4179 9.36344 56.6227 9.66354 57.6733C9.74221 57.9488 9.79833 58.1454 9.77906 58.2434C9.82073 58.2201 9.85212 58.1939 9.87671 58.1661C9.9229 58.1136 9.94511 58.0553 9.9664 57.9994L9.97217 57.9843C9.9761 57.9741 9.9801 57.9638 9.98414 57.954C9.98824 57.9442 9.99244 57.9346 9.99696 57.9252C10.5183 56.8345 11.1908 55.8473 12.0465 54.9857C13.6243 53.3963 15.6243 52.3705 17.8038 51.5773C19.7129 50.8826 21.4266 49.9384 22.6409 48.3898L22.6925 48.3243L22.7689 48.2282C23.1506 47.7485 23.55 47.2466 23.6138 46.6439C23.6681 46.1316 23.6656 45.6056 23.663 45.075L23.6629 45.0677C23.6616 44.795 23.6603 44.521 23.6668 44.2472C23.6703 44.1034 23.6758 43.9596 23.6847 43.816L23.6837 43.8172ZM24.8327 40.0253C23.9843 40.6199 23.1358 41.1862 22.2557 41.7116C19.924 43.1042 17.4172 44.1561 14.5143 44.4534C13.3003 44.5779 12.1097 44.7844 10.9226 44.9995C9.12526 45.3257 7.68877 46.1292 6.66829 47.4925C6.3736 47.8864 6.14031 48.3143 5.96259 48.8714C6.29138 48.7375 6.58353 48.5752 6.8683 48.4169C7.32019 48.1656 7.75355 47.9247 8.28522 47.825L7.64999 48.465C8.66286 48.4572 9.43222 48.0544 10.1917 47.6568C10.6878 47.397 11.1797 47.1394 11.7326 46.9956C10.8274 47.7308 10.0874 48.5815 9.53104 49.5813C8.96456 50.6004 8.82035 51.7322 8.86062 52.9625C9.00395 52.9137 9.0388 52.8309 9.07022 52.7562C9.08035 52.7321 9.09019 52.7087 9.10315 52.6878C9.11952 52.6611 9.13524 52.6339 9.15065 52.6065L9.18789 52.5399C9.19682 52.5239 9.20579 52.508 9.21492 52.4922L9.2233 52.4777L9.23715 52.4544L9.2452 52.4411L9.26168 52.4146C10.4023 50.6271 11.9926 49.2779 13.9028 48.2351C14.9112 47.6845 15.9642 47.2047 17.0172 46.7249L17.0209 46.7232L17.0258 46.7209L17.0377 46.7154L17.0389 46.7149C17.3934 46.5534 17.7489 46.3915 18.1016 46.2273C18.3184 46.1263 18.5344 46.0244 18.7494 45.9208C20.7092 44.9772 22.4978 43.8369 23.7548 42.1147C24.2191 41.4785 24.5559 40.7703 24.8327 40.0253ZM26.5191 56.9749C26.6271 56.5809 26.6583 56.1694 26.6895 55.7578L26.6899 55.7554L26.69 55.7523C26.7061 55.54 26.7223 55.3276 26.7491 55.1178C26.7662 54.9837 26.7877 54.8506 26.8163 54.7191C26.9967 55.4504 26.9322 56.1484 26.8676 56.8465C26.8577 56.9535 26.8479 57.0606 26.8389 57.1678C26.8276 57.3026 26.8176 57.4376 26.8108 57.5731C27.4947 55.6951 27.687 53.7212 27.2959 51.628C27.8656 53.347 28.0794 55.0567 28.0311 56.769L28.0879 56.4986L28.0882 56.4974C28.5094 54.4973 28.9303 52.4988 27.6332 50.3556L30.3214 52.6154L30.4195 52.5414C29.7833 51.4485 29.0662 50.3938 28.3483 49.3378C27.9187 48.7059 27.4889 48.0735 27.0757 47.4322C28.6598 48.5029 30.2627 49.5126 31.9574 50.3802C31.6858 50.1465 31.4117 49.9161 31.1379 49.686L31.1352 49.6838C30.2244 48.9189 29.3171 48.1568 28.5217 47.2824C28.7085 47.3735 28.8875 47.4745 29.0657 47.5751L29.0672 47.576L29.0725 47.579C29.1698 47.6339 29.2673 47.6889 29.3654 47.7419L29.3759 47.7477L29.3879 47.7546C29.3972 47.7601 29.4067 47.7659 29.4164 47.7719L29.418 47.7729C29.4457 47.7898 29.4755 47.8081 29.5045 47.8216C29.5679 47.8512 29.6316 47.8606 29.6825 47.7975C29.7387 47.7282 29.6729 47.6524 29.6136 47.5842L29.5958 47.5636L29.5869 47.5529C29.5826 47.5479 29.5787 47.5428 29.5748 47.5378C28.3689 45.9637 27.7457 44.2269 27.3099 42.4367C27.1836 41.9171 27.1315 41.3996 27.0786 40.8739L27.0691 40.7822C27.061 40.7014 27.0529 40.6206 27.0442 40.5393C26.6633 41.0583 26.4755 41.6632 26.2878 42.268L26.2347 42.4386C26.1641 41.5118 26.4073 40.671 26.6591 39.8005L26.7065 39.6363C26.6877 39.6394 26.671 39.6418 26.6561 39.6438C26.6424 39.6456 26.6303 39.6471 26.6195 39.6484L26.5938 39.6513C26.5584 39.6553 26.5426 39.6575 26.533 39.6663C26.4738 39.7184 26.4149 39.7729 26.3666 39.8347C25.4645 40.9799 24.8697 42.2766 24.6075 43.7418C24.2494 45.7435 24.4368 47.7928 24.9021 49.8618C24.9838 50.2244 25.07 50.5867 25.1582 50.9489C25.2317 51.2505 25.3067 51.552 25.3816 51.8535C25.7261 53.2403 26.0707 54.6274 26.2769 56.0239C26.282 56.0587 26.2865 56.0937 26.2908 56.1286L26.3005 56.2104C26.3301 56.4639 26.36 56.7209 26.5177 56.9738L26.5191 56.9749ZM7.80481 42.5114L7.82373 42.6157C7.93563 42.6232 8.04749 42.629 8.15934 42.6348L8.16173 42.6349C8.39772 42.647 8.63454 42.6592 8.87079 42.6873C9.68721 42.7847 10.4893 43.0048 11.2914 43.2249L11.3146 43.2313L11.3161 43.2317C11.5222 43.2882 11.7284 43.3447 11.9349 43.3991C14.2444 44.0061 16.3291 43.6114 18.3327 42.8965C20.9428 41.964 23.0478 40.3824 25.0464 38.6692L25.0543 38.6626L25.0606 38.6575C25.0688 38.6509 25.0774 38.6443 25.0862 38.6376C25.1632 38.5787 25.2499 38.5124 25.1927 38.3593C21.462 39.3165 17.7156 38.7459 13.9502 37.031C14.5597 37.571 15.2465 37.9908 15.9351 38.4116C16.5473 38.7859 17.1609 39.1609 17.7227 39.622L12.3067 38.5578C13.5348 39.2696 14.6459 40.0979 15.7473 41.0435C15.5109 41.0934 15.3229 41.0605 15.1473 41.0298C15.1014 41.0218 15.0563 41.0139 15.0114 41.0076C13.3231 40.7773 11.6529 40.6496 10.0959 41.1543C10.0595 41.1662 10.017 41.176 9.97323 41.1862L9.9722 41.1864L9.97118 41.1866C9.81652 41.2224 9.64692 41.2617 9.67138 41.4021C9.70167 41.5747 9.8989 41.6061 10.0776 41.6345C10.1201 41.6412 10.1614 41.6478 10.1992 41.6561L10.2381 41.6645L10.2394 41.6648C11.0298 41.8346 11.0353 41.8358 11.3168 42.0517C10.0874 42.0505 8.90225 42.1362 7.80481 42.5114ZM27.9401 37.2232L27.9273 37.2384L28.0037 37.2984L28.228 37.4761C28.4733 37.6709 28.7188 37.8657 28.9707 38.0519C29.0022 38.0752 29.0334 38.1062 29.0653 38.1379C29.1732 38.2449 29.2887 38.3596 29.4473 38.2114C29.6396 38.0322 29.7206 37.7958 29.4771 37.5595C28.7792 36.8821 27.9927 36.3074 27.1554 35.8046C26.9024 35.6524 26.7379 35.8384 26.6215 35.9886C26.5111 36.1304 26.6379 36.2154 26.7512 36.2913L26.7534 36.2927C26.7811 36.3113 26.8079 36.3293 26.8302 36.3476C27.0936 36.5637 27.3626 36.7731 27.6316 36.9825L27.7618 37.0839C27.8213 37.1303 27.8807 37.1767 27.9401 37.2232ZM42.4733 5.10318L42.4444 5.07934L42.4319 5.06884L42.3815 5.02711C42.3237 5.05975 42.2657 5.09192 42.2077 5.1241L42.2008 5.12791C42.0617 5.20523 41.9227 5.28253 41.7884 5.366C39.3873 6.85407 38.3203 8.97617 39.0182 11.9362C39.1189 12.3635 39.2188 12.7908 39.3185 13.2181L39.7374 15.0111L39.8987 15.6957C39.8997 15.6999 39.9006 15.7041 39.9015 15.7085L39.9037 15.7207C39.9045 15.7256 39.9053 15.7305 39.9059 15.7354L39.9077 15.7494L39.9096 15.7675L39.9108 15.7806L39.9132 15.8087C39.9216 15.9178 39.9304 16.0313 40.0499 16.072C40.0947 16.0872 40.1329 16.0843 40.1665 16.0702C40.2278 16.0443 40.2741 15.9814 40.3173 15.9224L40.3385 15.8937C40.3474 15.882 40.3563 15.8707 40.3652 15.8603C41.035 15.0733 41.7873 14.3692 42.6653 13.7807C43.8951 12.9576 45.2942 12.4023 46.6918 11.8475L46.693 11.8471L46.9932 11.7278C49.9858 10.5377 52.0684 8.51182 53.3133 5.70405C53.3264 5.6743 53.3432 5.64504 53.3604 5.61523L53.3616 5.61276C53.3892 5.56465 53.4178 5.51474 53.4332 5.4608C53.4496 5.40318 53.4514 5.34025 53.422 5.26797C53.295 5.2731 53.2366 5.34045 53.1812 5.4044C53.1679 5.41967 53.1546 5.43499 53.1408 5.44897C51.7181 6.89645 49.9367 7.83996 47.8649 8.38775C47.3551 8.52247 46.8335 8.62652 46.3121 8.7305L46.309 8.73121C45.6253 8.86745 44.9409 9.00385 44.2849 9.20956L44.2803 9.20951L44.2774 9.20845L44.2752 9.2073L44.2732 9.20617L44.2668 9.20187C44.2643 9.2 44.2617 9.1978 44.259 9.19546L44.2534 9.19066L44.242 9.18019C44.234 9.17277 44.226 9.16542 44.2189 9.15986C44.4967 8.73874 44.913 8.44525 45.7062 8.18592C46.8291 7.81764 47.9351 7.41811 49.0248 6.9867C49.0465 6.97805 49.0727 6.97133 49.0998 6.96438C49.1896 6.94153 49.2886 6.91632 49.2586 6.81084C49.2193 6.67366 49.0852 6.67717 48.9687 6.68021C48.9506 6.68068 48.933 6.68114 48.9162 6.68107C48.7892 6.67987 48.6622 6.67741 48.5349 6.6738L48.4405 6.67099C48.3893 6.66939 48.338 6.66758 48.2868 6.66563C48.0876 6.65801 47.8883 6.64816 47.6888 6.63683C47.3585 6.61811 47.0278 6.59549 46.697 6.57281L46.4284 6.55448L46.1918 6.53872C44.1875 6.40671 42.466 6.90511 41.065 8.0828L41.0566 8.09022C41.0515 8.0949 41.0464 8.09979 41.0413 8.10488C41.0318 8.11429 41.0224 8.12417 41.0129 8.13419C40.9431 8.20799 40.8659 8.28951 40.6843 8.2299C41.0256 7.0312 41.6238 5.99584 42.4757 5.1031L42.4733 5.10318ZM40.5236 20.4964C40.6472 20.4059 40.7702 20.3154 40.8928 20.225C41.4453 19.818 41.9912 19.4159 42.5616 19.0428C43.791 18.2365 45.1493 17.623 46.5073 17.0095C47.0104 16.7822 47.5137 16.5549 48.0101 16.3179C50.0138 15.3605 51.8283 14.1963 53.1593 12.4857C55.1112 10.1592 54.4814 7.95436 54.1814 6.90377C54.1027 6.62824 54.0465 6.43169 54.0658 6.33367C53.9455 6.40099 53.9109 6.4923 53.8783 6.57822C53.8687 6.60347 53.8593 6.62824 53.8479 6.65186C53.3266 7.74256 52.6541 8.72971 51.7984 9.59131C50.2206 11.1808 48.2206 12.2065 46.041 12.9998C44.132 13.6944 42.4183 14.6386 41.204 16.1872L41.1388 16.2699L41.076 16.3488C40.6943 16.8285 40.2949 17.3305 40.2311 17.9332C40.1768 18.4454 40.1793 18.9715 40.1819 19.5021C40.184 19.9202 40.186 20.3418 40.1602 20.7611L40.1612 20.7599C40.2828 20.6722 40.4035 20.5843 40.5236 20.4964ZM39.0122 24.5518C39.8606 23.9571 40.7091 23.3909 41.5892 22.8654C43.9209 21.4728 46.4277 20.4209 49.3306 20.1236C50.5446 19.9991 51.7352 19.7927 52.9222 19.5775C54.7196 19.2514 56.1562 18.4479 57.1766 17.0845C57.4713 16.6906 57.7046 16.2627 57.8823 15.7057C57.5535 15.8395 57.2614 16.0019 56.9766 16.1602C56.5247 16.4114 56.0913 16.6523 55.5597 16.7521L56.1949 16.112C55.182 16.1199 54.4127 16.5226 53.6532 16.9203C53.1571 17.1801 52.6652 17.4376 52.1123 17.5814C53.0175 16.8462 53.7575 15.9956 54.3138 14.9958C54.8804 13.9767 55.0245 12.8448 54.9843 11.6145C54.8409 11.6634 54.8061 11.7461 54.7747 11.8209C54.7645 11.845 54.7547 11.8683 54.7417 11.8893C54.7168 11.93 54.6934 11.9719 54.6701 12.0136C54.6421 12.0639 54.614 12.1141 54.5832 12.1625C53.4426 13.9499 51.8523 15.2991 49.9421 16.342C48.9337 16.8925 47.8806 17.3723 46.8276 17.852L46.824 17.8538L46.8191 17.8562L46.5174 17.9936L46.3325 18.0781L46.0886 18.19C45.8447 18.3022 45.6014 18.4154 45.3593 18.5302C45.2712 18.572 45.1833 18.614 45.0955 18.6563C43.1357 19.5998 41.3471 20.7401 40.0901 22.4624C39.6258 23.0986 39.289 23.8068 39.0122 24.5518ZM37.3258 7.60219C37.2178 7.99613 37.1866 8.40768 37.1554 8.81922L37.1553 8.82031C37.1288 9.16985 37.1023 9.51941 37.0286 9.85799C36.8482 9.12669 36.9127 8.42867 36.9773 7.73057C36.9996 7.48879 37.0219 7.24702 37.0341 7.00396C36.3502 8.88198 36.1579 10.8559 36.549 12.9491C35.9793 11.23 35.7655 9.52039 35.8137 7.80801L35.7567 8.07965C35.3354 10.0798 34.9146 12.0783 36.2117 14.2214L33.5235 11.9616L33.4254 12.0356C34.0616 13.1285 34.7786 14.1832 35.4966 15.2393C35.9262 15.8712 36.356 16.5035 36.7692 17.1448C35.1851 16.0742 33.5823 15.0643 31.8875 14.1968C32.159 14.4305 32.433 14.6608 32.7068 14.8908L32.7097 14.8932C33.6205 15.6582 34.5278 16.4203 35.3232 17.2947C35.1372 17.204 34.959 17.1034 34.7815 17.0032L34.7794 17.002L34.7777 17.0011L34.7719 16.9978C34.6749 16.943 34.5774 16.888 34.4795 16.8352C34.4627 16.8262 34.4449 16.8153 34.4266 16.8041C34.3388 16.7502 34.2367 16.6876 34.1624 16.7796C34.1442 16.802 34.1388 16.8251 34.1418 16.8484C34.1482 16.8971 34.1911 16.9465 34.231 16.9925L34.2458 17.0096L34.2552 17.0207C34.2604 17.027 34.2654 17.0332 34.2701 17.0392C35.476 18.6133 36.0991 20.3502 36.535 22.1404C36.6613 22.6601 36.7135 23.1777 36.7664 23.7036L36.7687 23.7264C36.7791 23.8298 36.7896 23.9336 36.8007 24.0377C37.1816 23.5187 37.3693 22.9138 37.5571 22.3091L37.6102 22.1384C37.6808 23.0652 37.4376 23.9061 37.1857 24.7765L37.1384 24.9407C37.1865 24.9331 37.2211 24.9291 37.2464 24.9263L37.269 24.9236C37.2756 24.9228 37.2814 24.9219 37.2864 24.921C37.2892 24.9205 37.2917 24.92 37.2941 24.9194L37.2971 24.9185L37.3004 24.9175L37.3034 24.9163L37.3073 24.9143L37.3096 24.9127L37.3119 24.9108C37.3711 24.8586 37.43 24.8042 37.4783 24.7424C38.3804 23.5971 38.9752 22.3004 39.2374 20.8353C39.5954 18.8335 39.4081 16.7843 38.9428 14.7153C38.7931 14.0503 38.6282 13.3864 38.4632 12.7226C38.1186 11.336 37.7741 9.9494 37.568 8.55314C37.564 8.52598 37.5604 8.49875 37.557 8.4715C37.5526 8.43728 37.5486 8.40318 37.5445 8.36888L37.5443 8.36666C37.5148 8.11319 37.4849 7.85616 37.3272 7.60329L37.3258 7.60219ZM56.0401 22.0657L56.0212 21.9613C55.9097 21.9539 55.7984 21.9482 55.6871 21.9424L55.5765 21.9367C55.5309 21.9343 55.4854 21.9317 55.4398 21.929C55.2846 21.9198 55.1294 21.9081 54.9741 21.8897C54.1577 21.7924 53.3556 21.5723 52.5535 21.3521L52.5316 21.3461C52.3245 21.2893 52.1174 21.2325 51.91 21.1779C49.6004 20.5709 47.5158 20.9656 45.5122 21.6805C42.9021 22.6131 40.7971 24.1947 38.7984 25.9079L38.7906 25.9145L38.7809 25.9223L38.7619 25.9371L38.7587 25.9395C38.6817 25.9983 38.5949 26.0647 38.6522 26.2178C42.3829 25.2605 46.1293 25.8312 49.8946 27.546C49.2852 27.0061 48.5984 26.5863 47.9098 26.1654C47.2976 25.7912 46.684 25.4161 46.1222 24.9551C47.0724 25.1416 48.0224 25.3284 48.9724 25.5151L49.0236 25.5252C49.8617 25.6899 50.6999 25.8547 51.5381 26.0193C50.3101 25.3075 49.199 24.4792 48.0975 23.5335C48.334 23.4837 48.522 23.5165 48.6976 23.5473C48.7435 23.5553 48.7886 23.5632 48.8335 23.5694C50.5218 23.7997 52.192 23.9274 53.749 23.4228C53.7854 23.4109 53.8279 23.401 53.8716 23.3909L53.8737 23.3904C54.0284 23.3546 54.198 23.3154 54.1735 23.175C54.1432 23.0024 53.946 22.971 53.7673 22.9426C53.7248 22.9358 53.6835 22.9292 53.6457 22.921L53.6068 22.9126L53.6055 22.9122C52.815 22.7424 52.8096 22.7412 52.5281 22.5253C53.7575 22.5266 54.9426 22.4408 56.0401 22.0657ZM35.9048 27.3538L35.9176 27.3386C35.817 27.2598 35.7169 27.1803 35.6169 27.101L35.4311 26.9537L35.3442 26.8853C35.1891 26.7633 35.033 26.6425 34.8742 26.5252C34.8429 26.502 34.8118 26.4712 34.7801 26.4397C34.6722 26.3326 34.5561 26.2175 34.3976 26.3657C34.2053 26.5449 34.1243 26.7813 34.3678 27.0176C35.0657 27.6949 35.8523 28.2697 36.6896 28.7725C36.9425 28.9246 37.107 28.7387 37.2234 28.5884C37.3338 28.4467 37.207 28.3617 37.0937 28.2858L37.0903 28.2835C37.0783 28.2755 37.0666 28.2676 37.0554 28.2598L37.0428 28.2509L37.0309 28.2422L37.0221 28.2354L37.0147 28.2294C36.9183 28.1504 36.8211 28.0722 36.7235 27.9945C36.5548 27.8604 36.3846 27.7279 36.2145 27.5955L36.2134 27.5946C36.1107 27.5147 36.0072 27.4341 35.9048 27.3538ZM18.28 32.9353C20.4046 32.9353 22.2636 32.5301 23.857 31.7196C25.4504 30.8866 26.6859 29.7497 27.5634 28.3088C28.441 26.8454 28.8797 25.1682 28.8797 23.2771C28.8797 21.3859 28.441 19.7199 27.5634 18.2791C26.6859 16.8157 25.4504 15.6787 23.857 14.8683C22.2636 14.0353 20.4046 13.6188 18.28 13.6188H11.1097V32.9353H18.28ZM40.1239 33.4256C41.7173 32.6028 43.5763 32.1914 45.7009 32.1914H52.8713V51.8005H45.7009C43.5763 51.8005 41.7173 51.3777 40.1239 50.5321C38.5305 49.7093 37.295 48.5552 36.4175 47.0696C35.54 45.607 35.1012 43.9157 35.1012 41.996C35.1012 40.0762 35.54 38.3736 36.4175 36.888C37.295 35.4253 38.5305 34.2712 40.1239 33.4256Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M30.6002 59.7511C30.4333 60.4486 30.2664 61.1462 30.0334 61.8243C30.6447 61.1383 30.8054 60.2891 30.6977 59.3461C30.6649 59.481 30.6325 59.6161 30.6002 59.7511Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M21.5266 63.3969C20.3451 63.8893 19.1332 64.2993 17.6853 63.7069L17.7978 63.7097C19.0703 63.7414 20.3436 63.7731 21.5266 63.3969Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M8.40635 40.0201C7.57077 40.2685 6.72068 40.0677 5.86905 39.7589C6.30366 39.7282 6.74204 39.8075 7.18096 39.8869C7.58989 39.9608 7.99925 40.0347 8.40635 40.0201Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M22.6006 62.0111C22.0165 62.4135 21.3333 62.593 20.5425 62.5041C21.2522 62.4027 21.9456 62.2612 22.6006 62.0111Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M5.35811 46.2041C5.05782 46.7133 4.62713 47.084 4.08071 47.3287L4.07884 47.3265L4.03929 47.2839L4 47.2423L4.71539 46.6958C4.92973 46.5321 5.14391 46.3682 5.35811 46.2041Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M18.7747 36.5247C18.3369 36.2689 17.899 36.0129 17.3754 36.0091C17.4347 36.0372 17.4944 36.0661 17.5536 36.0947L17.5551 36.0954L17.5812 36.108C18.0021 36.3114 18.4254 36.516 18.8877 36.5905L18.7747 36.5247Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M34.0015 54.6274L34.0262 54.6544L34.0692 54.7009C34.1369 54.7742 34.2053 54.8481 34.2671 54.9247C34.4337 55.13 34.5936 55.3389 34.71 55.5782C34.3765 55.3165 34.1254 54.9968 33.9744 54.5974L34.0015 54.6274Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M56.8956 25.7C57.7312 25.4516 58.5813 25.6525 59.4329 25.9613C58.9983 25.9919 58.5599 25.9127 58.121 25.8333C57.7121 25.7593 57.3027 25.6854 56.8956 25.7Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M47.5023 2.01035C46.2304 1.97877 44.9578 1.94722 43.7754 2.32327C44.9569 1.83088 46.1688 1.42084 47.6167 2.01323L47.5023 2.01035Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M34.7015 5.96944L34.7025 5.96536C34.8692 5.26907 35.036 4.57279 35.2686 3.89595C34.6573 4.58181 34.4965 5.431 34.6043 6.374C34.6369 6.23945 34.6693 6.10411 34.7015 5.96944Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M42.7014 3.70901C43.2855 3.30666 43.9687 3.12712 44.7595 3.21605C44.0497 3.31743 43.3564 3.45897 42.7014 3.70901Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M59.9439 19.5161C60.2442 19.0068 60.6749 18.6362 61.2213 18.3915L61.2231 18.3936L61.2626 18.4361L61.302 18.4779L61.1296 18.6095C60.7341 18.9116 60.3389 19.2134 59.9439 19.5161Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M46.527 29.1953C46.9649 29.4512 47.4029 29.7072 47.9266 29.7111C47.8799 29.6889 47.8334 29.6666 47.7868 29.644L47.7207 29.6122C47.3001 29.4089 46.8763 29.2041 46.4144 29.1296L46.527 29.1953Z"
+      fill="#84CC16"
+    />
+    <path
+      d="M31.3276 11.1227C31.2966 11.0882 31.2646 11.0536 31.2329 11.0194L31.2322 11.0186C31.1645 10.9453 31.0967 10.872 31.0349 10.7954C30.8682 10.5902 30.7084 10.3813 30.5919 10.142C30.9254 10.4036 31.1766 10.7234 31.3276 11.1227Z"
+      fill="#84CC16"
+    />
+  </svg>
+)
+
+type ProcessSubstep = {
+  label?: string | null
+  id?: string | null
+}
+
+type ProcessStep = {
+  num?: string | null
+  title?: string | null
+  description?: string | null
+  desc?: string | null
+  substeps?: ProcessSubstep[] | null
+  id?: string | null
+}
+
+export type DDHGProcessSecProps = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  blockId?: string | null
+  scrollSpeed?: string | number | null
+  eyebrowPrefix?: string | null
+  eyebrowEmphasis?: string | null
+  heading?: string | null
+  showDivider?: boolean | null
+  diagramLabel?: string | null
+  diagramContent?: any | null
+  diagramVisualContent?: any | null
+  steps?: ProcessStep[] | null
+}
+
+const defaultSteps: ProcessStep[] = [
+  {
+    num: '01',
+    title: 'Discover',
+    description:
+      'We begin by understanding the space, its constraints, and the human needs it must serve. Site visits, stakeholder interviews, and spatial analysis form the foundation.',
+    substeps: [
+      { label: 'Site analysis' },
+      { label: 'User research' },
+      { label: 'Brief definition' },
+    ],
+  },
+  {
+    num: '02',
+    title: 'Conceptualize',
+    description:
+      'Ideas take shape through sketches, spatial diagrams, and material palettes. Every concept is tested against the original intention and the people who will inhabit it.',
+    substeps: [
+      { label: 'Spatial planning' },
+      { label: 'Material selection' },
+      { label: 'Mood boards' },
+    ],
+  },
+  {
+    num: '03',
+    title: 'Develop',
+    description:
+      'Detailed drawings, technical specifications, and procurement lists are produced. The design evolves from concept to buildable reality with rigorous precision.',
+    substeps: [
+      { label: 'Technical drawings' },
+      { label: '3D visualization' },
+      { label: 'Specification' },
+    ],
+  },
+  {
+    num: '04',
+    title: 'Deliver',
+    description:
+      'The final space is delivered as something unexpected yet inevitable — a new standard for how that environment could feel. Handover includes documentation and training.',
+    substeps: [
+      { label: 'Construction oversight' },
+      { label: 'Quality assurance' },
+      { label: 'Final handover' },
+    ],
+  },
+]
+
+let globalInstanceCounter = 0
+
+function FadeUpOnInView({
+  children,
+  className = '',
+  delay = 0,
+}: {
+  children: React.ReactNode
+  className?: string
+  delay?: number
+}) {
+  const ref = useRef<HTMLSpanElement | null>(null)
+
+  useEffect(() => {
+    const node = ref.current
+    if (!node) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          node.style.opacity = '1'
+          node.style.transform = 'translateY(0)'
+          node.style.transitionDelay = `${delay}s`
+        } else {
+          node.style.opacity = '0'
+          node.style.transform = 'translateY(24px)'
+          node.style.transitionDelay = '0s'
+        }
+      },
+      { threshold: 0.25 },
+    )
+
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [delay])
+
+  return (
+    <span
+      ref={ref}
+      className={className}
+      style={{
+        display: 'inline-block',
+        opacity: 0,
+        transform: 'translateY(24px)',
+        transition: 'opacity 700ms ease, transform 700ms ease',
+      }}
+    >
+      {children}
+    </span>
+  )
+}
+
+function RevealText({
+  text,
+  className = '',
+  instanceIndex,
+}: {
+  text: string[]
+  className?: string
+  instanceIndex?: number
+}) {
+  const uniqueId = useId()
+  const uniqueInstanceId = useRef<number | undefined>(undefined)
+  const textRef = useRef<HTMLSpanElement | null>(null)
+  const [isVisible, setIsVisible] = useState(false)
+  const [animationKey, setAnimationKey] = useState(0)
+
+  if (uniqueInstanceId.current === undefined) {
+    uniqueInstanceId.current = instanceIndex ?? globalInstanceCounter++
+  }
+
+  useEffect(() => {
+    const node = textRef.current
+    if (!node) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          setIsVisible(true)
+          setAnimationKey((key) => key + 1)
+        } else {
+          setIsVisible(false)
+        }
+      },
+      { threshold: 0.3 },
+    )
+
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [uniqueId])
+
+  const value = text?.[0] || ''
+  const words = value.split(' ')
+  const baseDelay = (uniqueInstanceId.current ?? 0) * 0.05
+
+  return (
+    <>
+      <style>{`
+        @keyframes processSectionRevealTextSlideLeft {
+          from { opacity: 0; transform: translateX(200px); }
+          to { opacity: 1; transform: translateX(0%); }
+        }
+      `}</style>
+
+      <FadeUpOnInView
+        delay={(uniqueInstanceId.current ?? 0) * 0.1}
+        className="process-section-fadeup"
+      >
+        <span
+          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,
+          )}
+        >
+          {words.map((word, wordIndex) => {
+            const previousLength = words.slice(0, wordIndex).join(' ').length
+            const offset = wordIndex === 0 ? 0 : previousLength + 1
+
+            return (
+              <span
+                key={`${animationKey}-word-${wordIndex}`}
+                className="process-section-reveal-word inline-block whitespace-nowrap"
+              >
+                {word.split('').map((char, charIndex) => {
+                  const index = offset + charIndex
+                  return (
+                    <span
+                      key={`${animationKey}-${index}-${char}`}
+                      className="process-section-reveal-char"
+                      style={{
+                        display: 'inline-block',
+                        opacity: 0,
+                        transform: isVisible ? undefined : 'translateX(200px)',
+                        animationName: isVisible ? 'processSectionRevealTextSlideLeft' : 'none',
+                        animationDuration: '1s',
+                        animationFillMode: 'forwards',
+                        animationDelay: `${baseDelay + index * 0.05}s`,
+                        transitionTimingFunction: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+                      }}
+                    >
+                      {char}
+                    </span>
+                  )
+                })}
+                {wordIndex < words.length - 1 ? (
+                  <span className="process-section-reveal-space">&nbsp;</span>
+                ) : null}
+              </span>
+            )
+          })}
+        </span>
+      </FadeUpOnInView>
+    </>
+  )
+}
+
+function StaggerFadeUp({
+  children,
+  className = '',
+  delay = 0,
+  as: Tag = 'div',
+  style,
+}: {
+  children: React.ReactNode
+  className?: string
+  delay?: number
+  as?: React.ElementType
+  style?: React.CSSProperties
+}) {
+  const ref = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    const node = ref.current
+    if (!node) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return
+        node.style.opacity = '1'
+        node.style.transform = 'translateY(0) scale(1)'
+        node.style.filter = 'blur(0)'
+        node.style.transitionDelay = `${delay}s`
+        observer.unobserve(node)
+      },
+      { threshold: 0.18 },
+    )
+
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [delay])
+
+  return (
+    <Tag
+      ref={ref}
+      className={className}
+      style={{
+        opacity: 0,
+        transform: 'translateY(28px) scale(0.985)',
+        filter: 'blur(6px)',
+        transition:
+          'opacity 820ms ease, transform 820ms cubic-bezier(0.22, 1, 0.36, 1), filter 820ms ease',
+        ...style,
+      }}
+    >
+      {children}
+    </Tag>
+  )
+}
+
+function getSteps(steps?: ProcessStep[] | null) {
+  return Array.isArray(steps) && steps.length > 0 ? steps : defaultSteps
+}
+
+function hasRichTextContent(value: unknown): boolean {
+  if (!value || typeof value !== 'object') return false
+  const root = (value as any)?.root
+  if (!root || typeof root !== 'object') return false
+  const children = (root as any)?.children
+  return Array.isArray(children) && children.length > 0
+}
+
+function getStepDescription(step: ProcessStep) {
+  return step.description || step.desc || ''
+}
+
+function ProcessDiagram({ label, content }: { label?: string | null; content?: any | null }) {
+  return (
+    <motion.div
+      className="ProcessSectionDiagram01 sticky top-28 w-full"
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.2 }}
+      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-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-75 w-full overflow-hidden">
+            <RichText
+              data={content}
+              enableGutter={false}
+              enableProse={false}
+              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-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>
+        )}
+      </div>
+    </motion.div>
+  )
+}
+
+export const DDHGProcessSec: React.FC<DDHGProcessSecProps> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  blockId,
+  scrollSpeed,
+  eyebrowPrefix = 'our',
+  eyebrowEmphasis = 'process',
+  heading = 'HOW WE WORK',
+  showDivider = true,
+  diagramLabel = 'Process Flow Diagram',
+  diagramContent,
+  diagramVisualContent,
+  steps,
+}) => {
+  const processSteps = getSteps(steps)
+  const visualContent = diagramContent || diagramVisualContent
+
+  return (
+    <div
+      id={sectionId ?? undefined}
+      data-block-id={blockId ?? undefined}
+      data-scroll={scrollSpeed ? true : undefined}
+      data-scroll-speed={scrollSpeed ? String(scrollSpeed) : undefined}
+      className={cn('ProcessSection01 px-5 py-16 md:px-8', customClassName)}
+    >
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="ProcessSection02 mx-auto max-w-7xl overflow-clip">
+        <motion.div
+          className="ProcessSection03 mb-12"
+          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] }}
+        >
+          {(eyebrowPrefix || eyebrowEmphasis) && (
+            <StaggerFadeUp
+              as="p"
+              delay={0.05}
+              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>
+              )}
+              {eyebrowEmphasis && (
+                <span className="ProcessSection06 eyebrowEmphasis font-medium">
+                  {eyebrowEmphasis}
+                </span>
+              )}
+            </StaggerFadeUp>
+          )}
+
+          {heading && (
+            <span className="ProcessSection07 headingRevealText mt-2 block leading-[0.82] tracking-[0.08em]">
+              <RevealText
+                text={[heading]}
+                instanceIndex={2}
+                className="ProcessSection08 text-4xl font-extrabold md:text-6xl lg:text-8xl"
+              />
+            </span>
+          )}
+
+          {showDivider && (
+            <div className="ProcessSection09 showDivider mt-6 h-px w-full bg-stone-400" />
+          )}
+        </motion.div>
+
+        <div className="ProcessSection10 grid grid-cols-1 gap-8 lg:grid-cols-12">
+          <div className="ProcessSection11 space-y-8 lg:col-span-7">
+            {processSteps.map((step, i) => {
+              const substeps = Array.isArray(step.substeps) ? step.substeps : []
+              return (
+                <motion.div
+                  key={step.id || step.num || `process-step-${i}`}
+                  className={cn('ProcessSection12 relative', `ProcessSectionStep${i + 1}`)}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, amount: 0.2 }}
+                  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 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 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],
+                          }}
+                          style={{ minHeight: 40, transformOrigin: 'top' }}
+                        />
+                      )}
+                    </div>
+
+                    <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 && (
+                          <h2 className="ProcessSection20 mb-2 text-2xl font-semibold text-indigo-700 dark:text-indigo-500 md:text-3xl">
+                            {step.title}
+                          </h2>
+                        )}
+                        {getStepDescription(step) && (
+                          <p className="ProcessSection21 mb-4 text-base font-light leading-relaxed text-stone-700 dark:text-stone-200">
+                            {getStepDescription(step)}
+                          </p>
+                        )}
+                        {substeps.length > 0 && (
+                          <div className="ProcessSection22 flex flex-wrap gap-2">
+                            {substeps.map((substep, subIndex) => {
+                              if (!substep?.label) return null
+                              return (
+                                <span
+                                  key={substep.id || `${substep.label}-${subIndex}`}
+                                  className={cn(
+                                    '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}
+                                </span>
+                              )
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </motion.div>
+              )
+            })}
+          </div>
+
+          <div className="ProcessSection24 flex items-start justify-center lg:col-span-5">
+            <ProcessDiagram label={diagramLabel} content={visualContent} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DDHGProcessSec