how2ice/react-test
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

init project
Some checks failed
No response / noResponse (push) Has been cancelled
Details
CI / Continuous releases (push) Has been cancelled
Details
CI / test-dev (macos-latest) (push) Has been cancelled
Details
CI / test-dev (ubuntu-latest) (push) Has been cancelled
Details
CI / test-dev (windows-latest) (push) Has been cancelled
Details
Maintenance / main (push) Has been cancelled
Details
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
Details
CodeQL / Analyze (push) Has been cancelled
Details

Browse Source
This commit is contained in:
how2ice
2025-12-12 14:26:25 +09:00
commit 005cf56baf
43188 changed files with 1079531 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js Normal file
View File

@@ -0,0 +1,142 @@
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Container from '@mui/material/Container';
import Divider from '@mui/material/Divider';
import MenuItem from '@mui/material/MenuItem';
import Drawer from '@mui/material/Drawer';
import MenuIcon from '@mui/icons-material/Menu';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
import Sitemark from './SitemarkIcon';
const StyledToolbar = styled(Toolbar)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexShrink: 0,
borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
backdropFilter: 'blur(24px)',
border: '1px solid',
borderColor: (theme.vars || theme).palette.divider,
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)`
: alpha(theme.palette.background.default, 0.4),
boxShadow: (theme.vars || theme).shadows[1],
padding: '8px 12px',
}));
export default function AppAppBar() {
const [open, setOpen] = React.useState(false);
const toggleDrawer = (newOpen) => () => {
setOpen(newOpen);
};
return (
<AppBar
position="fixed"
enableColorOnDark
sx={{
boxShadow: 0,
bgcolor: 'transparent',
backgroundImage: 'none',
mt: 'calc(var(--template-frame-height, 0px) + 28px)',
}}
>
<Container maxWidth="lg">
<StyledToolbar variant="dense" disableGutters>
<Box sx={{ flexGrow: 1, display: 'flex', alignItems: 'center', px: 0 }}>
<Sitemark />
<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
<Button variant="text" color="info" size="small">
Features
</Button>
<Button variant="text" color="info" size="small">
Testimonials
</Button>
<Button variant="text" color="info" size="small">
Highlights
</Button>
<Button variant="text" color="info" size="small">
Pricing
</Button>
<Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
FAQ
</Button>
<Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
Blog
</Button>
</Box>
</Box>
<Box
sx={{
display: { xs: 'none', md: 'flex' },
gap: 1,
alignItems: 'center',
}}
>
<Button color="primary" variant="text" size="small">
Sign in
</Button>
<Button color="primary" variant="contained" size="small">
Sign up
</Button>
<ColorModeIconDropdown />
</Box>
<Box sx={{ display: { xs: 'flex', md: 'none' }, gap: 1 }}>
<ColorModeIconDropdown size="medium" />
<IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<Drawer
anchor="top"
open={open}
onClose={toggleDrawer(false)}
PaperProps={{
sx: {
top: 'var(--template-frame-height, 0px)',
},
}}
>
<Box sx={{ p: 2, backgroundColor: 'background.default' }}>
<Box
sx={{
display: 'flex',
justifyContent: 'flex-end',
}}
>
<IconButton onClick={toggleDrawer(false)}>
<CloseRoundedIcon />
</IconButton>
</Box>
<MenuItem>Features</MenuItem>
<MenuItem>Testimonials</MenuItem>
<MenuItem>Highlights</MenuItem>
<MenuItem>Pricing</MenuItem>
<MenuItem>FAQ</MenuItem>
<MenuItem>Blog</MenuItem>
<Divider sx={{ my: 3 }} />
<MenuItem>
<Button color="primary" variant="contained" fullWidth>
Sign up
</Button>
</MenuItem>
<MenuItem>
<Button color="primary" variant="outlined" fullWidth>
Sign in
</Button>
</MenuItem>
</Box>
</Drawer>
</Box>
</StyledToolbar>
</Container>
</AppBar>
);
}

142
docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx Normal file
View File

@@ -0,0 +1,142 @@
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Container from '@mui/material/Container';
import Divider from '@mui/material/Divider';
import MenuItem from '@mui/material/MenuItem';
import Drawer from '@mui/material/Drawer';
import MenuIcon from '@mui/icons-material/Menu';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
import Sitemark from './SitemarkIcon';
const StyledToolbar = styled(Toolbar)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexShrink: 0,
borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
backdropFilter: 'blur(24px)',
border: '1px solid',
borderColor: (theme.vars || theme).palette.divider,
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)`
: alpha(theme.palette.background.default, 0.4),
boxShadow: (theme.vars || theme).shadows[1],
padding: '8px 12px',
}));
export default function AppAppBar() {
const [open, setOpen] = React.useState(false);
const toggleDrawer = (newOpen: boolean) => () => {
setOpen(newOpen);
};
return (
<AppBar
position="fixed"
enableColorOnDark
sx={{
boxShadow: 0,
bgcolor: 'transparent',
backgroundImage: 'none',
mt: 'calc(var(--template-frame-height, 0px) + 28px)',
}}
>
<Container maxWidth="lg">
<StyledToolbar variant="dense" disableGutters>
<Box sx={{ flexGrow: 1, display: 'flex', alignItems: 'center', px: 0 }}>
<Sitemark />
<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
<Button variant="text" color="info" size="small">
Features
</Button>
<Button variant="text" color="info" size="small">
Testimonials
</Button>
<Button variant="text" color="info" size="small">
Highlights
</Button>
<Button variant="text" color="info" size="small">
Pricing
</Button>
<Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
FAQ
</Button>
<Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
Blog
</Button>
</Box>
</Box>
<Box
sx={{
display: { xs: 'none', md: 'flex' },
gap: 1,
alignItems: 'center',
}}
>
<Button color="primary" variant="text" size="small">
Sign in
</Button>
<Button color="primary" variant="contained" size="small">
Sign up
</Button>
<ColorModeIconDropdown />
</Box>
<Box sx={{ display: { xs: 'flex', md: 'none' }, gap: 1 }}>
<ColorModeIconDropdown size="medium" />
<IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<Drawer
anchor="top"
open={open}
onClose={toggleDrawer(false)}
PaperProps={{
sx: {
top: 'var(--template-frame-height, 0px)',
},
}}
>
<Box sx={{ p: 2, backgroundColor: 'background.default' }}>
<Box
sx={{
display: 'flex',
justifyContent: 'flex-end',
}}
>
<IconButton onClick={toggleDrawer(false)}>
<CloseRoundedIcon />
</IconButton>
</Box>
<MenuItem>Features</MenuItem>
<MenuItem>Testimonials</MenuItem>
<MenuItem>Highlights</MenuItem>
<MenuItem>Pricing</MenuItem>
<MenuItem>FAQ</MenuItem>
<MenuItem>Blog</MenuItem>
<Divider sx={{ my: 3 }} />
<MenuItem>
<Button color="primary" variant="contained" fullWidth>
Sign up
</Button>
</MenuItem>
<MenuItem>
<Button color="primary" variant="outlined" fullWidth>
Sign in
</Button>
</MenuItem>
</Box>
</Drawer>
</Box>
</StyledToolbar>
</Container>
</AppBar>
);
}

150
docs/data/material/getting-started/templates/marketing-page/components/FAQ.js Normal file
View File

@@ -0,0 +1,150 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
export default function FAQ() {
const [expanded, setExpanded] = React.useState([]);
const handleChange = (panel) => (event, isExpanded) => {
setExpanded(
isExpanded ? [...expanded, panel] : expanded.filter((item) => item !== panel),
);
};
return (
<Container
id="faq"
sx={{
pt: { xs: 4, sm: 12 },
pb: { xs: 8, sm: 16 },
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 3, sm: 6 },
}}
>
<Typography
component="h2"
variant="h4"
sx={{
color: 'text.primary',
width: { sm: '100%', md: '60%' },
textAlign: { sm: 'left', md: 'center' },
}}
>
Frequently asked questions
</Typography>
<Box sx={{ width: '100%' }}>
<Accordion
expanded={expanded.includes('panel1')}
onChange={handleChange('panel1')}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1d-content"
id="panel1d-header"
>
<Typography component="span" variant="subtitle2">
How do I contact customer support if I have a question or issue?
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography
variant="body2"
gutterBottom
sx={{ maxWidth: { sm: '100%', md: '70%' } }}
>
You can reach our customer support team by emailing&nbsp;
<Link href="mailto:support@email.com">support@email.com</Link>
&nbsp;or calling our toll-free number. We&apos;re here to assist you
promptly.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={expanded.includes('panel2')}
onChange={handleChange('panel2')}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2d-content"
id="panel2d-header"
>
<Typography component="span" variant="subtitle2">
Can I return the product if it doesn&apos;t meet my expectations?
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography
variant="body2"
gutterBottom
sx={{ maxWidth: { sm: '100%', md: '70%' } }}
>
Absolutely! We offer a hassle-free return policy. If you&apos;re not
completely satisfied, you can return the product within [number of
days] days for a full refund or exchange.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={expanded.includes('panel3')}
onChange={handleChange('panel3')}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3d-content"
id="panel3d-header"
>
<Typography component="span" variant="subtitle2">
What makes your product stand out from others in the market?
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography
variant="body2"
gutterBottom
sx={{ maxWidth: { sm: '100%', md: '70%' } }}
>
Our product distinguishes itself through its adaptability, durability,
and innovative features. We prioritize user satisfaction and
continually strive to exceed expectations in every aspect.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={expanded.includes('panel4')}
onChange={handleChange('panel4')}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel4d-content"
id="panel4d-header"
>
<Typography component="span" variant="subtitle2">
Is there a warranty on the product, and what does it cover?
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography
variant="body2"
gutterBottom
sx={{ maxWidth: { sm: '100%', md: '70%' } }}
>
Yes, our product comes with a [length of warranty] warranty. It covers
defects in materials and workmanship. If you encounter any issues
covered by the warranty, please contact our customer support for
assistance.
</Typography>
</AccordionDetails>
</Accordion>
</Box>
</Container>
);
}

