import Image from 'next/image'
import Link from 'next/link'
import React from 'react'

const PortfolioList = () => {
  return (
    <div className='px-4 py-16'>
        <div className='max-w-[1200px] mx-auto'>
            <div className='grid md:grid-cols-12 gap-6'>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/Application_portfolio_1.webp" className='image w-full' width={1200} height={600} alt="Mobile application portfolio screenshot — Fruxinfo" />
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="/">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-3 md:px-5 hover:bg-[#E77025]'>APP LINK</div>
                                    </Link>
                                    {/* <Link href="/">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-3 md:px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link> */}
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <img src="/images/web_portfolio_icon_1.webp" className='w-full' alt="" />
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/Application_portfolio_2.webp" className='image w-full' width={1200} height={600} alt="Mobile application portfolio screenshot — Fruxinfo" />
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="/">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-3 md:px-5 hover:bg-[#E77025]'>APP LINK</div>
                                    </Link>
                                    {/* <Link href="/">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-3 md:px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link> */}
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <img src="/images/web_portfolio_icon_2.webp" className='w-full' alt="" />
                        </div> */}
                    </div>
                </div>
                
            </div>
        </div>
    </div>
  )
}

export default PortfolioList
