diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index b75f8f2c300eca..4f0f77001edd42 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -37,6 +37,8 @@ const ALLOWED_TAGS = [ 'Developer Survey', 'Guide', 'Product', + 'Case Study', + 'Customer', // Product tags 'Material UI', 'Base UI', @@ -79,3 +81,13 @@ export const getAllBlogPosts = () => { tagInfo, }; }; + +export const getCaseStudies = () => { + const filePaths = getBlogFilePaths(); + + const caseStudies = filePaths + .map((name) => getBlogPost(name)) + .filter((post) => post.slug.includes('case-study')); + + return caseStudies; +}; diff --git a/docs/pages/blog/dummy-case-study-two.js b/docs/pages/blog/dummy-case-study-two.js new file mode 100644 index 00000000000000..059bb1609f6a2c --- /dev/null +++ b/docs/pages/blog/dummy-case-study-two.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './dummy-case-study-two.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/dummy-case-study-two.md b/docs/pages/blog/dummy-case-study-two.md new file mode 100644 index 00000000000000..e59409d532722d --- /dev/null +++ b/docs/pages/blog/dummy-case-study-two.md @@ -0,0 +1,9 @@ +--- +title: Example case study +description: This is an example case study for the Customers page. +image: 'https://i.ibb.co/k3W3v7x/example-3.png' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- diff --git a/docs/pages/blog/dummy-case-study.js b/docs/pages/blog/dummy-case-study.js new file mode 100644 index 00000000000000..d1092d619ea1c6 --- /dev/null +++ b/docs/pages/blog/dummy-case-study.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './dummy-case-study.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/dummy-case-study.md b/docs/pages/blog/dummy-case-study.md new file mode 100644 index 00000000000000..e59409d532722d --- /dev/null +++ b/docs/pages/blog/dummy-case-study.md @@ -0,0 +1,9 @@ +--- +title: Example case study +description: This is an example case study for the Customers page. +image: 'https://i.ibb.co/k3W3v7x/example-3.png' +date: 2022-06-08T00:00:00.000Z +authors: ['oliviertassinari'] +tags: ['Case Study', 'Customer'] +manualCard: true +--- diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx new file mode 100644 index 00000000000000..53bc4fdcb8f2a5 --- /dev/null +++ b/docs/pages/customers.tsx @@ -0,0 +1,57 @@ +import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; +import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner'; +import CustomersHero from 'docs/src/components/customers/CustomersHero'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import Head from 'docs/src/modules/components/Head'; +import * as React from 'react'; +import Box from '@mui/material/Box'; +import AppFooter from 'docs/src/layouts/AppFooter'; +import HeroEnd from 'docs/src/components/home/HeroEnd'; +import Divider from '@mui/material/Divider'; +import CustomersSpotlight from 'docs/src/components/customers/CustomersSpotlight'; +import { getCaseStudies } from 'docs/lib/sourcing'; +import { InferGetStaticPropsType } from 'next'; +import CustomersTestimonials from 'docs/src/components/customers/CustomersTestimonials'; +import CustomerLogos from 'docs/src/components/customers/CustomerLogos'; + +export const getStaticProps = () => { + const customers = getCaseStudies(); + return { + props: { + customers, + }, + }; +}; + +export default function Customers(props: InferGetStaticPropsType) { + return ( + + + + + +
+ + + + + + + + + + + +
+ + + ); +} diff --git a/docs/src/components/customers/CustomerLogos.tsx b/docs/src/components/customers/CustomerLogos.tsx new file mode 100644 index 00000000000000..14108764145d8f --- /dev/null +++ b/docs/src/components/customers/CustomerLogos.tsx @@ -0,0 +1,108 @@ +import * as React from 'react'; +import dynamic from 'next/dynamic'; +import Stack from '@mui/material/Stack'; +import Chip from '@mui/material/Chip'; +import Section from 'docs/src/layouts/Section'; +import Grid from '@mui/material/Grid'; +import Typography from '@mui/material/Typography'; +import { + MATERIAL_UI_CUSTOMERS, + BASE_UI_CUSTOMERS, + JOY_UI_CUSTOMERS, + DATA_GRID_CUSTOMERS, + DATE_TIME_CUSTOMERS, + CHARTS_CUSTOMERS, + TREE_VIEW_CUSTOMERS, + TOOLPAD_CUSTOMERS, +} from './customerData'; +import SectionHeadline from '../typography/SectionHeadline'; +import GradientText from '../typography/GradientText'; + +const LogosGrid = dynamic(() => import('./LogosGrid')); + +const PRODUCT_CATEGORIES = [ + { label: 'Material UI', value: 'material-ui' }, + { label: 'Base UI', value: 'base-ui' }, + { label: 'Joy UI', value: 'joy-ui' }, + { label: 'Data Grid', value: 'data-grid' }, + { label: 'Date and Time Pickers', value: 'date-time' }, + { label: 'Charts', value: 'charts' }, + { label: 'Tree View', value: 'tree-view' }, + { label: 'Toolpad', value: 'toolpad' }, +] as const; + +type ProductCategory = (typeof PRODUCT_CATEGORIES)[number]['value']; + +// Map of product categories to their respective customers +const PRODUCT_CUSTOMERS: Record = { + 'material-ui': MATERIAL_UI_CUSTOMERS, + 'base-ui': BASE_UI_CUSTOMERS, + 'joy-ui': JOY_UI_CUSTOMERS, + 'data-grid': DATA_GRID_CUSTOMERS, + 'date-time': DATE_TIME_CUSTOMERS, + charts: CHARTS_CUSTOMERS, + 'tree-view': TREE_VIEW_CUSTOMERS, + toolpad: TOOLPAD_CUSTOMERS, +}; + +export default function CustomersLogos() { + const [activeCategory, setActiveCategory] = React.useState('material-ui'); + + return ( +
+ + MUI's comprehensive suite of UI tools
helps you +   ship better and faster + + } + /> + + {PRODUCT_CATEGORIES.map((category) => ( + setActiveCategory(category.value)} + sx={(theme) => ({ + borderRadius: '18px', + '&.MuiChip-root': { + backgroundColor: activeCategory === category.value ? 'primary.main' : 'transparent', + border: activeCategory === category.value ? '1px solid' : 'none', + borderColor: activeCategory === category.value ? 'secondary.main' : 'none', + color: activeCategory === category.value ? 'white' : 'text.secondary', + ...theme.applyDarkStyles({ + backgroundColor: activeCategory === category.value ? '#0C1D2F' : 'transparent', + border: activeCategory === category.value ? '1px solid' : 'none', + borderColor: activeCategory === category.value ? 'primary.dark' : 'none', + color: activeCategory === category.value ? 'text.primary' : 'text.primary', + }), + '&:hover': { + backgroundColor: + activeCategory === category.value ? 'primary.dark' : 'action.hover', + }, + }, + })} + /> + ))} + + + + +
+ ); +} diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx new file mode 100644 index 00000000000000..1868d08594c51a --- /dev/null +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -0,0 +1,230 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import Avatar from '@mui/material/Avatar'; + +const QUOTES = [ + // Using current Testimonials as placeholders just to visualize + + { + quote: + '"We\'ve relied on Material UI really heavily. I override a lot of default styles to try and make things our own, but the time we save with complex components like the Autocomplete and the Data Grid are so worth it. Every other library I try has 80% of what I\'m looking for when it comes to complex use cases, Material UI has it all under one roof which is a huge help for our small team."', + profile: { + avatarSrc: 'https://avatars.githubusercontent.com/u/21114044?s=58', + avatarSrcSet: 'https://avatars.githubusercontent.com/u/21114044?s=116 2x', + name: 'Kyle Gill', + role: 'Engineer & Designer', + company: ( + Particl logo + ), + gridArea: 'one', + }, + }, + { + quote: + '"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\'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', + name: 'Jean-Laurent de Morlhon', + role: 'VP of Engineering', + company: ( + Docker logo + ), + gridArea: 'two', + }, + }, + { + quote: + '"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', + name: 'Joona Rahko', + role: 'Staff Software Engineer', + company: ( + Unity logo + ), + gridArea: 'three', + }, + }, + { + quote: + '"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', + name: 'Gustavo de Paula', + role: 'Specialist Software Engineer', + company: ( + Loggi logo + ), + gridArea: 'four', + }, + }, +]; + +function Data({ + quote, + profile, +}: { + quote: string; + profile: { + avatarSrc: string; + avatarSrcSet: string; + name: string; + role: string; + gridArea: string; + company?: React.ReactElement; + }; +}) { + const isFirstColumn = profile.gridArea === 'one'; + const isLastColumn = profile.gridArea === 'four'; + + return ( + ({ + p: 3, + height: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + color: 'text.primary', + border: '1px solid', + borderColor: 'divider', + background: + isFirstColumn || isLastColumn + ? `radial-gradient(#ebf5ff 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, + linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 5%, #FFF 20%)` + : 'background.paper', + ...theme.applyDarkStyles({ + background: + isFirstColumn || isLastColumn + ? `radial-gradient(#131C23 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, + linear-gradient(180deg, #131C23 5%, #15181A 20%)` + : 'background.paper', + }), + gap: 2, + })} + > +
{profile.company}
+ + + {quote} + + +
+ + {profile.name} + + {profile.role} +
+ + + + + ); +} + +export default function CustomerQuotes() { + return ( + + {QUOTES.map((item) => ( + + + + ))} + + ); +} diff --git a/docs/src/components/customers/CustomersHero.tsx b/docs/src/components/customers/CustomersHero.tsx new file mode 100644 index 00000000000000..15c7370c86d94d --- /dev/null +++ b/docs/src/components/customers/CustomersHero.tsx @@ -0,0 +1,24 @@ +import Section from 'docs/src/layouts/Section'; +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import SectionHeadline from '../typography/SectionHeadline'; +import GradientText from '../typography/GradientText'; + +export default function CustomersHero() { + return ( +
+ + Meet the teams +
+ powered by MUI + + } + description="See how MUI's comprehensive suite of UI tools helps them ship better and faster" + /> +
+ ); +} diff --git a/docs/src/components/customers/CustomersSpotlight.tsx b/docs/src/components/customers/CustomersSpotlight.tsx new file mode 100644 index 00000000000000..dbec49c5dd8f97 --- /dev/null +++ b/docs/src/components/customers/CustomersSpotlight.tsx @@ -0,0 +1,96 @@ +import * as React from 'react'; +import { BlogPost } from 'docs/lib/sourcing'; +import Button from '@mui/material/Button'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import { Link } from '@mui/docs/Link'; +import Container from '@mui/material/Container'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; +import Divider from '@mui/material/Divider'; + +interface SpotlightProps { + posts: BlogPost[]; +} + +function Spotlight({ posts }: SpotlightProps) { + return ( + + + {posts.map((post, index) => ( + ({ + p: 2, + display: 'flex', + flexDirection: 'column', + backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)', + ...theme.applyDarkStyles({ + background: (theme.vars || theme).palette.primaryDark[900], + backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)', + }), + })} + > + {post.image && ( + + )} + + +

{post.title}

+

{post.description}

+ + + + ))} + + + ); +} + +interface CustomersSpotlightProps { + customers: BlogPost[]; +} + +export default function CustomersSpotlight({ customers }: CustomersSpotlightProps) { + const firstPosts = customers.slice(0, 2); + + return ; +} diff --git a/docs/src/components/customers/CustomersTestimonials.tsx b/docs/src/components/customers/CustomersTestimonials.tsx new file mode 100644 index 00000000000000..cf9cf9e6bd1c64 --- /dev/null +++ b/docs/src/components/customers/CustomersTestimonials.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import Typography from 'docs/src/pages/premium-themes/onepirate/modules/components/Typography'; +import dynamic from 'next/dynamic'; +import Box from '@mui/material/Box'; +import SectionHeadline from '../typography/SectionHeadline'; +import GradientText from '../typography/GradientText'; + +const CustomerQuotes = dynamic(() => import('./CustomerQuotes')); + +export default function CustomersTestimonials() { + return ( + + + Trusted by +  the best  + in the game + + } + description="The world's best product teams trust MUI to deliver an unrivaled experience for both developers and users." + /> + + + ); +} diff --git a/docs/src/components/customers/LogosGrid.tsx b/docs/src/components/customers/LogosGrid.tsx new file mode 100644 index 00000000000000..6a60e3a8f62fa8 --- /dev/null +++ b/docs/src/components/customers/LogosGrid.tsx @@ -0,0 +1,288 @@ +import * as React from 'react'; +import Grid from '@mui/material/Grid'; +import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage'; +import Typography from '@mui/material/Typography'; +import { useTheme } from '@mui/material/styles'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import Link from 'next/link'; + +// These are all placeholders!!! +// TODO: fill with real data once design is approved + +export const CORE_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + }, + { + alt: 'Nasa logo', + name: 'companies/nasa', + mode: '', + width: 52, + height: 42, + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + }, + { + alt: 'Unity logo', + name: 'companies/unity', + width: 69, + height: 52, + }, + { + alt: 'Shutterstock logo', + name: 'companies/shutterstock', + width: 100, + height: 52, + }, +]; + +export const ADVANCED_CUSTOMERS: Array = [ + { + alt: 'Southwest logo', + name: 'companies/southwest', + width: 130, + height: 54, + style: { + marginTop: -10, + }, + }, + { + alt: 'Tesla logo', + name: 'companies/tesla', + width: 140, + height: 52, + style: { + marginTop: -11, + }, + }, + { + alt: 'Apple logo', + name: 'companies/apple', + width: 29, + height: 52, + style: { + marginTop: -21, + }, + }, + { + alt: 'Siemens logo', + name: 'companies/siemens', + mode: '', + width: 119, + height: 59, + style: { + marginTop: -13, + }, + }, + { + alt: 'Volvo logo', + name: 'companies/volvo', + width: 128, + height: 52, + style: { + marginTop: -11, + }, + }, + { + alt: 'Deloitte logo', + name: 'companies/deloitte', + width: 97, + height: 52, + style: { + marginTop: -12, + }, + }, +]; + +export const DESIGNKITS_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + }, + { + alt: 'Apple logo', + name: 'companies/apple', + width: 29, + height: 52, + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + }, + { + alt: 'X logo', + name: 'companies/x', + mode: '', + width: 30, + height: 30, + }, + { + alt: 'Salesforce logo', + name: 'companies/salesforce', + mode: '', + width: 50, + height: 52, + }, +]; + +export const TEMPLATES_CUSTOMERS: Array = [ + { + alt: 'Ebay logo', + name: 'companies/ebay', + width: 73, + height: 52, + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + }, + { + alt: 'Samsung logo', + name: 'companies/samsung', + mode: '', + width: 88, + height: 52, + }, + { + alt: 'Patreon logo', + name: 'companies/patreon', + width: 103, + height: 52, + }, + { + alt: 'AT&T logo', + name: 'companies/atandt', + width: 71, + height: 52, + }, + { + alt: 'Verizon logo', + name: 'companies/verizon', + width: 91, + height: 52, + }, +]; + +interface CustomerData extends IconImageProps { + hasCaseStudy?: boolean; + caseStudyUrl?: string; +} + +export default function LogosGrid({ data = [] }: { data?: Array }) { + const theme = useTheme(); + + if (!data || data.length === 0) { + return null; + } + + const sortedData = [...data].sort((a, b) => { + if (a.hasCaseStudy && !b.hasCaseStudy) { + return -1; + } + if (!a.hasCaseStudy && b.hasCaseStudy) { + return 1; + } + return 0; + }); + + return ( + + {sortedData.map((imgProps) => ( + + + {imgProps.hasCaseStudy && ( + + Read more + + + )} + + ))} + + ); +} diff --git a/docs/src/components/customers/customerData.ts b/docs/src/components/customers/customerData.ts new file mode 100644 index 00000000000000..3f2879948e1d85 --- /dev/null +++ b/docs/src/components/customers/customerData.ts @@ -0,0 +1,259 @@ +import { IconImageProps } from 'docs/src/components/icon/IconImage'; + +// These are all placeholders!!! +// TODO: fill with real data once design is approved + +interface CustomerData extends IconImageProps { + hasCaseStudy?: boolean; + caseStudyUrl?: string; +} + +export const MATERIAL_UI_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/spotify-case-study', + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/netflix-case-study', + }, + { + alt: 'Unity logo', + name: 'companies/unity', + width: 69, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Shutterstock logo', + name: 'companies/shutterstock', + width: 100, + height: 52, + hasCaseStudy: false, + }, +]; + +export const BASE_UI_CUSTOMERS: Array = [ + { + alt: 'Southwest logo', + name: 'companies/southwest', + width: 130, + height: 54, + style: { + marginTop: -10, + }, + hasCaseStudy: true, + caseStudyUrl: '/blog/southwest-case-study', + }, + { + alt: 'Tesla logo', + name: 'companies/tesla', + width: 140, + height: 52, + style: { + marginTop: -11, + }, + hasCaseStudy: false, + }, + { + alt: 'Apple logo', + name: 'companies/apple', + width: 29, + height: 52, + style: { + marginTop: -21, + }, + hasCaseStudy: true, + caseStudyUrl: '/blog/apple-case-study', + }, +]; + +export const JOY_UI_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/spotify-case-study', + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Apple logo', + name: 'companies/apple', + width: 29, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/apple-case-study', + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + hasCaseStudy: false, + }, +]; + +export const DATA_GRID_CUSTOMERS: Array = [ + { + alt: 'Ebay logo', + name: 'companies/ebay', + width: 73, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/ebay-case-study', + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Samsung logo', + name: 'companies/samsung', + mode: '', + width: 88, + height: 52, + hasCaseStudy: false, + }, +]; + +export const DATE_TIME_CUSTOMERS: Array = [ + { + alt: 'Patreon logo', + name: 'companies/patreon', + width: 103, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/patreon-case-study', + }, + { + alt: 'AT&T logo', + name: 'companies/atandt', + width: 71, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Verizon logo', + name: 'companies/verizon', + width: 91, + height: 52, + hasCaseStudy: false, + }, +]; + +export const CHARTS_CUSTOMERS: Array = [ + { + alt: 'Siemens logo', + name: 'companies/siemens', + mode: '', + width: 119, + height: 59, + style: { + marginTop: -13, + }, + hasCaseStudy: true, + caseStudyUrl: '/blog/siemens-case-study', + }, + { + alt: 'Volvo logo', + name: 'companies/volvo', + width: 128, + height: 52, + style: { + marginTop: -11, + }, + hasCaseStudy: false, + }, + { + alt: 'Deloitte logo', + name: 'companies/deloitte', + width: 97, + height: 52, + style: { + marginTop: -12, + }, + hasCaseStudy: false, + }, +]; + +export const TREE_VIEW_CUSTOMERS: Array = [ + { + alt: 'X logo', + name: 'companies/x', + mode: '', + width: 30, + height: 30, + hasCaseStudy: true, + caseStudyUrl: '/blog/x-case-study', + }, + { + alt: 'Salesforce logo', + name: 'companies/salesforce', + mode: '', + width: 50, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Nasa logo', + name: 'companies/nasa', + mode: '', + width: 52, + height: 42, + hasCaseStudy: false, + }, +]; + +export const TOOLPAD_CUSTOMERS: Array = [ + { + alt: 'Spotify logo', + name: 'companies/spotify', + width: 100, + height: 52, + hasCaseStudy: true, + caseStudyUrl: '/blog/spotify-case-study', + }, + { + alt: 'Amazon logo', + name: 'companies/amazon', + width: 80, + height: 52, + hasCaseStudy: false, + }, + { + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', + width: 80, + height: 52, + hasCaseStudy: false, + }, +]; diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx index 16ba5aa2759a7c..6690bd1ca9ab17 100644 --- a/docs/src/components/header/HeaderNavBar.tsx +++ b/docs/src/components/header/HeaderNavBar.tsx @@ -412,6 +412,9 @@ export default function HeaderNavBar() {
  • Blog
    • +
  • + Customers +
    • ); diff --git a/docs/src/route.ts b/docs/src/route.ts index 3d1ffccbc7d64a..8f95030ede46a9 100644 --- a/docs/src/route.ts +++ b/docs/src/route.ts @@ -10,6 +10,7 @@ const ROUTES = { pricing: '/pricing/', about: '/about/', blog: '/blog/', + customers: '/customers/', // Material UI doc pages materialDocs: '/material-ui/getting-started/', materialIcons: '/material-ui/material-icons/',