153
docs/data/material/getting-started/templates/marketing-page/components/FAQ.tsx Normal file
View File

@@ -0,0 +1,153 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
export default function FAQ() {
const [expanded, setExpanded] = React.useState<string[]>([]);
const handleChange =
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
setExpanded(
isExpanded
? [...expanded, panel]
: expanded.filter((item) => item !== panel),
);
};
return (
<Container
id="faq"
sx={{
pt: { xs: 4, sm: 12 },
pb: { xs: 8, sm: 16 },
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 3, sm: 6 },
}}
>
<Typography
component="h2"
variant="h4"
sx={{
color: 'text.primary',
width: { sm: '100%', md: '60%' },
textAlign: { sm: 'left', md: 'center' },
}}
>
Frequently asked questions
</Typography>
<Box sx={{ width: '100%' }}>
<Accordion
expanded={expanded.includes('panel1')}
onChange={handleChange('panel1')}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1d-content"
id="panel1d-header"
>
<Typography component="span" variant="subtitle2">
How do I contact customer support if I have a question or issue?
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography
variant="body2"
gutterBottom
sx={{ maxWidth: { sm: '100%', md: '70%' } }}
>
You can reach our customer support team by emailing&nbsp;
<Link href="mailto:support@email.com">support@email.com</Link>
&nbsp;or calling our toll-free number. We&apos;re here to assist you
promptly.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={expanded.includes('panel2')}
onChange={handleChange('panel2')}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2d-content"
id="panel2d-header"
>
<Typography component="span" variant="subtitle2">
Can I return the product if it doesn&apos;t meet my expectations?
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography
variant="body2"
gutterBottom
sx={{ maxWidth: { sm: '100%', md: '70%' } }}
>
Absolutely! We offer a hassle-free return policy. If you&apos;re not
completely satisfied, you can return the product within [number of
days] days for a full refund or exchange.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={expanded.includes('panel3')}
onChange={handleChange('panel3')}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3d-content"
id="panel3d-header"
>
<Typography component="span" variant="subtitle2">
What makes your product stand out from others in the market?
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography
variant="body2"
gutterBottom
sx={{ maxWidth: { sm: '100%', md: '70%' } }}
>
Our product distinguishes itself through its adaptability, durability,
and innovative features. We prioritize user satisfaction and
continually strive to exceed expectations in every aspect.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion
expanded={expanded.includes('panel4')}
onChange={handleChange('panel4')}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel4d-content"
id="panel4d-header"
>
<Typography component="span" variant="subtitle2">
Is there a warranty on the product, and what does it cover?
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography
variant="body2"
gutterBottom
sx={{ maxWidth: { sm: '100%', md: '70%' } }}
>
Yes, our product comes with a [length of warranty] warranty. It covers
defects in materials and workmanship. If you encounter any issues
covered by the warranty, please contact our customer support for
assistance.
</Typography>
</AccordionDetails>
</Accordion>
</Box>
</Container>
);
}

273
docs/data/material/getting-started/templates/marketing-page/components/Features.js Normal file
View File

@@ -0,0 +1,273 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import MuiChip from '@mui/material/Chip';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';
import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
import ViewQuiltRoundedIcon from '@mui/icons-material/ViewQuiltRounded';
const items = [
{
icon: <ViewQuiltRoundedIcon />,
title: 'Dashboard',
description:
'This item could provide a snapshot of the most important metrics or data points related to the product.',
imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-light.png")`,
imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-dark.png")`,
},
{
icon: <EdgesensorHighRoundedIcon />,
title: 'Mobile integration',
description:
'This item could provide information about the mobile app version of the product.',
imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-light.png")`,
imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-dark.png")`,
},
{
icon: <DevicesRoundedIcon />,
title: 'Available on all platforms',
description:
'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-light.png")`,
imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-dark.png")`,
},
];
const Chip = styled(MuiChip)(({ theme }) => ({
variants: [
{
props: ({ selected }) => !!selected,
style: {
background:
'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
color: 'hsl(0, 0%, 100%)',
borderColor: (theme.vars || theme).palette.primary.light,
'& .MuiChip-label': {
color: 'hsl(0, 0%, 100%)',
},
...theme.applyStyles('dark', {
borderColor: (theme.vars || theme).palette.primary.dark,
}),
},
},
],
}));
function MobileLayout({ selectedItemIndex, handleItemClick, selectedFeature }) {
if (!items[selectedItemIndex]) {
return null;
}
return (
<Box
sx={{
display: { xs: 'flex', sm: 'none' },
flexDirection: 'column',
gap: 2,
}}
>
<Box sx={{ display: 'flex', gap: 2, overflow: 'auto' }}>
{items.map(({ title }, index) => (
<Chip
size="medium"
key={index}
label={title}
onClick={() => handleItemClick(index)}
selected={selectedItemIndex === index}
/>
))}
</Box>
<Card variant="outlined">
<Box
sx={(theme) => ({
mb: 2,
backgroundSize: 'cover',
backgroundPosition: 'center',
minHeight: 280,
backgroundImage: 'var(--items-imageLight)',
...theme.applyStyles('dark', {
backgroundImage: 'var(--items-imageDark)',
}),
})}
style={
items[selectedItemIndex]
? {
'--items-imageLight': items[selectedItemIndex].imageLight,
'--items-imageDark': items[selectedItemIndex].imageDark,
}
: {}
}
/>
<Box sx={{ px: 2, pb: 2 }}>
<Typography
gutterBottom
sx={{ color: 'text.primary', fontWeight: 'medium' }}
>
{selectedFeature.title}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
{selectedFeature.description}
</Typography>
</Box>
</Card>
</Box>
);
}
MobileLayout.propTypes = {
handleItemClick: PropTypes.func.isRequired,
selectedFeature: PropTypes.shape({
description: PropTypes.string.isRequired,
icon: PropTypes.element,
imageDark: PropTypes.string.isRequired,
imageLight: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
}).isRequired,
selectedItemIndex: PropTypes.number.isRequired,
};
export { MobileLayout };
export default function Features() {
const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
const handleItemClick = (index) => {
setSelectedItemIndex(index);
};
const selectedFeature = items[selectedItemIndex];
return (
<Container id="features" sx={{ py: { xs: 8, sm: 16 } }}>
<Box sx={{ width: { sm: '100%', md: '60%' } }}>
<Typography
component="h2"
variant="h4"
gutterBottom
sx={{ color: 'text.primary' }}
>
Product features
</Typography>
<Typography
variant="body1"
sx={{ color: 'text.secondary', mb: { xs: 2, sm: 4 } }}
>
Provide a brief overview of the key features of the product. For example,
you could list the number of features, their types or benefits, and
add-ons.
</Typography>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row-reverse' },
gap: 2,
}}
>
<div>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
flexDirection: 'column',
gap: 2,
height: '100%',
}}
>
{items.map(({ icon, title, description }, index) => (
<Box
key={index}
component={Button}
onClick={() => handleItemClick(index)}
sx={[
(theme) => ({
p: 2,
height: '100%',
width: '100%',
'&:hover': {
backgroundColor: (theme.vars || theme).palette.action.hover,
},
}),
selectedItemIndex === index && {
backgroundColor: 'action.selected',
},
]}
>
<Box
sx={[
{
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'left',
gap: 1,
textAlign: 'left',
textTransform: 'none',
color: 'text.secondary',
},
selectedItemIndex === index && {
color: 'text.primary',
},
]}
>
{icon}
<Typography variant="h6">{title}</Typography>
<Typography variant="body2">{description}</Typography>
</Box>
</Box>
))}
</Box>
<MobileLayout
selectedItemIndex={selectedItemIndex}
handleItemClick={handleItemClick}
selectedFeature={selectedFeature}
/>
</div>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
width: { xs: '100%', md: '70%' },
height: 'var(--items-image-height)',
}}
>
<Card
variant="outlined"
sx={{
height: '100%',
width: '100%',
display: { xs: 'none', sm: 'flex' },
pointerEvents: 'none',
}}
>
<Box
sx={(theme) => ({
m: 'auto',
width: 420,
height: 500,
backgroundSize: 'contain',
backgroundImage: 'var(--items-imageLight)',
...theme.applyStyles('dark', {
backgroundImage: 'var(--items-imageDark)',
}),
})}
style={
items[selectedItemIndex]
? {
'--items-imageLight': items[selectedItemIndex].imageLight,
'--items-imageDark': items[selectedItemIndex].imageDark,
}
: {}
}
/>
</Card>
</Box>
</Box>
</Container>
);
}

