From 826294fd84ff16457167c19cf8b9ec3a172c08be Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Sun, 24 May 2020 23:50:47 -0400
Subject: [PATCH] ui(resources): tweak order of information on language home

---
 src/components/ResourcesHomeContent/index.tsx | 26 +++++++++++++++++++
 .../ResourcesHomeContent/styles.tsx           | 15 +++++++++++
 src/templates/languageHome.tsx                | 10 ++-----
 3 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ResourcesHomeContent/index.tsx
 create mode 100644 src/components/ResourcesHomeContent/styles.tsx

diff --git a/src/components/ResourcesHomeContent/index.tsx b/src/components/ResourcesHomeContent/index.tsx
new file mode 100644
index 0000000..8940de5
--- /dev/null
+++ b/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 />
+    </>
+  )
+}
diff --git a/src/components/ResourcesHomeContent/styles.tsx b/src/components/ResourcesHomeContent/styles.tsx
new file mode 100644
index 0000000..ec26efd
--- /dev/null
+++ b/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};
+`
diff --git a/src/templates/languageHome.tsx b/src/templates/languageHome.tsx
index 584d2a1..3d9f7b4 100644
--- a/src/templates/languageHome.tsx
+++ b/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 { ResourcesList } from "../components/ResourcesList"
+import { ResourcesHomeContent } from "../components/ResourcesHomeContent"
 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={
-          <>
-            <Markdown content={html} />
-            <ResourcesList relativeDirectory={pageContext.language} />
-            <Footer />
-          </>
+          <ResourcesHomeContent language={pageContext.language} html={html} />
         }
         recommendedReading={frontmatter.recommended_reading}
         externalResources={frontmatter.external_resources}