fix lint errors

components/Breadcrumbs.tsx

@@ -26,21 +26,8 @@ export const Breadcrumbs = () => {
           <span key={title} title={title}>
             {breadcrumb.title}
           </span>
-          ) : pathWithLocale.includes('/guides') ? (
+        ) : pathWithLocale.includes('/guides') ? (
-            <span className='text-mono color-text-secondary text-uppercase'>
+          <span className="text-mono color-text-secondary text-uppercase">
-              <Link
-                key={title}
-                href={breadcrumb.href}
-                title={title}
-                className={cx(
-                  'd-inline-block',
-                  pathWithLocale === breadcrumb.href && 'color-text-tertiary'
-                )}
-              >
-                {breadcrumb.title}
-              </Link>
-            </span>
-          ) : (
             <Link
               key={title}
               href={breadcrumb.href}
@@ -52,7 +39,20 @@ export const Breadcrumbs = () => {
             >
               {breadcrumb.title}
             </Link>
-          )
+          </span>
+        ) : (
+          <Link
+            key={title}
+            href={breadcrumb.href}
+            title={title}
+            className={cx(
+              'd-inline-block',
+              pathWithLocale === breadcrumb.href && 'color-text-tertiary'
+            )}
+          >
+            {breadcrumb.title}
+          </Link>
+        )
       })}
     </nav>
   )

components/context/ProductSubLandingContext.tsx

@@ -1,6 +1,5 @@
 import { createContext, useContext } from 'react'
 import pick from 'lodash/pick'
-import _ from 'lodash'
 
 export type FeaturedTrack = {
   trackName: string

components/landing/CodeExampleCard.tsx

@@ -29,7 +29,11 @@ export const CodeExampleCard = ({ example }: Props) => {
       </div>
       <footer className="border-top p-4 color-text-secondary d-flex flex-items-center">
         <RepoIcon className="flex-shrink-0" />
-        <TruncateLines as="span" maxLines={1} className="ml-2 text-mono text-small color-text-link line-break-anywhere">
+        <TruncateLines
+          as="span"
+          maxLines={1}
+          className="ml-2 text-mono text-small color-text-link line-break-anywhere"
+        >
           {example.href}
         </TruncateLines>
       </footer>

components/landing/LandingSection.tsx

@@ -14,7 +14,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
   return (
     <div className={cx('container-xl px-3 px-md-6', className)} id={sectionLink}>
       {title && (
-        <h2 className={cx('font-mktg', !!description ? 'mb-3' : 'mb-4')}>
+        <h2 className={cx('font-mktg', !description ? 'mb-3' : 'mb-4')}>
           {sectionLink ? <a href={`#${sectionLink}`}>{title}</a> : title}
         </h2>
       )}

components/sublanding/LearningTrack.tsx

@@ -9,7 +9,6 @@ type Props = {
 
 const MAX_VISIBLE_GUIDES = 4
 export const LearningTrack = ({ track }: Props) => {
-  // const guides = track?.guides
   const [visibleGuides, setVisibleGuides] = useState(track.guides?.slice(0, 4))
   const showAll = () => {
     setVisibleGuides(track.guides)
@@ -57,8 +56,8 @@ export const LearningTrack = ({ track }: Props) => {
                 {t('guide_types')[guide.page.type]}
               </div>
             </a>
-            {track.guides && track.guides?.indexOf(guide) + 1 == MAX_VISIBLE_GUIDES ? (
+            {track.guides && track.guides?.indexOf(guide) + 1 === MAX_VISIBLE_GUIDES ? (
-              <a
+              <button
                 className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
                 onClick={showAll}
               >
@@ -69,7 +68,7 @@ export const LearningTrack = ({ track }: Props) => {
                 <span>
                   Show {track.guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}
                 </span>
-              </a>
+              </button>
             ) : (
               <div />
             )}