272
docs/data/material/getting-started/templates/marketing-page/components/Features.tsx Normal file
View File

@@ -0,0 +1,272 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import MuiChip from '@mui/material/Chip';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';
import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
import ViewQuiltRoundedIcon from '@mui/icons-material/ViewQuiltRounded';
const items = [
{
icon: <ViewQuiltRoundedIcon />,
title: 'Dashboard',
description:
'This item could provide a snapshot of the most important metrics or data points related to the product.',
imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-light.png")`,
imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-dark.png")`,
},
{
icon: <EdgesensorHighRoundedIcon />,
title: 'Mobile integration',
description:
'This item could provide information about the mobile app version of the product.',
imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-light.png")`,
imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-dark.png")`,
},
{
icon: <DevicesRoundedIcon />,
title: 'Available on all platforms',
description:
'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-light.png")`,
imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-dark.png")`,
},
];
interface ChipProps {
selected?: boolean;
}
const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
variants: [
{
props: ({ selected }) => !!selected,
style: {
background:
'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
color: 'hsl(0, 0%, 100%)',
borderColor: (theme.vars || theme).palette.primary.light,
'& .MuiChip-label': {
color: 'hsl(0, 0%, 100%)',
},
...theme.applyStyles('dark', {
borderColor: (theme.vars || theme).palette.primary.dark,
}),
},
},
],
}));
interface MobileLayoutProps {
selectedItemIndex: number;
handleItemClick: (index: number) => void;
selectedFeature: (typeof items)[0];
}
export function MobileLayout({
selectedItemIndex,
handleItemClick,
selectedFeature,
}: MobileLayoutProps) {
if (!items[selectedItemIndex]) {
return null;
}
return (
<Box
sx={{
display: { xs: 'flex', sm: 'none' },
flexDirection: 'column',
gap: 2,
}}
>
<Box sx={{ display: 'flex', gap: 2, overflow: 'auto' }}>
{items.map(({ title }, index) => (
<Chip
size="medium"
key={index}
label={title}
onClick={() => handleItemClick(index)}
selected={selectedItemIndex === index}
/>
))}
</Box>
<Card variant="outlined">
<Box
sx={(theme) => ({
mb: 2,
backgroundSize: 'cover',
backgroundPosition: 'center',
minHeight: 280,
backgroundImage: 'var(--items-imageLight)',
...theme.applyStyles('dark', {
backgroundImage: 'var(--items-imageDark)',
}),
})}
style={
items[selectedItemIndex]
? ({
'--items-imageLight': items[selectedItemIndex].imageLight,
'--items-imageDark': items[selectedItemIndex].imageDark,
} as any)
: {}
}
/>
<Box sx={{ px: 2, pb: 2 }}>
<Typography
gutterBottom
sx={{ color: 'text.primary', fontWeight: 'medium' }}
>
{selectedFeature.title}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
{selectedFeature.description}
</Typography>
</Box>
</Card>
</Box>
);
}
export default function Features() {
const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
const handleItemClick = (index: number) => {
setSelectedItemIndex(index);
};
const selectedFeature = items[selectedItemIndex];
return (
<Container id="features" sx={{ py: { xs: 8, sm: 16 } }}>
<Box sx={{ width: { sm: '100%', md: '60%' } }}>
<Typography
component="h2"
variant="h4"
gutterBottom
sx={{ color: 'text.primary' }}
>
Product features
</Typography>
<Typography
variant="body1"
sx={{ color: 'text.secondary', mb: { xs: 2, sm: 4 } }}
>
Provide a brief overview of the key features of the product. For example,
you could list the number of features, their types or benefits, and
add-ons.
</Typography>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row-reverse' },
gap: 2,
}}
>
<div>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
flexDirection: 'column',
gap: 2,
height: '100%',
}}
>
{items.map(({ icon, title, description }, index) => (
<Box
key={index}
component={Button}
onClick={() => handleItemClick(index)}
sx={[
(theme) => ({
p: 2,
height: '100%',
width: '100%',
'&:hover': {
backgroundColor: (theme.vars || theme).palette.action.hover,
},
}),
selectedItemIndex === index && {
backgroundColor: 'action.selected',
},
]}
>
<Box
sx={[
{
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'left',
gap: 1,
textAlign: 'left',
textTransform: 'none',
color: 'text.secondary',
},
selectedItemIndex === index && {
color: 'text.primary',
},
]}
>
{icon}
<Typography variant="h6">{title}</Typography>
<Typography variant="body2">{description}</Typography>
</Box>
</Box>
))}
</Box>
<MobileLayout
selectedItemIndex={selectedItemIndex}
handleItemClick={handleItemClick}
selectedFeature={selectedFeature}
/>
</div>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
width: { xs: '100%', md: '70%' },
height: 'var(--items-image-height)',
}}
>
<Card
variant="outlined"
sx={{
height: '100%',
width: '100%',
display: { xs: 'none', sm: 'flex' },
pointerEvents: 'none',
}}
>
<Box
sx={(theme) => ({
m: 'auto',
width: 420,
height: 500,
backgroundSize: 'contain',
backgroundImage: 'var(--items-imageLight)',
...theme.applyStyles('dark', {
backgroundImage: 'var(--items-imageDark)',
}),
})}
style={
items[selectedItemIndex]
? ({
'--items-imageLight': items[selectedItemIndex].imageLight,
'--items-imageDark': items[selectedItemIndex].imageDark,
} as any)
: {}
}
/>
</Card>
</Box>
</Box>
</Container>
);
}

219
docs/data/material/getting-started/templates/marketing-page/components/Footer.js Normal file
View File

@@ -0,0 +1,219 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import IconButton from '@mui/material/IconButton';
import InputLabel from '@mui/material/InputLabel';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import TwitterIcon from '@mui/icons-material/X';
import SitemarkIcon from './SitemarkIcon';
function Copyright() {
return (
<Typography variant="body2" sx={{ color: 'text.secondary', mt: 1 }}>
{'Copyright © '}
<Link color="text.secondary" href="https://mui.com/">
Sitemark
</Link>
&nbsp;
{new Date().getFullYear()}
</Typography>
);
}
export default function Footer() {
return (
<Container
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 4, sm: 8 },
py: { xs: 8, sm: 10 },
textAlign: { sm: 'center', md: 'left' },
}}
>
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
width: '100%',
justifyContent: 'space-between',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: 4,
minWidth: { xs: '100%', sm: '60%' },
}}
>
<Box sx={{ width: { xs: '100%', sm: '60%' } }}>
<SitemarkIcon />
<Typography variant="body2" gutterBottom sx={{ fontWeight: 600, mt: 2 }}>
Join the newsletter
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
Subscribe for weekly updates. No spams ever!
</Typography>
<InputLabel htmlFor="email-newsletter">Email</InputLabel>
<Stack direction="row" spacing={1} useFlexGap>
<TextField
id="email-newsletter"
hiddenLabel
size="small"
variant="outlined"
fullWidth
aria-label="Enter your email address"
placeholder="Your email address"
slotProps={{
htmlInput: {
autoComplete: 'off',
'aria-label': 'Enter your email address',
},
}}
sx={{ width: '250px' }}
/>
<Button
variant="contained"
color="primary"
size="small"
sx={{ flexShrink: 0 }}
>
Subscribe
</Button>
</Stack>
</Box>
</Box>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
flexDirection: 'column',
gap: 1,
}}
>
<Typography variant="body2" sx={{ fontWeight: 'medium' }}>
Product
</Typography>
<Link color="text.secondary" variant="body2" href="#">
Features
</Link>
<Link color="text.secondary" variant="body2" href="#">
Testimonials
</Link>
<Link color="text.secondary" variant="body2" href="#">
Highlights
</Link>
<Link color="text.secondary" variant="body2" href="#">
Pricing
</Link>
<Link color="text.secondary" variant="body2" href="#">
FAQs
</Link>
</Box>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
flexDirection: 'column',
gap: 1,
}}
>
<Typography variant="body2" sx={{ fontWeight: 'medium' }}>
Company
</Typography>
<Link color="text.secondary" variant="body2" href="#">
About us
</Link>
<Link color="text.secondary" variant="body2" href="#">
Careers
</Link>
<Link color="text.secondary" variant="body2" href="#">
Press
</Link>
</Box>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
flexDirection: 'column',
gap: 1,
}}
>
<Typography variant="body2" sx={{ fontWeight: 'medium' }}>
Legal
</Typography>
<Link color="text.secondary" variant="body2" href="#">
Terms
</Link>
<Link color="text.secondary" variant="body2" href="#">
Privacy
</Link>
<Link color="text.secondary" variant="body2" href="#">
Contact
</Link>
</Box>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
pt: { xs: 4, sm: 8 },
width: '100%',
borderTop: '1px solid',
borderColor: 'divider',
}}
>
<div>
<Link color="text.secondary" variant="body2" href="#">
Privacy Policy
</Link>
<Typography sx={{ display: 'inline', mx: 0.5, opacity: 0.5 }}>
&nbsp;•&nbsp;
</Typography>
<Link color="text.secondary" variant="body2" href="#">
Terms of Service
</Link>
<Copyright />
</div>
<Stack
direction="row"
spacing={1}
useFlexGap
sx={{ justifyContent: 'left', color: 'text.secondary' }}
>
<IconButton
color="inherit"
size="small"
href="https://github.com/mui"
aria-label="GitHub"
sx={{ alignSelf: 'center' }}
>
<GitHubIcon />
</IconButton>
<IconButton
color="inherit"
size="small"
href="https://x.com/MaterialUI"
aria-label="X"
sx={{ alignSelf: 'center' }}
>
<TwitterIcon />
</IconButton>
<IconButton
color="inherit"
size="small"
href="https://www.linkedin.com/company/mui/"
aria-label="LinkedIn"
sx={{ alignSelf: 'center' }}
>
<LinkedInIcon />
</IconButton>
</Stack>
</Box>
</Container>
);
}

