diff --git a/site/content/docs/standard/designblocks/banners/assets/banner-1-dark-min.webp b/site/content/docs/standard/designblocks/banners/assets/banner-1-dark-min.webp
new file mode 100644
index 000000000..8bea4c0b8
Binary files /dev/null and b/site/content/docs/standard/designblocks/banners/assets/banner-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/banners/assets/banner-1-light-min.webp b/site/content/docs/standard/designblocks/banners/assets/banner-1-light-min.webp
new file mode 100644
index 000000000..2f1125c36
Binary files /dev/null and b/site/content/docs/standard/designblocks/banners/assets/banner-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/banners/assets/banner-2-dark-min.webp b/site/content/docs/standard/designblocks/banners/assets/banner-2-dark-min.webp
new file mode 100644
index 000000000..010d95be6
Binary files /dev/null and b/site/content/docs/standard/designblocks/banners/assets/banner-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/banners/assets/banner-2-light-min.webp b/site/content/docs/standard/designblocks/banners/assets/banner-2-light-min.webp
new file mode 100644
index 000000000..112890fde
Binary files /dev/null and b/site/content/docs/standard/designblocks/banners/assets/banner-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/banners/assets/banner-3-dark-min.webp b/site/content/docs/standard/designblocks/banners/assets/banner-3-dark-min.webp
new file mode 100644
index 000000000..3b95b25b6
Binary files /dev/null and b/site/content/docs/standard/designblocks/banners/assets/banner-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/banners/assets/banner-3-light-min.webp b/site/content/docs/standard/designblocks/banners/assets/banner-3-light-min.webp
new file mode 100644
index 000000000..da15da4be
Binary files /dev/null and b/site/content/docs/standard/designblocks/banners/assets/banner-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/banners/index.html b/site/content/docs/standard/designblocks/banners/index.html
index deb9e0632..25386b77a 100644
--- a/site/content/docs/standard/designblocks/banners/index.html
+++ b/site/content/docs/standard/designblocks/banners/index.html
@@ -5,7 +5,8 @@
 main_title: "Tailwind Banners Sections"
 subheading: ""
 seo_title: "3+ Free Banners Sections Templates for Tailwind CSS"
-description: "Collection of banners section templates for TailwindCSS. Free for commercial use, no registration required."
+description: "Collection of banners section templates for TailwindCSS. Free for commercial use, no registration
+required."
 image: "https://tecdn.b-cdn.net/img/components-big.jpg"
 video: "https://www.youtube.com/watch?v=-GmnyjgI4Jc&ab_channel=Keepcoding"
 url: "docs/standard/designblocks/banners/"
@@ -20,63 +21,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Floating Banner</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3612918"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240861"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/banners/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/banners/assets/new/1.webp"
-        class="w-full p-0"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/banner-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/banner-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Banner Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/banner-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/banner-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Banner Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -357,63 +363,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Header Banner</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709726"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241245"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/banners/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/banners/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/banner-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/banner-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Banner Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/banner-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/banner-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Banner Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -427,63 +438,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Sticky Footer</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709738"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241248"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/banners/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/banners/assets/new/3.webp"
-        class="w-full p-0"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/banner-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/banner-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Banner Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/banner-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/banner-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Banner Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/charts/index.html b/site/content/docs/standard/designblocks/charts/index.html
index 6553b3a56..1d33872ff 100644
--- a/site/content/docs/standard/designblocks/charts/index.html
+++ b/site/content/docs/standard/designblocks/charts/index.html
@@ -17,46 +17,46 @@
   <h2 class="mb-12 text-3xl font-bold">v.1</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3634743"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -88,46 +88,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.2</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3634756"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -159,46 +159,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.3</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3635265"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
diff --git a/site/content/docs/standard/designblocks/complex/index.html b/site/content/docs/standard/designblocks/complex/index.html
index 4a0001adf..3d94971a7 100644
--- a/site/content/docs/standard/designblocks/complex/index.html
+++ b/site/content/docs/standard/designblocks/complex/index.html
@@ -17,46 +17,46 @@
   <h2 class="mb-12 text-3xl font-bold">v.1</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3644832"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -88,46 +88,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.2</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3645079"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -159,46 +159,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.3</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3644841"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-1-dark-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-1-dark-min.webp
new file mode 100644
index 000000000..c94512e8a
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-1-light-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-1-light-min.webp
new file mode 100644
index 000000000..366c47828
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-2-dark-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-2-dark-min.webp
new file mode 100644
index 000000000..2602fff07
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-2-light-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-2-light-min.webp
new file mode 100644
index 000000000..bfd648345
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-3-dark-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-3-dark-min.webp
new file mode 100644
index 000000000..3f5165013
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-3-light-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-3-light-min.webp
new file mode 100644
index 000000000..c7fd65c34
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-4-dark-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-4-dark-min.webp
new file mode 100644
index 000000000..4578987d9
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-4-light-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-4-light-min.webp
new file mode 100644
index 000000000..406279f73
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-5-dark-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-5-dark-min.webp
new file mode 100644
index 000000000..b9aa695e0
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-5-light-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-5-light-min.webp
new file mode 100644
index 000000000..4d7698140
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-6-dark-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-6-dark-min.webp
new file mode 100644
index 000000000..88d4c68b9
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-6-light-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-6-light-min.webp
new file mode 100644
index 000000000..1ad210f7e
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-7-dark-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-7-dark-min.webp
new file mode 100644
index 000000000..dfba5ed8a
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-7-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-7-light-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-7-light-min.webp
new file mode 100644
index 000000000..f92ec05c9
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-7-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-8-dark-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-8-dark-min.webp
new file mode 100644
index 000000000..92ba1a808
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-8-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/assets/contact-8-light-min.webp b/site/content/docs/standard/designblocks/contact/assets/contact-8-light-min.webp
new file mode 100644
index 000000000..6ba4119b4
Binary files /dev/null and b/site/content/docs/standard/designblocks/contact/assets/contact-8-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/contact/index.html b/site/content/docs/standard/designblocks/contact/index.html
index 73379bd18..c206771cf 100644
--- a/site/content/docs/standard/designblocks/contact/index.html
+++ b/site/content/docs/standard/designblocks/contact/index.html
@@ -20,63 +20,66 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Contact Form Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3596170"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202578"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/1.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/contact-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Contact Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/contact-1-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/1.webp"
-          class="mx-auto w-3/4 p-4"
-          alt="" />
+          src="assets/contact-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Contact Design Block Dark v.1" />
       </picture>
     </div>
   </section>
@@ -359,63 +362,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Contact Info Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3596279"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5203899"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/contact-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Contact Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/contact-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Contact Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -429,131 +437,141 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Contact Form Example</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3596172"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5203857"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/contact-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Contact Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/contact-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Contact Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
 <!-- Section: v.3-->
 
+<hr class="my-12 dark:border-neutral-600" />
+
 <!-- Section: v.4-->
 <section id="section-v-4">
   <!-- Section title -->
   <h2 class="mb-12 pb-6 text-3xl font-bold">FAQ Contact Form</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3713161"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5203975"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/4.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/contact-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Contact Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/contact-4-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/4.webp"
-          class="mx-auto w-3/4 p-4"
-          alt="" />
+          src="assets/contact-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Contact Design Block Dark v.4" />
       </picture>
     </div>
   </section>
