1 files changed, 104 insertions, 0 deletions

diff --git a/subprojects/docs/src/components/UseCases/index.module.css b/subprojects/docs/src/components/UseCases/index.module.css
new file mode 100644
index 00000000..c8ffc0af
--- /dev/null
+++ b/subprojects/docs/src/components/UseCases/index.module.css
@@ -0,0 +1,104 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+:global(.uchighlight) {
+  fill: var(--refinery-highlight);
+}
+
+:global(.ucdraw) {
+  fill: #303846;
+}
+
+:global(.ucstroke) {
+  stroke: #303846;
+}
+
+[data-theme='dark'] :global(.ucdraw) {
+  fill: var(--ifm-color-emphasis-700);
+}
+
+[data-theme='dark'] :global(.ucstroke) {
+  stroke: var(--ifm-color-emphasis-700);
+}
+
+.use-case {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column-reverse;
+  align-content: justify;
+  width: 100%;
+  background: var(--ifm-card-background-color);
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: var(--ifm-card-border-radius);
+  margin-bottom: 2rem;
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+}
+
+.use-case:hover,
+.use-case:focus-within {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+}
+
+.use-case__content {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+
+.use-case__content svg {
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  transform: scale(1);
+  transition: transform var(--ifm-transition-fast) ease;
+}
+
+.use-case:hover svg,
+.use-case:focus-within svg {
+  transform: scale(1.414);
+}
+
+.use-case__title {
+  margin: 0;
+  padding: 1rem;
+  background: var(--ifm-background-surface-color);
+  font-weight: 400;
+}
+
+.use-case__title b,
+.use-case__title span {
+  display: inline-block;
+}
+
+[data-theme='dark'] .use-case__title {
+  background: var(--ifm-color-emphasis-200);
+}
+
+.use-case__link:hover > * {
+  text-decoration: underline;
+}
+
+.use-case__link::before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+}
+
+.row--bottom {
+  margin-bottom: -2rem;
+}