219
docs/data/material/getting-started/templates/marketing-page/components/Footer.tsx Normal file
View File

@@ -0,0 +1,219 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import IconButton from '@mui/material/IconButton';
import InputLabel from '@mui/material/InputLabel';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import TwitterIcon from '@mui/icons-material/X';
import SitemarkIcon from './SitemarkIcon';
function Copyright() {
return (
<Typography variant="body2" sx={{ color: 'text.secondary', mt: 1 }}>
{'Copyright © '}
<Link color="text.secondary" href="https://mui.com/">
Sitemark
</Link>
&nbsp;
{new Date().getFullYear()}
</Typography>
);
}
export default function Footer() {
return (
<Container
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 4, sm: 8 },
py: { xs: 8, sm: 10 },
textAlign: { sm: 'center', md: 'left' },
}}
>
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
width: '100%',
justifyContent: 'space-between',
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: 4,
minWidth: { xs: '100%', sm: '60%' },
}}
>
<Box sx={{ width: { xs: '100%', sm: '60%' } }}>
<SitemarkIcon />
<Typography variant="body2" gutterBottom sx={{ fontWeight: 600, mt: 2 }}>
Join the newsletter
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
Subscribe for weekly updates. No spams ever!
</Typography>
<InputLabel htmlFor="email-newsletter">Email</InputLabel>
<Stack direction="row" spacing={1} useFlexGap>
<TextField
id="email-newsletter"
hiddenLabel
size="small"
variant="outlined"
fullWidth
aria-label="Enter your email address"
placeholder="Your email address"
slotProps={{
htmlInput: {
autoComplete: 'off',
'aria-label': 'Enter your email address',
},
}}
sx={{ width: '250px' }}
/>
<Button
variant="contained"
color="primary"
size="small"
sx={{ flexShrink: 0 }}
>
Subscribe
</Button>
</Stack>
</Box>
</Box>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
flexDirection: 'column',
gap: 1,
}}
>
<Typography variant="body2" sx={{ fontWeight: 'medium' }}>
Product
</Typography>
<Link color="text.secondary" variant="body2" href="#">
Features
</Link>
<Link color="text.secondary" variant="body2" href="#">
Testimonials
</Link>
<Link color="text.secondary" variant="body2" href="#">
Highlights
</Link>
<Link color="text.secondary" variant="body2" href="#">
Pricing
</Link>
<Link color="text.secondary" variant="body2" href="#">
FAQs
</Link>
</Box>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
flexDirection: 'column',
gap: 1,
}}
>
<Typography variant="body2" sx={{ fontWeight: 'medium' }}>
Company
</Typography>
<Link color="text.secondary" variant="body2" href="#">
About us
</Link>
<Link color="text.secondary" variant="body2" href="#">
Careers
</Link>
<Link color="text.secondary" variant="body2" href="#">
Press
</Link>
</Box>
<Box
sx={{
display: { xs: 'none', sm: 'flex' },
flexDirection: 'column',
gap: 1,
}}
>
<Typography variant="body2" sx={{ fontWeight: 'medium' }}>
Legal
</Typography>
<Link color="text.secondary" variant="body2" href="#">
Terms
</Link>
<Link color="text.secondary" variant="body2" href="#">
Privacy
</Link>
<Link color="text.secondary" variant="body2" href="#">
Contact
</Link>
</Box>
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
pt: { xs: 4, sm: 8 },
width: '100%',
borderTop: '1px solid',
borderColor: 'divider',
}}
>
<div>
<Link color="text.secondary" variant="body2" href="#">
Privacy Policy
</Link>
<Typography sx={{ display: 'inline', mx: 0.5, opacity: 0.5 }}>
&nbsp;•&nbsp;
</Typography>
<Link color="text.secondary" variant="body2" href="#">
Terms of Service
</Link>
<Copyright />
</div>
<Stack
direction="row"
spacing={1}
useFlexGap
sx={{ justifyContent: 'left', color: 'text.secondary' }}
>
<IconButton
color="inherit"
size="small"
href="https://github.com/mui"
aria-label="GitHub"
sx={{ alignSelf: 'center' }}
>
<GitHubIcon />
</IconButton>
<IconButton
color="inherit"
size="small"
href="https://x.com/MaterialUI"
aria-label="X"
sx={{ alignSelf: 'center' }}
>
<TwitterIcon />
</IconButton>
<IconButton
color="inherit"
size="small"
href="https://www.linkedin.com/company/mui/"
aria-label="LinkedIn"
sx={{ alignSelf: 'center' }}
>
<LinkedInIcon />
</IconButton>
</Stack>
</Box>
</Container>
);
}

150
docs/data/material/getting-started/templates/marketing-page/components/Hero.js Normal file
View File

@@ -0,0 +1,150 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import InputLabel from '@mui/material/InputLabel';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import visuallyHidden from '@mui/utils/visuallyHidden';
import { styled } from '@mui/material/styles';
const StyledBox = styled('div')(({ theme }) => ({
alignSelf: 'center',
width: '100%',
height: 400,
marginTop: theme.spacing(8),
borderRadius: (theme.vars || theme).shape.borderRadius,
outline: '6px solid',
outlineColor: 'hsla(220, 25%, 80%, 0.2)',
border: '1px solid',
borderColor: (theme.vars || theme).palette.grey[200],
boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)',
backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard.jpg)`,
backgroundSize: 'cover',
[theme.breakpoints.up('sm')]: {
marginTop: theme.spacing(10),
height: 700,
},
...theme.applyStyles('dark', {
boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)`,
outlineColor: 'hsla(220, 20%, 42%, 0.1)',
borderColor: (theme.vars || theme).palette.grey[700],
}),
}));
export default function Hero() {
return (
<Box
id="hero"
sx={(theme) => ({
width: '100%',
backgroundRepeat: 'no-repeat',
backgroundImage:
'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 90%), transparent)',
...theme.applyStyles('dark', {
backgroundImage:
'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 16%), transparent)',
}),
})}
>
<Container
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
pt: { xs: 14, sm: 20 },
pb: { xs: 8, sm: 12 },
}}
>
<Stack
spacing={2}
useFlexGap
sx={{ alignItems: 'center', width: { xs: '100%', sm: '70%' } }}
>
<Typography
variant="h1"
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
alignItems: 'center',
fontSize: 'clamp(3rem, 10vw, 3.5rem)',
}}
>
Our&nbsp;latest&nbsp;
<Typography
component="span"
variant="h1"
sx={(theme) => ({
fontSize: 'inherit',
color: 'primary.main',
...theme.applyStyles('dark', {
color: 'primary.light',
}),
})}
>
products
</Typography>
</Typography>
<Typography
sx={{
textAlign: 'center',
color: 'text.secondary',
width: { sm: '100%', md: '80%' },
}}
>
Explore our cutting-edge dashboard, delivering high-quality solutions
tailored to your needs. Elevate your experience with top-tier features
and services.
</Typography>
<Stack
direction={{ xs: 'column', sm: 'row' }}
spacing={1}
useFlexGap
sx={{ pt: 2, width: { xs: '100%', sm: '350px' } }}
>
<InputLabel htmlFor="email-hero" sx={visuallyHidden}>
Email
</InputLabel>
<TextField
id="email-hero"
hiddenLabel
size="small"
variant="outlined"
aria-label="Enter your email address"
placeholder="Your email address"
fullWidth
slotProps={{
htmlInput: {
autoComplete: 'off',
'aria-label': 'Enter your email address',
},
}}
/>
<Button
variant="contained"
color="primary"
size="small"
sx={{ minWidth: 'fit-content' }}
>
Start now
</Button>
</Stack>
<Typography
variant="caption"
color="text.secondary"
sx={{ textAlign: 'center' }}
>
By clicking &quot;Start now&quot; you agree to our&nbsp;
<Link href="#" color="primary">
Terms & Conditions
</Link>
.
</Typography>
</Stack>
<StyledBox id="image" />
</Container>
</Box>
);
}

151
docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx Normal file
View File

