Added community card to Dashboard

app/styles/layouts/dashboard.css

@@ -210,7 +210,7 @@
 }
 
 .gh-dashboard-box .content .read-time {
-    font-size: 1.3rem;
+    font-size: 1.2rem;
     color: var(--midgrey);
 }
 
@@ -391,6 +391,45 @@
     transform-origin: top right;
 }
 
+.gh-dashboard-join-community {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    border-radius: 3px;
+    padding: 54px;
+    min-height: 440px;
+    background-size: cover;
+    background-position: center;
+    color: #fff;
+}
+
+.gh-dashboard-join-community h2 {
+    color: #fff;
+    font-size: 2.6rem;
+    letter-spacing: -0.2px;
+    margin-bottom: 16px;
+}
+
+.gh-dashboard-join-community p {
+    font-size: 1.8rem;
+    opacity: 0.75;
+    max-width: 480px;
+    line-height: 1.5em;
+    letter-spacing: -0.2px;
+}
+
+.gh-dashboard-join-community a.footer-link {
+    align-self: center;
+    margin-bottom: -32px;
+    font-size: 1.2rem;
+    color: #fff;
+}
+
+.gh-dashboard-join-community a:hover {
+    opacity: 0.8;
+}
+
 /* Chart.js requires relative width to be in vw units to make responsive re-rendering work */
 @media (max-width: 1600px) {
     .gh-dashboard-chart-box.small {
@@ -798,6 +837,14 @@
         padding-top: 0;
         grid-row: 2 / 3;
     }
+
+    .gh-dashboard-join-community {
+        padding: 44px 32px;
+    }
+
+    .gh-dashboard-join-community .footer-link {
+        margin-bottom: -24px;
+    }
 }
 
 @media (max-width: 680px) {

app/templates/dashboard.hbs

@@ -190,8 +190,8 @@
                 </div>
             </div> --}}
 
-            <a class="gh-dashboard-container" href="https://ghost.org/blog/find-your-niche-creator-economy/" target="_blank" rel="noopener noreferrer">
-                <div class="gh-dashboard-box blogpost thebrowser">
+            <a class="gh-dashboard-container reverse" href="https://ghost.org/blog/find-your-niche-creator-economy/" target="_blank" rel="noopener noreferrer">
+                <div class="gh-dashboard-box blogpost">
                     <div class="thumbnail" style="background-image: url(assets/img/dashboard/find-niche.jpg);"></div>
                     <div class="content">
                         <h2>The unexpected (but proven) way to find your niche in the creator economy</h2>
@@ -201,6 +201,15 @@
                     </div>
                 </div>
             </a>
+
+            <div class="gh-dashboard-join-community" style="background-image: url(assets/img/dashboard/join-community.jpg)">
+                <div>
+                    <h2>Join the Ghost creator community.</h2>
+                    <p>Meet other people building both free &amp; paid publications with Ghost. Talk strategy, get advice, or just hang out.</p>
+                    <a class="gh-btn gh-btn-white" href="https://community.ghost.org" target="_blank" rel="noopener noreferrer"><span>Share the journey</span></a>
+                </div>
+                <a class="footer-link" href="https://community.ghost.org" target="_blank" rel="noopener noreferrer">community.ghost.org</a>
+            </div>
         </section>
 
         <section class="gh-dashboard-area members-activity">
@@ -292,7 +301,7 @@
                     {{/each}}
                 </div>
                 <div class="footer">
-                    <a href="https://ghost.org/changelog" target="_blank" rel="noopener noreferrer">See all updates</a>
+                    <a class="green" href="https://ghost.org/changelog" target="_blank" rel="noopener noreferrer">See all updates</a>
                 </div>
             </div>
             {{/unless}}