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

add tsparticles for confetti

components/MyPages/Surprises/Card.tsx

@@ -0,0 +1,26 @@
+import Image from "@/components/Image"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./surprises.module.css"
+
+import type { CardProps } from "@/types/components/blocks/surprises"
+
+export default function Card({ title, children }: CardProps) {
+  return (
+    <div className={styles.content}>
+      <Image
+        src="/_static/img/loyalty-award.png"
+        width={113}
+        height={125}
+        alt="Gift"
+      />
+      <header>
+        <Title textAlign="center" level="h4">
+          {title}
+        </Title>
+      </header>
+
+      {children}
+    </div>
+  )
+}