Untitled

  <div className='mb-8'>
            <div className='my-10'>
                <p className='grid grid-cols-3 gap-20 px-20'>
                    <a className='btn btn-primary hover:bg-transparent text-black text-lg w-56 btn-sm' href={projects.liveLink} target="_blank" rel="no noreferrer">Live Preview</a>

                    <a className='btn btn-primary hover:bg-transparent text-black text-lg w-56 btn-sm' href={projects.clientSide} target="_blank" rel="no noreferrer">GitHub(client-side)</a>

                    <a className='btn btn-primary hover:bg-transparent text-black text-lg w-56 btn-sm' href={projects.serverSide} target="_blank" rel="no noreferrer">GitHub(server-side)</a>

                </p>
                <div className='my-8'>
                    <h2 className='text-2xl font-bold text-center'>Project Details</h2>
                    <div className='h-1 w-52 bg-primary mx-auto'></div>
                </div>
                <p className='px-20 text-lg leading-8'>
                    {projects.description}
                </p>
            </div>
            <div className='my-8'>
                    <h2 className='text-2xl font-bold text-center'>Project Overview</h2>
                    <div className='h-1 w-52 bg-primary mx-auto'></div>
                </div>
            <div className=' grid grid-cols-1 md:grid-cols-4 gap-20 px-3 md:px-20'>
                {
                    projects?.projectSS?.map((ss, index) => <img key={index} className="w-96 mx-auto" src={ss} alt=""></img>)
                }
            </div>
        </div>