@@ -569,63 +587,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Background Image Contact Form</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3713241"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5205709"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/5.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/contact-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Contact Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/contact-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Contact Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -639,63 +662,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Contact Form Card</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3713321"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5234325"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/6.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/6.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/contact-6-light-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Contact Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/contact-6-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Contact Design Block Dark v.6" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -709,63 +737,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Contact Form with Map</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3757797"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5234358"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/7.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/7.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/contact-7-light-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-7-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Contact Design Block Light v.7" />
+      </picture>
+      <picture>
+        <source srcset="assets/contact-7-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-7-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Contact Design Block Dark v.7" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -779,63 +812,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Contact Info Google Map</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3757811"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5234407"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/8.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/contact/assets/new/8.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/contact-8-light-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-8-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Contact Design Block Light v.8" />
+      </picture>
+      <picture>
+        <source srcset="assets/contact-8-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/contact-18dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Contact Design Block Dark v.8" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/content/assets/content-1-dark-min.webp b/site/content/docs/standard/designblocks/content/assets/content-1-dark-min.webp
new file mode 100644
index 000000000..a1a89af83
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-1-light-min.webp b/site/content/docs/standard/designblocks/content/assets/content-1-light-min.webp
new file mode 100644
index 000000000..e09f6fe78
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-2-dark-min.webp b/site/content/docs/standard/designblocks/content/assets/content-2-dark-min.webp
new file mode 100644
index 000000000..506d49d89
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-2-light-min.webp b/site/content/docs/standard/designblocks/content/assets/content-2-light-min.webp
new file mode 100644
index 000000000..8a704f23c
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-3-dark-min.webp b/site/content/docs/standard/designblocks/content/assets/content-3-dark-min.webp
new file mode 100644
index 000000000..aeea0676d
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-3-light-min.webp b/site/content/docs/standard/designblocks/content/assets/content-3-light-min.webp
new file mode 100644
index 000000000..15e5a72a8
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-4-dark-min.webp b/site/content/docs/standard/designblocks/content/assets/content-4-dark-min.webp
new file mode 100644
index 000000000..35cc813e5
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-4-light-min.webp b/site/content/docs/standard/designblocks/content/assets/content-4-light-min.webp
new file mode 100644
index 000000000..59dd6103e
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-5-dark-min.webp b/site/content/docs/standard/designblocks/content/assets/content-5-dark-min.webp
new file mode 100644
index 000000000..549fed532
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-5-light-min.webp b/site/content/docs/standard/designblocks/content/assets/content-5-light-min.webp
new file mode 100644
index 000000000..5803b5702
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-6-dark-min.webp b/site/content/docs/standard/designblocks/content/assets/content-6-dark-min.webp
new file mode 100644
index 000000000..5a516d480
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-6-light-min.webp b/site/content/docs/standard/designblocks/content/assets/content-6-light-min.webp
new file mode 100644
index 000000000..84190ab9c
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-7-dark-min.webp b/site/content/docs/standard/designblocks/content/assets/content-7-dark-min.webp
new file mode 100644
index 000000000..92f799164
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-7-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-7-light-min.webp b/site/content/docs/standard/designblocks/content/assets/content-7-light-min.webp
new file mode 100644
index 000000000..2447038d3
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-7-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-8-dark-min.webp b/site/content/docs/standard/designblocks/content/assets/content-8-dark-min.webp
new file mode 100644
index 000000000..fe6ae87ab
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-8-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-8-light-min.webp b/site/content/docs/standard/designblocks/content/assets/content-8-light-min.webp
new file mode 100644
index 000000000..c15695cbd
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-8-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-9-dark-min.webp b/site/content/docs/standard/designblocks/content/assets/content-9-dark-min.webp
new file mode 100644
index 000000000..7688e0857
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-9-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/assets/content-9-light-min.webp b/site/content/docs/standard/designblocks/content/assets/content-9-light-min.webp
new file mode 100644
index 000000000..28772e248
Binary files /dev/null and b/site/content/docs/standard/designblocks/content/assets/content-9-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/content/index.html b/site/content/docs/standard/designblocks/content/index.html
index e3bc65881..05e59ad47 100644
--- a/site/content/docs/standard/designblocks/content/index.html
+++ b/site/content/docs/standard/designblocks/content/index.html
@@ -20,65 +20,66 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Article Section Example</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709591"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240759"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="overflow-y-scroll" style="max-height: 500px">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/1.webp
-          "
-          type="image/webp" />
+    <div class="relative overflow-y-scroll" style="max-height: 500px">
+      <picture>
+        <source srcset="assets/content-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/content-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Content Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/content-1-dark-min.webp" type="image/webp" />
         <img
-          src="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/1.webp
-            "
-          class="w-full"
-          alt="" />
+          src="assets/content-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Content Design Block Dark v.1" />
       </picture>
     </div>
   </section>
@@ -361,63 +362,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Article With Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709596"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240765"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="overflow-y-scroll" style="max-height: 500px">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/2.webp
-          "
-          type="image/webp" />
+    <div class="relative overflow-y-scroll" style="max-height: 500px">
+      <picture>
+        <source srcset="assets/content-2-light-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/2.webp"
-          class="w-full"
-          alt="" />
+          src="assets/content-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Content Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/content-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/content-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Content Design Block Dark v.2" />
       </picture>
     </div>
   </section>
@@ -433,63 +437,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Two Column News</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709601"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240779"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div>
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/3.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/content-3-light-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/3.webp"
-          class="w-full p-0"
-          alt="" />
+          src="assets/content-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Content Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/content-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/content-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Content Design Block Dark v.3" />
       </picture>
     </div>
   </section>
@@ -505,65 +512,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Testimonial With Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709608"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240784"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div>
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/4.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/content-4-light-min.webp" type="image/webp" />
         <img
-          src="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/4.webp
-            "
-          class="w-full"
-          alt="" />
+          src="assets/content-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Content Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/content-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/content-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Content Design Block Dark v.4" />
       </picture>
     </div>
   </section>
@@ -579,65 +587,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Comment Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709612"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240795"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div>
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/5.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/content-5-light-min.webp" type="image/webp" />
         <img
-          src="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/5.webp
-            "
-          class="w-full"
-          alt="" />
+          src="assets/content-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Content Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/content-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/content-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Content Design Block Dark v.5" />
       </picture>
     </div>
   </section>
@@ -653,65 +662,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Review Form</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709625"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240813"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div>
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/6.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/content-6-light-min.webp" type="image/webp" />
+        <img
+          src="assets/content-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Content Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/content-6-dark-min.webp" type="image/webp" />
         <img
-          src="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/6.webp
-            "
-          class="w-full"
-          alt="" />
+          src="assets/content-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Content Design Block Dark v.6" />
       </picture>
     </div>
   </section>
@@ -727,67 +737,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Two Column Articles</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709628"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240833"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="overflow-y-scroll" style="max-height: 500px">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/7.webp
-          "
-          type="image/webp" />
+    <div class="relative overflow-y-scroll" style="max-height: 500px">
+      <picture>
+        <source srcset="assets/content-7-light-min.webp" type="image/webp" />
+        <img
+          src="assets/content-7-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Content Design Block Light v.7" />
+      </picture>
+      <picture>
+        <source srcset="assets/content-7-dark-min.webp" type="image/webp" />
         <img
-          src="
-            
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/7.webp
-            
-            "
-          class="w-full"
-          alt="" />
+          src="assets/content-7-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Content Design Block Dark v.7" />
       </picture>
     </div>
   </section>
@@ -803,63 +812,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Card Overlap with Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709632"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240837"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="overflow-y-scroll" style="max-height: 500px">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/8.webp
-          "
-          type="image/webp" />
+    <div class="relative overflow-y-scroll" style="max-height: 500px">
+      <picture>
+        <source srcset="assets/content-8-light-min.webp" type="image/webp" />
+        <img
+          src="assets/content-8-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Content Design Block Light v.8" />
+      </picture>
+      <picture>
+        <source srcset="assets/content-8-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/8.webp"
-          class="w-full"
-          alt="" />
+          src="assets/content-8-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Content Design Block Dark v.8" />
       </picture>
     </div>
   </section>
@@ -875,63 +887,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Colorful Card</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709635"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240844"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div>
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/9.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/content-9-light-min.webp" type="image/webp" />
+        <img
+          src="assets/content-9-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Content Design Block Light v.9" />
+      </picture>
+      <picture>
+        <source srcset="assets/content-9-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/content/assets/new/9.webp"
-          class="w-full"
-          alt="" />
+          src="assets/content-9-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Content Design Block Dark v.9" />
       </picture>
     </div>
   </section>
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-1-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-1-dark-min.webp
new file mode 100644
index 000000000..d14fca110
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-1-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-1-light-min.webp
new file mode 100644
index 000000000..1a88f8cbb
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-10-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-10-dark-min.webp
new file mode 100644
index 000000000..f4cdee207
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-10-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-10-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-10-light-min.webp
new file mode 100644
index 000000000..c2d0bc9dd
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-10-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-11-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-11-dark-min.webp
new file mode 100644
index 000000000..f38836bff
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-11-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-11-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-11-light-min.webp
new file mode 100644
index 000000000..f36460eb7
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-11-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-12-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-12-dark-min.webp
new file mode 100644
index 000000000..3d81b4e03
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-12-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-12-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-12-light-min.webp
new file mode 100644
index 000000000..2cde52856
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-12-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-2-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-2-dark-min.webp
new file mode 100644
index 000000000..ce5c36936
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-2-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-2-light-min.webp
new file mode 100644
index 000000000..d3ded838f
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-3-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-3-dark-min.webp
new file mode 100644
index 000000000..35efef379
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-3-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-3-light-min.webp
new file mode 100644
index 000000000..8421eab26
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-4-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-4-dark-min.webp
new file mode 100644
index 000000000..7729e221e
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-4-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-4-light-min.webp
new file mode 100644
index 000000000..7729e221e
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-5-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-5-dark-min.webp
new file mode 100644
index 000000000..35f992595
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-5-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-5-light-min.webp
new file mode 100644
index 000000000..bee0c18cd
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-6-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-6-dark-min.webp
new file mode 100644
index 000000000..59c852e15
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-6-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-6-light-min.webp
new file mode 100644
index 000000000..8bc706e47
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-7-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-7-dark-min.webp
new file mode 100644
index 000000000..cf3252034
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-7-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-7-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-7-light-min.webp
new file mode 100644
index 000000000..f9c626557
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-7-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-8-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-8-dark-min.webp
new file mode 100644
index 000000000..68c00b34b
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-8-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-8-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-8-light-min.webp
new file mode 100644
index 000000000..e43452c09
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-8-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-9-dark-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-9-dark-min.webp
new file mode 100644
index 000000000..41e997b85
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-9-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/assets/cta-9-light-min.webp b/site/content/docs/standard/designblocks/cta/assets/cta-9-light-min.webp
new file mode 100644
index 000000000..41e997b85
Binary files /dev/null and b/site/content/docs/standard/designblocks/cta/assets/cta-9-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/cta/index.html b/site/content/docs/standard/designblocks/cta/index.html
index f8effa272..645a0a9d6 100644
--- a/site/content/docs/standard/designblocks/cta/index.html
+++ b/site/content/docs/standard/designblocks/cta/index.html
@@ -20,63 +20,66 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Call To Action Example</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3596668"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5234415"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/1.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-1-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/1.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.1" />
       </picture>
     </div>
   </section>