@@ -0,0 +1,151 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import InputLabel from '@mui/material/InputLabel';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import visuallyHidden from '@mui/utils/visuallyHidden';
import { styled } from '@mui/material/styles';
const StyledBox = styled('div')(({ theme }) => ({
alignSelf: 'center',
width: '100%',
height: 400,
marginTop: theme.spacing(8),
borderRadius: (theme.vars || theme).shape.borderRadius,
outline: '6px solid',
outlineColor: 'hsla(220, 25%, 80%, 0.2)',
border: '1px solid',
borderColor: (theme.vars || theme).palette.grey[200],
boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)',
backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard.jpg)`,
backgroundSize: 'cover',
[theme.breakpoints.up('sm')]: {
marginTop: theme.spacing(10),
height: 700,
},
...theme.applyStyles('dark', {
boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)`,
outlineColor: 'hsla(220, 20%, 42%, 0.1)',
borderColor: (theme.vars || theme).palette.grey[700],
}),
}));
export default function Hero() {
return (
<Box
id="hero"
sx={(theme) => ({
width: '100%',
backgroundRepeat: 'no-repeat',
backgroundImage:
'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 90%), transparent)',
...theme.applyStyles('dark', {
backgroundImage:
'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 16%), transparent)',
}),
})}
>
<Container
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
pt: { xs: 14, sm: 20 },
pb: { xs: 8, sm: 12 },
}}
>
<Stack
spacing={2}
useFlexGap
sx={{ alignItems: 'center', width: { xs: '100%', sm: '70%' } }}
>
<Typography
variant="h1"
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
alignItems: 'center',
fontSize: 'clamp(3rem, 10vw, 3.5rem)',
}}
>
Our&nbsp;latest&nbsp;
<Typography
component="span"
variant="h1"
sx={(theme) => ({
fontSize: 'inherit',
color: 'primary.main',
...theme.applyStyles('dark', {
color: 'primary.light',
}),
})}
>
products
</Typography>
</Typography>
<Typography
sx={{
textAlign: 'center',
color: 'text.secondary',
width: { sm: '100%', md: '80%' },
}}
>
Explore our cutting-edge dashboard, delivering high-quality solutions
tailored to your needs. Elevate your experience with top-tier features
and services.
</Typography>
<Stack
direction={{ xs: 'column', sm: 'row' }}
spacing={1}
useFlexGap
sx={{ pt: 2, width: { xs: '100%', sm: '350px' } }}
>
<InputLabel htmlFor="email-hero" sx={visuallyHidden}>
Email
</InputLabel>
<TextField
id="email-hero"
hiddenLabel
size="small"
variant="outlined"
aria-label="Enter your email address"
placeholder="Your email address"
fullWidth
slotProps={{
htmlInput: {
autoComplete: 'off',
'aria-label': 'Enter your email address',
},
}}
/>
<Button
variant="contained"
color="primary"
size="small"
sx={{ minWidth: 'fit-content' }}
>
Start now
</Button>
</Stack>
<Typography
variant="caption"
color="text.secondary"
sx={{ textAlign: 'center' }}
>
By clicking &quot;Start now&quot; you agree to our&nbsp;
<Link href="#" color="primary">
Terms & Conditions
</Link>
.
</Typography>
</Stack>
<StyledBox id="image" />
</Container>
</Box>
);
}

120
docs/data/material/getting-started/templates/marketing-page/components/Highlights.js Normal file
View File

@@ -0,0 +1,120 @@
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded';
import ConstructionRoundedIcon from '@mui/icons-material/ConstructionRounded';
import QueryStatsRoundedIcon from '@mui/icons-material/QueryStatsRounded';
import SettingsSuggestRoundedIcon from '@mui/icons-material/SettingsSuggestRounded';
import SupportAgentRoundedIcon from '@mui/icons-material/SupportAgentRounded';
import ThumbUpAltRoundedIcon from '@mui/icons-material/ThumbUpAltRounded';
const items = [
{
icon: <SettingsSuggestRoundedIcon />,
title: 'Adaptable performance',
description:
'Our product effortlessly adjusts to your needs, boosting efficiency and simplifying your tasks.',
},
{
icon: <ConstructionRoundedIcon />,
title: 'Built to last',
description:
'Experience unmatched durability that goes above and beyond with lasting investment.',
},
{
icon: <ThumbUpAltRoundedIcon />,
title: 'Great user experience',
description:
'Integrate our product into your routine with an intuitive and easy-to-use interface.',
},
{
icon: <AutoFixHighRoundedIcon />,
title: 'Innovative functionality',
description:
'Stay ahead with features that set new standards, addressing your evolving needs better than the rest.',
},
{
icon: <SupportAgentRoundedIcon />,
title: 'Reliable support',
description:
'Count on our responsive customer support, offering assistance that goes beyond the purchase.',
},
{
icon: <QueryStatsRoundedIcon />,
title: 'Precision in every detail',
description:
'Enjoy a meticulously crafted product where small touches make a significant impact on your overall experience.',
},
];
export default function Highlights() {
return (
<Box
id="highlights"
sx={{
pt: { xs: 4, sm: 12 },
pb: { xs: 8, sm: 16 },
color: 'white',
bgcolor: 'grey.900',
}}
>
<Container
sx={{
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 3, sm: 6 },
}}
>
<Box
sx={{
width: { sm: '100%', md: '60%' },
textAlign: { sm: 'left', md: 'center' },
}}
>
<Typography component="h2" variant="h4" gutterBottom>
Highlights
</Typography>
<Typography variant="body1" sx={{ color: 'grey.400' }}>
Explore why our product stands out: adaptability, durability,
user-friendly design, and innovation. Enjoy reliable customer support and
precision in every detail.
</Typography>
</Box>
<Grid container spacing={2}>
{items.map((item, index) => (
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
<Stack
direction="column"
component={Card}
spacing={1}
useFlexGap
sx={{
color: 'inherit',
p: 3,
height: '100%',
borderColor: 'hsla(220, 25%, 25%, 0.3)',
backgroundColor: 'grey.800',
}}
>
<Box sx={{ opacity: '50%' }}>{item.icon}</Box>
<div>
<Typography gutterBottom sx={{ fontWeight: 'medium' }}>
{item.title}
</Typography>
<Typography variant="body2" sx={{ color: 'grey.400' }}>
{item.description}
</Typography>
</div>
</Stack>
</Grid>
))}
</Grid>
</Container>
</Box>
);
}

120
docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx Normal file
View File

@@ -0,0 +1,120 @@
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded';
import ConstructionRoundedIcon from '@mui/icons-material/ConstructionRounded';
import QueryStatsRoundedIcon from '@mui/icons-material/QueryStatsRounded';
import SettingsSuggestRoundedIcon from '@mui/icons-material/SettingsSuggestRounded';
import SupportAgentRoundedIcon from '@mui/icons-material/SupportAgentRounded';
import ThumbUpAltRoundedIcon from '@mui/icons-material/ThumbUpAltRounded';
const items = [
{
icon: <SettingsSuggestRoundedIcon />,
title: 'Adaptable performance',
description:
'Our product effortlessly adjusts to your needs, boosting efficiency and simplifying your tasks.',
},
{
icon: <ConstructionRoundedIcon />,
title: 'Built to last',
description:
'Experience unmatched durability that goes above and beyond with lasting investment.',
},
{
icon: <ThumbUpAltRoundedIcon />,
title: 'Great user experience',
description:
'Integrate our product into your routine with an intuitive and easy-to-use interface.',
},
{
icon: <AutoFixHighRoundedIcon />,
title: 'Innovative functionality',
description:
'Stay ahead with features that set new standards, addressing your evolving needs better than the rest.',
},
{
icon: <SupportAgentRoundedIcon />,
title: 'Reliable support',
description:
'Count on our responsive customer support, offering assistance that goes beyond the purchase.',
},
{
icon: <QueryStatsRoundedIcon />,
title: 'Precision in every detail',
description:
'Enjoy a meticulously crafted product where small touches make a significant impact on your overall experience.',
},
];
export default function Highlights() {
return (
<Box
id="highlights"
sx={{
pt: { xs: 4, sm: 12 },
pb: { xs: 8, sm: 16 },
color: 'white',
bgcolor: 'grey.900',
}}
>
<Container
sx={{
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 3, sm: 6 },
}}
>
<Box
sx={{
width: { sm: '100%', md: '60%' },
textAlign: { sm: 'left', md: 'center' },
}}
>
<Typography component="h2" variant="h4" gutterBottom>
Highlights
</Typography>
<Typography variant="body1" sx={{ color: 'grey.400' }}>
Explore why our product stands out: adaptability, durability,
user-friendly design, and innovation. Enjoy reliable customer support and
precision in every detail.
</Typography>
</Box>
<Grid container spacing={2}>
{items.map((item, index) => (
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
<Stack
direction="column"
component={Card}
spacing={1}
useFlexGap
sx={{
color: 'inherit',
p: 3,
height: '100%',
borderColor: 'hsla(220, 25%, 25%, 0.3)',
backgroundColor: 'grey.800',
}}
>
<Box sx={{ opacity: '50%' }}>{item.icon}</Box>
<div>
<Typography gutterBottom sx={{ fontWeight: 'medium' }}>
{item.title}
</Typography>
<Typography variant="body2" sx={{ color: 'grey.400' }}>
{item.description}
</Typography>
</div>
</Stack>
</Grid>
))}
</Grid>
</Container>
</Box>
);
}

