bandosj/src/componenets/projeect/index.jsx

import React from 'react';
import projectList from './projectCardList.json';

const Project = () => {
    return (
        <div className="w-full py-12 px-10 bg-blue-900">
            <div className="pb-5">
                <div className="text-white text-5xl font-semibold font-['Inter']">주요 랜드마크 프로젝트 시공현장</div>
            </div>

            {/* cardList */}
            <div className="grid grid-cols-4 gap-x-8 gap-y-10 mt-10">
                {projectList.map((project, index) => (
                    <div className="relative overflow-hidden rounded-lg shadow-lg group">
                        <img
                            src={project.imageUrl}
                            alt={project.title}
                            className="w-full aspect-[4/3] object-cover"
                        />

                        <div className="">
                            <h3 className='absolute z-10 left-6 top-[77%] group-hover:top-[30%] transition-all duration-500 ease-in-out text-lg text-white font-semibold'>
                                {project.title}
                            </h3>
                            <div className="absolute z-10 left-6 top-[85%] text-xs text-white leading-7">MORE +</div>
                        </div>

                        <div className="absolute inset-0 bg-gradient-to-t from-black/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out flex flex-col justify-center">
                            {project.description && (
                                <div className="absolute left-6 right-6 top-[60%] group-hover:top-[40%] transition-all duration-500 ease-in-out">
                                    <p className="text-sm text-white leading-8 whitespace-pre-line">
                                        {project.description}
                                    </p>
                                </div>
                            )}
                        </div>
                    </div>
                ))}
            </div>

        </div>
    )
}

export default Project;