fix: Fix breakpoints and removed foruns page

docusaurus.config.js

@@ -28,11 +28,6 @@ module.exports = {
           label: "Documentation",
           position: "right",
         },
-        {
-          to: "forum",
-          label: "Forums",
-          position: "right",
-        },
         {
           href: "https://github.com/PaymentsDS/",
           label: "GitHub",

src/css/custom.css

@@ -72,6 +72,10 @@ a:hover {
   max-width: 13em;
 }
 
+.col.col--4 + .col.col--4 {
+  margin-left: 90px;
+}
+
 @media screen and (max-width: 768px) {
   .navbar {
     padding: 0 2em;
@@ -81,3 +85,19 @@ a:hover {
     font-size: 2.6rem;
   }
 }
+
+@media screen and (min-width: 350px) and (max-width: 996px) {
+  .col.col--4 + .col.col--4 {
+    margin-left: 0px;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .col.col--4 + .col.col--4 {
+    margin-left: 0px;
+  }
+
+  .hero__title {
+    font-size: 1.9rem;
+  }
+}

src/pages/index.js

@@ -26,17 +26,6 @@ const features = [
     ),
     link: <> Get SDKs </>,
   },
-  {
-    title: <>Forum</>,
-    imageUrl: "img/undraw_community.svg",
-    description: (
-      <>
-        Join our community and help each other integrate and
-        #MakeYourTransactionsEasy.
-      </>
-    ),
-    link: <> Browse Forums </>,
-  },
 ];
 
 function Feature({ imageUrl, title, description, link }) {
@@ -88,7 +77,7 @@ function Home() {
         {features && features.length > 0 && (
           <section className={styles.features}>
             <div className="container">
-              <div className="row">
+              <div className={styles.row}>
                 {features.map((props, idx) => (
                   <Feature key={idx} {...props} />
                 ))}

src/pages/styles.module.css

@@ -53,10 +53,21 @@
   background-color: #f5f5f5;
 }
 
+.row {
+  display: flex;
+  justify-content: center;
+  max-width: 60vw;
+  margin: 0 auto;
+}
+
 @media screen and (min-width: 350px) and (max-width: 996px) {
   .main {
     height: 165vh;
   }
+
+  .row {
+    flex-direction: column;
+  }
 }
 
 @media screen and (min-width: 760px) and (max-width: 996px) {
@@ -72,7 +83,7 @@
 }
 
 @media screen and (max-width: 320px) {
-  .main {
-    height: 200vh;
+  .row {
+    flex-direction: column;
   }
 }