import React from 'react'
import lock from '../../../assets/lock.png'
import b2b from '../../../assets/b2b.png'
import b2c from '../../../assets/b2c.png'
import c2c from '../../../assets/c2c.png'
import { Container, Grid, Text, Image, Spacer } from '@nextui-org/react'
import { FaArrowAltCircleRight } from 'react-icons/fa'

function ShoppingMall (){
    return(
        <>
        <Container>
        <Spacer y={8} />
            <Text h1 color="white" css={{ textAlign: 'center' }}> Shopping Mall </Text>
            <Spacer y={3} />
            <Grid.Container justify='center' >
                <Grid md={3} sm={12} css={{ flexDirection: 'column', textAlign: 'center', alignItems: 'center', p: '20px', borderRight: '1px solid #222c34' }} >
                    <Image src={lock} alt={lock} width='60px' objectFit='contain' />
                    <Text color='white' h3 css={{ p: '30px 0' }}>M2B</Text>
                    <Text color='white' size={15} >(Collection name) It is an e-commerce platform that allows NFT owners  to directly order real NFT products to factories that can produce OEMs and ODMs so that they can create their own brands and values. All profits from M2B e-commerce operations are made in a fair distribution to both (collection name) NFT and coin owners.
                    </Text>
                    <Text h1 size={120} css={{ color: '#B2BEB5', opacity: '0.2', p: '0', mb: '-5rem', mt: '-3rem' }} >01</Text>
                    <FaArrowAltCircleRight style={{ backgroundColor: '#000', color: '#0084FF', borderRadius: '30px', fontSize: '30px' }} />
                </Grid>
                <Grid md={3} sm={12} css={{ flexDirection: 'column', textAlign: 'center', alignItems: 'center', p: '20px', borderRight: '1px solid #222c34' }} >
                    <Image src={b2b} alt={b2b} width='60px' objectFit='contain' />
                    <Text color='white' h3 css={{ p: '30px 0' }}>M2B</Text>
                    <Text color='white' size={15} >(Collection name) It is an e-commerce platform that allows NFT owners  to directly order real NFT products to factories that can produce OEMs and ODMs so that they can create their own brands and values. All profits from M2B e-commerce operations are made in a fair distribution to both (collection name) NFT and coin owners.
                    </Text>
                    <Text h1 size={120} css={{ color: '#B2BEB5', opacity: '0.2', p: '0', mb: '-5rem', mt: '-3rem' }} >02</Text>
                    <FaArrowAltCircleRight style={{ backgroundColor: '#000', color: '#0084FF', borderRadius: '30px', fontSize: '30px' }} />
                </Grid>
                <Grid md={3} sm={12} css={{ flexDirection: 'column', textAlign: 'center', alignItems: 'center' ,p: '20px', borderRight: '1px solid #222c34' }} >
                    <Image src={b2c} alt={b2c} width='60px' objectFit='contain' />
                    <Text color='white' h3 css={{ p: '30px 0' }}>M2B</Text>
                    <Text color='white' size={15} >(Collection name) It is an e-commerce platform that allows NFT owners  to directly order real NFT products to factories that can produce OEMs and ODMs so that they can create their own brands and values. All profits from M2B e-commerce operations are made in a fair distribution to both (collection name) NFT and coin owners.
                    </Text>
                    <Text h1 size={120} css={{ color: '#B2BEB5', opacity: '0.2', p: '0', mb: '-5rem', mt: '-3rem' }} >03</Text>
                    <FaArrowAltCircleRight style={{ backgroundColor: '#000', color: '#0084FF', borderRadius: '30px', fontSize: '30px' }} />
                </Grid>
                <Grid md={3} sm={12} css={{ flexDirection: 'column', textAlign: 'center', alignItems: 'center',  p: '20px' }} >
                    <Image src={c2c} alt={c2c} width='60px' objectFit='contain' />
                    <Text color='white' h3 css={{ p: '30px 0' }}>M2B</Text>
                    <Text color='white' size={15} >(Collection name) It is an e-commerce platform that allows NFT owners  to directly order real NFT products to factories that can produce OEMs and ODMs so that they can create their own brands and values. All profits from M2B e-commerce operations are made in a fair distribution to both (collection name) NFT and coin owners.
                    </Text>
                    <Text h1 size={120} css={{ color: '#B2BEB5', opacity: '0.2', p: '0', mb: '-5rem', mt: '-3rem' }} >04</Text>
                    <FaArrowAltCircleRight style={{ backgroundColor: '#000', color: '#0084FF', borderRadius: '30px', fontSize: '30px' }} />
                </Grid>
            </Grid.Container>
        </Container>
        <Spacer y={8} />
        </>
    )
}
export default ShoppingMall