feat: add notes to project section and improve styling for better visibility

Author: jkyberneees

index.html

@@ -138,6 +138,10 @@ <h3>Modular Design</h3>
           <div class="section-header">
             <h2>The Ecosystem</h2>
             <p>Powerful tools for your next big project</p>
+            <p class="section-note">
+              Showcasing a selection of our open-source projects — explore the full collection on our GitHub
+              organization.
+            </p>
           </div>
 
           <div class="projects-grid">
@@ -1904,12 +1908,16 @@ <h3>k-number-utils</h3>
           </div>
 
           <div class="projects-cta">
+            <p class="cta-note">
+              This is just a subset of our work. Discover more libraries, tools, and experiments in our GitHub
+              organization.
+            </p>
             <a
               href="https://github.com/BackendStack21"
               class="btn btn-primary"
               target="_blank"
               rel="noopener noreferrer"
-              >Explore the Organization in Github</a
+              >Explore All Projects on GitHub</a
             >
           </div>
         </div>

styles.css

@@ -533,6 +533,14 @@ ul {
   font-size: 18px;
 }
 
+.section-note {
+  color: var(--text-muted);
+  font-size: 14px;
+  margin-top: 12px;
+  font-style: italic;
+  opacity: 0.8;
+}
+
 .projects-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
@@ -637,8 +645,18 @@ ul {
 
 .projects-cta {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
   margin-top: 40px;
+  gap: 16px;
+}
+
+.cta-note {
+  color: var(--text-muted);
+  font-size: 15px;
+  text-align: center;
+  max-width: 500px;
 }
 
 /* Code Preview */