import { Card, Container, Grid, Image, Text, Spacer } from '@nextui-org/react'
import React from 'react'
import DefiImg from "../../../assets/DEFi.jpg"

const Defi = () => {
  return (
    <>
    <Container>
      <Grid.Container alignItems='center'>
        <Grid md={6} sm={6} xs={6} css={{ zIndex: '2' }} >
          <Card css={{$$cardColor:'#1E2835', border: '1px solid #303945'}} variant='bordered'>
            <Card.Body css={{ p: '30px' }} >
              <Text h1 color='white' > DEFI </Text>
              <Text h3 color='white' > Operation Starts In Q3 2023 </Text>
              <Text color='#738da3' > 
                It is a decentralized financial system and provides various financial services with blockchain technology without the control of central institutions such as governments and companies. It will be run by a small number of members who have the best leadership among (collectioin name) nft owners and have extensive financial experience.
              </Text>
            </Card.Body>
          </Card>
        </Grid>
        <Grid md={6} sm={6} xs={6} css={{ marginLeft: '-20px' }} >
        <Image showSkeleton objectFit='contain' css={{ borderRadius: '30px' }} src={DefiImg} alt={DefiImg} width='100%' height='100%' />
        </Grid>
      </Grid.Container>
      <Spacer y={8} />
    </Container>
    </>
  )
}

export default Defi