Moinhos/Geradores
1
0
Fork 0
Code Pull Requests Activity

MUI + Public

Browse Source
This commit is contained in:
SECUNDIS\masantos
2024-04-10 17:44:03 +01:00
parent fd64d43ab3
commit 2b99972e01
21 changed files with 2439 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
geradoresfe/package.json
View File

@@ -3,6 +3,10 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.15.15",
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
@@ -12,6 +16,7 @@
"@types/react-dom": "^18.2.24", "@types/react-dom": "^18.2.24",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
@@ -41,6 +46,8 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@types/react-helmet": "^6.1.11",
"eslint": "^8.57.0",
"eslint-config-react-app": "^7.0.1", "eslint-config-react-app": "^7.0.1",
"jest-editor-support": "^31.1.2" "jest-editor-support": "^31.1.2"
} }

BIN
geradoresfe/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

43
geradoresfe/public/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
geradoresfe/public/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
geradoresfe/public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

25
geradoresfe/public/manifest.json Normal file
View File

@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
geradoresfe/public/robots.txt Normal file
View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

108
geradoresfe/src/App.tsx
View File

@@ -1,24 +1,98 @@
import React from 'react'; import * as React from 'react';
import logo from './logo.svg'; import { PaletteMode } from '@mui/material';
import './App.css'; 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';
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,
}}
>
<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() { 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 ( return (
<div className="App"> <div className="App">
<header className="App-header"> <Helmet>
<img src={logo} className="App-logo" alt="logo" /> <meta charSet="utf-8" />
<p> <title>Geradores</title>
Edit <code>src/App.tsx</code> and save to reload. </Helmet>
</p> <ThemeProvider theme={showCustomTheme ? LPtheme : defaultTheme}>
<a <CssBaseline />
className="App-link" <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
href="https://reactjs.org" <Hero />
target="_blank" <Box sx={{ bgcolor: 'background.default' }}>
rel="noopener noreferrer"
> </Box>
Learn React </ThemeProvider>
</a>
</header>
</div> </div>
); );
} }

633
geradoresfe/src/GeradoresTheme.tsx Normal file
View 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
View 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
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<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&apos;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&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 === '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
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 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
View 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&nbsp;</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 }}>
&nbsp;•&nbsp;
</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
View 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&nbsp;latest&nbsp;
<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 &quot;Start now&quot; you agree to our&nbsp;
<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
View 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
View 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
View 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&apos;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">
&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,
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
View 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
View 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
View 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>
);
}

1
geradoresfe/src/index.tsx
View File

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import { Helmet } from 'react-helmet'
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement document.getElementById('root') as HTMLElement