From 811006500896cabea67ccb07e3955cd434645fcd Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Thu, 17 Oct 2024 09:54:32 -0700
Subject: [PATCH] update styles

---
 src/app/global.css                     |  5 +++++
 src/components/OnchainStore.tsx        |  2 +-
 src/components/OnchainStoreItem.tsx    |  2 +-
 src/components/OnchainStoreItems.tsx   |  2 +-
 src/components/OnchainStoreSummary.tsx | 28 +++++++++++++++++++++++++-
 5 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/app/global.css b/src/app/global.css
index 25fc7c7..4bb0c3b 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -59,3 +59,8 @@ ul {
 a {
   text-decoration: none;
 }
+
+.store-item:nth-child(1),
+.store-item:nth-child(2) {
+  border-bottom: 1px solid #e5e7eb;
+}
diff --git a/src/components/OnchainStore.tsx b/src/components/OnchainStore.tsx
index 69eb1e6..d478660 100644
--- a/src/components/OnchainStore.tsx
+++ b/src/components/OnchainStore.tsx
@@ -11,7 +11,7 @@ export default function OnchainStore() {
       <div className="flex h-full max-h-screen max-w-full flex-col font-sansMono">
         <Banner />
         <Navbar />
-        <main className="mx-auto flex max-w-5xl grow flex-col pt-20 pb-10">
+        <main className="mx-auto flex max-w-5xl grow flex-col pt-[5.75rem] pb-10">
           <div className="flex grow flex-col pb-10 md:flex-row">
             <OnchainStoreSummary />
             <OnchainStoreItems />
diff --git a/src/components/OnchainStoreItem.tsx b/src/components/OnchainStoreItem.tsx
index f0bb435..89e75a1 100644
--- a/src/components/OnchainStoreItem.tsx
+++ b/src/components/OnchainStoreItem.tsx
@@ -4,7 +4,7 @@ import QuantityInput from './QuantityInput';
 
 export default function OnchainStoreItem({ id, name, price, image }: Product) {
   return (
-    <div className="mx-auto flex h-full w-full flex-col border-r border-b p-4 sm:mx-0 lg:p-6">
+    <div className="store-item mx-auto flex w-full flex-col border-r p-4 sm:mx-0 lg:p-6">
       <div className="mb-1 flex items-start justify-between">
         <h2 className="font-regular text-xs">{name}</h2>
         <p className="font-regular text-xs">{price.toFixed(2)} USDC</p>
diff --git a/src/components/OnchainStoreItems.tsx b/src/components/OnchainStoreItems.tsx
index 3c9857d..28e66aa 100644
--- a/src/components/OnchainStoreItems.tsx
+++ b/src/components/OnchainStoreItems.tsx
@@ -6,7 +6,7 @@ export default function OnchainStoreItems() {
 
   return (
     <div className=" scroll mb-16 grow md:mb-0 ">
-      <div className="grid grid-cols-1 sm:grid-cols-2 ">
+      <div className="grid grid-cols-1 sm:grid-cols-2">
         {products?.map((item) => (
           <OnchainStoreItem {...item} key={item.id} />
         ))}
diff --git a/src/components/OnchainStoreSummary.tsx b/src/components/OnchainStoreSummary.tsx
index 5ae291d..321e9bb 100644
--- a/src/components/OnchainStoreSummary.tsx
+++ b/src/components/OnchainStoreSummary.tsx
@@ -1,6 +1,9 @@
+import { GITHUB_LINK, ONCHAINKIT_LINK } from 'src/links';
+import { ExternalLinkSvg } from 'src/svg/ExternalLinkSvg';
+
 export default function OnchainStoreSummary() {
   return (
-    <div className="flex flex-col justify-center border-gray-200 border-b p-4 py-10 md:w-1/3 md:border-r md:border-b-0 md:py-4 lg:border-r lg:p-8">
+    <div className="flex flex-col justify-center border-gray-200 border-b p-4 py-8 md:w-1/3 md:border-r md:border-b-0 md:py-4 lg:border-r lg:p-8 pb-22 lg:pb-22">
       <div className="space-y-4 text-left">
         <h2
           className="font-bold text-3xl leading-tight"
@@ -24,6 +27,29 @@ export default function OnchainStoreSummary() {
         <p className="text-sm leading-relaxed">
           We're updating the system so it's cheaper and faster.
         </p>
+        <p className="text-sm leading-relaxed font-bold pt-2">
+          BUILD YOUR ONCHAIN STORE
+        </p>
+        <a
+          href={GITHUB_LINK}
+          className="flex items-center cursor-pointer"
+          target="_blank"
+        >
+          <p className="text-sm leading-relaxed">FORK THIS TEMPLATE</p>
+          <span className="pl-1">
+            <ExternalLinkSvg />
+          </span>
+        </a>
+        <a
+          href={ONCHAINKIT_LINK}
+          className="flex items-center cursor-pointer"
+          target="_blank"
+        >
+          <p className="text-sm leading-relaxed">VIEW DOCS</p>
+          <span className="pl-1">
+            <ExternalLinkSvg />
+          </span>
+        </a>
       </div>
     </div>
   );