docs: various enhancements across /docs workspace (#31921)

Signed-off-by: hainenber <dotronghai96@gmail.com>

docs/src/pages/community.tsx

@@ -86,7 +86,7 @@ const communityLinks = [
 ];
 
 const StyledJoinCommunity = styled('section')`
-  background-color: var(--ifm-off-section-background);
+  background-color: var(--ifm-background-color);
   border-bottom: 1px solid var(--ifm-border-color);
   .list {
     max-width: 540px;
@@ -118,7 +118,7 @@ const StyledJoinCommunity = styled('section')`
   .description {
     font-size: 14px;
     line-height: 20px;
-    color: var(--ifm-secondary-text);
+    color: var(--ifm-font-base-color);
     margin-top: -8px;
     margin-bottom: 23px;
     ${mq[1]} {
@@ -143,22 +143,6 @@ const StyledCalendarIframe = styled('iframe')`
   }
 `;
 
-const StyledNewsletterIframe = styled('iframe')`
-  display: block;
-  max-width: 1080px;
-  width: calc(100% - 40px);
-  height: 285px;
-  margin: 30px auto 20px;
-  border: 0;
-  @media (max-width: 1200px) {
-    height: 380px;
-  }
-  @media (max-width: 679px) {
-    height: 680px;
-    margin-top: 15px;
-  }
-`;
-
 const StyledLink = styled('a')`
   display: inline-flex;
   align-items: center;
@@ -224,8 +208,8 @@ const Community = () => {
                     </a>
                   }
                   title={
-                    <a className="title" href={url} target="_blank">
-                      {title}
+                    <a href={url} target="_blank">
+                      <p className="title" style={{marginBottom: 0}}>{title}</p>
                     </a>
                   }
                   description={<p className="description">{description}</p>}

docs/src/pages/index.tsx

@@ -207,7 +207,6 @@ const StyledFeaturesList = styled('ul')`
   .item {
     text-align: left;
     border: 1px solid var(--ifm-border-color);
-    background-color: #ffffff;
     border-radius: 10px;
     overflow: hidden;
     display: flex;
@@ -230,7 +229,6 @@ const StyledFeaturesList = styled('ul')`
     }
     .title {
       font-size: 24px;
-      color: var(--ifm-primary-text);
       margin: 10px 0 0;
       ${mq[1]} {
         font-size: 23px;
@@ -240,7 +238,6 @@ const StyledFeaturesList = styled('ul')`
     .description {
       font-size: 17px;
       line-height: 23px;
-      color: var(--ifm-secondary-text);
       margin: 5px 0 0;
       ${mq[1]} {
         font-size: 16px;