From 9e4475c9c9ba057439dcb657c619b9b970fdfc59 Mon Sep 17 00:00:00 2001
From: Patrice Chalin <chalin@users.noreply.github.com>
Date: Fri, 13 Dec 2024 10:53:13 -0500
Subject: [PATCH] [docsy] Rework CTAs and feature ribbon

Signed-off-by: Patrice Chalin <chalin@users.noreply.github.com>
---
 assets/scss/_styles_project.scss | 10 +++++++
 content/en/_index.md             | 47 ++++++++++++++++----------------
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index b31a9a2..80996e7 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -14,6 +14,16 @@
     max-height: 12rem;
   }
 
+  .cta {
+    a {
+      @extend .btn-lg;
+      @extend .mt-2; // For when btns stack on mobile
+    }
+    a:not(:last-child) {
+      @extend .me-3;
+    }
+  }
+
   .cncf {
     text-align: center;
 
diff --git a/content/en/_index.md b/content/en/_index.md
index b3748eb..9e2b937 100644
--- a/content/en/_index.md
+++ b/content/en/_index.md
@@ -7,22 +7,16 @@ description: A framework to secure the integrity of software supply chains
 
 <img src="/img/in-toto-horizontal-white.svg" alt="in-toto" class="in-toto-logo">
 
-<!-- prettier-ignore -->
+<!-- prettier-ignore-start -->
 {{% param description %}}
-{.display-6}
+{.display-6 .mb-5}
 
-<div class="p-initial mt-5">
-<a class="btn btn-lg btn-primary me-3" href="docs/what-is-in-toto/">Learn
-More</a>
-<a class="btn btn-lg btn-primary me-3" href="https://github.com/in-toto/demo">Try
-the demo</a>
-<a class="btn btn-lg btn-primary" href="https://github.com/in-toto/friends">Explore
-integrations</a>
-</div>
+<a class="btn btn-primary" href="docs/what-is-in-toto/">Learn More</a>
+<a class="btn btn-secondary" href="docs/getting-started/">Get started</a>
+<a class="btn btn-primary" href="https://github.com/in-toto/demo">Try the demo</a>
+{.p-initial .cta}
 
-<div class="h3 mt-4">
-<a class="btn btn-lg btn-secondary" href="docs/getting-started/">Get started</i></a>
-</div>
+<!-- prettier-ignore-end -->
 
 {{% /blocks/cover %}}
 
@@ -34,21 +28,28 @@ integrations</a>
 
 {{% blocks/section color="dark" type="row" %}}
 
-{{% blocks/feature icon="fa-solid fa-lock" title="Software supply chain protection" url="/docs/" %}}
-
-Supply chain compromises are becoming a frequent occurrence. in-toto can help
-you protect your software supply chain.
-
-{{% /blocks/feature %}}
-
-{{% blocks/feature icon="fa-solid fa-book" title="Open, extensible standard" url="/docs/specs/" %}}
+{{% blocks/feature
+  title="Open, extensible standard"
+  url="/docs/specs/"
+  icon="fa-solid fa-book"
+%}}
 
 in-toto is an open metadata standard that you can implement in your software's
 supply chain toolchain.
 
-{{% /blocks/feature %}}
+{{% /blocks/feature %}} {{% blocks/feature
+  title="Adoptions and Integrations"
+  url="https://github.com/in-toto/friends"
+  icon="fa-solid fa-handshake-simple"
+%}}
+
+Explore integrations and adopters of in-toto.
 
-{{% blocks/feature icon="fa-solid fa-gear" title="Extensive tooling" url="https://github.com/in-toto" %}}
+{{% /blocks/feature %}} {{% blocks/feature
+  title="Extensive tooling"
+  url="https://github.com/in-toto"
+  icon="fa-solid fa-gear"
+%}}
 
 You can use in-toto today by using our Apache-licensed libraries and tools.