On landing page, highlight that Toolpad is a pro-code tool now.

[prakhargupta1]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

With Toolpad becoming pro-code now, we should highlight this new information through a visual in the hero section.

May be something like this can help:

(It is just an example for discussion, we can use better images)

More changes:

• Show npx create toolpad app in the hero section, next to Get Started CTA.
• Put email form out of hero section.
• From use cases section, link docs section that shows showcase (3-5). Feature examples is something that we are keeping here: https://github.com/mui/mui-toolpad/tree/master/examples
  Design we can implement: https://www.figma.com/file/4uv2dT18rXJPZBbrbpw61q?node-id=6826:597770#431401706
  Being worked on here: Add QRcode example to docs and add dogApp #1445
• gif update @prakhargupta1
• change Alpha -> Beta [docs] Move Toolpad from alpha to beta material-ui#37288 [docs] Move the label from "Alpha" to "Beta" #2024
• update email collection form (Sendinblue has rebranded to Brevo, for us everything remains same. The current list is # 30 and consists of users interested in Beta. I have created a new list # 56, which will be for users who are interested in Toolpad future updates/newsletters. When we move to Beta, let's also change this list and the content around this form) Link to the list
• Edit copy of email form: https://www.figma.com/file/4uv2dT18rXJPZBbrbpw61q?node-id=6829:593596#431719838

Examples 🌈

https://interval.com/
https://www.airplane.dev/
https://trigger.dev/

[gerdadesign]

Main goal: convey that the builder is integrated into your codebase

• image updates
• copy

Considerations:

• Get started and email sign ups are both most important
  • can move install to bottom
• There was an earlier prototype with Sign up expanding into the email input; explore this again

[gerdadesign]

Design Draft 1

• Please review the design draft — loom for contextual walkthrough; figma for specifics
• @prakhargupta1 I had already done some exploration around the use cases by the time you updated your comment in Add QRcode example to docs and add dogApp #1445, so it's still included in here.
• In figma, I added two types of sticky notes throughout:
  • yellow = notes from me about the design
  • red = content needed from others. @Janpot I'm hoping you will be able to shed some light on the lingering questions around what are the most relevant examples/code snippets to show in the mockup.

Loom walkthrough
Figma