first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,975 @@
|
||||
import React from 'react';
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { Box } from "@mui/material";
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Link from 'next/link';
|
||||
import styles from '@/components/UIElements/Cards/Cards.module.css'
|
||||
import BasicCard from '@/components/UIElements/Cards/BasicCard';
|
||||
import ComplexInteraction from '@/components/UIElements/Cards/ComplexInteraction';
|
||||
import Media from '@/components/UIElements/Cards/Media';
|
||||
import UIControls from '@/components/UIElements/Cards/UIControls';
|
||||
|
||||
export default function Cards() {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* BasicCard */}
|
||||
<BasicCard />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<img
|
||||
src="/images/card-img1.png"
|
||||
alt="card"
|
||||
style={{
|
||||
borderRadius: '10px',
|
||||
marginBottom: '12px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* ComplexInteraction */}
|
||||
<ComplexInteraction />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<div
|
||||
className={styles.cardWithBgImg}
|
||||
style={{
|
||||
backgroundImage: `url('/images/card-img2.png')`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mb: "15px",
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="success"
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="10px" mt="250px" color="white">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography color="white">
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="15px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
|
||||
{/* Media */}
|
||||
<Media />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<img
|
||||
src="/images/card-img3.png"
|
||||
alt="card"
|
||||
style={{
|
||||
borderRadius: '10px',
|
||||
marginBottom: '12px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<div
|
||||
className={styles.cardWithBgImg}
|
||||
style={{
|
||||
backgroundImage: `url('/images/card-img4.png')`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mb: "15px",
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="success"
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="10px" mt="70px" color="white">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography color="white">
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6} lg={6} xl={3}>
|
||||
{/* UIControls */}
|
||||
<UIControls />
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(255, 188, 43, 0.2)',
|
||||
border: '1px solid rgba(255, 188, 43, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<div
|
||||
className={styles.cardWithBgImg}
|
||||
style={{
|
||||
backgroundImage: `url('/images/card-img5.png')`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mb: "15px",
|
||||
position: "relative"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="success"
|
||||
className="mr-10px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
variant="contained"
|
||||
color="warning"
|
||||
className="mr-10px"
|
||||
>
|
||||
Warning
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="10px" mt="250px" color="white">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography color="white">
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
</Box>
|
||||
</div>
|
||||
{/* End Card */}
|
||||
|
||||
{/* Start Card */}
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
mb="20px"
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.2)',
|
||||
border: '1px solid rgba(117, 127, 239, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Primary
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
sx={{
|
||||
background: 'rgba(0, 182, 155, 0.2)',
|
||||
border: '1px solid rgba(0, 182, 155, 0.2)',
|
||||
borderRadius: '4px',
|
||||
color: '#260944',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
fontSize: '11px'
|
||||
}}
|
||||
className="mr-5px"
|
||||
>
|
||||
Success
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontWeight="500" fontSize="16px" mb="5px">
|
||||
Nesta Technologies
|
||||
</Typography>
|
||||
|
||||
<Typography>
|
||||
When you enter into any new area of science, you almost always find.
|
||||
</Typography>
|
||||
|
||||
<Link href="#" className='text-decoration-none'>
|
||||
<Button
|
||||
sx={{
|
||||
background: '#EDEFF5',
|
||||
border: '1px solid #EDEFF5',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
p: '5px 15px',
|
||||
mt: '15px',
|
||||
fontWeight: '500'
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</Card>
|
||||
{/* End Card */}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user