diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Home/index.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Home/index.tsx index ca127b53e7c..d8a0f815b51 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/Home/index.tsx +++ b/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 = () => { Dashboard - CodeSandbox + + The CodeSandbox flow, for any project of any size. Try now +
diff --git a/packages/app/static/img/projects-banner.png b/packages/app/static/img/projects-banner.png new file mode 100644 index 00000000000..54bc3eecaf3 Binary files /dev/null and b/packages/app/static/img/projects-banner.png differ