Add BackgroundWrapper component

src/components/BackgroundWrapper/index.js

@@ -0,0 +1,42 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+//
+// This component:
+// wrap components in a background style that can be selected
+// most of the time you do not want to put a <BackgroundWrapper> as a child of <BoundaryBox>
+// while it is usually fine to have a <BoundaryBox as a child of a <BackgroundWrapper>
+
+export default function BackgroundWrapper({ children, backgroundType }) {
+  // Use backgroundType to dynamically change the class for the background
+  let wrapperClassName;
+
+  switch (backgroundType) {
+    case "solidGrey":
+      wrapperClassName = styles.backgroundSolidGrey;
+      break;
+    case "solidBlue":
+      wrapperClassName = styles.backgroundSolidBlue;
+      break;
+    case "zoom":
+      wrapperClassName = styles.backgroundZoom;
+      break;
+    case "gradientDark":
+      wrapperClassName = styles.backgroundGradientDark;
+      break;
+    case "gradientLight":
+      wrapperClassName = styles.backgroundGradientLight;
+      break;
+    case "ada":
+      wrapperClassName = styles.backgroundAda;
+      break;
+    default:
+      wrapperClassName = styles.backgroundNone;
+  }
+
+  return <div className={wrapperClassName}>{children}</div>;
+}

src/components/BackgroundWrapper/styles.module.css

@@ -0,0 +1,108 @@
+/** backgroundNone */
+
+.backgroundNone {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+/** backgroundSolidGrey */
+
+.backgroundSolidGrey {
+  background-color: #f5f5f5;
+  /*padding: 20px;*/
+}
+
+[data-theme="dark"] {
+  .backgroundSolidGrey {
+    background-color: #242526;
+  }
+}
+
+/** backgroundSolidBlue */
+
+.backgroundSolidBlue {
+  background-color: #5281f7;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+[data-theme="dark"] {
+  .backgroundSolidBlue {
+    background-color: #5281f7; /* fixme: darker */
+  }
+}
+
+/** backgroundZoom */
+
+.backgroundZoom {
+  /*background-image: url("/img/hero-header-dots.webp");*/
+  background-size: 500px;
+  background-repeat: no-repeat;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+[data-theme="dark"] {
+  .backgroundZoom {
+    /*background-image: url("/img/hero-header-dots-dark.webp");*/
+  }
+}
+
+/** backgroundZoomMini */
+
+.backgroundGradientDark {
+  background-image: linear-gradient(315deg, #0133ae, #335cbe);
+}
+
+[data-theme="dark"] {
+  .backgroundGradientDark {
+    background-image: linear-gradient(315deg, #0133ae, #0b1f4f);
+  }
+}
+
+/** backgroundGradientLight */
+
+.backgroundGradientLight {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  background-image: linear-gradient(
+    315deg,
+    rgb(91, 123, 202),
+    rgb(10, 56, 166)
+  );
+}
+
+[data-theme="dark"] {
+  .backgroundGradientLight {
+    background-image: linear-gradient(315deg, rgb(43, 89, 205), rgb(0, 24, 80));
+  }
+}
+
+/** backgroundAda */
+
+.backgroundAda {
+  position: relative;
+  background-size: contain;
+  background-repeat: no-repeat;
+  padding: 20px;
+  z-index: 0;
+  /*overflow: hidden;*/  /* no overflow to let it bleed */
+}
+
+.backgroundAda:before {
+  content: "₳";
+  z-index: -1;
+  position: absolute;
+  top: -25rem;
+  right: 15vw;
+  opacity: 0.07;
+  font-size: 43rem; /* adjust size of the A */
+  padding-top: 0px;
+  margin-top: 0px;
+  transform: rotate(7deg);
+  color: #1f5cf8;
+}
+
+[data-theme="dark"] .backgroundAda:before {
+  color: #98b7f2; /* dark mode color for the A */
+}

src/pages/showcase/index.js

@@ -22,6 +22,7 @@ import styles from "./styles.module.css";
 
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import Fav from "../../svg/fav.svg";
+import BackgroundWrapper from "@site/src/components/BackgroundWrapper";
 
 const TITLE = "Showcase";
 const DESCRIPTION = "See the awesome projects people are building with Cardano";
@@ -165,6 +166,7 @@ function ShowcaseFilters() {
   const filteredProjects = useFilteredProjects();
 
   return (
+    <BackgroundWrapper backgroundType="ada">
     <div className="margin-top--l margin-bottom--md container">
       <div className={clsx("margin-bottom--sm", styles.filterCheckbox)}>
         <div>
@@ -223,6 +225,7 @@ function ShowcaseFilters() {
         })}
       </div>
     </div>
+    </BackgroundWrapper>
   );
 }