MUI + Public

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 (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+import { Helmet } from 'react-helmet';
+import getLPTheme from './GeradoresTheme';
+
+import AppAppBar from './components/AppAppBar';
+import Hero from './components/Hero';
+import LogoCollection from './components/LogoCollection';
+import Highlights from './components/Highlights';
+import Pricing from './components/Pricing';
+import Features from './components/Features';
+import Testimonials from './components/Testimonials';
+import FAQ from './components/FAQ';
+import Footer from './components/Footer';
+
+
+
+interface ToggleCustomThemeProps {
+    showCustomTheme: Boolean;
+    toggleCustomTheme: () => void;
+}
+
+function ToggleCustomTheme({
+    showCustomTheme,
+    toggleCustomTheme,
+}: ToggleCustomThemeProps) {
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                width: '100dvw',
+                position: 'fixed',
+                bottom: 24,
+            }}
         >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+            <ToggleButtonGroup
+                color="primary"
+                exclusive
+                value={showCustomTheme}
+                onChange={toggleCustomTheme}
+                aria-label="Platform"
+                sx={{
+                    backgroundColor: 'background.default',
+                    '& .Mui-selected': {
+                        pointerEvents: 'none',
+                    },
+                }}
+            >
+                <ToggleButton value>
+                  
+                    Custom theme
+                </ToggleButton>
+                <ToggleButton value={false}>Material Design 2</ToggleButton>
+            </ToggleButtonGroup>
+        </Box>
+    );
+}
+function App() {
+    const [mode, setMode] = React.useState<PaletteMode>('light');
+    const [showCustomTheme, setShowCustomTheme] = React.useState(true);
+    const LPtheme = createTheme(getLPTheme(mode));
+    const defaultTheme = createTheme({ palette: { mode } });
+
+    const toggleColorMode = () => {
+        setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    };
+
+    const toggleCustomTheme = () => {
+        setShowCustomTheme((prev) => !prev);
+    };
+
+    return (
+        <div className="App">
+            <Helmet>
+                <meta charSet="utf-8" />
+                <title>Geradores</title>
+            </Helmet>
+            <ThemeProvider theme={showCustomTheme ? LPtheme : defaultTheme}>
+                <CssBaseline />
+                <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
+                <Hero />
+                <Box sx={{ bgcolor: 'background.default' }}>
+                    
+                </Box>
+            </ThemeProvider>
+
+        </div>
+    );
 }
 
 export default App;