patx/afterdarklabs
update ctas on index
Commit ae39b8c · patx · 2026-07-04T00:05:05-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 4adcdce..61e00c9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -99,6 +99,51 @@
color: #ccff00;
font-weight: 600;
}
+
+ #mobile-nav-toggle .hamburger-icon {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ #mobile-nav-toggle .hamburger-line {
+ display: block;
+ width: 20px;
+ height: 2px;
+ border-radius: 9999px;
+ background: currentColor;
+ }
+
+ .sticky-demo-cta {
+ position: fixed;
+ left: 50%;
+ bottom: calc(16px + env(safe-area-inset-bottom));
+ z-index: 60;
+ display: inline-flex;
+ width: min(calc(100vw - 32px), 352px);
+ min-height: 56px;
+ align-items: center;
+ justify-content: center;
+ border-radius: 24px;
+ background: var(--neon);
+ color: #000;
+ font-weight: 700;
+ box-shadow: 0 18px 40px rgba(0,0,0,0.32);
+ opacity: 0;
+ pointer-events: none;
+ transform: translate(-50%, calc(100% + 32px));
+ transition: opacity 180ms ease, transform 180ms ease, background-color 150ms ease;
+ }
+
+ .sticky-demo-cta:hover {
+ background: #fff;
+ }
+
+ .sticky-demo-cta.is-visible {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translate(-50%, 0);
+ }
</style>
<script type="application/ld+json">
{
@@ -159,14 +204,20 @@
<nav class="fixed top-0 z-50 w-full bg-black/90 backdrop-blur-lg">
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:py-5">
<div class="flex items-center justify-between gap-3 lg:hidden">
- <button type="button" id="mobile-nav-toggle" class="flex min-w-0 items-center gap-2 rounded-2xl p-1.5 pr-3 text-left text-white transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-controls="mobile-nav-menu" aria-expanded="false" aria-label="Open navigation menu">
+ <a href="#hero" class="flex min-w-0 items-center gap-2 rounded-2xl p-1.5 pr-3 text-left text-white transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black text-lg font-bold">🌑</span>
<span class="min-w-0">
<span class="logo-font block truncate text-xl font-semibold tracking-tighter">After Dark</span>
<span class="logo-font -mt-1 block text-xs tracking-[3px] text-[#ccff00]">LABS</span>
</span>
+ </a>
+ <button type="button" id="mobile-nav-toggle" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-gray-300 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-controls="mobile-nav-menu" aria-expanded="false" aria-label="Open navigation menu">
+ <span class="hamburger-icon" aria-hidden="true">
+ <span class="hamburger-line"></span>
+ <span class="hamburger-line"></span>
+ <span class="hamburger-line"></span>
+ </span>
</button>
- <a href="#questionnaire" class="shrink-0 rounded-2xl bg-[#ccff00] px-4 py-3 text-sm font-semibold text-black transition-colors hover:bg-white">Get Free Demo</a>
</div>
<div class="hidden items-center justify-between lg:flex">
@@ -179,19 +230,19 @@
</a>
<div class="flex items-center gap-6">
<div class="flex items-center gap-7 text-sm font-medium">
- <a href="#how-it-works" class="transition-colors hover:text-[#ccff00]" data-nav-link>How It Works</a>
- <a href="#about" class="transition-colors hover:text-[#ccff00]" data-nav-link>About</a>
+ <a href="#process" class="transition-colors hover:text-[#ccff00]" data-nav-link>Process</a>
+ <a href="#services" class="transition-colors hover:text-[#ccff00]" data-nav-link>Services</a>
<a href="#work" class="transition-colors hover:text-[#ccff00]" data-nav-link>Our Work</a>
+ <a href="#questionnaire" class="transition-colors hover:text-[#ccff00]" data-nav-link>Contact</a>
</div>
- <a href="#questionnaire" class="rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">Get Free Demo</a>
</div>
</div>
<div id="mobile-nav-menu" class="hidden lg:hidden">
<div class="mt-4 grid gap-2 border-t border-white/10 pt-4 text-sm font-semibold">
<a href="#hero" class="rounded-2xl px-4 py-3 text-gray-200 transition-colors hover:bg-white/10 hover:text-[#ccff00]" data-nav-link>Home</a>
- <a href="#how-it-works" class="rounded-2xl px-4 py-3 text-gray-200 transition-colors hover:bg-white/10 hover:text-[#ccff00]" data-nav-link>How It Works</a>
- <a href="#about" class="rounded-2xl px-4 py-3 text-gray-200 transition-colors hover:bg-white/10 hover:text-[#ccff00]" data-nav-link>About</a>
+ <a href="#process" class="rounded-2xl px-4 py-3 text-gray-200 transition-colors hover:bg-white/10 hover:text-[#ccff00]" data-nav-link>Process</a>
+ <a href="#services" class="rounded-2xl px-4 py-3 text-gray-200 transition-colors hover:bg-white/10 hover:text-[#ccff00]" data-nav-link>Services</a>
<a href="#work" class="rounded-2xl px-4 py-3 text-gray-200 transition-colors hover:bg-white/10 hover:text-[#ccff00]" data-nav-link>Our Work</a>
<a href="#questionnaire" class="rounded-2xl px-4 py-3 text-gray-200 transition-colors hover:bg-white/10 hover:text-[#ccff00]" data-nav-link>Contact</a>
</div>
@@ -215,19 +266,16 @@
<a href="#questionnaire" class="px-8 py-5 bg-[#ccff00] hover:bg-white text-black font-semibold rounded-3xl text-lg transition-all flex items-center gap-3 group">
Get Your Free Demo
</a>
- <a href="#how-it-works" class="px-8 py-5 bg-white/10 hover:bg-white/15 font-medium rounded-3xl text-lg transition-all">
- See How It Works
- </a>
</div>
</div>
</div>
</section>
- <section id="how-it-works" class="scroll-mt-24 border-t border-white/10 bg-black">
+ <section id="process" class="scroll-mt-24 border-t border-white/10 bg-black">
<div class="mx-auto max-w-5xl px-6 py-20 md:py-24">
<div class="mb-12 max-w-3xl">
<p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">No upfront cost, no pressure. We prove our work before you pay a dime.</p>
- <h2 class="heading text-4xl font-semibold leading-none tracking-tighter md:text-6xl">How it works</h2>
+ <h2 class="heading text-4xl font-semibold leading-none tracking-tighter md:text-6xl">Our process</h2>
</div>
<ol class="space-y-7">
<li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
@@ -254,7 +302,7 @@
</div>
</section>
- <section id="about" class="scroll-mt-24 border-t border-white/10 bg-zinc-950">
+ <section id="services" class="scroll-mt-24 border-t border-white/10 bg-zinc-950">
<div class="mx-auto max-w-5xl px-6 py-20 md:py-24">
<p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">What we do</p>
<h2 class="heading text-4xl font-semibold leading-none tracking-tighter md:text-6xl">Built different, by design</h2>
@@ -272,7 +320,7 @@
<span class="rounded-full border border-[#ccff00]/30 bg-[#ccff00]/10 px-4 py-2 text-sm font-semibold text-white shadow-[0_0_24px_rgba(204,255,0,0.08)]">SEO, GEO, blogs & local search setup</span>
<span class="rounded-full border border-[#ccff00]/30 bg-[#ccff00]/10 px-4 py-2 text-sm font-semibold text-white shadow-[0_0_24px_rgba(204,255,0,0.08)]">Hosting, domains & business email addresses</span>
<span class="rounded-full border border-[#ccff00]/30 bg-[#ccff00]/10 px-4 py-2 text-sm font-semibold text-white shadow-[0_0_24px_rgba(204,255,0,0.08)]">Logo design, lead capture & email/SMS notifications</span>
- <span class="rounded-full border border-[#ccff00]/30 bg-[#ccff00]/10 px-4 py-2 text-sm font-semibold text-white shadow-[0_0_24px_rgba(204,255,0,0.08)]">AI-powered features</span>
+ <span class="rounded-full border border-[#ccff00]/30 bg-[#ccff00]/10 px-4 py-2 text-sm font-semibold text-white shadow-[0_0_24px_rgba(204,255,0,0.08)]">AI-powered features & automation</span>
<span class="rounded-full border border-[#ccff00]/30 bg-[#ccff00]/10 px-4 py-2 text-sm font-semibold text-white shadow-[0_0_24px_rgba(204,255,0,0.08)]">Google, Yelp, social media & influencer marketing setup</span>
</div>
</div>
@@ -282,7 +330,7 @@
<section id="work" class="scroll-mt-24 border-t border-white/10 bg-black">
<div class="mx-auto max-w-5xl px-6 py-20 md:py-24">
<div class="mb-10">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">A sample of what we have shipped </p>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">A sample of our past projects</p>
<h2 class="heading text-4xl font-semibold tracking-tighter md:text-6xl">Our work</h2>
</div>
<div class="grid gap-5 md:grid-cols-2">
@@ -329,9 +377,9 @@
<section id="questionnaire" class="scroll-mt-24 border-t border-white/10 bg-zinc-950">
<div class="mx-auto max-w-5xl px-6 py-20 md:py-24">
<div class="mb-10 max-w-3xl">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Get Started</p>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Contact us</p>
<h2 class="heading text-4xl font-semibold leading-none tracking-tighter md:text-6xl">Get your free demo</h2>
- <p class="mt-8 text-lg leading-8 text-gray-300"><strong>Answer a few quick questions and we'll send you a real demo site within 24 hours — free, no strings attached.</strong> Not happy with your current website? Share the URL with us and we will audit your current site + provide an improved demo for free.</p>
+ <p class="mt-8 text-lg leading-8 text-gray-300"><strong>Answer a few quick questions and we'll send you a real demo site within 24 hours — free, no strings attached.</strong> Not happy with your current website? Share the URL with us and we will audit your current site + provide an improved demo for free. You can also email <a class="text-[#ccff00]" href="mailto:[email protected]">[email protected]</a> directly for general inquiries.</p>
</div>
<form id="demo-questionnaire" class="space-y-8" action="https://formspree.io/f/xeedjery" method="POST" novalidate>
@@ -361,6 +409,7 @@
<label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Internal tool" class="sr-only">Internal tool or API</label>
<label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Mobile app" class="sr-only">iOS or Android app</label>
<label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="Redesign" class="sr-only">Website redesign</label>
+ <label class="service-chip cursor-pointer rounded-2xl border border-white/10 bg-black px-4 py-4 text-sm font-semibold text-gray-300 transition-colors"><input type="checkbox" name="services_needed" value="AI Work" class="sr-only">AI automation or voice agents</label>
</div>
<p id="services-error" class="mt-3 hidden text-sm font-medium text-red-300">Select at least one service.</p>
</fieldset>
@@ -404,7 +453,6 @@
</span>
</a>
<p class="text-gray-500">© 2026 <a href="https://harrisonerd.com/" class="transition-colors hover:text-[#ccff00]">Harrison Erd</a> • Pompano Beach, FL</p>
- <p class="mt-3 text-gray-500"><a href="mailto:[email protected]" class="transition-colors hover:text-[#ccff00]">[email protected]</a></p>
</div>
</footer>
@@ -413,6 +461,8 @@
<img id="work-modal-image" class="max-h-[86vh] max-w-[94vw] object-contain shadow-2xl" alt="Selected work screenshot preview">
</div>
+ <a id="sticky-demo-cta" href="#questionnaire" class="sticky-demo-cta" aria-hidden="true" tabindex="-1">Get Your Free Demo</a>
+
<script>
(function () {
const toggle = document.getElementById('mobile-nav-toggle');
@@ -442,13 +492,47 @@
});
})();
+ (function () {
+ const stickyCta = document.getElementById('sticky-demo-cta');
+ const hero = document.getElementById('hero');
+ const questionnaire = document.getElementById('questionnaire');
+ const nav = document.querySelector('nav');
+ if (!stickyCta || !hero || !questionnaire) return;
+
+ function setStickyCtaVisible(isVisible) {
+ stickyCta.classList.toggle('is-visible', isVisible);
+
+ if (isVisible) {
+ stickyCta.removeAttribute('aria-hidden');
+ stickyCta.removeAttribute('tabindex');
+ } else {
+ stickyCta.setAttribute('aria-hidden', 'true');
+ stickyCta.setAttribute('tabindex', '-1');
+ }
+ }
+
+ function updateStickyCta() {
+ const navHeight = nav ? nav.getBoundingClientRect().height : 0;
+ const revealOffset = navHeight + 32;
+ const contactEntryOffset = 160;
+ const isPastHero = hero.getBoundingClientRect().bottom <= revealOffset;
+ const isBeforeQuestionnaire = questionnaire.getBoundingClientRect().top > window.innerHeight - contactEntryOffset;
+ setStickyCtaVisible(isPastHero && isBeforeQuestionnaire);
+ }
+
+ requestAnimationFrame(updateStickyCta);
+ window.addEventListener('load', updateStickyCta);
+ window.addEventListener('scroll', updateStickyCta, { passive: true });
+ window.addEventListener('resize', updateStickyCta);
+ })();
+
(function () {
const activeClasses = ['text-[#ccff00]', 'font-semibold'];
const navLinks = Array.from(document.querySelectorAll('nav a[data-nav-link]'));
const sections = [
{ id: 'hero', href: '#hero' },
- { id: 'how-it-works', href: '#how-it-works' },
- { id: 'about', href: '#about' },
+ { id: 'process', href: '#process' },
+ { id: 'services', href: '#services' },
{ id: 'work', href: '#work' },
{ id: 'questionnaire', href: '#questionnaire' },
];
diff --git a/instagram_ad_1.png b/instagram_ad_1.png
new file mode 100644
index 0000000..364eef2
Binary files /dev/null and b/instagram_ad_1.png differ