ui(resources): tweak order of information on language home

src/components/ResourcesHomeContent/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC, HTMLAttributes } from "react"
+import { Footer } from "../Footer"
+import { Markdown } from "../Markdown"
+import { ResourcesList } from "../ResourcesList"
+import * as SC from "./styles"
+
+interface IResourcesHomeContent extends HTMLAttributes<HTMLDivElement> {
+  language: string
+  html: any
+}
+
+export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
+  return (
+    <>
+      <SC.Title>Resources</SC.Title>
+      <SC.Intro>
+        Written by and for TPH members, short introduction topics to commonly
+        answered questions.
+      </SC.Intro>
+      <ResourcesList relativeDirectory={props.language} />
+      <SC.Title>Extra resources</SC.Title>
+      <Markdown content={props.html} />
+      <Footer />
+    </>
+  )
+}

src/components/ResourcesHomeContent/styles.tsx

@@ -0,0 +1,15 @@
+import styled from "styled-components"
+import fontFamily from "../../design/typography"
+
+export const ResourcesHomeContentWrapper = styled.div``
+
+export const Title = styled.h2`
+  font-size: 24px;
+  font-family: ${fontFamily.header};
+`
+
+export const Intro = styled.p`
+  font-size: 16px;
+  font-weight: 700;
+  font-family: ${fontFamily.header};
+`