docs: add introduction cards (#198)

* docs: add introduction cards

* change the install copy on the intro page

* docs: update example

Co-authored-by: Tamas Szuromi <[email protected]>

.gitignore

@@ -109,4 +109,7 @@ dist
 
 # Autogenerate docs
 website/docs/docs/api/client
-website/docs/docs/api/react
+website/docs/docs/api/react/components
+website/docs/docs/api/react/hooks
+website/docs/docs/api/react/provider
+website/docs/docs/api/react/theme

website/docs/docs/api/react/_category_.yml

@@ -0,0 +1,2 @@
+label: "Sandpack-react"
+position: 4

website/docs/docs/intro.md

@@ -4,6 +4,7 @@ slug: /
 ---
 
 import { NestedSandpack } from "../src/NestedSandpack"
+import { IntroCard } from "../src/IntroCard"
 
 # Introduction
 
@@ -18,4 +19,27 @@ projects, or you can build your own version of `sandpack`, on top of our
 standard components and utilities. As you walk through this guide, you will get
 deeper into our ecosystem.
 
-<NestedSandpack />
+### Getting Started
+
+<div class="intro-section">
+  <IntroCard title="Install" description="Learn how to add Sandpack to your projects and start coding in minutes." href="/getting-started/install" actionText="Access ->" />
+
+  <IntroCard title="Advanced Usage" description="An overview of some Sandpack capabilities and how to extend its API." href="/advanced-usage/provider" actionText="Access ->" />
+
+  <IntroCard title="API reference" description="A full listing and description of the public API exported by the libraries." href="/api/react/components/" actionText="Access ->" />
+
+  <IntroCard title="Sandpack Theme Builder" description="Design and customize your own theme, among other Sandpack presets." href="https://sandpack.codesandbox.io/theme" actionText="Try it now" external />
+</div>
+
+### Live coding environment in minutes
+
+```js sandpack
+export default function App() {
+  return (
+    <div className="App">
+      <h1>Hello Sandpack ✨</h1>
+      <p>Start editing to see some magic happen!</p>
+    </div>
+  );
+}
+```

website/docs/src/IntroCard.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+type Props = Record<"title" | "description" | "href" | "actionText", string> & {
+  external?: boolean;
+};
+
+const IntroCard: React.FC<Props> = ({
+  title,
+  description,
+  href,
+  actionText,
+  external,
+}) => {
+  return (
+    <a
+      className="intro-card"
+      href={href}
+      rel="noreferrer"
+      target={external ? "_blank" : "_self"}
+    >
+      <h3 className="intro-card_title">{title}</h3>
+      <p className="intro-card_desc">{description}</p>
+      <div className="intro-card_link">
+        {actionText} {external && "↗"}
+      </div>
+    </a>
+  );
+};
+
+export { IntroCard };

website/docs/src/NestedSandpack.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 
-import { Sandpack, SandpackLayout } from "./CustomSandpack";
+import { Sandpack } from "./CustomSandpack";
 
 const indexCode = `import React, { StrictMode } from "react";
 import ReactDOM from "react-dom";
-import "@codesandbox/sandpack-react/dist/index.css";
 
 import App from "./App";
 
@@ -23,7 +22,8 @@ const NestedSandpack: React.FC<{ nestedProps?: string; setupCode?: string }> = (
   const appCode = `${
     setupCode
       ? setupCode
-      : `import { Sandpack } from "@codesandbox/sandpack-react";`
+      : `import { Sandpack } from "@codesandbox/sandpack-react";
+import "@codesandbox/sandpack-react/dist/index.css";`
   }
 
 export default function App() {
@@ -46,7 +46,7 @@ export default function App() {
       <Sandpack
         customSetup={{
           dependencies: {
-            "@codesandbox/sandpack-react": "^0.3.3",
+            "@codesandbox/sandpack-react": "latest",
           },
         }}
         files={{

website/docs/src/scss/_heading.scss

@@ -1,20 +1,22 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  letter-spacing: -0.05em;
-}
+.markdown {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    letter-spacing: -0.05em;
+  }
 
-h1 {
-  font-size: 64px !important;
-}
+  h1 {
+    font-size: 64px;
+  }
 
-h2 {
-  font-size: 48px !important;
-}
+  h2 {
+    font-size: 48px;
+  }
 
-h3 {
-  font-size: 36px !important;
+  h3 {
+    font-size: 36px;
+  }
 }

website/docs/src/scss/_intro.scss

@@ -0,0 +1,54 @@
+.intro-section {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 2em;
+
+  .intro-card {
+    margin-bottom: 1em;
+
+    @media (min-width: 961px) {
+      width: calc(50% - 0.5em);
+    }
+  }
+}
+
+.intro-card {
+  background: #151515;
+  border-radius: 10px;
+  padding: 20px;
+  color: var(--sandpack-text-color);
+
+  &:hover {
+    color: var(--sandpack-text-color);
+    text-decoration: none;
+
+    .intro-card_link {
+      color: var(--ifm-link-hover-color);
+    }
+  }
+
+  .intro-card_title {
+    font-weight: 500;
+    font-size: 16px;
+    margin: 5px 0px;
+  }
+
+  .intro-card_desc {
+    font-size: 14px;
+    line-height: 1.4;
+
+    margin: 5px 0px;
+
+    color: #ffffff;
+    opacity: 0.5;
+  }
+
+  .intro-card_link {
+    font-size: 14px;
+    line-height: 15px;
+
+    color: #ffffff;
+    margin-top: 10px;
+  }
+}

website/docs/src/scss/custom.scss

@@ -1,5 +1,6 @@
 @import "_variables.scss";
 @import "_general.scss";
+@import "_intro.scss";
 @import "_heading.scss";
 @import "_admonition.scss";
 @import "_navbar.scss";