From 5cefd37db6054956842f286286685e4d537963fe Mon Sep 17 00:00:00 2001
From: Dcodder33 <142101504+Dcodder33@users.noreply.github.com>
Date: Thu, 19 Jun 2025 20:54:37 +0530
Subject: [PATCH] add "Featured Writers" section to showcase contributors

- Added a new section after "Evaluation Criteria" to highlight past writers
- Includes responsive cards with placeholder content for:
  - Writer profile images
  - Names/roles
  - Testimonials
  - Article links
- Uses inline styling for quick integration (can be refactored later)
---
 index.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/index.html b/index.html
index f20f05f..43b2eb1 100755
--- a/index.html
+++ b/index.html
@@ -659,6 +659,62 @@ <h2 id="process-section-title" style="text-align: center; font-size: 6.3rem; col
           </div>
         </section>
 
+                    <!-- ==================== Featured Writers Section ==================== -->
+<section id="featured-writers" style="padding: 8rem 0; background: #f8f9fa;" data-aos="fade-up">
+  <div class="row section-header">
+    <div class="col-full">
+      <h1 class="display-2" style="color: #00163D; font-weight: 800; text-align: center;">
+        Featured Writers
+      </h1>
+      <p style="text-align: center; font-size: 2rem; color: #555;">
+        Meet the talented writers who’ve contributed to Keploy’s community!
+      </p>
+    </div>
+  </div>
+
+  <!-- Writers Grid -->
+  <div class="row" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; padding: 2rem;">
+    <!-- Writer Card 1 -->
+    <div class="writer-card" style="background: white; border-radius: 10px; padding: 2rem; width: 300px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+      <div style="text-align: center;">
+        <img src="https://via.placeholder.com/100" alt="Writer Name" style="border-radius: 50%; width: 100px; height: 100px; object-fit: cover;">
+        <h3 style="margin-top: 1rem; color: #00163D;">Jane Doe</h3>
+        <p style="color: #E35134; font-weight: bold;">Backend Developer</p>
+      </div>
+      <p style="text-align: center; color: #555; font-size: 1.5rem;">
+        "Keploy helped me automate API testing effortlessly. Loved writing about it!"
+      </p>
+      <a href="#" style="display: block; text-align: center; color: #E35134; font-weight: bold; margin-top: 1rem;">Read Article →</a>
+    </div>
+
+    <!-- Writer Card 2 -->
+    <div class="writer-card" style="background: white; border-radius: 10px; padding: 2rem; width: 300px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+      <div style="text-align: center;">
+        <img src="https://via.placeholder.com/100" alt="Writer Name" style="border-radius: 50%; width: 100px; height: 100px; object-fit: cover;">
+        <h3 style="margin-top: 1rem; color: #00163D;">John Smith</h3>
+        <p style="color: #E35134; font-weight: bold;">DevOps Engineer</p>
+      </div>
+      <p style="text-align: center; color: #555; font-size: 1.5rem;">
+        "The Writers Program gave me a platform to share my CI/CD insights."
+      </p>
+      <a href="#" style="display: block; text-align: center; color: #E35134; font-weight: bold; margin-top: 1rem;">Read Article →</a>
+    </div>
+
+    <!-- Writer Card 3 -->
+    <div class="writer-card" style="background: white; border-radius: 10px; padding: 2rem; width: 300px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+      <div style="text-align: center;">
+        <img src="https://via.placeholder.com/100" alt="Writer Name" style="border-radius: 50%; width: 100px; height: 100px; object-fit: cover;">
+        <h3 style="margin-top: 1rem; color: #00163D;">Alex Lee</h3>
+        <p style="color: #E35134; font-weight: bold;">QA Specialist</p>
+      </div>
+      <p style="text-align: center; color: #555; font-size: 1.5rem;">
+        "My testing workflow improved 10x after using Keploy. Great community!"
+      </p>
+      <a href="#" style="display: block; text-align: center; color: #E35134; font-weight: bold; margin-top: 1rem;">Read Article →</a>
+    </div>
+  </div>
+</section>
+
 
         <!-- <section id="necessity">