bandosj/src/pages/main/Project.jsx

import React from 'react';
import projectList from '@/data/projectCardList.json';
import DarkOverlay from "@/componenets/DarkOverlay.jsx";

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

                {/* cardList */}
                
                <div className="relative grid grid-cols-3 gap-x-8 gap-y-10 mt-10">
                    
                    {projectList.map((project, index) => (
                        <div key={index} className="relative shadow-lg group cursor-pointer">
                            {/* 그라디언트 오버레이 */}
                            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60" />

                            <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 className="flex justify-center items-center my-20">
                    <div className="w-44 px-8 py-3 outline outline-white">
                        <div className="w-28 text-center text-white text-base font-semibold font-['Inter']">MORE</div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Project;