Skip to content

Commit

Permalink
[website] Add Base UI marketing page (mui#36622)
Browse files Browse the repository at this point in the history 
Signed-off-by: Danilo Leal <[email protected]>
Co-authored-by: Danilo Leal <[email protected]>
  • Loading branch information
@siriwatknp @danilo-leal
siriwatknp and danilo-leal authored Jul 18, 2023
1 parent 1b9c8ab commit 3c99d8b
Show file tree
Hide file tree
Showing 114 changed files with 5,580 additions and 993 deletions.
1 change: 1 addition & 0 deletions .stylelintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = {
],
rules: {
'alpha-value-notation': null,
'custom-property-pattern': null,
'declaration-colon-newline-after': null,
'function-parentheses-newline-inside': null, // not compatible with prettier
'media-feature-range-notation': null,
Expand Down
27 changes: 23 additions & 4 deletions docs/pages/_document.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,11 @@ export default class MyDocument extends Document {
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link // prevent font flash
{/* ========== Font preload (prevent font flash) ============= */}
<link
rel="preload"
// optimized for english characters (40kb -> 6kb)
href="/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2"
href="/static/fonts/GeneralSans-Semibold-subset.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
Expand All @@ -96,14 +97,32 @@ export default class MyDocument extends Document {
// the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__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');}`,
__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');}`,
}}
/>
<link
rel="preload"
// optimized for english characters (40kb -> 6kb)
href="/static/fonts/IBMPlexSans-Regular-subset.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<style
// the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__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');}`,
__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');}`,
}}
/>
{/* =========================================================== */}
<style
// Loads General Sans: Regular (400), Medium (500), SemiBold (600), Bold (700)
// Typeface documentation: https://www.fontshare.com/fonts/general-sans
// use https://cssminifier.com/ to minify
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__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;}`,
}}
/>
<style
Expand Down
152 changes: 99 additions & 53 deletions docs/pages/about.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import AppFooter from 'docs/src/layouts/AppFooter';
import MuiStatistics from 'docs/src/components/home/MuiStatistics';
import GradientText from 'docs/src/components/typography/GradientText';
import ROUTES from 'docs/src/route';
import Section from 'docs/src/layouts/Section';
import IconImage from 'docs/src/components/icon/IconImage';
import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
Expand Down Expand Up @@ -101,7 +102,7 @@ function Person(props: Profile & { sx?: PaperProps['sx'] }) {
borderRadius: 1,
backgroundColor: 'primary.100',
...theme.applyDarkStyles({
backgroundColor: 'primary.700',
backgroundColor: 'primary.900',
}),
})}
/>
Expand Down Expand Up @@ -193,11 +194,55 @@ function Widget({
icon: React.ReactElement;
}) {
return (
<Paper variant="outlined" sx={{ height: '100%', px: 2, pt: 2, pb: 1.5 }}>
<Typography component="div" variant="body2" fontWeight="bold" sx={{ mb: 1 }}>
<Box sx={{ display: 'inline-block', lineHeight: 0, verticalAlign: 'bottom', mr: 1 }}>
{icon}
</Box>
<Paper
variant="outlined"
sx={(theme) => ({
p: 4,
height: '100%',
position: 'relative',
borderRadius: '12px',
border: '1px solid',
borderColor: 'grey.100',
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,

...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
borderColor: 'primaryDark.700',
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
}),
})}
>
<Box
sx={(theme) => ({
width: 40,
height: 40,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 1,
border: '1px solid',
borderColor: 'primary.200',
bgcolor: 'primary.50',
boxShadow:
'0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
...theme.applyDarkStyles({
borderColor: 'primary.400',
bgcolor: 'primary.900',
boxShadow:
'0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
}),
})}
>
{icon}
</Box>
<Typography
fontWeight="bold"
component="h3"
color="text.primary"
variant="body2"
mt={2}
mb={0.5}
>
{title}
</Typography>
{children}
Expand Down Expand Up @@ -643,8 +688,9 @@ function AboutContent() {
<Container>
<Box
sx={{
height: '40vh',
minHeight: 300,
pt: 12,

minHeight: 200,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
Expand Down Expand Up @@ -675,48 +721,41 @@ function AboutContent() {
</Box>
<References companies={CORE_CUSTOMERS} />
</Container>
<Box
sx={(theme) => ({
bgcolor: 'grey.50',
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
}),
})}
>
<Container sx={{ py: { xs: 4, md: 8 } }}>
<Grid container alignItems="center" spacing={4}>
<Grid item xs={12} md={6}>
<Typography variant="h2" sx={{ my: 1 }}>
Our ultimate goal
</Typography>
<Typography color="text.secondary" sx={{ mb: 1, maxWidth: 450 }}>
We aim high trying to design the most effective and efficient tool for building UIs,
for developers and designers. MUI started back in 2014, to unify React and Material
Design. Since then, we&apos;ve become a community of over 2M developers from every
corner of the world.
</Typography>
<Typography color="text.secondary" sx={{ mb: 2 }}>
We plan on doing all that cultivating our values:
</Typography>
{[
'Customer obsessed. We put our customers front & center.',
'Transparency. Most of our work is public.',
'Freedom. We work from anywhere in the world.',
'Autonomy. We want to create a safe, high-trust team.',
"Excellence. We're aiming high, and we know it.",
].map((text) => (
<Box key={text} sx={{ display: 'flex', alignItems: 'flex-start', mt: 1 }}>
<IconImage name="yes" />
<Typography variant="body2" color="text.primary" fontWeight={700} sx={{ ml: 1 }}>
{text}
</Typography>
</Box>
))}
</Grid>
<MuiStatistics />
<Divider />
<Section bg="gradient" cozy>
<Grid container alignItems="center" spacing={4}>
<Grid item xs={12} md={6}>
<Typography variant="h2" sx={{ my: 1 }}>
Our <GradientText>ultimate</GradientText> goal
</Typography>
<Typography color="text.secondary" sx={{ mb: 1, maxWidth: 450 }}>
We aim high trying to design the most effective and efficient tool for building UIs,
for developers and designers. MUI started back in 2014, to unify React and Material
Design. Since then, we&apos;ve become a community of over 2M developers from every
corner of the world.
</Typography>
<Typography color="text.secondary" sx={{ mb: 2 }}>
We plan on doing all that cultivating our values:
</Typography>
{[
'Customer obsessed. We put our customers front & center.',
'Transparency. Most of our work is public.',
'Freedom. We work from anywhere in the world.',
'Autonomy. We want to create a safe, high-trust team.',
"Excellence. We're aiming high, and we know it.",
].map((text) => (
<Box key={text} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
<IconImage name="yes" />
<Typography variant="body2" color="text.primary" fontWeight={600} sx={{ ml: 1.5 }}>
{text}
</Typography>
</Box>
))}
</Grid>
</Container>
</Box>
<MuiStatistics />
</Grid>
</Section>
<Divider />
<Container sx={{ py: { xs: 4, md: 8 } }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>
Expand Down Expand Up @@ -751,7 +790,7 @@ function AboutContent() {
>
Company
</Typography>
<Typography color="text.secondary" sx={{ maxWidth: { md: 500 } }}>
<Typography color="text.secondary" sx={{ maxWidth: { md: 450 } }}>
The development of the project and its ecosystem is guided by an international team.
</Typography>
<Box sx={{ pt: 2 }}>
Expand All @@ -764,7 +803,8 @@ function AboutContent() {
</Grid>
</Box>
</Container>
<Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.700' }}>
<Divider />
<Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.900' }}>
<Container sx={{ py: { xs: 4, sm: 8 } }}>
<Typography
component="h3"
Expand Down Expand Up @@ -811,11 +851,12 @@ function AboutContent() {
</Box>
</Container>
</Box>
<Container sx={{ py: { xs: 4, md: 8 } }}>
<Divider />
<Container sx={{ py: { xs: 4, md: 12 } }}>
<Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 } }}>
How can you support us?
</Typography>
<Grid container spacing={2}>
<Grid container spacing={3}>
<Grid item xs={12} sm={6} md={4}>
<Widget
icon={<ForumRoundedIcon fontSize="small" color="primary" />}
Expand All @@ -835,6 +876,7 @@ function AboutContent() {
size="small"
href="https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc"
endIcon={<KeyboardArrowRightRounded />}
sx={{ ml: -1 }}
>
Leave your feedback{' '}
</Button>
Expand All @@ -854,6 +896,7 @@ function AboutContent() {
typography: 'body2',
color: 'text.secondary',
pl: 2,
mb: 2,
}}
>
<li>
Expand Down Expand Up @@ -894,6 +937,7 @@ function AboutContent() {
size="small"
href="https://github.com/mui/material-ui"
endIcon={<KeyboardArrowRightRounded />}
sx={{ ml: -1 }}
>
See the repository
</Button>
Expand All @@ -920,13 +964,15 @@ function AboutContent() {
size="small"
href="https://opencollective.com/mui"
endIcon={<KeyboardArrowRightRounded />}
sx={{ ml: -1 }}
>
See Open Collective{' '}
</Button>
</Widget>
</Grid>
</Grid>
</Container>
<Divider />
<HeroEnd />
<Divider />
</React.Fragment>
Expand Down
46 changes: 46 additions & 0 deletions docs/pages/base-ui.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import * as React from 'react';
import Divider from '@mui/material/Divider';
import Head from 'docs/src/modules/components/Head';
import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
import AppHeader from 'docs/src/layouts/AppHeader';
import AppFooter from 'docs/src/layouts/AppFooter';
import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
import BaseUIHero from 'docs/src/components/productBaseUI/BaseUIHero';
import BaseUISummary from 'docs/src/components/productBaseUI/BaseUISummary';
import BaseUIComponents from 'docs/src/components/productBaseUI/BaseUIComponents';
import BaseUICustomization from 'docs/src/components/productBaseUI/BaseUICustomization';
import BaseUIEnd from 'docs/src/components/productBaseUI/BaseUIEnd';
import BaseUITestimonial from 'docs/src/components/productBaseUI/BaseUITestimonial';

export default function Core() {
return (
<BrandingCssVarsProvider>
<Head
title="Base UI: Ship accessible & sleek components"
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.'
card="/static/blog/introducing-mui-base/card.png"
>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
</Head>
<AppHeaderBanner />
<AppHeader gitHubRepository="https://github.com/mui/material-ui" />
<main id="main-content">
<BaseUIHero />
<BaseUISummary />
<Divider />
<BaseUIComponents />
<Divider />
<BaseUICustomization />
<Divider />
<BaseUITestimonial />
<Divider />
<BaseUIEnd />
<Divider />
</main>
<AppFooter />
</BrandingCssVarsProvider>
);
}
Loading

0 comments on commit 3c99d8b

Please sign in to comment.