Update hero section and button styling: Improve layout, fix description styling, and refactor buttons

Author: MohdMuslim92

content/contents.lr

@@ -9,24 +9,18 @@ title:
 
 We have been building <span class="has-text-forest-green">free software</span> at <span class="has-text-gold">Creative Commons</span> for over a decade.
 ----
-description:
-
-We work on code and products that support digital creativity and sharing, from usability of our legal tools to enabling discovery of CC-licensed content.
-----
 links:
 
-<!-- Container for the hero section links -->
+<p class="hero-description">We work on code and products that support digital creativity and sharing, from usability of our legal tools to enabling discovery of CC-licensed content.</p>
 <div class="hero-links">
   <!-- Button linking to the developer community page -->
   <a class="button small is-success row" href="/community">
     Join the Developer Community
   </a>
+</div>
 
-  <!-- Informational text about the purpose of the site -->
-  <div class = "hero-notice">
-    This site is for developers looking to contribute, but anyone can use CC tools to share their works.
-  </div>
-
+<p class="hero-description">This site is for developers looking to contribute, but anyone can use CC tools to share their works.</p>
+<div class="hero-links">
   <!-- Button linking to the Creative Commons "Share your work" page -->
   <a class="button small row" href="https://creativecommons.org/share-your-work/">
     Share your work using our licenses/tools

themes/vocabulary_theme/templates/blocks/hero.html

@@ -7,9 +7,6 @@ <h1>
     </div>
     <div class="columns margin-right-0">
       <div class="column is-5">
-        <p class="hero-description">
-          {{ this.description }}
-        </p>
         {{ this.links }}
       </div>
     </div>

webpack/sass/home-page.scss

@@ -19,24 +19,18 @@
     @extend .margin-vertical-normal;
     @extend .padding-horizontal-big;
 
-    .hero-notice {
-      @extend .body-bigger;
-      @extend .padding-top-normal;
-      @extend .has-text-dark-slate-gray;
-    }
-
     // Button styling within the hero links
     .button {
       @extend .margin-top-normal;
       text-decoration: none;
-      display: inline-block;          /* Allow the button to wrap around the text */
-      width: 100%;           // Full width of the container
-      height: fit-content;  // Fit the content within the button
-      max-width: 300px;     // Maximum width for buttons
+      display: inline-block;  // Allow the button to wrap around the text
+      width: 100%;            // Full width of the container
+      height: fit-content;    // Fit the content within the button
+      max-width: 300px;       // Maximum width for buttons
       box-sizing: border-box; // Include padding in width calculation
-      text-align: center;    // Center text inside buttons
-      line-height: 1.2;     // Set line height for readability
-      white-space: normal;   // Allow text wrapping within buttons
+      text-align: center;     // Center text inside buttons
+      line-height: 1.2;       // Set line height for readability
+      white-space: normal;    // Allow text wrapping within buttons
     }
   }