fix(SW-696): split up surprises into more components for readability

add tsparticles for confetti

components/MyPages/Surprises/Header.tsx

@@ -0,0 +1,16 @@
+import { CloseLargeIcon } from "@/components/Icons"
+
+import styles from "./surprises.module.css"
+
+import type { HeaderProps } from "@/types/components/blocks/surprises"
+
+export default function Header({ onClose, children }: HeaderProps) {
+  return (
+    <div className={styles.top}>
+      {children}
+      <button onClick={onClose} type="button" className={styles.close}>
+        <CloseLargeIcon />
+      </button>
+    </div>
+  )
+}