@@ -359,63 +362,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Call To Action Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3596700"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5234429"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -429,63 +437,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Call To Action Contact Form</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3596727"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5234432"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/3.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-3-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/3.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.3" />
       </picture>
     </div>
   </section>
@@ -501,63 +512,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Call To Action Background Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3735469"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5235927"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/4.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-4-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/4.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.4" />
       </picture>
     </div>
   </section>
@@ -573,63 +587,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Call To Action Newsletter From</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3735472"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5235943"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/5.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-5-light-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/5.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.5" />
       </picture>
     </div>
   </section>
@@ -645,63 +662,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Call To Action Social Media</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3735474"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5235955"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/6.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-6-light-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/6.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-6-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.6" />
       </picture>
     </div>
   </section>
@@ -717,63 +737,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">CTA Social Media Buttons</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3735486"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5235960"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/7.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-7-light-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-7-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.7" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-7-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/7.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-7-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.7" />
       </picture>
     </div>
   </section>
@@ -789,63 +812,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Product Card Call To Action</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3735487"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5236025"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/8.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-8-light-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-8-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.8" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-8-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/8.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-8-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.8" />
       </picture>
     </div>
   </section>
@@ -861,63 +887,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Dark Background Call To Action</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3765910"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5236040"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/9.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-9-light-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-9-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.9" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-9-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/9.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-9-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.9" />
       </picture>
     </div>
   </section>
@@ -933,63 +962,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Call To Action Card Overlap</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3765929"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5236063"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/10.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-10-light-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/10.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-10-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.10" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-10-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-10-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.10" />
       </picture>
     </div>
   </section>
@@ -1005,63 +1037,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Call To Action Page</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3765945"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5236114"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/11.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-11-light-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/11.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-11-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.11" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-11-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-11-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.11" />
       </picture>
     </div>
   </section>
@@ -1077,63 +1112,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Call To Action Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3765960"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5236143"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="text-center">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/12.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/cta-12-light-min.webp" type="image/webp" />
+        <img
+          src="assets/cta-12-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Call To Action Design Block Light v.12" />
+      </picture>
+      <picture>
+        <source srcset="assets/cta-12-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/cta/assets/new/12.webp"
-          class="w-full"
-          alt="" />
+          src="assets/cta-12-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Call To Action Design Block Dark v.12" />
       </picture>
     </div>
   </section>
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-1-dark-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-1-dark-min.webp
new file mode 100644
index 000000000..c27e1f745
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-1-light-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-1-light-min.webp
new file mode 100644
index 000000000..c972cefd8
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-2-dark-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-2-dark-min.webp
new file mode 100644
index 000000000..5061aec7b
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-2-light-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-2-light-min.webp
new file mode 100644
index 000000000..219360d97
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-3-dark-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-3-dark-min.webp
new file mode 100644
index 000000000..4d6b5b047
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-3-light-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-3-light-min.webp
new file mode 100644
index 000000000..527b6e04e
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-4-dark-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-4-dark-min.webp
new file mode 100644
index 000000000..74398451c
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-4-light-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-4-light-min.webp
new file mode 100644
index 000000000..dcb66d3b4
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-5-dark-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-5-dark-min.webp
new file mode 100644
index 000000000..ab16b222b
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/assets/faq-5-light-min.webp b/site/content/docs/standard/designblocks/faq/assets/faq-5-light-min.webp
new file mode 100644
index 000000000..7de75db3d
Binary files /dev/null and b/site/content/docs/standard/designblocks/faq/assets/faq-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/faq/index.html b/site/content/docs/standard/designblocks/faq/index.html
index f9196b863..725b450cf 100644
--- a/site/content/docs/standard/designblocks/faq/index.html
+++ b/site/content/docs/standard/designblocks/faq/index.html
@@ -20,63 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Accordion FAQ Example</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3596595"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5236154"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/faq-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="FAQ Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/faq-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="FAQ Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -350,69 +355,75 @@ <h5 class="mb-0">
   </div>
 </section>
 <!-- Section: Sharing request-->
+
 <!-- Section: v.2-->
 <section id="section-v-2">
   <!-- Section title -->
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple FAQ Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3596627"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5238497"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/faq-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="FAQ Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/faq-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="FAQ Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -426,63 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Contact Form FAQ</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3596646"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5238508"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/faq-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="FAQ Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/faq-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="FAQ Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -496,63 +512,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Three Column FAQ Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736064"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5238519"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/4.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/faq-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="FAQ Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/faq-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="FAQ Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -566,63 +587,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">FAQ Card with Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736097"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5238528"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/faq/assets/new/5.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/faq-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="FAQ Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/faq-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/faq-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="FAQ Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/features/assets/features-1-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-1-dark-min.webp
new file mode 100644
index 000000000..c57646601
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-1-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-1-light-min.webp
new file mode 100644
index 000000000..ffdc71cd5
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-10-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-10-dark-min.webp
new file mode 100644
index 000000000..e5313f3e6
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-10-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-10-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-10-light-min.webp
new file mode 100644
index 000000000..427f4fe4b
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-10-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-2-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-2-dark-min.webp
new file mode 100644
index 000000000..a893400e1
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-2-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-2-light-min.webp
new file mode 100644
index 000000000..fb3ba832c
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-3-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-3-dark-min.webp
new file mode 100644
index 000000000..2bc3e7704
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-3-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-3-light-min.webp
new file mode 100644
index 000000000..9f949c881
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-4-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-4-dark-min.webp
new file mode 100644
index 000000000..84293500c
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-4-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-4-light-min.webp
new file mode 100644
index 000000000..9d6f53bdc
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-5-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-5-dark-min.webp
new file mode 100644
index 000000000..413454c27
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-5-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-5-light-min.webp
new file mode 100644
index 000000000..7a0f0b99c
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-6-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-6-dark-min.webp
new file mode 100644
index 000000000..1912826d9
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-6-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-6-light-min.webp
new file mode 100644
index 000000000..8fd54e72a
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-7-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-7-dark-min.webp
new file mode 100644
index 000000000..d0b6ba227
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-7-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-7-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-7-light-min.webp
new file mode 100644
index 000000000..0148ef4e8
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-7-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-8-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-8-dark-min.webp
new file mode 100644
index 000000000..fba99c7ca
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-8-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-8-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-8-light-min.webp
new file mode 100644
index 000000000..d06584207
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-8-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-9-dark-min.webp b/site/content/docs/standard/designblocks/features/assets/features-9-dark-min.webp
new file mode 100644
index 000000000..70dfb7cce
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-9-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/assets/features-9-light-min.webp b/site/content/docs/standard/designblocks/features/assets/features-9-light-min.webp
new file mode 100644
index 000000000..351965015
Binary files /dev/null and b/site/content/docs/standard/designblocks/features/assets/features-9-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/features/index.html b/site/content/docs/standard/designblocks/features/index.html
index fba902864..0669e18ab 100644
--- a/site/content/docs/standard/designblocks/features/index.html
+++ b/site/content/docs/standard/designblocks/features/index.html
@@ -20,63 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Basic Feature List</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
-          ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200">
+          <svg
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3593751"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202385"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -357,63 +362,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Feature Section With Heading</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3593773"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202402"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -427,63 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Feature Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3593797"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202429"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -497,63 +512,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Image With Feature Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736677"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202444"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/4.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -567,63 +587,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Features List With Dividers</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736679"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202453"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/5.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -639,63 +664,68 @@ <h2 class="mb-12 pb-6 text-3xl font-bold">
   </h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736681"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202455"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/6.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/6.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-6-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-6-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.6" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -709,63 +739,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Three Column Feature List</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736682"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202464"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/7.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/7.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-7-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-7-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.7" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-7-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-7-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.7" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -779,63 +814,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Elegant Card Feature Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736683"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202502"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/8.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/8.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-8-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-8-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.8" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-8-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-8-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.8" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -849,63 +889,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Feature Section Cards</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736685"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202512"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/9.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/9.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-9-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-9-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.9" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-9-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-9-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.9" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -919,63 +964,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Image With Mask</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736687"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202528"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/10.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/features/assets/new/10.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/features-10-light-min.webp" type="image/webp" />
+        <img
+          src="assets/features-10-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Feature Section Design Block Light v.10" />
+      </picture>
+      <picture>
+        <source srcset="assets/features-10-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/features-10-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Feature Section Design Block Dark v.10" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/forms/index.html b/site/content/docs/standard/designblocks/forms/index.html
index b7ef06375..bb923ef5f 100644
--- a/site/content/docs/standard/designblocks/forms/index.html
+++ b/site/content/docs/standard/designblocks/forms/index.html
@@ -17,46 +17,46 @@
   <h2 class="mb-12 text-3xl font-bold">v.1</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3630297"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -88,46 +88,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.2</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3630299"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -159,46 +159,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.3</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3630344"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
