[website] Add the Joy UI marketing page #36829

siriwatknp · 2023-04-10T08:21:02Z

Closes [joy-ui] Add a marketing page #35789
Preview: https://deploy-preview-36829--material-ui.netlify.app/joy-ui/

To-do refinements

Pre-review batch of to-dos

Use the branding theme colors instead of Joy UI ones on the page (dark mode gets a bit janky).
Components section playground adjustment.
Features section "Color inversion" code fix.
Features section "Global variants" component demo simplification.
Add space + component for more testimonials.
Update the Components section icons.
Remove feather icons from the Rental dashboard demo (wait for [docs][joy-ui] Refine the Rental dashboard template #39059)

mui-bot · 2023-04-10T08:23:32Z

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 14c6199

…mkt-page

siriwatknp · 2023-10-11T10:21:22Z

@danilo-leal pushed these changes:

Automatic adjustment demo
Fix the solid and solid demo for the Global variant section
Fix layout shift after template is loaded

mapache-salvaje · 2023-10-16T19:49:46Z

docs/src/components/productJoyUI/JoyUIHero.tsx

+            Joy UI is for those that appreciate the comprehensiveness and reliability of Material
+            UI, but don&apos;t want Material Design. It&apos;s design agnostic and built to be
+            tailored to your specific design language.


I think we should avoid all mention of Material UI and Material Design here in the hero section. That can come later. We should use the opportunity to describe what it is more than what it's not. What are the top two or three key value propositions worth highlighting here? "Joy UI is great because..."

Agreed, yeah! Meta note: Every piece of copy we're using on the page at the moment is either what we iterated on while the page was still in the Figma stage or place-holder stuff I came up with — so, taking advantage of this comment to extend the invite to revise the entire page's copywriting! 🤙 Some comments about specific parts were already dropped, and I'd like to get your take on them (click on the "Load more" up there a few times to see the previous thread 😬).

For this comment specifically, though, I'd likely highlight these aspects: 1) UI design (minimal, sleek, lightly opinionated); 2) customization UX (CSS variables, automatic features, etc.); 3) either DX (which can be covered in the previous topic) or breadth of components. Not fully sure about the third...

mbrookes · 2023-12-14T21:13:17Z

For the "Rental" example, the map appears to a scan of a paper map. It's slightly skewed, and even has a crease in it. Should we perhaps use a screenshot instead? Something like:

(same location as the list)

mbrookes

More random feedback, mostly on the copy, which I appreciate was always a WIP.

mbrookes · 2023-12-14T21:09:07Z

docs/src/components/productJoyUI/JoyUISummary.tsx

+            <GradientText>beautiful components and DX</GradientText>
+          </Typography>
+        }
+        description="Joy UI components were extracted from Material UI, featuring the same robust engineering, and quickly trusted by many community members."


I wonder if developers might be concerned that Joy UI has inherited Material Design specific code baggage? Perhaps we could refer to it more obliquely?:

Suggested change

description="Joy UI components were extracted from Material UI, featuring the same robust engineering, and quickly trusted by many community members."

description="Joy UI components are built on the same robust engineering foundations as Material UI that are trusted by our growing community."

(or some such)

Actually, reading it again, this doesn't really follow from the H2 content of "beautiful components and DX"...

mbrookes · 2023-12-14T21:12:18Z

docs/src/components/productJoyUI/JoyUISummary.tsx

+    icon: <AccessibilityNewRounded fontSize="small" color="primary" />,
+    title: 'Accessibility',
+    description:
+      'Joy UI is built off of from Base UI, which delivers several built-in accessibility features.',


Correcting the grammar:

Suggested change

'Joy UI is built off of from Base UI, which delivers several built-in accessibility features.',

'Joy UI is built with Base UI, which delivers several built-in accessibility features.',

However "several built-in accessibility features" doesn't sound like we have given much attention to accessibility. Would it be fair to word this more strongly, or is that actually the case?

mbrookes · 2023-12-14T21:14:41Z

docs/src/components/productJoyUI/JoyUISummary.tsx

+    icon: <HandymanRoundedIcon fontSize="small" color="primary" />,
+    title: 'Highly customizable',
+    description:
+      'Complete control over how the component looks, powered by several customization tools.',


