add featured content (#325)

* add featured content * Fix format * Updated related projects ui * Improved for mobile * fix format --------- Co-authored-by: Santiago Pittella <[email protected]> Co-authored-by: Gonzalo Torres <[email protected]>
lambdaclass · Oct 6, 2023 · cd88ea2 · cd88ea2
1 parent 5a0cc08
commit cd88ea2
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 5 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -33,6 +33,9 @@ h2 {
   @apply font-ibm-plex text-2xl lg:mb-6;
 }
 
+a{
+  @apply text-hover-link;
+}
 a,
 .copy-btn {
   @apply cursor-pointer;
@@ -257,6 +260,9 @@ main .option {
   @apply border-r-brand;
 }
 
+.subtitle{
+  @apply text-lg mb-4 border-b-2 border-se-inner-border pb-1;
+}
 #nav-right-side > div:first-child{
   @apply w-full;
 }

diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -26,7 +26,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
     </div>
     <div class="mx-auto max-w-7xl mt-4 mb-5">
       <div class="flex justify-between">
-        <div class="relative inline-flex items-start gap-3 bg-container p-3 pr-4 text-sm mb-6">
+        <div class="relative inline-flex items-start gap-3 bg-container p-3 pr-4 text-sm mb-6 rounded-lg overflow-hidden">
           <img src={~p"/images/zap.svg"} class="my-auto" />
           <div class="flex">
             <div class="flex items-center gap-2 border-r border-r-gray-700 pr-2 mr-2">
@@ -64,7 +64,10 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
         </div>
       </div>
       <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <a href={Utils.network_path(@network, "blocks")} class="bg-container text-gray-100">
+        <a
+          href={Utils.network_path(@network, "blocks")}
+          class="bg-container text-gray-100 rounded-lg overflow-hidden"
+        >
           <div class="relative bg-container">
             <div class="flex items-start gap-6 my-4 mx-8">
               <img src={~p"/images/box.svg"} class="my-auto w-6 h-auto" />
@@ -79,7 +82,10 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             </div>
           </div>
         </a>
-        <a href={Utils.network_path(@network, "messages")} class="bg-container text-gray-100">
+        <a
+          href={Utils.network_path(@network, "messages")}
+          class="bg-container text-gray-100 rounded-lg overflow-hidden"
+        >
           <div class="reative bg-container">
             <div class="flex items-start gap-6 my-4 mx-8">
               <img src={~p"/images/message-square.svg"} class="my-auto w-6 h-auto" />
@@ -94,7 +100,10 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             </div>
           </div>
         </a>
-        <a href={Utils.network_path(@network, "events")} class="bg-container text-gray-100">
+        <a
+          href={Utils.network_path(@network, "events")}
+          class="bg-container text-gray-100 rounded-lg overflow-hidden"
+        >
           <div class="reative bg-container">
             <div class="flex items-start gap-6 my-4 mx-8">
               <img src={~p"/images/calendar.svg"} class="my-auto w-6 h-auto" />
@@ -109,7 +118,10 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
             </div>
           </div>
         </a>
-        <a href={Utils.network_path(@network, "transactions")} class="bg-container text-gray-100">
+        <a
+          href={Utils.network_path(@network, "transactions")}
+          class="bg-container text-gray-100 rounded-lg overflow-hidden"
+        >
           <div class="reative bg-container">
             <div class="flex items-start gap-6 my-4 mx-8">
               <img src={~p"/images/corner-up-right.svg"} class="my-auto w-6 h-auto" />
@@ -247,6 +259,41 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
         </div>
       </div>
     </div>
+
+    <div class="mx-auto max-w-7xl mt-16">
+      <div class="table-title">Related projects</div>
+      <div class="mx-auto max-w-7xl grid lg:grid-cols-3 gap-5 lg:gap-7 mt-6 lg:mt-4">
+        <div class="pt-5 pb-6 px-6 text-white rounded-lg transition bg-container hover:bg-se-inner-bg border border-dashed border-se-inner-border">
+          <div class="subtitle">
+            Read our blog
+          </div>
+          <div>
+            <a href="https://blog.lambdaclass.com">https://blog.lambdaclass.com</a>
+          </div>
+        </div>
+        <div class="pt-5 pb-6 px-6 text-white rounded-lg transition bg-container hover:bg-se-inner-bg border border-dashed border-se-inner-border">
+          <div class="subtitle">
+            YAS
+          </div>
+          <div>
+            YAS is Yet Another Swap on Starknet but bringing the best prices and yield to Degens.
+          </div>
+          <div>
+            <a class="inline-block mt-3">
+              https://www.yetanotherswap.com
+            </a>
+          </div>
+        </div>
+        <div class="pt-5 pb-6 px-6 text-white rounded-lg transition bg-container hover:bg-se-inner-bg border border-dashed border-se-inner-border">
+          <div class="subtitle">
+            Follow LambdaStarknet on twitter
+          </div>
+          <a>
+            https://twitter.com/LambdaStarknet
+          </a>
+        </div>
+      </div>
+    </div>
     """
   end