Skip to content

Commit b3c694f

Browse files
prakhargupta1prakhargupta1
committed
better-alert
1 parent 82a92fd commit b3c694f

2 files changed

Lines changed: 246 additions & 209 deletions

File tree

‎docs/src/components/landing-studio/Hero.js‎

Lines changed: 171 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
66
import useMediaQuery from '@mui/material/useMediaQuery';
77
import SvgMuiLogo from 'docs/src/icons/SvgMuiLogomark';
88
import BrushIcon from '@mui/icons-material/Brush';
9+
import Alert from '@mui/material/Alert';
910
import { Typewriter } from 'react-simple-typewriter';
1011
import GradientText from 'docs/src/components/typography/GradientText';
1112
import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
@@ -100,165 +101,194 @@ export default function Hero() {
100101
const fileIndex = React.useMemo(() => Math.floor(frameIndex / 2), [frameIndex]);
101102

102103
return (
103-
<ToolpadHeroContainer>
104-
<Box
104+
<div>
105+
<Alert
106+
severity="warning"
105107
sx={{
106-
display: 'flex',
107-
flexDirection: 'column',
108-
justifyContent: 'center',
109-
maxWidth: { md: 500, lg: 600, xl: 'unset' },
108+
mb: 4,
109+
borderRadius: 0,
110+
'& .MuiAlert-message': {
111+
width: '100%',
112+
},
110113
}}
111114
>
112-
<Typography
113-
fontWeight="bold"
114-
variant="body2"
115-
sx={[
116-
(theme) => ({
117-
display: 'flex',
118-
alignItems: 'center',
119-
gap: 0.5,
120-
color: (theme.vars || theme).palette.primary[600],
121-
...theme.applyDarkStyles({
122-
color: (theme.vars || theme).palette.primary[400],
123-
}),
124-
}),
125-
]}
115+
At the moment, the maintainers are primarily focused on other projects and are not actively
116+
working on Toolpad Core and Studio. You can use the CRUD dashboard template from the{' '}
117+
<a
118+
href="https://mui.com/material-ui/getting-started/templates/#free-templates"
119+
style={{ color: 'inherit', textDecoration: 'underline' }}
126120
>
127-
<BrushIcon sx={{ fontSize: '0.875rem' }} />
128-
<Box component="span" sx={{ ml: 0.5, mr: 1 }}>
129-
Toolpad Studio
130-
</Box>
131-
</Typography>
132-
<Typography variant="h1" sx={{ my: 2, minWidth: { xs: 'auto', sm: 600 } }}>
133-
Turn your{' '}
134-
<Typewriter
135-
loop
136-
cursor
137-
typeSpeed={100}
138-
deleteSpeed={80}
139-
delaySpeed={5200}
140-
words={words}
141-
/>
142-
<br />
143-
<GradientText>into UIs</GradientText>
144-
</Typography>
145-
<Typography color="text.secondary" sx={{ maxWidth: 520, mb: 3, textWrap: 'balance' }}>
146-
Build scalable and secure internal tools locally. Drag and drop to build UI, then connect
147-
to data sources with your own code.
148-
</Typography>
121+
Material UI React templates page
122+
</a>{' '}
123+
as an easy-to-customize, copy-pastable alternative to the main Toolpad Core components —
124+
including dashboard layout and CRUD features. To share any feedback, please check{' '}
125+
<a
126+
href="https://github.com/mui/toolpad/discussions/5011"
127+
style={{ color: 'inherit', textDecoration: 'underline' }}
128+
>
129+
this GitHub discussion.
130+
</a>{' '}
131+
</Alert>
132+
<ToolpadHeroContainer>
149133
<Box
150134
sx={{
151135
display: 'flex',
152136
flexDirection: 'column',
153-
alignItems: { xs: 'center', md: 'flex-start' },
137+
justifyContent: 'center',
138+
maxWidth: { md: 500, lg: 600, xl: 'unset' },
154139
}}
155140
>
156-
<GetStartedButtons
157-
primaryLabel={'Get started'}
158-
primaryUrl={ROUTES.toolpadQuickstart}
159-
secondaryLabel={'Book a demo'}
160-
secondaryUrl={ROUTES.toolpadDemoBooking}
161-
secondaryUrlTarget="_blank"
162-
altInstallation={'npx create-toolpad-app@latest --studio'}
163-
sx={{ width: '100%' }}
164-
/>
141+
<Typography
142+
fontWeight="bold"
143+
variant="body2"
144+
sx={[
145+
(theme) => ({
146+
display: 'flex',
147+
alignItems: 'center',
148+
gap: 0.5,
149+
color: (theme.vars || theme).palette.primary[600],
150+
...theme.applyDarkStyles({
151+
color: (theme.vars || theme).palette.primary[400],
152+
}),
153+
}),
154+
]}
155+
>
156+
<BrushIcon sx={{ fontSize: '0.875rem' }} />
157+
<Box component="span" sx={{ ml: 0.5, mr: 1 }}>
158+
Toolpad Studio
159+
</Box>
160+
</Typography>
161+
<Typography variant="h1" sx={{ my: 2, minWidth: { xs: 'auto', sm: 600 } }}>
162+
Turn your{' '}
163+
<Typewriter
164+
loop
165+
cursor
166+
typeSpeed={100}
167+
deleteSpeed={80}
168+
delaySpeed={5200}
169+
words={words}
170+
/>
171+
<br />
172+
<GradientText>into UIs</GradientText>
173+
</Typography>
174+
<Typography color="text.secondary" sx={{ maxWidth: 520, mb: 3, textWrap: 'balance' }}>
175+
Build scalable and secure internal tools locally. Drag and drop to build UI, then
176+
connect to data sources with your own code.
177+
</Typography>
178+
<Box
179+
sx={{
180+
display: 'flex',
181+
flexDirection: 'column',
182+
alignItems: { xs: 'center', md: 'flex-start' },
183+
}}
184+
>
185+
<GetStartedButtons
186+
primaryLabel={'Get started'}
187+
primaryUrl={ROUTES.toolpadQuickstart}
188+
secondaryLabel={'Book a demo'}
189+
secondaryUrl={ROUTES.toolpadDemoBooking}
190+
secondaryUrlTarget="_blank"
191+
altInstallation={'npx create-toolpad-app@latest --studio'}
192+
sx={{ width: '100%' }}
193+
/>
194+
</Box>
195+
<Box
196+
sx={{
197+
mt: 4,
198+
display: 'flex',
199+
alignItems: 'center',
200+
justifyContent: { xs: 'space-around', sm: 'start' },
201+
gap: 2,
202+
}}
203+
>
204+
<GithubStars />
205+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
206+
<SvgMuiLogo width={20} />
207+
<Typography color="text.secondary" fontWeight="medium" variant="body2">
208+
Powered by Material&nbsp;UI
209+
</Typography>
210+
</Box>
211+
</Box>
165212
</Box>
166213
<Box
167214
sx={{
168-
mt: 4,
169-
display: 'flex',
170-
alignItems: 'center',
171-
justifyContent: { xs: 'space-around', sm: 'start' },
172-
gap: 2,
215+
position: 'relative',
216+
display: 'grid',
217+
gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
218+
rowGap: 1,
173219
}}
220+
onMouseEnter={() => setPauseHeroAnimation(true)}
221+
onMouseLeave={() => setPauseHeroAnimation(false)}
174222
>
175-
<GithubStars />
176-
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
177-
<SvgMuiLogo width={20} />
178-
<Typography color="text.secondary" fontWeight="medium" variant="body2">
179-
Powered by Material&nbsp;UI
180-
</Typography>
181-
</Box>
182-
</Box>
183-
</Box>
184-
<Box
185-
sx={{
186-
position: 'relative',
187-
display: 'grid',
188-
gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
189-
rowGap: 1,
190-
}}
191-
onMouseEnter={() => setPauseHeroAnimation(true)}
192-
onMouseLeave={() => setPauseHeroAnimation(false)}
193-
>
194-
<Box
195-
className="MuiToolpadHero-image"
196-
sx={[
197-
(theme) => ({
198-
position: { xs: 'absolute', sm: 'relative', md: 'absolute' },
199-
gridRowStart: 1,
200-
gridRowEnd: 2,
201-
gridColumnStart: { xs: 'unset', sm: 1, md: 'unset' },
202-
width: '100%',
203-
justifySelf: { xs: 'center', sm: 'unset' },
204-
'& > img': {
205-
objectFit: { xs: 'cover', sm: 'unset' },
206-
objectPosition: { xs: 'top', sm: 'unset' },
207-
},
208-
height: '100%',
209-
borderRadius: '16px',
210-
padding: '8px',
211-
background: `linear-gradient(120deg, ${
212-
(theme.vars || theme).palette.grey[50]
213-
} 0%, ${alpha(theme.palette.primary[50], 0.5)} 150%)`,
214-
border: '1px solid',
215-
borderColor: (theme.vars || theme).palette.grey[100],
216-
backfaceVisibility: 'hidden',
217-
transition: 'all 0.3s ease',
218-
transform: {
219-
xs: `rotateY(${heroAppMode ? '0' : '180'}deg)`,
220-
sm: 'unset',
221-
md: `rotateY(${heroAppMode ? '0' : '180'}deg)`,
222-
},
223-
boxShadow: `0 4px 8px ${alpha(theme.palette.grey[100], 0.9)}`,
224-
}),
225-
(theme) =>
226-
theme.applyDarkStyles({
223+
<Box
224+
className="MuiToolpadHero-image"
225+
sx={[
226+
(theme) => ({
227+
position: { xs: 'absolute', sm: 'relative', md: 'absolute' },
228+
gridRowStart: 1,
229+
gridRowEnd: 2,
230+
gridColumnStart: { xs: 'unset', sm: 1, md: 'unset' },
231+
width: '100%',
232+
justifySelf: { xs: 'center', sm: 'unset' },
233+
'& > img': {
234+
objectFit: { xs: 'cover', sm: 'unset' },
235+
objectPosition: { xs: 'top', sm: 'unset' },
236+
},
237+
height: '100%',
238+
borderRadius: '16px',
239+
padding: '8px',
227240
background: `linear-gradient(120deg, ${
228-
(theme.vars || theme).palette.primaryDark[500]
229-
} 0%, ${alpha(theme.palette.primaryDark[800], 0.4)} 150%)`,
230-
borderColor: `${alpha(theme.palette.primaryDark[300], 0.3)}`,
231-
boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.8)}`,
241+
(theme.vars || theme).palette.grey[50]
242+
} 0%, ${alpha(theme.palette.primary[50], 0.5)} 150%)`,
243+
border: '1px solid',
244+
borderColor: (theme.vars || theme).palette.grey[100],
245+
backfaceVisibility: 'hidden',
246+
transition: 'all 0.3s ease',
247+
transform: {
248+
xs: `rotateY(${heroAppMode ? '0' : '180'}deg)`,
249+
sm: 'unset',
250+
md: `rotateY(${heroAppMode ? '0' : '180'}deg)`,
251+
},
252+
boxShadow: `0 4px 8px ${alpha(theme.palette.grey[100], 0.9)}`,
232253
}),
233-
]}
234-
>
235-
<Img
236-
src={`/static/toolpad/marketing/hero-${fileIndex + 1}.png`}
237-
width="2880"
238-
height="1592"
239-
/>
240-
</Box>
241-
<CodeBlock appMode={heroAppMode} fileIndex={fileIndex} setFrameIndex={setFrameIndex} />
242-
<Box
243-
sx={{
244-
display: { xs: 'grid', sm: 'none', md: 'grid' },
245-
gridRowStart: 2,
246-
gridColumnStart: 1,
247-
gridColumnEnd: 3,
248-
transform: { xs: 'scale(0.95)', sm: 'unset' },
249-
}}
250-
>
251-
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'center' }}>
252-
<Typography variant="caption" color="text.secondary">
253-
Code
254-
</Typography>
255-
<HeroModeSwitch checked={heroAppMode} onChange={handleModeChange} />
256-
<Typography variant="caption" color="text.secondary">
257-
UI
258-
</Typography>
254+
(theme) =>
255+
theme.applyDarkStyles({
256+
background: `linear-gradient(120deg, ${
257+
(theme.vars || theme).palette.primaryDark[500]
258+
} 0%, ${alpha(theme.palette.primaryDark[800], 0.4)} 150%)`,
259+
borderColor: `${alpha(theme.palette.primaryDark[300], 0.3)}`,
260+
boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.8)}`,
261+
}),
262+
]}
263+
>
264+
<Img
265+
src={`/static/toolpad/marketing/hero-${fileIndex + 1}.png`}
266+
width="2880"
267+
height="1592"
268+
/>
269+
</Box>
270+
<CodeBlock appMode={heroAppMode} fileIndex={fileIndex} setFrameIndex={setFrameIndex} />
271+
<Box
272+
sx={{
273+
display: { xs: 'grid', sm: 'none', md: 'grid' },
274+
gridRowStart: 2,
275+
gridColumnStart: 1,
276+
gridColumnEnd: 3,
277+
transform: { xs: 'scale(0.95)', sm: 'unset' },
278+
}}
279+
>
280+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'center' }}>
281+
<Typography variant="caption" color="text.secondary">
282+
Code
283+
</Typography>
284+
<HeroModeSwitch checked={heroAppMode} onChange={handleModeChange} />
285+
<Typography variant="caption" color="text.secondary">
286+
UI
287+
</Typography>
288+
</Box>
259289
</Box>
260290
</Box>
261-
</Box>
262-
</ToolpadHeroContainer>
291+
</ToolpadHeroContainer>
292+
</div>
263293
);
264294
}

0 commit comments

Comments
 (0)