시공현장 1차

src/componenets/projeect/index.jsx

@@ -1,31 +1,38 @@
 import React from 'react';
 import projectList from './projectCardList.json';
 
-const Business = () => {
+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-16 gap-y-10 mt-10">
+            <div className="grid grid-cols-4 gap-x-8 gap-y-10 mt-10">
                 {projectList.map((project, index) => (
-                    <div
-                        key={index}
-                        className="relative overflow-hidden rounded-lg shadow-lg group" // group 클래스 추가
-                    >
+                    <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="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-4 flex flex-col justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out pointer-events-none group-hover:pointer-events-auto">
-                            <h3 className="text-lg text-white font-semibold">{project.title}</h3>
-                            <p className="hidden group-hover: text-sm text-white leading-7 whitespace-pre-line mt-2 mb-10">
-                                {project.description}
-                            </p>
-                            <div className="text-xs text-white underline leading-7">MORE +</div>
+
+                        <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>
                 ))}
@@ -35,4 +42,4 @@ const Business = () => {
     )
 }
 
-export default Business;
+export default Project;

src/componenets/projeect/projectCardList.json

@@ -6,7 +6,7 @@
   },
   {
     "title": "롯데캐슬 드메르",
-    "description": "부산 초읍 도시환경 정비사업 중 롯데건설 시공 롯데캐슬 드메르\n계약금액 : 1,351,200,000원",
+    "description": "발주처 : 롯데건설\n부산 북항 초고층 복합개발사업 중 통신공사 (롯데 드메르)\n계약금액 : 1,351,200,000원",
     "imageUrl": "/hero3.png"
   },
   {