diff --git a/site/content/docs/standard/designblocks/headers/assets/headers-1-dark-min.webp b/site/content/docs/standard/designblocks/headers/assets/headers-1-dark-min.webp
new file mode 100644
index 000000000..ac62b9e12
Binary files /dev/null and b/site/content/docs/standard/designblocks/headers/assets/headers-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/headers/assets/headers-1-light-min.webp b/site/content/docs/standard/designblocks/headers/assets/headers-1-light-min.webp
new file mode 100644
index 000000000..8c6b4fcc7
Binary files /dev/null and b/site/content/docs/standard/designblocks/headers/assets/headers-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/headers/assets/headers-2-dark-min.webp b/site/content/docs/standard/designblocks/headers/assets/headers-2-dark-min.webp
new file mode 100644
index 000000000..73923a56f
Binary files /dev/null and b/site/content/docs/standard/designblocks/headers/assets/headers-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/headers/assets/headers-2-light-min.webp b/site/content/docs/standard/designblocks/headers/assets/headers-2-light-min.webp
new file mode 100644
index 000000000..69be6bc3c
Binary files /dev/null and b/site/content/docs/standard/designblocks/headers/assets/headers-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/headers/assets/headers-3-dark-min.webp b/site/content/docs/standard/designblocks/headers/assets/headers-3-dark-min.webp
new file mode 100644
index 000000000..624e306f2
Binary files /dev/null and b/site/content/docs/standard/designblocks/headers/assets/headers-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/headers/assets/headers-3-light-min.webp b/site/content/docs/standard/designblocks/headers/assets/headers-3-light-min.webp
new file mode 100644
index 000000000..624e306f2
Binary files /dev/null and b/site/content/docs/standard/designblocks/headers/assets/headers-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/headers/assets/headers-4-dark-min.webp b/site/content/docs/standard/designblocks/headers/assets/headers-4-dark-min.webp
new file mode 100644
index 000000000..fef717945
Binary files /dev/null and b/site/content/docs/standard/designblocks/headers/assets/headers-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/headers/assets/headers-4-light-min.webp b/site/content/docs/standard/designblocks/headers/assets/headers-4-light-min.webp
new file mode 100644
index 000000000..0ece0547f
Binary files /dev/null and b/site/content/docs/standard/designblocks/headers/assets/headers-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/headers/index.html b/site/content/docs/standard/designblocks/headers/index.html
index 9bf44127a..1c9df7fa1 100644
--- a/site/content/docs/standard/designblocks/headers/index.html
+++ b/site/content/docs/standard/designblocks/headers/index.html
@@ -20,63 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Header Section Example</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3592266"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202072"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/headers/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/headers/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/headers-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/headers-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Header Clouds Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/headers-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/headers-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Header Clouds Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -357,63 +362,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Two Column Header Example</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3592289"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202096"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/headers/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/headers/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/headers-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/headers-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Header Clouds Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/headers-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/headers-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Header Clouds Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -427,63 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Header Background Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3592413"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202100"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/headers/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/headers/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/headers-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/headers-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Header Clouds Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/headers-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/headers-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Header Clouds Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -497,63 +512,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Dark Background Header</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3743193"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202218"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/headers/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/headers/assets/new/4.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/headers-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/headers-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Header Clouds Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/headers-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/headers-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Header Clouds Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-1-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-1-dark.webp
new file mode 100644
index 000000000..c2e45014e
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-1-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-1-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-1-light.webp
new file mode 100644
index 000000000..73ef5d240
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-1-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-10-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-10-dark.webp
new file mode 100644
index 000000000..76f981c25
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-10-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-10-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-10-light.webp
new file mode 100644
index 000000000..b6a5d05d5
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-10-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-11-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-11-dark.webp
new file mode 100644
index 000000000..bc5e12c85
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-11-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-11-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-11-light.webp
new file mode 100644
index 000000000..aff3f8393
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-11-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-12-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-12-dark.webp
new file mode 100644
index 000000000..a1ac7fc26
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-12-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-12-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-12-light.webp
new file mode 100644
index 000000000..8d5b5fef8
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-12-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-2-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-2-dark.webp
new file mode 100644
index 000000000..4f3b78c93
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-2-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-2-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-2-light.webp
new file mode 100644
index 000000000..89539a917
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-2-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-3-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-3-dark.webp
new file mode 100644
index 000000000..713feea1d
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-3-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-3-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-3-light.webp
new file mode 100644
index 000000000..a50574b9c
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-3-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-4-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-4-dark.webp
new file mode 100644
index 000000000..1442a85dc
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-4-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-4-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-4-light.webp
new file mode 100644
index 000000000..b53a31fa5
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-4-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-5-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-5-dark.webp
new file mode 100644
index 000000000..d95be622f
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-5-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-5-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-5-light.webp
new file mode 100644
index 000000000..d7607b1b5
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-5-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-6-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-6-dark.webp
new file mode 100644
index 000000000..2251078c0
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-6-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-6-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-6-light.webp
new file mode 100644
index 000000000..265ffc876
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-6-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-7-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-7-dark.webp
new file mode 100644
index 000000000..2b8ba2382
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-7-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-7-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-7-light.webp
new file mode 100644
index 000000000..3673a4a46
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-7-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-8-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-8-dark.webp
new file mode 100644
index 000000000..4e92f9448
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-8-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-8-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-8-light.webp
new file mode 100644
index 000000000..f3b06b602
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-8-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-9-dark.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-9-dark.webp
new file mode 100644
index 000000000..bd1cc8e8b
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-9-dark.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/hero-9-light.webp b/site/content/docs/standard/designblocks/hero-sections/assets/hero-9-light.webp
new file mode 100644
index 000000000..d73c72c8e
Binary files /dev/null and b/site/content/docs/standard/designblocks/hero-sections/assets/hero-9-light.webp differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img1.png b/site/content/docs/standard/designblocks/hero-sections/assets/img1.png
deleted file mode 100644
index ed3b72c70..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img1.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img10.png b/site/content/docs/standard/designblocks/hero-sections/assets/img10.png
deleted file mode 100644
index e9ab01dc7..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img10.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img11.png b/site/content/docs/standard/designblocks/hero-sections/assets/img11.png
deleted file mode 100644
index d02731e8c..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img11.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img12.png b/site/content/docs/standard/designblocks/hero-sections/assets/img12.png
deleted file mode 100644
index 1585b55d1..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img12.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img13.png b/site/content/docs/standard/designblocks/hero-sections/assets/img13.png
deleted file mode 100644
index 9839d3ec6..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img13.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img2.png b/site/content/docs/standard/designblocks/hero-sections/assets/img2.png
deleted file mode 100644
index 8f962d115..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img2.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img3.png b/site/content/docs/standard/designblocks/hero-sections/assets/img3.png
deleted file mode 100644
index b90794c58..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img3.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img4.png b/site/content/docs/standard/designblocks/hero-sections/assets/img4.png
deleted file mode 100644
index f88a00206..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img4.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img5.png b/site/content/docs/standard/designblocks/hero-sections/assets/img5.png
deleted file mode 100644
index 8272f21fa..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img5.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img6.png b/site/content/docs/standard/designblocks/hero-sections/assets/img6.png
deleted file mode 100644
index dd82da201..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img6.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img7.png b/site/content/docs/standard/designblocks/hero-sections/assets/img7.png
deleted file mode 100644
index 7638cb5b5..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img7.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img8.png b/site/content/docs/standard/designblocks/hero-sections/assets/img8.png
deleted file mode 100644
index 827f92ea1..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img8.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/assets/img9.png b/site/content/docs/standard/designblocks/hero-sections/assets/img9.png
deleted file mode 100644
index 6e32891bf..000000000
Binary files a/site/content/docs/standard/designblocks/hero-sections/assets/img9.png and /dev/null differ
diff --git a/site/content/docs/standard/designblocks/hero-sections/index.html b/site/content/docs/standard/designblocks/hero-sections/index.html
index 156a1b7fd..e7538b82c 100644
--- a/site/content/docs/standard/designblocks/hero-sections/index.html
+++ b/site/content/docs/standard/designblocks/hero-sections/index.html
@@ -20,56 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Hero Section Example</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3578625"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5196629"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img1.png" type="image/webp" />
-      <img src="assets/img1.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-1-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-1-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-1-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-1-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -350,56 +362,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Hero Section Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3578672"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5196688"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img2.png" type="image/webp" />
-      <img src="assets/img2.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-2-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-2-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-2-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-2-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -413,56 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Hero Sign Up Form</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3579096"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5196705"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img3.png" type="image/webp" />
-      <img src="assets/img3.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-3-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-3-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-3-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-3-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -476,56 +512,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Hero Background Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3692868"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5196712"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img4.png" type="image/webp" />
-      <img src="assets/img4.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-4-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-4-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-4-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-4-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -539,56 +587,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Hero Section Pattern</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3692871"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5196880"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img5.png" type="image/webp" />
-      <img src="assets/img5.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-5-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-5-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-5-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-5-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -602,56 +662,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Hero Section Card</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3692873"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5196913"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img6.png" type="image/webp" />
-      <img src="assets/img6.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-6-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-6-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-6-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-6-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.6" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -665,56 +737,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Dark Hero Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3692876"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5197110"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img7.png" type="image/webp" />
-      <img src="assets/img7.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-7-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-7-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.7" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-7-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-7-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.7" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -728,56 +812,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Dark Background Sign Up Form</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3692880"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5197203"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img8.png" type="image/webp" />
-      <img src="assets/img8.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-8-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-8-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.8" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-8-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-8-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.8" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -791,56 +887,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Curved Bottom Background Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3692881"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5197268"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img9.png" type="image/webp" />
-      <img src="assets/img9.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-9-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-9-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.9" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-9-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-9-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.9" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -854,56 +962,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Background Image with Card</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3692889"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5197422"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img10.png" type="image/webp" />
-      <img src="assets/img10.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-10-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-10-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.10" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-10-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-10-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.10" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -917,56 +1037,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Hero Section Page</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3692896"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5197477"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img11.png" type="image/webp" />
-      <img src="assets/img11.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-11-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-11-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.11" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-11-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-11-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.11" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -980,56 +1112,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Hero Section Video</h2>
 
   <!-- Section: Screen block -->
