Make whole blocks on homepage clickable

src/components/HomepageFeatures/index.js

@@ -7,57 +7,63 @@ import Link from '@docusaurus/Link'; // Import Link component
 const FeatureList = [
   {
     title: 'Content Authors',
+    subtitle: '…',
     Svg: require('@site/static/img/specup_logo.svg').default,
     description: (
-      <>
-        <Link to="/docs/content-author-guide/introduction">→ Content Authors guide</Link>.
-      </>
+      <></>
     ),
+    url: './docs/content-author-guide/introduction',
   },
   {
     title: 'Terminology Authors',
+    subtitle: '…',
     Svg: require('@site/static/img/specup_logo.svg').default,
     description: (
-      <>
-        <Link to="/docs/terminology-author-guide/introduction">→ Terminology Authors guide</Link>
-      </>
+      <></>
     ),
+    url: './docs/terminology-author-guide/introduction',
   },
   {
     title: 'Curators',
+    subtitle: '…',
     Svg: require('@site/static/img/specup_logo.svg').default,
     description: (
-      <>
-        <Link to="/docs/curator-guide/introduction">→ Curators Guide</Link>
-      </>
+      <></>
     ),
+    url: './docs/curator-guide/introduction',
   },
 ];
 
-function Feature({ Svg, title, description }) {
+function Feature({ Svg, title, subtitle, description, url }) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+    (
+      <div className={clsx('col col--4')}>
+        <a className='feature-block' href={`${url}`}>
+          <div className="margin-top--lg text--center padding-horiz--md">
+            <h3>{title}</h3>
+            {/* <p>{subtitle}</p> */}
+            <p>{description}</p>
+          </div>
+
+          <div className="margin-top--lg text--center">
+            <Svg className={styles.featureSvg} role="img" />
+          </div>
+        </a>
       </div>
-    </div>
+    )
   );
 }
 
 export default function HomepageFeatures() {
   return (
     <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
+      {/* <div className="container"> */}
+      {/* <div className="row"> */}
+      {FeatureList.map((props, idx) => (
+        <Feature key={idx} {...props} />
+      ))}
+      {/* </div> */}
+      {/* </div> */}
     </section>
   );
 }