69
docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js Normal file
View File

@@ -0,0 +1,69 @@
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import { useColorScheme } from '@mui/material/styles';
const darkModeLogos = [
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e891fa22f89efd7477a_TerraLight.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a09d1f6337b1dfed14ab_colorado-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
];
const lightModeLogos = [
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e911fa22f2203d7514c_TerraDark.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a0990f3717787fd49245_colorado-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5ca4e548b0deb1041c33_Ankara-black.svg',
];
const logoStyle = {
width: '100px',
height: '80px',
margin: '0 32px',
opacity: 0.7,
};
export default function LogoCollection() {
const { mode, systemMode } = useColorScheme();
let logos;
if (mode === 'system') {
if (systemMode === 'light') {
logos = lightModeLogos;
} else {
logos = darkModeLogos;
}
} else if (mode === 'light') {
logos = lightModeLogos;
} else {
logos = darkModeLogos;
}
return (
<Box id="logoCollection" sx={{ py: 4 }}>
<Typography
component="p"
variant="subtitle2"
align="center"
sx={{ color: 'text.secondary' }}
>
Trusted by the best companies
</Typography>
<Grid container sx={{ justifyContent: 'center', mt: 0.5, opacity: 0.6 }}>
{logos.map((logo, index) => (
<Grid key={index}>
<img
src={logo}
alt={`Fake company number ${index + 1}`}
style={logoStyle}
/>
</Grid>
))}
</Grid>
</Box>
);
}

69
docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx Normal file
View File

@@ -0,0 +1,69 @@
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import { useColorScheme } from '@mui/material/styles';
const darkModeLogos = [
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e891fa22f89efd7477a_TerraLight.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a09d1f6337b1dfed14ab_colorado-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
];
const lightModeLogos = [
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e911fa22f2203d7514c_TerraDark.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a0990f3717787fd49245_colorado-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5ca4e548b0deb1041c33_Ankara-black.svg',
];
const logoStyle = {
width: '100px',
height: '80px',
margin: '0 32px',
opacity: 0.7,
};
export default function LogoCollection() {
const { mode, systemMode } = useColorScheme();
let logos;
if (mode === 'system') {
if (systemMode === 'light') {
logos = lightModeLogos;
} else {
logos = darkModeLogos;
}
} else if (mode === 'light') {
logos = lightModeLogos;
} else {
logos = darkModeLogos;
}
return (
<Box id="logoCollection" sx={{ py: 4 }}>
<Typography
component="p"
variant="subtitle2"
align="center"
sx={{ color: 'text.secondary' }}
>
Trusted by the best companies
</Typography>
<Grid container sx={{ justifyContent: 'center', mt: 0.5, opacity: 0.6 }}>
{logos.map((logo, index) => (
<Grid key={index}>
<img
src={logo}
alt={`Fake company number ${index + 1}`}
style={logoStyle}
/>
</Grid>
))}
</Grid>
</Box>
);
}

211
docs/data/material/getting-started/templates/marketing-page/components/Pricing.js Normal file
View File

