Build About Us Component

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "tabWidth": 4
+}

src/components/AboutUs.tsx

@@ -1,10 +1,104 @@
 import React from "react";
-// import { Link } from "gatsby";
+import { Link } from "gatsby";
+import styled from 'styled-components'
+
+export const AboutContainer = styled.div`
+@media (min-width: 576px) {
+  margin: 2%
+}
+`;
+export const OrganizerCard = styled.div`
+display:flex;
+align-items:center;
+justify-content:space-around;
+`;
+export const OrganizerList = styled.ul`
+list-style: none;
+margin: 0;
+padding: 0;
+`;
+
+const organizers = [
+  {
+    name: "1",
+    title: "title",
+    occupation: "occupation",
+    summary: "summary",
+    twitterHandle: "@handle",
+    twitterUrl: "",
+    photoUrl: ""
+  },
+  {
+    name: "2",
+    title: "title",
+    occupation: "occupation",
+    summary: "summary",
+    twitterHandle: "@handle",
+    twitterUrl: "",
+    photoUrl: ""
+  },
+  {
+    name: "3",
+    title: "title",
+    occupation: "occupation",
+    summary: "summary",
+    twitterHandle: "@handle",
+    twitterUrl: "",
+    photoUrl: ""
+  },
+  {
+    name: "4",
+    title: "title",
+    occupation: "occupation",
+    summary: "summary",
+    twitterHandle: "@handle",
+    twitterUrl: "",
+    photoUrl: ""
+  }
+]
+
+const listOrganizers = (organizers) => {
+  return organizers.map((organizer) => {
+    let { name, title, occupation, summary } = organizer;
+    console.log(name, title)
+    return <li>
+      <OrganizerCard>
+        <div className="organizer-photo">photo</div>
+        <div className="organizer-copy">
+          <div className="name">
+            <p>{name}</p>
+          </div>
+          <div className="title">
+            <p>{title}</p>
+          </div>
+          <div className="occupation">
+            <p>{occupation}</p>
+          </div>
+          <div className="summary">
+            <p>{summary}</p>
+          </div>
+        </div>
+        <div className="twitter-icon">tweet</div>
+      </OrganizerCard>
+    </li>
+  })
+}
 
 export default function AboutUs() {
   return (
-    <div className="about-us">
-      <h1>I am About Us</h1>
-    </div>
+    <AboutContainer>
+      <div className="about-copy"></div>
+      <h2>What we're about</h2>
+      <p>TypeScript is a popular programming language which adds static types to JavaScript. It can be used across the whole JavaScript ecosystem, and works well with tools such as React, Angular and NodeJS. TypeScript is JavaScript that scales.</p>
+      <p>Come join us to learn about TypeScript, improve your understanding of the language, or share what you've learned. All levels of skill and experience with TypeScript are welcome.</p>
+      <p>Chat with us in the #ts-nyc channel of the <a href="https://discord.gg/ZjvtBsh" target="_blank">TypeScript Community Discord</a> (https://discord.gg/ZjvtBsh).</p>
+      <p>Code of conduct: We follow the JSConf <Link to="/code-of-conduct">code of conduct.</Link></p>
+      <div className="oranizer-container">
+        <h3>Organizers</h3>
+        <OrganizerList>
+          {listOrganizers(organizers)}
+        </OrganizerList>
+      </div>
+    </AboutContainer>
   )
 }

src/components/Announcement.tsx

@@ -8,6 +8,9 @@ flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 100%
+@media (min-width: 576px) {
+  max-width:400px;
+}
 `;
 
 export default function Announcement() {

src/components/Footer.tsx

@@ -13,8 +13,7 @@ export const FooterContent = styled.div`
 border: 1px solid blue;
 width: 100%;
 @media (min-width: 576px) {
-  width:100%;
-  max-width:300px;
+  max-width:400px;
 }
 `;
 

src/pages/about.tsx

@@ -12,16 +12,11 @@ export const PageContainer = styled.div`
     justify-content: center;
     align-items: center;
     `;
-
-    const title = "frank"
-    const content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-
-    const sendAboutUs= <AboutUs/>
 
 export default function aboutUsPage() {
     return (
     <PageContainer>
-        <Layout aboutUs={sendAboutUs}/>
+        <Layout aboutUs={<AboutUs/>}/>
     </PageContainer>
     )
 }

src/pages/code-of-conduct.tsx

@@ -12,16 +12,11 @@ export const PageContainer = styled.div`
     justify-content: center;
     align-items: center;
     `;
-
-    const title = "frank"
-    const content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-
-    const sendCodeConduct = <CodeConduct/>
 
 export default function codeConduct() {
     return (
     <PageContainer>
-        <Layout codeConduct={sendCodeConduct}/>
+        <Layout codeConduct={<CodeConduct/>}/>
     </PageContainer>
     )
 }

src/pages/index.tsx

@@ -13,12 +13,10 @@ export const PageContainer = styled.div`
     align-items: center;
     `;
 
-    const sendHomeNav = <HomeNav/>
-
 export default function IndexPage() {
     return (
         <PageContainer>
-            <Layout homeNav={sendHomeNav}></Layout>
+            <Layout homeNav={<HomeNav/>}></Layout>
         </PageContainer>
     )
 }