Skip to content

Commit 3c99d8b

Browse files
siriwatknpdanilo-leal
siriwatknp
and
danilo-leal
authored
[website] Add Base UI marketing page (mui#36622)
Signed-off-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
1 parent 1b9c8ab commit 3c99d8b

File tree

114 files changed

+5580
-993
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

114 files changed

+5580
-993
lines changed

‎.stylelintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = {
77
],
88
rules: {
99
'alpha-value-notation': null,
10+
'custom-property-pattern': null,
1011
'declaration-colon-newline-after': null,
1112
'function-parentheses-newline-inside': null, // not compatible with prettier
1213
'media-feature-range-notation': null,

‎docs/pages/_document.js

+23-4
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,11 @@ export default class MyDocument extends Document {
8484
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap"
8585
rel="stylesheet"
8686
/>
87-
<link // prevent font flash
87+
{/* ========== Font preload (prevent font flash) ============= */}
88+
<link
8889
rel="preload"
8990
// optimized for english characters (40kb -> 6kb)
90-
href="/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2"
91+
href="/static/fonts/GeneralSans-Semibold-subset.woff2"
9192
as="font"
9293
type="font/woff2"
9394
crossOrigin="anonymous"
@@ -96,14 +97,32 @@ export default class MyDocument extends Document {
9697
// the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
9798
// eslint-disable-next-line react/no-danger
9899
dangerouslySetInnerHTML={{
99-
__html: `@font-face{font-family:'PlusJakartaSans-ExtraBold';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2') format('woff2');}`,
100+
__html: `@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/GeneralSans-Semibold-subset.woff2') format('woff2');}`,
100101
}}
101102
/>
103+
<link
104+
rel="preload"
105+
// optimized for english characters (40kb -> 6kb)
106+
href="/static/fonts/IBMPlexSans-Regular-subset.woff2"
107+
as="font"
108+
type="font/woff2"
109+
crossOrigin="anonymous"
110+
/>
102111
<style
103112
// the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
104113
// eslint-disable-next-line react/no-danger
105114
dangerouslySetInnerHTML={{
106-
__html: `@font-face{font-family:'PlusJakartaSans-Bold';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/PlusJakartaSans-Bold-subset.woff2') format('woff2');}`,
115+
__html: `@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/IBMPlexSans-Regular-subset.woff2') format('woff2');}`,
116+
}}
117+
/>
118+
{/* =========================================================== */}
119+
<style
120+
// Loads General Sans: Regular (400), Medium (500), SemiBold (600), Bold (700)
121+
// Typeface documentation: https://www.fontshare.com/fonts/general-sans
122+
// use https://cssminifier.com/ to minify
123+
// eslint-disable-next-line react/no-danger
124+
dangerouslySetInnerHTML={{
125+
__html: `@font-face{font-family:'General Sans';src:url(/static/fonts/GeneralSans-Regular.woff2) format('woff2'),url(/static/fonts/GeneralSans-Regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap;}@font-face{font-family:'General Sans';src:url(/static/fonts/GeneralSans-Medium.woff2) format('woff2'),url(/static/fonts/GeneralSans-Medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap;}@font-face{font-family:'General Sans';src:url(/static/fonts/GeneralSans-SemiBold.woff2) format('woff2'),url(/static/fonts/GeneralSans-SemiBold.ttf) format('truetype');font-weight:600;font-style:normal;font-display:swap;}@font-face{font-family:'General Sans';src:url(/static/fonts/GeneralSans-Bold.woff2) format('woff2'),url(/static/fonts/GeneralSans-Bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap;}`,
107126
}}
108127
/>
109128
<style

‎docs/pages/about.tsx

+99-53
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import AppFooter from 'docs/src/layouts/AppFooter';
2121
import MuiStatistics from 'docs/src/components/home/MuiStatistics';
2222
import GradientText from 'docs/src/components/typography/GradientText';
2323
import ROUTES from 'docs/src/route';
24+
import Section from 'docs/src/layouts/Section';
2425
import IconImage from 'docs/src/components/icon/IconImage';
2526
import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
2627
import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
@@ -101,7 +102,7 @@ function Person(props: Profile & { sx?: PaperProps['sx'] }) {
101102
borderRadius: 1,
102103
backgroundColor: 'primary.100',
103104
...theme.applyDarkStyles({
104-
backgroundColor: 'primary.700',
105+
backgroundColor: 'primary.900',
105106
}),
106107
})}
107108
/>
@@ -193,11 +194,55 @@ function Widget({
193194
icon: React.ReactElement;
194195
}) {
195196
return (
196-
<Paper variant="outlined" sx={{ height: '100%', px: 2, pt: 2, pb: 1.5 }}>
197-
<Typography component="div" variant="body2" fontWeight="bold" sx={{ mb: 1 }}>
198-
<Box sx={{ display: 'inline-block', lineHeight: 0, verticalAlign: 'bottom', mr: 1 }}>
199-
{icon}
200-
</Box>
197+
<Paper
198+
variant="outlined"
199+
sx={(theme) => ({
200+
p: 4,
201+
height: '100%',
202+
position: 'relative',
203+
borderRadius: '12px',
204+
border: '1px solid',
205+
borderColor: 'grey.100',
206+
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
207+
208+
...theme.applyDarkStyles({
209+
bgcolor: 'primaryDark.900',
210+
borderColor: 'primaryDark.700',
211+
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
212+
}),
213+
})}
214+
>
215+
<Box
216+
sx={(theme) => ({
217+
width: 40,
218+
height: 40,
219+
display: 'flex',
220+
justifyContent: 'center',
221+
alignItems: 'center',
222+
borderRadius: 1,
223+
border: '1px solid',
224+
borderColor: 'primary.200',
225+
bgcolor: 'primary.50',
226+
boxShadow:
227+
'0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
228+
...theme.applyDarkStyles({
229+
borderColor: 'primary.400',
230+
bgcolor: 'primary.900',
231+
boxShadow:
232+
'0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
233+
}),
234+
})}
235+
>
236+
{icon}
237+
</Box>
238+
<Typography
239+
fontWeight="bold"
240+
component="h3"
241+
color="text.primary"
242+
variant="body2"
243+
mt={2}
244+
mb={0.5}
245+
>
201246
{title}
202247
</Typography>
203248
{children}
@@ -643,8 +688,9 @@ function AboutContent() {
643688
<Container>
644689
<Box
645690
sx={{
646-
height: '40vh',
647-
minHeight: 300,
691+
pt: 12,
692+
693+
minHeight: 200,
648694
display: 'flex',
649695
flexDirection: 'column',
650696
justifyContent: 'center',
@@ -675,48 +721,41 @@ function AboutContent() {
675721
</Box>
676722
<References companies={CORE_CUSTOMERS} />
677723
</Container>
678-
<Box
679-
sx={(theme) => ({
680-
bgcolor: 'grey.50',
681-
...theme.applyDarkStyles({
682-
bgcolor: 'primaryDark.900',
683-
}),
684-
})}
685-
>
686-
<Container sx={{ py: { xs: 4, md: 8 } }}>
687-
<Grid container alignItems="center" spacing={4}>
688-
<Grid item xs={12} md={6}>
689-
<Typography variant="h2" sx={{ my: 1 }}>
690-
Our ultimate goal
691-
</Typography>
692-
<Typography color="text.secondary" sx={{ mb: 1, maxWidth: 450 }}>
693-
We aim high trying to design the most effective and efficient tool for building UIs,
694-
for developers and designers. MUI started back in 2014, to unify React and Material
695-
Design. Since then, we&apos;ve become a community of over 2M developers from every
696-
corner of the world.
697-
</Typography>
698-
<Typography color="text.secondary" sx={{ mb: 2 }}>
699-
We plan on doing all that cultivating our values:
700-
</Typography>
701-
{[
702-
'Customer obsessed. We put our customers front & center.',
703-
'Transparency. Most of our work is public.',
704-
'Freedom. We work from anywhere in the world.',
705-
'Autonomy. We want to create a safe, high-trust team.',
706-
"Excellence. We're aiming high, and we know it.",
707-
].map((text) => (
708-
<Box key={text} sx={{ display: 'flex', alignItems: 'flex-start', mt: 1 }}>
709-
<IconImage name="yes" />
710-
<Typography variant="body2" color="text.primary" fontWeight={700} sx={{ ml: 1 }}>
711-
{text}
712-
</Typography>
713-
</Box>
714-
))}
715-
</Grid>
716-
<MuiStatistics />
724+
<Divider />
725+
<Section bg="gradient" cozy>
726+
<Grid container alignItems="center" spacing={4}>
727+
<Grid item xs={12} md={6}>
728+
<Typography variant="h2" sx={{ my: 1 }}>
729+
Our <GradientText>ultimate</GradientText> goal
730+
</Typography>
731+
<Typography color="text.secondary" sx={{ mb: 1, maxWidth: 450 }}>
732+
We aim high trying to design the most effective and efficient tool for building UIs,
733+
for developers and designers. MUI started back in 2014, to unify React and Material
734+
Design. Since then, we&apos;ve become a community of over 2M developers from every
735+
corner of the world.
736+
</Typography>
737+
<Typography color="text.secondary" sx={{ mb: 2 }}>
738+
We plan on doing all that cultivating our values:
739+
</Typography>
740+
{[
741+
'Customer obsessed. We put our customers front & center.',
742+
'Transparency. Most of our work is public.',
743+
'Freedom. We work from anywhere in the world.',
744+
'Autonomy. We want to create a safe, high-trust team.',
745+
"Excellence. We're aiming high, and we know it.",
746+
].map((text) => (
747+
<Box key={text} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
748+
<IconImage name="yes" />
749+
<Typography variant="body2" color="text.primary" fontWeight={600} sx={{ ml: 1.5 }}>
750+
{text}
751+
</Typography>
752+
</Box>
753+
))}
717754
</Grid>
718-
</Container>
719-
</Box>
755+
<MuiStatistics />
756+
</Grid>
757+
</Section>
758+
<Divider />
720759
<Container sx={{ py: { xs: 4, md: 8 } }}>
721760
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
722761
<div>
@@ -751,7 +790,7 @@ function AboutContent() {
751790
>
752791
Company
753792
</Typography>
754-
<Typography color="text.secondary" sx={{ maxWidth: { md: 500 } }}>
793+
<Typography color="text.secondary" sx={{ maxWidth: { md: 450 } }}>
755794
The development of the project and its ecosystem is guided by an international team.
756795
</Typography>
757796
<Box sx={{ pt: 2 }}>
@@ -764,7 +803,8 @@ function AboutContent() {
764803
</Grid>
765804
</Box>
766805
</Container>
767-
<Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.700' }}>
806+
<Divider />
807+
<Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.900' }}>
768808
<Container sx={{ py: { xs: 4, sm: 8 } }}>
769809
<Typography
770810
component="h3"
@@ -811,11 +851,12 @@ function AboutContent() {
811851
</Box>
812852
</Container>
813853
</Box>
814-
<Container sx={{ py: { xs: 4, md: 8 } }}>
854+
<Divider />
855+
<Container sx={{ py: { xs: 4, md: 12 } }}>
815856
<Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 } }}>
816857
How can you support us?
817858
</Typography>
818-
<Grid container spacing={2}>
859+
<Grid container spacing={3}>
819860
<Grid item xs={12} sm={6} md={4}>
820861
<Widget
821862
icon={<ForumRoundedIcon fontSize="small" color="primary" />}
@@ -835,6 +876,7 @@ function AboutContent() {
835876
size="small"
836877
href="https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc"
837878
endIcon={<KeyboardArrowRightRounded />}
879+
sx={{ ml: -1 }}
838880
>
839881
Leave your feedback{' '}
840882
</Button>
@@ -854,6 +896,7 @@ function AboutContent() {
854896
typography: 'body2',
855897
color: 'text.secondary',
856898
pl: 2,
899+
mb: 2,
857900
}}
858901
>
859902
<li>
@@ -894,6 +937,7 @@ function AboutContent() {
894937
size="small"
895938
href="https://github.com/mui/material-ui"
896939
endIcon={<KeyboardArrowRightRounded />}
940+
sx={{ ml: -1 }}
897941
>
898942
See the repository
899943
</Button>
@@ -920,13 +964,15 @@ function AboutContent() {
920964
size="small"
921965
href="https://opencollective.com/mui"
922966
endIcon={<KeyboardArrowRightRounded />}
967+
sx={{ ml: -1 }}
923968
>
924969
See Open Collective{' '}
925970
</Button>
926971
</Widget>
927972
</Grid>
928973
</Grid>
929974
</Container>
975+
<Divider />
930976
<HeroEnd />
931977
<Divider />
932978
</React.Fragment>

‎docs/pages/base-ui.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import * as React from 'react';
2+
import Divider from '@mui/material/Divider';
3+
import Head from 'docs/src/modules/components/Head';
4+
import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
5+
import AppHeader from 'docs/src/layouts/AppHeader';
6+
import AppFooter from 'docs/src/layouts/AppFooter';
7+
import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
8+
import BaseUIHero from 'docs/src/components/productBaseUI/BaseUIHero';
9+
import BaseUISummary from 'docs/src/components/productBaseUI/BaseUISummary';
10+
import BaseUIComponents from 'docs/src/components/productBaseUI/BaseUIComponents';
11+
import BaseUICustomization from 'docs/src/components/productBaseUI/BaseUICustomization';
12+
import BaseUIEnd from 'docs/src/components/productBaseUI/BaseUIEnd';
13+
import BaseUITestimonial from 'docs/src/components/productBaseUI/BaseUITestimonial';
14+
15+
export default function Core() {
16+
return (
17+
<BrandingCssVarsProvider>
18+
<Head
19+
title="Base UI: Ship accessible & sleek components"
20+
description='Base UI gives you a set of foundational \"headless\" components that you can build with using any styling solution you choose—no need to override any default style engine or theme.'
21+
card="/static/blog/introducing-mui-base/card.png"
22+
>
23+
<link
24+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
25+
rel="stylesheet"
26+
/>
27+
</Head>
28+
<AppHeaderBanner />
29+
<AppHeader gitHubRepository="https://github.com/mui/material-ui" />
30+
<main id="main-content">
31+
<BaseUIHero />
32+
<BaseUISummary />
33+
<Divider />
34+
<BaseUIComponents />
35+
<Divider />
36+
<BaseUICustomization />
37+
<Divider />
38+
<BaseUITestimonial />
39+
<Divider />
40+
<BaseUIEnd />
41+
<Divider />
42+
</main>
43+
<AppFooter />
44+
</BrandingCssVarsProvider>
45+
);
46+
}

0 commit comments

Comments
 (0)