diff --git a/public/images/airplane.png b/public/images/airplane.png
new file mode 100644
index 0000000..7cbea1e
Binary files /dev/null and b/public/images/airplane.png differ
diff --git a/public/images/cloud-network.png b/public/images/cloud-network.png
new file mode 100644
index 0000000..16d5d65
Binary files /dev/null and b/public/images/cloud-network.png differ
diff --git a/public/images/cloud.png b/public/images/cloud.png
new file mode 100644
index 0000000..f1f8115
Binary files /dev/null and b/public/images/cloud.png differ
diff --git a/public/images/maps.png b/public/images/maps.png
new file mode 100644
index 0000000..1d0c31e
Binary files /dev/null and b/public/images/maps.png differ
diff --git a/src/components/main/MainSolution.jsx b/src/components/main/MainSolution.jsx
index 0f74870..a510a78 100644
--- a/src/components/main/MainSolution.jsx
+++ b/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
+ (Internet Booking Engine)
+ >
+ ),
+ 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() {
PAL SOLUTION
- 미래 항공
+ 항공 IT
- 통합 운영 시스템
+ 서비스 솔루션
항공 운항 관리부터 스마트 관광 예약 플랫폼, 클라우드 인프라까지
@@ -77,14 +108,27 @@ function MainSolution() {
- {[0, 1, 2, 3].map((_, index) => (
+ {solutions.map((item, index) => (
{
cardsRef.current[index] = el;
}}
- />
+ >
+
+ {typeof item.icon === "string" && item.icon.includes(".png") ? (
+

+ ) : (
+ item.icon
+ )}
+
+
+
{item.label}
+
{item.title}
+
{item.desc}
+
+
))}
diff --git a/src/css/main.css b/src/css/main.css
index 80c6204..8152f50 100644
--- a/src/css/main.css
+++ b/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;}}