add stray website adjustments

danilo-leal · Oct 18, 2023 · 4dbb879 · 4dbb879
1 parent f962aa2
commit 4dbb879
Show file tree

Hide file tree

Showing 20 changed files with 232 additions and 172 deletions.
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
@@ -17,6 +17,7 @@ import TwitterIcon from '@mui/icons-material/Twitter';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import YouTubeIcon from '@mui/icons-material/YouTube';
+import DiscordIcon from 'docs/src/icons/DiscordIcon';
 import Head from 'docs/src/modules/components/Head';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
@@ -461,6 +462,10 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                   <TwitterIcon fontSize="small" />
                   Twitter
                 </Link>
+                <Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
+                  <DiscordIcon fontSize="small" />
+                  Discord
+                </Link>
                 <Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
                   <LinkedInIcon fontSize="small" />
                   LinkedIn

diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
@@ -101,7 +101,7 @@ export default function Item({
           color="text.primary"
           variant="body2"
           fontWeight="bold"
-          sx={{ display: 'block', mr: 2 }}
+          sx={{ display: 'block' }}
         >
           {title}
         </Typography>

diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
@@ -64,10 +64,6 @@ const ThemeSlider = dynamic(() => import('../showcase/ThemeSlider'), {
   ssr: false,
   loading: createLoading({ width: 400, height: 104 }),
 });
-const ThemeButton = dynamic(() => import('../showcase/ThemeButton'), {
-  ssr: false,
-  loading: createLoading({ width: 360, height: 38 }),
-});
 const ThemeAccordion = dynamic(() => import('../showcase/ThemeAccordion'), {
   ssr: false,
   loading: createLoading({ width: { md: 360, xl: 400 }, height: 231 }),
@@ -85,7 +81,7 @@ export default function Hero() {
       linearGradient
       left={
         <Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
-          <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
+          <Typography variant="h1" sx={{ mb: 2, maxWidth: 500 }}>
             <GradientText>Move faster</GradientText> <br />
             with intuitive React UI tools
           </Typography>
@@ -121,21 +117,20 @@ export default function Hero() {
           {isMdUp && (
             <Stack spacing={3} sx={{ '& > .MuiPaper-root': { maxWidth: 'none' } }}>
               <TaskCard />
-              <ThemeToggleButton />
+              <ThemeChip />
               <ThemeDatePicker />
-              <ThemeButton />
-              <FolderTable />
+              <NotificationCard />
+              <ThemeAccordion />
             </Stack>
           )}
           {isMdUp && (
             <Stack spacing={3} sx={{ ml: 3, '& > .MuiPaper-root': { maxWidth: 'none' } }}>
-              <NotificationCard />
-              <ThemeChip />
               <ThemeTimeline />
+              <ThemeToggleButton />
               <ThemeSlider />
               <ThemeTabs />
               <PlayerCard />
-              <ThemeAccordion />
+              <FolderTable />
             </Stack>
           )}
         </React.Fragment>

diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -547,7 +547,7 @@ export default function MaterialDesignComponents() {
         />
         <StyledChip
           color="primary"
-          label="Custom Theme"
+          label="Custom theme"
           size="small"
           variant={customized ? 'filled' : 'outlined'}
           onClick={() => setCustomized(true)}

diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import SwipeableViews from 'react-swipeable-views';
 import Avatar from '@mui/material/Avatar';
 import ButtonBase from '@mui/material/ButtonBase';
@@ -21,32 +22,39 @@ function Feedback({
 }) {
   return (
     <Box sx={{ color: '#fff' }}>
-      <Typography variant="body1" fontWeight="500" component="div" sx={{ mb: 2.5 }}>
+      <Typography variant="body1" fontWeight="medium" component="div" sx={{ mb: 2.5 }}>
         {quote}
       </Typography>
-      <Box sx={{ display: 'flex' }}>
-        <Avatar
-          srcSet={profile.avatarSrcSet}
-          src={profile.avatarSrc}
-          alt={`Picture of ${profile.name}`}
-          imgProps={{ loading: 'lazy' }}
-          sx={{
-            width: 58,
-            height: 58,
-            border: '2px solid',
-            borderColor: 'primary.200',
-            bgcolor: 'grey.800',
-          }}
-        />
-        <Box sx={{ ml: 2 }}>
-          <Typography fontWeight="500" sx={{ mb: 1 }}>
-            {profile.name},{' '}
-            <Box component="span" sx={{ color: 'grey.500', fontWeight: 'regular' }}>
-              {profile.role}
-            </Box>
-          </Typography>
-          {profile.company}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <Box
+          sx={(theme) => ({
+            p: 0.5,
+            border: '1px solid',
+            borderColor: 'primary.800',
+            bgcolor: alpha(theme.palette.primary[900], 0.5),
+            borderRadius: 99,
+          })}
+        >
+          <Avatar
+            srcSet={profile.avatarSrcSet}
+            src={profile.avatarSrc}
+            alt={`${profile.name}'s profile picture`}
+            imgProps={{ loading: 'lazy' }}
+            sx={{
+              width: 52,
+              height: 52,
+            }}
+          />
         </Box>
+        <div>
+          <Typography fontWeight="semiBold" color="text.primary">
+            {profile.name}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {profile.role}
+          </Typography>
+        </div>
+        <Box sx={{ ml: 'auto' }}>{profile.company}</Box>
       </Box>
     </Box>
   );
@@ -55,7 +63,7 @@ function Feedback({
 const TESTIMONIALS = [
   {
     quote:
-      '"MUI looks great and lets us deliver fast, thanks to their solid API design and documentation - it\'s refreshing to use a component library where you get everything you need from their site rather than Stack Overflow. We think the upcoming version, with extra themes and customizability, will make MUI even more of a game changer. We\'re extremely grateful to the team for the time and effort spent maintaining the project."',
+      '"Material UI looks great and lets us deliver fast, thanks to their solid API design and documentation - it\'s refreshing to use a component library where you get everything you need from their site rather than Stack Overflow. We think the upcoming version, with extra themes and customizability, will make Material UI even more of a game changer. We\'re extremely grateful to the team for the time and effort spent maintaining the project."',
     profile: {
       avatarSrc: 'https://avatars.githubusercontent.com/u/197016?s=58',
       avatarSrcSet: 'https://avatars.githubusercontent.com/u/197016?s=116 2x',
@@ -74,7 +82,7 @@ const TESTIMONIALS = [
   },
   {
     quote:
-      '"MUI offers a wide variety of high quality components that have allowed us to ship features faster. MUI has been used by more than a hundred engineers in our organization. What\'s more, MUI\'s well architected customization system has allowed us to differentiate ourselves in the marketplace."',
+      '"Material UI offers a wide variety of high quality components that have allowed us to ship features faster. It has been used by more than a hundred engineers in our organization. What\'s more, Material UI\'s well architected customization system has allowed us to differentiate ourselves in the marketplace."',
     profile: {
       avatarSrc: 'https://avatars.githubusercontent.com/u/28296253?s=58',
       avatarSrcSet: 'https://avatars.githubusercontent.com/u/28296253?s=116 2x',
@@ -93,7 +101,7 @@ const TESTIMONIALS = [
   },
   {
     quote:
-      '"After much research on React component libraries, we decided to ditch our in-house library for MUI, using its powerful customization system to implement our Design System. This simple move did a rare thing in engineering: it lowered our maintenance costs while enhancing both developer and customer experience. All of this was done without sacrificing the organization\'s branding and visual identity."',
+      '"After much research on React component libraries, we decided to ditch our in-house library for Material UI, using its powerful customization system to implement our Design System. This simple move did a rare thing in engineering: it lowered our maintenance costs while enhancing both developer and customer experience. All of this was done without sacrificing the organization\'s branding and visual identity."',
     profile: {
       avatarSrc: 'https://avatars.githubusercontent.com/u/732422?s=58',
       avatarSrcSet: 'https://avatars.githubusercontent.com/u/732422?s=116 2x',

diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -75,18 +75,16 @@ export default function BaseUIComponents() {
     <Section bg="gradient">
       <Grid container spacing={2}>
         <Grid md={6} sx={{ minWidth: 0 }}>
-          <Box maxWidth={500} sx={{ mb: 4 }}>
-            <SectionHeadline
-              overline="Unstyled components"
-              title={
-                <Typography variant="h2">
-                  Choose your own
-                  <br /> <GradientText>CSS adventure</GradientText>
-                </Typography>
-              }
-              description="Base UI's skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you're free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
-            />
-          </Box>
+          <SectionHeadline
+            overline="Unstyled components"
+            title={
+              <Typography variant="h2">
+                Choose your own
+                <br /> <GradientText>CSS adventure</GradientText>
+              </Typography>
+            }
+            description="Base UI's skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you're free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
+          />
           <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
             {DEMOS.map((name) => (
               <Highlighter key={name} selected={name === demo} onClick={() => setDemo(name)}>

diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx
@@ -1,18 +1,16 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Grid from '@mui/material/Unstable_Grid2';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 import CompareIcon from '@mui/icons-material/Compare';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import { alpha } from '@mui/material/styles';
+import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
-import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
 
 export default function BaseUIEnd() {
@@ -45,17 +43,12 @@ export default function BaseUIEnd() {
               </React.Fragment>
             }
           />
-          <Button
-            href={ROUTES.baseDocs}
-            component={Link}
-            noLinkStyle
-            size="large"
-            variant="contained"
-            endIcon={<KeyboardArrowRightRounded />}
-            sx={{ mt: 2 }}
-          >
-            Get started
-          </Button>
+          <GetStartedButtons
+            primaryUrl={ROUTES.baseDocs}
+            secondaryLabel="Learn Base UI"
+            secondaryUrl={ROUTES.baseQuickstart}
+            altInstallation="npm install @mui/base"
+          />
         </Grid>
         <Grid xs={12} sm={6}>
           <List sx={{ '& > li': { alignItems: 'flex-start' } }}>

diff --git a/docs/src/components/productBaseUI/BaseUIHero.tsx b/docs/src/components/productBaseUI/BaseUIHero.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import dynamic from 'next/dynamic';
-
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-
 // Local imports
 import HeroContainer from 'docs/src/layouts/HeroContainer';
 import IconImage from 'docs/src/components/icon/IconImage';

diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable material-ui/straight-quotes */
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Unstable_Grid2';
@@ -19,19 +20,25 @@ export default function BaseUITestimonial() {
               border: '1px solid',
               borderColor: 'divider',
               borderRadius: 1,
-              pt: 3,
+              pt: 2,
               pl: 3,
               background: 'linear-gradient(260deg, #3399FF 0%, #0059B3 95%)',
               backgroundClip: 'padding-box',
               overflow: 'auto',
               '& img': {
                 width: '100%',
-                borderTopLeftRadius: '12px',
+                borderTopLeftRadius: '8px',
                 display: 'block',
               },
             }}
           >
-            <Typography variant="h4" component="h2" mb={2.5} sx={{ color: '#fff' }}>
+            <Typography
+              variant="h4"
+              component="h2"
+              mb={2.5}
+              fontWeight="medium"
+              sx={{ color: '#FFF' }}
+            >
               Nhost&apos;s dashboard
             </Typography>
             <Box
@@ -68,10 +75,24 @@ export default function BaseUITestimonial() {
           </Typography>
           <Divider />
           <Box sx={{ display: 'flex', gap: 1 }}>
-            <Avatar
-              alt=""
-              src="https://media.licdn.com/dms/image/C4D03AQHm6cbz2UDXpw/profile-displayphoto-shrink_800_800/0/1642674447256?e=2147483647&v=beta&t=L8g2vW_8mG8AvB3lwui0CT8969_Cx9QQ0iJXIS47i0o"
-            />
+            <Box
+              sx={(theme) => ({
+                p: 0.5,
+                bgcolor: 'primary.50',
+                border: '1px solid',
+                borderColor: 'primary.200',
+                borderRadius: 99,
+                ...theme.applyDarkStyles({
+                  borderColor: 'primary.800',
+                  bgcolor: alpha(theme.palette.primary[900], 0.5),
+                }),
+              })}
+            >
+              <Avatar
+                alt="Szilárd Dóró's profile picture"
+                src="https://media.licdn.com/dms/image/C4D03AQHm6cbz2UDXpw/profile-displayphoto-shrink_800_800/0/1642674447256?e=2147483647&v=beta&t=L8g2vW_8mG8AvB3lwui0CT8969_Cx9QQ0iJXIS47i0o"
+              />
+            </Box>
             <Box sx={{ flex: 1 }}>
               <Typography variant="body2" fontWeight={600}>
                 Szilárd Dóró