Open beta

packages/homepage/src/components/Button.js

@@ -2,14 +2,14 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 const styles = css`
-  background: #dcff50;
-  border-radius: 3px;
+  background: #eaff96;
+  border-radius: 4px;
   border: none;
   font-family: ${props => props.theme.homepage.appleFont};
   font-size: 12px;
-  line-height: 120%;
+  line-height: 100%;
   text-align: center;
-  padding: 6px 16px;
+  padding: 8px;
   font-weight: 500;
   text-decoration: none;
   color: #151515;
@@ -25,8 +25,9 @@ const styles = css`
     props.big &&
     css`
       font-size: 16px;
-      padding: 8px 20px;
-      line-height: 24px;
+      padding: 12px;
+      border-radius: 4px;
+      line-height: 100%;
     `}
 
   ${props =>

packages/homepage/src/components/Navigation/MobileNav.js

@@ -212,12 +212,16 @@ export default () => {
                     </Link>
                   </li>
                   <li>
-                    <Link to="/docs/start">
+                    <a
+                      href="https://codesandbox.io/docs"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
                       <IconWrapper>
                         <DocsIcon />
                       </IconWrapper>
                       <span>Documentation</span>
-                    </Link>
+                    </a>
                   </li>
                   <li>
                     <Link to="/blog">

packages/homepage/src/components/Navigation/index.js

@@ -220,12 +220,23 @@ const Navigation = () => {
                   components={[
                     {
                       Icon: () => (
-                        <Link to="/docs/start" title="Documentation">
+                        <a
+                          href="https://codesandbox.io/docs"
+                          title="Documentation"
+                          target="_blank"
+                          rel="noreferrer"
+                        >
                           <DocsIcon />
-                        </Link>
+                        </a>
                       ),
                       Label: () => (
-                        <a href="https://codesandbox.io/docs">Documentation</a>
+                        <a
+                          href="https://codesandbox.io/docs"
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          Documentation
+                        </a>
                       ),
                     },
                     {

packages/homepage/src/components/Typography.js

@@ -1,20 +1,20 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const H2 = styled.h2`
-  line-height: 120%;
+  line-height: 100%;
 
   font-weight: normal;
   font-size: 48px;
-  font-family: ${(props) => props.theme.homepage.appleFont};
-  font-family: "TWKEverett", sans-serif;
+  font-family: ${props => props.theme.homepage.appleFont};
+  font-family: 'TWKEverett', sans-serif;
   letter-spacing: -0.025em;
 
-  color: ${(props) => props.theme.homepage.white};
+  color: ${props => props.theme.homepage.white};
   padding: 0;
   margin: 0;
   margin-bottom: 0.5rem;
 
-  ${(props) => props.theme.breakpoints.md} {
+  ${props => props.theme.breakpoints.md} {
     font-size: 1.8rem;
     line-height: 1.2;
   }
@@ -24,92 +24,92 @@ export const P = styled.p`
   font-weight: normal;
   font-size: 18px;
   line-height: 160%;
-  color: ${(props) => props.theme.homepage.white};
+  color: ${props => props.theme.homepage.white};
   margin: 0;
   margin-bottom: 1rem;
 
-  ${(props) =>
+  ${props =>
     props.small &&
     `
     font-size: 16px;
   `}
 
-  ${(props) =>
+  ${props =>
     props.big &&
     `
   font-size: 24px;
   font-weight: normal;
   `}
 
-  ${(props) =>
+  ${props =>
     props.muted &&
     `
   color: ${props.theme.homepage.muted};
   `}
 
-    ${(props) =>
+    ${props =>
     props.center &&
     `
 text-align: center;
   `}
 
-  ${(props) => props.big && "font-size: 1.5rem"};
+  ${props => props.big && 'font-size: 1.5rem'};
 `;
 
 export const H3 = styled.h3`
-  font-family: "TWKEverett", sans-serif;
+  font-family: 'TWKEverett', sans-serif;
   letter-spacing: -0.0125em;
   font-weight: normal;
   font-size: 24px;
   line-height: 120%;
   margin: 0;
 
-  color: ${(props) => props.theme.homepage.white};
+  color: ${props => props.theme.homepage.white};
 
-  ${(props) =>
+  ${props =>
     props.muted &&
     `
     color: #999;
 
   `}
 
-  ${(props) => props.theme.breakpoints.sm} {
+  ${props => props.theme.breakpoints.sm} {
     font-size: 1.75rem;
   }
 `;
 
 export const H5 = styled.h5`
-  font-family: ${(props) => props.theme.homepage.appleFont};
+  font-family: ${props => props.theme.homepage.appleFont};
   font-weight: 500;
   font-size: 1.4375rem;
   line-height: 27px;
   margin: 0;
 
-  color: ${(props) => props.theme.homepage.white};
+  color: ${props => props.theme.homepage.white};
 
-  ${(props) => props.theme.breakpoints.sm} {
+  ${props => props.theme.breakpoints.sm} {
     font-size: 1.25rem;
   }
 `;
 
 export const H6 = styled.h6`
-  font-family: ${(props) => props.theme.homepage.appleFont};
+  font-family: ${props => props.theme.homepage.appleFont};
   font-weight: 500;
   font-size: 1rem;
   line-height: 19px;
   margin: 0;
   text-align: center;
 
-  color: ${(props) => props.theme.homepage.white};
+  color: ${props => props.theme.homepage.white};
 
-  ${(props) =>
+  ${props =>
     props.left &&
     `
     text-align: left;
 
   `}
 
-  ${(props) => props.theme.breakpoints.sm} {
+  ${props => props.theme.breakpoints.sm} {
     font-size: 0.85rem;
   }
 `;
@@ -120,18 +120,18 @@ export const Description = styled.h3`
   line-height: 160%;
 
   text-align: center;
-  color: ${(props) => props.theme.homepage.muted};
+  color: ${props => props.theme.homepage.muted};
   max-width: 650px;
   margin: 0 auto;
 
-  ${(props) =>
+  ${props =>
     props.left &&
     `
     text-align: left;
 
   `}
 
-  ${(props) => props.theme.breakpoints.sm} {
+  ${props => props.theme.breakpoints.sm} {
     font-size: 18px;
   }
 `;

packages/homepage/src/css/global.css

@@ -19,7 +19,7 @@ body {
   min-height: 100%;
   -webkit-text-size-adjust: 100%;
   height: 100%;
-  background: #090909;
+  background: #030303;
   font-size: 16px;
   color: white;
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,

packages/homepage/src/html.js

@@ -34,9 +34,11 @@ export default function HTML(props) {
           name="viewport"
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
         <link
-          rel="preload"
-          href="https://codesandbox.io/static/fonts/inter/inter.css"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap"
+          rel="stylesheet"
         />
         {props.headComponents}
       </head>

packages/homepage/src/pages/index.js

@@ -1,10 +1,7 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import React from 'react';
-
 import TitleAndMetaTags from '../components/TitleAndMetaTags';
-
 import Layout, { WRAPPER_STYLING } from '../components/layout';
-
 import Hero from '../screens/home/hero';
 import DevExperienceOne from '../screens/home/devExperienceOne';
 import DevExperience from '../screens/home/devExperience';
@@ -15,9 +12,8 @@ import Anywhere from '../screens/home/anywhere';
 import Explore from '../screens/home/explore';
 import Video from '../screens/home/video';
 import Workspaces from '../screens/home/workspaces';
-
-import csbpBig from '../assets/images/csbp-big.jpg';
-import csbpMobile from '../assets/images/csbp-mobile.jpg';
+import csbpBig from '../assets/images/csbp-big.png';
+import csbpMobile from '../assets/images/csbp-mobile.png';
 
 // eslint-disable-next-line
 console.log(
@@ -48,11 +44,17 @@ const Homepage = () => (
     >
       <a
         href="https://projects.codesandbox.io/"
+        target="_blank"
+        rel="noreferrer"
         title="Experience the future of web development."
       >
         <picture>
           <source media="(max-width:620px)" srcSet={csbpMobile} />
-          <img src={csbpBig} alt="Experience the future of web development." />
+          <img
+            src={csbpBig}
+            alt="Experience the future of web development."
+            style={{ borderRadius: '4px' }}
+          />
         </picture>
       </a>
     </section>

packages/homepage/src/pages/pricing/_elements.js

@@ -127,7 +127,7 @@ export const BoxPlanButton = styled.div`
   height: 56px;
   width: 100%;
 
-  background: #090909;
+  background: #161616;
   color: #fff;
 
   line-height: 56px;

packages/homepage/src/pages/pricing/_plans.js

@@ -530,7 +530,7 @@ const Table = styled.table`
     padding-right: 12px;
     position: sticky;
     top: 0px;
-    background: #090909;
+    background: #161616;
 
     &:first-child {
       text-align: left;