[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. Toolpad Core: Run
 
    ```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. Toolpad Studio: Run
+
+   ```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/components/page-container/PageContent.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 export default function PageContent() {
   return (

docs/data/toolpad/core/components/page-container/PageContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 
 export default function PageContent() {
   return (

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

@@ -11,15 +11,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/CardGrid.js → docs/src/components/landing-studio/CardGrid.js

@@ -4,7 +4,7 @@ import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
+import Grid from '@mui/material/Grid2';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import Section from 'docs/src/layouts/Section';
 import IconImage from 'docs/src/components/icon/IconImage';