Add subscribe form

client/layouts/Footer.tsx

@@ -1,24 +1,23 @@
 import React from 'react';
 
+import SubscribeForm from './SubscribeForm';
+
 const Footer: React.FC<{}> = () => {
     return (
         <div
             style={{
                 border: '1px solid rgba(0, 0, 0, 0.2)',
-                // borderBottomLeftRadius: '8px',
-                // borderBottomRightRadius: '8px',
                 display: 'flex',
             }}
         >
             <div
                 style={{
-                    alignItems: 'center',
                     borderRight: '1px solid rgba(0, 0, 0, 0.2)',
                     display: 'flex',
                     flex: 1,
                     fontSize: '16px',
                     lineHeight: 1.5,
-                    padding: '32px',
+                    padding: '24px',
                 }}
             >
                 <ul
@@ -43,7 +42,7 @@ const Footer: React.FC<{}> = () => {
                         </h3>
                         &#123;
                     </li>
-                    <ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
+                    <ul style={{ listStyleType: 'none', margin: 0, padding: '0 24px' }}>
                         <li>
                             css-layout,
                             <span style={{ color: 'rgba(0, 0, 0, 0.3)', marginLeft: '16px' }}>
@@ -86,12 +85,10 @@ const Footer: React.FC<{}> = () => {
             </div>
             <div
                 style={{
-                    alignItems: 'center',
-                    display: 'flex',
                     flex: 1,
                     fontSize: '16px',
                     lineHeight: 1.5,
-                    padding: '32px',
+                    padding: '24px',
                 }}
             >
                 <ul
@@ -99,7 +96,7 @@ const Footer: React.FC<{}> = () => {
                         fontWeight: 500,
                         lineHeight: 1.5,
                         listStyleType: 'none',
-                        margin: 0,
+                        margin: '0 0 16px 0',
                         padding: 0,
                         width: '100%',
                     }}
@@ -117,7 +114,7 @@ const Footer: React.FC<{}> = () => {
                         </h3>
                         &#123;
                     </li>
-                    <ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
+                    <ul style={{ listStyleType: 'none', margin: 0, padding: '0 24px' }}>
                         <li style={{ alignItems: 'center', display: 'flex' }}>
                             <div>twitter:</div>
                             <a
@@ -154,6 +151,12 @@ const Footer: React.FC<{}> = () => {
                     </ul>
                     <li>&#125;</li>
                 </ul>
+                <div>
+                    <div style={{ lineHeight: 1.5, marginBottom: '12px' }}>
+                        Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!
+                    </div>
+                    <SubscribeForm />
+                </div>
             </div>
         </div>
     );

client/layouts/Layout.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 
-import SampleCode from '../components/SampleCode';
 import Footer from './Footer';
 
 const Layout: React.FC<{}> = ({ children }) => {
@@ -12,70 +11,6 @@ const Layout: React.FC<{}> = ({ children }) => {
         <div style={{ margin: '0 auto 64px auto', maxWidth: '1024px' }}>
             {children}
             <Footer />
-            <div
-                style={{
-                    backgroundColor: '#282828',
-                    display: 'flex',
-                }}
-            >
-                <div
-                    style={{
-                        alignItems: 'flex-end',
-                        color: '#FFF',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        fontWeight: 700,
-                        justifyContent: 'center',
-                        padding: '32px',
-                        textTransform: 'uppercase',
-                    }}
-                >
-                    <div style={{ fontSize: '48px' }}>How</div>
-                    <div style={{ fontSize: '70px' }}>it's</div>
-                    <div style={{ fontSize: '42px' }}>made</div>
-                </div>
-                <div style={{ flex: 1, padding: '32px' }}>
-                    <SampleCode
-                        lang='javascript'
-                        code={`
-this
-    .madeWith([react,typescript])
-    .then((r) => lint(r))                           /* tslint */
-    .then((r) => lazyLoad(r))                       /* @loadable/component */
-    .then((r) => optimizeAndBundle(r))              /* webpack */
-    .then((r) => exportHtml(r))                     /* react-snap */
-    .then((r) => deploy(r))                         /* Netlify */
-    .then((r) => {
-        expect(r).is(scalableCode);
-        expect(r).is(superFastWebsite);
-        expect(r).is(seoFriendly);
-    })
-`}
-                    />
-                    <div
-                        className="hljs"
-                        style={{
-                            lineHeight: 1.5,
-                            listStyleType: 'none',
-                            marginTop: '-16px',
-                            paddingLeft: '40px',
-                        }}
-                    >
-                        .finally(
-                        <span className="hljs-function"><span className="hljs-params">()</span> => </span>
-                        &#123;
-                        <span className="hljs-comment">
-                            <a
-                                href="https://github.com/phuoc-ng/csslayout"
-                                style={{ color: 'currentColor', textDecoration: 'none' }}
-                            >
-                                &#47;* Give me 1 Github star here */
-                            </a>
-                        </span>
-                        }) 🎉
-                    </div>
-                </div>
-            </div>
         </div>
     );
 };

client/layouts/SubscribeForm.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+const SubscribeForm: React.FC<{}> = () => {
+    return (
+        <form
+            action="https://csslayout.us4.list-manage.com/subscribe/post?u=77d0bf6497a2cdbb36f08587c&amp;id=e8a912009a"
+            method="post"
+            name="mc-embedded-subscribe-form"
+            target="_blank"
+            noValidate={true}
+            style={{
+                margin: 0,
+            }}
+        >
+            <input
+                type="email"
+                name="EMAIL"
+                placeholder="Email address"
+                required={true}
+                style={{
+                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                    borderBottomLeftRadius: '4px',
+                    borderTopLeftRadius: '4px',
+                    padding: '8px',
+                    width: '200px',
+                }}
+            />
+            <div style={{ left: '-5000px', position: 'absolute' }} aria-hidden="true">
+                <input type="text" name="b_77d0bf6497a2cdbb36f08587c_e8a912009a" tabIndex={-1} />
+            </div>
+            <button
+                type="submit"
+                name="subscribe"
+                style={{
+                    backgroundColor: '#00449E',
+                    borderBottomRightRadius: '4px',
+                    borderColor: 'transparent',
+                    borderTopRightRadius: '4px',
+                    color: '#FFF',
+                    padding: '8px 16px',
+                }}
+            >
+                Subscribe
+            </button>
+        </form>
+    );
+};
+
+export default SubscribeForm;