From 37a6dde3a35f47722a56e36317a39ea96374f3a5 Mon Sep 17 00:00:00 2001
From: geun <1416geun@naver.com>
Date: Thu, 4 Jun 2026 15:54:34 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9A=B4=EC=98=81=20=EC=9C=A0=EC=A7=80?=
 =?UTF-8?q?=EB=B3=B4=EC=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/business/MaintenancePage.jsx | 42 ++++++++++++--------------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/pages/business/MaintenancePage.jsx b/src/pages/business/MaintenancePage.jsx
index 2cdf56b..da78339 100644
--- a/src/pages/business/MaintenancePage.jsx
+++ b/src/pages/business/MaintenancePage.jsx
@@ -1,8 +1,13 @@
 import SubHero from "../../components/SubHero";
 import useFadeIn from "../../hooks/useFadeIn";
+import { useRef } from "react";
+import { motion, useInView } from "framer-motion";
 
 function MaintenancePage() {
   const ref = useFadeIn();
+  const introRef = useRef(null);
+  const introInView = useInView(introRef, { once: true, margin: "-60px" });
+  const ease = [0.22, 1, 0.36, 1];
   const BUSINESS_NAV = [
     { label: "System Integration", to: "/business/si" },
     { label: "R&D", to: "/business/rnd" },
@@ -24,28 +29,21 @@ function MaintenancePage() {
       />
 
       <div className="sub-content">
-        <section className="sub-section">
-          <span className="sub-section-eyebrow sub-fade-in">운영 · 유지보수</span>
-          {/* <main className="sub-page">
-            <section className="sub-visual">
-              <div className="inner">
-                <h2>운영 · 유지보수</h2>
-                <p>Operation &amp; Maintenance</p>
-              </div>
-            </section>
-
-            <section className="sub-content-section">
-              <div className="inner">
-                <h3>안정적인 시스템 운영과 사후 관리</h3>
-                <p>
-                  구축 이후에도 끊김 없는 서비스 운영을 위해
-                  <br />
-                  장기 파트너십 기반의 유지보수를 제공합니다.
-                </p>
-              </div>
-            </section>
-          </main> */}
-        </section>
+        <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>
+            </div>
+          </section>
+        </div>
       </div>
     </article>
   );