From b77a16233b32ef7b45dd77d643850831b96233c5 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Tue, 21 Nov 2023 14:56:53 +0900
Subject: [PATCH] Change sponsor cta on about page

---
 .../app/components/about/about.component.html | 15 +++++++---
 .../app/components/about/about.component.scss | 30 +++++++++++++++++++
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html
index c3f516fc7..c49ed8679 100644
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -33,11 +33,18 @@
   </video>
 
   <ng-container *ngIf="officialMempoolSpace">
-    <h3 class="mt-5">Sponsor the project</h3>
-    <div class="d-flex justify-content-center" style="max-width: 90%; margin: 35px auto 75px auto; column-gap: 15px">
-      <a href="/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button">Community</a>
-      <a href="/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button">Enterprise</a>
+  <div id="become-sponsor-container">
+    <div class="become-sponsor enterprise">
+      <p>If you're a business looking to integrate the Mempool explorer or API into your app—check out Mempool Enterprise®.</p>
+        <a href="/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button">Explore Mempool Enterprise®</a>
     </div>
+    <div class="become-sponsor community">
+      <p>For exclusive swag, your avatar on the mempool.space About page, and more—sign up to be a Community Sponsor.</p>
+        <a href="/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button">Become a Community Sponsor</a>
+      <!--<div class="d-flex justify-content-center" style="max-width: 90%; margin: 35px auto 75px auto; column-gap: 15px;">
+      </div>-->
+    </div>
+  </div>
   </ng-container>
 
   <div class="enterprise-sponsor" id="enterprise-sponsors">
diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss
index f7aa0b965..5b94bd0c6 100644
--- a/frontend/src/app/components/about/about.component.scss
+++ b/frontend/src/app/components/about/about.component.scss
@@ -246,3 +246,33 @@
   width: 64px;
   height: 64px;
 }
+
+#become-sponsor-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin: 68px auto;
+}
+
+.become-sponsor {
+  background-color: #1d1f31;
+  border-radius: 16px;
+  padding: 12px 20px;
+  width: 400px;
+  padding: 40px;
+}
+
+.become-sponsor a {
+  margin-top: 10px;
+}
+
+@media (max-width: 992px) {
+
+  #become-sponsor-container {
+    flex-wrap: wrap;
+  }
+
+}