docs: add embedded video

7 files changed, 177 insertions, 12 deletions

diff --git a/subprojects/docs/package.json b/subprojects/docs/package.json
index 3191c771..b411fdaf 100644
--- a/subprojects/docs/package.json
+++ b/subprojects/docs/package.json
@@ -39,6 +39,7 @@
     "@fontsource-variable/jetbrains-mono": "^5.0.20",
     "@fontsource-variable/open-sans": "^5.0.28",
     "@fontsource/open-sans": "^5.0.27",
+    "@material-icons/svg": "^1.0.33",
     "@mdx-js/react": "^3.0.1",
     "@swc/core": "^1.4.12",
     "clsx": "^2.1.0",
diff --git a/subprojects/docs/src/css/custom.css b/subprojects/docs/src/css/custom.css
index 82c0c972..ef02b0c2 100644
--- a/subprojects/docs/src/css/custom.css
+++ b/subprojects/docs/src/css/custom.css
@@ -35,6 +35,14 @@
   --ifm-color-primary-lightest: #04b3c7;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-blockquote-color: var(--ifm-color-content-secondary);
+  /* elevation=4 shadow from Material UI. */
+  --ifm-global-shadow-md: 0px 2px 4px -1px rgba(0,0,0,0.2),
+    0px 4px 5px 0px rgba(0,0,0,0.14),
+    0px 1px 10px 0px rgba(0,0,0,0.12) !important;
+  /* elevation=8 shadow from Material UI. */
+  --ifm-global-shadow-tl: 0px 5px 5px -3px rgba(0,0,0,0.2),
+    0px 8px 10px 1px rgba(0,0,0,0.14),
+    0px 3px 14px 2px rgba(0,0,0,0.12) !important;
 }
 
 [data-theme='dark'] {
@@ -59,14 +67,11 @@ code {
 
 .navbar {
   --ifm-navbar-background-color: var(--ifm-background-surface-color) !important;
-}
-
-.navbar {
-  box-shadow: 0 1px var(--refinery-outer-border-color);
+  --ifm-navbar-shadow: 0 1px var(--refinery-outer-border-color) !important;
 }
 
 [data-theme='dark'] .navbar {
-  box-shadow: var(--ifm-global-shadow-lw);
+  --ifm-navbar-shadow: var(--ifm-global-shadow-lw) !important;
 }
 
 .button, .navbar__link, .footer__link-item {
@@ -86,14 +91,17 @@ code {
 }
 
 .navbar__link--try-now {
-  margin: 0 0.5rem 0 0.25rem;
-  padding: 0.25rem 1.25rem;
   color: var(--ifm-font-color-base-inverse);
   background: var(--ifm-color-primary);
-  border-radius: 50em;
   transition: background var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
 }
 
+.navbar__inner .navbar__link--try-now {
+  margin: 0 0.5rem 0 0.25rem;
+  padding: 0.25rem 1.25rem;
+  border-radius: 50em;
+}
+
 .navbar__link--try-now:hover {
   color: var(--ifm-font-color-base-inverse);
   background: var(--ifm-color-primary-dark);
@@ -104,6 +112,10 @@ code {
   background: var(--ifm-color-primary-darker);
 }
 
+.menu {
+  --ifm-menu-color: var(--ifm-color-content-secondary) !important;
+}
+
 .footer {
   --ifm-footer-background-color: var(--ifm-background-surface-color) !important;
   --ifm-footer-link-color: var(--ifm-color-content-secondary) !important;
diff --git a/subprojects/docs/src/pages/index.module.css b/subprojects/docs/src/pages/index.module.css
index a86689d1..533e8db1 100644
--- a/subprojects/docs/src/pages/index.module.css
+++ b/subprojects/docs/src/pages/index.module.css
@@ -7,5 +7,79 @@
 .buttons {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   gap: 1rem;
 }
+
+.section {
+  padding: 4rem 0;
+}
+
+@media (max-width: 576px) {
+  .hero, .section {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .button {
+    flex-grow: 1;
+  }
+}
+
+.section--video {
+  background: var(--ifm-background-surface-color);
+}
+
+.video__container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 560/315;
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: box-shadow var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
+}
+
+.video__container:hover,
+.video__container:focus-within {
+  box-shadow: var(--ifm-global-shadow-md);
+}
+
+.video, .video__button, .video__cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.video__button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+
+.video__cover {
+  z-index: 1;
+}
+
+.video__play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  aspect-ratio: 1/1;
+  height: 16rem;
+  width: auto;
+  max-height: 50%;
+  background: var(--ifm-color-primary);
+  mask-image: url(@material-icons/svg/svg/play_circle/outline.svg);
+  mask-size: contain;
+  transition: background var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
+}
+
+.video__button:hover .video__play,
+.video__button:focus .video__play {
+  background: var(--ifm-color-primary-dark);
+}
diff --git a/subprojects/docs/src/pages/index.tsx b/subprojects/docs/src/pages/index.tsx
index 632ee3d6..5190b88b 100644
--- a/subprojects/docs/src/pages/index.tsx
+++ b/subprojects/docs/src/pages/index.tsx
@@ -5,14 +5,63 @@
  */
 
 import Link from '@docusaurus/Link';
+// import PlayCircle from 'vg';
 import Layout from '@theme/Layout';
+import clsx from 'clsx';
+import { useState } from 'react';
 
 import styles from './index.module.css';
+import videoCover from './video-cover.webp?url';
+
+function Video() {
+  const [started, setStarted] = useState(false);
+  return (
+    <section className={clsx(styles['section'], styles['section--video'])}>
+      <div className="container">
+        <div className={styles['video__container']}>
+          {started ? (
+            <iframe
+              width="560"
+              height="315"
+              src="https://www.youtube-nocookie.com/embed/Qy_3udNsWsM?autoplay=1"
+              title="YouTube video player"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+              className={styles['video']}
+            />
+          ) : (
+            <button
+              type="button"
+              title="Play video (requires acceping cookies from YouTube)"
+              onClick={() => setStarted(true)}
+              className={styles['video__button']}
+            >
+              <h2>Modeling with Graphs</h2>
+              <p>
+                Graph based models are widely used in software engineering for
+                systems models, the analysis of data structures, databases, and
+                AI test environments.
+              </p>
+              <p>
+                Testing, benchmarking or design-space exploration scnearios rely
+                on the automated generation of consistent models!
+              </p>
+              <img src={videoCover} alt="" className={styles['video__cover']} />
+              <div className={styles['video__play']} />
+            </button>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
 
 export default function Home() {
   return (
     <Layout>
-      <header className="hero hero--dark">
+      <header className={clsx('hero', 'hero--dark', styles['hero'])}>
         <div className="container">
           <h1 className="hero__title">Refinery</h1>
           <p className="hero__subtitle">
@@ -21,25 +70,41 @@ export default function Home() {
           <div className={styles['buttons']}>
             <Link
               href="https://refinery.services/"
-              className="button button--lg button--primary"
+              className={clsx(
+                'button',
+                'button--lg',
+                'button--primary',
+                styles['button'],
+              )}
             >
               Try online
             </Link>
             <Link
               to="/docs/docker"
-              className="button button--lg button--secondary"
+              className={clsx(
+                'button',
+                'button--lg',
+                'button--secondary',
+                styles['button'],
+              )}
             >
               Try in Docker
             </Link>
             <Link
               to="/docs/tutorials/file-system"
-              className="button button--lg button--secondary"
+              className={clsx(
+                'button',
+                'button--lg',
+                'button--secondary',
+                styles['button'],
+              )}
             >
               Tutorial
             </Link>
           </div>
         </div>
       </header>
+      <Video />
     </Layout>
   );
 }
diff --git a/subprojects/docs/src/pages/video-cover.webp b/subprojects/docs/src/pages/video-cover.webp
new file mode 100644
index 00000000..50ebe1ab
--- /dev/null
+++ b/subprojects/docs/src/pages/video-cover.webp
diff --git a/subprojects/docs/src/pages/video-cover.webp.license b/subprojects/docs/src/pages/video-cover.webp.license
new file mode 100644
index 00000000..ff75bc7c
--- /dev/null
+++ b/subprojects/docs/src/pages/video-cover.webp.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/docs/src/types.d.ts b/subprojects/docs/src/types.d.ts
new file mode 100644
index 00000000..0d1b2226
--- /dev/null
+++ b/subprojects/docs/src/types.d.ts
@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+declare module '*?url' {
+  const url: string;
+  export default url;
+}