wip: almost there

pages/deploy-previews.js

@@ -31,6 +31,11 @@ export default function FunctionsPage() {
             changes!
           </li>
         </ol>
+        <p>
+          <a href="https://docs.netlify.com/site-deploys/deploy-previews/">
+            Learn about deploy previews in the Netlify docs.
+          </a>
+        </p>
       </main>
     </Layout>
   );

pages/functions.js

@@ -85,6 +85,11 @@ run \`netlify dev\` in your CLI.`,
         ) : (
           <ExerciseStart handleClick={handleClick} output={output} />
         )}
+        <p>
+          <a href="https://docs.netlify.com/functions/configure-and-deploy/">
+            Learn about serverless functions in the Netlify docs.
+          </a>
+        </p>
       </main>
     </Layout>
   );

pages/index.js

@@ -31,7 +31,7 @@ export default function Home() {
             one-click operation to roll back to a previous version of the site.{' '}
             <strong>Instant disaster recovery!</strong>
           </p>
-          <Link href="#instant-rollbacks">
+          <Link href="/instant-rollbacks">
             <a className={styles.button}>
               Learn more{' '}
               <span className="sr-only">about Instant Rollbacks</span>
@@ -66,7 +66,7 @@ export default function Home() {
               events.
             </strong>
           </p>
-          <Link href="#netlify-forms">
+          <Link href="/netlify-forms">
             <a className={styles.button}>
               Learn more <span className="sr-only">about Netlify Forms</span>
             </a>

pages/instant-rollbacks.js

@@ -0,0 +1,29 @@
+import Image from 'next/image';
+import Layout from '../components/layout';
+import styles from '../styles/instant-rollbacks.module.css';
+
+export default function FunctionsPage() {
+  return (
+    <Layout
+      title="Instant Rollbacks"
+      description="Make changes without fear of pager duty! Roll back to a previous deploy instantly with one click."
+    >
+      <main>
+        <div className={styles.wrapper}>
+          <Image
+            src="/images/corgi.jpg"
+            alt="a corgi at a laptop looking scared. caption says “when you realize you made that change in production”"
+            height={400}
+            width={400}
+          />
+
+          <p>
+            <a href="https://docs.netlify.com/site-deploys/manage-deploys/#rollbacks">
+              Learn about rollbacks in the Netlify docs.
+            </a>
+          </p>
+        </div>
+      </main>
+    </Layout>
+  );
+}

pages/netlify-forms.js

@@ -0,0 +1,35 @@
+import Layout from '../components/layout';
+import styles from '../styles/netlify-forms.module.css';
+
+export default function FunctionsPage() {
+  return (
+    <Layout
+      title="Netlify Forms"
+      description="Turn any HTML form into a functional form that can receive submissions with a single line of code."
+    >
+      <main>
+        <h2 className={styles.heading}>Make this form functional</h2>
+
+        <form className={styles.form} name="contact" data-netlify>
+          <label htmlFor="name">Name</label>
+          <input type="text" id="name" name="name" />
+
+          <label htmlFor="email">Email</label>
+          <input type="email" id="email" name="email" />
+
+          <label htmlFor="message">Message</label>
+          <textarea name="message"></textarea>
+
+          <button type="submit" className={styles.button}>
+            Send
+          </button>
+        </form>
+        <p className={styles.docs}>
+          <a href="https://docs.netlify.com/forms/setup/">
+            Learn about Netlify Forms in the docs.
+          </a>
+        </p>
+      </main>
+    </Layout>
+  );
+}

styles/functions.module.css

@@ -29,6 +29,7 @@
   display: inline-block;
   font-size: 1rem;
   font-weight: 600;
+  margin-bottom: 1rem;
   margin-top: auto;
   padding: 0.5rem 1rem;
   text-decoration: none;

styles/instant-rollbacks.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  display: block;
+  text-align: center;
+}

styles/netlify-forms.module.css

@@ -0,0 +1,52 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  width: 35ch;
+}
+
+.form label {
+  color: var(--heading);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  margin-top: 1rem;
+  text-transform: uppercase;
+}
+
+.form label:first-of-type {
+  margin-top: 0;
+}
+
+.form input,
+.form textarea {
+  color: var(--text);
+  font-family: inherit;
+  font-size: 1rem;
+  margin-top: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.form textarea {
+  height: 100px;
+}
+
+.button {
+  background: var(--primary);
+  border: 0;
+  border-radius: 4px;
+  color: var(--button);
+  display: inline-block;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  width: max-content;
+}
+
+.heading,
+.docs {
+  text-align: center;
+}