Allow heading tags (h1-h6) in ContentSanitizer so news editor headings render

resources/js/components/enhance/BeforeAfterSlider.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+export default function BeforeAfterSlider({ beforeUrl, afterUrl, beforeAlt = 'Original image', afterAlt = 'Enhanced image' }) {
+  const [position, setPosition] = React.useState(50)
+
+  if (!beforeUrl || !afterUrl) {
+    return null
+  }
+
+  return (
+    <div className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Before / after</p>
+          <h3 className="mt-2 text-xl font-semibold tracking-[-0.03em] text-white">Compare the original with the enhanced result</h3>
+        </div>
+        <span className="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-slate-200">{position}%</span>
+      </div>
+
+      <div className="relative mt-5 overflow-hidden rounded-[24px] border border-white/10 bg-black/40">
+        <img src={beforeUrl} alt={beforeAlt} className="block w-full object-cover" />
+        <div className="pointer-events-none absolute inset-y-0 left-0 overflow-hidden border-r border-white/80" style={{ width: `${position}%` }}>
+          <img src={afterUrl} alt={afterAlt} className="block h-full w-full object-cover" />
+        </div>
+
+        <div className="pointer-events-none absolute inset-y-0 left-0" style={{ left: `calc(${position}% - 1px)` }}>
+          <div className="flex h-full items-center">
+            <div className="flex h-10 w-10 -translate-x-1/2 items-center justify-center rounded-full border border-white/80 bg-black/60 text-white shadow-[0_0_30px_rgba(15,23,42,0.5)]">
+              <i className="fa-solid fa-left-right text-xs" />
+            </div>
+          </div>
+        </div>
+
+        <div className="pointer-events-none absolute left-3 top-3 rounded-full border border-white/10 bg-[#08111dd8] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-100">Original</div>
+        <div className="pointer-events-none absolute right-3 top-3 rounded-full border border-emerald-300/20 bg-emerald-400/12 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Enhanced</div>
+      </div>
+
+      <label className="mt-5 block">
+        <span className="sr-only">Adjust before and after comparison slider</span>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          step="1"
+          value={position}
+          onChange={(event) => setPosition(Number(event.target.value || 50))}
+          className="h-2 w-full cursor-pointer appearance-none rounded-full bg-white/10 accent-sky-300"
+          aria-label="Adjust before and after comparison slider"
+        />
+      </label>
+    </div>
+  )
+}