005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
import AspectRatio from '@mui/joy/AspectRatio';
|
|
import Button from '@mui/joy/Button';
|
|
import Card from '@mui/joy/Card';
|
|
import CardContent from '@mui/joy/CardContent';
|
|
import CardOverflow from '@mui/joy/CardOverflow';
|
|
import Typography from '@mui/joy/Typography';
|
|
|
|
export default function FAQCard() {
|
|
return (
|
|
<Card
|
|
size="lg"
|
|
variant="plain"
|
|
orientation="horizontal"
|
|
sx={{
|
|
textAlign: 'center',
|
|
maxWidth: '100%',
|
|
width: 500,
|
|
// to make the demo resizable
|
|
resize: 'horizontal',
|
|
overflow: 'auto',
|
|
}}
|
|
>
|
|
<CardOverflow
|
|
variant="solid"
|
|
color="primary"
|
|
sx={{
|
|
flex: '0 0 200px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
px: 'var(--Card-padding)',
|
|
}}
|
|
>
|
|
<Typography textColor="#fff" sx={{ fontSize: 'xl4', fontWeight: 'xl' }}>
|
|
89
|
|
</Typography>
|
|
<Typography textColor="primary.200">
|
|
FAQs answered, see if yours is one of them.
|
|
</Typography>
|
|
</CardOverflow>
|
|
<CardContent sx={{ gap: 1.5, minWidth: 200 }}>
|
|
<AspectRatio ratio="19/8" objectFit="contain" variant="plain">
|
|
<img
|
|
alt=""
|
|
src="https://static.vecteezy.com/system/resources/previews/006/409/485/original/people-thinking-to-make-decision-problem-solving-and-find-creative-ideas-with-question-mark-in-flat-cartoon-background-for-poster-illustration-vector.jpg"
|
|
/>
|
|
</AspectRatio>
|
|
<CardContent>
|
|
<Typography level="title-lg">Need Some Help?</Typography>
|
|
<Typography sx={{ fontSize: 'sm', mt: 0.5 }}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor.
|
|
</Typography>
|
|
</CardContent>
|
|
<Button
|
|
variant="outlined"
|
|
color="primary"
|
|
sx={{
|
|
'--variant-borderWidth': '2px',
|
|
borderRadius: 40,
|
|
borderColor: 'primary.500',
|
|
mx: 'auto',
|
|
}}
|
|
>
|
|
See FAQ
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|