Improve hero section styling with detailed comments

- Added comments to clarify the styling for the hero section, including title, description, and links.
- Improved button layout using flexbox, with comments explaining width, padding, and alignment choices.
- Enhanced readability by documenting key CSS properties for future maintainability.

Author: MohdMuslim92

webpack/sass/home-page.scss

@@ -2,24 +2,44 @@
 .hero {
   @extend .margin-top-large;
 
+  // Title styling within the hero section
   .hero-title {
     @extend .padding-horizontal-big;
   }
 
+  // Description styling within the hero section
   .hero-description {
     @extend .body-bigger;
     @extend .padding-top-big;
     @extend .padding-horizontal-big;
   }
 
+  // Links container within the hero section
   .hero-links {
     @extend .margin-vertical-normal;
     @extend .padding-horizontal-big;
 
+    // Use flexbox for layout
+    display: flex;
+    flex-direction: column; // Stack buttons vertically
+    align-items: center;    // Center-align the buttons
+
+    // Button styling within the hero links
     .button {
+      // Apply normal top margin from the defined style
       @extend .margin-top-normal;
-      text-decoration: none;
-
+      text-decoration: none; // Remove default underline from links
+      margin-bottom: 0.5rem; // Add spacing between buttons
+      width: 100%;           // Full width of the container
+      max-width: 300px;     // Maximum width for buttons
+      padding: 1rem;        // Padding inside buttons
+      box-sizing: border-box; // Include padding in width calculation
+      text-align: center;    // Center text inside buttons
+      font-size: 1em;       // Set font size
+      line-height: 1.2;     // Set line height for readability
+      white-space: normal;   // Allow text wrapping within buttons
+
+      // Icon styling within buttons
       .icon {
         @extend .margin-right-small;
         @extend .padding-vertical-smaller;