add testimonials section to homepage with first testimonial

Author: blackopsrepl

assets/scss/_styles_project.scss

@@ -277,6 +277,101 @@ code {
   border-color: $scale-pale transparent transparent transparent !important;
 }
 
+// Testimonial section (td-box--4) - darkest green for contrast
+.td-box--4 {
+  background-color: $scale-dark !important;
+  color: #ffffff !important;
+
+  h1, h2, h3, h4, h5, h6, p, li, td, th {
+    color: #ffffff !important;
+  }
+}
+
+// Testimonial card
+.testimonial-section {
+  max-width: 640px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.testimonial-heading {
+  font-size: 1.1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: rgba(255, 255, 255, 0.6) !important;
+  margin-bottom: 2.5rem;
+}
+
+.testimonial-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.testimonial-photo {
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid rgba(16, 185, 129, 0.4);
+  box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
+  margin-bottom: 1.75rem;
+}
+
+.testimonial-quote {
+  font-size: 1.25rem;
+  font-style: italic;
+  line-height: 1.7;
+  color: #e2e8f0 !important;
+  margin: 0 0 1.5rem 0;
+  padding: 0;
+  border: none;
+  position: relative;
+
+  &::before {
+    content: "\201C";
+    font-size: 3rem;
+    color: rgba(16, 185, 129, 0.4);
+    position: absolute;
+    top: -1.2rem;
+    left: -1.5rem;
+    font-style: normal;
+    line-height: 1;
+  }
+
+  &::after {
+    content: "\201D";
+    font-size: 3rem;
+    color: rgba(16, 185, 129, 0.4);
+    position: absolute;
+    bottom: -1.5rem;
+    right: -0.5rem;
+    font-style: normal;
+    line-height: 1;
+  }
+}
+
+.testimonial-author {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #ffffff !important;
+  margin-bottom: 0.25rem;
+}
+
+.testimonial-title {
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.testimonial-logo {
+  max-width: 160px;
+  height: auto;
+  margin-top: 1.5rem;
+  opacity: 0.7;
+  filter: brightness(1.5);
+}
+
 // Scroll down link button
 .td-link-down {
   display: block;

content/en/_index.md

@@ -78,3 +78,20 @@ let one_per_day = factory
 </div>
 
 {{% /blocks/section %}}
+
+{{% blocks/section %}}
+
+<div class="testimonial-section">
+  <h2 class="testimonial-heading">What people say</h2>
+  <div class="testimonial-card">
+    <img class="testimonial-photo" src="/images/testimonials/fawaz-halwani.jpeg" alt="Fawaz Halwani">
+    <blockquote class="testimonial-quote">
+      I have incorporated SolverForge in my new Rust application for staff scheduling and it's working like a charm, A+
+    </blockquote>
+    <div class="testimonial-author">Fawaz Halwani</div>
+    <div class="testimonial-title">Pathologist, The Ottawa Hospital</div>
+    <img class="testimonial-logo" src="/images/testimonials/ottawa-hospital.jpg" alt="The Ottawa Hospital">
+  </div>
+</div>
+
+{{% /blocks/section %}}