Refresh hero stats and testimonials copy

Author: imranhakeem

index.html

@@ -48,24 +48,21 @@ <h1 class="hero-title">
     </div>
     <div class="hero-visual">
       <div class="hero-card">
+        <div class="hero-card-header">
+          <span>Client results</span>
+          <strong>Proven delivery</strong>
+        </div>
         <div class="hero-stats">
           <div class="stat-item">
-            <div class="stat-num">8+</div>
-            <div class="stat-label">Services</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-num">1K+</div>
-            <div class="stat-label">App Downloads</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-num">4</div>
-            <div class="stat-label">Expert Engineers</div>
+            <div class="stat-num">520+</div>
+            <div class="stat-label">Projects Completed</div>
           </div>
           <div class="stat-item">
-            <div class="stat-num">🌍</div>
-            <div class="stat-label">Global Reach</div>
+            <div class="stat-num">4.9 <span class="stat-star">★</span></div>
+            <div class="stat-label">Overall Rating</div>
           </div>
         </div>
+        <div class="hero-card-note">Trusted across Freelancer and Upwork by clients around the world.</div>
       </div>
     </div>
   </div>
@@ -219,7 +216,7 @@ <h2 class="section-title">Trusted by clients worldwide</h2>
           <div class="review-time">8 months ago</div>
         </div>
         <div class="review-project">Aircraft Technician Log App Development</div>
-        <p class="review-text">"Codebase 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 them."</p>
+        <p class="review-text">"Codebase, as a company, is a great team of developers with a lot of knowledge. They communicate really well, are patient, and always answer my questions. Do not hesitate to start a project with them."</p>
       </div>
 
       <div class="review-card fade-up">

styles.css

@@ -153,32 +153,112 @@ nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
 }
 
 .hero-card {
-  background: var(--gray-100);
-  border-radius: 16px;
-  padding: 3rem;
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: 14px;
+  padding: 1.5rem;
   width: 100%;
-  max-width: 400px;
+  max-width: 420px;
   position: relative;
+  box-shadow: 0 22px 60px rgba(0,0,0,0.10);
+}
+
+.hero-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0));
+  pointer-events: none;
+}
+
+.hero-card-header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
+  padding-bottom: 0.9rem;
+  margin-bottom: 0.9rem;
+  border-bottom: 1px solid var(--gray-200);
 }
 
-.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+.hero-card-header span {
+  color: var(--gray-400);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
 
-.stat-item { text-align: center; }
+.hero-card-header strong {
+  color: var(--black);
+  font-size: 0.82rem;
+  font-weight: 700;
+  background: var(--black);
+  color: var(--white);
+  padding: 0.45rem 0.65rem;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.hero-stats {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.85rem;
+}
+
+.stat-item {
+  text-align: left;
+  background: var(--gray-100);
+  border: 1px solid var(--gray-200);
+  border-radius: 12px;
+  padding: 1.15rem;
+  min-height: 132px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
 .stat-num {
-  font-size: 2.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 2.9rem;
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1;
 }
+
+.stat-star {
+  color: #f5a400;
+  font-size: 1.25rem;
+  line-height: 1;
+  transform: translateY(-0.25rem);
+}
+
 .stat-label {
   font-size: 0.75rem;
   color: var(--gray-400);
-  font-weight: 500;
-  margin-top: 0.25rem;
+  font-weight: 700;
+  margin-top: 1rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
 }
 
+.hero-card-note {
+  position: relative;
+  margin-top: 0.9rem;
+  padding: 0.9rem 1rem;
+  background: var(--black);
+  border-radius: 10px;
+  color: var(--white);
+  font-weight: 500;
+  letter-spacing: 0;
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+
 /* ── SECTION COMMON ── */
 section { padding: 6rem 5%; }
 .section-inner { max-width: 1200px; margin: 0 auto; }