-  <section class="mb-20 overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="mb-20 overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3692898"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5197568"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source srcset="assets/img12.png" type="image/webp" />
-      <img src="assets/img12.png" class="w-full p-0" alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/hero-12-light.webp" type="image/webp" />
+        <img
+          src="assets/hero-12-light.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Hero Section / Intro Section Clouds Design Block Light v.12" />
+      </picture>
+      <picture>
+        <source srcset="assets/hero-12-dark.webp" type="image/webp" />
+        <img
+          src="assets/hero-12-dark.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Hero Section / Intro Section Clouds Design Block Dark v.12" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-1-dark-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-1-dark-min.webp
new file mode 100644
index 000000000..c41329991
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-1-light-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-1-light-min.webp
new file mode 100644
index 000000000..94c97ad0a
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-2-dark-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-2-dark-min.webp
new file mode 100644
index 000000000..dd2c448ae
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-2-light-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-2-light-min.webp
new file mode 100644
index 000000000..b77145def
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-3-dark-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-3-dark-min.webp
new file mode 100644
index 000000000..e6e95154e
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-3-light-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-3-light-min.webp
new file mode 100644
index 000000000..d400bf8fb
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-4-dark-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-4-dark-min.webp
new file mode 100644
index 000000000..2461d29ac
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-4-light-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-4-light-min.webp
new file mode 100644
index 000000000..ff5dfad3e
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-5-dark-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-5-dark-min.webp
new file mode 100644
index 000000000..583f97f7a
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-5-light-min.webp b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-5-light-min.webp
new file mode 100644
index 000000000..4eca10a5a
Binary files /dev/null and b/site/content/docs/standard/designblocks/logo-clouds/assets/logo-clouds-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/logo-clouds/index.html b/site/content/docs/standard/designblocks/logo-clouds/index.html
index 8976755f7..6590f2a44 100644
--- a/site/content/docs/standard/designblocks/logo-clouds/index.html
+++ b/site/content/docs/standard/designblocks/logo-clouds/index.html
@@ -20,63 +20,70 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Logo Clouds</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3599062"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240657"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/logo-clouds-1-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/logo-clouds-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Logo Clouds Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/logo-clouds-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/logo-clouds-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Logo Clouds Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -357,63 +364,70 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Logo Clouds With Heading</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3599169"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240719"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/logo-clouds-2-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/logo-clouds-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Logo Clouds Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/logo-clouds-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/logo-clouds-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Logo Clouds Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -427,63 +441,70 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Logo Clouds With Grid</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3599214"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240728"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/3.webp"
-        class="w-100 p-0"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/logo-clouds-3-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/logo-clouds-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Logo Clouds Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/logo-clouds-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/logo-clouds-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Logo Clouds Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -497,63 +518,70 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Three Column Cards</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736654"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240733"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/4.webp"
-        class="w-100 p-0"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/logo-clouds-4-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/logo-clouds-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Logo Clouds Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/logo-clouds-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/logo-clouds-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Logo Clouds Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -567,63 +595,70 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Logos Card with Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736656"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240751"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/logo-clouds/assets/new/5.webp"
-        class="w-100 p-0"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/logo-clouds-5-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/logo-clouds-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Logo Clouds Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/logo-clouds-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/logo-clouds-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Logo Clouds Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/maps/index.html b/site/content/docs/standard/designblocks/maps/index.html
index b20cfdbbb..e7e21aa1d 100644
--- a/site/content/docs/standard/designblocks/maps/index.html
+++ b/site/content/docs/standard/designblocks/maps/index.html
@@ -17,46 +17,46 @@
   <h2 class="mb-12 text-3xl font-bold">v.1</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3635806"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -88,46 +88,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.2</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3635810"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -159,46 +159,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.3</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3635863"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-1-dark-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-1-dark-min.webp
new file mode 100644
index 000000000..16d9e4f34
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-1-light-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-1-light-min.webp
new file mode 100644
index 000000000..4a41f676b
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-2-dark-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-2-dark-min.webp
new file mode 100644
index 000000000..0f0c53e85
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-2-light-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-2-light-min.webp
new file mode 100644
index 000000000..832f8df9b
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-3-dark-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-3-dark-min.webp
new file mode 100644
index 000000000..e161fcb11
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-3-light-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-3-light-min.webp
new file mode 100644
index 000000000..c58947b55
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-4-dark-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-4-dark-min.webp
new file mode 100644
index 000000000..dd3911f36
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-4-light-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-4-light-min.webp
new file mode 100644
index 000000000..ce461070f
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-5-dark-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-5-dark-min.webp
new file mode 100644
index 000000000..db5dbba23
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-5-light-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-5-light-min.webp
new file mode 100644
index 000000000..322a4202e
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-6-dark-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-6-dark-min.webp
new file mode 100644
index 000000000..c2b342989
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-6-light-min.webp b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-6-light-min.webp
new file mode 100644
index 000000000..e1e3f4954
Binary files /dev/null and b/site/content/docs/standard/designblocks/mega-menu/assets/mega-menu-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/mega-menu/index.html b/site/content/docs/standard/designblocks/mega-menu/index.html
index 72b1f92c3..0f2001c82 100644
--- a/site/content/docs/standard/designblocks/mega-menu/index.html
+++ b/site/content/docs/standard/designblocks/mega-menu/index.html
@@ -20,63 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Basic Dropdown Menu</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3613940"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241266"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/mega-menu-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Mega Menu Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/mega-menu-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Mega Menu Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -357,63 +362,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">One Column With Divider</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709699"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241277"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/mega-menu-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Mega Menu Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/mega-menu-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Mega Menu Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -427,63 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Full Width With Images</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709705"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241333"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/mega-menu-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Mega Menu Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/mega-menu-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Mega Menu Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -497,63 +512,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Mega Menu Example</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709708"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241334"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/4.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/mega-menu-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Mega Menu Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/mega-menu-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Mega Menu Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -567,63 +587,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Dropdown With Icons</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709709"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241342"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/5.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/mega-menu-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Mega Menu Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/mega-menu-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Mega Menu Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -637,63 +662,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Mixed Content</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3709711"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241350"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/6.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/mega-menu/assets/new/6.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/mega-menu-6-light-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Mega Menu Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/mega-menu-6-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/mega-menu-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Mega Menu Design Block Dark v.6" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/navigation/index.html b/site/content/docs/standard/designblocks/navigation/index.html
index 4682da42a..fda253a4d 100644
--- a/site/content/docs/standard/designblocks/navigation/index.html
+++ b/site/content/docs/standard/designblocks/navigation/index.html
@@ -17,46 +17,46 @@
   <h2 class="mb-12 text-3xl font-bold">v.1</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3629598"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -87,46 +87,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.2</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3629604"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -157,46 +157,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.3</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3630222"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
