[website] Update showcase to include Toolpad Core

[bharatkashyap]

• Update the Products switcher copy for Toolpad

  • "Toolpad Studio" -> "Toolpad"
  • "Self-hosted, low-code builder.." -> "Components and tools for building dashboards and internal apps"
  • "Start using Toolpad" -> "Start using Toolpad Core/Studio"
  • "Learn more about why to use Toolpad" -> "Learn more about Toolpad Core/Studio"

• Update the demo tabs

  • Add the <DashboardLayout /> as the demo for "Core"

  • Merge the earlier demo tabs into one for "Studio"

    "Use a drag-and-drop interface to build your app's configuration. Changes made in Studio are automatically synced to .yml files, and vice-versa. Bring your own components and data."

    as a single description

[mui-bot]

Netlify deploy preview

https://deploy-preview-43226--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 7a5f6fc

[prakhargupta1]

The Beta chip seems off. Everything else looks good to me!

[bharatkashyap]

The Beta chip seems off. Everything else looks good to me!

That isn't from a change in this PR, that one is already merged in #42952

We can fix that separately I think - an item to add in the grooming next week?

[Janpot]

I think we can make the code preview more to the point. It doesn't have to be the exact same as what we render. e.g. look at the the MUI X code preview. I think we can also leave out the explanation text that we add for Studio. The code can speak for itself.

We can inline and reduce the amount of navigation and leave out the other props and children, what do you think of just the following as a preview?

<AppProvider navigation={[
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    segment: 'dashboard',
    title: 'Dashboard',
    icon: <DashboardIcon />,
  }
  // ...
]}>
  <DashboardLayout>
    <PageContainer>
      {/* ... */}
    </PageContainer>
  </DashboardLayout>
</AppProvider>

[bharatkashyap]

I think we can make the code preview more to the point. It doesn't have to be the exact same as what we render. e.g. look at the the MUI X code preview. I think we can also leave out the explanation text that we add for Studio. The code can speak for itself.

We can inline and reduce the amount of navigation and leave out the other props and children, what do you think of just the following as a preview?

<AppProvider navigation={[
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    segment: 'dashboard',
    title: 'Dashboard',
    icon: <DashboardIcon />,
  }
  // ...
]}>
  <DashboardLayout>
    <PageContainer>
      {/* ... */}
    </PageContainer>
  </DashboardLayout>
</AppProvider>

Agree with shortening the preview code. About the Studio description, I would keep at least one sentence talking about Studio being a drag and drop builder given there isn't any context around it anywhere else on the landing page.

[Janpot]

About the Studio description, I would keep at least one sentence talking about Studio being a drag and drop builder given there isn't any context around it anywhere else on the landing page.

Yes, we can keep the studio one, I meant we can remove it for the core tab. Sorry, I wasn't very clear there 😄

[Janpot]

Looks good to me.

[Janpot]

@bharatkashyap Can you look into this scroll issue?

Screen.Recording.2024-08-13.at.15.14.09.mov

[bharatkashyap]

Screen.Recording.2024-08-15.at.1.39.49.PM.mov

@prakhargupta1 @Janpot Updated with a fix for the reported scroll issue, is this good to merge now?