update hero, add new logo, update styling, update footer

Author: Serhii Prykhozhyi

client/src/views/lander.js

@@ -9,10 +9,17 @@ const LandingPage = ({ t, ...S }) => layout(
   <div className="blur-orange"></div>
   <div className="blur-green"></div>
     <div className="hero-section">
-      <div className="container text-center">
-        <h1 className="font-h1">Powering Bitcoin and Liquid Applications with Real-Time Blockchain Data</h1>
-        <p className="font-p1 text-gray">Built to simplify development and enhance performance for existing Bitcoin and Liquid applications, the Blockstream Explorer API offers faster address lookups, robust DoS protection, and seamless integration.</p>
-        <a href="https://blockstream.com/explorerbeta" target="_blank" className="g-btn primary-btn">JOIN THE OPEN BETA</a>
+      <div className="container">
+        <div className="hero-wrapper">
+            <div className="hero-text">
+                <h1 className="font-h1">Powering Bitcoin and Liquid Applications with Real-Time Blockchain Data</h1>
+                <p className="font-p1 text-gray">Built to simplify development and enhance performance for existing Bitcoin and Liquid applications, the Blockstream Explorer API offers faster address lookups, robust DoS protection, and seamless integration.</p>
+                <a href="https://blockstream.com/explorerbeta" target="_blank" className="g-btn primary-btn">JOIN THE OPEN BETA</a>
+            </div>
+            <div className="hero-image">
+                <img src={`${staticRoot}img/hero-explorer-api.png`} alt="Hero Image" />
+            </div>
+        </div>
       </div>
     </div>
 
@@ -164,7 +171,7 @@ const LandingPage = ({ t, ...S }) => layout(
                                 <span className="currency">$</span>
                                 <span className="amount">4,000</span>
                             </div>
-                            <div className="pricing-table-description">Above 60M Requests Unlimited Usage</div>
+                            <div className="pricing-table-description" style={{lineHeight: `15px`}}>Above 60M Requests Unlimited Usage</div>
                         </div>
                     </div>
                     <p className="font-p2 text-gray"><a href="mailto:[email protected]">Contact Support</a> now if you are looking for more tailored plans designed for high-volume and enterprise-grade applications.</p>

flavors/blockstream/config.env

@@ -1,5 +1,5 @@
 export SITE_DESC='Blockstream Explorer is an open source block explorer providing detailed blockchain data across Bitcoin, Testnet, and Liquid. Supports Tor and tracking-free.'
-export SITE_FOOTER='© 2024 Blockstream Corporation Inc. All rights reserved.'
+export SITE_FOOTER='© 2025 Blockstream Corporation Inc. All rights reserved.'
 export HEAD_HTML=\
 '<meta property="og:image" content="https://blockstream.info/img/social-sharing.png">'\
 '<meta name="twitter:image" content="https://blockstream.info/img/social-sharing.png">'\

flavors/blockstream/extras.css

@@ -1,6 +1,6 @@
 .navbar-brand::before {
   background: url(img/icons/explorer_logo.svg);
-  background-size: cover;
+  background-size: contain;
   width: 245px;
   margin: 0;
   background-repeat: no-repeat;
@@ -9,7 +9,7 @@
 .theme-light .navbar-brand::before {
   background: url(img/icons/explorer_dark_logo.svg);
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: contain;
   width: 245px;
   margin: 0;
 }
@@ -45,10 +45,18 @@
   }
 
   .theme-light .navbar-brand::before, .navbar-brand::before {
-    background: url(img/icons/blockstream-logo.png);
+    
     background-size: 54px 54px;
     width: 54px;
   }
+
+  .theme-light .navbar-brand::before {
+    background: url(img/icons/dark-logo-icon.svg);
+  }
+
+  .navbar-brand::before {
+    background: url(img/icons/light-logo-icon.svg);
+  }
 }
 
 

flavors/blockstream/www/img/icons/dark-logo-icon.svg

@@ -2958,7 +2958,7 @@ h3.table-title{
 }
 
 .hero-section {
-  margin-bottom: 65px;
+  margin-bottom: 100px;
   position: relative;
 
 }
@@ -2991,6 +2991,40 @@ h3.table-title{
   }
 }
 
+.hero-wrapper {
+  display: flex;
+  margin-top: 90px;
+}
+
+@media screen and (max-width: 820px) {
+  .hero-wrapper {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+}
+
+.hero-text {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+
+.hero-image {
+  width: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media screen and (max-width: 820px) {
+  .hero-text, .hero-image {width: 100%;}
+}
+
+.hero-image > img {
+  max-width: 390px;
+  width: 100%;
+}
+
 .hero-section h1 {
   margin: 20px 0 32px;
 }
@@ -3046,7 +3080,7 @@ h3.table-title{
   flex: 0 0 auto;
 }
 
-@media screen and (min-width: 821px) {
+@media screen and (min-width: 1141px) {
   .logos-desktop {
     display: block;
   }
@@ -3061,7 +3095,7 @@ h3.table-title{
   }
 }
 
-@media screen and (max-width: 820px) {
+@media screen and (max-width: 1140px) {
   .logos-desktop {
     display: none;
   }
@@ -3082,6 +3116,10 @@ h3.table-title{
   margin: 0 auto;
 }
 
+.info-section {
+  margin-bottom: 100px;
+}
+
 .info-section h2 {
   margin: 25px auto;
   max-width: 740px;
@@ -3235,8 +3273,10 @@ h3.table-title{
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
-  line-height: 36px; 
-  color: #B5BDC2;
+  line-height: 22px;
+  color: #fff;
+  font-family: "Inter", sans-serif;
+  letter-spacing: normal;
 }
 
 .pricing-card p {