docs(website): Make toolchain icons links to the tool descriptions

Change the toolchain icons to be links to the descriptions of the tools.
While at it, also slightly improve the layout of the toolchain icons.

Fixes #10552.

Signed-off-by: Martin Nonnenmacher <[email protected]>

Author: mnonnenmacher

website/src/components/Features/index.js

@@ -193,8 +193,11 @@ const FeatureList = [
 ];
 
 function Feature({Svg, title, link, command, description, reverse}) {
+  // Create an ID based on the tool title for linking.
+  const toolId = title.toLowerCase();
+
   return (
-    <div className={clsx(styles.feature, reverse && styles.featureReverse)}>
+    <div id={toolId} className={clsx(styles.feature, reverse && styles.featureReverse)}>
       <div className={styles.featureSvgContainer}>
         <Link to={link}>
           <Svg className={styles.featureSvg} role="img" />

website/src/components/Toolchain/index.js

@@ -28,11 +28,27 @@ import ReporterSvg from '@site/static/img/reporter.svg';
 import ScannerSvg from '@site/static/img/scanner.svg';
 
 function Tool({title, Svg, description}) {
+  const targetId = title.toLowerCase();
+
+  const handleClick = (e) => {
+    e.preventDefault();
+
+    // Update the URL manually to support back button navigation.
+    window.history.pushState(null, '', `#${targetId}`);
+
+    const element = document.getElementById(targetId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
   return (
     <div className={clsx(styles.tool, 'shadow--tl')}>
-      <h3>{title}</h3>
-      <Svg className={styles.toolSvg} role="img"/>
-      <p>{description}</p>
+      <a href={`#${targetId}`} onClick={handleClick} className={styles.toolLink}>
+          <h3>{title}</h3>
+          <Svg className={styles.toolSvg} role="img"/>
+          <p>{description}</p>
+      </a>
     </div>
   );
 }

website/src/components/Toolchain/styles.module.css

@@ -32,7 +32,7 @@
 
 .tool {
     border: 2px solid var(--ifm-color-primary);
-    border-radius: 8px;
+    border-radius: 12px;
     padding: 0.5rem;
     text-align: center;
     margin: auto;
@@ -45,26 +45,59 @@
     justify-content: space-between;
     background: linear-gradient(to bottom, var(--ifm-color-primary-lightest), var(--ifm-color-primary));
     color: var(--ifm-hero-text-color);
+    transition: all 0.3s ease;
+}
+
+.tool:hover {
+    transform: translateX(-2px) translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+    border-color: var(--ifm-color-primary-darker);
+}
+
+.toolLink {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    text-decoration: none;
+    color: var(--ifm-hero-text-color);
+    padding: 0.5rem;
+}
+
+.toolLink:hover {
+    color: var(--ifm-hero-text-color);
+    text-decoration: none;
+}
+
+.toolLink h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--ifm-hero-text-color);
 }
 
 .tool p {
     font-size: 0.8em;
     padding: 0;
     margin: 0;
+    color: var(--ifm-hero-text-color);
+    opacity: 0.9;
 }
 
 .toolSvg {
     width: 4rem;
     height: 4rem;
     margin: auto;
     display: block;
+    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
 }
 
 .arrow {
     font-size: 2rem;
     color: var(--ifm-color-primary);
     align-self: center;
     margin: 0;
+    transition: color 0.3s ease;
 }
 
 @media (max-width: 768px) {
@@ -80,4 +113,3 @@
         transform: rotate(90deg);
     }
 }
-