homepageBtn responsiveness fix

Author: shaileshthakur1

website/package.json

@@ -25,5 +25,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "docusaurus": "^1.14.7"
   }
 }

website/src/css/custom.css

@@ -34,10 +34,8 @@ main details {
 main details summary {
   margin-bottom: 1rem;
   outline: none;
-  /* Make it look like a link to notify user that it's clickable */
   text-decoration: underline;
 
-  /* Refer to #309 */
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -46,19 +44,48 @@ main details summary {
 
 main details summary:hover {
   cursor: pointer;
-  /* Hide the underline on hover */
   text-decoration: none;
 }
 main details:hover {
   border-color: var(--ifm-pagination-nav-color-hover);
 }
 
 .homePageBtns {
-  display: grid;
-  gap: 20px;
+  display: flex;
+  justify-content: center; 
+  gap: 20px; 
+  flex-wrap: wrap; 
 }
-@media (min-width: 480px) {
+
+.homePageBtns a {
+  padding: 10px 40px; 
+  border: 1px solid;
+  border-radius: 5px;
+  transition: all 0.3s ease;
+  min-width: 200px; 
+  text-align: center; 
+  display: inline-block;
+  white-space: nowrap; 
+}
+
+@media (max-width: 480px) {
   .homePageBtns {
-    grid-template-columns: 1fr 1fr;
+    flex-direction: column; 
+    align-items: center;
+  }
+
+  .homePageBtns a {
+    width: 100%;  
+    max-width: 300px;  
+    padding: 8px 18px; 
+    font-size: 12px; 
+  }
+}
+
+ 
+@media (min-width: 1024px) {
+  .homePageBtns a {
+    padding: 6px 180px;  
+    min-width: 250px;  
   }
 }

website/src/pages/index.js

@@ -24,7 +24,7 @@ export default function Home() {
               to={useBaseUrl(siteConfig.customFields.firstDoc)}
               className="button button--lg button--outline button--primary"
             >
-              Getting started
+              Getting Started
             </Link>
             <Link
               to={"https://discord.gg/wTGS5z9"}