generated from nhcarrigan/template
feat: add client banners
This commit is contained in:
@@ -893,6 +893,54 @@
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
AVAILABILITY BANNER
|
||||
============================================ */
|
||||
.availability-banner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.availability-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--witch-moon);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.availability-item i {
|
||||
font-size: 1.2rem;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.availability-item:nth-child(2) i {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.availability-item:nth-child(3) i {
|
||||
color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.availability-item:nth-child(4) i {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.availability-banner {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Devicon for technology icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
|
||||
@@ -1439,6 +1487,28 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--
|
||||
MARK: Availability Banner
|
||||
-->
|
||||
<section class="availability-banner fade-in" role="region" aria-label="Availability information">
|
||||
<div class="availability-item">
|
||||
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
||||
<span><strong>Accepting New Clients</strong></span>
|
||||
</div>
|
||||
<div class="availability-item">
|
||||
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
||||
<span><strong>NDA Ready</strong> — Your project stays confidential</span>
|
||||
</div>
|
||||
<div class="availability-item">
|
||||
<i class="fas fa-clock" aria-hidden="true"></i>
|
||||
<span><strong>1-3 Business Days</strong> response time</span>
|
||||
</div>
|
||||
<div class="availability-item">
|
||||
<i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
|
||||
<span><strong>Custom Quotes</strong> available on request</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
MARK: Tech Stack
|
||||
-->
|
||||
@@ -2145,6 +2215,24 @@
|
||||
<p style="font-size: 1.1rem; max-width: 600px; margin: 0 auto 1.5rem;">
|
||||
Have a question, want to work together, or just want to say hello? Fill out the form below and we'll get back to you!
|
||||
</p>
|
||||
<div class="availability-banner" style="max-width: 680px; margin: 0 auto 1.5rem;">
|
||||
<div class="availability-item">
|
||||
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
||||
<span><strong>Accepting New Clients</strong></span>
|
||||
</div>
|
||||
<div class="availability-item">
|
||||
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
||||
<span><strong>NDA Ready</strong> — Your project stays confidential</span>
|
||||
</div>
|
||||
<div class="availability-item">
|
||||
<i class="fas fa-clock" aria-hidden="true"></i>
|
||||
<span><strong>1-3 Business Days</strong> response time</span>
|
||||
</div>
|
||||
<div class="availability-item">
|
||||
<i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
|
||||
<span><strong>Custom Quotes</strong> available on request</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; border-radius: 12px; background: var(--witch-moon); padding: 1rem; max-width: 680px; margin: 0 auto; height: 600px; overflow: hidden;">
|
||||
<iframe
|
||||
style="border: none; width: 100%; max-width: 640px; height: 100%;"
|
||||
|
||||
Reference in New Issue
Block a user