107 lines
4.2 KiB
TypeScript
107 lines
4.2 KiB
TypeScript
// MUI Imports
|
|
import Typography from '@mui/material/Typography'
|
|
import Breadcrumbs from '@mui/material/Breadcrumbs'
|
|
import Grid from '@mui/material/Grid2'
|
|
import Divider from '@mui/material/Divider'
|
|
import InputAdornment from '@mui/material/InputAdornment'
|
|
|
|
// Third-party Imports
|
|
import classnames from 'classnames'
|
|
|
|
// Component Imports
|
|
import Link from '@components/Link'
|
|
import DirectionalIcon from '@components/DirectionalIcon'
|
|
import CustomTextField from '@core/components/mui/TextField'
|
|
|
|
// Styles Imports
|
|
import frontCommonStyles from '@views/front-pages/styles.module.css'
|
|
|
|
// Data
|
|
const articleList = [
|
|
'Template Kits',
|
|
'Elementor Template Kits: PHP Zip Extends',
|
|
'Envato Elements Template Kits',
|
|
'Envato Elements Template Kits',
|
|
'How to use the template in WordPress',
|
|
'How to use the Template Kit Import'
|
|
]
|
|
|
|
const Questions = () => {
|
|
return (
|
|
<section className='flex flex-col justify-center items-center gap-4 md:plb-[100px] plb-[50px] pbs-[70px] -mbs-[70px] bg-backgroundPaper'>
|
|
<div className={classnames('pbs-10 md:pbs-16', frontCommonStyles.layoutSpacing)}>
|
|
<Grid container spacing={6}>
|
|
<Grid size={{ xs: 12, lg: 8 }}>
|
|
<div className='flex flex-col gap-2'>
|
|
<Breadcrumbs aria-label='breadcrumb'>
|
|
<Link className='hover:text-primary' href='/front-pages/help-center'>
|
|
Help Center
|
|
</Link>
|
|
<Typography className='text-textPrimary'>How to add product in cart</Typography>
|
|
</Breadcrumbs>
|
|
<Typography variant='h4'>How to add product in cart?</Typography>
|
|
<Typography>1 month ago - Updated</Typography>
|
|
</div>
|
|
<Divider className='mlb-6' />
|
|
<div className='flex flex-col gap-6'>
|
|
<div>
|
|
<Typography className='mbe-4'>
|
|
If you're after only one item, simply choose the 'Buy Now' option on the item page.
|
|
This will take you directly to Checkout.
|
|
</Typography>
|
|
<Typography>
|
|
If you want several items, use the 'Add to Cart' button and then choose 'Keep
|
|
Browsing' to continue shopping or 'Checkout' to finalize your purchase.
|
|
</Typography>
|
|
</div>
|
|
<img src='/images/front-pages/product.png' alt='product image' className='rounded is-full max-is-auto' />
|
|
<Typography>
|
|
You can go back to your cart at any time by clicking on the shopping cart icon at the top right side of
|
|
the page.
|
|
</Typography>
|
|
<img
|
|
src='/images/front-pages/checkout.png'
|
|
alt='checkout image'
|
|
className='rounded is-full max-is-auto'
|
|
/>
|
|
</div>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, lg: 4 }} className='flex flex-col gap-6'>
|
|
<CustomTextField
|
|
placeholder='Search...'
|
|
slotProps={{
|
|
input: {
|
|
startAdornment: (
|
|
<InputAdornment position='start'>
|
|
<i className='tabler-search' />
|
|
</InputAdornment>
|
|
)
|
|
}
|
|
}}
|
|
/>
|
|
<div className='flex flex-col gap-4'>
|
|
<div className='pli-5 plb-2 bg-actionHover rounded'>
|
|
<Typography variant='h5'>Articles in this section</Typography>
|
|
</div>
|
|
<div className='flex flex-col gap-4'>
|
|
{articleList.map((article, index) => (
|
|
<Typography key={index} component={Link} className='flex gap-2 justify-between hover:text-primary'>
|
|
<Typography color='inherit'>{article}</Typography>
|
|
<DirectionalIcon
|
|
ltrIconClass='tabler-chevron-right text-textDisabled text-xl'
|
|
rtlIconClass='tabler-chevron-left text-textDisabled text-xl'
|
|
className='text-textDisabled'
|
|
/>
|
|
</Typography>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Questions
|