generated from nhcarrigan/template
feat: add more sections and make it prettier #6
+124
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user