From 8a22ee60bcc54dba184d587e69cf8140b65c217f Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 2 Jul 2026 13:20:14 +0100
Subject: [PATCH] fix(website): restore dotted hero backgrounds on PageHeader
 (#705)

* fix(website): restore radial hero backgrounds on page headers

PageHeader lost its decorative background when hero-bg was replaced by
DotField. Add a bottom-centered radial glow via a CSS class so it renders
reliably without Tailwind arbitrary-value parsing issues.

Also move the signup CTA gradient from an inline arbitrary Tailwind class
to the same CSS-class pattern for consistency.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(website): restore dotted DotPattern hero background on PageHeader

Revert the radial glow added to page headers and bring back the static
DotPattern grid that was replaced by DotField in c31ad6395.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
---
 apps/website/src/app.css                           |  9 +++++++++
 apps/website/src/lib/components/page-header.svelte | 14 ++------------
 .../src/lib/components/page-signup-cta.svelte      |  4 +---
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/apps/website/src/app.css b/apps/website/src/app.css
index 392ec3e4..0377672b 100644
--- a/apps/website/src/app.css
+++ b/apps/website/src/app.css
@@ -128,6 +128,15 @@ body {
   background: radial-gradient(circle at 50% 100%, rgba(2, 51, 189, 1) 1%, rgb(4, 2, 56) 100%);
 }
 
+.cio-cta-radial-bg {
+  background: radial-gradient(
+    circle at 50% 100%,
+    rgba(2, 51, 189, 0.92) 0%,
+    rgba(4, 15, 45, 0.98) 58%,
+    rgb(3, 7, 18) 100%
+  );
+}
+
 .embed {
   width: 100%;
   height: 315px;
diff --git a/apps/website/src/lib/components/page-header.svelte b/apps/website/src/lib/components/page-header.svelte
index 1a8aa316..cb557b44 100644
--- a/apps/website/src/lib/components/page-header.svelte
+++ b/apps/website/src/lib/components/page-header.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { DotField } from '@cio/ui/custom/animation/dot-field';
+  import { DotPattern } from '@cio/ui/custom/animation/dot-pattern';
 
   /**
    * @typedef {Object} Props
@@ -12,17 +12,7 @@
 </script>
 
 <header class="relative w-full overflow-hidden border-b border-slate-100 pt-32 pb-16 lg:min-h-[20rem]">
-  <DotField
-    dotRadius={1.5}
-    dotSpacing={15}
-    cursorRadius={420}
-    bulgeOnly={true}
-    bulgeStrength={56}
-    glowRadius={140}
-    sparkle={false}
-    waveAmplitude={0}
-    class="pointer-events-none absolute inset-0 h-full w-full"
-  />
+  <DotPattern fillColor="rgb(2 51 189 / 0.25)" class="pointer-events-none absolute inset-0 h-full w-full" />
   <div class="relative z-10 {className}">
     {@render children?.()}
   </div>
diff --git a/apps/website/src/lib/components/page-signup-cta.svelte b/apps/website/src/lib/components/page-signup-cta.svelte
index dbe7fb42..a31e50fa 100644
--- a/apps/website/src/lib/components/page-signup-cta.svelte
+++ b/apps/website/src/lib/components/page-signup-cta.svelte
@@ -16,9 +16,7 @@
 <div
   class="relative mx-auto my-5 flex h-[61vh] w-full max-w-4xl flex-col items-center justify-center overflow-hidden bg-gray-950 px-6 py-12 text-center shadow-2xl lg:h-[50vh] lg:w-[70%] lg:rounded-3xl"
 >
-  <div
-    class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_100%,rgba(2,51,189,0.92)_0%,rgba(4,15,45,0.98)_58%,rgb(3,7,18)_100%)]"
-  ></div>
+  <div class="cio-cta-radial-bg pointer-events-none absolute inset-0 z-0 h-full w-full" aria-hidden="true"></div>
   <Waves
     lineColor="rgba(255,255,255,0.18)"
     class="ui:pointer-events-none ui:absolute ui:inset-0 ui:h-full ui:w-full"