Cleanup page layout

 - Add help to home page
 - Fix up graphics used my manifest and html meta

src/App.css

@@ -38,3 +38,11 @@
 .cm-tooltip-below, .cm-tooltip {
   background-color: rgba(255, 254, 218, 0.95) !important;
 }
+
+.zoom-05 {
+  zoom: 0.5;
+}
+
+.zoom-066 {
+  zoom: 0.667;
+}

src/App.tsx

@@ -6,7 +6,7 @@ import "react-toastify/dist/ReactToastify.css";
 import "./App.css";
 import {Fragment, useState} from "react";
 import {BlogEditorPage} from "./pages/BlogEditorPage.tsx";
-import {NavList, Header, Title, NavMenuButton, PrimaryNav, Grid, GridContainer,} from "@trussworks/react-uswds";
+import {Header, PrimaryNav, Grid, GridContainer, Title,} from "@trussworks/react-uswds";
 import {HomePage} from "./pages/HomePage.tsx";
 import {AboutPage} from "./pages/AboutPage.tsx";
 
@@ -33,6 +33,8 @@ function App() {
   return (
     <Fragment>
       <Header basic>
+        <div className={"float-left position-absolute top-1 left-105 text-bold"}>
+          Website Content Editor</div>
         <div className="usa-nav-container">
           <PrimaryNav
             aria-label="Primary navigation"
@@ -55,7 +57,6 @@ function App() {
               id="main-content"
               role={"main"}
             >
-              <h1>Website Content Editor</h1>
               {PAGES_MAP[page]}
             </main>
           </Grid>

src/pages/AboutPage.tsx

@@ -1,4 +1,5 @@
 import {Fragment} from "react";
+import {Link} from "@trussworks/react-uswds";
 
 export const AboutPage = () => {
   return (<Fragment>
@@ -7,7 +8,8 @@ export const AboutPage = () => {
         <div className="grid-row tablet:flex-row-reverse">
           <div
             className="tablet:grid-col-8 desktop:grid-col-12 margin-bottom-9 tablet:padding-right-4 site-c-project-content usa-prose">
-            [Who knows if this is useful. Maybe link to the github]
+            See github repo for more information:
+            <Link target={"_blank"} className={"usa-link--external"} href="https://github.com/usds/website-content-editor">https://github.com/usds/website-content-editor</Link>
           </div>
         </div>
       </div>

src/pages/HomePage.tsx

@@ -3,14 +3,50 @@ import {Fragment} from "react";
 export const HomePage = () => {
   return (<Fragment>
       <p className="usa-intro">
-          The page heading communicates the main focus of the page. Make
-          your page heading descriptive and keep it succinct.
-        </p>
-        <h2 id="section-heading-h2">Section heading (h2)</h2>
+        This site is static only and <strong>all data</strong> is saved into your local browser.
+      </p>
+      <p>
+        Build website posts with fewer mistakes. The intuitive rich text editor lets you see exactly
+        how your page will look as you create it. Save your work anytime by downloading a zip file
+        containing your edits and all associated images.
+      </p>
 
-        <p>
+      <p> ➤ <strong>Click <i>Blog Edit</i> in the top nav to begin.</strong></p>
+      <h2 id="section-heading-2">Basic features</h2>
 
-        </p>
+      <img src={"./img/tutorial-1.png"} alt={"screenshot of rich editor toolbar"} className={"zoom-066"}/>
+      <p>
+        Besides the typical rich text editor buttons, there are some specialized buttons that are
+        the most handy.
+      </p>
+      <ul>
+        <li>Crabby will display the page meta information (aka "Frontmatter yaml header" in technobabel) as guided form,
+          to help
+          you avoid common mistakes.
+        </li>
+        <li>Inserting images will display them in the page and save them when you Download the results.
+          For best results, correctly size images outside before uploading and use .jpg for faster rendering.
+        </li>
+        <li>The buttons on the right toggle between Markdown and Rich Text views.</li>
+      </ul>
+
+      <p>
+        Once you are satisfied with your edits, download the markdown and all related images.
+        They are saved locally as a zip file. The file and folder names are all correctly reflected in the markdown.
+
+      </p>
+
+      <p>
+        All you have to do is move (aka drag and drop) the files/folders into thee correct location in the Finder.
+        The edits will show up in Github Desktop ready to be git committed into a branch.<br/><br/>
+        [Graphic/video showing drag-and-drop in Finder then Github Desktop Commit]
+      </p>
+      <h2 id="section-heading-3">Tips and tricks</h2>
+      <ul>
+        <li>Paste in rich text directly into the editor and let it reformat it as markdown. It can include images.</li>
+        <li>Open an existing post’s markdown file.</li>
+        <li>Paste in existing MD into the Markdown editor view including the yaml header.</li>
+      </ul>
 
     </Fragment>
   );

src/types/commontypes.ts

@@ -83,7 +83,7 @@ export const STARTER_BLOG_FRONTMATTER_FIELDS: BlogFrontMatterFields = {
   carousel_title: "New news and blog page",
   carousel_summary: `This is a blank news-and-blog page template. Click the crab icon to edit metadata. 
   Enter new content below this header preview`,
-  carousel_image: "https://usds.github.io/website-content-editor/icon-512x512.png",
+  carousel_image: "https://usds.github.io/website-content-editor/img/template-carousel.jpg",
   carousel_image_alt_text: "Test image",
   carousel_show: "false",
   tags: [],