diff --git a/geradoresfe/package.json b/geradoresfe/package.json index dc30e96..2cfe319 100644 --- a/geradoresfe/package.json +++ b/geradoresfe/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "private": true, "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/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -12,6 +16,7 @@ "@types/react-dom": "^18.2.24", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-helmet": "^6.1.0", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" @@ -41,6 +46,8 @@ ] }, "devDependencies": { + "@types/react-helmet": "^6.1.11", + "eslint": "^8.57.0", "eslint-config-react-app": "^7.0.1", "jest-editor-support": "^31.1.2" } diff --git a/geradoresfe/public/favicon.ico b/geradoresfe/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/geradoresfe/public/favicon.ico differ diff --git a/geradoresfe/public/index.html b/geradoresfe/public/index.html new file mode 100644 index 0000000..aa069f2 --- /dev/null +++ b/geradoresfe/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/geradoresfe/public/logo192.png b/geradoresfe/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/geradoresfe/public/logo192.png differ diff --git a/geradoresfe/public/logo512.png b/geradoresfe/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/geradoresfe/public/logo512.png differ diff --git a/geradoresfe/public/manifest.json b/geradoresfe/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/geradoresfe/public/manifest.json @@ -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" +} diff --git a/geradoresfe/public/robots.txt b/geradoresfe/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/geradoresfe/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/geradoresfe/src/App.tsx b/geradoresfe/src/App.tsx index a53698a..fd0446f 100644 --- a/geradoresfe/src/App.tsx +++ b/geradoresfe/src/App.tsx @@ -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 ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- void; +} + +function ToggleCustomTheme({ + showCustomTheme, + toggleCustomTheme, +}: ToggleCustomThemeProps) { + return ( + - Learn React - -
-
- ); + + + + Custom theme + + Material Design 2 + + + ); +} +function App() { + const [mode, setMode] = React.useState('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 ( +
+ + + Geradores + + + + + + + + + + +
+ ); } export default App; diff --git a/geradoresfe/src/GeradoresTheme.tsx b/geradoresfe/src/GeradoresTheme.tsx new file mode 100644 index 0000000..ae540ae --- /dev/null +++ b/geradoresfe/src/GeradoresTheme.tsx @@ -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), + }, + }, + }), + }), + }, + }, + }, + }; +} \ No newline at end of file diff --git a/geradoresfe/src/components/AppAppBar.tsx b/geradoresfe/src/components/AppAppBar.tsx new file mode 100644 index 0000000..d0b2a9b --- /dev/null +++ b/geradoresfe/src/components/AppAppBar.tsx @@ -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 ( + + + ({ + 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)', + })} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + scrollToSection('features')}> + Features + + scrollToSection('testimonials')}> + Testimonials + + scrollToSection('highlights')}> + Highlights + + scrollToSection('pricing')}> + Pricing + + scrollToSection('faq')}>FAQ + + + + + + + + + + + + + ); +} diff --git a/geradoresfe/src/components/FAQ.tsx b/geradoresfe/src/components/FAQ.tsx new file mode 100644 index 0000000..7efea4a --- /dev/null +++ b/geradoresfe/src/components/FAQ.tsx @@ -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(false); + + const handleChange = + (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { + setExpanded(isExpanded ? panel : false); + }; + + return ( + + + Frequently asked questions + + + + } + aria-controls="panel1d-content" + id="panel1d-header" + > + + How do I contact customer support if I have a question or issue? + + + + + You can reach our customer support team by emailing + support@email.com + or calling our toll-free number. We're here to assist you + promptly. + + + + + } + aria-controls="panel2d-content" + id="panel2d-header" + > + + Can I return the product if it doesn't meet my expectations? + + + + + 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. + + + + + } + aria-controls="panel3d-content" + id="panel3d-header" + > + + What makes your product stand out from others in the market? + + + + + Our product distinguishes itself through its adaptability, durability, + and innovative features. We prioritize user satisfaction and + continually strive to exceed expectations in every aspect. + + + + + } + aria-controls="panel4d-content" + id="panel4d-header" + > + + Is there a warranty on the product, and what does it cover? + + + + + 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. + + + + + + ); +} diff --git a/geradoresfe/src/components/Features.tsx b/geradoresfe/src/components/Features.tsx new file mode 100644 index 0000000..f02afaa --- /dev/null +++ b/geradoresfe/src/components/Features.tsx @@ -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: , + 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: , + 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: , + 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 ( + + + +
+ + Product features + + + 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. + +
+ + {items.map(({ title }, index) => ( + 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%)', + }, + }), + })} + /> + ))} + + + + theme.palette.mode === 'light' + ? items[selectedItemIndex].imageLight + : items[selectedItemIndex].imageDark, + backgroundSize: 'cover', + backgroundPosition: 'center', + minHeight: 280, + }} + /> + + + {selectedFeature.title} + + + {selectedFeature.description} + + svg': { transition: '0.2s' }, + '&:hover > svg': { transform: 'translateX(2px)' }, + }} + > + Learn more + + + + + + {items.map(({ icon, title, description }, index) => ( + 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) ', + }, + })} + > + + ({ + color: + theme.palette.mode === 'light' ? 'grey.400' : 'grey.600', + ...(selectedItemIndex === index && { + color: 'primary.main', + }), + })} + > + {icon} + +
+ + {title} + + + {description} + + svg': { transition: '0.2s' }, + '&:hover > svg': { transform: 'translateX(2px)' }, + }} + onClick={(event) => { + event.stopPropagation(); + }} + > + Learn more + + +
+ + + ))} + + + + + + theme.palette.mode === 'light' + ? items[selectedItemIndex].imageLight + : items[selectedItemIndex].imageDark, + }} + /> + + + + + ); +} diff --git a/geradoresfe/src/components/Footer.tsx b/geradoresfe/src/components/Footer.tsx new file mode 100644 index 0000000..d635e85 --- /dev/null +++ b/geradoresfe/src/components/Footer.tsx @@ -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 ( + + {'Copyright © '} + Sitemark  + {new Date().getFullYear()} + + ); +} + +export default function Footer() { + return ( + + + + + + + Join the newsletter + + + Subscribe for weekly updates. No spams ever! + + + + Email + + + + + + + + + Product + + + Features + + + Testimonials + + + Highlights + + + Pricing + + + FAQs + + + + + Company + + + About us + + + Careers + + + Press + + + + + Legal + + + Terms + + + Privacy + + + Contact + + + + +
+ + Privacy Policy + + +  •  + + + Terms of Service + + +
+ + + + + + + + + + + + + + ); +} diff --git a/geradoresfe/src/components/Hero.tsx b/geradoresfe/src/components/Hero.tsx new file mode 100644 index 0000000..a8e9b21 --- /dev/null +++ b/geradoresfe/src/components/Hero.tsx @@ -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 ( + ({ + 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', + })} + > + + + + Our latest  + + theme.palette.mode === 'light' ? 'primary.main' : 'primary.light', + }} + > + products + + + + Explore our cutting-edge dashboard, delivering high-quality solutions + tailored to your needs. Elevate your experience with top-tier features + and services. + + + + Email + + + + + + By clicking "Start now" you agree to our  + + Terms & Conditions + + . + + + ({ + 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)', + })} + /> + + + ); +} diff --git a/geradoresfe/src/components/Highlights.tsx b/geradoresfe/src/components/Highlights.tsx new file mode 100644 index 0000000..8adc8f0 --- /dev/null +++ b/geradoresfe/src/components/Highlights.tsx @@ -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: , + title: 'Adaptable performance', + description: + 'Our product effortlessly adjusts to your needs, boosting efficiency and simplifying your tasks.', + }, + { + icon: , + title: 'Built to last', + description: + 'Experience unmatched durability that goes above and beyond with lasting investment.', + }, + { + icon: , + title: 'Great user experience', + description: + 'Integrate our product into your routine with an intuitive and easy-to-use interface.', + }, + { + icon: , + title: 'Innovative functionality', + description: + 'Stay ahead with features that set new standards, addressing your evolving needs better than the rest.', + }, + { + icon: , + title: 'Reliable support', + description: + 'Count on our responsive customer support, offering assistance that goes beyond the purchase.', + }, + { + icon: , + 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 ( + + + + + Highlights + + + Explore why our product stands out: adaptability, durability, + user-friendly design, and innovation. Enjoy reliable customer support and + precision in every detail. + + + + {items.map((item, index) => ( + + + {item.icon} +
+ + {item.title} + + + {item.description} + +
+ + + ))} + + + + ); +} diff --git a/geradoresfe/src/components/LogoCollection.tsx b/geradoresfe/src/components/LogoCollection.tsx new file mode 100644 index 0000000..48d3f5a --- /dev/null +++ b/geradoresfe/src/components/LogoCollection.tsx @@ -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 ( + + + Trusted by the best companies + + + {logos.map((logo, index) => ( + + {`Fake + + ))} + + + ); +} diff --git a/geradoresfe/src/components/Pricing.tsx b/geradoresfe/src/components/Pricing.tsx new file mode 100644 index 0000000..52ca695 --- /dev/null +++ b/geradoresfe/src/components/Pricing.tsx @@ -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 ( + + + + Pricing + + + Quickly build an effective pricing table for your potential customers with + this layout.
+ It's built with default Material UI components with little + customization. + + + + {tiers.map((tier) => ( + + ({ + 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%))', + }), + })} + > + + + + {tier.title} + + {tier.title === 'Professional' && ( + } + 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', + }, + }} + /> + )} + + + + ${tier.price} + + +   per month + + + + {tier.description.map((line) => ( + + + + {line} + + + ))} + + + + + + + ))} + + + ); +} diff --git a/geradoresfe/src/components/SitemarkIcon.tsx b/geradoresfe/src/components/SitemarkIcon.tsx new file mode 100644 index 0000000..eaa718d --- /dev/null +++ b/geradoresfe/src/components/SitemarkIcon.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import SvgIcon from '@mui/material/SvgIcon'; + +export default function SitemarkIcon() { + return ( + + + + + + + + + + + + + ); +} diff --git a/geradoresfe/src/components/Testimonials.tsx b/geradoresfe/src/components/Testimonials.tsx new file mode 100644 index 0000000..7395247 --- /dev/null +++ b/geradoresfe/src/components/Testimonials.tsx @@ -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: , + 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: , + 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: , + 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: , + 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: , + 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: , + 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 ( + + + + Testimonials + + + 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. + + + + {userTestimonials.map((testimonial, index) => ( + + + + + {testimonial.testimonial} + + + + + {`Logo + + + + ))} + + + ); +} diff --git a/geradoresfe/src/components/ToggleColorMode.tsx b/geradoresfe/src/components/ToggleColorMode.tsx new file mode 100644 index 0000000..9ccb998 --- /dev/null +++ b/geradoresfe/src/components/ToggleColorMode.tsx @@ -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 ( + + {mode === 'dark' ? ( + + ) : ( + + )} + + ); +} diff --git a/geradoresfe/src/index.tsx b/geradoresfe/src/index.tsx index 032464f..935d4ba 100644 --- a/geradoresfe/src/index.tsx +++ b/geradoresfe/src/index.tsx @@ -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