CHIEFSOFT\ameye
976 lines
28 KiB
JavaScript
976 lines
28 KiB
JavaScript
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>
|
|
</>
|
|
);
|
|
}
|