init

src/components/footer/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Link } from 'gatsby'
+
+// import dcLogo from "../../images/dclogo.png";
+
+import { Container, Section } from '../shared'
+import { SolidButton } from '../shared/styledComponents'
+import { StyledHeading, StyledDesc, InputStyled, StyledAnchor } from './style'
+
+const anchorStyles = {
+  color: '#888'
+}
+
+const Footer = () => (
+  <Section bottomArrow={false}>
+    <div className="row">
+      <div className="col-md-3 me-md-5">
+        <StyledHeading>Data Controller</StyledHeading>
+        <StyledDesc>
+          Data Controller is a product of 4GL Apps, a brand of Bowe IO Ltd,
+          which is a UK company with a focus on SAS Software,{' '}
+          <StyledAnchor href="https://sasapps.io">Apps</StyledAnchor>, and
+          Services.
+        </StyledDesc>
+      </div>
+      <div className="col-md-3">
+        <StyledHeading>Newsletter</StyledHeading>
+        <form
+          className="kwes-form"
+          method="POST"
+          action="https://kwes.io/api/foreign/forms/mxKuyK4lxZWnG2WNH3ga"
+        >
+          <div className="mb-3">
+            <InputStyled
+              type="email"
+              name="email"
+              className="form-control"
+              aria-describedby="emailHelp"
+              placeholder="Email Address*"
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <InputStyled
+              type="text"
+              name="name"
+              className="form-control"
+              placeholder="First Name"
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <InputStyled
+              type="text"
+              name="lastName"
+              className="form-control"
+              placeholder="Last Name"
+            />
+          </div>
+          <SolidButton>Subscribe</SolidButton>
+        </form>
+      </div>
+      <div className="col-md-3">
+        <StyledHeading>Other Resources</StyledHeading>
+        <StyledDesc>
+          Visit our educational and fun SAS® software quiz{' '}
+          <StyledAnchor href="https://sasensei.com">Sasensei</StyledAnchor> and
+          test your knowledge of SAS topics.
+        </StyledDesc>
+      </div>
+    </div>
+  </Section>
+)
+
+export default Footer

src/components/footer/style.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export const StyledHeading = styled.h6`
+  margin-bottom: 0.8rem;
+  text-transform: uppercase;
+  color: #888;
+`
+export const StyledDesc = styled.p`
+  color: #aaaaaa;
+  font-size: 0.9rem;
+`
+
+export const InputStyled = styled.input`
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 0.9rem;
+  &:focus {
+    color: inherit;
+    background: transparent;
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+`
+
+const Anchor = styled.a`
+  color: #d4d4d4;
+  text-decoration: none;
+  &:hover {
+    color: white;
+  }
+`
+
+export const StyledAnchor = ({ children, href }) => (
+  <Anchor href={href} target="_blank" rel="noopener">
+    {children}
+  </Anchor>
+)