83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
import type { BoxProps } from '@mui/material/Box';
|
|
import Box from '@mui/material/Box';
|
|
import Container from '@mui/material/Container';
|
|
import InputAdornment from '@mui/material/InputAdornment';
|
|
import { outlinedInputClasses } from '@mui/material/OutlinedInput';
|
|
import TextField from '@mui/material/TextField';
|
|
import { m } from 'framer-motion';
|
|
import { varAlpha } from 'minimal-shared/utils';
|
|
import { AnimateText, animateTextClasses, MotionContainer, varFade } from 'src/components/animate';
|
|
import { Iconify } from 'src/components/iconify';
|
|
import { CONFIG } from 'src/global-config';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function FaqsHero({ sx, ...other }: BoxProps) {
|
|
return (
|
|
<Box
|
|
component="section"
|
|
sx={[
|
|
(theme) => ({
|
|
...theme.mixins.bgGradient({
|
|
images: [
|
|
`linear-gradient(0deg, ${varAlpha(theme.vars.palette.grey['900Channel'], 0.8)}, ${varAlpha(theme.vars.palette.grey['900Channel'], 0.8)})`,
|
|
`url(${CONFIG.assetsDir}/assets/images/faqs/hero.webp)`,
|
|
],
|
|
}),
|
|
height: { md: 560 },
|
|
py: { xs: 10, md: 0 },
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
}),
|
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
]}
|
|
{...other}
|
|
>
|
|
<Container component={MotionContainer}>
|
|
<Box
|
|
sx={{
|
|
bottom: { md: 80 },
|
|
position: { md: 'absolute' },
|
|
textAlign: { xs: 'center', md: 'unset' },
|
|
}}
|
|
>
|
|
<AnimateText
|
|
component="h1"
|
|
variant="h1"
|
|
textContent={['Where', 'can we help you?']}
|
|
variants={varFade('inRight', { distance: 24 })}
|
|
sx={{
|
|
color: 'common.white',
|
|
[`& .${animateTextClasses.line}[data-index="0"]`]: {
|
|
[`& .${animateTextClasses.word}[data-index="0"]`]: { color: 'primary.main' },
|
|
},
|
|
}}
|
|
/>
|
|
|
|
<m.div variants={varFade('inUp', { distance: 24 })}>
|
|
<TextField
|
|
fullWidth
|
|
placeholder="Search support..."
|
|
slotProps={{
|
|
input: {
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<Iconify icon="eva:search-fill" sx={{ color: 'text.disabled' }} />
|
|
</InputAdornment>
|
|
),
|
|
},
|
|
}}
|
|
sx={{
|
|
mt: 5,
|
|
maxWidth: 360,
|
|
[`& .${outlinedInputClasses.root}`]: { bgcolor: 'common.white' },
|
|
[`& .${outlinedInputClasses.input}`]: { typography: 'subtitle1' },
|
|
}}
|
|
/>
|
|
</m.div>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
}
|