diff --git a/site/content/docs/standard/designblocks/news/assets/news-1-dark-min.webp b/site/content/docs/standard/designblocks/news/assets/news-1-dark-min.webp
new file mode 100644
index 000000000..24d1ce510
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-1-light-min.webp b/site/content/docs/standard/designblocks/news/assets/news-1-light-min.webp
new file mode 100644
index 000000000..c6a0ff7fc
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-2-dark-min.webp b/site/content/docs/standard/designblocks/news/assets/news-2-dark-min.webp
new file mode 100644
index 000000000..a784b1b77
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-2-light-min.webp b/site/content/docs/standard/designblocks/news/assets/news-2-light-min.webp
new file mode 100644
index 000000000..49ecdce0e
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-3-dark-min.webp b/site/content/docs/standard/designblocks/news/assets/news-3-dark-min.webp
new file mode 100644
index 000000000..a9621383a
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-3-light-min.webp b/site/content/docs/standard/designblocks/news/assets/news-3-light-min.webp
new file mode 100644
index 000000000..cea404baa
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-4-dark-min.webp b/site/content/docs/standard/designblocks/news/assets/news-4-dark-min.webp
new file mode 100644
index 000000000..966544684
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-4-light-min.webp b/site/content/docs/standard/designblocks/news/assets/news-4-light-min.webp
new file mode 100644
index 000000000..0fbbf848b
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-5-dark-min.webp b/site/content/docs/standard/designblocks/news/assets/news-5-dark-min.webp
new file mode 100644
index 000000000..81ba1c332
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-5-light-min.webp b/site/content/docs/standard/designblocks/news/assets/news-5-light-min.webp
new file mode 100644
index 000000000..09519b9dc
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-6-dark-min.webp b/site/content/docs/standard/designblocks/news/assets/news-6-dark-min.webp
new file mode 100644
index 000000000..912f77147
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/assets/news-6-light-min.webp b/site/content/docs/standard/designblocks/news/assets/news-6-light-min.webp
new file mode 100644
index 000000000..e7f492d2b
Binary files /dev/null and b/site/content/docs/standard/designblocks/news/assets/news-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/news/index.html b/site/content/docs/standard/designblocks/news/index.html
index f681cc0d4..22ceaa66d 100644
--- a/site/content/docs/standard/designblocks/news/index.html
+++ b/site/content/docs/standard/designblocks/news/index.html
@@ -20,63 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">News Image Text Overlay</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3592925"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202240"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/news-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/news-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="News Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/news-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/news-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="News Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -357,63 +362,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">News Cards Images</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3593663"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202302"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/news-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/news-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="News Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/news-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/news-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="News Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -427,63 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">News Three Column Template</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3593686"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202318"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/news-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/news-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="News Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/news-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/news-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="News Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -497,65 +512,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">News Section Posts</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3743260"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202335"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="overflow-y-scroll" style="max-height: 500px">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/4.webp
-          "
-          type="image/webp" />
+    <div class="relative overflow-y-scroll" style="max-height: 500px">
+      <picture>
+        <source srcset="assets/news-4-light-min.webp" type="image/webp" />
         <img
-          src="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/4.webp
-            "
-          class="w-full"
-          alt="" />
+          src="assets/news-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="News Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/news-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/news-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="News Design Block Dark v.4" />
       </picture>
     </div>
   </section>
@@ -571,65 +587,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">News Full Width</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3743261"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202375"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="overflow-y-scroll" style="max-height: 500px">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/5.webp
-          "
-          type="image/webp" />
+    <div class="relative overflow-y-scroll" style="max-height: 500px">
+      <picture>
+        <source srcset="assets/news-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/news-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="News Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/news-5-dark-min.webp" type="image/webp" />
         <img
-          src="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/5.webp
-            "
-          class="w-full"
-          alt="" />
+          src="assets/news-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="News Design Block Dark v.5" />
       </picture>
     </div>
   </section>
@@ -645,65 +662,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Alternately News</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3743263"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202379"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="overflow-y-scroll" style="max-height: 500px">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/6.webp
-          "
-          type="image/webp" />
+    <div class="relative overflow-y-scroll" style="max-height: 500px">
+      <picture>
+        <source srcset="assets/news-6-light-min.webp" type="image/webp" />
+        <img
+          src="assets/news-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="News Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/news-6-dark-min.webp" type="image/webp" />
         <img
-          src="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/news/assets/new/6.webp
-            "
-          class="w-full"
-          alt="" />
+          src="assets/news-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="News Design Block Dark v.6" />
       </picture>
     </div>
   </section>
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-1-dark-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-1-dark-min.webp
new file mode 100644
index 000000000..082fad803
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-1-light-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-1-light-min.webp
new file mode 100644
index 000000000..78af75871
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-2-dark-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-2-dark-min.webp
new file mode 100644
index 000000000..d78206e04
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-2-light-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-2-light-min.webp
new file mode 100644
index 000000000..56e56f2c9
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-3-dark-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-3-dark-min.webp
new file mode 100644
index 000000000..ee20c9230
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-3-light-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-3-light-min.webp
new file mode 100644
index 000000000..54d0e7f2c
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-4-dark-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-4-dark-min.webp
new file mode 100644
index 000000000..6da287375
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-4-light-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-4-light-min.webp
new file mode 100644
index 000000000..8d88736a0
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-5-dark-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-5-dark-min.webp
new file mode 100644
index 000000000..e5a5492b3
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-5-light-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-5-light-min.webp
new file mode 100644
index 000000000..2345beb76
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-6-dark-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-6-dark-min.webp
new file mode 100644
index 000000000..02d348f0f
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-6-light-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-6-light-min.webp
new file mode 100644
index 000000000..fd7a279eb
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-7-dark-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-7-dark-min.webp
new file mode 100644
index 000000000..e55a94fb8
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-7-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-7-light-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-7-light-min.webp
new file mode 100644
index 000000000..9ea07847a
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-7-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-8-dark-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-8-dark-min.webp
new file mode 100644
index 000000000..c1d024d53
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-8-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/assets/newsletter-8-light-min.webp b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-8-light-min.webp
new file mode 100644
index 000000000..dc05b84da
Binary files /dev/null and b/site/content/docs/standard/designblocks/newsletter/assets/newsletter-8-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/newsletter/index.html b/site/content/docs/standard/designblocks/newsletter/index.html
index e2427791b..7aa50671c 100644
--- a/site/content/docs/standard/designblocks/newsletter/index.html
+++ b/site/content/docs/standard/designblocks/newsletter/index.html
@@ -20,63 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Newsletter Form</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3590724"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201556"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/newsletter-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Newsletter Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/newsletter-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Newsletter Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -350,69 +355,75 @@ <h5 class="mb-0">
   </div>
 </section>
 <!-- Section: Sharing request-->
+
 <!-- Section: newsletter 2-->
 <section id="section-v-2">
   <!-- Section title -->
   <h2 class="mb-12 pb-6 text-3xl font-bold">Call To Action</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3590757"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201609"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/newsletter-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Newsletter Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/newsletter-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Newsletter Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -426,63 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Newsletter Form with Icon</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3590785"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201684"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/newsletter-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Newsletter Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/newsletter-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Newsletter Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -496,63 +512,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Full Heigh Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736605"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201711"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/4.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/newsletter-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Newsletter Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/newsletter-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Newsletter Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -566,63 +587,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Dark Background</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736610"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201721"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/5.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/newsletter-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Newsletter Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/newsletter-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Newsletter Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -636,63 +662,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Subscription Form with Video</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736611"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201741"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/6.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/6.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/newsletter-6-light-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Newsletter Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/newsletter-6-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Newsletter Design Block Dark v.6" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -706,63 +737,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Newsletter Card</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736613"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201751"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/7.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/7.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/newsletter-7-light-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-7-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Newsletter Design Block Light v.7" />
+      </picture>
+      <picture>
+        <source srcset="assets/newsletter-7-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-7-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Newsletter Design Block Dark v.7" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -776,63 +812,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Card Overlap</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736614"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201891"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/8.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/newsletter/assets/new/8.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/newsletter-8-light-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-8-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Newsletter Design Block Light v.8" />
+      </picture>
+      <picture>
+        <source srcset="assets/newsletter-8-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/newsletter-8-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Newsletter Design Block Dark v.8" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-1-dark-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-1-dark-min.webp
new file mode 100644
index 000000000..287b37420
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-1-light-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-1-light-min.webp
new file mode 100644
index 000000000..e46a2395a
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-2-dark-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-2-dark-min.webp
new file mode 100644
index 000000000..e95793828
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-2-light-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-2-light-min.webp
new file mode 100644
index 000000000..96a6987a6
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-3-dark-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-3-dark-min.webp
new file mode 100644
index 000000000..83b6cd63a
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-3-light-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-3-light-min.webp
new file mode 100644
index 000000000..2cd9f0de6
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-4-dark-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-4-dark-min.webp
new file mode 100644
index 000000000..a7081d11a
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-4-light-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-4-light-min.webp
new file mode 100644
index 000000000..50a77d980
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-5-dark-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-5-dark-min.webp
new file mode 100644
index 000000000..7cbeafc3f
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-5-light-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-5-light-min.webp
new file mode 100644
index 000000000..ac779e897
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-6-dark-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-6-dark-min.webp
new file mode 100644
index 000000000..ece2545a4
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/assets/pricing-6-light-min.webp b/site/content/docs/standard/designblocks/pricing/assets/pricing-6-light-min.webp
new file mode 100644
index 000000000..975318696
Binary files /dev/null and b/site/content/docs/standard/designblocks/pricing/assets/pricing-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/pricing/index.html b/site/content/docs/standard/designblocks/pricing/index.html
index 34e4dc4a8..b35ad7ae4 100644
--- a/site/content/docs/standard/designblocks/pricing/index.html
+++ b/site/content/docs/standard/designblocks/pricing/index.html
@@ -20,63 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Pricing Section Example</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3590598"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5197663"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/pricing-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Pricing Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/pricing-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Pricing Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -359,64 +364,68 @@ <h2 class="mb-12 pb-6 text-3xl font-bold">
   </h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3590635"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5197738"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/2.webp"