@@ -0,0 +1,211 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import Chip from '@mui/material/Chip';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Container from '@mui/material/Container';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
const tiers = [
{
title: 'Free',
price: '0',
description: [
'10 users included',
'2 GB of storage',
'Help center access',
'Email support',
],
buttonText: 'Sign up for free',
buttonVariant: 'outlined',
buttonColor: 'primary',
},
{
title: 'Professional',
subheader: 'Recommended',
price: '15',
description: [
'20 users included',
'10 GB of storage',
'Help center access',
'Priority email support',
'Dedicated team',
'Best deals',
],
buttonText: 'Start now',
buttonVariant: 'contained',
buttonColor: 'secondary',
},
{
title: 'Enterprise',
price: '30',
description: [
'50 users included',
'30 GB of storage',
'Help center access',
'Phone & email support',
],
buttonText: 'Contact us',
buttonVariant: 'outlined',
buttonColor: 'primary',
},
];
export default function Pricing() {
return (
<Container
id="pricing"
sx={{
pt: { xs: 4, sm: 12 },
pb: { xs: 8, sm: 16 },
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 3, sm: 6 },
}}
>
<Box
sx={{
width: { sm: '100%', md: '60%' },
textAlign: { sm: 'left', md: 'center' },
}}
>
<Typography
component="h2"
variant="h4"
gutterBottom
sx={{ color: 'text.primary' }}
>
Pricing
</Typography>
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
Quickly build an effective pricing table for your potential customers with
this layout. <br />
It&apos;s built with default Material UI components with little
customization.
</Typography>
</Box>
<Grid
container
spacing={3}
sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }}
>
{tiers.map((tier) => (
<Grid
size={{ xs: 12, sm: tier.title === 'Enterprise' ? 12 : 6, md: 4 }}
key={tier.title}
>
<Card
sx={[
{
p: 2,
display: 'flex',
flexDirection: 'column',
gap: 4,
},
tier.title === 'Professional' &&
((theme) => ({
border: 'none',
background:
'radial-gradient(circle at 50% 0%, hsl(220, 20%, 35%), hsl(220, 30%, 6%))',
boxShadow: `0 8px 12px hsla(220, 20%, 42%, 0.2)`,
...theme.applyStyles('dark', {
background:
'radial-gradient(circle at 50% 0%, hsl(220, 20%, 20%), hsl(220, 30%, 16%))',
boxShadow: `0 8px 12px hsla(0, 0%, 0%, 0.8)`,
}),
})),
]}
>
<CardContent>
<Box
sx={[
{
mb: 1,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: 2,
},
tier.title === 'Professional'
? { color: 'grey.100' }
: { color: '' },
]}
>
<Typography component="h3" variant="h6">
{tier.title}
</Typography>
{tier.title === 'Professional' && (
<Chip icon={<AutoAwesomeIcon />} label={tier.subheader} />
)}
</Box>
<Box
sx={[
{
display: 'flex',
alignItems: 'baseline',
},
tier.title === 'Professional'
? { color: 'grey.50' }
: { color: null },
]}
>
<Typography component="h3" variant="h2">
${tier.price}
</Typography>
<Typography component="h3" variant="h6">
&nbsp; per month
</Typography>
</Box>
<Divider sx={{ my: 2, opacity: 0.8, borderColor: 'divider' }} />
{tier.description.map((line) => (
<Box
key={line}
sx={{ py: 1, display: 'flex', gap: 1.5, alignItems: 'center' }}
>
<CheckCircleRoundedIcon
sx={[
{
width: 20,
},
tier.title === 'Professional'
? { color: 'primary.light' }
: { color: 'primary.main' },
]}
/>
<Typography
variant="subtitle2"
component={'span'}
sx={[
tier.title === 'Professional'
? { color: 'grey.50' }
: { color: null },
]}
>
{line}
</Typography>
</Box>
))}
</CardContent>
<CardActions>
<Button
fullWidth
variant={tier.buttonVariant}
color={tier.buttonColor}
>
{tier.buttonText}
</Button>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Container>
);
}

211
docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx Normal file
View File

@@ -0,0 +1,211 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import Chip from '@mui/material/Chip';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Container from '@mui/material/Container';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
const tiers = [
{
title: 'Free',
price: '0',
description: [
'10 users included',
'2 GB of storage',
'Help center access',
'Email support',
],
buttonText: 'Sign up for free',
buttonVariant: 'outlined',
buttonColor: 'primary',
},
{
title: 'Professional',
subheader: 'Recommended',
price: '15',
description: [
'20 users included',
'10 GB of storage',
'Help center access',
'Priority email support',
'Dedicated team',
'Best deals',
],
buttonText: 'Start now',
buttonVariant: 'contained',
buttonColor: 'secondary',
},
{
title: 'Enterprise',
price: '30',
description: [
'50 users included',
'30 GB of storage',
'Help center access',
'Phone & email support',
],
buttonText: 'Contact us',
buttonVariant: 'outlined',
buttonColor: 'primary',
},
];
export default function Pricing() {
return (
<Container
id="pricing"
sx={{
pt: { xs: 4, sm: 12 },
pb: { xs: 8, sm: 16 },
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 3, sm: 6 },
}}
>
<Box
sx={{
width: { sm: '100%', md: '60%' },
textAlign: { sm: 'left', md: 'center' },
}}
>
<Typography
component="h2"
variant="h4"
gutterBottom
sx={{ color: 'text.primary' }}
>
Pricing
</Typography>
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
Quickly build an effective pricing table for your potential customers with
this layout. <br />
It&apos;s built with default Material UI components with little
customization.
</Typography>
</Box>
<Grid
container
spacing={3}
sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }}
>
{tiers.map((tier) => (
<Grid
size={{ xs: 12, sm: tier.title === 'Enterprise' ? 12 : 6, md: 4 }}
key={tier.title}
>
<Card
sx={[
{
p: 2,
display: 'flex',
flexDirection: 'column',
gap: 4,
},
tier.title === 'Professional' &&
((theme) => ({
border: 'none',
background:
'radial-gradient(circle at 50% 0%, hsl(220, 20%, 35%), hsl(220, 30%, 6%))',
boxShadow: `0 8px 12px hsla(220, 20%, 42%, 0.2)`,
...theme.applyStyles('dark', {
background:
'radial-gradient(circle at 50% 0%, hsl(220, 20%, 20%), hsl(220, 30%, 16%))',
boxShadow: `0 8px 12px hsla(0, 0%, 0%, 0.8)`,
}),
})),
]}
>
<CardContent>
<Box
sx={[
{
mb: 1,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: 2,
},
tier.title === 'Professional'
? { color: 'grey.100' }
: { color: '' },
]}
>
<Typography component="h3" variant="h6">
{tier.title}
</Typography>
{tier.title === 'Professional' && (
<Chip icon={<AutoAwesomeIcon />} label={tier.subheader} />
)}
</Box>
<Box
sx={[
{
display: 'flex',
alignItems: 'baseline',
},
tier.title === 'Professional'
? { color: 'grey.50' }
: { color: null },
]}
>
<Typography component="h3" variant="h2">
${tier.price}
</Typography>
<Typography component="h3" variant="h6">
&nbsp; per month
</Typography>
</Box>
<Divider sx={{ my: 2, opacity: 0.8, borderColor: 'divider' }} />
{tier.description.map((line) => (
<Box
key={line}
sx={{ py: 1, display: 'flex', gap: 1.5, alignItems: 'center' }}
>
<CheckCircleRoundedIcon
sx={[
{
width: 20,
},
tier.title === 'Professional'
? { color: 'primary.light' }
: { color: 'primary.main' },
]}
/>
<Typography
variant="subtitle2"
component={'span'}
sx={[
tier.title === 'Professional'
? { color: 'grey.50' }
: { color: null },
]}
>
{line}
</Typography>
</Box>
))}
</CardContent>
<CardActions>
<Button
fullWidth
variant={tier.buttonVariant as 'outlined' | 'contained'}
color={tier.buttonColor as 'primary' | 'secondary'}
>
{tier.buttonText}
</Button>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Container>
);
}

52
docs/data/material/getting-started/templates/marketing-page/components/SitemarkIcon.js Normal file
View File

@@ -0,0 +1,52 @@
import SvgIcon from '@mui/material/SvgIcon';
export default function SitemarkIcon() {
return (
<SvgIcon sx={{ height: 21, width: 100, mr: 2 }}>
<svg
width={86}
height={19}
viewBox="0 0 86 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#B4C0D3"
d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z"
/>
<path
fill="#00D3AB"
d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z"
/>
<path
fill="#4876EF"
d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z"
/>
<path
fill="#4876EE"
d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z"
/>
<path
fill="#4876EE"
fillRule="evenodd"
d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z"
clipRule="evenodd"
/>
<path
fill="#4876EE"
d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z"
/>
<path
fill="#4876EE"
fillRule="evenodd"
d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z"
clipRule="evenodd"
/>
<path
fill="#4876EE"
d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z"
/>
</svg>
</SvgIcon>
);
}

52
docs/data/material/getting-started/templates/marketing-page/components/SitemarkIcon.tsx Normal file
View File

@@ -0,0 +1,52 @@
import SvgIcon from '@mui/material/SvgIcon';
export default function SitemarkIcon() {
return (
<SvgIcon sx={{ height: 21, width: 100, mr: 2 }}>
<svg
width={86}
height={19}
viewBox="0 0 86 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#B4C0D3"
d="m.787 12.567 6.055-2.675 3.485 2.006.704 6.583-4.295-.035.634-4.577-.74-.422-3.625 2.817-2.218-3.697Z"
/>
<path
fill="#00D3AB"
d="m10.714 11.616 5.352 3.908 2.112-3.767-4.295-1.725v-.845l4.295-1.76-2.112-3.732-5.352 3.908v4.013Z"
/>
<path
fill="#4876EF"
d="m10.327 7.286.704-6.583-4.295.07.634 4.577-.74.422-3.66-2.816L.786 6.617l6.055 2.676 3.485-2.007Z"
/>
<path
fill="#4876EE"
d="M32.507 8.804v6.167h2.312v-7.86h-3.366v1.693h1.054ZM32.435 6.006c.212.22.535.33.968.33.434 0 .751-.11.953-.33.213-.23.318-.516.318-.86 0-.354-.105-.641-.318-.86-.202-.23-.52-.345-.953-.345-.433 0-.756.115-.968.344-.202.22-.303.507-.303.86 0 .345.101.632.303.861ZM24.46 14.799c.655.296 1.46.444 2.413.444.896 0 1.667-.139 2.312-.416.645-.277 1.141-.664 1.488-1.162.357-.506.535-1.094.535-1.764 0-.65-.169-1.2-.506-1.649-.328-.459-.785-.818-1.373-1.076-.587-.267-1.266-.435-2.037-.502l-.809-.071c-.481-.039-.828-.168-1.04-.388a1.08 1.08 0 0 1-.318-.774c0-.23.058-.44.173-.631.116-.201.29-.359.52-.474.241-.114.535-.172.882-.172.366 0 .67.067.91.201.053.029.104.059.15.09l.012.009.052.037c.146.111.263.243.35.395.125.21.188.444.188.703h2.311c0-.689-.159-1.286-.476-1.793-.318-.516-.776-.913-1.373-1.19-.588-.287-1.296-.43-2.124-.43-.79 0-1.474.133-2.052.4a3.131 3.131 0 0 0-1.358 1.12c-.318.487-.477 1.066-.477 1.735 0 .927.314 1.673.94 2.237.626.564 1.464.89 2.514.976l.794.071c.645.058 1.113.187 1.401.388a.899.899 0 0 1 .434.788 1.181 1.181 0 0 1-.231.717c-.154.201-.38.36-.68.474-.298.115-.669.172-1.112.172-.49 0-.89-.067-1.199-.2-.308-.144-.539-.33-.694-.56a1.375 1.375 0 0 1-.216-.746h-2.297c0 .679.168 1.281.505 1.807.337.517.834.928 1.489 1.234ZM39.977 15.07c-.8 0-1.445-.095-1.936-.286a2.03 2.03 0 0 1-1.084-.99c-.221-.469-.332-1.1-.332-1.893V8.789h-1.2V7.11h1.2V4.988h2.153V7.11h2.312V8.79h-2.312v3.198c0 .373.096.66.289.86.202.192.486.287.852.287h1.17v1.937h-1.112Z"
/>
<path
fill="#4876EE"
fillRule="evenodd"
d="M43.873 14.899c.52.23 1.117.344 1.791.344.665 0 1.252-.115 1.763-.344.51-.23.934-.55 1.271-.96.337-.412.564-.88.679-1.407h-2.124c-.096.24-.279.44-.549.603-.27.162-.616.244-1.04.244-.262 0-.497-.031-.704-.093a1.572 1.572 0 0 1-.423-.194 1.662 1.662 0 0 1-.636-.803 3.159 3.159 0 0 1-.163-.645h5.784v-.775a4.28 4.28 0 0 0-.463-1.98 3.686 3.686 0 0 0-1.343-1.477c-.578-.382-1.291-.574-2.139-.574-.645 0-1.223.115-1.733.345-.501.22-.92.52-1.257.903a4.178 4.178 0 0 0-.78 1.305c-.174.478-.26.98-.26 1.506v.287c0 .507.086 1.004.26 1.492.183.478.443.913.78 1.305.347.382.775.688 1.286.918Zm-.094-4.674.02-.09a2.507 2.507 0 0 1 .117-.356c.145-.354.356-.622.636-.804.104-.067.217-.123.339-.165.204-.071.433-.107.686-.107.395 0 .723.09.983.272.27.173.472.426.607.76a2.487 2.487 0 0 1 .16.603h-3.57c.006-.038.013-.076.022-.113Z"
clipRule="evenodd"
/>
<path
fill="#4876EE"
d="M50.476 14.97V7.112h1.835v1.98a4.54 4.54 0 0 1 .173-.603c.202-.536.506-.937.91-1.205.405-.277.9-.416 1.488-.416h.101c.598 0 1.094.139 1.489.416.404.268.707.67.91 1.205l.016.04.013.037.028-.077c.212-.536.52-.937.925-1.205.405-.277.901-.416 1.489-.416h.1c.598 0 1.098.139 1.503.416.414.268.727.67.94 1.205.211.535.317 1.205.317 2.008v4.475h-2.312v-4.604c0-.43-.115-.78-.346-1.047-.222-.268-.54-.402-.954-.402-.414 0-.742.139-.982.416-.241.268-.362.626-.362 1.076v4.56h-2.326v-4.603c0-.43-.115-.78-.346-1.047-.222-.268-.535-.402-.94-.402-.423 0-.756.139-.996.416-.241.268-.362.626-.362 1.076v4.56h-2.311Z"
/>
<path
fill="#4876EE"
fillRule="evenodd"
d="M68.888 13.456v1.515h1.834v-4.82c0-.726-.144-1.319-.433-1.778-.289-.468-.712-.817-1.271-1.047-.549-.23-1.228-.344-2.037-.344a27.76 27.76 0 0 0-.896.014c-.318.01-.626.024-.924.043l-.229.016a36.79 36.79 0 0 0-.552.042v1.936a81.998 81.998 0 0 1 1.733-.09 37.806 37.806 0 0 1 1.171-.025c.424 0 .732.1.925.301.193.201.289.502.289.904v.029h-1.43c-.704 0-1.325.09-1.864.272-.54.172-.959.445-1.257.818-.299.363-.448.832-.448 1.405 0 .526.12.98.361 1.363.24.373.573.66.997.86.433.201.934.302 1.502.302.55 0 1.012-.1 1.388-.302.385-.2.683-.487.895-.86a2.443 2.443 0 0 0 .228-.498l.018-.056Zm-.39-1.397v-.63h-1.445c-.405 0-.718.1-.939.3-.212.192-.318.455-.318.79 0 .157.026.3.08.429a.99.99 0 0 0 .238.345c.221.191.534.287.939.287a2.125 2.125 0 0 0 .394-.038c.106-.021.206-.052.3-.092.212-.095.385-.253.52-.473.135-.22.212-.526.23-.918Z"
clipRule="evenodd"
/>
<path
fill="#4876EE"
d="M72.106 14.97V7.11h1.835v2.595c.088-.74.31-1.338.665-1.791.481-.603 1.174-.904 2.08-.904h.303v1.98h-.578c-.635 0-1.127.172-1.473.516-.347.334-.52.822-.52 1.463v4.001h-2.312ZM79.92 11.298h.767l2.499 3.672h2.6l-3.169-4.51 2.606-3.35h-2.427l-2.875 3.737V4.5h-2.312v10.47h2.312v-3.672Z"
/>
</svg>
</SvgIcon>
);
}

173
docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js Normal file
View File

@@ -0,0 +1,173 @@
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import { useColorScheme } from '@mui/material/styles';
const userTestimonials = [
{
avatar: <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />,
name: 'Remy Sharp',
occupation: 'Senior Engineer',
testimonial:
"I absolutely love how versatile this product is! Whether I'm tackling work projects or indulging in my favorite hobbies, it seamlessly adapts to my changing needs. Its intuitive design has truly enhanced my daily routine, making tasks more efficient and enjoyable.",
},
{
avatar: <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />,
name: 'Travis Howard',
occupation: 'Lead Product Designer',
testimonial:
"One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
},
{
avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
name: 'Cindy Baker',
occupation: 'CTO',
testimonial:
'The level of simplicity and user-friendliness in this product has significantly simplified my life. I appreciate the creators for delivering a solution that not only meets but exceeds user expectations.',
},
{
avatar: <Avatar alt="Remy Sharp" src="/static/images/avatar/4.jpg" />,
name: 'Julia Stewart',
occupation: 'Senior Engineer',
testimonial:
"I appreciate the attention to detail in the design of this product. The small touches make a big difference, and it's evident that the creators focused on delivering a premium experience.",
},
{
avatar: <Avatar alt="Travis Howard" src="/static/images/avatar/5.jpg" />,
name: 'John Smith',
occupation: 'Product Designer',
testimonial:
"I've tried other similar products, but this one stands out for its innovative features. It's clear that the makers put a lot of thought into creating a solution that truly addresses user needs.",
},
{
avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/6.jpg" />,
name: 'Daniel Wolf',
occupation: 'CDO',
testimonial:
"The quality of this product exceeded my expectations. It's durable, well-designed, and built to last. Definitely worth the investment!",
},
];
const darkModeLogos = [
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e891fa22f89efd7477a_TerraLight.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a09d1f6337b1dfed14ab_colorado-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
];
const lightModeLogos = [
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e911fa22f2203d7514c_TerraDark.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a0990f3717787fd49245_colorado-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5ca4e548b0deb1041c33_Ankara-black.svg',
];
const logoStyle = {
width: '64px',
opacity: 0.3,
};
export default function Testimonials() {
const { mode, systemMode } = useColorScheme();
let logos;
if (mode === 'system') {
if (systemMode === 'light') {
logos = lightModeLogos;
} else {
logos = darkModeLogos;
}
} else if (mode === 'light') {
logos = lightModeLogos;
} else {
logos = darkModeLogos;
}
return (
<Container
id="testimonials"
sx={{
pt: { xs: 4, sm: 12 },
pb: { xs: 8, sm: 16 },
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 3, sm: 6 },
}}
>
<Box
sx={{
width: { sm: '100%', md: '60%' },
textAlign: { sm: 'left', md: 'center' },
}}
>
<Typography
component="h2"
variant="h4"
gutterBottom
sx={{ color: 'text.primary' }}
>
Testimonials
</Typography>
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
See what our customers love about our products. Discover how we excel in
efficiency, durability, and satisfaction. Join us for quality, innovation,
and reliable support.
</Typography>
</Box>
<Grid container spacing={2}>
{userTestimonials.map((testimonial, index) => (
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={index} sx={{ display: 'flex' }}>
<Card
variant="outlined"
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
flexGrow: 1,
}}
>
<CardContent>
<Typography
variant="body1"
gutterBottom
sx={{ color: 'text.secondary' }}
>
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img
src={logos[index]}
alt={`Logo ${index + 1}`}
style={logoStyle}
/>
</Box>
</Card>
</Grid>
))}
</Grid>
</Container>
);
}

