generated from nhcarrigan/template
feat: donation hero cta
This commit is contained in:
+76
-5
@@ -140,12 +140,18 @@
|
||||
.cta-button i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
text-align: center;
|
||||
margin: 2rem 0;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
|
||||
background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%) !important;
|
||||
border-radius: 16px;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
@@ -280,6 +286,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for fade-in */
|
||||
@keyframes fadeIn {
|
||||
@@ -570,6 +583,19 @@
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* Donation CTA card dark mode support */
|
||||
html.is-dark .card[style*="background: linear-gradient(135deg, #10b981"],
|
||||
html.is-dark .card[style*="background:linear-gradient(135deg, #10b981"] {
|
||||
background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
|
||||
border-color: #059669 !important;
|
||||
}
|
||||
|
||||
html.is-dark .card[style*="background: linear-gradient(135deg, #10b981"] .stat-card,
|
||||
html.is-dark .card[style*="background:linear-gradient(135deg, #10b981"] .stat-card {
|
||||
background: rgba(30, 30, 30, 0.95) !important;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.testimonials-preview {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -600,8 +626,9 @@
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="hero-grid">
|
||||
<!-- Hero CTA - Early conversion opportunity -->
|
||||
<section class="hero-cta fade-in" role="region" aria-label="Join our community">
|
||||
<section class="hero-cta fade-in card" role="region" aria-label="Join our community">
|
||||
<h2>Ready to Join an Amazing Community?</h2>
|
||||
<p style="font-size: 1.1rem; margin-bottom: 1.5rem;">
|
||||
Connect with developers, get mentorship, and be part of an inclusive tech community. No application needed - just click and join!
|
||||
@@ -609,11 +636,20 @@
|
||||
<a href="https://chat.nhcarrigan.com" target="_blank" class="cta-button" aria-label="Join our Discord community">
|
||||
<i class="fab fa-discord" aria-hidden="true"></i> Join Discord Community
|
||||
</a>
|
||||
<a href="https://donate.nhcarrigan.com" target="_blank" class="cta-button cta-button-donate" aria-label="Support NHCarrigan with a donation" rel="noopener noreferrer">
|
||||
<i class="fas fa-heart" aria-hidden="true"></i> Support Us
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<!-- Donation CTA - Compact version -->
|
||||
<section class="card fade-in" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: #10b981; border-width: 3px; text-align: center;" role="region" aria-label="Support our mission">
|
||||
<h2 style="margin-top: 0; color: white;">Support Our Mission</h2>
|
||||
<p style="color: white; font-size: 1rem; margin-bottom: 1.5rem;">
|
||||
Help us continue building inclusive tech communities. Your support keeps our 50+ products running and enables countless pro-bono services.
|
||||
</p>
|
||||
<a href="https://donate.nhcarrigan.com" target="_blank" class="cta-button" style="background: white; color: #10b981;" aria-label="Support NHCarrigan with a donation" rel="noopener noreferrer">
|
||||
<i class="fas fa-heart" aria-hidden="true"></i> Donate Now
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="fade-in" role="region" aria-labelledby="keep-reading">
|
||||
<p>Need to know more about us before joining? That's okay! Let us properly introduce ourselves...</p>
|
||||
</section>
|
||||
@@ -941,6 +977,41 @@
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Donation CTA Card -->
|
||||
<section class="card fade-in" role="region" aria-labelledby="donation-cta">
|
||||
<h2 id="donation-cta" style="margin-top: 0; text-align: center;">Support Our Mission</h2>
|
||||
<p style="text-align: center; margin-bottom: 2rem; font-size: 1.1rem;">
|
||||
Help us continue building inclusive tech communities and providing free, open-source tools for everyone.
|
||||
</p>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" style="color: #10b981;">$250-$500</div>
|
||||
<div class="stat-label">Monthly Operating Costs</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" style="color: #10b981;">50+</div>
|
||||
<div class="stat-label">Products Offered</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" style="color: #10b981;">Countless</div>
|
||||
<div class="stat-label">Pro-Bono Services</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="text-align: center; margin-top: 2rem;">
|
||||
Your support helps us maintain our infrastructure, develop new features, and continue offering free services to communities worldwide.
|
||||
</p>
|
||||
|
||||
<p style="text-align: center; margin-top: 1.5rem;">
|
||||
<a href="https://donate.nhcarrigan.com" target="_blank" class="cta-button cta-button-donate" style="font-size: 1.2rem; padding: 1.2rem 2.5rem;" aria-label="Support NHCarrigan with a donation" rel="noopener noreferrer">
|
||||
<i class="fas fa-heart" aria-hidden="true"></i> Donate Now
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Frequently Asked Questions -->
|
||||
<section class="fade-in" role="region" aria-labelledby="faq">
|
||||
<h2 id="faq">Frequently Asked Questions</h2>
|
||||
|
||||
Reference in New Issue
Block a user