Update to the page content header

web/components/common/ContentHeader/ContentHeader.module.scss

@@ -0,0 +1,57 @@
+.root {
+  position: relative;
+  display: grid;
+}
+
+.buttonsLogoTitleSection {
+  // margin-left: 1.5vw;
+  // margin-right: 1.5vw;
+}
+
+.row {
+  margin-bottom: 7px;
+}
+
+.logoTitleSection {
+  display: flex;
+  @media (max-width: 768px) {
+    flex-direction: column;
+    .logo {
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.titleSection {
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    font-size: 32px;
+    font-weight: bold;
+    color: black;
+    text-transform: uppercase;
+    line-height: 30px;
+  }
+
+  .subtitle {
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--theme-text-secondary);
+  }
+}
+
+.tagList {
+  font-family: var(--theme-text-display-font-family);
+  color: var(--theme-text-primary);
+
+  span {
+    display: inline-block;
+    margin-right: 8px;
+    font-size: 14px;
+    font-weight: 300;
+  }
+}

web/components/common/ContentHeader/ContentHeader.tsx

@@ -0,0 +1,36 @@
+import cn from 'classnames';
+
+import { ServerLogo } from '../../ui';
+import SocialLinks from '../../ui/SocialLinks/SocialLinks';
+import { SocialLink } from '../../../interfaces/social-link.model';
+import s from './ContentHeader.module.scss';
+
+interface Props {
+  name: string;
+  title: string;
+  summary: string;
+  tags: string[];
+  links: SocialLink[];
+  logo: string;
+}
+export default function ContentHeader({ name, title, summary, logo, tags, links }: Props) {
+  return (
+    <div className={s.root}>
+      <div className={s.logoTitleSection}>
+        <div className={s.logo}>
+          <ServerLogo src={logo} />
+        </div>
+        <div className={s.titleSection}>
+          <div className={cn(s.title, s.row)}>{name}</div>
+          <div className={cn(s.subtitle, s.row)}>{title || summary}</div>
+          <div className={cn(s.tagList, s.row)}>
+            {tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}
+          </div>
+          <div className={cn(s.socialLinks, s.row)}>
+            <SocialLinks links={links} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

web/components/common/ContentHeader/index.ts

@@ -0,0 +1 @@
+export { default } from './ContentHeader';