-        class="w-full"
-        alt=""
-        style="background-color: #e9ecef" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/pricing-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Pricing Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/pricing-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Pricing Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -430,63 +439,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Pricing Cards</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3590701"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5198324"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/pricing-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Pricing Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/pricing-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Pricing Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -500,63 +514,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Single Button Pricing UI</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736400"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5198339"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/4.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/pricing-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Pricing Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/pricing-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Pricing Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -572,64 +591,68 @@ <h2 class="mb-12 pb-6 text-3xl font-bold">
   </h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736403"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5198438"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/5.webp"
-        class="w-full"
-        alt=""
-        style="background-color: #e9ecef" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/pricing-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Pricing Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/pricing-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Pricing Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -643,66 +666,69 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Software Pricing Page Template</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736407"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5198710"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/6.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/pricing/assets/new/6.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/pricing-6-light-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Pricing Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/pricing-6-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/pricing-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Pricing Design Block Dark v.6" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
 <!-- Section: Pricing 6-->
-
-<hr class="my-12 dark:border-neutral-600" />
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-1-dark-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-1-dark-min.webp
new file mode 100644
index 000000000..5d9cf4ea2
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-1-light-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-1-light-min.webp
new file mode 100644
index 000000000..b5cc89253
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-2-dark-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-2-dark-min.webp
new file mode 100644
index 000000000..1272bdc59
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-2-light-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-2-light-min.webp
new file mode 100644
index 000000000..678f6ad33
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-3-dark-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-3-dark-min.webp
new file mode 100644
index 000000000..9c47e3e5b
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-3-light-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-3-light-min.webp
new file mode 100644
index 000000000..9f03e7d26
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-4-dark-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-4-dark-min.webp
new file mode 100644
index 000000000..1f0bff6ba
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-4-light-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-4-light-min.webp
new file mode 100644
index 000000000..c3a61b749
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-5-dark-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-5-dark-min.webp
new file mode 100644
index 000000000..ce87a38d8
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-5-light-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-5-light-min.webp
new file mode 100644
index 000000000..123c20126
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-6-dark-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-6-dark-min.webp
new file mode 100644
index 000000000..6bb3e0748
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/assets/projects-6-light-min.webp b/site/content/docs/standard/designblocks/project-sections/assets/projects-6-light-min.webp
new file mode 100644
index 000000000..f17761848
Binary files /dev/null and b/site/content/docs/standard/designblocks/project-sections/assets/projects-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/project-sections/index.html b/site/content/docs/standard/designblocks/project-sections/index.html
index 13b7fedda..65d02dfee 100644
--- a/site/content/docs/standard/designblocks/project-sections/index.html
+++ b/site/content/docs/standard/designblocks/project-sections/index.html
@@ -20,63 +20,66 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Basic Testimonials</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3615525"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241353"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div class="overflow-y-scroll" style="max-height: 500px">
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/1.webp
-          "
-          type="image/webp" />
+    <div class="relative overflow-y-scroll" style="max-height: 500px">
+      <picture>
+        <source srcset="assets/projects-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Project Section Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/projects-1-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/1.webp"
-          class="w-full"
-          alt="" />
+          src="assets/projects-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Project Section Design Block Dark v.1" />
       </picture>
     </div>
   </section>
@@ -359,63 +362,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Testimonials Carousel</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3615535"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241379"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/projects-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Project Section Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/projects-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Project Section Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -429,63 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Review Cards</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3615633"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241404"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/projects-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Project Section Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/projects-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Project Section Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -499,63 +512,66 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Testimonial Page</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3746526"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241417"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <div>
-      <picture class="">
-        <source
-          srcset="
-            https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/4.webp
-          "
-          type="image/webp" />
+    <div class="relative">
+      <picture>
+        <source srcset="assets/projects-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Project Section Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/projects-4-dark-min.webp" type="image/webp" />
         <img
-          src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/4.webp"
-          class="w-full"
-          alt="" />
+          src="assets/projects-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Project Section Design Block Dark v.4" />
       </picture>
     </div>
   </section>
@@ -571,63 +587,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Review Page</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3746527"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241432"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/5.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/projects-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Project Section Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/projects-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Project Section Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -641,63 +662,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Three Columns Testimonials</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3746529"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5241445"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/6.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/project-sections/assets/new/6.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/projects-6-light-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Project Section Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/projects-6-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/projects-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Project Section Design Block Dark v.6" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/stats-admin/index.html b/site/content/docs/standard/designblocks/stats-admin/index.html
index d322e2e5b..9673873d0 100644
--- a/site/content/docs/standard/designblocks/stats-admin/index.html
+++ b/site/content/docs/standard/designblocks/stats-admin/index.html
@@ -17,46 +17,46 @@
   <h2 class="mb-12 text-3xl font-bold">v.1</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3632528"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -88,46 +88,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.2</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3632564"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -159,46 +159,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.3</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3633017"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-1-dark-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-1-dark-min.webp
new file mode 100644
index 000000000..e28354e57
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-1-light-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-1-light-min.webp
new file mode 100644
index 000000000..131e3212f
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-2-dark-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-2-dark-min.webp
new file mode 100644
index 000000000..5f1ac64f2
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-2-light-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-2-light-min.webp
new file mode 100644
index 000000000..bd13dc3cf
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-3-dark-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-3-dark-min.webp
new file mode 100644
index 000000000..ed5e36a76
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-3-light-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-3-light-min.webp
new file mode 100644
index 000000000..db898ffdb
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-4-dark-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-4-dark-min.webp
new file mode 100644
index 000000000..e174aace7
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-4-light-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-4-light-min.webp
new file mode 100644
index 000000000..109eb16e5
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-5-dark-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-5-dark-min.webp
new file mode 100644
index 000000000..cfa532b6a
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-5-light-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-5-light-min.webp
new file mode 100644
index 000000000..3b36bf5cd
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-6-dark-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-6-dark-min.webp
new file mode 100644
index 000000000..27b0a6bf4
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/assets/stats-6-light-min.webp b/site/content/docs/standard/designblocks/stats/assets/stats-6-light-min.webp
new file mode 100644
index 000000000..1a0c77267
Binary files /dev/null and b/site/content/docs/standard/designblocks/stats/assets/stats-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/stats/index.html b/site/content/docs/standard/designblocks/stats/index.html
index 4b97019e1..1f181f520 100644
--- a/site/content/docs/standard/designblocks/stats/index.html
+++ b/site/content/docs/standard/designblocks/stats/index.html
@@ -20,63 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Icons on Dark Background</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3590799"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201907"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/stats-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Stats Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/stats-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Stats Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -350,69 +355,75 @@ <h5 class="mb-0">
   </div>
 </section>
 <!-- Section: Sharing request-->
+
 <!-- Section: stats 2-->
 <section id="section-v-2">
   <!-- Section title -->
   <h2 class="mb-12 pb-6 text-3xl font-bold">Stats with Icons</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3590818"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201940"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/stats-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Stats Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/stats-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Stats Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -426,63 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Stats with Descriptions</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3590833"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201955"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/stats-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Stats Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/stats-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Stats Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -496,63 +512,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Stats Section with Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736579"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5201999"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/4.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/stats-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Stats Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/stats-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Stats Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -566,63 +587,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Stats in Three Separate Cards</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736584"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202050"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/5.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/stats-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Stats Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/stats-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Stats Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -636,63 +662,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Elegant Stats Card with Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736586"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5202064"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/6.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/stats/assets/new/6.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/stats-6-light-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Stats Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source srcset="assets/stats-6-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/stats-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Stats Design Block Dark v.6" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/tables/index.html b/site/content/docs/standard/designblocks/tables/index.html
index 72ccd7a8c..e49c2db5d 100644
--- a/site/content/docs/standard/designblocks/tables/index.html
+++ b/site/content/docs/standard/designblocks/tables/index.html
@@ -17,46 +17,46 @@
   <h2 class="mb-12 text-3xl font-bold">v.1</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3633085"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -88,46 +88,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.2</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3633169"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
@@ -159,46 +159,46 @@ <h5 class="mb-0">
   <h2 class="mb-12 text-3xl font-bold">v.3</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
         href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3633196"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
