MUI + Public
This commit is contained in:
SECUNDIS\masantos
@@ -1,26 +1,100 @@
|
||||
import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import * as React from 'react';
|
||||
import { PaletteMode } from '@mui/material';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import Box from '@mui/material/Box';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
import ToggleButton from '@mui/material/ToggleButton';
|
||||
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
import { Helmet } from 'react-helmet';
|
||||
import getLPTheme from './GeradoresTheme';
|
||||
|
||||
import AppAppBar from './components/AppAppBar';
|
||||
import Hero from './components/Hero';
|
||||
import LogoCollection from './components/LogoCollection';
|
||||
import Highlights from './components/Highlights';
|
||||
import Pricing from './components/Pricing';
|
||||
import Features from './components/Features';
|
||||
import Testimonials from './components/Testimonials';
|
||||
import FAQ from './components/FAQ';
|
||||
import Footer from './components/Footer';
|
||||
|
||||
|
||||
|
||||
interface ToggleCustomThemeProps {
|
||||
showCustomTheme: Boolean;
|
||||
toggleCustomTheme: () => void;
|
||||
}
|
||||
|
||||
function ToggleCustomTheme({
|
||||
showCustomTheme,
|
||||
toggleCustomTheme,
|
||||
}: ToggleCustomThemeProps) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
width: '100dvw',
|
||||
position: 'fixed',
|
||||
bottom: 24,
|
||||
}}
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
<ToggleButtonGroup
|
||||
color="primary"
|
||||
exclusive
|
||||
value={showCustomTheme}
|
||||
onChange={toggleCustomTheme}
|
||||
aria-label="Platform"
|
||||
sx={{
|
||||
backgroundColor: 'background.default',
|
||||
'& .Mui-selected': {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ToggleButton value>
|
||||
|
||||
Custom theme
|
||||
</ToggleButton>
|
||||
<ToggleButton value={false}>Material Design 2</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
function App() {
|
||||
const [mode, setMode] = React.useState<PaletteMode>('light');
|
||||
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
|
||||
const LPtheme = createTheme(getLPTheme(mode));
|
||||
const defaultTheme = createTheme({ palette: { mode } });
|
||||
|
||||
const toggleColorMode = () => {
|
||||
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
|
||||
};
|
||||
|
||||
const toggleCustomTheme = () => {
|
||||
setShowCustomTheme((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Helmet>
|
||||
<meta charSet="utf-8" />
|
||||
<title>Geradores</title>
|
||||
</Helmet>
|
||||
<ThemeProvider theme={showCustomTheme ? LPtheme : defaultTheme}>
|
||||
<CssBaseline />
|
||||
<AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
|
||||
<Hero />
|
||||
<Box sx={{ bgcolor: 'background.default' }}>
|
||||
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
633
geradoresfe/src/GeradoresTheme.tsx
Normal file
633
geradoresfe/src/GeradoresTheme.tsx
Normal file
@@ -0,0 +1,633 @@
|
||||
import type { } from '@mui/material/themeCssVarsAugmentation';
|
||||
import { ThemeOptions, alpha } from '@mui/material/styles';
|
||||
import { red } from '@mui/material/colors';
|
||||
import { PaletteMode } from '@mui/material';
|
||||
|
||||
declare module '@mui/material/styles/createPalette' {
|
||||
interface ColorRange {
|
||||
50: string;
|
||||
100: string;
|
||||
200: string;
|
||||
300: string;
|
||||
400: string;
|
||||
500: string;
|
||||
600: string;
|
||||
700: string;
|
||||
800: string;
|
||||
900: string;
|
||||
}
|
||||
|
||||
interface PaletteColor extends ColorRange { }
|
||||
}
|
||||
|
||||
export const brand = {
|
||||
50: '#F0F7FF',
|
||||
100: '#CEE5FD',
|
||||
200: '#9CCCFC',
|
||||
300: '#55A6F6',
|
||||
400: '#0A66C2',
|
||||
500: '#0959AA',
|
||||
600: '#064079',
|
||||
700: '#033363',
|
||||
800: '#02294F',
|
||||
900: '#021F3B',
|
||||
};
|
||||
|
||||
export const secondary = {
|
||||
50: '#F9F0FF',
|
||||
100: '#E9CEFD',
|
||||
200: '#D49CFC',
|
||||
300: '#B355F6',
|
||||
400: '#750AC2',
|
||||
500: '#6709AA',
|
||||
600: '#490679',
|
||||
700: '#3B0363',
|
||||
800: '#2F024F',
|
||||
900: '#23023B',
|
||||
};
|
||||
|
||||
export const gray = {
|
||||
50: '#FBFCFE',
|
||||
100: '#EAF0F5',
|
||||
200: '#D6E2EB',
|
||||
300: '#BFCCD9',
|
||||
400: '#94A6B8',
|
||||
500: '#5B6B7C',
|
||||
600: '#4C5967',
|
||||
700: '#364049',
|
||||
800: '#131B20',
|
||||
900: '#090E10',
|
||||
};
|
||||
|
||||
export const green = {
|
||||
50: '#F6FEF6',
|
||||
100: '#E3FBE3',
|
||||
200: '#C7F7C7',
|
||||
300: '#A1E8A1',
|
||||
400: '#51BC51',
|
||||
500: '#1F7A1F',
|
||||
600: '#136C13',
|
||||
700: '#0A470A',
|
||||
800: '#042F04',
|
||||
900: '#021D02',
|
||||
};
|
||||
|
||||
const getDesignTokens = (mode: PaletteMode) => ({
|
||||
palette: {
|
||||
mode,
|
||||
primary: {
|
||||
light: brand[200],
|
||||
main: brand[500],
|
||||
dark: brand[800],
|
||||
contrastText: brand[50],
|
||||
...(mode === 'dark' && {
|
||||
contrastText: brand[100],
|
||||
light: brand[300],
|
||||
main: brand[400],
|
||||
dark: brand[800],
|
||||
}),
|
||||
},
|
||||
secondary: {
|
||||
light: secondary[300],
|
||||
main: secondary[500],
|
||||
dark: secondary[800],
|
||||
...(mode === 'dark' && {
|
||||
light: secondary[400],
|
||||
main: secondary[500],
|
||||
dark: secondary[900],
|
||||
}),
|
||||
},
|
||||
warning: {
|
||||
main: '#F7B538',
|
||||
dark: '#F79F00',
|
||||
...(mode === 'dark' && { main: '#F7B538', dark: '#F79F00' }),
|
||||
},
|
||||
error: {
|
||||
light: red[50],
|
||||
main: red[500],
|
||||
dark: red[700],
|
||||
...(mode === 'dark' && { light: '#D32F2F', main: '#D32F2F', dark: '#B22A2A' }),
|
||||
},
|
||||
success: {
|
||||
light: green[300],
|
||||
main: green[400],
|
||||
dark: green[800],
|
||||
...(mode === 'dark' && {
|
||||
light: green[400],
|
||||
main: green[500],
|
||||
dark: green[700],
|
||||
}),
|
||||
},
|
||||
grey: {
|
||||
50: gray[50],
|
||||
100: gray[100],
|
||||
200: gray[200],
|
||||
300: gray[300],
|
||||
400: gray[400],
|
||||
500: gray[500],
|
||||
600: gray[600],
|
||||
700: gray[700],
|
||||
800: gray[800],
|
||||
900: gray[900],
|
||||
},
|
||||
divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5),
|
||||
background: {
|
||||
default: '#fff',
|
||||
paper: gray[50],
|
||||
...(mode === 'dark' && { default: gray[900], paper: gray[800] }),
|
||||
},
|
||||
text: {
|
||||
primary: gray[800],
|
||||
secondary: gray[600],
|
||||
...(mode === 'dark' && { primary: '#fff', secondary: gray[400] }),
|
||||
},
|
||||
action: {
|
||||
selected: `${alpha(brand[200], 0.2)}`,
|
||||
...(mode === 'dark' && {
|
||||
selected: alpha(brand[800], 0.2),
|
||||
}),
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
fontFamily: ['"Inter", "sans-serif"'].join(','),
|
||||
h1: {
|
||||
fontSize: 60,
|
||||
fontWeight: 600,
|
||||
lineHeight: 78 / 70,
|
||||
letterSpacing: -0.2,
|
||||
},
|
||||
h2: {
|
||||
fontSize: 48,
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.2,
|
||||
},
|
||||
h3: {
|
||||
fontSize: 42,
|
||||
lineHeight: 1.2,
|
||||
},
|
||||
h4: {
|
||||
fontSize: 36,
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
h5: {
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
},
|
||||
h6: {
|
||||
fontSize: 18,
|
||||
},
|
||||
subtitle1: {
|
||||
fontSize: 18,
|
||||
},
|
||||
subtitle2: {
|
||||
fontSize: 16,
|
||||
},
|
||||
body1: {
|
||||
fontWeight: 400,
|
||||
fontSize: 15,
|
||||
},
|
||||
body2: {
|
||||
fontWeight: 400,
|
||||
fontSize: 14,
|
||||
},
|
||||
caption: {
|
||||
fontWeight: 400,
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default function getLPTheme(mode: PaletteMode): ThemeOptions {
|
||||
return {
|
||||
...getDesignTokens(mode),
|
||||
components: {
|
||||
MuiAccordion: {
|
||||
defaultProps: {
|
||||
elevation: 0,
|
||||
disableGutters: true,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
padding: 8,
|
||||
overflow: 'clip',
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid',
|
||||
borderColor: gray[100],
|
||||
':before': {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
'&:first-of-type': {
|
||||
borderTopLeftRadius: 10,
|
||||
borderTopRightRadius: 10,
|
||||
},
|
||||
'&:last-of-type': {
|
||||
borderBottomLeftRadius: 10,
|
||||
borderBottomRightRadius: 10,
|
||||
},
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
backgroundColor: gray[900],
|
||||
borderColor: gray[800],
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiAccordionSummary: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
border: 'none',
|
||||
borderRadius: 8,
|
||||
'&:hover': { backgroundColor: gray[100] },
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
'&:hover': { backgroundColor: gray[800] },
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiAccordionDetails: {
|
||||
styleOverrides: {
|
||||
root: { mb: 20, border: 'none' },
|
||||
},
|
||||
},
|
||||
MuiToggleButtonGroup: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
borderRadius: '10px',
|
||||
boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
|
||||
'& .Mui-selected': {
|
||||
color: brand[500],
|
||||
},
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
'& .Mui-selected': {
|
||||
color: '#fff',
|
||||
},
|
||||
boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiToggleButton: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
padding: '12px 16px',
|
||||
textTransform: 'none',
|
||||
borderRadius: '10px',
|
||||
fontWeight: 500,
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
color: gray[400],
|
||||
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
|
||||
'&.Mui-selected': { color: brand[300] },
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiButtonBase: {
|
||||
defaultProps: {
|
||||
disableTouchRipple: true,
|
||||
disableRipple: true,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: {
|
||||
boxSizing: 'border-box',
|
||||
transition: 'all 100ms ease-in',
|
||||
'&:focus-visible': {
|
||||
outline: `3px solid ${alpha(brand[500], 0.5)}`,
|
||||
outlineOffset: '2px',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: ({ theme, ownerState }) => ({
|
||||
boxSizing: 'border-box',
|
||||
boxShadow: 'none',
|
||||
borderRadius: '10px',
|
||||
textTransform: 'none',
|
||||
'&:active': {
|
||||
transform: 'scale(0.98)',
|
||||
},
|
||||
...(ownerState.size === 'small' && {
|
||||
maxHeight: '32px',
|
||||
}),
|
||||
...(ownerState.size === 'medium' && {
|
||||
height: '40px',
|
||||
}),
|
||||
...(ownerState.variant === 'contained' &&
|
||||
ownerState.color === 'primary' && {
|
||||
color: brand[50],
|
||||
background: brand[500],
|
||||
backgroundImage: `linear-gradient(to bottom, ${brand[400]}, ${brand[600]})`,
|
||||
boxShadow: `inset 0 1px ${alpha(brand[300], 0.4)}`,
|
||||
outline: `1px solid ${brand[700]}`,
|
||||
'&:hover': {
|
||||
background: brand[400],
|
||||
backgroundImage: 'none',
|
||||
boxShadow: `0 0 0 1px ${alpha(brand[300], 0.5)}`,
|
||||
},
|
||||
}),
|
||||
...(ownerState.variant === 'outlined' && {
|
||||
backgroundColor: alpha(brand[300], 0.1),
|
||||
borderColor: brand[300],
|
||||
color: brand[500],
|
||||
'&:hover': {
|
||||
backgroundColor: alpha(brand[300], 0.3),
|
||||
borderColor: brand[200],
|
||||
},
|
||||
}),
|
||||
...(ownerState.variant === 'text' && {
|
||||
color: brand[500],
|
||||
'&:hover': {
|
||||
backgroundColor: alpha(brand[300], 0.3),
|
||||
borderColor: brand[200],
|
||||
},
|
||||
}),
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
...(ownerState.variant === 'outlined' && {
|
||||
backgroundColor: alpha(brand[600], 0.1),
|
||||
borderColor: brand[700],
|
||||
color: brand[300],
|
||||
'&:hover': {
|
||||
backgroundColor: alpha(brand[600], 0.3),
|
||||
borderColor: brand[700],
|
||||
},
|
||||
}),
|
||||
...(ownerState.variant === 'text' && {
|
||||
color: brand[300],
|
||||
'&:hover': {
|
||||
backgroundColor: alpha(brand[600], 0.3),
|
||||
borderColor: brand[700],
|
||||
},
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiCard: {
|
||||
styleOverrides: {
|
||||
root: ({ theme, ownerState }) => ({
|
||||
backgroundColor: gray[50],
|
||||
borderRadius: 10,
|
||||
border: `1px solid ${alpha(gray[200], 0.8)}`,
|
||||
boxShadow: 'none',
|
||||
transition: 'background-color, border, 80ms ease',
|
||||
...(ownerState.variant === 'outlined' && {
|
||||
background: `linear-gradient(to bottom, #FFF, ${gray[50]})`,
|
||||
'&:hover': {
|
||||
borderColor: brand[300],
|
||||
boxShadow: `0 0 24px ${brand[100]}`,
|
||||
},
|
||||
}),
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
backgroundColor: alpha(gray[800], 0.6),
|
||||
border: `1px solid ${alpha(gray[700], 0.3)}`,
|
||||
...(ownerState.variant === 'outlined' && {
|
||||
background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
|
||||
gray[800],
|
||||
0.5,
|
||||
)})`,
|
||||
'&:hover': {
|
||||
borderColor: brand[700],
|
||||
boxShadow: `0 0 24px ${brand[800]}`,
|
||||
},
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiChip: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
alignSelf: 'center',
|
||||
py: 1.5,
|
||||
px: 0.5,
|
||||
background: `linear-gradient(to bottom right, ${brand[50]}, ${brand[100]})`,
|
||||
border: '1px solid',
|
||||
borderColor: `${alpha(brand[500], 0.3)}`,
|
||||
fontWeight: '600',
|
||||
'&:hover': {
|
||||
backgroundColor: brand[500],
|
||||
},
|
||||
'&:focus-visible': {
|
||||
borderColor: brand[800],
|
||||
backgroundColor: brand[200],
|
||||
},
|
||||
'& .MuiChip-label': {
|
||||
color: brand[500],
|
||||
},
|
||||
'& .MuiChip-icon': {
|
||||
color: brand[500],
|
||||
},
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
background: `linear-gradient(to bottom right, ${brand[700]}, ${brand[900]})`,
|
||||
borderColor: `${alpha(brand[500], 0.5)}`,
|
||||
'&:hover': {
|
||||
backgroundColor: brand[600],
|
||||
},
|
||||
'&:focus-visible': {
|
||||
borderColor: brand[200],
|
||||
backgroundColor: brand[600],
|
||||
},
|
||||
'& .MuiChip-label': {
|
||||
color: brand[200],
|
||||
},
|
||||
'& .MuiChip-icon': {
|
||||
color: brand[200],
|
||||
},
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiDivider: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
borderColor: `${alpha(gray[200], 0.8)}`,
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
borderColor: `${alpha(gray[700], 0.4)}`,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiLink: {
|
||||
defaultProps: {
|
||||
underline: 'none',
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
color: brand[600],
|
||||
fontWeight: 500,
|
||||
position: 'relative',
|
||||
textDecoration: 'none',
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
width: 0,
|
||||
height: '1px',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
backgroundColor: brand[200],
|
||||
opacity: 0.7,
|
||||
transition: 'width 0.3s ease, opacity 0.3s ease',
|
||||
},
|
||||
'&:hover::before': {
|
||||
width: '100%',
|
||||
opacity: 1,
|
||||
},
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
color: brand[200],
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiMenuItem: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
borderRadius: '99px',
|
||||
color: gray[500],
|
||||
fontWeight: 500,
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
color: gray[300],
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: gray[100],
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
backgroundColor: alpha(gray[900], 0.6),
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiSwitch: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
boxSizing: 'border-box',
|
||||
width: 36,
|
||||
height: 24,
|
||||
padding: 0,
|
||||
transition: 'background-color 100ms ease-in',
|
||||
'&:hover': {
|
||||
'& .MuiSwitch-track': {
|
||||
backgroundColor: brand[600],
|
||||
},
|
||||
},
|
||||
'& .MuiSwitch-switchBase': {
|
||||
'&.Mui-checked': {
|
||||
transform: 'translateX(13px)',
|
||||
},
|
||||
},
|
||||
'& .MuiSwitch-track': {
|
||||
borderRadius: 50,
|
||||
},
|
||||
'& .MuiSwitch-thumb': {
|
||||
boxShadow: '0 0 2px 2px rgba(0, 0, 0, 0.2)',
|
||||
backgroundColor: '#FFF',
|
||||
width: 16,
|
||||
height: 16,
|
||||
margin: 2,
|
||||
},
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
width: 36,
|
||||
height: 24,
|
||||
padding: 0,
|
||||
transition: 'background-color 100ms ease-in',
|
||||
'&:hover': {
|
||||
'& .MuiSwitch-track': {
|
||||
backgroundColor: brand[600],
|
||||
},
|
||||
},
|
||||
'& .MuiSwitch-switchBase': {
|
||||
'&.Mui-checked': {
|
||||
transform: 'translateX(13px)',
|
||||
},
|
||||
},
|
||||
'& .MuiSwitch-thumb': {
|
||||
boxShadow: '0 0 2px 2px rgba(0, 0, 0, 0.2)',
|
||||
backgroundColor: '#FFF',
|
||||
width: 16,
|
||||
height: 16,
|
||||
margin: 2,
|
||||
},
|
||||
}),
|
||||
}),
|
||||
switchBase: {
|
||||
height: 24,
|
||||
width: 24,
|
||||
padding: 0,
|
||||
color: '#fff',
|
||||
'&.Mui-checked + .MuiSwitch-track': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTextField: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
'& label .Mui-focused': {
|
||||
color: 'white',
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
boxSizing: 'border-box',
|
||||
'&::placeholder': {
|
||||
opacity: 0.7,
|
||||
},
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
boxSizing: 'border-box',
|
||||
minWidth: 280,
|
||||
minHeight: 40,
|
||||
height: '100%',
|
||||
borderRadius: '10px',
|
||||
border: '1px solid',
|
||||
borderColor: gray[200],
|
||||
transition: 'border-color 120ms ease-in',
|
||||
'& fieldset': {
|
||||
border: 'none',
|
||||
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
background: `${alpha('#FFF', 0.3)}`,
|
||||
},
|
||||
'&:hover': {
|
||||
borderColor: brand[300],
|
||||
},
|
||||
'&.Mui-focused': {
|
||||
borderColor: brand[400],
|
||||
outline: '4px solid',
|
||||
outlineColor: brand[200],
|
||||
},
|
||||
},
|
||||
...(theme.palette.mode === 'dark' && {
|
||||
'& .MuiOutlinedInput-root': {
|
||||
boxSizing: 'border-box',
|
||||
minWidth: 280,
|
||||
minHeight: 40,
|
||||
height: '100%',
|
||||
borderRadius: '10px',
|
||||
border: '1px solid',
|
||||
borderColor: gray[600],
|
||||
transition: 'border-color 120ms ease-in',
|
||||
'& fieldset': {
|
||||
border: 'none',
|
||||
boxShadow: ' 0px 2px 4px rgba(0, 0, 0, 0.4)',
|
||||
background: `${alpha(gray[800], 0.4)}`,
|
||||
},
|
||||
'&:hover': {
|
||||
borderColor: brand[300],
|
||||
},
|
||||
'&.Mui-focused': {
|
||||
borderColor: brand[400],
|
||||
outline: '4px solid',
|
||||
outlineColor: alpha(brand[500], 0.5),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
227
geradoresfe/src/components/AppAppBar.tsx
Normal file
227
geradoresfe/src/components/AppAppBar.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import * as React from 'react';
|
||||
import { PaletteMode } from '@mui/material';
|
||||
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 ToggleColorMode from './ToggleColorMode';
|
||||
|
||||
import Sitemark from './SitemarkIcon';
|
||||
|
||||
interface AppAppBarProps {
|
||||
mode: PaletteMode;
|
||||
toggleColorMode: () => void;
|
||||
}
|
||||
|
||||
export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const toggleDrawer = (newOpen: boolean) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
const scrollToSection = (sectionId: string) => {
|
||||
const sectionElement = document.getElementById(sectionId);
|
||||
const offset = 128;
|
||||
if (sectionElement) {
|
||||
const targetScroll = sectionElement.offsetTop - offset;
|
||||
sectionElement.scrollIntoView({ behavior: 'smooth' });
|
||||
window.scrollTo({
|
||||
top: targetScroll,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
boxShadow: 0,
|
||||
bgcolor: 'transparent',
|
||||
backgroundImage: 'none',
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<Toolbar
|
||||
variant="regular"
|
||||
sx={(theme) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexShrink: 0,
|
||||
borderRadius: '999px',
|
||||
bgcolor:
|
||||
theme.palette.mode === 'light'
|
||||
? 'hsla(220, 60%, 99%, 0.6)'
|
||||
: 'hsla(220, 0%, 0%, 0.7)',
|
||||
backdropFilter: 'blur(24px)',
|
||||
maxHeight: 40,
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
boxShadow:
|
||||
theme.palette.mode === 'light'
|
||||
? '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)'
|
||||
: '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)',
|
||||
})}
|
||||
>
|
||||
<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"
|
||||
onClick={() => scrollToSection('features')}
|
||||
>
|
||||
Features
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="small"
|
||||
onClick={() => scrollToSection('testimonials')}
|
||||
>
|
||||
Testimonials
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="small"
|
||||
onClick={() => scrollToSection('highlights')}
|
||||
>
|
||||
Highlights
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="small"
|
||||
onClick={() => scrollToSection('pricing')}
|
||||
>
|
||||
Pricing
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="small"
|
||||
onClick={() => scrollToSection('faq')}
|
||||
sx={{ minWidth: 0 }}
|
||||
>
|
||||
FAQ
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
gap: 0.5,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
|
||||
<Button
|
||||
color="primary"
|
||||
variant="text"
|
||||
size="small"
|
||||
component="a"
|
||||
href="/material-ui/getting-started/templates/sign-in/"
|
||||
target="_blank"
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
size="small"
|
||||
component="a"
|
||||
href="/material-ui/getting-started/templates/sign-up/"
|
||||
target="_blank"
|
||||
>
|
||||
Sign up
|
||||
</Button>
|
||||
</Box>
|
||||
<Box sx={{ display: { sm: 'flex', md: 'none' } }}>
|
||||
<IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Drawer anchor="top" open={open} onClose={toggleDrawer(false)}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
backgroundColor: 'background.default',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
|
||||
<IconButton onClick={toggleDrawer(false)}>
|
||||
<CloseRoundedIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Divider sx={{ my: 3 }} />
|
||||
<MenuItem onClick={() => scrollToSection('features')}>
|
||||
Features
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => scrollToSection('testimonials')}>
|
||||
Testimonials
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => scrollToSection('highlights')}>
|
||||
Highlights
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => scrollToSection('pricing')}>
|
||||
Pricing
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => scrollToSection('faq')}>FAQ</MenuItem>
|
||||
<MenuItem>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
component="a"
|
||||
href="/material-ui/getting-started/templates/sign-up/"
|
||||
target="_blank"
|
||||
fullWidth
|
||||
>
|
||||
Sign up
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
component="a"
|
||||
href="/material-ui/getting-started/templates/sign-in/"
|
||||
target="_blank"
|
||||
fullWidth
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
</MenuItem>
|
||||
</Box>
|
||||
</Drawer>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
150
geradoresfe/src/components/FAQ.tsx
Normal file
150
geradoresfe/src/components/FAQ.tsx
Normal 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<string | false>(false);
|
||||
|
||||
const handleChange =
|
||||
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
|
||||
setExpanded(isExpanded ? panel : false);
|
||||
};
|
||||
|
||||
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"
|
||||
color="text.primary"
|
||||
sx={{
|
||||
width: { sm: '100%', md: '60%' },
|
||||
textAlign: { sm: 'left', md: 'center' },
|
||||
}}
|
||||
>
|
||||
Frequently asked questions
|
||||
</Typography>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Accordion
|
||||
expanded={expanded === 'panel1'}
|
||||
onChange={handleChange('panel1')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel1d-content"
|
||||
id="panel1d-header"
|
||||
>
|
||||
<Typography component="h3" 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
|
||||
<Link> support@email.com </Link>
|
||||
or calling our toll-free number. We're here to assist you
|
||||
promptly.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion
|
||||
expanded={expanded === 'panel2'}
|
||||
onChange={handleChange('panel2')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel2d-content"
|
||||
id="panel2d-header"
|
||||
>
|
||||
<Typography component="h3" variant="subtitle2">
|
||||
Can I return the product if it doesn'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'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 === 'panel3'}
|
||||
onChange={handleChange('panel3')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel3d-content"
|
||||
id="panel3d-header"
|
||||
>
|
||||
<Typography component="h3" 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 === 'panel4'}
|
||||
onChange={handleChange('panel4')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel4d-content"
|
||||
id="panel4d-header"
|
||||
>
|
||||
<Typography component="h3" 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>
|
||||
);
|
||||
}
|
||||
272
geradoresfe/src/components/Features.tsx
Normal file
272
geradoresfe/src/components/Features.tsx
Normal 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 Chip from '@mui/material/Chip';
|
||||
import Container from '@mui/material/Container';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
|
||||
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("/static/images/templates/templates-images/dash-light.png")',
|
||||
imageDark: 'url("/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("/static/images/templates/templates-images/mobile-light.png")',
|
||||
imageDark: 'url("/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("/static/images/templates/templates-images/devices-light.png")',
|
||||
imageDark: 'url("/static/images/templates/templates-images/devices-dark.png")',
|
||||
},
|
||||
];
|
||||
|
||||
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 } }}>
|
||||
<Grid container spacing={6}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<div>
|
||||
<Typography component="h2" variant="h4" color="text.primary">
|
||||
Product features
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body1"
|
||||
color="text.secondary"
|
||||
sx={{ 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>
|
||||
</div>
|
||||
<Grid container item gap={1} sx={{ display: { xs: 'auto', sm: 'none' } }}>
|
||||
{items.map(({ title }, index) => (
|
||||
<Chip
|
||||
key={index}
|
||||
label={title}
|
||||
onClick={() => handleItemClick(index)}
|
||||
sx={(theme) => ({
|
||||
...(selectedItemIndex === index && {
|
||||
borderColor:
|
||||
theme.palette.mode === 'light'
|
||||
? 'primary.light'
|
||||
: 'primary.dark',
|
||||
background:
|
||||
'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
|
||||
color: 'hsl(0, 0%, 100%)',
|
||||
'& .MuiChip-label': {
|
||||
color: 'hsl(0, 0%, 100%)',
|
||||
},
|
||||
}),
|
||||
})}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
display: { xs: 'auto', sm: 'none' },
|
||||
mt: 4,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundImage: (theme) =>
|
||||
theme.palette.mode === 'light'
|
||||
? items[selectedItemIndex].imageLight
|
||||
: items[selectedItemIndex].imageDark,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
minHeight: 280,
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ px: 2, pb: 2 }}>
|
||||
<Typography color="text.primary" fontWeight="medium" gutterBottom>
|
||||
{selectedFeature.title}
|
||||
</Typography>
|
||||
<Typography color="text.secondary" variant="body2" sx={{ mb: 1.5 }}>
|
||||
{selectedFeature.description}
|
||||
</Typography>
|
||||
<Link
|
||||
color="primary"
|
||||
variant="body2"
|
||||
fontWeight="bold"
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
'& > svg': { transition: '0.2s' },
|
||||
'&:hover > svg': { transform: 'translateX(2px)' },
|
||||
}}
|
||||
>
|
||||
<span>Learn more</span>
|
||||
<ChevronRightRoundedIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: '1px', ml: '2px' }}
|
||||
/>
|
||||
</Link>
|
||||
</Box>
|
||||
</Card>
|
||||
<Stack
|
||||
direction="column"
|
||||
justifyContent="center"
|
||||
alignItems="flex-start"
|
||||
spacing={2}
|
||||
useFlexGap
|
||||
sx={{ width: '100%', display: { xs: 'none', sm: 'flex' } }}
|
||||
>
|
||||
{items.map(({ icon, title, description }, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
component={Button}
|
||||
onClick={() => handleItemClick(index)}
|
||||
sx={(theme) => ({
|
||||
p: 3,
|
||||
height: 'fit-content',
|
||||
width: '100%',
|
||||
background: 'none',
|
||||
...(selectedItemIndex === index && {
|
||||
backgroundColor: 'action.selected',
|
||||
borderColor:
|
||||
theme.palette.mode === 'light'
|
||||
? 'primary.light'
|
||||
: 'primary.dark',
|
||||
}),
|
||||
'&:hover': {
|
||||
background:
|
||||
theme.palette.mode === 'light'
|
||||
? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)'
|
||||
: 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
|
||||
borderColor:
|
||||
theme.palette.mode === 'light'
|
||||
? 'primary.light'
|
||||
: 'primary.dark',
|
||||
boxShadow:
|
||||
theme.palette.mode === 'light'
|
||||
? '0px 2px 8px hsla(0, 0%, 0%, 0.1)'
|
||||
: '0px 1px 8px hsla(210, 100%, 25%, 0.5) ',
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
textAlign: 'left',
|
||||
flexDirection: { xs: 'column', md: 'row' },
|
||||
alignItems: { md: 'center' },
|
||||
gap: 2.5,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={(theme) => ({
|
||||
color:
|
||||
theme.palette.mode === 'light' ? 'grey.400' : 'grey.600',
|
||||
...(selectedItemIndex === index && {
|
||||
color: 'primary.main',
|
||||
}),
|
||||
})}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
<div>
|
||||
<Typography
|
||||
color="text.primary"
|
||||
fontWeight="medium"
|
||||
gutterBottom
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
color="text.secondary"
|
||||
variant="body2"
|
||||
sx={{ mb: 1.5 }}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
<Link
|
||||
color="primary"
|
||||
variant="body2"
|
||||
fontWeight="bold"
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
'& > svg': { transition: '0.2s' },
|
||||
'&:hover > svg': { transform: 'translateX(2px)' },
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<span>Learn more</span>
|
||||
<ChevronRightRoundedIcon
|
||||
fontSize="small"
|
||||
sx={{ mt: '1px', ml: '2px' }}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={6}
|
||||
sx={{ display: { xs: 'none', sm: 'flex' }, width: '100%' }}
|
||||
>
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: { xs: 'none', sm: 'flex' },
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
m: 'auto',
|
||||
width: 420,
|
||||
height: 500,
|
||||
backgroundSize: 'contain',
|
||||
backgroundImage: (theme) =>
|
||||
theme.palette.mode === 'light'
|
||||
? items[selectedItemIndex].imageLight
|
||||
: items[selectedItemIndex].imageDark,
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
215
geradoresfe/src/components/Footer.tsx
Normal file
215
geradoresfe/src/components/Footer.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import * as React from 'react';
|
||||
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 { visuallyHidden } from '@mui/utils';
|
||||
|
||||
import FacebookIcon 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" color="text.secondary" mt={1}>
|
||||
{'Copyright © '}
|
||||
<Link href="https://mui.com/">Sitemark </Link>
|
||||
{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" fontWeight={600} gutterBottom sx={{ mt: 2 }}>
|
||||
Join the newsletter
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" mb={2}>
|
||||
Subscribe for weekly updates. No spams ever!
|
||||
</Typography>
|
||||
<Stack direction="row" spacing={1} useFlexGap>
|
||||
<InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
|
||||
Email
|
||||
</InputLabel>
|
||||
<TextField
|
||||
id="email-newsletter"
|
||||
hiddenLabel
|
||||
size="small"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
aria-label="Enter your email address"
|
||||
placeholder="Your email address"
|
||||
inputProps={{
|
||||
autocomplete: 'off',
|
||||
ariaLabel: 'Enter your email address',
|
||||
}}
|
||||
/>
|
||||
<Button variant="contained" color="primary" sx={{ flexShrink: 0 }}>
|
||||
Subscribe
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: 'none', sm: 'flex' },
|
||||
flexDirection: 'column',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" 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" 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" 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 display="inline" sx={{ mx: 0.5, opacity: 0.5 }}>
|
||||
•
|
||||
</Typography>
|
||||
<Link color="text.secondary" variant="body2" href="#">
|
||||
Terms of Service
|
||||
</Link>
|
||||
<Copyright />
|
||||
</div>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="left"
|
||||
spacing={1}
|
||||
useFlexGap
|
||||
sx={{
|
||||
color: 'text.secondary',
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
href="https://github.com/mui"
|
||||
aria-label="GitHub"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
<FacebookIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
href="https://twitter.com/MaterialUI"
|
||||
aria-label="X"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
<TwitterIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
href="https://www.linkedin.com/company/mui/"
|
||||
aria-label="LinkedIn"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
<LinkedInIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
132
geradoresfe/src/components/Hero.tsx
Normal file
132
geradoresfe/src/components/Hero.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import * as React from 'react';
|
||||
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';
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<Box
|
||||
id="hero"
|
||||
sx={(theme) => ({
|
||||
width: '100%',
|
||||
backgroundImage:
|
||||
theme.palette.mode === 'light'
|
||||
? 'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 90%), transparent)'
|
||||
: 'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 16%), transparent)',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
})}
|
||||
>
|
||||
<Container
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
pt: { xs: 14, sm: 20 },
|
||||
pb: { xs: 8, sm: 12 },
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
spacing={2}
|
||||
alignItems="center"
|
||||
useFlexGap
|
||||
sx={{ 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 latest
|
||||
<Typography
|
||||
component="span"
|
||||
variant="h1"
|
||||
sx={{
|
||||
fontSize: 'inherit',
|
||||
color: (theme) =>
|
||||
theme.palette.mode === 'light' ? 'primary.main' : 'primary.light',
|
||||
}}
|
||||
>
|
||||
products
|
||||
</Typography>
|
||||
</Typography>
|
||||
<Typography
|
||||
textAlign="center"
|
||||
color="text.secondary"
|
||||
sx={{ 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: 'auto' } }}
|
||||
>
|
||||
<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"
|
||||
inputProps={{
|
||||
autocomplete: 'off',
|
||||
ariaLabel: 'Enter your email address',
|
||||
}}
|
||||
/>
|
||||
<Button variant="contained" color="primary">
|
||||
Start now
|
||||
</Button>
|
||||
</Stack>
|
||||
<Typography variant="caption" textAlign="center">
|
||||
By clicking "Start now" you agree to our
|
||||
<Link href="#" color="primary">
|
||||
Terms & Conditions
|
||||
</Link>
|
||||
.
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Box
|
||||
id="image"
|
||||
sx={(theme) => ({
|
||||
mt: { xs: 8, sm: 10 },
|
||||
alignSelf: 'center',
|
||||
height: { xs: 200, sm: 700 },
|
||||
width: '100%',
|
||||
backgroundImage:
|
||||
theme.palette.mode === 'light'
|
||||
? 'url("/static/images/templates/templates-images/hero-light.png")'
|
||||
: 'url("/static/images/templates/templates-images/hero-dark.png")',
|
||||
backgroundSize: 'cover',
|
||||
borderRadius: '12px',
|
||||
outline: '1px solid',
|
||||
outlineColor:
|
||||
theme.palette.mode === 'light'
|
||||
? 'hsla(220, 25%, 80%, 0.5)'
|
||||
: 'hsla(210, 100%, 80%, 0.1)',
|
||||
boxShadow:
|
||||
theme.palette.mode === 'light'
|
||||
? '0 0 12px 8px hsla(220, 25%, 80%, 0.2)'
|
||||
: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
|
||||
})}
|
||||
/>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
124
geradoresfe/src/components/Highlights.tsx
Normal file
124
geradoresfe/src/components/Highlights.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import * as React from 'react';
|
||||
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: 'hsl(220, 30%, 2%)',
|
||||
}}
|
||||
>
|
||||
<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">
|
||||
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.5}>
|
||||
{items.map((item, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Stack
|
||||
direction="column"
|
||||
color="inherit"
|
||||
component={Card}
|
||||
spacing={1}
|
||||
useFlexGap
|
||||
sx={{
|
||||
p: 3,
|
||||
height: '100%',
|
||||
border: '1px solid',
|
||||
borderColor: 'hsla(220, 25%, 25%, .3)',
|
||||
background: 'transparent',
|
||||
backgroundColor: 'grey.900',
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ opacity: '50%' }}>{item.icon}</Box>
|
||||
<div>
|
||||
<Typography fontWeight="medium" gutterBottom>
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: 'grey.400' }}>
|
||||
{item.description}
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
59
geradoresfe/src/components/LogoCollection.tsx
Normal file
59
geradoresfe/src/components/LogoCollection.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import { useTheme } from '@mui/system';
|
||||
|
||||
const whiteLogos = [
|
||||
'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 darkLogos = [
|
||||
'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 theme = useTheme();
|
||||
const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
|
||||
|
||||
return (
|
||||
<Box id="logoCollection" sx={{ py: 4 }}>
|
||||
<Typography
|
||||
component="p"
|
||||
variant="subtitle2"
|
||||
align="center"
|
||||
color="text.secondary"
|
||||
>
|
||||
Trusted by the best companies
|
||||
</Typography>
|
||||
<Grid container justifyContent="center" sx={{ mt: 0.5, opacity: 0.6 }}>
|
||||
{logos.map((logo, index) => (
|
||||
<Grid item key={index}>
|
||||
<img
|
||||
src={logo}
|
||||
alt={`Fake company number ${index + 1}`}
|
||||
style={logoStyle}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
215
geradoresfe/src/components/Pricing.tsx
Normal file
215
geradoresfe/src/components/Pricing.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import * as React from 'react';
|
||||
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',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
{
|
||||
title: 'Enterprise',
|
||||
price: '30',
|
||||
description: [
|
||||
'50 users included',
|
||||
'30 GB of storage',
|
||||
'Help center access',
|
||||
'Phone & email support',
|
||||
],
|
||||
buttonText: 'Contact us',
|
||||
buttonVariant: 'outlined',
|
||||
},
|
||||
];
|
||||
|
||||
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" color="text.primary">
|
||||
Pricing
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Quickly build an effective pricing table for your potential customers with
|
||||
this layout. <br />
|
||||
It's built with default Material UI components with little
|
||||
customization.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Grid container spacing={3} alignItems="center" justifyContent="center">
|
||||
{tiers.map((tier) => (
|
||||
<Grid
|
||||
item
|
||||
key={tier.title}
|
||||
xs={12}
|
||||
sm={tier.title === 'Enterprise' ? 12 : 6}
|
||||
md={4}
|
||||
>
|
||||
<Card
|
||||
sx={(theme) => ({
|
||||
p: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 4,
|
||||
...(tier.title === 'Professional' && {
|
||||
border: 'none',
|
||||
boxShadow:
|
||||
theme.palette.mode === 'light'
|
||||
? `0 8px 12px hsla(210, 98%, 42%, 0.2)`
|
||||
: `0 8px 12px hsla(0, 0%, 0%, 0.8)`,
|
||||
background:
|
||||
'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))',
|
||||
}),
|
||||
})}
|
||||
>
|
||||
<CardContent>
|
||||
<Box
|
||||
sx={{
|
||||
mb: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
color: tier.title === 'Professional' ? 'grey.100' : '',
|
||||
}}
|
||||
>
|
||||
<Typography component="h3" variant="h6">
|
||||
{tier.title}
|
||||
</Typography>
|
||||
{tier.title === 'Professional' && (
|
||||
<Chip
|
||||
icon={<AutoAwesomeIcon />}
|
||||
label={tier.subheader}
|
||||
size="small"
|
||||
sx={{
|
||||
borderColor: 'hsla(220, 60%, 99%, 0.3)',
|
||||
backgroundColor: 'hsla(220, 60%, 99%, 0.1)',
|
||||
'& .MuiChip-label': {
|
||||
color: 'hsl(0, 0%, 100%)',
|
||||
},
|
||||
'& .MuiChip-icon': {
|
||||
color: 'primary.light',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'baseline',
|
||||
color: tier.title === 'Professional' ? 'grey.50' : undefined,
|
||||
}}
|
||||
>
|
||||
<Typography component="h3" variant="h2">
|
||||
${tier.price}
|
||||
</Typography>
|
||||
<Typography component="h3" variant="h6">
|
||||
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,
|
||||
color:
|
||||
tier.title === 'Professional'
|
||||
? 'primary.light'
|
||||
: 'primary.main',
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
component={'span'}
|
||||
sx={{
|
||||
color: tier.title === 'Professional' ? 'grey.50' : undefined,
|
||||
}}
|
||||
>
|
||||
{line}
|
||||
</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button
|
||||
fullWidth
|
||||
variant={tier.buttonVariant as 'outlined' | 'contained'}
|
||||
component="a"
|
||||
href="/material-ui/getting-started/templates/checkout/"
|
||||
target="_blank"
|
||||
>
|
||||
{tier.buttonText}
|
||||
</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
53
geradoresfe/src/components/SitemarkIcon.tsx
Normal file
53
geradoresfe/src/components/SitemarkIcon.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import * as React from 'react';
|
||||
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>
|
||||
);
|
||||
}
|
||||
154
geradoresfe/src/components/Testimonials.tsx
Normal file
154
geradoresfe/src/components/Testimonials.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import * as React from 'react';
|
||||
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 { useTheme } from '@mui/system';
|
||||
|
||||
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 whiteLogos = [
|
||||
'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 darkLogos = [
|
||||
'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 theme = useTheme();
|
||||
const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
|
||||
|
||||
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" color="text.primary">
|
||||
Testimonials
|
||||
</Typography>
|
||||
<Typography variant="body1" 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 item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
|
||||
<Card
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
flexGrow: 1,
|
||||
p: 1,
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{testimonial.testimonial}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
pr: 2,
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
31
geradoresfe/src/components/ToggleColorMode.tsx
Normal file
31
geradoresfe/src/components/ToggleColorMode.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import * as React from 'react';
|
||||
import { PaletteMode } from '@mui/material';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
|
||||
import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
|
||||
import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
|
||||
|
||||
interface ToggleColorModeProps {
|
||||
mode: PaletteMode;
|
||||
toggleColorMode: () => void;
|
||||
}
|
||||
|
||||
export default function ToggleColorMode({
|
||||
mode,
|
||||
toggleColorMode,
|
||||
}: ToggleColorModeProps) {
|
||||
return (
|
||||
<IconButton
|
||||
onClick={toggleColorMode}
|
||||
color="primary"
|
||||
aria-label="Theme toggle button"
|
||||
size="small"
|
||||
>
|
||||
{mode === 'dark' ? (
|
||||
<WbSunnyRoundedIcon fontSize="small" />
|
||||
) : (
|
||||
<ModeNightRoundedIcon fontSize="small" />
|
||||
)}
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import { Helmet } from 'react-helmet'
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
|
||||
Reference in New Issue
Block a user