|
|
|
|
@ -1,8 +1,18 @@
|
|
|
|
|
import useFadeIn from "../../hooks/useFadeIn"; |
|
|
|
|
import SubHero from "../../components/SubHero"; |
|
|
|
|
import { useRef } from "react"; |
|
|
|
|
import { motion, useInView, AnimatePresence } from "framer-motion"; |
|
|
|
|
|
|
|
|
|
const ease = [0.22, 1, 0.36, 1]; |
|
|
|
|
|
|
|
|
|
function IbePage() { |
|
|
|
|
const basePath = import.meta.env.BASE_URL; |
|
|
|
|
|
|
|
|
|
const ref = useFadeIn(); |
|
|
|
|
const introRef = useRef(null); |
|
|
|
|
const introInView = useInView(introRef, { once: true, margin: "-60px" }); |
|
|
|
|
const channelRef = useRef(null); |
|
|
|
|
const channelInView = useInView(channelRef, { once: true, margin: "-60px" }); |
|
|
|
|
const SOLUTION_NAV = [ |
|
|
|
|
{ label: "비행상황관리 시스템", to: "/solution/flight-control" }, |
|
|
|
|
{ label: "IBE", to: "/solution/ibe" }, |
|
|
|
|
@ -26,28 +36,191 @@ function IbePage() {
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<div className="sub-content"> |
|
|
|
|
<section className="sub-section"> |
|
|
|
|
<span className="sub-section-eyebrow sub-fade-in">IBE</span> |
|
|
|
|
{/* <main className="sub-page"> |
|
|
|
|
<section className="sub-visual"> |
|
|
|
|
<div className="inner"> |
|
|
|
|
<h2>IBE</h2> |
|
|
|
|
<p>Internet Booking Engine</p> |
|
|
|
|
<div className="inner-wrap"> |
|
|
|
|
{/* 개요 인트로 */} |
|
|
|
|
<section className="fc-intro" ref={introRef}> |
|
|
|
|
<div className="fc-intro__left"> |
|
|
|
|
<motion.span |
|
|
|
|
className="fc-eyebrow" |
|
|
|
|
initial={{ opacity: 0, y: 16 }} |
|
|
|
|
animate={introInView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, ease }} |
|
|
|
|
> |
|
|
|
|
Overview |
|
|
|
|
</motion.span> |
|
|
|
|
<motion.h2 |
|
|
|
|
className="fc-intro__title" |
|
|
|
|
initial={{ opacity: 0, y: 24 }} |
|
|
|
|
animate={introInView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.7, ease, delay: 0.1 }} |
|
|
|
|
> |
|
|
|
|
항공 예약의 모든 과정을 |
|
|
|
|
<br /> |
|
|
|
|
하나로 연결하는 통합 플랫폼 |
|
|
|
|
</motion.h2> |
|
|
|
|
<motion.p |
|
|
|
|
className="fc-intro__desc" |
|
|
|
|
initial={{ opacity: 0, y: 16 }} |
|
|
|
|
animate={introInView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, ease, delay: 0.2 }} |
|
|
|
|
> |
|
|
|
|
IBE(Internet Booking Engine)는 항공권 검색부터 예약, 결제, |
|
|
|
|
<br /> |
|
|
|
|
발권까지 모든 프로세스를 지원하는 차세대 예약 엔진 입니다.{" "} |
|
|
|
|
<br /> |
|
|
|
|
다양한 채널과 시스템을 유연하게 연동하여 최적의 예약 경험을 |
|
|
|
|
제공합니다. |
|
|
|
|
</motion.p> |
|
|
|
|
<motion.div |
|
|
|
|
className="fc-intro__icons" |
|
|
|
|
initial={{ opacity: 0, y: 16 }} |
|
|
|
|
animate={introInView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, ease, delay: 0.3 }} |
|
|
|
|
> |
|
|
|
|
{[ |
|
|
|
|
{ img: "ibe_intro_icon1.png", label: "다중 채널 연동" }, |
|
|
|
|
{ img: "ibe_intro_icon2.png", label: "실시간 예약/재고" }, |
|
|
|
|
{ img: "ibe_intro_icon3.png", label: "안정성과 확장성" }, |
|
|
|
|
{ img: "ibe_intro_icon4.png", label: "데이터 기반 운영" }, |
|
|
|
|
].map((item, i) => ( |
|
|
|
|
<div key={i} className="fc-intro__icon-item"> |
|
|
|
|
<img |
|
|
|
|
src={`${basePath}images/${item.img}`} |
|
|
|
|
alt={item.label} |
|
|
|
|
/> |
|
|
|
|
<span>{item.label}</span> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</motion.div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<motion.div |
|
|
|
|
className="fc-intro__right" |
|
|
|
|
initial={{ opacity: 0, x: 40 }} |
|
|
|
|
animate={introInView ? { opacity: 1, x: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.9, ease, delay: 0.15 }} |
|
|
|
|
> |
|
|
|
|
<img |
|
|
|
|
src={`${basePath}images/ibe_computer.png`} |
|
|
|
|
alt="비행상황관리 시스템" |
|
|
|
|
className="fc-intro__monitor" |
|
|
|
|
/> |
|
|
|
|
</motion.div> |
|
|
|
|
</section> |
|
|
|
|
|
|
|
|
|
<section className="sub-content-section"> |
|
|
|
|
<div className="inner"> |
|
|
|
|
<h3>항공 예약 · 발권 엔진</h3> |
|
|
|
|
<p> |
|
|
|
|
온라인 항공 예약과 발권을 위한 통합 엔진으로 |
|
|
|
|
<br /> |
|
|
|
|
안정적이고 확장 가능한 예약 플랫폼을 제공합니다. |
|
|
|
|
</p> |
|
|
|
|
{/* MULTI CHANNEL INTEGRATION */} |
|
|
|
|
<section className="ibe-channel-section" ref={channelRef}> |
|
|
|
|
<motion.span |
|
|
|
|
className="fc-eyebrow" |
|
|
|
|
initial={{ opacity: 0, y: 16 }} |
|
|
|
|
animate={channelInView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, ease }} |
|
|
|
|
> |
|
|
|
|
Multi Channel Integration |
|
|
|
|
</motion.span> |
|
|
|
|
<motion.h2 |
|
|
|
|
className="ibe-channel__title" |
|
|
|
|
initial={{ opacity: 0, y: 24 }} |
|
|
|
|
animate={channelInView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.7, ease, delay: 0.1 }} |
|
|
|
|
> |
|
|
|
|
다양한 시스템과의 유연한 연동 |
|
|
|
|
</motion.h2> |
|
|
|
|
<motion.p |
|
|
|
|
className="ibe-channel__desc" |
|
|
|
|
initial={{ opacity: 0, y: 16 }} |
|
|
|
|
animate={channelInView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.6, ease, delay: 0.2 }} |
|
|
|
|
> |
|
|
|
|
항공사 GDS, 호텔, 결제, 보험 등 다양한 외부 시스템과 API 기반 |
|
|
|
|
연동을 통해 확장성 높은 예약 환경을 제공합니다. |
|
|
|
|
</motion.p> |
|
|
|
|
|
|
|
|
|
<motion.div |
|
|
|
|
className="ibe-channel__diagram" |
|
|
|
|
initial={{ opacity: 0, y: 40 }} |
|
|
|
|
animate={channelInView ? { opacity: 1, y: 0 } : {}} |
|
|
|
|
transition={{ duration: 0.8, ease, delay: 0.3 }} |
|
|
|
|
> |
|
|
|
|
<svg |
|
|
|
|
className="ibe-channel__svg" |
|
|
|
|
viewBox="0 0 1540 430" |
|
|
|
|
preserveAspectRatio="none" |
|
|
|
|
> |
|
|
|
|
<path |
|
|
|
|
className="ibe-channel__path" |
|
|
|
|
d="M350 95 C520 95 560 185 710 185" |
|
|
|
|
/> |
|
|
|
|
<path |
|
|
|
|
className="ibe-channel__path" |
|
|
|
|
d="M350 215 C520 215 560 215 710 215" |
|
|
|
|
/> |
|
|
|
|
<path |
|
|
|
|
className="ibe-channel__path" |
|
|
|
|
d="M350 335 C520 335 560 245 710 245" |
|
|
|
|
/> |
|
|
|
|
<path |
|
|
|
|
className="ibe-channel__path" |
|
|
|
|
d="M830 185 C980 185 1020 95 1190 95" |
|
|
|
|
/> |
|
|
|
|
<path |
|
|
|
|
className="ibe-channel__path" |
|
|
|
|
d="M830 215 C980 215 1020 215 1190 215" |
|
|
|
|
/> |
|
|
|
|
<path |
|
|
|
|
className="ibe-channel__path" |
|
|
|
|
d="M830 245 C980 245 1020 335 1190 335" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<circle cx="350" cy="95" r="4" className="ibe-channel__dot" /> |
|
|
|
|
<circle cx="350" cy="215" r="4" className="ibe-channel__dot" /> |
|
|
|
|
<circle cx="350" cy="335" r="4" className="ibe-channel__dot" /> |
|
|
|
|
<circle cx="1190" cy="95" r="4" className="ibe-channel__dot" /> |
|
|
|
|
<circle cx="1190" cy="215" r="4" className="ibe-channel__dot" /> |
|
|
|
|
<circle cx="1190" cy="335" r="4" className="ibe-channel__dot" /> |
|
|
|
|
</svg> |
|
|
|
|
<div className="ibe-channel__col ibe-channel__col--left"> |
|
|
|
|
{[ |
|
|
|
|
{ img: "ibe_pal_icon1.png", label: "항공사" }, |
|
|
|
|
{ img: "ibe_pal_icon2.png", label: "GDS" }, |
|
|
|
|
{ img: "ibe_pal_icon3.png", label: "호텔" }, |
|
|
|
|
].map((item, i) => ( |
|
|
|
|
<motion.div key={i} className="ibe-channel__card"> |
|
|
|
|
<img |
|
|
|
|
src={`${basePath}images/${item.img}`} |
|
|
|
|
alt={item.label} |
|
|
|
|
/> |
|
|
|
|
<span>{item.label}</span> |
|
|
|
|
</motion.div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="ibe-channel__center"> |
|
|
|
|
<img |
|
|
|
|
src={`${basePath}images/ibe_pal_item.png`} |
|
|
|
|
alt="PAL IBE" |
|
|
|
|
className="ibe-channel__center-img" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="ibe-channel__col ibe-channel__col--right"> |
|
|
|
|
{[ |
|
|
|
|
{ img: "ibe_pal_icon4.png", label: "결제 시스템" }, |
|
|
|
|
{ img: "ibe_pal_icon5.png", label: "여행사/OTA" }, |
|
|
|
|
{ img: "ibe_pal_icon6.png", label: "보험" }, |
|
|
|
|
].map((item, i) => ( |
|
|
|
|
<motion.div key={i} className="ibe-channel__card"> |
|
|
|
|
<img |
|
|
|
|
src={`${basePath}images/${item.img}`} |
|
|
|
|
alt={item.label} |
|
|
|
|
/> |
|
|
|
|
<span>{item.label}</span> |
|
|
|
|
</motion.div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</motion.div> |
|
|
|
|
</section> |
|
|
|
|
</main> */} |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</article> |
|
|
|
|
); |
|
|
|
|
|
