2 files changed, 66 insertions, 0 deletions
diff --git a/src/components/backgrounds/Grid.tsx b/src/components/backgrounds/Grid.tsx
new file mode 100644
index 0000000..7198933
--- /dev/null
+++ b/src/components/backgrounds/Grid.tsx
@@ -0,0 +1,35 @@
+export default function Grid() {
+  return (
+    <div className="absolute inset-0 -z-10 overflow-hidden">
+      <svg
+        aria-hidden="true"
+        className="absolute top-0 left-[max(50%,25rem)] h-256 w-512 -translate-x-1/2 mask-[radial-gradient(64rem_64rem_at_top,white,transparent)] stroke-gray-200"
+      >
+        <defs>
+          <pattern
+            x="50%"
+            y={-1}
+            id="e813992c-7d03-4cc4-a2bd-151760b470a0"
+            width={200}
+            height={200}
+            patternUnits="userSpaceOnUse"
+          >
+            <path d="M100 200V.5M.5 .5H200" fill="none" />
+          </pattern>
+        </defs>
+        <svg x="50%" y={-1} className="overflow-visible fill-red-50">
+          <path
+            d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
+            strokeWidth={0}
+          />
+        </svg>
+        <rect
+          fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)"
+          width="100%"
+          height="100%"
+          strokeWidth={0}
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/src/components/backgrounds/Polygons.tsx b/src/components/backgrounds/Polygons.tsx
new file mode 100644
index 0000000..c6f8ab6
--- /dev/null
+++ b/src/components/backgrounds/Polygons.tsx
@@ -0,0 +1,31 @@
+export default function Polygons() {
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-100"
+      >
+        <div
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
+          className="relative left-[calc(50%-11rem)] aspect-1155/800 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#ff0000] opacity-50 sm:left-[calc(50%-30rem)] sm:w-288.75"
+        />
+      </div>
+
+      <div
+        aria-hidden="true"
+        className="absolute inset-x-0 top-[calc(30rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(20rem)]"
+      >
+        <div
+          style={{
+            clipPath:
+              "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+          }}
+          className="relative left-[calc(50%-15rem)] aspect-1155/900 sm:aspect-1155/700 w-144.5-translate-x-1/2  bg-linear-to-tr from-red-300 to-indigo-400 opacity-50 sm:left-[calc(50%-40rem)] sm:w-288.75"
+        />
+      </div>
+    </>
+  );
+}