sub

src/components/SubHero.jsx

@@ -9,15 +9,18 @@ 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) => (
@@ -26,10 +29,10 @@ export default function SubHero({ title, desc, navItems }) {
                     <motion.span
                       key={ci}
                       className="sh4-char"
-                    initial={{ opacity: 0, y: 16 }}
+                      initial={{ opacity: 0 }}
-                    animate={{ opacity: 1, y: 0 }}
+                      animate={{ opacity: 1 }}
                       transition={{
-                      duration: 0.5,
+                        duration: 0.6,
                         delay: li * 0.08 + ci * 0.022,
                         ease: [0.16, 1, 0.3, 1],
                       }}
@@ -41,7 +44,18 @@ export default function SubHero({ title, desc, navItems }) {
               ))}
             </h1>
 
-          {desc && <p className="sh4-desc">{desc}</p>}
+            {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>
+
+          {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>
 

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">