chore: updated the landing page view docs button and href link behavi…

…or. (coinbase#660)
roushou · Jun 21, 2024 · 0e9bd1b · 0e9bd1b
1 parent f5440ba
commit 0e9bd1b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/.changeset/slow-cameras-kneel.md b/.changeset/slow-cameras-kneel.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **chore**: Update the landing page View Docs button styling, title description, and href link behavior to always open in a new tab. By @cpcramer #660
diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx
@@ -28,10 +28,11 @@ import TokenSelector from '../components/TokenSelector';
 <div className="max-w-screen-xl mx-auto vp-doc relative px-[24px] mb-[26px] mt-0 md:px-0 md:mb-[64px]">
   <div className="mx-auto max-w-2xl">
     <div className="md:text-center flex flex-col gap-8 pt-48 pb-16">
-      <h1 className="text-center text-6xl md:text-9xl font-medium no-underline dark:text-white">OnchainKit</h1>
+      <h1 className="text-center text-6xl md:text-9xl font-medium no-underline dark:text-white tracking-[-0.1rem]">OnchainKit</h1>
       <div className="text-center text-xl md:text-3xl dark:text-white">
-        <p className="leading-7 md:leading-none">React components
-        and TypeScript utilities to help you build top-tier onchain apps.</p>
+        <p className="leading-7 md:leading-none">
+          React components and TypeScript utilities to help you build top-tier onchain apps.
+        </p>
       </div>
     </div>
     <div className="flex flex-col md:flex-row space-between items-center gap-6 w-full">
@@ -57,10 +58,8 @@ bun add @coinbase/onchainkit
 :::
 
       </div>
-      <a href="/getting-started" className="justify-self-end">
-        <button type="button" className="h-[42px] px-8 py-2 rounded-3xl border border-white justify-center items-center gap-2.5 inline-flex">
-          <div className="text-center text-xs font-medium leading-snug">View docs</div>
-        </button>
+      <a href="/getting-started" className="font-sans justify-self-end border rounded-xl border-solid border-white px-4 py-3 font-bold">
+        View docs 
       </a>
     </div>
 
@@ -268,7 +267,7 @@ setFilteredTokens(filteredTokens);
   </p>
   <aside className="flex flex-col pt-10 md:flex-row md:px-2">
     <div>
-      <a href="https://www.figma.com/community/file/1370194397345450683">
+      <a href="https://www.figma.com/community/file/1370194397345450683" target="_blank">
         <p>Figma - How to use</p>
         <img
           alt="OnchainKit logo vibes"
@@ -278,7 +277,7 @@ setFilteredTokens(filteredTokens);
       </a>
     </div>
     <div>
-      <a href="https://www.figma.com/community/file/1370194397345450683">
+      <a href="https://www.figma.com/community/file/1370194397345450683" target="_blank">
         <p>Figma - Components</p>
         <img
           alt="OnchainKit logo vibes"

diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -10,6 +10,9 @@ export default {
   important: true,
   safelist: ['dark'],
   theme: {
+    fontFamily: {
+      sans: ['Inter', 'sans-serif'],
+    },
     extend: {
       fontFamily: {
         display: 'DM Sans, sans-serif',