diff --git a/packages/homepage/content/articles/open-beta/cover.jpeg b/packages/homepage/content/articles/open-beta/cover.jpeg new file mode 100644 index 00000000000..777fcad82ec Binary files /dev/null and b/packages/homepage/content/articles/open-beta/cover.jpeg differ diff --git a/packages/homepage/content/articles/open-beta/cover.jpg b/packages/homepage/content/articles/open-beta/cover.jpg new file mode 100644 index 00000000000..777fcad82ec Binary files /dev/null and b/packages/homepage/content/articles/open-beta/cover.jpg differ diff --git a/packages/homepage/content/articles/open-beta/create-pr.mp4 b/packages/homepage/content/articles/open-beta/create-pr.mp4 new file mode 100644 index 00000000000..3bc1c775eee Binary files /dev/null and b/packages/homepage/content/articles/open-beta/create-pr.mp4 differ diff --git a/packages/homepage/content/articles/open-beta/csb-create-pr.gif b/packages/homepage/content/articles/open-beta/csb-create-pr.gif new file mode 100644 index 00000000000..074974d8533 Binary files /dev/null and b/packages/homepage/content/articles/open-beta/csb-create-pr.gif differ diff --git a/packages/homepage/content/articles/open-beta/flow.gif b/packages/homepage/content/articles/open-beta/flow.gif new file mode 100644 index 00000000000..7834bae5dd0 Binary files /dev/null and b/packages/homepage/content/articles/open-beta/flow.gif differ diff --git a/packages/homepage/content/articles/open-beta/flow.mp4 b/packages/homepage/content/articles/open-beta/flow.mp4 new file mode 100644 index 00000000000..da06b530ea6 Binary files /dev/null and b/packages/homepage/content/articles/open-beta/flow.mp4 differ diff --git a/packages/homepage/content/articles/open-beta/index.md b/packages/homepage/content/articles/open-beta/index.md new file mode 100644 index 00000000000..6bf786f497a --- /dev/null +++ b/packages/homepage/content/articles/open-beta/index.md @@ -0,0 +1,110 @@ +--- +banner: ./cover.jpeg +slug: open-beta +authors: ['Ives van Hoorne'] +photo: https://avatars0.githubusercontent.com/u/587016?s=460&v=4 +title: CodeSandbox Projects Goes into Open Beta +description: + 4 months ago, we announced the closed beta of CodeSandbox Projects, it’s an instant development environment that lets you start building projects of any size in seconds, fully integrated with your own existing tooling - including Visual Studio Code. +date: 2022-07-19 +--- + +4 months ago, we announced the closed beta of CodeSandbox Projects, it’s an instant development environment that lets you start building projects of any size in seconds, fully integrated with your own existing tooling - including Visual Studio Code. + +Today, we’re very happy to announce that CodeSandbox Project is available in public beta and you can try it out now! 🎉 + +First of all, we want to thank everyone who has tested CodeSandbox Projects in the past months. We received great feedback both from developers and non-developers, and we’re excited about how people have used CodeSandbox so far. + +If you want to dive right into the editor, we have a couple example projects you can play with here: + +- [Deno](https://codesandbox.io/p/github/codesandbox/codesandbox-template-deno-server/main?file=%2FREADME.md) +- [Vite & React](https://codesandbox.io/p/github/codesandbox/codesandbox-template-vite-react/main?file=%2FREADME.md) +- [Next.js](https://codesandbox.io/p/github/codesandbox/codesandbox-template-next.js/main) +- [Nuxt.js](https://codesandbox.io/p/github/codesandbox/codesandbox-template-nuxt/main) +- [Remix](https://codesandbox.io/p/github/codesandbox/codesandbox-template-remix) + +We’ll share more templates and examples over the upcoming weeks. + +So, what have we worked on in the meantime? A ton! In this post, we’ll share the highlights of what we’ve built for CodeSandbox Projects. Let’s get to it! + +## Instant Forking & Always-On Branches + +We haven’t been sitting still with infrastructure upgrades! We have fully deployed our Firecracker infrastructure for all projects. What does this mean? Forks will happen within 2 seconds, and you no longer have to worry about branches shutting down. + + + +### How does this work**?** + +[Firecracker](https://firecracker-microvm.github.io/) enables us to save the memory of a running VM to disk, and we can start new VMs from that memory file. Those new VMs will continue where the last VM left off. + + + +This means that every time you press “Fork” **you will get an *exact* copy of the development environment**, with running dev servers ready to respond to requests! This is great in case you want to experiment with some changes and don’t want to make changes to the existing environment. + +This also means that when we hibernate a VM, the memory is saved to disk. When you come back later to the VM, we can resume it from that memory snapshot within a second. It will seem like the VM has always been running. This way, you will never have to wait for dev servers to start! + +This fits the model of CodeSandbox perfectly. You can prepare the main branch by installing the dependencies, starting the dev servers and seeding the database. All forks from this branch will then have all of this readily available. + +## Open Source Integration + +Open source repositories are now directly integrated in CodeSandbox! You can now open any open source repository and you will get a running version of the repo. If you want to play with the code, you can press “Branch” and Projects will create a new branch for you. + +To contribute you can make your change press “Open PR”. CodeSandbox will handle creating the fork, creating the branch, setting upstreams and creating the commit & PR. This way, it will be easier for you and others to contribute to open source repos. + +**Here’s an example of Sandpack running on CodeSandbox Projects:** + +[![Sandpack project](./sandpack-1.jpeg)](https://codesandbox.io/p/github/codesandbox/sandpack/main?file=%2FREADME.md) + +[https://codesandbox.io/p/github/codesandbox/sandpack](https://codesandbox.io/p/github/codesandbox/sandpack/main?file=%2FREADME.md) + +## Docker & Nix Support + +Many people already have a development environment set up locally and in many cases this is set up with Docker or `docker-compose`, to make it easy to run these repos in CodeSandbox, we’ve added Docker and Nix support. + +Here’s some documentation on how to set it up: [https://codesandbox.io/docs/projects/tutorial/getting-started-with-docker](https://codesandbox.io/docs/projects/tutorial/getting-started-with-docker). And here’s an example of a project running Docker & Nix: [https://codesandbox.io/p/github/codesandbox/codesandbox-example-docker/main](https://codesandbox.io/p/github/codesandbox/codesandbox-example-docker/main). + +With Docker support you can run `docker` inside a VM to run any kind of container, this is great for extra services like a database or Redis. + +We’ve also added Nix support which allows you to configure the installed tooling that comes with the development environment. You can configure this by adding a `csb.nix` to the root of your repo, we will automatically pick up these changes and install the right packages. + +## GitHub App + +One big advantage of having a development environment per branch is that you can use them to easily review PRs without disrupting your own environment! To make this easier we’ve created a GitHub App that adds a link to a running development environment for every PR. + + + +Using this app allows you to review a PR with a running dev server by just clicking a link. It also allows you to quickly try out some changes in the PR itself, without having to check out the branch locally! + +## VS Code Extension + +![VS Code](./vscode-1.jpeg) + +It’s important for us that you can use the tooling that you’re used to. That’s why we have a VSCode extension that allows you to open any branch on CodeSandbox in VSCode, with your own extensions and keybindings. + +We’ve made many improvements in VSCode, and it’s now possible to start tasks, previews and even follow team members from within VSCode directly. This way you can collaborate from VSCode with others in our mobile app or web client. + +## Conclusion + +We’re super excited to be able to share Projects with everyone now. We built Projects with the same goal we’ve always had; to make it easy to build and share running code with others. + +Over time, Projects will be unified with sandboxes. This way, you can start with a sandbox and as it grows you can attach git to it and turn it into a project. Our vision is for you to have a seamless experience with sandboxes and projects, allowing CodeSandbox to help facilitate every step of your development journey. + +### Thanks + +Thanks to everyone who has tested CodeSandbox Projects so far, your feedback was tremendously useful and really helped us shape the product. Also a big thanks to the whole CodeSandbox team who worked hard on this release, it’s been a lot of hard work to get this off the ground. + +We have a very full roadmap that we’re eager to share. We’re actively incorporating your feedback, so send us an email or [join our Discord community](https://discord.gg/C6vfhW3H6e) to help shape the roadmap! + +As shared at the start of the blog post, here are some examples to check out, or you can [go to the dashboard](https://codesandbox.io/p/dashboard) to import an existing GitHub project! + +- [Deno](https://codesandbox.io/p/github/codesandbox/codesandbox-template-deno-server/main?file=%2FREADME.md) +- [Vite & React](https://codesandbox.io/p/github/codesandbox/codesandbox-template-vite-react/main?file=%2FREADME.md) +- [Next.js](https://codesandbox.io/p/github/codesandbox/codesandbox-template-next.js/main) +- [Nuxt.js](https://codesandbox.io/p/github/codesandbox/codesandbox-template-nuxt/main) +- [Remix](https://codesandbox.io/p/github/codesandbox/codesandbox-template-remix) diff --git a/packages/homepage/content/articles/open-beta/instant-forking-3.gif b/packages/homepage/content/articles/open-beta/instant-forking-3.gif new file mode 100644 index 00000000000..5a500242d62 Binary files /dev/null and b/packages/homepage/content/articles/open-beta/instant-forking-3.gif differ diff --git a/packages/homepage/content/articles/open-beta/instant-forking-3.mp4 b/packages/homepage/content/articles/open-beta/instant-forking-3.mp4 new file mode 100644 index 00000000000..7d3ed4c29a3 Binary files /dev/null and b/packages/homepage/content/articles/open-beta/instant-forking-3.mp4 differ diff --git a/packages/homepage/content/articles/open-beta/sandpack-1.jpeg b/packages/homepage/content/articles/open-beta/sandpack-1.jpeg new file mode 100644 index 00000000000..3cae4fcc954 Binary files /dev/null and b/packages/homepage/content/articles/open-beta/sandpack-1.jpeg differ diff --git a/packages/homepage/content/articles/open-beta/vscode-1.jpeg b/packages/homepage/content/articles/open-beta/vscode-1.jpeg new file mode 100644 index 00000000000..f00ec2c0aad Binary files /dev/null and b/packages/homepage/content/articles/open-beta/vscode-1.jpeg differ diff --git a/packages/homepage/gatsby-config.js b/packages/homepage/gatsby-config.js index d8c3d9ef147..cf5a9dc5a60 100644 --- a/packages/homepage/gatsby-config.js +++ b/packages/homepage/gatsby-config.js @@ -1,13 +1,13 @@ -require("dotenv").config(); +require('dotenv').config(); module.exports = { siteMetadata: { title: `CodeSandbox`, - siteUrl: "https://codesandbox.io", + siteUrl: 'https://codesandbox.io', }, plugins: [ - "gatsby-transformer-sharp", - "gatsby-plugin-sharp", + 'gatsby-transformer-sharp', + 'gatsby-plugin-sharp', { resolve: `gatsby-source-filesystem`, options: { @@ -16,9 +16,9 @@ module.exports = { }, }, { - resolve: "gatsby-source-filesystem", + resolve: 'gatsby-source-filesystem', options: { - name: "content", + name: 'content', path: `${__dirname}/content/`, }, }, @@ -33,19 +33,20 @@ module.exports = { { resolve: `gatsby-remark-images`, options: { - maxWidth: 768, + maxWidth: 1500, linkImagesToOriginal: true, + quality: 90, }, }, { resolve: require.resolve(`./plugins/remark-sections`) }, - "gatsby-remark-autolink-headers", + 'gatsby-remark-autolink-headers', `gatsby-remark-prismjs`, `gatsby-remark-embedder`, ], }, }, { - resolve: "gatsby-plugin-react-svg", + resolve: 'gatsby-plugin-react-svg', options: { rule: { include: /screens/, // See below to configure properly @@ -53,27 +54,27 @@ module.exports = { }, }, { - resolve: "gatsby-plugin-nprogress", + resolve: 'gatsby-plugin-nprogress', options: { - color: "#40A9F3", + color: '#40A9F3', }, }, `gatsby-plugin-twitter`, `gatsby-plugin-styled-components`, `gatsby-plugin-react-helmet`, `gatsby-plugin-remove-trailing-slashes`, - { resolve: `gatsby-plugin-sitemap`, options: { exclude: ["/index2"] } }, + { resolve: `gatsby-plugin-sitemap`, options: { exclude: ['/index2'] } }, { resolve: `gatsby-plugin-google-tagmanager`, options: { - id: "GTM-T3L6RFK", + id: 'GTM-T3L6RFK', }, }, { resolve: `gatsby-plugin-google-fonts`, options: { - fonts: ["open sans:400", "roboto:400i,400"], - display: "swap", + fonts: ['open sans:400', 'roboto:400i,400'], + display: 'swap', }, }, ], diff --git a/packages/homepage/src/assets/images/csbp-big.jpg b/packages/homepage/src/assets/images/csbp-big.jpg deleted file mode 100644 index bf9fb2dc049..00000000000 Binary files a/packages/homepage/src/assets/images/csbp-big.jpg and /dev/null differ diff --git a/packages/homepage/src/assets/images/csbp-big.png b/packages/homepage/src/assets/images/csbp-big.png new file mode 100644 index 00000000000..ea11d219ddd Binary files /dev/null and b/packages/homepage/src/assets/images/csbp-big.png differ diff --git a/packages/homepage/src/assets/images/csbp-mobile.jpg b/packages/homepage/src/assets/images/csbp-mobile.jpg deleted file mode 100644 index fcfc9effaba..00000000000 Binary files a/packages/homepage/src/assets/images/csbp-mobile.jpg and /dev/null differ diff --git a/packages/homepage/src/assets/images/csbp-mobile.png b/packages/homepage/src/assets/images/csbp-mobile.png new file mode 100644 index 00000000000..8a8bfd0218f Binary files /dev/null and b/packages/homepage/src/assets/images/csbp-mobile.png differ diff --git a/packages/homepage/src/assets/images/pad.png b/packages/homepage/src/assets/images/pad.png index ab874d919fe..6aca818ac39 100644 Binary files a/packages/homepage/src/assets/images/pad.png and b/packages/homepage/src/assets/images/pad.png differ diff --git a/packages/homepage/src/assets/images/people/tristan.jpg b/packages/homepage/src/assets/images/people/tristan.jpg new file mode 100644 index 00000000000..369f40a0b2f Binary files /dev/null and b/packages/homepage/src/assets/images/people/tristan.jpg differ diff --git a/packages/homepage/src/components/Button.js b/packages/homepage/src/components/Button.js index d50c0e527d0..3ff853f8b2b 100644 --- a/packages/homepage/src/components/Button.js +++ b/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 => diff --git a/packages/homepage/src/components/Navigation/MobileNav.js b/packages/homepage/src/components/Navigation/MobileNav.js index 606d62fd7dd..336d7f5c1de 100644 --- a/packages/homepage/src/components/Navigation/MobileNav.js +++ b/packages/homepage/src/components/Navigation/MobileNav.js @@ -212,12 +212,16 @@ export default () => {
  • - + Documentation - +
  • diff --git a/packages/homepage/src/components/Navigation/index.js b/packages/homepage/src/components/Navigation/index.js index 7f441f67d69..588959cbfe4 100644 --- a/packages/homepage/src/components/Navigation/index.js +++ b/packages/homepage/src/components/Navigation/index.js @@ -220,12 +220,23 @@ const Navigation = () => { components={[ { Icon: () => ( - + - + ), Label: () => ( - Documentation + + Documentation + ), }, { diff --git a/packages/homepage/src/components/TeamMember.js b/packages/homepage/src/components/TeamMember.js index 39c42a743ab..666160ba710 100644 --- a/packages/homepage/src/components/TeamMember.js +++ b/packages/homepage/src/components/TeamMember.js @@ -29,6 +29,7 @@ import ioana from '../assets/images/people/ioana.jpg'; import artem from '../assets/images/people/artem.png'; import aj from '../assets/images/people/aj.jpg'; import joji from '../assets/images/people/joji.png'; +import tristan from '../assets/images/people/tristan.jpg'; const people = [ { @@ -199,6 +200,12 @@ const people = [ color: '#008900', team: 'Engineering', }, + { + name: 'Tristan Dubbeld', + pic: tristan, + color: '#F24E62', + team: 'Engineering', + }, ]; const Peep = styled.img` diff --git a/packages/homepage/src/components/Typography.js b/packages/homepage/src/components/Typography.js index 19be478eb43..7de21d4b134 100644 --- a/packages/homepage/src/components/Typography.js +++ b/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; } `; diff --git a/packages/homepage/src/css/global.css b/packages/homepage/src/css/global.css index 62d0ff39add..a650ef25f2e 100644 --- a/packages/homepage/src/css/global.css +++ b/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, diff --git a/packages/homepage/src/html.js b/packages/homepage/src/html.js index 4100abdd755..605dd45047b 100644 --- a/packages/homepage/src/html.js +++ b/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" /> + + {props.headComponents} diff --git a/packages/homepage/src/pages/company/index.js b/packages/homepage/src/pages/company/index.js index 1182d8c9dd5..1bd272b0fd0 100644 --- a/packages/homepage/src/pages/company/index.js +++ b/packages/homepage/src/pages/company/index.js @@ -240,6 +240,7 @@ export default () => ( + ( > - Experience the future of web development. + Experience the future of web development. diff --git a/packages/homepage/src/pages/pricing/_elements.js b/packages/homepage/src/pages/pricing/_elements.js index 683139dfd6f..d979095e988 100644 --- a/packages/homepage/src/pages/pricing/_elements.js +++ b/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; diff --git a/packages/homepage/src/pages/pricing/_plans.js b/packages/homepage/src/pages/pricing/_plans.js index 8f0532a6ff8..b3b228774d9 100644 --- a/packages/homepage/src/pages/pricing/_plans.js +++ b/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; diff --git a/packages/homepage/src/screens/home/anywhere/index.js b/packages/homepage/src/screens/home/anywhere/index.js index cfae9b11472..6d10fd82396 100644 --- a/packages/homepage/src/screens/home/anywhere/index.js +++ b/packages/homepage/src/screens/home/anywhere/index.js @@ -1,35 +1,58 @@ import React from 'react'; import { motion } from 'framer-motion'; - import { H2, P } from '../../../components/Typography'; import padIMG from '../../../assets/images/pad.png'; -import phoneIMG from '../../../assets/images/phone.png'; - -import Button from '../../../components/Button'; const Anywhere = () => (
    + CodeSandbox for iOS + +
    + CodeSandbox{' '} + + for iOS + {' '} +
    +

    - Code from anywhere. + Anywhere,
    anytime.

    ( text-align: center; margin: auto; margin-bottom: 2rem; - max-width: 650px; + max-width: 500px; display: block; `} > - Experience the future of web development and build projects with the first cloud IDE for iOS. + Experience the future of web development and build projects with the first + cloud IDE for iOS.

    - + Learn more +

    ( duration: 1, ease: 'easeOut', }} - > -
    -
    - Play.js - -
    - -
    -
    -
    -     + />
    ); diff --git a/packages/homepage/src/screens/home/hero/Content.js b/packages/homepage/src/screens/home/hero/Content.js index 73cad8bdcb8..2692b184b30 100644 --- a/packages/homepage/src/screens/home/hero/Content.js +++ b/packages/homepage/src/screens/home/hero/Content.js @@ -1,38 +1,38 @@ -import React from "react"; -import { motion } from "framer-motion"; -import styled from "styled-components"; +import React from 'react'; +import { motion } from 'framer-motion'; +import styled from 'styled-components'; -import Button from "../../../components/Button"; -import react from "../../../assets/icons/home-react.svg"; -import vanilla from "../../../assets/icons/home-js.svg"; -import vue from "../../../assets/icons/home-vue.svg"; -import angular from "../../../assets/icons/home-angular.svg"; -import html from "../../../assets/icons/home-html.svg"; -import more from "../../../assets/icons/home-more.svg"; +import Button from '../../../components/Button'; +import react from '../../../assets/icons/home-react.svg'; +import vanilla from '../../../assets/icons/home-js.svg'; +import vue from '../../../assets/icons/home-vue.svg'; +import angular from '../../../assets/icons/home-angular.svg'; +import html from '../../../assets/icons/home-html.svg'; +import more from '../../../assets/icons/home-more.svg'; const Content = () => ( <> - + React Template Vanilla Template - + Vue Template angular Template @@ -41,12 +41,12 @@ const Content = () => ( href="/s/github/codesandbox-app/static-template/tree/master/" title="HTML 5" style={{ - animationDelay: "0.9s", + animationDelay: '0.9s', }} > HTML Template - + More Template @@ -54,10 +54,10 @@ const Content = () => ( @@ -66,7 +66,7 @@ const Content = () => ( const SandboxButtons = styled.section` height: auto; width: auto; - margin: 5rem 0; + margin: 2.5rem 0; transition: all 200ms ease-in; justify-content: center; display: flex; @@ -80,17 +80,18 @@ const Sandbox = styled.a` background-color: transparent; background-size: cover; background-position: center center; - transition: transform 200ms cubic-bezier(0.455, 0.030, 0.515, 0.955), opacity 200ms 100ms; + transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955), + opacity 200ms 100ms; justify-content: center; animation: easeInOutBack 1s cubic-bezier(0, -0.6, 0.12, 2) 1s backwards; width: 3rem; height: 3rem; margin: 0 0.5rem; - ${(props) => props.theme.breakpoints.md} { + ${props => props.theme.breakpoints.md} { width: 4rem; height: 4rem; } - ${(props) => props.theme.breakpoints.sm} { + ${props => props.theme.breakpoints.sm} { width: 2rem; height: 2rem; } diff --git a/packages/homepage/src/screens/home/hero/elements.js b/packages/homepage/src/screens/home/hero/elements.js index 7d32e37d6f8..18068627a78 100644 --- a/packages/homepage/src/screens/home/hero/elements.js +++ b/packages/homepage/src/screens/home/hero/elements.js @@ -28,7 +28,7 @@ export const HeroWrapper = styled.div` export const Title = styled.h1` font-size: 64px; letter-spacing: -0.025em; - line-height: 120%; + line-height: 100%; font-family: ${props => props.theme.homepage.appleFont}; font-family: 'TWKEverett', sans-serif; diff --git a/packages/homepage/src/screens/home/hero/index.js b/packages/homepage/src/screens/home/hero/index.js index 0aecbab19e9..1ab242f9dc3 100644 --- a/packages/homepage/src/screens/home/hero/index.js +++ b/packages/homepage/src/screens/home/hero/index.js @@ -14,6 +14,21 @@ export default () => ( zIndex: 20, }} > + + CodeSandbox + + Where teams build <br /> faster, together. diff --git a/packages/homepage/src/screens/home/teams/index.js b/packages/homepage/src/screens/home/teams/index.js index 4db3ab482da..6be35ec846b 100644 --- a/packages/homepage/src/screens/home/teams/index.js +++ b/packages/homepage/src/screens/home/teams/index.js @@ -1,14 +1,11 @@ -import React from "react"; -import { motion } from "framer-motion"; - -import stripe from "../../../assets/images/stripe.svg"; -import microsoft from "../../../assets/images/microsoft.svg"; -import atlassian from "../../../assets/images/atlassian.svg"; -import shopify from "../../../assets/images/shopify.svg"; -import algolia from "../../../assets/images/Algolia.svg"; - -import { List } from "./elements"; -import { P } from "../../../components/Typography"; +import React from 'react'; +import { motion } from 'framer-motion'; +import stripe from '../../../assets/images/stripe.svg'; +import microsoft from '../../../assets/images/microsoft.svg'; +import atlassian from '../../../assets/images/atlassian.svg'; +import shopify from '../../../assets/images/shopify.svg'; +import algolia from '../../../assets/images/Algolia.svg'; +import { List } from './elements'; const Teams = () => ( ( animate={{ opacity: 1 }} transition={{ duration: 1, - ease: "easeIn", + ease: 'easeIn', }} css={` margin: 0 auto; - padding: 2rem 0; + // padding: 2rem 0; `} > -

    Accelerating developers and product teams. -

    - +

    */} +
  • { useEffect(() => { if (!prefersReducedMotion) { const entryObserver = new IntersectionObserver( - (entries) => { + entries => { if (entries[0].isIntersecting === true) { video.current.play(); setActive(true); @@ -67,14 +71,14 @@ const Video = () => { } }, [prefersReducedMotion]); - const setCurrentTab = (tab) => { + const setCurrentTab = tab => { setActiveTab(tab); video.current.currentTime = videoTimesAndText[tab - 1].time; if (!video.playing) video.current.play(); }; const activeTime = () => { - const times = videoTimesAndText.map((v) => v.time); + const times = videoTimesAndText.map(v => v.time); const currentTime = video.current?.currentTime; times.forEach((time, i) => { @@ -89,10 +93,10 @@ const Video = () => { useEffect(() => { const videoEl = video.current; - videoEl.addEventListener("timeupdate", activeTime, true); + videoEl.addEventListener('timeupdate', activeTime, true); return () => { - videoEl.removeEventListener("timeupdate", activeTime, true); + videoEl.removeEventListener('timeupdate', activeTime, true); }; }, []); @@ -100,12 +104,12 @@ const Video = () => { useEffect(() => { if (!tabListRef.current) return; const activeTabElement = tabListRef.current.querySelector( - "[aria-selected=true]" + '[aria-selected=true]' ); tabListRef.current.scrollTo({ left: activeTabElement.offsetLeft - tabListRef.current.offsetLeft - 100, - behavior: "smooth", + behavior: 'smooth', }); }, [activeTab]); @@ -113,7 +117,7 @@ const Video = () => { { max-width: 90%; margin: 0 auto; padding: 4rem 0 5rem 0; - ${(props) => props.theme.breakpoints.md} { + ${props => props.theme.breakpoints.md} { margin-top: 90px; } `} > - { `} > What’s a sandbox? - + */} {
    + + + + { A link is all you need to hop into a sandbox
    and keep development work flowing.

    - - -
    ); };