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 <[email protected]>

* 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 <[email protected]>

---------

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: Rotimi Best <[email protected]>

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;

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>

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"