feat: add screenshots to the landing page

src/locales/list/en-gb.json

@@ -93,6 +93,11 @@
       "feature7": "Runs from donations",
       "feature8": "Full source code on GitHub",
       "feature9": "Express yourself with borders"
+    },
+    "screenshots": {
+      "leftAlt": "a view of the dashboard pane in Nerimity's web app, showing an announcement post",
+      "centerAlt": "the main view of Nerimity desktop, showing a conversation in a server's general channel",
+      "rightAlt": "a conversation displayed in Nerimity's mobile app"
     }
   },
   "loginPage": {

src/pages/HomePage.module.css

@@ -36,6 +36,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
+  align-items: center;
   margin: 8px;
   margin-top: 0;
   margin-bottom: 0;
@@ -49,7 +50,7 @@
   flex-shrink: 0;
   justify-content: center;
 
-  margin-top: 100px;
+  margin-top: 60px;
   text-align: center;
   .slogan {
     background: #4c93ff;
@@ -96,6 +97,77 @@
   }
 }
 
+.screenshotContainer {
+  --max-width: 1400px;
+
+  display: flex;
+  position: relative;
+  height: calc(min(46vw, 0.46 * (var(--max-width) + 16px)));
+  width: 100%;
+  max-width: var(--max-width);
+  margin-block: 60px;
+}
+
+.screenshotContainer img {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 0 8px 0px var(--background-color);
+  border: 1px solid hsl(216deg 9% 30%);
+}
+.screenshotLeft {
+  position: absolute;
+  bottom: 0;
+  left: 5%;
+  width: 40%;
+  z-index: 1;
+}
+.screenshotCenter {
+  position: absolute;
+  left: 20%;
+  width: 60%;
+  z-index: 2;
+}
+.screenshotRight {
+  position: absolute;
+  bottom: 0;
+  right: 5%;
+  width: 17%;
+  z-index: 3;
+}
+
+@media (max-width: 500px) {
+  .screenshotContainer {
+    height: 137vw;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  .screenshotRight {
+    position: absolute;
+    bottom: 0;
+    right: 3%;
+    width: 45%;
+    z-index: 3;
+  }
+  .screenshotCenter {
+    position: absolute;
+    bottom: unset;
+    top: 5%;
+    left: 3%;
+    width: 85%;
+    z-index: 1;
+  }
+  .screenshotLeft {
+    position: absolute;
+    bottom: 8%;
+    left: 7%;
+    width: 85%;
+    z-index: 2;
+  }
+}
+
+
 .featureContainer {
   display: flex;
   align-items: center;
@@ -118,7 +190,6 @@
   max-width: 800px;
   padding: 10px;
   margin: 10px;
-  margin-top: 100px;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 10px;
   column-gap: 20px;

src/pages/HomePage.tsx

@@ -63,6 +63,7 @@ export default function HomePage() {
           </div>
           <PlatformDownloadLinks />
         </div>
+        <ScreenshotView />
         <FeatureList />
       </div>
       <PageFooter />
@@ -264,6 +265,81 @@ const PlatformDownloadLinks = () => {
   );
 };
 
+function ScreenshotView() {
+  const [t] = useTransContext();
+
+  return (
+    <div class={style.screenshotContainer}>
+      <div class={style.screenshotCenter}>
+        <picture>
+          <source
+            type="image/jxl"
+            srcset="/assets/screenshots/center-600w.jxl 600w, /assets/screenshots/center-1200w.jxl 1200w, /assets/screenshots/center-2400w.jxl 2400w"
+            sizes="(max-width: 500px) 85vw, 60vw"
+          />
+          <source
+            type="image/webp"
+            srcset="/assets/screenshots/center-600w.webp 600w, /assets/screenshots/center-1200w.webp 1200w, /assets/screenshots/center-2400w.webp 2400w"
+            sizes="(max-width: 500px) 85vw, 60vw"
+          />
+          <img
+            loading="lazy"
+            style={{"background-color": "#222629"}}
+            width="600"
+            height="384"
+            alt={t("homePage.screenshots.centerAlt")}
+            src="/assets/screenshots/center-1200w-fallback.jpg"
+          />
+        </picture>
+      </div>
+      <div class={style.screenshotRight}>
+        <picture>
+          <source
+            type="image/jxl"
+            srcset="/assets/screenshots/right-293w.jxl 293w, /assets/screenshots/right-585w.jxl 585w, /assets/screenshots/right-1170w.jxl 1170w"
+            sizes="(max-width: 500px) 45vw, 20vw"
+          />
+          <source
+            type="image/webp"
+            srcset="/assets/screenshots/right-293w.webp 293w, /assets/screenshots/right-585w.webp 585w, /assets/screenshots/right-1170w.webp 1170w"
+            sizes="(max-width: 500px) 45vw, 20vw"
+          />
+          <img
+            loading="lazy"
+            style={{"background-color": "#000"}}
+            width="585"
+            height="1266"
+            alt={t("homePage.screenshots.rightAlt")}
+            src="/assets/screenshots/right-585w-fallback.jpg"
+          />
+        </picture>
+      </div>
+      <div class={style.screenshotLeft}>
+        <picture>
+          <source
+            type="image/jxl"
+            srcset="/assets/screenshots/left-430w.jxl 430w, /assets/screenshots/left-860w.jxl 860w, /assets/screenshots/left-1720w.jxl 1720w"
+            sizes="(max-width: 500px) 85vw, 40vw"
+          />
+          <source
+            type="image/webp"
+            srcset="/assets/screenshots/left-430w.webp 430w, /assets/screenshots/left-860w.webp 860w, /assets/screenshots/left-1720w.webp 1720w"
+            sizes="(max-width: 500px) 85vw, 40vw"
+          />
+          <img
+            loading="lazy"
+            style={{"background-color": "#34282e"}}
+            width="860"
+            height="630"
+            alt={t("homePage.screenshots.leftAlt")}
+            src="/assets/screenshots/left-860w-fallback.jpg"
+          />
+        </picture>
+      </div>
+    </div>
+  );
+}
+
 function FeatureList() {
   const [t] = useTransContext();
   return (