TEST

src/components/SubHero.jsx

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