Suggested change

'Complete control over how the component looks, powered by several customization tools.',

'Complete control over how the component looks, powered by several customization features.',

mbrookes · 2023-12-14T21:21:31Z

docs/src/components/productJoyUI/JoyUISummary.tsx

+    icon: <InvertColorsRoundedIcon fontSize="small" color="primary" />,
+    title: 'Beautiful out of the box',
+    description:
+      'Start looking good with very little effort. Joy UI is designed to be simple and agnostic.',


I took the liberty of editing @danilo-leal's sugestion.

mbrookes · 2023-12-14T21:24:23Z

docs/src/components/productJoyUI/JoyUISummary.tsx

+    title: 'Beautiful out of the box',
+    description:
+      'Start looking good with very little effort. Joy UI is designed to be simple and agnostic.',
+    link: '/joy-ui/getting-started/#beautiful-out-of-the-box/',


The hash fragment links don't seem to be working for some reason.

mbrookes · 2023-12-14T21:28:51Z

docs/src/components/productMaterial/MaterialDesignKits.tsx

+                Enhance your <GradientText>design workflow</GradientText>
+              </Typography>
+            }
+            description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date release."


Suggested change

description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date release."

description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to keep in sync with the latest release of Joy UI."

mbrookes · 2023-12-14T21:33:13Z

docs/src/components/productJoyUI/JoyUIDesignKit.tsx

+import Frame from 'docs/src/components/action/Frame';
+import Link from 'docs/src/modules/components/Link';
+
+const DEMOS = ['Color & Typography', 'Components', 'Variants'];


Am I misunderstanding, or are the demos for these reversed? 'Color & Typography' seems to show screenshots for Components, and vice versa.

mbrookes · 2023-12-14T21:37:27Z

docs/src/components/productJoyUI/JoyUIEnd.tsx

+            }
+          />
+          <GetStartedButtons
+            primaryUrl={ROUTES.joyDocs}


Since this section is about Community should we be linking to perhaps Discord and Github instead?

mbrookes · 2023-12-14T21:41:16Z

docs/src/components/productJoyUI/JoyUISummary.tsx

+        title={
+          <Typography variant="h2" sx={{ mt: 1, maxWidth: 600, mx: 'auto' }}>
+            Kick-start your new product with <br />
+            <GradientText>beautiful components and DX</GradientText>


Suggested change

<GradientText>beautiful components and DX</GradientText>

<GradientText>beautiful components and great DX</GradientText>

mbrookes · 2023-12-14T22:47:16Z

Oops! This popped up on my "participating" notifications for some reason, so I thought it must still be being worked on, but I see there hasn't been any activity for a while, so I'm guess it's on-hold (for obvious reasons). Please disregard for now.

danilo-leal · 2023-12-22T22:34:17Z

I'll leave this PR closed as we're pausing it for now! We can always re-open it. :)

wip: init marketing page structure

d72bb1e

siriwatknp added the website Pages that are not documentation-related, marketing-focused. label Apr 10, 2023

danilo-leal assigned siriwatknp and danilo-leal May 17, 2023

danilo-leal added this to the Joy UI: Stable release milestone May 31, 2023

danilo-leal added the package: joy-ui Specific to @mui/joy label May 31, 2023

danilo-leal changed the title ~~[DO NOT MERGE] Create Joy UI marketing page~~ [DO NOT MERGE][website] Create Joy UI marketing page May 31, 2023

danilo-leal changed the title ~~[DO NOT MERGE][website] Create Joy UI marketing page~~ [DO NOT MERGE][website] Add Joy UI marketing page May 31, 2023

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 18, 2023

siriwatknp mentioned this pull request Jul 26, 2023

[website] /joy-ui returns 404 #38159

Closed

danilo-leal changed the title ~~[DO NOT MERGE][website] Add Joy UI marketing page~~ [website] Add the Joy UI marketing page Aug 1, 2023

danilo-leal added 2 commits July 31, 2023 23:48

Merge remote-tracking branch 'origin/master' into pr/36829

38d4674

basic fixes and structure

47af59d

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 1, 2023

siriwatknp added 13 commits August 7, 2023 18:24

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

71f3e4f

…mkt-page

wip

df3bf98

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

3bf10d2

