[website][docs][cli] Make Core the default project

README.md

@@ -39,11 +39,11 @@ Toolpad Studio is in its beta stages of development. Feel free to run this appli
 Run:
 
 ```bash
-npx create-toolpad-app@latest my-toolpad-studio-app
+npx create-toolpad-app@latest --studio my-toolpad-studio-app
 # or
-yarn create toolpad-app my-toolpad-studio-app
+yarn create toolpad-app --studio my-toolpad-studio-app
 # or
-pnpm create toolpad-app my-toolpad-studio-app
+pnpm create toolpad-app --studio my-toolpad-studio-app
 ```
 
 ## Documentation

RELEASE.md

@@ -65,11 +65,22 @@
 
 1. Smoke test the release with the [CodeSandbox CI](https://ci.codesandbox.io/status/mui/mui-toolpad) package of the PR branch:
 
-   1. Run
+   a. Run Toolpad Core
 
    ```bash
    npx https://pkg.csb.dev/mui/mui-toolpad/commit/<build>/create-toolpad-app smoke --use-pnpm
    cd smoke
+   pnpm add https://pkg.csb.dev/mui/mui-toolpad/commit/<build>/@toolpad/core -S
+   pnpm dedupe && pnpm dev
+   ```
+
+   And verify the app runs
+
+   b. Run Toolpad Studio
+
+   ```bash
+   npx https://pkg.csb.dev/mui/mui-toolpad/commit/<build>/create-toolpad-app --studio smoke --use-pnpm
+   cd smoke
    pnpm add https://pkg.csb.dev/mui/mui-toolpad/commit/<build>/@toolpad/studio -S
    pnpm dedupe && pnpm dev
    ```

docs/data/toolpad/core/introduction/installation.md

@@ -13,15 +13,15 @@ title: Toolpad Core - Installation
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npx create-toolpad-app@latest --core
+npx create-toolpad-app@latest
 ```
 
 ```bash pnpm
-pnpm create toolpad-app --core
+pnpm create toolpad-app
 ```
 
 ```bash yarn
-yarn create toolpad-app --core
+yarn create toolpad-app
 ```
 
 </codeblock>

docs/data/toolpad/studio/getting-started/first-app.md

@@ -26,7 +26,7 @@ Make sure to [install Node.js](https://nodejs.org/en) on your system.
 1. Create a new application
 
    ```bash
-   npx create-toolpad-app@latest dog-app
+   npx create-toolpad-app@latest --studio dog-app
    ```
 
 1. Start the development server

docs/data/toolpad/studio/getting-started/installation.md

@@ -10,15 +10,15 @@ Then run the command:
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npx create-toolpad-app@latest my-toolpad-app
+npx create-toolpad-app@latest --studio my-toolpad-app
 ```
 
 ```bash yarn
-yarn create toolpad-app my-toolpad-app
+yarn create toolpad-app --studio my-toolpad-app
 ```
 
 ```bash pnpm
-pnpm create toolpad-app my-toolpad-app
+pnpm create toolpad-app --studio my-toolpad-app
 ```
 
 </codeblock>

docs/pages/toolpad/index.js

@@ -1,64 +1,30 @@
 import * as React from 'react';
-import NoSsr from '@mui/material/NoSsr';
-import Head from 'docs/src/modules/components/Head';
-import CssBaseline from '@mui/material/CssBaseline';
-import Divider from '@mui/material/Divider';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import Divider from '@mui/material/Divider';
+import CssBaseline from '@mui/material/CssBaseline';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import Examples from '../../src/components/landing/Examples';
 import Hero from '../../src/components/landing/Hero';
-import HeroVideo from '../../src/components/landing/HeroVideo';
-import SignUpToast from '../../src/components/landing/SignUpToast';
-import UseCases from '../../src/components/landing/UseCases';
-import CardGrid from '../../src/components/landing/CardGrid';
-import Pricing from '../../src/components/landing/PricingTable';
-import Marquee from '../../src/components/landing/Marquee';
-import features from '../../data/toolpad/studio/landing/features';
-import useCases from '../../data/toolpad/studio/landing/useCases';
-import marquee from '../../data/toolpad/studio/landing/marquee';
-import {
-  Headline,
-  plans,
-  planInfo,
-  rowHeaders,
-  communityData,
-  commercialData,
-} from '../../data/toolpad/studio/landing/pricing';
+import Features from '../../src/components/landing/Features';
+import BuiltWith from '../../src/components/landing/BuiltWith';
+import StudioIntro from '../../src/components/landing/StudioIntro';
 
 export default function Home() {
   return (
     <BrandingCssVarsProvider>
-      <Head
-        title="Toolpad: Low-code admin builder"
-        description="Build apps with Material UI components, connect to data sources, APIs and build your internal tools 10x faster. Open-source and powered by MUI."
-        card="/static/toolpad/marketing/toolpad-og.jpg"
-      />
-      <NoSsr>
-        <SignUpToast />
-      </NoSsr>
       <CssBaseline />
       <AppHeaderBanner />
       <AppHeader gitHubRepository="https://github.com/mui/mui-toolpad" />
       <main id="main-content">
         <Hero />
-        <HeroVideo />
-        <Divider />
-        <UseCases content={useCases} />
-        <Divider />
-        <CardGrid content={features} />
-        <Divider />
-        <Pricing
-          Headline={Headline}
-          plans={plans}
-          planInfo={planInfo}
-          rowHeaders={rowHeaders}
-          commercialData={commercialData}
-          communityData={communityData}
-        />
+        <Features />
         <Divider />
-        <Marquee content={marquee} />
+        <BuiltWith />
         <Divider />
+        <Examples />
+        <StudioIntro />
       </main>
       <AppFooter />
     </BrandingCssVarsProvider>

docs/pages/toolpad/studio/index.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import NoSsr from '@mui/material/NoSsr';
+import Head from 'docs/src/modules/components/Head';
+import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import AppFooter from 'docs/src/layouts/AppFooter';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import Hero from '../../../src/components/landing-studio/Hero';
+import HeroVideo from '../../../src/components/landing-studio/HeroVideo';
+import SignUpToast from '../../../src/components/landing-studio/SignUpToast';
+import UseCases from '../../../src/components/landing-studio/UseCases';
+import CardGrid from '../../../src/components/landing-studio/CardGrid';
+import Pricing from '../../../src/components/landing-studio/PricingTable';
+import Marquee from '../../../src/components/landing-studio/Marquee';
+import features from '../../../data/toolpad/studio/landing/features';
+import useCases from '../../../data/toolpad/studio/landing/useCases';
+import marquee from '../../../data/toolpad/studio/landing/marquee';
+import {
+  Headline,
+  plans,
+  planInfo,
+  rowHeaders,
+  communityData,
+  commercialData,
+} from '../../../data/toolpad/studio/landing/pricing';
+
+export default function Home() {
+  return (
+    <BrandingCssVarsProvider>
+      <Head
+        title="Toolpad: Low-code admin builder"
+        description="Build apps with Material UI components, connect to data sources, APIs and build your internal tools 10x faster. Open-source and powered by MUI."
+        card="/static/toolpad/marketing/toolpad-og.jpg"
+      />
+      <NoSsr>
+        <SignUpToast />
+      </NoSsr>
+      <CssBaseline />
+      <AppHeaderBanner />
+      <AppHeader gitHubRepository="https://github.com/mui/mui-toolpad" />
+      <main id="main-content">
+        <Hero />
+        <HeroVideo />
+        <Divider />
+        <UseCases content={useCases} />
+        <Divider />
+        <CardGrid content={features} />
+        <Divider />
+        <Pricing
+          Headline={Headline}
+          plans={plans}
+          planInfo={planInfo}
+          rowHeaders={rowHeaders}
+          commercialData={commercialData}
+          communityData={communityData}
+        />
+        <Divider />
+        <Marquee content={marquee} />
+        <Divider />
+      </main>
+      <AppFooter />
+    </BrandingCssVarsProvider>
+  );
+}

docs/src/components/landing-core/GetStartedButtons.js → docs/src/components/landing-studio/GetStartedButtons.js

@@ -5,10 +5,9 @@ import Button from '@mui/material/Button';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import { Link } from '@mui/docs/Link';
 import NpmCopyButton from 'docs/src/components/action/NpmCopyButton';
-import GithubStars from '../landing/GithubStars';
 
 export default function GetStartedButtons(props) {
-  const { installation, primaryLabel, primaryUrl, ...other } = props;
+  const { installation, primaryLabel, primaryUrl, secondaryLabel, secondaryUrl, ...other } = props;
   return (
     <React.Fragment>
       <Box
@@ -26,6 +25,7 @@ export default function GetStartedButtons(props) {
           href={primaryUrl}
           component={Link}
           noLinkStyle
+          size="large"
           variant="contained"
           endIcon={<KeyboardArrowRightRounded />}
           sx={{
@@ -36,7 +36,20 @@ export default function GetStartedButtons(props) {
         >
           {primaryLabel}
         </Button>
-        <GithubStars />
+        {secondaryUrl ? (
+          <Button
+            href={secondaryUrl}
+            component={Link}
+            noLinkStyle
+            target={'_blank'}
+            variant="outlined"
+            size="large"
+            color="secondary"
+            endIcon={<KeyboardArrowRightRounded />}
+          >
+            {secondaryLabel}
+          </Button>
+        ) : null}
       </Box>
       <NpmCopyButton installation={installation} sx={{ mt: 2 }} />
     </React.Fragment>