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;}}