feat: features and snippets a bit more interactive

docs/build/datastore.md

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Datastore
 
-The Juno Datastore provides a convenient programming model for storing data on the blockchain, eliminating the need to write backend code. This allows for easy management of distributed, cross-user data.
+The Juno Datastore offers a simple key-value model, organized by collections containing documents, for storing data on the blockchain. It eliminates the need to write backend code, allowing easy management of distributed, cross-user data.
 
 :::note
 

docs/build/storage.md

@@ -4,7 +4,7 @@ sidebar_position: 3
 
 # Storage
 
-Juno Storage is designed for app developers who need to store and serve user-generated content, such as photos or videos.
+Juno Storage is designed for app developers who need to store and serve user-generated content, such as photos or files.
 
 It offers a powerful and cost-effective object storage solution on the blockchain.
 
@@ -18,7 +18,7 @@ To use Juno Storage's features, you must [install](../add-juno-to-an-app/setup)
 
 ## How does it work?
 
-Each [satellite] you create includes a "Storage" provider, which can store assets (images, documents, videos, etc.) that are automatically made available on the internet.
+Each [satellite] you create includes a "Storage" provider, which can store assets (images, documents, etc.) that are automatically made available on the internet.
 
 Assets are stored in "collections" and you can have as many collections as you wish.
 

src/components/Feature/styles.module.scss

@@ -1,44 +1,76 @@
 .container {
-  position: relative;
-  border: solid 4px var(--ifm-heading-color);
-  border-radius: 5px;
-  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+
+  justify-content: flex-start;
 }
 
 .title {
   display: flex;
   align-items: center;
   gap: 1rem;
 
-  margin-bottom: 1rem;
-  color: var(--ifm-heading-color);
+  margin-bottom: 0.45rem;
 
   svg {
     width: 28px;
     height: 28px;
   }
   h4 {
-    color: var(--ifm-font-color-base);
     margin: 0;
     font-size: 20px;
+    color: inherit;
   }
 }
 
 .text {
   margin: 0.5rem 0 0.25rem;
   line-height: 20px;
   font-size: 15px;
-  padding-bottom: 2rem;
+  font-family: var(--ifm-font-family-base);
+  font-weight: normal;
 }
 
 .link {
-  position: absolute;
-  bottom: 1rem;
-  left: 1rem;
+  font-size: var(--ifm-h6-font-size);
+  font-weight: 600;
+
+  pointer-events: all;
+
+  padding: 0.75rem 0 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:active {
+    a {
+      color: black;
+    }
+
+    &::after {
+      color: black;
+    }
+  }
+
+  html[data-theme="dark"] & {
+    &:hover,
+    &:active {
+      a {
+        color: white;
+      }
+
+      &::after {
+        color: white;
+      }
+    }
+  }
+
   &::after {
     display: inline-block;
     content: ">";
-    transform: translateY(2px);
+    transform: translateY(1px);
     color: var(--ifm-color-primary);
     margin-left: 0.5rem;
   }

src/components/Features/index.tsx

@@ -1,11 +1,4 @@
-import Link from "@docusaurus/Link";
-import Feature from "@site/src/components/Feature";
-import Analytics from "@site/static/icons/analytics.svg";
-import Authentication from "@site/static/icons/authentication.svg";
-import Datastore from "@site/static/icons/datastore.svg";
-import Functions from "@site/static/icons/functions.svg";
-import Hosting from "@site/static/icons/hosting.svg";
-import Storage from "@site/static/icons/storage.svg";
+import Snippets from "@site/src/components/Snippets";
 import CloudIllustration from "@site/static/img/cloud.svg";
 import styles from "./styles.module.scss";
 
@@ -25,73 +18,7 @@ export default function Features(): JSX.Element {
         </aside>
       </div>
 
-      <div className={styles.grid}>
-        <Feature
-          title="Authentication"
-          text="Ensure maximum security and privacy by using passwordless authentication. Securely and anonymously identify users."
-          link={
-            <Link to="/docs/build/authentication" className={styles.link}>
-              Learn more
-            </Link>
-          }
-          icon={<Authentication />}
-        />
-
-        <Feature
-          title="Datastore"
-          text="A simple and convenient programming model for storing data on the blockchain."
-          link={
-            <Link to="/docs/build/datastore" className={styles.link}>
-              Learn more
-            </Link>
-          }
-          icon={<Datastore />}
-        />
-
-        <Feature
-          title="Storage"
-          text="Easily store and serve user-generated content, such as files, photos, and videos, on Web3."
-          link={
-            <Link to="/docs/build/storage" className={styles.link}>
-              Learn more
-            </Link>
-          }
-          icon={<Storage />}
-        />
-
-        <Feature
-          title="Hosting"
-          text="Maintain your brand identity with a custom domain for your decentralized application."
-          link={
-            <Link to="/docs/build/hosting" className={styles.link}>
-              Learn more
-            </Link>
-          }
-          icon={<Hosting />}
-        />
-
-        <Feature
-          title="Functions"
-          text="Execute custom code in response to background events, extend Juno's smart contracts, and develop features that run on-chain."
-          link={
-            <Link to="/docs/build/functions" className={styles.link}>
-              Learn more
-            </Link>
-          }
-          icon={<Functions />}
-        />
-
-        <Feature
-          title="Analytics"
-          text="Gather valuable, anonymous user insights with a simple, lightweight, and open-source web analytics that do not use cookies."
-          link={
-            <Link to="/docs/build/analytics" className={styles.link}>
-              Learn more
-            </Link>
-          }
-          icon={<Analytics />}
-        />
-      </div>
+      <Snippets />
     </>
   );
 }

src/components/Features/styles.module.scss

@@ -1,13 +1,5 @@
-@use "../../mixins/grid";
 @use "../../mixins/fonts";
 
-.grid {
-  @include grid.columns;
-  --grid-gap: 3rem;
-
-  margin: 5rem 0 0;
-}
-
 .sub {
   display: flex;
   flex-direction: column;
@@ -64,12 +56,6 @@
   }
 }
 
-.link {
-  font-size: var(--ifm-h6-font-size);
-  font-weight: 600;
-  margin-top: auto;
-}
-
 .illustration {
   transform: scale(0.8);
 }