[DO NOT MERGE] Landing page update proposal

site/docs/styles.css

@@ -73,6 +73,8 @@
 
 #home-install .vocs_Code {
   font-size: 14px;
+  background-color: #1F2937 !important;
+  border-color: #1F2937 !important;
 }
 
 @media (max-width: 768px) {
@@ -82,33 +84,6 @@
   }
 }
 
-.css-blurry-gradient {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, 0%);
-  width: 500px;
-  height: 500px;
-  border-radius: 50% 22% 40% 80%;
-  filter: blur(70px);
-  background: radial-gradient(circle at 50% 50%, #818CF8, #818CF8);
-  opacity: 0.6;
-}
-
-@media (max-width: 468px) {
-  .css-blurry-gradient {
-    display: none;
-  }
-  .css-blurry-gradient-mobile {
-    display: block;
-  }
-}
-
-.dark .css-blurry-gradient {
-  background: radial-gradient(circle at 50% 50%, #6f79c5, #6f79c5);
-  opacity: 0.2;
-}
-
 .pane {
   background: white;
 }
@@ -142,15 +117,15 @@
 
 .dark {
   .css-main-container {
-    background-color: #0e121d;
+    background-color: #030712;
   }
 }
 
 .css-alternate-container {
   background-color: white;
 }
 .dark .css-alternate-container {
-  background-color: #030713;
+  background-color: #030712;
 }
 
 .landing-page-hero .vocs_Paragraph {

site/sidebar.ts

@@ -2,8 +2,15 @@ import type { Sidebar } from 'vocs';
 
 export const sidebar = [
   {
-    text: 'Introduction',
-    items: [{ text: 'Getting Started', link: '/getting-started' }],
+    text: 'OnchainKit',
+    items: [
+      { text: 'Introduction', 
+        link: '/introduction', 
+      },
+      { text: 'Getting Started', 
+        link: '/getting-started', 
+      },
+    ],
   },
   {
     text: 'Guides',
@@ -26,6 +33,23 @@ export const sidebar = [
       },
     ],
   },
+  {
+    text: 'Templates',
+    items: [
+      {
+        text: 'Quick start app',
+        link: 'https://github.com/coinbase/onchain-app-template',
+      },
+      {
+        text: 'Community one-page',
+        link: 'https://github.com/fakepixels/token-machine',
+      },
+      {
+        text: 'Frame',
+        link: 'https://github.com/Zizzamia/a-frame-in-100-lines',
+      },
+    ],
+  },
   {
     text: 'Components',
     items: [
@@ -217,4 +241,19 @@ export const sidebar = [
       },
     ]
   },
+  {
+    text: 'Design Resources',
+    collapsed: true,
+    items: [
+      { text: 'Figma UI Kit', 
+        link: 'https://www.figma.com/community/file/1370194397345450683/onchainkit', 
+      },
+    ],
+  },
+  { text: 'Terms of Service', 
+    link: 'https://www.coinbase.com/legal/cloud/terms-of-service', 
+  },
+  { text: 'MIT License', 
+    link: 'https://github.com/coinbase/onchainkit/blob/main/LICENSE.mdc', 
+  },
 ] as const satisfies Sidebar;