feat: couple final sections?

This commit is contained in:
2026-02-02 20:57:41 -08:00
parent 6abb0eb3da
commit e11b6c1750
+105 -1
View File
@@ -1131,12 +1131,67 @@
</p> </p>
</section> </section>
<!--
MARK: Values & Ethics
-->
<section class="card fade-in" style="background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); border: 2px solid var(--witch-plum);" role="region" aria-labelledby="values-ethics">
<h2 id="values-ethics" style="margin-top: 0; text-align: center;"><i class="fas fa-heart" aria-hidden="true"></i> Our Values & Ethics</h2>
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/ethics.png" alt="Our Values & Ethics" />
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 2rem 0;">
<div class="value-card">
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
<i class="fas fa-universal-access" aria-hidden="true"></i> Accessibility First
</h3>
<p>Every line of code we write considers users of all abilities. We believe technology should work for everyone, not just some.</p>
</div>
<div class="value-card">
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
<i class="fas fa-lock" aria-hidden="true"></i> Privacy by Design
</h3>
<p>We never collect unnecessary data. Your privacy isn't a feature; it's a fundamental right we protect in every project.</p>
</div>
<div class="value-card">
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
<i class="fas fa-leaf" aria-hidden="true"></i> Sustainable Code
</h3>
<p>Efficient algorithms, optimized resources, and eco-friendly hosting. Good code respects both users and our planet.</p>
</div>
<div class="value-card">
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
<i class="fas fa-rainbow" aria-hidden="true"></i> Inclusive by Default
</h3>
<p>We actively create spaces where marginalized voices lead. Diversity isn't just welcomed; it's essential to innovation.</p>
</div>
<div class="value-card">
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
<i class="fas fa-code-branch" aria-hidden="true"></i> Open Source Always
</h3>
<p>Knowledge should be free. We share our code, contribute to communities, and believe in collective growth.</p>
</div>
<div class="value-card">
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
<i class="fas fa-handshake" aria-hidden="true"></i> Ethical Partnerships
</h3>
<p>We only work with organizations whose values align with ours. No exceptions, no matter the price.</p>
</div>
</div>
<p style="text-align: center; font-style: italic; margin-top: 2rem; color: var(--witch-text);">
"Technology is a tool. We choose to wield it for good."
</p>
</section>
<!-- <!--
MARK: How Can We Serve You? MARK: How Can We Serve You?
--> -->
<section class="card fade-in" style="text-align: center; background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%); color: var(--witch-moon); position: relative;" role="region" aria-labelledby="serve-you"> <section class="card fade-in" style="text-align: center; background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%); color: var(--witch-moon); position: relative;" role="region" aria-labelledby="serve-you">
<h2 id="serve-you" style="margin-top: 0; color: white;">How Can We Best Serve You?</h2> <h2 id="serve-you" style="margin-top: 0; color: white;">How Can We Best Serve You?</h2>
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/serve.png" alt="How Can We Best Serve You?" />
<div style="margin: 2rem auto; padding: 0 1rem;"> <div style="margin: 2rem auto; padding: 0 1rem;">
<div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;"> <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;">
<span style="margin-bottom: 0.5rem; font-size: 1.4rem;">I need help with</span> <span style="margin-bottom: 0.5rem; font-size: 1.4rem;">I need help with</span>
@@ -2342,6 +2397,55 @@
</div> </div>
</section> </section>
<!--
MARK: Let's Build Together
-->
<section class="card fade-in" style="background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%); text-align: center; position: relative; overflow: hidden;" role="region" aria-labelledby="build-together">
<div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.1); border-radius: 50%;"></div>
<div style="position: absolute; bottom: -30px; left: -30px; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.05); border-radius: 50%;"></div>
<h2 id="build-together" style="margin-top: 0; color: white; font-size: 2rem;">
<i class="fas fa-rocket" aria-hidden="true"></i> Let's Build Something Amazing Together
</h2>
<p style="color: var(--witch-moon); font-size: 1.2rem; max-width: 700px; margin: 1.5rem auto 2rem;">
Whether you need a custom solution, want to improve your existing systems, or have a wild idea that needs technical expertise; we're here to help bring your vision to life.
</p>
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/build.png" alt="Let's Build Something Amazing Together" />
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; max-width: 800px; margin-left: auto; margin-right: auto;">
<div style="background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(5px);">
<i class="fas fa-bolt" style="font-size: 2rem; color: var(--witch-mauve); margin-bottom: 0.5rem;"></i>
<h3 style="color: white; margin: 0.5rem 0;">Quick Start</h3>
<p style="color: var(--witch-moon); font-size: 0.9rem;">Got an urgent need? We can often begin work within 24-48 hours.</p>
</div>
<div style="background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(5px);">
<i class="fas fa-comments" style="font-size: 2rem; color: var(--witch-mauve); margin-bottom: 0.5rem;"></i>
<h3 style="color: white; margin: 0.5rem 0;">Collaborative</h3>
<p style="color: var(--witch-moon); font-size: 0.9rem;">We work WITH you, not just for you. Your input shapes everything.</p>
</div>
<div style="background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(5px);">
<i class="fas fa-shield-alt" style="font-size: 2rem; color: var(--witch-mauve); margin-bottom: 0.5rem;"></i>
<h3 style="color: white; margin: 0.5rem 0;">No Surprises</h3>
<p style="color: var(--witch-moon); font-size: 0.9rem;">Clear communication, transparent pricing, and realistic timelines.</p>
</div>
</div>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem;">
<a href="#book-call" class="cta-button" style="background: white; color: var(--witch-purple); padding: 1rem 2rem; font-size: 1.1rem;">
<i class="fas fa-calendar" aria-hidden="true"></i> Schedule a Call
</a>
<a href="#contact-form" class="cta-button" style="background: transparent; color: white; border: 2px solid white; padding: 1rem 2rem; font-size: 1.1rem;">
<i class="fas fa-envelope" aria-hidden="true"></i> Send a Message
</a>
</div>
<p style="color: var(--witch-moon); font-size: 0.9rem; margin-top: 2rem; font-style: italic;">
"The best projects come from passionate people working together toward a common goal."
</p>
</section>
<!-- <!--
MARK: Final CTA MARK: Final CTA
--> -->