docs: add use cases to landing page

subprojects/docs/src/components/Features/index.module.css

@@ -17,7 +17,7 @@
 }
 
 [data-theme='dark'] :global(.fiforeground) {
-  fill: #ebebff;
+  fill: var(--ifm-font-color-base);
 }
 
 [data-theme='dark'] :global(.fiempty) {
@@ -124,3 +124,7 @@
     text-align: right;
   }
 }
+
+.row--last {
+  margin-bottom: calc(-1 * var(--ifm-leading));
+}

subprojects/docs/src/components/Features/index.tsx

@@ -90,7 +90,7 @@ export default function Features() {
           generation processes.
         </Feature>
       </div>
-      <div className="row">
+      <div className={clsx('row', styles['row--last'])}>
         <Feature
           icon={<Fi4 />}
           title="Advanced web-based editor"

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;
+}

subprojects/docs/src/components/UseCases/index.tsx

@@ -0,0 +1,106 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+
+import styles from './index.module.css';
+import Uc1 from './uc1.svg';
+import Uc2 from './uc2.svg';
+import Uc3 from './uc3.svg';
+import Uc4 from './uc4.svg';
+import Uc5 from './uc5.svg';
+import Uc6 from './uc6.svg';
+
+function UseCase({
+  icon,
+  title,
+  href,
+}: {
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  href: string;
+}) {
+  return (
+    <div className="col col--4">
+      <div className={styles['use-case']}>
+        <h3 className={styles['use-case__title']}>
+          <Link href={href} className={styles['use-case__link']!}>
+            {title}
+          </Link>
+        </h3>
+        <div className={styles['use-case__content']}>{icon}</div>
+      </div>
+    </div>
+  );
+}
+
+export default function UseCases() {
+  return (
+    <>
+      <div className="row">
+        <UseCase
+          icon={<Uc1 />}
+          title={
+            <>
+              <b>Scenario generation</b> for testing autonomous vechicles
+            </>
+          }
+          href="https://doi.org/10.1007/s10270-021-00884-z"
+        />
+        <UseCase
+          icon={<Uc2 />}
+          title={
+            <>
+              <b>Conformance checking</b> of modeling toolchains
+            </>
+          }
+          href="https://doi.org/10.1007/s10009-019-00530-6"
+        />
+        <UseCase
+          icon={<Uc3 />}
+          title={
+            <>
+              Synthesize distributed <b>communication networks</b>
+            </>
+          }
+          href="https://doi.org/10.1109/TSE.2020.3025732"
+        />
+      </div>
+      <div className={clsx('row', styles['row--bottom'])}>
+        <UseCase
+          icon={<Uc4 />}
+          title={
+            <>
+              <b>Execution time analysis</b> for <span>data-driven</span>{' '}
+              critical systems
+            </>
+          }
+          href="https://doi.org/10.1145/3471904"
+        />
+        <UseCase
+          icon={<Uc5 />}
+          title={
+            <>
+              <b>Generative architectures</b> with assured resilience
+            </>
+          }
+          href="https://doi.org/10.1145/3550355.3552448"
+        />
+        <UseCase
+          icon={<Uc6 />}
+          title={
+            <>
+              <b>Video game map generator</b> with <span>model-based</span>{' '}
+              techniques
+            </>
+          }
+          href="https://doi.org/10.1145/3417990.3422001"
+        />
+      </div>
+    </>
+  );
+}

subprojects/docs/src/components/UseCases/uc1.svg.license

@@ -0,0 +1,4 @@
+SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
+