feat : 솔루션 추가

src/components/main/MainSolution.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from "react";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-
 gsap.registerPlugin(ScrollTrigger);
 
 function MainSolution() {
@@ -9,6 +8,38 @@ function MainSolution() {
   const headRef = useRef(null);
   const cardsRef = useRef([]);
 
+  const solutions = [
+    {
+      icon: "/PALNetworks/images/airplane.png",
+      label: "SOLUTION 01",
+      title: "비행상황관리 시스템",
+      desc: "운항 상태, 항로, 고도, 비행 이력을 실시간으로 확인하고 관리합니다.",
+    },
+    {
+      icon: "/PALNetworks/images/cloud-network.png",
+      label: "SOLUTION 02",
+      title: (
+        <>
+          IBE
+          <small>(Internet Booking Engine)</small>
+        </>
+      ),
+      desc: "항공 예약과 판매 흐름을 연결해 편리한 예약 환경을 제공합니다.",
+    },
+    {
+      icon: "/PALNetworks/images/maps.png",
+      label: "SOLUTION 03",
+      title: "스마트 관광 예약 플랫폼",
+      desc: "관광 상품과 예약 데이터를 통합해 사용자 중심 서비스를 구성합니다.",
+    },
+    {
+      icon: "/PALNetworks/images/cloud.png",
+      label: "SOLUTION 04",
+      title: "KT G-Cloud",
+      desc: "공공 클라우드 기반의 안정적인 인프라 운영 환경을 제공합니다.",
+    },
+  ];
+
   useEffect(() => {
     const ctx = gsap.context(() => {
       gsap.set(headRef.current, { opacity: 0, y: 42 });
@@ -66,9 +97,9 @@ function MainSolution() {
         <div className="main-solution-head" ref={headRef}>
           <p className="main-solution-eyebrow">PAL SOLUTION</p>
           <h2 className="main-solution-title">
-            미래 항공
+            항공 IT
             <br />
-            통합 운영 시스템
+            서비스 솔루션
           </h2>
           <p className="main-solution-desc">
             항공 운항 관리부터 스마트 관광 예약 플랫폼, 클라우드 인프라까지
@@ -77,14 +108,27 @@ function MainSolution() {
         </div>
 
         <div className="main-solution-grid">
-          {[0, 1, 2, 3].map((_, index) => (
+          {solutions.map((item, index) => (
             <article
               className="main-solution-card"
               key={index}
               ref={(el) => {
                 cardsRef.current[index] = el;
               }}
-            />
+            >
+              <div className="main-solution-card-icon">
+                {typeof item.icon === "string" && item.icon.includes(".png") ? (
+                  <img src={item.icon} alt="" />
+                ) : (
+                  item.icon
+                )}
+              </div>
+              <div className="main-solution-card-body">
+                <span>{item.label}</span>
+                <h3>{item.title}</h3>
+                <p>{item.desc}</p>
+              </div>
+            </article>
           ))}
         </div>
       </div>

src/css/main.css

@@ -211,7 +211,7 @@ body{overflow-x:hidden;}
 .airspace-panel p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.26em;color:#3a4081;}
 .airspace-panel h2{margin:0;max-width:760px;font-size:clamp(48px,6vw,96px);font-weight:800;line-height:.96;letter-spacing:-.08em;color:#0e1120;}
 .airspace-lines{position:absolute;inset:0;z-index:5;pointer-events:none;}
-.airspace-moving-dot{position:absolute;left:68%;top:47%;z-index:6;width:54px;height:54px;border-radius:50%;background:#3a4081;border:1px solid rgba(58,64,129,.14);box-shadow:0 0 0 12px rgba(58,64,129,.06),0 20px 50px rgba(58,64,129,.18);transform-origin:center center;}
+.airspace-moving-dot{position:absolute;left:68%;top:49%;z-index:6;width:54px;height:54px;border-radius:50%;background:#3a4081;border:1px solid rgba(58,64,129,.14);box-shadow:0 0 0 12px rgba(58,64,129,.06),0 20px 50px rgba(58,64,129,.18);transform-origin:center center;}
 .airspace-moving-dot::before{content:"";position:absolute;inset:20px;border-radius:50%;background:#ffffff;opacity:.9;}
 
 .airspace-uam-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;}
@@ -249,28 +249,22 @@ body{overflow-x:hidden;}
 /* solution */
 .main-solution-section{position:relative;height:100dvh;min-height:100dvh;overflow:hidden;padding:120px 8vw 110px;background:linear-gradient(180deg,#ffffff 0%,#f7f9ff 52%,#ffffff 100%);}
 .main-solution-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 10%,rgba(58,64,129,.045),transparent 30%),radial-gradient(circle at 86% 76%,rgba(112,180,255,.08),transparent 34%);pointer-events:none;}
-
 .main-solution-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;}
-
 .main-solution-arrow{width:42px;height:42px;margin:0 auto 46px;display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;color:#3a4081;opacity:.82;}
-
 .main-solution-head{max-width:760px;margin-bottom:54px;will-change:transform,opacity;}
-
 .main-solution-eyebrow{margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#3a4081;}
-
 .main-solution-title{margin:0;font-size:clamp(42px,5vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.07em;color:#10142b;}
-
 .main-solution-desc{margin:24px 0 0;max-width:620px;font-size:17px;line-height:1.8;font-weight:500;color:rgba(16,20,43,.62);word-break:keep-all;}
-
 .main-solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
 
-.main-solution-card{position:relative;min-height:250px;padding:28px 26px;border-radius:28px;background:rgba(255,255,255,.78);border:1px solid rgba(58,64,129,.1);box-shadow:0 24px 70px rgba(58,64,129,.1);backdrop-filter:blur(18px);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;will-change:transform,opacity;}
-
-.main-solution-card::before{content:"";position:absolute;left:26px;top:28px;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,rgba(58,64,129,.12),rgba(112,180,255,.16));box-shadow:inset 0 0 0 1px rgba(58,64,129,.08);}
-
-.main-solution-card::after{content:"";position:absolute;left:26px;right:26px;bottom:30px;height:84px;border-radius:18px;background:linear-gradient(180deg,rgba(58,64,129,.075),rgba(58,64,129,.035));}
-
-.main-solution-card:hover{transform:translateY(-8px);box-shadow:0 34px 90px rgba(58,64,129,.16);border-color:rgba(58,64,129,.2);}
+.main-solution-card{position:relative;min-height:250px;padding:28px 26px;border-radius:28px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.72);box-shadow:0 20px 60px rgba(58,64,129,.08),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px);transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1),border-color .3s ease,background .3s ease;will-change:transform;overflow:hidden;cursor:pointer;}
+.main-solution-card:hover{transform:translateY(-14px);background:rgba(255,255,255,.88);border-color:rgba(120,130,255,.24);box-shadow:0 42px 100px rgba(58,64,129,.16),inset 0 1px 0 rgba(255,255,255,.96);}
+.main-solution-card-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:34px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,247,255,.82));border:1px solid rgba(95,110,255,.12);box-shadow:0 10px 24px rgba(58,64,129,.08),inset 0 1px 0 rgba(255,255,255,.95);transition:transform .38s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease,background .3s ease;}
+.main-solution-card-icon img{width:28px;height:28px;object-fit:contain;display:block;}
+.main-solution-card-body{position:relative;z-index:2;}
+.main-solution-card-body span{display:block;margin-bottom:14px;font-size:11px;font-weight:800;letter-spacing:.14em;color:#3a4081;}
+.main-solution-card-body h3{margin:0 0 14px;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.05em;color:#10142b;word-break:keep-all;}
+.main-solution-card-body p{margin:0;font-size:15px;font-weight:500;line-height:1.7;color:rgba(16,20,43,.58);word-break:keep-all;}
 
 @media (max-width:1024px){.main-solution-section{padding:110px 6vw 96px;}.main-solution-bg-circle{right:-32vw;top:-28vw;width:90vw;height:90vw;}.main-solution-grid{grid-template-columns:repeat(2,1fr);}.main-solution-card{min-height:220px;}}