From 1937bc3a2f035dd4c98f2915fbb9f4ffd3bb1cff Mon Sep 17 00:00:00 2001
From: geun <1416geun@naver.com>
Date: Wed, 13 May 2026 16:25:31 +0900
Subject: [PATCH] sub

---
 src/components/SubHero.jsx      | 64 ++++++++++++++++++++-------------
 src/pages/company/AboutPage.jsx | 20 ++++++++++-
 2 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/src/components/SubHero.jsx b/src/components/SubHero.jsx
index 49a73ed..ee76f23 100644
--- a/src/components/SubHero.jsx
+++ b/src/components/SubHero.jsx
@@ -9,39 +9,53 @@ const menuMap = {
   "/contact": { label: "Contact Us" },
 };
 
-export default function SubHero({ title, desc, navItems }) {
+export default function SubHero({ title, desc, navItems, rightSlot }) {
   const { pathname } = useLocation();
   const titleLines = typeof title === "string" ? title.split("\n") : [title];
 
   return (
     <>
-      <section className="sh4">
+      <section className={`sh4${rightSlot ? " sh4--split" : ""}`}>
         <div className="sh4-inner">
-          <span className="sh4-label">{menuMap["/" + pathname.split("/")[1]]?.label}</span>
+          <div className="sh4-left">
+            <motion.span className="sh4-label" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}>
+              {menuMap["/" + pathname.split("/")[1]]?.label}
+            </motion.span>
 
-          <h1 className="sh4-title">
-            {titleLines.map((line, li) => (
-              <span key={li} className="sh4-title-line">
-                {line.split("").map((char, ci) => (
-                  <motion.span
-                    key={ci}
-                    className="sh4-char"
-                    initial={{ opacity: 0, y: 16 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{
-                      duration: 0.5,
-                      delay: li * 0.08 + ci * 0.022,
-                      ease: [0.16, 1, 0.3, 1],
-                    }}
-                  >
-                    {char === " " ? "\u00A0" : char}
-                  </motion.span>
-                ))}
-              </span>
-            ))}
-          </h1>
+            <h1 className="sh4-title">
+              {titleLines.map((line, li) => (
+                <span key={li} className="sh4-title-line">
+                  {line.split("").map((char, ci) => (
+                    <motion.span
+                      key={ci}
+                      className="sh4-char"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{
+                        duration: 0.6,
+                        delay: li * 0.08 + ci * 0.022,
+                        ease: [0.16, 1, 0.3, 1],
+                      }}
+                    >
+                      {char === " " ? "\u00A0" : char}
+                    </motion.span>
+                  ))}
+                </span>
+              ))}
+            </h1>
+
+            {desc && (
+              <motion.p className="sh4-desc" initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, delay: 0.8, ease: [0.16, 1, 0.3, 1] }}>
+                {desc}
+              </motion.p>
+            )}
+          </div>
 
-          {desc && <p className="sh4-desc">{desc}</p>}
+          {rightSlot && (
+            <motion.div className="sh4-right" initial={{ opacity: 0, x: 24 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.8, delay: 0.4, ease: [0.16, 1, 0.3, 1] }}>
+              {rightSlot}
+            </motion.div>
+          )}
         </div>
       </section>
 
diff --git a/src/pages/company/AboutPage.jsx b/src/pages/company/AboutPage.jsx
index ab0269e..f5da47f 100644
--- a/src/pages/company/AboutPage.jsx
+++ b/src/pages/company/AboutPage.jsx
@@ -6,6 +6,24 @@ import SubHero from "../../components/SubHero";
 
 gsap.registerPlugin(ScrollTrigger);
 
+const HERO_STATS = [
+  { num: "2010", label: "설립연도" },
+  { num: "50+", label: "완료 프로젝트" },
+  { num: "15+", label: "주요 고객사" },
+  { num: "10+", label: "R&D 전문인력" },
+];
+
+const heroRight = (
+  <div className="ab-hero-stats">
+    {HERO_STATS.map((s) => (
+      <div className="ab-hero-stat" key={s.label}>
+        <strong className="ab-hero-stat-num">{s.num}</strong>
+        <span className="ab-hero-stat-lbl">{s.label}</span>
+      </div>
+    ))}
+  </div>
+);
+
 const COMPANY_NAV = [
   { label: "회사소개", to: "/company/about" },
   { label: "연혁", to: "/company/history" },
@@ -153,7 +171,7 @@ export default function AboutPage() {
 
   return (
     <article className="ab3">
-      <SubHero title={"가치를 실천하는\n항공 IT 전문기업"} desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." navItems={COMPANY_NAV} bgImage="/images/hero1.png" />
+      <SubHero title={"가치를 실천하는\n항공 IT 전문기업"} desc="팔네트웍스는 항공 데이터와 통합 관제 기술을 기반으로 안전한 하늘길을 만들어갑니다." navItems={COMPANY_NAV} rightSlot={heroRight} />
 
       {/* ── STATS ── */}
       <section className="ab3-stats">