From 2358c1cf25d7d7a78a4619128867b25d47abc125 Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Fri, 14 Jan 2022 20:17:24 +0100
Subject: [PATCH] Some body for strimertul page

---
 frontend/src/ui/pages/Strimertul.tsx | 64 ++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/frontend/src/ui/pages/Strimertul.tsx b/frontend/src/ui/pages/Strimertul.tsx
index 769fa2a..ee9a2b4 100644
--- a/frontend/src/ui/pages/Strimertul.tsx
+++ b/frontend/src/ui/pages/Strimertul.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { keyframes } from '@stitches/react';
+import { Trans, useTranslation } from 'react-i18next';
 import { APPNAME, PageContainer, PageHeader, styled } from '../theme';
 
 // @ts-expect-error Asset import
 import logo from '../../assets/icon-logo.svg';
+import { GitHubLogoIcon, TwitterLogoIcon } from '@radix-ui/react-icons';
 
 const gradientAnimation = keyframes({
   '0%': {
@@ -50,7 +52,32 @@ const LogoName = styled('h1', {
   paddingBottom: '0.5rem',
 });
 
+const Section = styled('section', {});
+const SectionHeader = styled('h2', {});
+const SectionParagraph = styled('p', {
+  lineHeight: '1.5',
+  paddingBottom: '1rem',
+});
+const ChannelList = styled('ul', { listStyle: 'none', padding: 0, margin: 0 });
+const Channel = styled('li', {
+  marginBottom: '1rem',
+  fontSize: '1.5rem',
+});
+const ChannelLink = styled('a', {
+  textDecoration: 'none',
+  color: 'inherit',
+  display: 'inline-flex',
+  flexDirection: 'row',
+  gap: '0.5rem',
+  alignItems: 'center',
+  '&:hover': {
+    textDecoration: 'underline',
+    color: 'inherit',
+  },
+});
+
 export default function StrimertulPage(): React.ReactElement {
+  const { t } = useTranslation();
   return (
     <PageContainer>
       <PageHeader
@@ -67,6 +94,43 @@ export default function StrimertulPage(): React.ReactElement {
         <LogoPic />
         <LogoName>{APPNAME}</LogoName>
       </PageHeader>
+      <Section>
+        <SectionHeader>{t('pages.strimertul.need-help')}</SectionHeader>
+        <SectionParagraph>
+          {t('pages.strimertul.need-help-p1', { APPNAME })}
+        </SectionParagraph>
+        <ChannelList>
+          <Channel>
+            <ChannelLink href="https://github.com/strimertul/strimertul/issues">
+              <GitHubLogoIcon width={32} height={32} />
+              github.com/strimertul/strimertul/issues
+            </ChannelLink>
+          </Channel>
+          <Channel>
+            <ChannelLink href="https://twitter.com/ashkeelvt">
+              <TwitterLogoIcon width={32} height={32} />
+              twitter.com/AshKeelVT
+            </ChannelLink>
+          </Channel>
+        </ChannelList>
+      </Section>
+      <Section>
+        <SectionHeader>{t('pages.strimertul.license-header')}</SectionHeader>
+        <SectionParagraph>
+          <Trans
+            t={t}
+            i18nKey="pages.strimertul.license-notice-strimertul"
+            values={{ APPNAME }}
+            components={{
+              license: (
+                <a href="https://github.com/strimertul/strimertul/blob/master/LICENSE">
+                  GNU Affero General Public License v3.0
+                </a>
+              ),
+            }}
+          />
+        </SectionParagraph>
+      </Section>
     </PageContainer>
   );
 }