TEST

src/components/SubHero.jsx

@@ -2,21 +2,21 @@ import { useEffect, useRef, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 
 const menuMap = {
-  "/company":  { label: "Company" },
+  "/company": { label: "Company" },
-  "/uam":      { label: "UAM / UATM" },
+  "/uam": { label: "UAM / UATM" },
   "/business": { label: "Business" },
   "/solution": { label: "Solution" },
-  "/contact":  { label: "Contact Us" },
+  "/contact": { label: "Contact Us" },
 };
 
 export default function SubHero({ title, desc, navItems, bgImage }) {
   const { pathname } = useLocation();
-  const topPath  = "/" + pathname.split("/")[1];
+  const topPath = "/" + pathname.split("/")[1];
   const topLabel = menuMap[topPath]?.label || "";
   const curLabel = navItems?.find((n) => n.to === pathname)?.label || "";
 
   const [dropOpen, setDropOpen] = useState(false);
-  const [scrollY,  setScrollY]  = useState(0);
+  const [scrollY, setScrollY] = useState(0);
   const dropRef = useRef(null);
 
   useEffect(() => {
@@ -33,9 +33,9 @@ export default function SubHero({ title, desc, navItems, bgImage }) {
     return () => document.removeEventListener("mousedown", handler);
   }, []);
 
-  const parallaxY   = scrollY * 0.45;
+  const parallaxY = scrollY * 0.45;
   const fadeOpacity = Math.max(0, 1 - scrollY / 420);
-  const titleLines  = typeof title === "string" ? title.split("\n") : [title];
+  const titleLines = typeof title === "string" ? title.split("\n") : [title];
 
   return (
     <>
@@ -55,27 +55,21 @@ export default function SubHero({ title, desc, navItems, bgImage }) {
 
         <div className="sh2-inner" style={{ opacity: fadeOpacity }}>
           <nav className="sh2-bc" aria-label="breadcrumb">
-            <Link to="/main" className="sh2-bc-item">Home</Link>
+            <Link to="/main" className="sh2-bc-item">
+              Home
+            </Link>
             <span className="sh2-bc-sep">—</span>
             <div className="sh2-bc-drop" ref={dropRef}>
-              <button
+              <button className="sh2-bc-btn" onClick={() => setDropOpen((v) => !v)} aria-expanded={dropOpen}>
-                className="sh2-bc-btn"
-                onClick={() => setDropOpen((v) => !v)}
-                aria-expanded={dropOpen}
-              >
                 {topLabel}
-                <svg className={`sh2-bc-arrow${dropOpen ? " sh2-bc-arrow--open" : ""}`}
+                <svg className={`sh2-bc-arrow${dropOpen ? " sh2-bc-arrow--open" : ""}`} width="10" height="6" viewBox="0 0 10 6" fill="none">
-                  width="10" height="6" viewBox="0 0 10 6" fill="none">
+                  <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                  <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5"
-                    strokeLinecap="round" strokeLinejoin="round"/>
                 </svg>
               </button>
               {dropOpen && (
                 <div className="sh2-bc-menu" role="listbox">
                   {navItems?.map((item) => (
-                    <Link key={item.to} to={item.to} role="option"
+                    <Link key={item.to} to={item.to} role="option" className={`sh2-bc-menu-item${item.to === pathname ? " sh2-bc-menu-item--cur" : ""}`} onClick={() => setDropOpen(false)}>
-                      className={`sh2-bc-menu-item${item.to === pathname ? " sh2-bc-menu-item--cur" : ""}`}
-                      onClick={() => setDropOpen(false)}>
                       {item.label}
                     </Link>
                   ))}
@@ -108,8 +102,7 @@ export default function SubHero({ title, desc, navItems, bgImage }) {
         <nav className="sh2-nav" aria-label="Sub Navigation">
           <div className="sh2-nav-inner">
             {navItems.map((item) => (
-              <Link key={item.to} to={item.to}
+              <Link key={item.to} to={item.to} className={`sh2-nav-tab${pathname === item.to ? " sh2-nav-tab--active" : ""}`}>
-                className={`sh2-nav-tab${pathname === item.to ? " sh2-nav-tab--active" : ""}`}>
                 {item.label}
                 {pathname === item.to && <span className="sh2-nav-pip" />}
               </Link>