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/web_portfolio_15.webp" className='image w-full' width={1200} height={600} alt="Convart website 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="https://convart.in/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-convart">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_1.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_16.webp" className='image w-full' alt="Two Architects website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://twoarchitects.in/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-twoarchitects">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_1.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_17.webp" className='image w-full' alt="WinXalpha website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://winxalpha.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-winxalpha">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_1.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_18.webp" className='image w-full' alt="Acemica website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://acemica.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-acemica">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_1.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_1.webp" className='image w-full' alt="Promax Card website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://promaxcard.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-promax">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_1.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_2.webp" className='image w-full' alt="Soulmate Salon website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://soulmatesalon.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-soulmate-salon">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_3.webp" className='image w-full' alt="AutoCarXpert website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://carautoxpert.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-autocarxpert">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_4.webp" className='image w-full' alt="FinFlexTax website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://finflextax.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-finflextax">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_5.webp" className='image w-full' alt="MyDoctorss website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://www.mydoctorss.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-mydoctorss">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_6.webp" className='image w-full' alt="4111 Food website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://4111food.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-4111food">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_7.webp" className='image w-full' alt="RK Label Machines website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://www.rklabelmachines.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-rklabel">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_8.webp" className='image w-full' alt="Shreeji Projects website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://shreejiprojects.com/shreeji/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-shreejiprojects">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_9.webp" className='image w-full' alt="Megastar Foods website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://www.megastarfoods.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-megastarfoods">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_10.webp" className='image w-full' alt="Shubhalay website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://shubhalaya.com/index" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-shubhalay">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_11.webp" className='image w-full' alt="IRIS Automation website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://iris-automation.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-irisautomation">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_12.webp" className='image w-full' alt="Medicosurg Solutions website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://medicosurg.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-medicosurg-solutions">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_13.webp" className='image w-full' alt="Niyati Makeup Studio website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://niyatimakeupstudio.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-niyati-makeup">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
                <div className='md:col-span-6'>
                    <div className='portfolio_custome_card'>
                        <div className='img_overlay relative'>
                            <Image src="/images/web_portfolio_14.webp" className='image w-full' alt="My Parking Tag website portfolio screenshot — Fruxinfo" width={1200} height={600}/>
                            <div className="overlay">
                                {/* <div className="text">John Doe</div> */}
                                <div className='buttons_custome flex justify-center w-full gap-4'>
                                    <Link href="https://www.myparkingtag.com/" target='_blank'>
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>WEB LINK</div>
                                    </Link>
                                    <Link href="/case-study-myparkingtag">
                                        <div className='text-[#FFF] border-2 border-[#E77025] rounded-[100px] py-2 px-5 hover:bg-[#E77025]'>CASE STUDY</div>
                                    </Link>
                                </div>
                            </div>
                        </div>
                        {/* <div className='w-[150px] pt-4'>
                            <Image src="/images/web_portfolio_icon_2.webp" className='w-full' alt="View case study" width={1200} height={600}/>
                        </div> */}
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}

export default PortfolioList
