Add client reviews section with freelance stats and 5 testimonials

Author: shahidghafoor00

index.html

@@ -22,6 +22,7 @@
     <li><a href="#about">About</a></li>
     <li><a href="#services">Services</a></li>
     <li><a href="#portfolio">Portfolio</a></li>
+    <li><a href="#reviews">Reviews</a></li>
     <li><a href="#team">Team</a></li>
     <li><a href="#contact" class="nav-cta">Contact Us</a></li>
   </ul>
@@ -208,6 +209,108 @@ <h3 style="font-size:1rem;color:#999;font-weight:600;">More Projects Coming Soon
   </div>
 </section>
 
+<!-- ── REVIEWS ── -->
+<section id="reviews">
+  <div class="section-inner">
+    <div class="reviews-header fade-up">
+      <span class="section-tag">Client Reviews</span>
+      <h2 class="section-title">Trusted by clients worldwide</h2>
+      <p class="section-subtitle">Real feedback from real clients across Freelancer and Upwork.</p>
+    </div>
+
+    <!-- Stats bar -->
+    <div class="reviews-stats fade-up">
+      <div class="rs-item">
+        <div class="rs-num">520+</div>
+        <div class="rs-label">Projects Completed</div>
+      </div>
+      <div class="rs-divider"></div>
+      <div class="rs-item">
+        <div class="rs-num">4.9 ★</div>
+        <div class="rs-label">Overall Rating</div>
+      </div>
+      <div class="rs-divider"></div>
+      <div class="rs-item">
+        <div class="rs-num">Freelancer</div>
+        <div class="rs-label">Platform</div>
+      </div>
+      <div class="rs-divider"></div>
+      <div class="rs-item">
+        <div class="rs-num">Upwork</div>
+        <div class="rs-label">Platform</div>
+      </div>
+    </div>
+
+    <!-- Review cards -->
+    <div class="reviews-grid">
+      <div class="review-card fade-up">
+        <div class="review-top">
+          <div class="review-avatar">SA</div>
+          <div class="review-meta">
+            <div class="review-name">Sarmad A. <span class="review-flag">🇺🇸</span></div>
+            <div class="review-stars">★★★★★ <span>5.0</span></div>
+          </div>
+          <div class="review-time">8 months ago</div>
+        </div>
+        <div class="review-project">Hardware user manual to Android App</div>
+        <p class="review-text">"Good independant work by freelancer on our App"</p>
+      </div>
+
+      <div class="review-card fade-up">
+        <div class="review-top">
+          <div class="review-avatar">CD</div>
+          <div class="review-meta">
+            <div class="review-name">Cyril D. <span class="review-flag">🇫🇷</span></div>
+            <div class="review-stars">★★★★★ <span>5.0</span></div>
+          </div>
+          <div class="review-time">8 months ago</div>
+        </div>
+        <div class="review-project">Aircraft Technician Log App Development</div>
+        <p class="review-text">"Omer is a great developer who have a lot of knowledges. Really good communication, patient and always answering my questions. Do not hesitate to have a project with him."</p>
+      </div>
+
+      <div class="review-card fade-up">
+        <div class="review-top">
+          <div class="review-avatar">SE</div>
+          <div class="review-meta">
+            <div class="review-name">Steven E. <span class="review-flag">🇺🇸</span></div>
+            <div class="review-stars">★★★★★ <span>5.0</span></div>
+          </div>
+          <div class="review-time">10 months ago</div>
+        </div>
+        <div class="review-project">Gate Code Access System Development</div>
+        <p class="review-text">"Omer was thorough, creative, and patient. He did excellent work and delivered exactly what I needed. I highly recommend Omer."</p>
+      </div>
+
+      <div class="review-card fade-up">
+        <div class="review-top">
+          <div class="review-avatar">OP</div>
+          <div class="review-meta">
+            <div class="review-name">Onno P. <span class="review-flag">🇳🇱</span></div>
+            <div class="review-stars">★★★★★ <span>5.0</span></div>
+          </div>
+          <div class="review-time">10 months ago</div>
+        </div>
+        <div class="review-project">Flutter Web App to iOS & Android</div>
+        <p class="review-text">"Omer did an outstanding job, converting this Flutter web application to iOS and Android apps, and also published the apps to the stores."</p>
+      </div>
+
+      <div class="review-card fade-up">
+        <div class="review-top">
+          <div class="review-avatar">JP</div>
+          <div class="review-meta">
+            <div class="review-name">Julian P. <span class="review-flag">🇨🇦</span></div>
+            <div class="review-stars">★★★★★ <span>5.0</span></div>
+          </div>
+          <div class="review-time">2 years ago</div>
+        </div>
+        <div class="review-project">Workflow Automation for JDN Server & DocuSign</div>
+        <p class="review-text">"Always easy to work with Omer, he provides great feedback and has helpful suggestions."</p>
+      </div>
+    </div>
+  </div>
+</section>
+
 <!-- ── TEAM ── -->
 <section id="team">
   <div class="section-inner">

styles.css

@@ -363,6 +363,73 @@ section { padding: 6rem 5%; }
 .p-stat-num { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
 .p-stat-label { font-size: 0.7rem; color: var(--gray-400); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
 
+/* ── REVIEWS ── */
+#reviews { background: var(--white); }
+.reviews-header { margin-bottom: 2.5rem; }
+
+.reviews-stats {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  background: var(--black);
+  border-radius: 12px;
+  padding: 2rem 3rem;
+  margin-bottom: 3rem;
+  flex-wrap: wrap;
+}
+.rs-item { text-align: center; padding: 0 2.5rem; }
+.rs-num { font-size: 1.6rem; font-weight: 800; color: var(--white); letter-spacing: -0.03em; }
+.rs-label { font-size: 0.7rem; color: #666; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-top: 0.2rem; }
+.rs-divider { width: 1px; height: 40px; background: #222; flex-shrink: 0; }
+
+.reviews-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.review-card {
+  padding: 1.75rem;
+  border: 1.5px solid var(--gray-200);
+  border-radius: 10px;
+  transition: var(--transition);
+}
+.review-card:hover { border-color: var(--black); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.07); }
+
+.review-top { display: flex; align-items: flex-start; gap: 0.875rem; margin-bottom: 1rem; }
+
+.review-avatar {
+  width: 44px; height: 44px;
+  border-radius: 50%;
+  background: var(--black);
+  color: var(--white);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.8rem;
+  font-weight: 700;
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
+}
+
+.review-meta { flex: 1; }
+.review-name { font-size: 0.9rem; font-weight: 700; }
+.review-flag { font-size: 0.85rem; }
+.review-stars { font-size: 0.8rem; color: #f59e0b; margin-top: 0.1rem; }
+.review-stars span { color: var(--gray-600); font-size: 0.75rem; }
+
+.review-time { font-size: 0.72rem; color: var(--gray-400); white-space: nowrap; flex-shrink: 0; }
+
+.review-project {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--gray-600);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.6rem;
+}
+
+.review-text { font-size: 0.875rem; color: var(--gray-600); line-height: 1.65; font-style: italic; }
+
 /* ── TEAM ── */
 #team { background: var(--white); }