173
docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx Normal file
View File

@@ -0,0 +1,173 @@
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import { useColorScheme } from '@mui/material/styles';
const userTestimonials = [
{
avatar: <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />,
name: 'Remy Sharp',
occupation: 'Senior Engineer',
testimonial:
"I absolutely love how versatile this product is! Whether I'm tackling work projects or indulging in my favorite hobbies, it seamlessly adapts to my changing needs. Its intuitive design has truly enhanced my daily routine, making tasks more efficient and enjoyable.",
},
{
avatar: <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />,
name: 'Travis Howard',
occupation: 'Lead Product Designer',
testimonial:
"One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
},
{
avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
name: 'Cindy Baker',
occupation: 'CTO',
testimonial:
'The level of simplicity and user-friendliness in this product has significantly simplified my life. I appreciate the creators for delivering a solution that not only meets but exceeds user expectations.',
},
{
avatar: <Avatar alt="Remy Sharp" src="/static/images/avatar/4.jpg" />,
name: 'Julia Stewart',
occupation: 'Senior Engineer',
testimonial:
"I appreciate the attention to detail in the design of this product. The small touches make a big difference, and it's evident that the creators focused on delivering a premium experience.",
},
{
avatar: <Avatar alt="Travis Howard" src="/static/images/avatar/5.jpg" />,
name: 'John Smith',
occupation: 'Product Designer',
testimonial:
"I've tried other similar products, but this one stands out for its innovative features. It's clear that the makers put a lot of thought into creating a solution that truly addresses user needs.",
},
{
avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/6.jpg" />,
name: 'Daniel Wolf',
occupation: 'CDO',
testimonial:
"The quality of this product exceeded my expectations. It's durable, well-designed, and built to last. Definitely worth the investment!",
},
];
const darkModeLogos = [
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e891fa22f89efd7477a_TerraLight.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a09d1f6337b1dfed14ab_colorado-white.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
];
const lightModeLogos = [
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e911fa22f2203d7514c_TerraDark.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a0990f3717787fd49245_colorado-black.svg',
'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5ca4e548b0deb1041c33_Ankara-black.svg',
];
const logoStyle = {
width: '64px',
opacity: 0.3,
};
export default function Testimonials() {
const { mode, systemMode } = useColorScheme();
let logos;
if (mode === 'system') {
if (systemMode === 'light') {
logos = lightModeLogos;
} else {
logos = darkModeLogos;
}
} else if (mode === 'light') {
logos = lightModeLogos;
} else {
logos = darkModeLogos;
}
return (
<Container
id="testimonials"
sx={{
pt: { xs: 4, sm: 12 },
pb: { xs: 8, sm: 16 },
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 3, sm: 6 },
}}
>
<Box
sx={{
width: { sm: '100%', md: '60%' },
textAlign: { sm: 'left', md: 'center' },
}}
>
<Typography
component="h2"
variant="h4"
gutterBottom
sx={{ color: 'text.primary' }}
>
Testimonials
</Typography>
<Typography variant="body1" sx={{ color: 'text.secondary' }}>
See what our customers love about our products. Discover how we excel in
efficiency, durability, and satisfaction. Join us for quality, innovation,
and reliable support.
</Typography>
</Box>
<Grid container spacing={2}>
{userTestimonials.map((testimonial, index) => (
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={index} sx={{ display: 'flex' }}>
<Card
variant="outlined"
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
flexGrow: 1,
}}
>
<CardContent>
<Typography
variant="body1"
gutterBottom
sx={{ color: 'text.secondary' }}
>
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img
src={logos[index]}
alt={`Logo ${index + 1}`}
style={logoStyle}
/>
</Box>
</Card>
</Grid>
))}
</Grid>
</Container>
);
}