Update placement for heading + styling for cards (#7130)

Author: carlagn

src/pages/index.module.scss

@@ -118,48 +118,36 @@
       }
       .tabBox {
         width: 100%;
-        display: grid;
-        grid-template-rows: auto 1fr;
+        height: 100%;
         max-width: 100%;
         @media (min-width: 974px) {
           height: 100%;
         }
         .heading {
-          background-color: var(--notfound-background);
-          max-width: max-content;
-          padding: 6px 12px;
-          border: 1px solid var(--teal-600);
-          border-bottom: none;
-          position: relative;
-          z-index: 2;
-          color: var(--ifm-heading-color);
+          margin-bottom: 24px;
+          font-size: 24px;
+          color: var(--primary-font-color);
           font-weight: 700;
-          border-top-left-radius: 4px;
-          border-top-right-radius: 4px;
-          &::after {
-            content: "";
-            left: 0;
-            position: absolute;
-            width: 100%;
-            height: 3px;
-            background-color: var(--notfound-background);
-            bottom: -2px;
-          }
+          font-family: Barlow;
+          font-weight: 700;
+          line-height: 110%; /* 26.4px */
+          letter-spacing: -0.48px;
+          padding: 8px 0;
           .leftIcon {
             color: var(--teal-600);
           }
         }
         .content {
           border: 1px solid var(--teal-600);
-          border-top-right-radius: 8px;
-          border-bottom-left-radius: 8px;
-          border-bottom-right-radius: 8px;
+          border-radius: 8px;
           background-color: var(--notfound-background);
           display: grid;
-          grid-template-rows: 1fr auto;
-          padding: 24px;
+          grid-template-rows: auto 1fr auto;
+          padding: 16px 24px 32px;
+          height: 100%;
           > p {
             margin: 0;
+            font-size: 14px;
             padding-bottom: 24px;
           }
         }

src/pages/index.tsx

@@ -166,11 +166,11 @@ const TabBox = ({icon, label, description, list, link}: any) => {
   return (
     <div>
       <div className={styles.tabBox}>
-        <div className={styles.heading}>
-          {icon && <Icon className={styles.leftIcon} btn="left" icon={icon} size='inherit' color='var(--teal-600)' /> }
-          <span>{label}</span>
-        </div>
         <div className={styles.content}>
+          <div className={styles.heading}>
+            {icon && <Icon className={styles.leftIcon} btn="left" icon={icon} size='inherit' color='var(--teal-600)' /> }
+            <span>{label}</span>
+          </div>
           <p dangerouslySetInnerHTML={{__html: description}}></p>
           <div className={styles.techGrid}>
             {list && list.length && list.map((l: any, idx: number) =>