Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[website] Rebranding go live #28039

Closed
wants to merge 1 commit into from
Closed

[website] Rebranding go live #28039

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 docs/pages/branding/about.tsx → docs/pages/about.tsx
View file
Open in desktop
File renamed without changes.
63 changes: 0 additions & 63 deletions docs/pages/branding/home.tsx
View file
Open in desktop

This file was deleted.

194 changes: 38 additions & 156 deletions docs/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,161 +1,43 @@
import * as React from 'react';
import { styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Typography, { TypographyProps } from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';
import Steps from 'docs/src/pages/landing/Steps';
import Themes from 'docs/src/pages/landing/Themes';
import QuickWord from 'docs/src/pages/landing/QuickWord';
import Sponsors from 'docs/src/pages/landing/Sponsors';
import Users from 'docs/src/pages/landing/Users';
import Quotes from 'docs/src/pages/landing/Quotes';
import Pro from 'docs/src/pages/landing/Pro';
import AppFooter from 'docs/src/modules/components/AppFooter';
import AppFrame from 'docs/src/modules/components/AppFrame';
import Link from 'docs/src/modules/components/Link';
import Head from 'docs/src/modules/components/Head';
import loadScript from 'docs/src/modules/utils/loadScript';
import { useTranslate } from 'docs/src/modules/utils/i18n';

let dependenciesLoaded = false;

function loadDependencies() {
if (dependenciesLoaded) {
return;
}

dependenciesLoaded = true;

loadScript('https://buttons.github.io/buttons.js', document.querySelector('head'));
loadScript('https://platform.twitter.com/widgets.js', document.querySelector('head'));
}

const Content = styled(Container)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(8),
[theme.breakpoints.up('md')]: {
paddingTop: theme.spacing(16),
paddingBottom: theme.spacing(16),
flexDirection: 'row',
alignItems: 'flex-start',
textAlign: 'left',
},
}));

const Title = styled(Typography)<TypographyProps & { component?: React.ElementType }>(
({ theme }) => ({
marginLeft: -12,
whiteSpace: 'nowrap',
letterSpacing: '.7rem',
textIndent: '.7rem',
fontWeight: theme.typography.fontWeightLight,
[theme.breakpoints.only('xs')]: {
fontSize: 28,
},
}),
);

const Logo = styled('img')(({ theme }) => ({
flexShrink: 0,
width: 120,
height: 120,
marginBottom: theme.spacing(2),
[theme.breakpoints.up('md')]: {
marginRight: theme.spacing(8),
width: 195,
height: 175,
},
}));

const Social = styled('div')(({ theme }) => ({
padding: theme.spacing(2, 0),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 20,
boxSizing: 'content-box',
'& a': {
color: theme.palette.background.paper,
},
}));

export default function LandingPage() {
React.useEffect(() => {
loadDependencies();
}, []);
const t = useTranslate();

import NoSsr from '@material-ui/core/NoSsr';
import Divider from '@material-ui/core/Divider';
import AppHeader from 'docs/src/layouts/AppHeader';
import Hero from 'docs/src/components/home/Hero';
import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
import ProductSuite from 'docs/src/components/home/ProductSuite';
import ValueProposition from 'docs/src/components/home/ValueProposition';
import DesignSystemComponents from 'docs/src/components/home/DesignSystemComponents';
import Testimonials from 'docs/src/components/home/Testimonials';
import Sponsors from 'docs/src/components/home/Sponsors';
import HeroEnd from 'docs/src/components/home/HeroEnd';
import AppFooter from 'docs/src/layouts/AppFooter';
import BrandingProvider from 'docs/src/BrandingProvider';
import NewsletterToast from 'docs/src/components/home/NewsletterToast';

export default function Home() {
return (
<AppFrame>
<Box sx={{ flex: '1 0 100%' }}>
<Head />
<main id="main-content" tabIndex={-1}>
<Box sx={{ pt: 8, color: 'primary.main' }}>
<Content maxWidth="md">
<Logo src="/static/logo_raw.svg" alt="" />
<div>
<Title variant="h3" component="h1" color="inherit" gutterBottom>
{'MATERIAL-UI'}
</Title>
<Typography variant="h5" component="p" color="inherit">
{t('strapline')}
</Typography>
<Button
component={Link}
noLinkStyle
href="/getting-started/installation"
sx={{ mt: 4 }}
variant="outlined"
>
{t('getStarted')}
</Button>
</div>
</Content>
</Box>
<Social>
<Box
sx={{
width: 105,
display: 'flex',
justifyContent: 'flex-end',
mr: 1,
'& span': { display: 'flex' },
}}
>
<a
className="github-button"
href="https://github.com/mui-org/material-ui"
data-icon="octicon-star"
data-show-count="true"
>
Star
</a>
</Box>
<Box sx={{ width: 160, display: 'flex' }}>
<a
className="twitter-follow-button"
href="https://twitter.com/@materialui"
data-show-screen-name="false"
>
Follow
</a>
</Box>
</Social>
<Pro />
<QuickWord />
<Steps />
<Themes />
<Sponsors />
<Quotes />
<Users />
</main>
<AppFooter />
</Box>
<BrandingProvider>
<Head
title="MUI: A popular React UI framework"
description="The ultimate solution for your UI. MUI provides a robust, customizible and accessible library of foundational and advanced components, enabling you to build your own design system and develop React applications faster."
/>
<NoSsr>
<NewsletterToast />
</NoSsr>
<AppHeader />
<main>
<Hero />
<References companies={CORE_CUSTOMERS} />
<ProductSuite />
<ValueProposition />
<DesignSystemComponents />
<Testimonials />
<Sponsors />
<HeroEnd />
<Divider />
</main>
<AppFooter />
<script
type="application/ld+json"
// eslint-disable-next-line react/no-danger
Expand All @@ -176,6 +58,6 @@ export default function LandingPage() {
`,
}}
/>
</AppFrame>
</BrandingProvider>
);
}
0 docs/pages/branding/pricing.tsx → docs/pages/pricing.tsx
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions docs/src/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const ROUTES = {
home: '/branding/home',
home: '/',
productCore: '/branding/core/',
productAdvanced: '/branding/x-advanced/',
productTemplates: '/branding/templates/',
Expand All @@ -10,12 +10,12 @@ const ROUTES = {
customization: '/customization/how-to-customize/',
theming: '/customization/theming/',
documentation: '/getting-started/usage/',
pricing: '/branding/pricing/',
pricing: '/pricing/',
blog: '/blog/',
showcase: '/discover-more/showcase',
roadmap: '/discover-more/roadmap',
languages: '/discover-more/languages',
about: '/branding/about/',
about: '/about/',
vision: '/discover-more/vision/',
careers: '/company/careers/',
support: '/getting-started/support/#professional-support-premium',
Expand Down