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};
+`

src/templates/languageHome.tsx

@@ -1,11 +1,9 @@
 import { graphql } from "gatsby"
 import React, { FC, Fragment } from "react"
 import { Header } from "../components/Header"
-import { Markdown } from "../components/Markdown"
+import { ResourcesHomeContent } from "../components/ResourcesHomeContent"
-import { ResourcesList } from "../components/ResourcesList"
 import { SEO } from "../components/SEO"
 import { PageContent } from "../components/PageContent"
-import { Footer } from "../components/Footer"
 import useSidebar from "../hooks/useSidebar"
 
 // @todo maybe find alternative type for data
@@ -36,11 +34,7 @@ const LanguageHome: FC<any> = ({ data, pageContext }) => {
       />
       <PageContent
         content={
-          <>
+          <ResourcesHomeContent language={pageContext.language} html={html} />
-            <Markdown content={html} />
-            <ResourcesList relativeDirectory={pageContext.language} />
-            <Footer />
-          </>
         }
         recommendedReading={frontmatter.recommended_reading}
         externalResources={frontmatter.external_resources}