feat(docs-site) polishes and improved responsiveness for the home and…

… solutions pages (datahub-project#11770)

docs-website/src/pages/_components/Community/community.module.scss

@@ -221,14 +221,14 @@
 
 .numberContainer {
   display: inline-block;
-  width: 11rem;
+  width: 12rem;
   text-align: right;
 }
 
 .numberChange {
   display: inline-block;
   animation: slideIn 0.5s ease-in-out;
-  width: 11rem;
+  width: 12rem;
 }
 
 

docs-website/src/pages/_components/QuickstartContent/quickstartcontent.module.scss

@@ -129,7 +129,7 @@
 
     .quickstart__content {
       display: flex;
-      margin-bottom: 3rem;
+      margin-bottom: 6rem;
       width: 100%;
 
       .quickstart__text {

docs-website/src/pages/solutions/_components/Integrations/index.js

@@ -47,6 +47,7 @@ const Integrations = () => {
               </div>
           </div>
       </div>
+      <a href="/integrations">See all →</a>
     </div>
   );
 };

docs-website/src/pages/solutions/_components/Integrations/integrations.module.scss

@@ -1,6 +1,13 @@
 .container {
   display: flex;
   flex-direction: column;
+  >a {
+    text-decoration: none;
+    text-align: center;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+  }
 
   .section_header {
     color: var(--primitives-text-tex-subtext, #777E99);

docs-website/src/pages/solutions/_components/IntegrationsStatic/index.js

@@ -17,7 +17,7 @@ const Integrations = () => {
                 <div className={styles.slide_track}>
                   {[...Array(1)].map((_, i) => (
                     <React.Fragment key={i}>
-                      {[1, 2, 3, 4, 5, 6].map((item, index) => (
+                      {[1, 2, 3, 4, 5, 6, 7, 8].map((item, index) => (
                         <div className={styles.slide} key={index} style={{ backgroundImage: `url(${useBaseUrl(`${integrationsPath}/logo-integration-${item}.png`)})` }}>
                         </div>
                       ))}

docs-website/src/pages/solutions/_components/IntegrationsStatic/integrations.module.scss

@@ -71,18 +71,22 @@
 
 .slider {
   position: relative;
+  display: flex;
 }
 
 .slide_track {
   display: flex;
-  width: max-content;
+  width: 80%;
   margin: auto;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-evenly;
 }
 
 .slide {
-  width: 100px;
-  height: 100px;
-  margin: auto 3rem;
+  width: 80px;
+  height: 80px;
+  margin: auto 0;
   display: flex;
   justify-content: space-between;
   overflow: hidden;
@@ -99,9 +103,12 @@
     max-width: 100vw;
     min-width: auto;
   }
+  .slide_track {
+    width: 95%;
+  }
   .slide {
-    width: 80px;
-    height: 80px;
-    margin: auto 1rem;
+    width: 40px;
+    height: 40px;
+    margin: auto 0;
   }
 }