Merge pull request #67 from phuoc-ng/subscribe-form

Add subscribe form

client/components/RelatedPatterns.tsx

@@ -13,7 +13,7 @@ const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
         <section>
             <Heading title="Related patterns" />
 
-            <div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
+            <div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '24px' }}>
                 {
                     patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
                 }

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;

client/pages/HomePage.tsx

@@ -7,6 +7,7 @@ import CoverCard from '../components/CoverCard';
 import Pattern from '../constants/Pattern';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from '../layouts/Layout';
+import MadeOf from './MadeOf';
 
 const HomePage = () => {
     useDocumentTitle('CSS Layout');
@@ -16,7 +17,7 @@ const HomePage = () => {
             <div
                 style={{
                     border: '1px solid rgba(0, 0, 0, 0.2)',
-                    borderBottomColor: 'transparent',
+                    borderBottom: 'none',
                     marginTop: '64px',
                 }}
             >
@@ -142,7 +143,7 @@ const HomePage = () => {
                     </div>
                 </div>
 
-                <section style={{ height: '900px', overflow: 'hidden', paddingBottom: '32px', position: 'relative' }}>
+                <section style={{ height: '1000px', overflow: 'hidden', position: 'relative' }}>
                     <div
                         style={{
                             alignItems: 'center',
@@ -240,6 +241,8 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.Wizard} />
                     </div>
                 </section>
+
+                <MadeOf />
             </div>
         </Layout>
     );

client/pages/MadeOf.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import SampleCode from '../components/SampleCode';
+
+const MadeOf: React.FC<{}> = () => {
+    return (
+        <div
+            style={{
+                backgroundColor: '#282828',
+                padding: '24px',
+            }}
+        >
+            <div
+                style={{
+                    color: '#FFF',
+                    fontSize: '48px',
+                    fontWeight: 600,
+                    textAlign: 'center',
+                    textTransform: 'uppercase',
+                }}
+            >
+                How it's made
+            </div>
+            <div>
+                <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>
+    );
+};
+
+export default MadeOf;

client/pages/home.css

@@ -1,5 +1,5 @@
 .home-cards {
-    animation: slide 60s linear infinite;
+    animation: slide 40s linear infinite;
 }
 
 @keyframes slide{
@@ -7,6 +7,6 @@
         transform: translate3d(0, 0, 0);
     }
     100% {
-        transform: translate3d(0, -600px, 0);
+        transform: translate3d(0, -500px, 0);
     }
 }