dashboard: add projects banner (codesandbox#6813)

Author: danilowoz

packages/app/src/app/pages/Dashboard/Content/routes/Home/index.tsx

@@ -2,7 +2,10 @@ import React, { useEffect } from 'react';
 import { useAppState, useActions } from 'app/overmind';
 import { sandboxesTypes } from 'app/overmind/namespaces/dashboard/types';
 import { Header } from 'app/pages/Dashboard/Components/Header';
-import { VariableGrid } from 'app/pages/Dashboard/Components/VariableGrid';
+import {
+  VariableGrid,
+  GUTTER,
+} from 'app/pages/Dashboard/Components/VariableGrid';
 import { SelectionProvider } from 'app/pages/Dashboard/Components/Selection';
 import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-generator';
 import { Helmet } from 'react-helmet';
@@ -11,6 +14,19 @@ import {
   DashboardTemplate,
   PageTypes,
 } from 'app/pages/Dashboard/types';
+import styled from 'styled-components';
+
+const BannerProjects = styled.a`
+  display: block;
+
+  width: calc(100% - ${2 * GUTTER}px);
+  max-width: GRID_MAX_WIDTH - 2 * GUTTER;
+  margin: 0 auto ${GUTTER}px;
+
+  img {
+    width: 100%;
+  }
+`;
 
 export const Home = () => {
   const {
@@ -84,6 +100,12 @@ export const Home = () => {
       <Helmet>
         <title>Dashboard - CodeSandbox</title>
       </Helmet>
+      <BannerProjects href="https://codesandbox.io/p/dashboard">
+        <img
+          src="/static/img/projects-banner.png"
+          alt="The CodeSandbox flow, for any project of any size. Try now"
+        />
+      </BannerProjects>
       <Header title="Home" activeTeam={activeTeam} showViewOptions />
       <VariableGrid page={pageType} items={items} />
     </SelectionProvider>