…mkt-page

fix JoyUI Hero get start buttons

89da880

add Material UI to summary

5ea921f

finish testimonial section

0253676

use data-mui attributes

2149375

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

2e027d3

…mkt-page

add color inversion feature demo

d483623

finish automatic adjustment section

f2fbde8

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

3493eec

…mkt-page

update automatic adjustment

f51974b

add templates section

40275f3

siriwatknp force-pushed the joy/mkt-page branch from f60a5b9 to 40275f3 Compare August 30, 2023 10:25

fix layout and override variables

246f3de

siriwatknp and others added 13 commits October 9, 2023 17:09

use shorthand variables

27dc774

fix lint

927b65a

fix lint again

6c02c5f

add testimonial folks github link

33675b7

small adjustments on the features section

d87c4ed

hero border color adjustment

1b50238

trigger build process

565b7ff

Merge branch 'master' of https://github.com/mui/material-ui into joy/…

dc0579c

…mkt-page

fix AlertUsage error

7b44530

fix templates section layout shift after loaded

12a8d82

fix global variants feature preview to work with solid variant

1273aff

fix thumb size

fbfef9d

Add automatic adjustment demo

b3e7e79

siriwatknp and others added 6 commits October 11, 2023 17:22

change knob to radio for consistency

029e535

refine dummy copy

95d0d77

adjustments to the css vars demo

084c07b

polish the automatic adjustment demo

6ac32a3

more automatic adjustment fine-tune

2a094f3

color inversion demo tweaks

2c395af

mapache-salvaje reviewed Oct 16, 2023

View reviewed changes

danilo-leal added 3 commits October 16, 2023 21:14

stray adjustements

ccae8ec

adding the design kit section and iterating on the images

56d4f90

iterating on the testimonials section

14c6199

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 17, 2023

mbrookes reviewed Dec 14, 2023

View reviewed changes

danilo-leal closed this Dec 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[website] Add the Joy UI marketing page #36829

[website] Add the Joy UI marketing page #36829

siriwatknp commented Apr 10, 2023 •

edited by danilo-leal

Loading

mui-bot commented Apr 10, 2023 •

edited

Loading

siriwatknp commented Oct 11, 2023

mapache-salvaje Oct 16, 2023

danilo-leal Oct 16, 2023

mbrookes commented Dec 14, 2023

mbrookes left a comment

mbrookes Dec 14, 2023

mbrookes Dec 14, 2023

mbrookes Dec 14, 2023 •

edited

Loading

mbrookes Dec 14, 2023

mbrookes Dec 14, 2023

mbrookes Dec 14, 2023

mbrookes Dec 14, 2023

mbrookes Dec 14, 2023

mbrookes Dec 14, 2023

mbrookes Dec 14, 2023

mbrookes commented Dec 14, 2023

danilo-leal commented Dec 22, 2023

	description="Joy UI components were extracted from Material UI, featuring the same robust engineering, and quickly trusted by many community members."
	description="Joy UI components are built on the same robust engineering foundations as Material UI that are trusted by our growing community."

	'Joy UI is built off of from Base UI, which delivers several built-in accessibility features.',
	'Joy UI is built with Base UI, which delivers several built-in accessibility features.',

	'Complete control over how the component looks, powered by several customization tools.',
	'Complete control over how the component looks, powered by several customization features.',

	description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date release."
	description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to keep in sync with the latest release of Joy UI."

	<GradientText>beautiful components and DX</GradientText>
	<GradientText>beautiful components and great DX</GradientText>

[website] Add the Joy UI marketing page #36829

[website] Add the Joy UI marketing page #36829

Conversation

siriwatknp commented Apr 10, 2023 • edited by danilo-leal Loading

To-do refinements

mui-bot commented Apr 10, 2023 • edited Loading

Netlify deploy preview

Bundle size report

siriwatknp commented Oct 11, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mbrookes commented Dec 14, 2023

mbrookes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mbrookes Dec 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mbrookes commented Dec 14, 2023

danilo-leal commented Dec 22, 2023

siriwatknp commented Apr 10, 2023 •

edited by danilo-leal

Loading

mui-bot commented Apr 10, 2023 •

edited

Loading

mbrookes Dec 14, 2023 •

edited

Loading