운영 유지보수

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">
+        <div className="inner-wrap">
-          <span className="sub-section-eyebrow sub-fade-in">운영 · 유지보수</span>
+          {/* 개요 인트로 */}
-          {/* <main className="sub-page">
+          <section className="fc-intro" ref={introRef}>
-            <section className="sub-visual">
+            <div className="fc-intro__left">
-              <div className="inner">
+              <motion.span className="fc-eyebrow" initial={{ opacity: 0, y: 16 }} animate={introInView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.6, ease }}>
-                <h2>운영 · 유지보수</h2>
+                Overview
-                <p>Operation &amp; Maintenance</p>
+              </motion.span>
-              </div>
+              <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 }}>
-            </section>
+                운영부터 개선까지
-
-            <section className="sub-content-section">
-              <div className="inner">
-                <h3>안정적인 시스템 운영과 사후 관리</h3>
-                <p>
-                  구축 이후에도 끊김 없는 서비스 운영을 위해
                 <br />
-                  장기 파트너십 기반의 유지보수를 제공합니다.
+                전문적인 관리 서비스
-                </p>
+              </motion.h2>
             </div>
           </section>
-          </main> */}
+        </div>
-        </section>
       </div>
     </article>
   );