[material-ui][docs] Refine the Component demo page template

[samuelsycamore]

Related to #33998 & #35158

Following the discussion here - #39298 (comment) - it was concluded that "if everything is Customization, then nothing is Customization." 😅 As such, I think we should update the template for the Component demo pages in Material UI and Joy UI, primarily to move more content from "Customization" to "Basics."

(This doesn't apply to Base UI because those docs have their own structure to account for both components and hooks.)

How do we decide what's "Basic" and what's "Customization" and beyond?

The basic premise is that the demos on the page should get increasingly more sophisticated from one section to the next, starting with out-of-the-box features and eventually concluding with real-world examples of the component in context.

Basics

• out-of-the-box usage details
• implementation of built-in props

Customization

• more complex usage beyond built-in props - but not quite real-world examples
• use with other components

Common examples

• these are closest to real-world examples

Third-party integrations

• any examples that involve non-MUI stuff

Templates - before and after

Before:

# {{Component Name}}

## Introduction

## Basics
- import
- basic usage description and demo

## Customization
### Variants
### Sizes
### Colors
### Decorators
### etc.

## Usage with {{Other Component}}
### Details on specific usage

## Common examples
### Example 
### etc.

## Accessibility

## Anatomy

## API

After:

# {{Component Name}}

## Introduction
### Usage
- appropriate use cases, how it compares/contrasts with similar components

## Basics
- import
- basic description and demo
### Variants
### Sizes
### Colors
### Decorators
### etc.

## Customization
### Use with {{Other Component}}
### etc.

## Common examples
### {{Sophisticated example from well-known app/UI}}

## Third-party integrations
### {{Integration Name}}

## Accessibility

## Anatomy

## API