diff --git a/site/content/docs/standard/designblocks/team/assets/team-1-dark-min.webp b/site/content/docs/standard/designblocks/team/assets/team-1-dark-min.webp
new file mode 100644
index 000000000..1fbcacc72
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/assets/team-1-light-min.webp b/site/content/docs/standard/designblocks/team/assets/team-1-light-min.webp
new file mode 100644
index 000000000..e7c4eb42a
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/assets/team-2-dark-min.webp b/site/content/docs/standard/designblocks/team/assets/team-2-dark-min.webp
new file mode 100644
index 000000000..b0096640f
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/assets/team-2-light-min.webp b/site/content/docs/standard/designblocks/team/assets/team-2-light-min.webp
new file mode 100644
index 000000000..75cbb57c1
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/assets/team-3-dark-min.webp b/site/content/docs/standard/designblocks/team/assets/team-3-dark-min.webp
new file mode 100644
index 000000000..dbddfd34f
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/assets/team-3-light-min.webp b/site/content/docs/standard/designblocks/team/assets/team-3-light-min.webp
new file mode 100644
index 000000000..100d22ca2
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/assets/team-4-dark-min.webp b/site/content/docs/standard/designblocks/team/assets/team-4-dark-min.webp
new file mode 100644
index 000000000..ba34057f9
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/assets/team-4-light-min.webp b/site/content/docs/standard/designblocks/team/assets/team-4-light-min.webp
new file mode 100644
index 000000000..5b886a5f9
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/assets/team-5-dark-min.webp b/site/content/docs/standard/designblocks/team/assets/team-5-dark-min.webp
new file mode 100644
index 000000000..0a3e3298b
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/assets/team-5-light-min.webp b/site/content/docs/standard/designblocks/team/assets/team-5-light-min.webp
new file mode 100644
index 000000000..83eb4bd17
Binary files /dev/null and b/site/content/docs/standard/designblocks/team/assets/team-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/team/index.html b/site/content/docs/standard/designblocks/team/index.html
index 8f915cadd..ca454c134 100644
--- a/site/content/docs/standard/designblocks/team/index.html
+++ b/site/content/docs/standard/designblocks/team/index.html
@@ -20,63 +20,68 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Team Section Page</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3598919"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5238573"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/1.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/team-1-light-min.webp" type="image/webp" />
+        <img
+          src="assets/team-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Team Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source srcset="assets/team-1-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/team-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Team Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -357,63 +362,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Simple Team Section</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3598923"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5238637"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/2.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/team-2-light-min.webp" type="image/webp" />
+        <img
+          src="assets/team-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Team Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source srcset="assets/team-2-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/team-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Team Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -427,63 +437,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Cards With Avatars</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3599002"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5239474"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/team-3-light-min.webp" type="image/webp" />
+        <img
+          src="assets/team-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Team Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source srcset="assets/team-3-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/team-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Team Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -497,63 +512,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Three Column Team</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3736695"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5239629"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/4.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/team-4-light-min.webp" type="image/webp" />
+        <img
+          src="assets/team-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Team Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source srcset="assets/team-4-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/team-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Team Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -567,63 +587,68 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Team Cards</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3766077"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5239782"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/team/assets/new/5.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source srcset="assets/team-5-light-min.webp" type="image/webp" />
+        <img
+          src="assets/team-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Team Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source srcset="assets/team-5-dark-min.webp" type="image/webp" />
+        <img
+          src="assets/team-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Team Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-1-dark-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-1-dark-min.webp
new file mode 100644
index 000000000..b4271a006
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-1-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-1-light-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-1-light-min.webp
new file mode 100644
index 000000000..3067a0e7a
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-1-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-2-dark-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-2-dark-min.webp
new file mode 100644
index 000000000..4aac7fac2
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-2-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-2-light-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-2-light-min.webp
new file mode 100644
index 000000000..9f5946622
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-2-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-3-dark-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-3-dark-min.webp
new file mode 100644
index 000000000..bdd3dcb38
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-3-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-3-light-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-3-light-min.webp
new file mode 100644
index 000000000..c1d3494e9
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-3-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-4-dark-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-4-dark-min.webp
new file mode 100644
index 000000000..29aab3644
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-4-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-4-light-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-4-light-min.webp
new file mode 100644
index 000000000..ea8ea24ac
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-4-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-5-dark-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-5-dark-min.webp
new file mode 100644
index 000000000..a720f5693
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-5-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-5-light-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-5-light-min.webp
new file mode 100644
index 000000000..e5d116244
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-5-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-6-dark-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-6-dark-min.webp
new file mode 100644
index 000000000..7893b0a00
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-6-dark-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/assets/testimonials-6-light-min.webp b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-6-light-min.webp
new file mode 100644
index 000000000..30f1c5415
Binary files /dev/null and b/site/content/docs/standard/designblocks/testimonials/assets/testimonials-6-light-min.webp differ
diff --git a/site/content/docs/standard/designblocks/testimonials/index.html b/site/content/docs/standard/designblocks/testimonials/index.html
index 8266d7ddb..3b1ef1cf1 100644
--- a/site/content/docs/standard/designblocks/testimonials/index.html
+++ b/site/content/docs/standard/designblocks/testimonials/index.html
@@ -20,65 +20,72 @@
   <h2 class="mb-12 pb-6 text-3xl font-bold">Basic Testimonials Page</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3599291"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5239829"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/1.webp
-        "
-        type="image/webp" />
-      <img
-        src="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/1.webp
-          "
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/testimonials-1-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-1-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Testimonial Design Block Light v.1" />
+      </picture>
+      <picture>
+        <source
+          srcset="assets/testimonials-1-dark-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-1-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Testimonial Design Block Dark v.1" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -359,65 +366,72 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Testimonials Carousel</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3599547"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240574"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/2.webp
-        "
-        type="image/webp" />
-      <img
-        src="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/2.webp
-          "
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/testimonials-2-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-2-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Testimonial Design Block Light v.2" />
+      </picture>
+      <picture>
+        <source
+          srcset="assets/testimonials-2-dark-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-2-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Testimonial Design Block Dark v.2" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -431,63 +445,72 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Review Cards</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3599569"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240592"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/3.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/3.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/testimonials-3-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-3-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Testimonial Design Block Light v.3" />
+      </picture>
+      <picture>
+        <source
+          srcset="assets/testimonials-3-dark-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-3-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Testimonial Design Block Dark v.3" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -501,65 +524,72 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Testimonial Card with Image</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3749814"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240600"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/4.webp
-        "
-        type="image/webp" />
-      <img
-        src="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/4.webp
-          "
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/testimonials-4-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-4-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Testimonial Design Block Light v.4" />
+      </picture>
+      <picture>
+        <source
+          srcset="assets/testimonials-4-dark-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-4-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Testimonial Design Block Dark v.4" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -573,65 +603,72 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Testimonial Page</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3749828"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240611"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/5.webp
-        "
-        type="image/webp" />
-      <img
-        src="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/5.webp
-          "
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/testimonials-5-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-5-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Testimonial Design Block Light v.5" />
+      </picture>
+      <picture>
+        <source
+          srcset="assets/testimonials-5-dark-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-5-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Testimonial Design Block Dark v.5" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
@@ -645,66 +682,73 @@ <h5 class="mb-0">
   <h2 class="mb-12 pb-6 text-3xl font-bold">Three Columns Testimonials</h2>
 
   <!-- Section: Screen block -->
-  <section class="overflow-hidden rounded-lg bg-white shadow-lg">
+  <section
+    class="overflow-hidden rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-800 dark:shadow-black/10">
     <!-- Header -->
-    <div class="flex items-center justify-between border-b p-6">
+    <div
+      class="flex items-center justify-between border-b p-6 dark:border-b-neutral-600">
       <h5 class="mb-0">
         <span
-          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700"
+          class="inline-block flex items-center justify-start whitespace-nowrap rounded bg-neutral-200 px-2.5 py-1 text-center align-baseline text-xs font-bold leading-none text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200"
           ><svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="lock"
-            class="mr-2 w-3"
-            role="img"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512">
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            class="mr-1 h-4 w-4">
             <path
-              fill="currentColor"
-              d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
           </svg>
           Screenshot</span
         >
       </h5>
       <a
-        class="inline-block flex items-center justify-start rounded bg-transparent px-6 py-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200"
-        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3749833"
+        class="inline-block flex items-center justify-start rounded bg-transparent px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-tight text-primary transition duration-150 ease-in-out hover:bg-neutral-100 hover:text-primary-700 focus:bg-neutral-100 focus:outline-none focus:ring-0 active:bg-neutral-200 dark:text-primary-400 dark:hover:bg-neutral-700 dark:hover:text-primary-500 dark:focus:bg-neutral-700 dark:focus:text-primary-500 dark:active:bg-neutral-700"
+        href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/5240636"
         target="_blank"
         role="button"
         data-te-ripple-init
         >Get the code<svg
-          aria-hidden="true"
-          focusable="false"
-          data-prefix="fas"
-          data-icon="arrow-right"
-          class="ml-2 w-2.5"
-          role="img"
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512">
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="ml-1 h-4 w-4">
           <path
-            fill="currentColor"
-            d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
         </svg>
       </a>
     </div>
     <!-- Header -->
 
     <!-- Screen -->
-    <picture class="">
-      <source
-        srcset="
-          https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/6.webp
-        "
-        type="image/webp" />
-      <img
-        src="https://tecdn.b-cdn.net/docs/standard/design-blocks/landing-page/testimonials/assets/new/6.webp"
-        class="w-full"
-        alt="" />
-    </picture>
+    <div class="relative">
+      <picture>
+        <source
+          srcset="assets/testimonials-6-light-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-6-light-min.webp"
+          class="absolute left-0 top-0 w-full transition-opacity duration-500 dark:opacity-0"
+          alt="Testimonial Design Block Light v.6" />
+      </picture>
+      <picture>
+        <source
+          srcset="assets/testimonials-6-dark-min.webp"
+          type="image/webp" />
+        <img
+          src="assets/testimonials-6-dark-min.webp"
+          class="w-full opacity-0 transition-opacity duration-500 dark:opacity-100"
+          alt="Testimonial Design Block Dark v.6" />
+      </picture>
+    </div>
   </section>
   <!-- Section: Screen block -->
 </section>
 <!-- Section: v.6-->
-
-<hr class="my-12 dark:border-neutral-600" />