Merge pull request #1 from anthony-zhou/assorted-updates-zhou

Update contact form, footer, intro section, and links

Author: anthony-zhou

src/assets/illustrations/footer.svg

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 export const Input = styled.input`
   width: 100%;
   box-sizing: border-box;
-  border: 2px solid #6c63ff;
+  // border: 2px solid #6c63ff;
+  border: 2px solid #0074d9;
   padding: 0.8rem 1rem;
   border-radius: 7px;
   margin-bottom: 0.5rem;

src/assets/images/meetup-logo.svg

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const SectionHeading = styled.h1`
+  font-size: 4em;
+  text-align: center;
+`;

src/assets/images/slack-logo.png

@@ -3,4 +3,5 @@ export * from './Container';
 export * from './Button';
 export * from './Card';
 export * from './Input';
-export * from './SEO';
+export * from './SEO';
+export * from './SectionHeading';

src/components/common/Input/index.js

@@ -10,11 +10,8 @@ export const About = () => (
       <Details>
         <h1>Who We Are</h1>
         <p>
-        Our mission is to harness the digital era to make government work for the people, by the people! Our focus is on making the biggest impact on the needs of our community and advocating for open government and open data.
+        Our mission is to harness the digital era to make government work for the people, by the people! We are here to serve the needs of our community and advocate for open government and open data.
         </p>
-        {/* <Button as={AnchorLink} href="#contact">
-          Hire me
-        </Button> */}
       </Details>
     </SkillsWrapper>
   </Wrapper>

src/components/common/SectionHeading/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+import { Container, Card, SectionHeading } from 'components/common';
+import { Wrapper, Grid, Item, Content } from './styles';
+import jg from 'assets/images/jgonzales_from_unsplash.jpg';
+
+export function Events() {
+    return (
+        <Wrapper as={Container} id="events">
+            <SectionHeading>Events</SectionHeading>
+
+        </Wrapper>
+    )
+}

src/components/common/index.js

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  padding: 2rem 0;
+`;
+
+export const Grid = styled.div`
+  display: grid;
+  align-items: center;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 8fr;
+  gap: 1.2rem 1.2rem;
+
+  @media (max-width: 960px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 680px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+export const Item = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
+
+  h4 {
+    color: #212121;
+  }
+
+  p {
+    color: #707070;
+  }
+`;
+
+export const Content = styled.div`
+  padding: 1rem 0;
+`;
+
+export const Stats = styled.div`
+  display: flex;
+  align-items: center;
+
+  div {
+    display: flex;
+    &:first-child {
+      margin-right: 0.5rem;
+    }
+
+    img {
+      margin: 0;
+    }
+
+    span {
+      color: #000;
+      margin-left: 0.5rem;
+    }
+  }
+`;

src/components/landing/About/index.jsx

@@ -11,8 +11,9 @@ export const Intro = () => (
     <Header />
     <IntroWrapper as={Container}>
       <Details>
-        <h1>We are Code for Dallas</h1>
-        <h4>A volunteer-led civic technology organization that brings together developers, designers, data enthusiasts and city staff.</h4>
+        <h1>At the intersection of technology and government.</h1>
+        <h4>We're a nonprofit with the mission to unite developers, designers, and city staff for the good of all.</h4>
+        {/* <h4>We're volunteer-led civic technology organization that brings together developers, designers, data enthusiasts and city staff.</h4> */}
         <Button as={AnchorLink} href="#about">
           Learn more
         </Button>