feat: add testimonials section

This commit is contained in:
2026-01-09 17:35:15 -08:00
parent 72cc46129e
commit 072ccc0034
+124
View File
@@ -499,6 +499,78 @@
height: 60px;
}
}
/* Testimonials preview styles */
.testimonials-preview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.testimonial-card {
background: white;
border: 2px solid #e0e0e0;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
border-color: #5865F2;
}
.testimonial-text {
flex-grow: 1;
font-style: italic;
color: #333;
margin-bottom: 1rem;
line-height: 1.6;
}
.testimonial-author {
font-weight: bold;
color: #1a1a1a;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid #f0f0f0;
}
.testimonial-role {
font-size: 0.9rem;
color: #666;
font-weight: normal;
font-style: normal;
}
html.is-dark .testimonial-card {
background: #1e1e1e;
border-color: #404040;
}
html.is-dark .testimonial-text {
color: var(--foreground);
}
html.is-dark .testimonial-author {
color: var(--foreground);
border-top-color: #404040;
}
html.is-dark .testimonial-role {
color: var(--foreground);
}
@media (max-width: 768px) {
.testimonials-preview {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
@@ -759,6 +831,58 @@
</p>
</section>
<!-- Client Feedback Preview -->
<section class="card fade-in" role="region" aria-labelledby="client-feedback">
<h2 id="client-feedback" style="margin-top: 0; text-align: center;">What Clients Say</h2>
<p style="text-align: center; margin-bottom: 2rem;">
Here's what people have shared about working with us:
</p>
<div class="testimonials-preview">
<div class="testimonial-card">
<div class="testimonial-text">
"You could ask her for help solving anything and she'd whip up a whole plan in her head in 30 seconds."
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
"Everything she delivered was secure, scalable, and polished to perfection."
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
"The system 'just works', you don't have to think about how or why which is always a great quality in an internal tool."
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
"Her ability to learn absolutely anything... allows her to find a problem, tackle it quickly, and resolve it - even if she didn't have prior knowledge of the issue."
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
"There is no one else that could even remotely match her level of talent."
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
"She was the glue that held so many parts of our operation together."
</div>
</div>
</div>
<p style="text-align: center; margin-top: 2rem;">
<a href="https://testimonials.nhcarrigan.com" target="_blank" class="cta-button" aria-label="View all client testimonials" rel="noopener noreferrer">
<i class="fas fa-quote-left" aria-hidden="true"></i> Read All Testimonials
</a>
</p>
</section>
<!-- Join Our Community - Prominent CTA -->
<section class="card fade-in" style="background: #f8f9fa; border-color: #5865F2; border-width: 3px;" role="region" aria-labelledby="join-community">
<h2 id="join-community" style="margin-top: 0;">Join Our Community</h2>