MUI + Public

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 (
+    <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>
+  );
+}