patx/afterdarklabs
update landing page
Commit fd1e8f2 · patx · 2026-06-03T05:41:03-04:00
Comments
No comments yet.
Diff
diff --git a/docs/about.html b/docs/about.html
index b7fd6fd..aa72c9e 100644
--- a/docs/about.html
+++ b/docs/about.html
@@ -72,7 +72,7 @@
<div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
<div>
<p class="mb-6 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">About After Dark Labs</p>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Senior product execution, without the agency handoff.</h1>
+ <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Product execution, without the overhead.</h1>
</div>
<div class="space-y-8 text-lg leading-8 text-gray-300">
<div>
@@ -95,10 +95,10 @@
<div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:min-h-[520px] lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
<div>
<p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">Who you work with</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Direct access to the person doing the work.</h2>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">A hands-on experience.</h2>
</div>
<div class="text-lg leading-8 text-black/75">
- <p>My name is <a href="https://harrisonerd.com" class="font-semibold text-black underline decoration-black/30 underline-offset-4 transition-opacity hover:opacity-65">Harrison Erd</a>. I run After Dark Labs solo, which means every project gets direct access to the person doing the strategy, design decisions, development, launch planning, and follow-through. Outside of client work, I have built developer tools used well beyond my own projects, including <a href="https://harrisonerd.com/pickledb" class="font-semibold text-black underline decoration-black/30 underline-offset-4 transition-opacity hover:opacity-65">pickleDB</a>, a Python data store with 2M+ downloads, and <a href="https://harrisonerd.com/micropie" class="font-semibold text-black underline decoration-black/30 underline-offset-4 transition-opacity hover:opacity-65">MicroPie</a>, a lightweight web framework recognized in the official ASGI documentation for modern Python web apps.</p>
+ <p>My name is <a href="https://harrisonerd.com" class="font-semibold text-black underline decoration-black/30 underline-offset-4 transition-opacity hover:opacity-65">Harrison Erd</a>. I run After Dark Labs and work personally on each project we undertake, which means every project gets direct access to the person doing the strategy, design decisions, development, launch planning, and follow-through. Outside of client work, I have built developer tools used well beyond my own projects, including <a href="https://harrisonerd.com/pickledb" class="font-semibold text-black underline decoration-black/30 underline-offset-4 transition-opacity hover:opacity-65">pickleDB</a>, a Python data store with 2M+ downloads, and <a href="https://harrisonerd.com/micropie" class="font-semibold text-black underline decoration-black/30 underline-offset-4 transition-opacity hover:opacity-65">MicroPie</a>, a lightweight web framework recognized in the official ASGI documentation for modern Python web apps.</p>
</div>
</div>
</section>
@@ -115,23 +115,23 @@
</div>
</section>
- <section class="bg-[#ccff00] text-black">
+ <section class="bg-black text-white">
<div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
<div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What that changes</p>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">What that changes</p>
<h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Less handoff. More useful work.</h2>
</div>
- <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
+ <div class="divide-y divide-white/10 text-lg leading-8 text-gray-300">
<div class="pb-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Senior attention from day one</h3>
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Senior attention from day one</h3>
<p class="mt-4">You are not briefed through a sales layer and passed down a chain. The person scoping the work is the person building it.</p>
</div>
<div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Built for real business use</h3>
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Built for real business use</h3>
<p class="mt-4">After Dark Labs has shipped 20+ products for businesses around the country, from marketing sites to ecommerce, SaaS, booking flows, and mobile app experiences.</p>
</div>
<div class="pt-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Lean by design</h3>
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Lean by design</h3>
<p class="mt-4">No agency overhead means less drag, clearer communication, and more of the budget going into the work that actually moves the business forward.</p>
</div>
</div>
diff --git a/docs/index.html b/docs/index.html
index 03695a0..3e36185 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,43 +6,54 @@
<link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<link rel="apple-touch-icon" href="/moon-stars-fill.svg">
<link rel="manifest" href="/site.webmanifest">
- <title>Business Websites & Apps | After Dark Labs</title>
- <meta name="description" content="After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools.">
+ <title>After Dark Labs | Free Website Demo in 24 Hours</title>
+ <meta name="description" content="After Dark Labs builds custom business websites, Shopify stores, mobile apps, and internal tools with SEO, hosting, logo design, and backend APIs baked in.">
<meta name="robots" content="index,follow">
- <link rel="canonical" href="https://afterdarklabs.io/">
- <meta property="og:title" content="Business Websites & Apps | After Dark Labs">
- <meta property="og:description" content="After Dark Labs builds business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom tools.">
+ <link rel="canonical" href="https://afterdarklabs.io/index2.html">
+ <meta property="og:title" content="After Dark Labs | Free Website Demo in 24 Hours">
+ <meta property="og:description" content="Answer a quick questionnaire and get a free demo website within 24 hours.">
<meta property="og:image" content="https://afterdarklabs.io/twitter-card.png">
- <meta property="og:image:width" content="1536">
- <meta property="og:image:height" content="1024">
- <meta property="og:image:alt" content="After Dark Labs business websites and mobile apps">
<meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/">
+ <meta property="og:url" content="https://afterdarklabs.io/index2.html">
<meta property="og:site_name" content="After Dark Labs">
<meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:title" content="Business Websites & Apps | After Dark Labs">
- <meta name="twitter:description" content="After Dark Labs builds business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom tools.">
+ <meta name="twitter:title" content="After Dark Labs | Free Website Demo in 24 Hours">
+ <meta name="twitter:description" content="Answer a quick questionnaire and get a free demo website within 24 hours.">
<meta name="twitter:image" content="https://afterdarklabs.io/twitter-card.png">
- <meta name="twitter:image:alt" content="After Dark Labs business websites and mobile apps">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
- <script src="site.js" defer></script>
<style>
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
-
- :root { --neon: #ccff00; }
-
- body { font-family: 'Inter', system-ui, sans-serif; }
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
+
+ :root {
+ --neon: #ccff00;
+ --page-bg: #17212b;
+ --page-bg-rgb: 23, 33, 43;
+ }
+
+ html { scroll-behavior: smooth; }
+ body {
+ background: var(--page-bg);
+ font-family: 'Inter', system-ui, sans-serif;
+ }
.heading { font-family: 'Space Grotesk', sans-serif; }
- .hero-bg { background: linear-gradient(135deg, #030303 0%, #0a0a0a 100%); }
+ .hero-bg { background: var(--page-bg); }
+
+ .bg-black,
+ .bg-zinc-950 {
+ background-color: var(--page-bg) !important;
+ }
+
+ .bg-black\/90 {
+ background-color: rgba(var(--page-bg-rgb), 0.92) !important;
+ }
.neon-text {
color: var(--neon);
text-shadow: 0 0 10px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon);
}
- /* Full-hero canvas */
#hero-canvas {
position: absolute;
inset: 0;
@@ -57,355 +68,277 @@
z-index: 1;
}
- /* Vignette so edges stay dark and text pops */
.hero-vignette {
position: absolute;
inset: 0;
background:
- radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%),
- linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.5) 100%);
+ radial-gradient(ellipse 80% 70% at 50% 50%, transparent 42%, rgba(var(--page-bg-rgb),0.54) 100%),
+ linear-gradient(to bottom, rgba(var(--page-bg-rgb),0.22) 0%, transparent 24%, transparent 78%, rgba(var(--page-bg-rgb),0.34) 100%);
pointer-events: none;
z-index: 1;
}
- </style>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "Organization",
- "@id": "https://afterdarklabs.io/#organization",
- "name": "After Dark Labs",
- "url": "https://afterdarklabs.io/",
- "logo": "https://afterdarklabs.io/logo.png",
- "founder": {
- "@type": "Person",
- "name": "Harrison Erd"
- },
- "areaServed": {
- "@type": "Country",
- "name": "United States"
- },
- "description": "After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools."
- },
- {
- "@type": "WebSite",
- "@id": "https://afterdarklabs.io/#website",
- "url": "https://afterdarklabs.io/",
- "name": "After Dark Labs",
- "publisher": {
- "@id": "https://afterdarklabs.io/#organization"
- },
- "description": "After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools."
+
+ .service-chip:has(input:checked) {
+ border-color: rgba(204,255,0,0.8);
+ background: rgba(204,255,0,0.12);
+ color: white;
}
- ]
- }
- </script>
+
+ .contact-choice:has(input:checked),
+ .logo-choice:has(input:checked) {
+ border-color: rgba(204,255,0,0.8);
+ background: rgba(204,255,0,0.12);
+ color: white;
+ }
+
+ nav a[data-nav-link][aria-current="page"] {
+ color: #ccff00;
+ font-weight: 600;
+ }
+ </style>
</head>
<body class="bg-black text-white overflow-x-hidden">
+ <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="grid grid-cols-[1fr_auto_1fr] items-center gap-3 lg:hidden">
+ <button type="button" id="mobile-nav-toggle" class="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10 text-white transition-colors hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-controls="mobile-nav-menu" aria-expanded="false" aria-label="Open navigation menu">
+ <i class="fa-solid fa-bars text-lg" data-menu-icon="open" aria-hidden="true"></i>
+ <i class="fa-solid fa-xmark hidden text-xl" data-menu-icon="close" aria-hidden="true"></i>
+ </button>
+ <a href="index2.html" class="flex items-center gap-2 justify-self-center" aria-label="After Dark Labs home">
+ <div class="flex h-8 w-8 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black text-lg font-bold">🌑</div>
+ <div>
+ <span class="heading block text-xl font-semibold tracking-tighter">After Dark</span>
+ <span class="-mt-1 block text-xs tracking-[3px] text-[#ccff00]">LABS</span>
+ </div>
+ </a>
+ <a href="#questionnaire" class="justify-self-end rounded-2xl bg-[#ccff00] px-4 py-3 text-sm font-semibold text-black transition-colors hover:bg-white">Free Demo</a>
+ </div>
- <nav class="fixed top-0 w-full bg-black/90 backdrop-blur-lg z-50 border-b border-white/10">
- <div class="max-w-7xl mx-auto px-6 py-5 flex justify-between items-center">
- <a href="index.html" class="flex items-center gap-3">
- <div class="w-9 h-9 bg-black border-2 border-[#ccff00] rounded-2xl flex items-center justify-center text-xl font-bold">🌑</div>
- <div>
- <span class="heading text-2xl font-semibold tracking-tighter">After Dark</span>
- <span class="text-[#ccff00] text-sm tracking-[3px] block -mt-1">LABS</span>
+ <div class="hidden items-center justify-between lg:flex">
+ <a href="index2.html" class="flex items-center gap-3">
+ <div class="flex h-9 w-9 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black text-xl font-bold">🌑</div>
+ <div>
+ <span class="heading block text-2xl font-semibold tracking-tighter">After Dark</span>
+ <span class="-mt-1 block text-sm tracking-[3px] text-[#ccff00]">LABS</span>
+ </div>
+ </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="#work" class="transition-colors hover:text-[#ccff00]" data-nav-link>Our Work</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>
- </a>
- <div class="hidden lg:flex items-center gap-5 text-sm font-medium xl:gap-7">
- <a href="index.html#mobile-apps" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="index.html#business-websites" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="index.html#shopify-stores" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="index.html#why-us" class="hover:text-[#ccff00] transition-colors">Why Us</a>
- <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Our Work</a>
- <a href="index.html#about" class="hover:text-[#ccff00] transition-colors">About</a>
- <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
</div>
- <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start Project</a>
- </div>
- </nav>
- <main>
- <!-- HERO -->
- <section class="hero-bg min-h-screen flex items-center pt-20" style="position:relative; overflow:hidden;">
- <canvas id="hero-canvas"></canvas>
- <div class="hero-vignette"></div>
-
- <div class="hero-content mx-auto grid w-full max-w-7xl gap-10 px-6 py-32 text-left lg:grid-cols-[1.3fr_0.7fr] lg:items-end">
- <div>
- <h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl">
- Custom websites<br>and mobile apps<br>that help businesses<br><span class="neon-text">thrive</span>.
- </h1>
- </div>
- <div class="mx-auto flex max-w-xl flex-col items-start gap-8 lg:mx-0">
- <div class="flex flex-wrap gap-5 justify-start">
- <a href="#contact" 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">
- Let's Build Something
- <span class="group-hover:rotate-45 transition-transform">→</span>
- </a>
- <a href="#work" class="px-8 py-5 border border-white/30 hover:border-[#ccff00] font-medium rounded-3xl text-lg transition-all">
- See Our Work
- </a>
+ <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="#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="#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>
</div>
</div>
</div>
- </section>
+ </nav>
- <!-- SERVICES -->
- <section id="services" class="bg-zinc-950">
- <article id="mobile-apps" class="scroll-mt-24 bg-[#ccff00] text-black">
- <div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:min-h-[520px] lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
+ <main>
+ <section class="hero-bg min-h-screen flex items-center pt-20" style="position:relative; overflow:hidden;">
+ <canvas id="hero-canvas"></canvas>
+ <div class="hero-vignette"></div>
+
+ <div class="hero-content mx-auto grid w-full max-w-7xl gap-10 px-6 py-32 text-left lg:grid-cols-[1.3fr_0.7fr] lg:items-end">
<div>
- <div class="mb-8 text-7xl" aria-hidden="true">📱</div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">Mobile app development</p>
- <h3 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">
- <a href="mobile-apps.html" class="transition-opacity hover:opacity-70">Custom Mobile Apps</a>
- </h3>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">Custom iOS, Android, and cross-platform apps with branding, UI/UX, backend integrations, launch support, and marketing momentum.</p>
- <a href="mobile-apps.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-black px-6 py-3 font-semibold text-white transition-colors hover:bg-zinc-800">
- Explore mobile app development
- <span aria-hidden="true">→</span>
- </a>
+ <h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl">
+ Custom websites<br>and mobile apps<br>that help businesses<br><span class="neon-text">thrive</span>.
+ </h1>
</div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li><a href="mobile-app-branding-ui-ux.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Branding, logo design, stunning UI/UX</span></a></li>
- <li><a href="backend-api-integration.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Backend + API Integration</span></a></li>
- <li><a href="app-store-launch-support.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>App Store Launch & Support (iOS + Android)</span></a></li>
- <li><a href="influencer-marketing-social-media.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Influencer marketing on social media</span></a></li>
- </ul>
- </div>
- </article>
- <article id="business-websites" class="scroll-mt-24 bg-black text-white">
- <div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:min-h-[520px] lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
- <div class="lg:order-2">
- <div class="mb-8 text-7xl" aria-hidden="true">🌐</div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Website development</p>
- <h3 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">
- <a href="business-websites.html" class="transition-opacity hover:opacity-70">Business Websites</a>
- </h3>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Fast, conversion-focused websites for service businesses, construction companies, plumbers, electricians, auto sales teams, ecommerce, bookings, SEO, and long-term growth.</p>
- <a href="business-websites.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">
- Explore business websites
- <span aria-hidden="true">→</span>
- </a>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl lg:order-1">
- <li><a href="service-business-website-design.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Service business website design for contractors, trades, and auto sales</span></a></li>
- <li><a href="business-websites.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Business website design and development</span></a></li>
- <li><a href="custom-web-development-ecommerce.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Custom Web Development and E-commerce Solutions</span></a></li>
- <li><a href="online-bookings-appointments-memberships.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Online bookings, appointments, and subscription memberships</span></a></li>
- <li><a href="business-website-seo.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Business website SEO and performance</span></a></li>
- </ul>
- </div>
- </article>
- <article id="shopify-stores" class="scroll-mt-24 bg-[#ccff00] text-black">
- <div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:min-h-[520px] lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
- <div>
- <div class="mb-8 text-7xl" aria-hidden="true">🛒</div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">Commerce systems</p>
- <h3 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">
- <a href="shopify-stores.html" class="transition-opacity hover:opacity-70">Shopify Stores</a>
- </h3>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">Shopify store builds and improvements for brands that need better product structure, polished theme customization, faster storefronts, checkout clarity, and search-ready content.</p>
- <a href="shopify-stores.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-black px-6 py-3 font-semibold text-white transition-colors hover:bg-zinc-800">
- Explore Shopify stores
- <span aria-hidden="true">→</span>
- </a>
+ <div class="mx-auto flex max-w-xl flex-col items-start gap-8 lg:mx-0">
+ <div class="flex flex-wrap gap-5 justify-start">
+ <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>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li><a href="shopify-store-design.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Shopify storefront design and theme customization</span></a></li>
- <li><a href="shopify-stores.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Product, collection, and checkout structure</span></a></li>
- <li><a href="shopify-seo-optimization.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Shopify SEO, performance, and metadata</span></a></li>
- <li><a href="shopify-migration-optimization.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Store migration, cleanup, and launch support</span></a></li>
- </ul>
</div>
- </article>
- </section>
+ </section>
- <!-- WHY US -->
- <section id="why-us" class="scroll-mt-24 bg-black text-white">
- <div class="max-w-7xl mx-auto px-6 py-20 md:py-28">
- <div class="grid gap-12 lg:grid-cols-[0.95fr_1.05fr] lg:items-start">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Why After Dark Labs</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Why work with us instead of Wix, Shopify, Squarespace, or another builder?</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Website builders can be useful for quick starts. After Dark Labs is for businesses that want a custom strategy, cleaner SEO structure, faster pages, ownership-minded decisions, and a one-time build fee instead of shaping the business around a template.</p>
- <p class="mt-5 max-w-2xl text-sm leading-7 text-gray-500">Domains, hosting, third-party tools, apps, maintenance, Shopify plans, and optional support can still have their own costs.</p>
- <a href="custom-business-website-development.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">
- Explore custom website development
- <span aria-hidden="true">→</span>
- </a>
+ <section id="how-it-works" 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>
</div>
- <div class="grid gap-4 sm:grid-cols-2">
- <a href="why-not-wix.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
- <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not Wix?</p>
- <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">Wix vs custom website</h3>
- <p class="mt-4 text-gray-400">For businesses that need more than a template and generic page structure.</p>
- </a>
- <a href="why-not-squarespace.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
- <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not Squarespace?</p>
- <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">Squarespace vs custom website</h3>
- <p class="mt-4 text-gray-400">For brands that need SEO depth, custom flows, and room to evolve.</p>
- </a>
- <a href="why-not-godaddy-website-builder.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
- <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not GoDaddy?</p>
- <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">GoDaddy builder vs custom website</h3>
- <p class="mt-4 text-gray-400">For local teams that need a real sales path, not just a quick web presence.</p>
- </a>
- <a href="why-not-webflow.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
- <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not Webflow?</p>
- <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">Webflow vs custom website</h3>
- <p class="mt-4 text-gray-400">For teams that want the finished system handled without design-tool upkeep.</p>
- </a>
- <a href="why-not-shopify.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
- <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not Shopify?</p>
- <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">Shopify or custom website?</h3>
- <p class="mt-4 text-gray-400">Use Shopify when commerce needs it. Go custom when the business does not.</p>
- </a>
- <a href="why-not-wordpress.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
- <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not WordPress?</p>
- <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">WordPress vs custom website</h3>
- <p class="mt-4 text-gray-400">For owners who want less plugin upkeep and a build shaped around the business.</p>
- </a>
+ <ol class="space-y-7">
+ <li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
+ <p class="heading text-2xl font-bold text-[#ccff00]">01</p>
+ <p class="text-lg leading-8 text-gray-300">Answer our simple questionnaire <a href="#questionnaire">here</a>. It takes barely any time at all, it's only 5 questions.</p>
+ </li>
+ <li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
+ <p class="heading text-2xl font-bold text-[#ccff00]">02</p>
+ <p class="text-lg leading-8 text-gray-300">Within 24 hours, we send you a free live demo based on your answers.</p>
+ </li>
+ <li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
+ <p class="heading text-2xl font-bold text-[#ccff00]">03</p>
+ <p class="text-lg leading-8 text-gray-300">If you like the demo, we set up a call to discuss pricing and scope.</p>
+ </li>
+ <li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
+ <p class="heading text-2xl font-bold text-[#ccff00]">04</p>
+ <p class="text-lg leading-8 text-gray-300">We build your full website, mobile app, or Shopify store with hosting, domains, logos, and more.</p>
+ </li>
+ <li class="grid gap-4 py-6 md:grid-cols-[4rem_1fr]">
+ <p class="heading text-2xl font-bold text-[#ccff00]">05</p>
+ <p class="text-lg leading-8 text-gray-300">Watch your business boom.</p>
+ </li>
+ </ol>
+ </div>
+ </section>
+
+ <section id="about" 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]">About After Dark Labs</p>
+ <h2 class="heading text-4xl font-semibold leading-none tracking-tighter md:text-6xl">Built different, by design.</h2>
+ <div class="mt-8 max-w-3xl space-y-6 text-lg leading-8 text-gray-300">
+ <p>After Dark Labs, run by <a href="https://harrisonerd.com/" class="font-semibold text-white underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-[#ccff00]">Harrison Erd</a>, makes websites and applications for businesses across the United States.</p>
+ <p>Instead of relying only on templates, plugins, and cookie-cutter AI site builders that end up costing you money instead of making it for you, we build real software from the ground up — custom code, backend APIs, databases, 3rd party integrations, and tools designed around how your business actually works.</p>
+ <p>We create business websites, personal websites, Shopify stores, mobile apps, and internal tools. We can also implement memberships, subscriptions, portals, blogs, online bookings and more within your site. SEO, hosting, logo design, backend systems, and custom integrations can all be included, giving your business a complete digital foundation built to grow.</p>
</div>
</div>
- </div>
- </section>
+ </section>
- <!-- WORK -->
- <section id="work" class="py-28 bg-black">
- <div class="max-w-7xl mx-auto px-6">
- <div class="flex justify-between items-end mb-12">
- <div>
- <h2 class="heading text-5xl font-semibold tracking-tighter">Recent Work</h2>
+ <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>
+ <h2 class="heading text-4xl font-semibold tracking-tighter md:text-6xl">Our Work</h2>
+ </div>
+ <div class="grid gap-5 md:grid-cols-3">
+ <article class="overflow-hidden rounded-3xl bg-zinc-950">
+ <button type="button" class="block w-full cursor-zoom-in overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" data-work-preview>
+ <img src="https://afterdarklabs.io/miadruck.png?v=1" width="1901" height="1079" loading="lazy" class="h-48 w-full object-cover" alt="Mia Druck real estate website project by After Dark Labs">
+ </button>
+ <div class="p-6">
+ <p class="text-sm font-medium text-[#ccff00]">Website • Real estate</p>
+ <p class="mt-4 text-sm leading-6 text-gray-300">"The demo captured my brand quickly, and the final site made it easier for clients to find me and reach out to purchase their dream home." - <a href="https://miadruck.com" class="font-semibold text-white underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-[#ccff00]">Mia Druck</a></p>
+ </div>
+ </article>
+ <article class="overflow-hidden rounded-3xl bg-zinc-950">
+ <button type="button" class="block w-full cursor-zoom-in overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" data-work-preview>
+ <img src="https://afterdarklabs.io/gardenfresh.png?v=1" width="1901" height="1079" loading="lazy" class="h-48 w-full object-cover" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
+ </button>
+ <div class="p-6">
+ <p class="text-sm font-medium text-[#ccff00]">Business Website • SEO</p>
+ <p class="mt-4 text-sm leading-6 text-gray-300">"The new site gave our team a cleaner way to show products, answer customer questions, and bring in wholesale inquiries. And our mobile app After Dark Labs made for us lets us compete with the big guys by allowing our clients to place orders right from their phone." - <a href="https://gardenfreshwholesale.com" class="font-semibold text-white underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-[#ccff00]">Garden Fresh Wholesale</a></p>
+ </div>
+ </article>
+ <article class="overflow-hidden rounded-3xl bg-zinc-950">
+ <button type="button" class="block w-full cursor-zoom-in overflow-hidden rounded-t-3xl text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-[#17212b]" data-work-preview>
+ <img src="https://afterdarklabs.io/coralvibe.png?v=3" width="1901" height="1079" loading="lazy" class="h-48 w-full object-cover" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
+ </button>
+ <div class="p-6">
+ <p class="text-sm font-medium text-[#ccff00]">Shopify • E-Commerce</p>
+ <p class="mt-4 text-sm leading-6 text-gray-300">"Our Shopify store is cleaner, faster, and easier to shop. The product pages finally match my brand. We have seen sales increase 80 percent!" - <a href="https://coralvibefl.com" class="font-semibold text-white underline decoration-[#ccff00]/60 underline-offset-4 transition-colors hover:text-[#ccff00]">Coral Vibe</a></p>
+ </div>
+ </article>
</div>
</div>
- <div class="grid md:grid-cols-3 gap-8">
- <div class="group rounded-3xl overflow-hidden border border-white/10">
- <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
- <img src="https://afterdarklabs.io/miadruck.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Mia Druck real estate website project by After Dark Labs">
- </button>
- <div class="p-6">
- <div class="text-[#ccff00] text-sm font-medium">Website • Real estate</div>
- <h3 class="text-xl font-semibold mt-1">Mia Druck</h3>
- </div>
+ </section>
+
+ <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>
+ <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">Answer a few quick questions and we'll send you a real demo site within 24 hours — free, no strings attached.</p>
</div>
- <div class="group rounded-3xl overflow-hidden border border-white/10">
- <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
- <img src="https://afterdarklabs.io/gardenfresh.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
- </button>
- <div class="p-6">
- <div class="text-[#ccff00] text-sm font-medium">Business Website • SEO</div>
- <h3 class="text-xl font-semibold mt-1">Garden Fresh Wholesale</h3>
+
+ <form id="demo-questionnaire" class="space-y-8" action="https://formspree.io/f/xeedjery" method="POST" novalidate>
+ <input type="hidden" name="_gotcha" value="">
+
+ <div class="space-y-3">
+ <div class="flex items-center justify-between gap-4 text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">
+ <span id="questionnaire-step-label">Question 1 of 5</span>
+ <span id="questionnaire-step-name" class="text-[#ccff00]">Identity</span>
+ </div>
+ <div class="h-2 overflow-hidden rounded-full bg-white/10" aria-hidden="true">
+ <div id="questionnaire-progress" class="h-full w-1/5 rounded-full bg-[#ccff00] transition-all duration-300"></div>
+ </div>
</div>
- </div>
- <div class="group rounded-3xl overflow-hidden border border-white/10">
- <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
- <img src="https://afterdarklabs.io/invoiceotter.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Invoice Otter SaaS web app project by After Dark Labs">
- </button>
- <div class="p-6">
- <div class="text-[#ccff00] text-sm font-medium">Web App • SaaS</div>
- <h3 class="text-xl font-semibold mt-1">Invoice Otter</h3>
+
+ <div data-question-step="0">
+ <label for="name" class="mb-3 block text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">Name or Business Name <span class="text-[#ccff00]" aria-hidden="true">*</span><span class="sr-only"> required</span></label>
+ <input id="name" name="name_or_business_name" type="text" autocomplete="name" required class="min-h-12 w-full rounded-2xl border border-white/10 bg-black px-6 py-5 text-white outline-none transition-colors placeholder:text-gray-600 focus:border-[#ccff00]" placeholder="Your name or business">
</div>
- </div>
- <div class="group rounded-3xl overflow-hidden border border-white/10">
- <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
- <img src="https://afterdarklabs.io/vegy.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Vegy SaaS web app project by After Dark Labs">
- </button>
- <div class="p-6">
- <div class="text-[#ccff00] text-sm font-medium">Web App • SaaS</div>
- <h3 class="text-xl font-semibold mt-1">Vegy</h3>
+
+ <fieldset data-question-step="1" class="hidden">
+ <legend class="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">Services Needed <span class="text-[#ccff00]" aria-hidden="true">*</span><span class="sr-only"> required</span></legend>
+ <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+ <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="Business website" class="sr-only">Business website</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="Personal website" class="sr-only">Personal website</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="Shopify store" class="sr-only">Shopify store</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="E-commerce" class="sr-only">E-commerce</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="Online bookings" class="sr-only">Online bookings</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="Appointments" class="sr-only">Appointments</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="Subscriptions" class="sr-only">Subscriptions</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="Blog or content site" class="sr-only">Blog or content site</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="Dashboard" class="sr-only">Dashboard/Portal</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="Internal tool" class="sr-only">Internal tool</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">Mobile 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">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="SEO" class="sr-only">SEO</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="Saas MVP" class="sr-only">SaaS MVP</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="Backend or API integrations" class="sr-only">Backend or API integrations</label>
+ </div>
+ <p id="services-error" class="mt-3 hidden text-sm font-medium text-red-300">Select at least one service.</p>
+ </fieldset>
+
+ <div data-question-step="2" class="hidden">
+ <label for="business-description" class="mb-3 block text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">What you or your business does <span class="text-[#ccff00]" aria-hidden="true">*</span><span class="sr-only"> required</span></label>
+ <textarea id="business-description" name="business_description" rows="6" required class="min-h-36 w-full resize-none rounded-3xl border border-white/10 bg-black px-6 py-5 text-white outline-none transition-colors placeholder:text-gray-600 focus:border-[#ccff00]" placeholder="Tell us what you do, who you sell to, and what the demo should show."></textarea>
</div>
- </div>
- <div class="group rounded-3xl overflow-hidden border border-white/10">
- <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
- <img src="https://afterdarklabs.io/coralvibe.png?v=3" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
- </button>
- <div class="p-6">
- <div class="text-[#ccff00] text-sm font-medium">Shopify • E-Commerce</div>
- <h3 class="text-xl font-semibold mt-1">Coral Vibe</h3>
+
+ <fieldset data-question-step="3" class="hidden">
+ <legend class="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">Logo <span class="text-[#ccff00]" aria-hidden="true">*</span><span class="sr-only"> required</span></legend>
+ <div class="grid gap-3 sm:grid-cols-3">
+ <label class="logo-choice 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="radio" name="logo_status" value="I already have a logo" required class="sr-only">I have a logo</label>
+ <label class="logo-choice 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="radio" name="logo_status" value="Please design a logo" required class="sr-only">Design one</label>
+ </div>
+ </fieldset>
+
+ <div data-question-step="4" class="hidden">
+ <div class="grid gap-6 md:grid-cols-2">
+ <div>
+ <label for="contact-email" class="mb-3 block text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">Email address <span class="text-[#ccff00]" aria-hidden="true">*</span><span class="sr-only"> required</span></label>
+ <input id="contact-email" name="contact_email" type="email" autocomplete="email" required class="min-h-12 w-full rounded-2xl border border-white/10 bg-black px-6 py-5 text-white outline-none transition-colors placeholder:text-gray-600 focus:border-[#ccff00]" placeholder="[email protected]">
+ </div>
+ <div>
+ <label for="contact-phone" class="mb-3 block text-sm font-semibold uppercase tracking-[0.18em] text-gray-300">Phone number <span class="text-gray-500 normal-case tracking-normal">(optional)</span></label>
+ <input id="contact-phone" name="contact_phone" type="tel" autocomplete="tel" class="min-h-12 w-full rounded-2xl border border-white/10 bg-black px-6 py-5 text-white outline-none transition-colors placeholder:text-gray-600 focus:border-[#ccff00]" placeholder="(555) 555-5555">
+ </div>
+ </div>
</div>
- </div>
- <div class="group rounded-3xl overflow-hidden border border-white/10">
- <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
- <img src="https://afterdarklabs.io/tikitide.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Tiki tide boat rentals Florida keys online booking web app project by After Dark Labs">
- </button>
- <div class="p-6">
- <div class="text-[#ccff00] text-sm font-medium">Website • Online Booking</div>
- <h3 class="text-xl font-semibold mt-1">Tiki Tide Boat Rentals</h3>
+
+ <div class="flex flex-col gap-3 sm:flex-row">
+ <button type="button" id="questionnaire-back" class="hidden min-h-12 rounded-2xl bg-white/10 px-6 py-4 font-semibold text-white transition-colors hover:bg-white/15 sm:w-40">Back</button>
+ <button type="button" id="questionnaire-next" class="min-h-12 flex-1 rounded-2xl bg-[#ccff00] px-8 py-4 text-lg font-bold text-black transition-colors hover:bg-white">Next</button>
+ <button type="submit" id="questionnaire-submit" class="hidden min-h-12 flex-1 rounded-2xl bg-[#ccff00] px-8 py-4 text-lg font-bold text-black transition-colors hover:bg-white">Send questionnaire</button>
</div>
- </div>
- </div>
- </div>
- </section>
-
- <!-- ABOUT -->
- <section id="about" class="scroll-mt-24 bg-[#ccff00] text-black">
- <div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/55">About After Dark Labs</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Senior product execution, without the agency handoff.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">After Dark Labs is a boutique development studio based out of Fort Lauderdale, serving clients across the United States. From online stores, to custom internal tools for Fortune 500 companies, After Dark Labs specializes in taking ambitious ideas from concept to production.</p>
- <a href="about.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-black px-6 py-3 font-semibold text-white transition-colors hover:bg-zinc-800">
- More about After Dark Labs
- <span aria-hidden="true">→</span>
- </a>
+ <div id="questionnaire-status" class="hidden rounded-3xl border border-white/10 bg-black px-8 py-8" tabindex="-1" aria-live="polite"></div>
+ </form>
</div>
- <div class="space-y-8 text-lg leading-8 text-black/75">
- <div>
- <p class="heading text-4xl font-bold tracking-tighter text-black">Hands on</p>
- <p>Direct strategy, design decisions, development, launch planning, and follow-through from the person doing the work.</p>
- </div>
- <div>
- <p class="heading text-4xl font-bold tracking-tighter text-black">One stop shop</p>
- <p>Projects range from service business websites and Shopify stores to SaaS tools, booking flows, and mobile app experiences.</p>
- </div>
- <div>
- <p class="heading text-4xl font-bold tracking-tighter text-black">Lean by design</p>
- <p>No account-manager layers or agency handoffs, so more attention goes into the work that moves the business forward.</p>
- </div>
- </div>
- </div>
- </section>
-
- <!-- CTA -->
- <section id="contact" class="py-28 border-t border-b border-white/10 bg-zinc-950">
- <div class="max-w-3xl mx-auto text-center px-6">
- <h2 class="heading text-6xl font-bold tracking-tighter mb-6">Ready to build something exceptional?</h2>
- <p class="text-xl text-gray-400 mb-10">Tell us about your project. We reply the same day!</p>
- <form id="contact-form" class="space-y-6" action="https://formspree.io/f/xeedjery" method="POST">
- <input type="hidden" name="_subject" value="New project inquiry from After Dark Labs">
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
- <div class="text-left">
- <label for="contact-name" class="mb-2 block text-sm font-medium text-gray-300">Your Name</label>
- <input id="contact-name" type="text" name="name" placeholder="Your Name" autocomplete="name" required class="min-h-12 w-full bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
- </div>
- <div class="text-left">
- <label for="contact-email" class="mb-2 block text-sm font-medium text-gray-300">Business Email</label>
- <input id="contact-email" type="email" name="email" placeholder="Business Email" autocomplete="email" required class="min-h-12 w-full bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
- </div>
- </div>
- <div class="text-left">
- <label for="contact-message" class="mb-2 block text-sm font-medium text-gray-300">Project Details</label>
- <textarea id="contact-message" name="message" placeholder="Tell us about your project..." rows="6" required class="w-full min-h-36 bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-3xl px-6 py-5 outline-none resize-none"></textarea>
- </div>
- <button type="submit" class="min-h-12 w-full py-6 bg-[#ccff00] text-black font-bold text-xl rounded-3xl hover:scale-[1.02] transition-all">
- Send Message
- </button>
- </form>
- <div id="contact-status" class="hidden rounded-3xl border border-white/10 bg-zinc-900 px-8 py-10 text-left" tabindex="-1" aria-live="polite"></div>
- </div>
- </section>
+ </section>
</main>
- <!-- FOOTER -->
- <footer class="bg-black py-20">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <div class="flex items-center justify-center gap-3 mb-6">
- <div class="w-9 h-9 bg-black border-2 border-[#ccff00] rounded-2xl flex items-center justify-center text-2xl">🌑</div>
+ <footer class="border-t border-white/10 bg-black py-16">
+ <div class="mx-auto max-w-7xl px-6 text-center">
+ <a href="index2.html" class="mb-6 inline-flex items-center justify-center gap-3">
+ <div class="flex h-9 w-9 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black text-2xl">🌑</div>
<span class="heading text-3xl font-semibold tracking-tighter">After Dark Labs</span>
- </div>
+ </a>
<p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
</div>
</footer>
@@ -417,25 +350,218 @@
<script>
(function () {
- const form = document.getElementById('contact-form');
- const status = document.getElementById('contact-status');
+ const toggle = document.getElementById('mobile-nav-toggle');
+ const menu = document.getElementById('mobile-nav-menu');
+ if (!toggle || !menu) return;
+
+ const openIcon = toggle.querySelector('[data-menu-icon="open"]');
+ const closeIcon = toggle.querySelector('[data-menu-icon="close"]');
+
+ function setMenuOpen(isOpen) {
+ menu.classList.toggle('hidden', !isOpen);
+ toggle.setAttribute('aria-expanded', String(isOpen));
+ toggle.setAttribute('aria-label', isOpen ? 'Close navigation menu' : 'Open navigation menu');
+
+ if (openIcon && closeIcon) {
+ openIcon.classList.toggle('hidden', isOpen);
+ closeIcon.classList.toggle('hidden', !isOpen);
+ }
+ }
+
+ toggle.addEventListener('click', () => {
+ setMenuOpen(toggle.getAttribute('aria-expanded') !== 'true');
+ });
+
+ menu.querySelectorAll('a[href^="#"]').forEach(link => {
+ link.addEventListener('click', () => setMenuOpen(false));
+ });
+
+ window.addEventListener('keydown', event => {
+ if (event.key === 'Escape') setMenuOpen(false);
+ });
+
+ window.addEventListener('resize', () => {
+ if (window.innerWidth >= 1024) setMenuOpen(false);
+ });
+ })();
+
+ (function () {
+ const activeClasses = ['text-[#ccff00]', 'font-semibold'];
+ const navLinks = Array.from(document.querySelectorAll('nav a[data-nav-link]'));
+ const sections = [
+ { id: 'how-it-works', href: '#how-it-works' },
+ { id: 'about', href: '#about' },
+ { id: 'work', href: '#work' },
+ { id: 'questionnaire', href: '#questionnaire' },
+ ];
+
+ if (!navLinks.length) return;
+
+ function setActive(href) {
+ navLinks.forEach(link => {
+ const isActive = link.getAttribute('href') === href;
+ link.classList.toggle(activeClasses[0], isActive);
+ link.classList.toggle(activeClasses[1], isActive);
+
+ if (isActive) {
+ link.setAttribute('aria-current', 'page');
+ } else {
+ link.removeAttribute('aria-current');
+ }
+ });
+ }
+
+ function updateActiveNav() {
+ const offset = window.innerHeight * 0.35;
+ let currentHref = '';
+
+ for (const section of sections) {
+ const element = document.getElementById(section.id);
+ if (!element) continue;
+
+ if (element.getBoundingClientRect().top <= offset) {
+ currentHref = section.href;
+ }
+ }
+
+ setActive(currentHref);
+ }
+
+ function activeFromHash() {
+ return sections.some(section => section.href === window.location.hash)
+ ? window.location.hash
+ : '';
+ }
- if (!form || !status) return;
+ setActive(activeFromHash());
+ requestAnimationFrame(updateActiveNav);
+ window.addEventListener('load', updateActiveNav);
+ window.addEventListener('scroll', updateActiveNav, { passive: true });
+ window.addEventListener('hashchange', () => {
+ setActive(activeFromHash());
+ requestAnimationFrame(updateActiveNav);
+ });
+ })();
+
+ (function () {
+ const form = document.getElementById('demo-questionnaire');
+ const status = document.getElementById('questionnaire-status');
+ const servicesError = document.getElementById('services-error');
+ if (!form || !status || !servicesError) return;
+
+ const steps = Array.from(form.querySelectorAll('[data-question-step]'));
+ const backButton = document.getElementById('questionnaire-back');
+ const nextButton = document.getElementById('questionnaire-next');
+ const submitButton = document.getElementById('questionnaire-submit');
+ const stepLabel = document.getElementById('questionnaire-step-label');
+ const stepName = document.getElementById('questionnaire-step-name');
+ const progress = document.getElementById('questionnaire-progress');
+ const stepNames = ['Identity', 'Services', 'Business', 'Logo', 'Contact'];
+ let currentStep = 0;
+
+ if (!steps.length || !backButton || !nextButton || !submitButton || !stepLabel || !stepName || !progress) return;
- const submitButton = form.querySelector('button[type="submit"]');
const defaultButtonText = submitButton.textContent.trim();
+ function selectedServices() {
+ return Array.from(form.querySelectorAll('input[name="services_needed"]:checked'));
+ }
+
+ function fieldsForStep(step) {
+ return Array.from(step.querySelectorAll('input, textarea, select')).filter(field => !field.disabled);
+ }
+
+ function fieldValue(selector) {
+ const field = form.querySelector(selector);
+ return field ? field.value.trim() : '';
+ }
+
+ function checkedValue(selector) {
+ const field = form.querySelector(`${selector}:checked`);
+ return field ? field.value : '';
+ }
+
+ function buildMessage() {
+ const services = selectedServices().map(input => input.value).join(', ');
+
+ return [
+ `Name or business: ${fieldValue('[name="name_or_business_name"]')}`,
+ `Services needed: ${services}`,
+ `Business description: ${fieldValue('[name="business_description"]')}`,
+ `Logo: ${checkedValue('[name="logo_status"]')}`,
+ `Email: ${fieldValue('[name="contact_email"]')}`,
+ `Phone: ${fieldValue('[name="contact_phone"]') || 'Not provided'}`,
+ ].join('\n');
+ }
+
+ function setStep(index, shouldFocus) {
+ currentStep = Math.max(0, Math.min(index, steps.length - 1));
+
+ steps.forEach((step, stepIndex) => {
+ step.classList.toggle('hidden', stepIndex !== currentStep);
+ });
+
+ const isFirst = currentStep === 0;
+ const isLast = currentStep === steps.length - 1;
+
+ backButton.classList.toggle('hidden', isFirst);
+ nextButton.classList.toggle('hidden', isLast);
+ submitButton.classList.toggle('hidden', !isLast);
+ stepLabel.textContent = `Question ${currentStep + 1} of ${steps.length}`;
+ stepName.textContent = stepNames[currentStep] || '';
+ progress.style.width = `${((currentStep + 1) / steps.length) * 100}%`;
+
+ if (shouldFocus) {
+ const firstField = fieldsForStep(steps[currentStep])[0];
+ if (firstField) firstField.focus({ preventScroll: true });
+ }
+ }
+
+ function validateStep(index) {
+ const step = steps[index];
+ if (!step) return true;
+
+ const servicesStep = step.querySelector('input[name="services_needed"]');
+ if (servicesStep) {
+ const hasServices = selectedServices().length > 0;
+ servicesError.classList.toggle('hidden', hasServices);
+ if (!hasServices) {
+ servicesError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ return false;
+ }
+ }
+
+ for (const field of fieldsForStep(step)) {
+ if (!field.checkValidity()) {
+ field.reportValidity();
+ return false;
+ }
+ }
+
+ return true;
+ }
+
+ function validateAllSteps() {
+ for (let index = 0; index < steps.length; index++) {
+ setStep(index, false);
+ if (!validateStep(index)) return false;
+ }
+
+ setStep(steps.length - 1, false);
+ return true;
+ }
+
function showStatus(type, title, message) {
const isSuccess = type === 'success';
status.className = [
- 'rounded-3xl border px-8 py-10 text-left',
- isSuccess ? 'border-[#ccff00]/40 bg-[#ccff00]/10' : 'border-red-400/40 bg-red-950/30',
+ 'rounded-3xl border px-8 py-8',
+ isSuccess ? 'border-[#ccff00]/50 bg-[#ccff00]/10' : 'border-red-400/40 bg-red-950/30',
].join(' ');
status.setAttribute('role', isSuccess ? 'status' : 'alert');
const eyebrow = document.createElement('p');
eyebrow.className = `text-sm font-semibold uppercase tracking-[0.2em] ${isSuccess ? 'text-[#ccff00]' : 'text-red-300'}`;
- eyebrow.textContent = isSuccess ? 'Message sent' : 'Message not sent';
+ eyebrow.textContent = isSuccess ? 'Questionnaire sent' : 'Questionnaire not sent';
const heading = document.createElement('h3');
heading.className = 'heading mt-3 text-3xl font-semibold tracking-tighter text-white';
@@ -446,23 +572,35 @@
body.textContent = message;
status.replaceChildren(eyebrow, heading, body);
- form.remove();
+ status.classList.remove('hidden');
status.focus({ preventScroll: true });
+
+ if (isSuccess) {
+ form.querySelectorAll(':scope > *:not(#questionnaire-status)').forEach(element => {
+ element.remove();
+ });
+ }
}
form.addEventListener('submit', async event => {
event.preventDefault();
- if (!form.reportValidity()) return;
+ if (!validateAllSteps()) return;
submitButton.disabled = true;
submitButton.textContent = 'Sending...';
submitButton.classList.add('cursor-wait', 'opacity-80');
try {
+ const formData = new FormData(form);
+ const cleanFormData = new FormData();
+ cleanFormData.append('_gotcha', formData.get('_gotcha') || '');
+ cleanFormData.append('email', fieldValue('[name="contact_email"]'));
+ cleanFormData.append('message', buildMessage());
+
const response = await fetch(form.action, {
method: form.method,
- body: new FormData(form),
+ body: cleanFormData,
headers: { Accept: 'application/json' },
});
const data = await response.json().catch(() => ({}));
@@ -471,26 +609,55 @@
const errors = Array.isArray(data.errors)
? data.errors.map(error => error.message).filter(Boolean).join(' ')
: '';
- throw new Error(errors || 'The message could not be submitted.');
+ throw new Error(errors || 'The questionnaire could not be submitted.');
}
showStatus(
'success',
- 'Thank you. We will be in touch soon.',
- 'Your project details were sent successfully, and we will reply as soon as possible.'
+ 'Thanks. We will build your demo from this.',
+ 'Your questionnaire was sent successfully. We will review it and respond with the next step.'
);
} catch (error) {
showStatus(
'error',
- 'We could not send your message.',
+ 'We could not send your questionnaire.',
error.message || 'Please refresh the page and try again in a moment.'
);
} finally {
- submitButton.disabled = false;
+ if (!status.getAttribute('role') || status.getAttribute('role') === 'alert') {
+ submitButton.disabled = false;
+ }
submitButton.textContent = defaultButtonText;
submitButton.classList.remove('cursor-wait', 'opacity-80');
}
});
+
+ nextButton.addEventListener('click', () => {
+ if (validateStep(currentStep)) {
+ setStep(currentStep + 1, true);
+ }
+ });
+
+ backButton.addEventListener('click', () => {
+ setStep(currentStep - 1, true);
+ });
+
+ form.querySelectorAll('input[name="services_needed"]').forEach(input => {
+ input.addEventListener('change', () => {
+ if (selectedServices().length > 0) {
+ servicesError.classList.add('hidden');
+ }
+ });
+ });
+
+ form.addEventListener('keydown', event => {
+ if (event.key === 'Enter' && event.target.tagName !== 'TEXTAREA' && currentStep < steps.length - 1) {
+ event.preventDefault();
+ nextButton.click();
+ }
+ });
+
+ setStep(0, false);
})();
(function () {
@@ -500,6 +667,8 @@
const previewButtons = document.querySelectorAll('[data-work-preview]');
let lastFocused = null;
+ if (!modal || !modalImage || !closeButton || !previewButtons.length) return;
+
function openPreview(button) {
const image = button.querySelector('img');
lastFocused = document.activeElement;
@@ -621,7 +790,7 @@
function frame() {
t++;
ctx.clearRect(0, 0, W, H);
- ctx.fillStyle = '#050505';
+ ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--page-bg').trim() || '#17212b';
ctx.fillRect(0, 0, W, H);
drawOrbs(t);
@@ -683,7 +852,7 @@
drawRings();
for (let y = 0; y < H; y += 4) {
- ctx.fillStyle = 'rgba(0,0,0,0.04)';
+ ctx.fillStyle = 'rgba(255,255,255,0.018)';
ctx.fillRect(0, y, W, 1);
}
diff --git a/docs/index_old.html b/docs/index_old.html
new file mode 100644
index 0000000..779546a
--- /dev/null
+++ b/docs/index_old.html
@@ -0,0 +1,922 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
+ <link rel="apple-touch-icon" href="/moon-stars-fill.svg">
+ <link rel="manifest" href="/site.webmanifest">
+ <title>Business Websites & Apps | After Dark Labs</title>
+ <meta name="description" content="After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools.">
+ <meta name="robots" content="index,follow">
+ <link rel="canonical" href="https://afterdarklabs.io/">
+ <meta property="og:title" content="Business Websites & Apps | After Dark Labs">
+ <meta property="og:description" content="After Dark Labs builds business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom tools.">
+ <meta property="og:image" content="https://afterdarklabs.io/twitter-card.png">
+ <meta property="og:image:width" content="1536">
+ <meta property="og:image:height" content="1024">
+ <meta property="og:image:alt" content="After Dark Labs business websites and mobile apps">
+ <meta property="og:type" content="website">
+ <meta property="og:url" content="https://afterdarklabs.io/">
+ <meta property="og:site_name" content="After Dark Labs">
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:title" content="Business Websites & Apps | After Dark Labs">
+ <meta name="twitter:description" content="After Dark Labs builds business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom tools.">
+ <meta name="twitter:image" content="https://afterdarklabs.io/twitter-card.png">
+ <meta name="twitter:image:alt" content="After Dark Labs business websites and mobile apps">
+ <script src="https://cdn.tailwindcss.com"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+ <script src="site.js" defer></script>
+ <style>
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
+
+ :root { --neon: #ccff00; }
+
+ body { font-family: 'Inter', system-ui, sans-serif; }
+ .heading { font-family: 'Space Grotesk', sans-serif; }
+
+ .hero-bg { background: linear-gradient(135deg, #030303 0%, #0a0a0a 100%); }
+
+ .neon-text {
+ color: var(--neon);
+ text-shadow: 0 0 10px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon);
+ }
+
+ /* Full-hero canvas */
+ #hero-canvas {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ z-index: 0;
+ }
+
+ .hero-content {
+ position: relative;
+ z-index: 1;
+ }
+
+ /* Vignette so edges stay dark and text pops */
+ .hero-vignette {
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%),
+ linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.5) 100%);
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ .section-canvas {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ pointer-events: none;
+ z-index: 0;
+ }
+
+ .section-scrim {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.22) 45%, rgba(0,0,0,0.72) 100%),
+ linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.02) 45%, rgba(0,0,0,0.28));
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ .section-scrim-soft {
+ background:
+ linear-gradient(90deg, rgba(0,0,0,0.78), rgba(0,0,0,0.20) 52%, rgba(0,0,0,0.74)),
+ linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(0,0,0,0.26));
+ }
+
+ #services {
+ background:
+ linear-gradient(135deg, rgba(204,255,0,0.08), transparent 34%),
+ linear-gradient(225deg, rgba(255,255,255,0.06), transparent 30%),
+ #000;
+ }
+
+ #about {
+ background:
+ linear-gradient(155deg, rgba(204,255,0,0.10), transparent 42%),
+ linear-gradient(25deg, rgba(255,255,255,0.05), transparent 38%),
+ #000;
+ }
+ </style>
+ <script type="application/ld+json">
+ {
+ "@context": "https://schema.org",
+ "@graph": [
+ {
+ "@type": "Organization",
+ "@id": "https://afterdarklabs.io/#organization",
+ "name": "After Dark Labs",
+ "url": "https://afterdarklabs.io/",
+ "logo": "https://afterdarklabs.io/logo.png",
+ "founder": {
+ "@type": "Person",
+ "name": "Harrison Erd"
+ },
+ "areaServed": {
+ "@type": "Country",
+ "name": "United States"
+ },
+ "description": "After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools."
+ },
+ {
+ "@type": "WebSite",
+ "@id": "https://afterdarklabs.io/#website",
+ "url": "https://afterdarklabs.io/",
+ "name": "After Dark Labs",
+ "publisher": {
+ "@id": "https://afterdarklabs.io/#organization"
+ },
+ "description": "After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools."
+ }
+ ]
+ }
+ </script>
+</head>
+<body class="bg-black text-white overflow-x-hidden">
+
+ <nav class="fixed top-0 w-full bg-black/90 backdrop-blur-lg z-50 border-b border-white/10">
+ <div class="max-w-7xl mx-auto px-6 py-5 flex justify-between items-center">
+ <a href="index.html" class="flex items-center gap-3">
+ <div class="w-9 h-9 bg-black border-2 border-[#ccff00] rounded-2xl flex items-center justify-center text-xl font-bold">🌑</div>
+ <div>
+ <span class="heading text-2xl font-semibold tracking-tighter">After Dark</span>
+ <span class="text-[#ccff00] text-sm tracking-[3px] block -mt-1">LABS</span>
+ </div>
+ </a>
+ <div class="hidden lg:flex items-center gap-5 text-sm font-medium xl:gap-7">
+ <a href="index.html#mobile-apps" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
+ <a href="index.html#business-websites" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
+ <a href="index.html#shopify-stores" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
+ <a href="index.html#why-us" class="hover:text-[#ccff00] transition-colors">Why Us</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Our Work</a>
+ <a href="index.html#about" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <!-- HERO -->
+ <section class="hero-bg min-h-screen flex items-center pt-20" style="position:relative; overflow:hidden;">
+ <canvas id="hero-canvas"></canvas>
+ <div class="hero-vignette"></div>
+
+ <div class="hero-content mx-auto grid w-full max-w-7xl gap-10 px-6 py-32 text-left lg:grid-cols-[1.3fr_0.7fr] lg:items-end">
+ <div>
+ <h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl">
+ Custom websites<br>and mobile apps<br>that help businesses<br><span class="neon-text">thrive</span>.
+ </h1>
+ </div>
+ <div class="mx-auto flex max-w-xl flex-col items-start gap-8 lg:mx-0">
+ <div class="flex flex-wrap gap-5 justify-start">
+ <a href="#contact" 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 a FREE demo
+ <span class="group-hover:rotate-45 transition-transform">→</span>
+ </a>
+ <a href="#work" class="px-8 py-5 border border-white/30 hover:border-[#ccff00] font-medium rounded-3xl text-lg transition-all">
+ See Our Work
+ </a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- SERVICES -->
+ <section id="services" class="relative isolate overflow-hidden bg-black">
+ <canvas class="section-canvas" data-section-canvas="grid" aria-hidden="true"></canvas>
+ <div class="section-scrim" aria-hidden="true"></div>
+ <article id="mobile-apps" class="relative z-[2] scroll-mt-24 border-t border-white/10 bg-black/10 text-white">
+ <div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:min-h-[520px] lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
+ <div>
+ <div class="mb-8 text-7xl" aria-hidden="true">📱</div>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Mobile app development</p>
+ <h3 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">
+ <a href="mobile-apps.html" class="transition-opacity hover:opacity-70">Custom Mobile Apps</a>
+ </h3>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Custom iOS, Android, and cross-platform apps with branding, UI/UX, backend integrations, launch support, and marketing momentum.</p>
+ <a href="mobile-apps.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">
+ Explore mobile app development
+ <span aria-hidden="true">→</span>
+ </a>
+ </div>
+ <ul class="space-y-5 text-lg font-semibold md:text-xl">
+ <li><a href="mobile-app-branding-ui-ux.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Branding, logo design, stunning UI/UX</span></a></li>
+ <li><a href="backend-api-integration.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Backend + API Integration</span></a></li>
+ <li><a href="app-store-launch-support.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>App Store Launch & Support (iOS + Android)</span></a></li>
+ <li><a href="influencer-marketing-social-media.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Influencer marketing on social media</span></a></li>
+ </ul>
+ </div>
+ </article>
+ <article id="business-websites" class="relative z-[2] scroll-mt-24 border-t border-white/10 bg-zinc-950/45 text-white">
+ <div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:min-h-[520px] lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
+ <div class="lg:order-2">
+ <div class="mb-8 text-7xl" aria-hidden="true">🌐</div>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Website development</p>
+ <h3 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">
+ <a href="business-websites.html" class="transition-opacity hover:opacity-70">Business Websites</a>
+ </h3>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Fast, conversion-focused websites for service businesses, construction companies, plumbers, electricians, auto sales teams, ecommerce, bookings, SEO, and long-term growth.</p>
+ <a href="business-websites.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">
+ Explore business websites
+ <span aria-hidden="true">→</span>
+ </a>
+ </div>
+ <ul class="space-y-5 text-lg font-semibold md:text-xl lg:order-1">
+ <li><a href="service-business-website-design.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Service business website design for contractors, trades, and auto sales</span></a></li>
+ <li><a href="business-websites.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Business website design and development</span></a></li>
+ <li><a href="custom-web-development-ecommerce.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Custom Web Development and E-commerce Solutions</span></a></li>
+ <li><a href="online-bookings-appointments-memberships.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Online bookings, appointments, and subscription memberships</span></a></li>
+ <li><a href="business-website-seo.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Business website SEO and performance</span></a></li>
+ </ul>
+ </div>
+ </article>
+ <article id="shopify-stores" class="relative z-[2] scroll-mt-24 border-t border-white/10 bg-black/10 text-white">
+ <div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:min-h-[520px] lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
+ <div>
+ <div class="mb-8 text-7xl" aria-hidden="true">🛒</div>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Commerce systems</p>
+ <h3 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">
+ <a href="shopify-stores.html" class="transition-opacity hover:opacity-70">Shopify Stores</a>
+ </h3>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Shopify store builds and improvements for brands that need better product structure, polished theme customization, faster storefronts, checkout clarity, and search-ready content.</p>
+ <a href="shopify-stores.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">
+ Explore Shopify stores
+ <span aria-hidden="true">→</span>
+ </a>
+ </div>
+ <ul class="space-y-5 text-lg font-semibold md:text-xl">
+ <li><a href="shopify-store-design.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Shopify storefront design and theme customization</span></a></li>
+ <li><a href="shopify-stores.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Product, collection, and checkout structure</span></a></li>
+ <li><a href="shopify-seo-optimization.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Shopify SEO, performance, and metadata</span></a></li>
+ <li><a href="shopify-migration-optimization.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Store migration, cleanup, and launch support</span></a></li>
+ </ul>
+ </div>
+ </article>
+ </section>
+
+ <!-- WHY US -->
+ <section id="why-us" class="scroll-mt-24 bg-black text-white">
+ <div class="max-w-7xl mx-auto px-6 py-20 md:py-28">
+ <div class="grid gap-12 lg:grid-cols-[0.95fr_1.05fr] lg:items-start">
+ <div>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Why After Dark Labs</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Why work with us instead of Wix, Shopify, Squarespace, or another builder?</h2>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Website builders can be useful for quick starts. After Dark Labs is for businesses that want a custom strategy, cleaner SEO structure, faster pages, ownership-minded decisions, and a one-time build fee instead of shaping the business around a template.</p>
+ <p class="mt-5 max-w-2xl text-sm leading-7 text-gray-500">Domains, hosting, third-party tools, apps, maintenance, Shopify plans, and optional support can still have their own costs.</p>
+ <a href="custom-business-website-development.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">
+ Explore custom website development
+ <span aria-hidden="true">→</span>
+ </a>
+ </div>
+ <div class="grid gap-4 sm:grid-cols-2">
+ <a href="why-not-wix.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
+ <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not Wix?</p>
+ <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">Wix vs custom website</h3>
+ <p class="mt-4 text-gray-400">For businesses that need more than a template and generic page structure.</p>
+ </a>
+ <a href="why-not-squarespace.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
+ <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not Squarespace?</p>
+ <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">Squarespace vs custom website</h3>
+ <p class="mt-4 text-gray-400">For brands that need SEO depth, custom flows, and room to evolve.</p>
+ </a>
+ <a href="why-not-godaddy-website-builder.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
+ <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not GoDaddy?</p>
+ <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">GoDaddy builder vs custom website</h3>
+ <p class="mt-4 text-gray-400">For local teams that need a real sales path, not just a quick web presence.</p>
+ </a>
+ <a href="why-not-webflow.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
+ <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not Webflow?</p>
+ <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">Webflow vs custom website</h3>
+ <p class="mt-4 text-gray-400">For teams that want the finished system handled without design-tool upkeep.</p>
+ </a>
+ <a href="why-not-shopify.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
+ <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not Shopify?</p>
+ <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">Shopify or custom website?</h3>
+ <p class="mt-4 text-gray-400">Use Shopify when commerce needs it. Go custom when the business does not.</p>
+ </a>
+ <a href="why-not-wordpress.html" class="group min-h-40 border border-white/10 bg-zinc-950 p-6 transition-colors hover:border-[#ccff00]/70">
+ <p class="text-sm font-bold uppercase tracking-[0.22em] text-[#ccff00]">Why not WordPress?</p>
+ <h3 class="heading mt-4 text-3xl font-semibold tracking-tighter">WordPress vs custom website</h3>
+ <p class="mt-4 text-gray-400">For owners who want less plugin upkeep and a build shaped around the business.</p>
+ </a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- WORK -->
+ <section id="work" class="py-28 bg-black">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="flex justify-between items-end mb-12">
+ <div>
+ <h2 class="heading text-5xl font-semibold tracking-tighter">Recent Work</h2>
+ </div>
+ </div>
+ <div class="grid md:grid-cols-3 gap-8">
+ <div class="group rounded-3xl overflow-hidden border border-white/10">
+ <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
+ <img src="https://afterdarklabs.io/miadruck.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Mia Druck real estate website project by After Dark Labs">
+ </button>
+ <div class="p-6">
+ <div class="text-[#ccff00] text-sm font-medium">Website • Real estate</div>
+ <h3 class="text-xl font-semibold mt-1">Mia Druck</h3>
+ </div>
+ </div>
+ <div class="group rounded-3xl overflow-hidden border border-white/10">
+ <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
+ <img src="https://afterdarklabs.io/gardenfresh.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
+ </button>
+ <div class="p-6">
+ <div class="text-[#ccff00] text-sm font-medium">Business Website • SEO</div>
+ <h3 class="text-xl font-semibold mt-1">Garden Fresh Wholesale</h3>
+ </div>
+ </div>
+ <div class="group rounded-3xl overflow-hidden border border-white/10">
+ <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
+ <img src="https://afterdarklabs.io/invoiceotter.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Invoice Otter SaaS web app project by After Dark Labs">
+ </button>
+ <div class="p-6">
+ <div class="text-[#ccff00] text-sm font-medium">Web App • SaaS</div>
+ <h3 class="text-xl font-semibold mt-1">Invoice Otter</h3>
+ </div>
+ </div>
+ <div class="group rounded-3xl overflow-hidden border border-white/10">
+ <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
+ <img src="https://afterdarklabs.io/vegy.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Vegy SaaS web app project by After Dark Labs">
+ </button>
+ <div class="p-6">
+ <div class="text-[#ccff00] text-sm font-medium">Web App • SaaS</div>
+ <h3 class="text-xl font-semibold mt-1">Vegy</h3>
+ </div>
+ </div>
+ <div class="group rounded-3xl overflow-hidden border border-white/10">
+ <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
+ <img src="https://afterdarklabs.io/coralvibe.png?v=3" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
+ </button>
+ <div class="p-6">
+ <div class="text-[#ccff00] text-sm font-medium">Shopify • E-Commerce</div>
+ <h3 class="text-xl font-semibold mt-1">Coral Vibe</h3>
+ </div>
+ </div>
+ <div class="group rounded-3xl overflow-hidden border border-white/10">
+ <button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
+ <img src="https://afterdarklabs.io/tikitide.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Tiki tide boat rentals Florida keys online booking web app project by After Dark Labs">
+ </button>
+ <div class="p-6">
+ <div class="text-[#ccff00] text-sm font-medium">Website • Online Booking</div>
+ <h3 class="text-xl font-semibold mt-1">Tiki Tide Boat Rentals</h3>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- ABOUT -->
+ <section id="about" class="relative isolate overflow-hidden scroll-mt-24 border-t border-white/10 bg-black text-white">
+ <canvas class="section-canvas" data-section-canvas="signal" aria-hidden="true"></canvas>
+ <div class="section-scrim section-scrim-soft" aria-hidden="true"></div>
+ <div class="relative z-[2] max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
+ <div>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">About After Dark Labs</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Senior product execution, without the agency handoff.</h2>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">After Dark Labs is a boutique development studio based out of Fort Lauderdale, serving clients across the United States. From online stores, to custom internal tools for Fortune 500 companies, After Dark Labs specializes in taking ambitious ideas from concept to production.</p>
+ <a href="about.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">
+ More about After Dark Labs
+ <span aria-hidden="true">→</span>
+ </a>
+ </div>
+ <div class="space-y-8 text-lg leading-8 text-gray-300">
+ <div>
+ <p class="heading text-4xl font-bold tracking-tighter text-white">Hands on</p>
+ <p>Direct strategy, design decisions, development, launch planning, and follow-through from the person doing the work.</p>
+ </div>
+ <div>
+ <p class="heading text-4xl font-bold tracking-tighter text-white">One stop shop</p>
+ <p>Projects range from service business websites and Shopify stores to SaaS tools, booking flows, and mobile app experiences.</p>
+ </div>
+ <div>
+ <p class="heading text-4xl font-bold tracking-tighter text-white">Lean by design</p>
+ <p>No account-manager layers or agency handoffs, so more attention goes into the work that moves the business forward.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- CTA -->
+ <section id="contact" class="py-28 border-t border-b border-white/10 bg-zinc-950">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-6xl font-bold tracking-tighter mb-6">Ready to build something exceptional?</h2>
+ <p class="text-xl text-gray-400 mb-10">Tell us about your project. We reply the same day!</p>
+ <form id="contact-form" class="space-y-6" action="https://formspree.io/f/xeedjery" method="POST">
+ <input type="hidden" name="_subject" value="New project inquiry from After Dark Labs">
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+ <div class="text-left">
+ <label for="contact-name" class="mb-2 block text-sm font-medium text-gray-300">Your Name</label>
+ <input id="contact-name" type="text" name="name" placeholder="Your Name" autocomplete="name" required class="min-h-12 w-full bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
+ </div>
+ <div class="text-left">
+ <label for="contact-email" class="mb-2 block text-sm font-medium text-gray-300">Business Email</label>
+ <input id="contact-email" type="email" name="email" placeholder="Business Email" autocomplete="email" required class="min-h-12 w-full bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
+ </div>
+ </div>
+ <div class="text-left">
+ <label for="contact-message" class="mb-2 block text-sm font-medium text-gray-300">Project Details</label>
+ <textarea id="contact-message" name="message" placeholder="Tell us about your project..." rows="6" required class="w-full min-h-36 bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-3xl px-6 py-5 outline-none resize-none"></textarea>
+ </div>
+ <button type="submit" class="min-h-12 w-full py-6 bg-[#ccff00] text-black font-bold text-xl rounded-3xl hover:scale-[1.02] transition-all">
+ Send Message
+ </button>
+ </form>
+ <div id="contact-status" class="hidden rounded-3xl border border-white/10 bg-zinc-900 px-8 py-10 text-left" tabindex="-1" aria-live="polite"></div>
+ </div>
+ </section>
+ </main>
+
+ <!-- FOOTER -->
+ <footer class="bg-black py-20">
+ <div class="max-w-7xl mx-auto px-6 text-center">
+ <div class="flex items-center justify-center gap-3 mb-6">
+ <div class="w-9 h-9 bg-black border-2 border-[#ccff00] rounded-2xl flex items-center justify-center text-2xl">🌑</div>
+ <span class="heading text-3xl font-semibold tracking-tighter">After Dark Labs</span>
+ </div>
+ <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
+ </div>
+ </footer>
+
+ <div id="work-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-black/85 px-4 py-8 backdrop-blur-sm" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Work screenshot preview">
+ <button type="button" id="work-modal-close" class="absolute right-5 top-5 h-12 w-12 text-4xl leading-none text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="Close screenshot preview">×</button>
+ <img id="work-modal-image" class="max-h-[86vh] max-w-[94vw] object-contain shadow-2xl" alt="Selected work screenshot preview">
+ </div>
+
+ <script>
+ (function () {
+ const form = document.getElementById('contact-form');
+ const status = document.getElementById('contact-status');
+
+ if (!form || !status) return;
+
+ const submitButton = form.querySelector('button[type="submit"]');
+ const defaultButtonText = submitButton.textContent.trim();
+
+ function showStatus(type, title, message) {
+ const isSuccess = type === 'success';
+ status.className = [
+ 'rounded-3xl border px-8 py-10 text-left',
+ isSuccess ? 'border-[#ccff00]/40 bg-[#ccff00]/10' : 'border-red-400/40 bg-red-950/30',
+ ].join(' ');
+ status.setAttribute('role', isSuccess ? 'status' : 'alert');
+
+ const eyebrow = document.createElement('p');
+ eyebrow.className = `text-sm font-semibold uppercase tracking-[0.2em] ${isSuccess ? 'text-[#ccff00]' : 'text-red-300'}`;
+ eyebrow.textContent = isSuccess ? 'Message sent' : 'Message not sent';
+
+ const heading = document.createElement('h3');
+ heading.className = 'heading mt-3 text-3xl font-semibold tracking-tighter text-white';
+ heading.textContent = title;
+
+ const body = document.createElement('p');
+ body.className = 'mt-4 text-lg leading-8 text-gray-300';
+ body.textContent = message;
+
+ status.replaceChildren(eyebrow, heading, body);
+ form.remove();
+ status.focus({ preventScroll: true });
+ }
+
+ form.addEventListener('submit', async event => {
+ event.preventDefault();
+
+ if (!form.reportValidity()) return;
+
+ submitButton.disabled = true;
+ submitButton.textContent = 'Sending...';
+ submitButton.classList.add('cursor-wait', 'opacity-80');
+
+ try {
+ const response = await fetch(form.action, {
+ method: form.method,
+ body: new FormData(form),
+ headers: { Accept: 'application/json' },
+ });
+ const data = await response.json().catch(() => ({}));
+
+ if (!response.ok) {
+ const errors = Array.isArray(data.errors)
+ ? data.errors.map(error => error.message).filter(Boolean).join(' ')
+ : '';
+ throw new Error(errors || 'The message could not be submitted.');
+ }
+
+ showStatus(
+ 'success',
+ 'Thank you. We will be in touch soon.',
+ 'Your project details were sent successfully, and we will reply as soon as possible.'
+ );
+ } catch (error) {
+ showStatus(
+ 'error',
+ 'We could not send your message.',
+ error.message || 'Please refresh the page and try again in a moment.'
+ );
+ } finally {
+ submitButton.disabled = false;
+ submitButton.textContent = defaultButtonText;
+ submitButton.classList.remove('cursor-wait', 'opacity-80');
+ }
+ });
+ })();
+
+ (function () {
+ const modal = document.getElementById('work-modal');
+ const modalImage = document.getElementById('work-modal-image');
+ const closeButton = document.getElementById('work-modal-close');
+ const previewButtons = document.querySelectorAll('[data-work-preview]');
+ let lastFocused = null;
+
+ function openPreview(button) {
+ const image = button.querySelector('img');
+ lastFocused = document.activeElement;
+ modalImage.src = image.currentSrc || image.src;
+ modalImage.alt = image.alt;
+ modal.classList.remove('hidden');
+ modal.classList.add('flex');
+ modal.setAttribute('aria-hidden', 'false');
+ document.body.classList.add('overflow-hidden');
+ closeButton.focus({ preventScroll: true });
+ }
+
+ function closePreview() {
+ modal.classList.add('hidden');
+ modal.classList.remove('flex');
+ modal.setAttribute('aria-hidden', 'true');
+ modalImage.removeAttribute('src');
+ document.body.classList.remove('overflow-hidden');
+ if (lastFocused) lastFocused.focus({ preventScroll: true });
+ }
+
+ previewButtons.forEach(button => {
+ button.addEventListener('click', () => openPreview(button));
+ });
+
+ closeButton.addEventListener('click', closePreview);
+ modal.addEventListener('click', event => {
+ if (event.target === modal) closePreview();
+ });
+ window.addEventListener('keydown', event => {
+ if (event.key === 'Escape' && !modal.classList.contains('hidden')) closePreview();
+ });
+ })();
+
+ /* Section canvas backgrounds */
+ (function () {
+ const canvases = Array.from(document.querySelectorAll('[data-section-canvas]'));
+ if (!canvases.length) return;
+
+ const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+ function pixelRatio() {
+ return Math.min(window.devicePixelRatio || 1, 2);
+ }
+
+ function resizeScene(scene) {
+ const rect = scene.section.getBoundingClientRect();
+ scene.ratio = pixelRatio();
+ scene.width = Math.max(1, Math.floor(rect.width * scene.ratio));
+ scene.height = Math.max(1, Math.floor(rect.height * scene.ratio));
+ scene.canvas.width = scene.width;
+ scene.canvas.height = scene.height;
+ scene.canvas.style.width = `${rect.width}px`;
+ scene.canvas.style.height = `${rect.height}px`;
+ }
+
+ const scenes = canvases.map(canvas => {
+ const section = canvas.parentElement;
+ const ctx = canvas.getContext('2d');
+ if (!section || !ctx) return null;
+
+ const scene = {
+ canvas,
+ section,
+ ctx,
+ mode: canvas.dataset.sectionCanvas,
+ ratio: 1,
+ width: 1,
+ height: 1,
+ };
+ resizeScene(scene);
+ return scene;
+ }).filter(Boolean);
+
+ function drawGrid(scene, time) {
+ const { ctx, width, height, ratio } = scene;
+ const cell = 54 * ratio;
+ const drift = reduceMotion ? 0 : (time * 0.018 * ratio) % cell;
+
+ ctx.clearRect(0, 0, width, height);
+ ctx.lineWidth = Math.max(0.75, ratio);
+
+ for (let x = -cell + drift; x <= width + cell; x += cell) {
+ const alpha = 0.11 + 0.055 * Math.sin((x / cell) * 0.85 + time * 0.001);
+ ctx.strokeStyle = `rgba(204,255,0,${alpha})`;
+ ctx.beginPath();
+ ctx.moveTo(x, 0);
+ ctx.lineTo(x, height);
+ ctx.stroke();
+ }
+
+ for (let y = -cell + drift * 0.6; y <= height + cell; y += cell) {
+ ctx.strokeStyle = 'rgba(255,255,255,0.075)';
+ ctx.beginPath();
+ ctx.moveTo(0, y);
+ ctx.lineTo(width, y);
+ ctx.stroke();
+ }
+
+ ctx.save();
+ ctx.globalCompositeOperation = 'lighter';
+ const sweep = reduceMotion ? width * 0.68 : (time * 0.07 * ratio) % (width + cell * 8) - cell * 4;
+ const sweepGradient = ctx.createLinearGradient(sweep - cell * 3, 0, sweep + cell * 3, 0);
+ sweepGradient.addColorStop(0, 'rgba(204,255,0,0)');
+ sweepGradient.addColorStop(0.5, 'rgba(204,255,0,0.30)');
+ sweepGradient.addColorStop(1, 'rgba(204,255,0,0)');
+ ctx.fillStyle = sweepGradient;
+ ctx.fillRect(sweep - cell * 3, 0, cell * 6, height);
+
+ ctx.strokeStyle = 'rgba(204,255,0,0.18)';
+ ctx.lineWidth = Math.max(1, ratio);
+ for (let i = -4; i < 12; i++) {
+ const x = i * cell * 3 + drift * 1.8;
+ ctx.beginPath();
+ ctx.moveTo(x, height);
+ ctx.lineTo(x + width * 0.42, 0);
+ ctx.stroke();
+ }
+
+ ctx.fillStyle = 'rgba(204,255,0,0.42)';
+ for (let i = 0; i < 34; i++) {
+ const x = reduceMotion
+ ? (i * 193 * ratio) % width
+ : (i * 193 * ratio + time * 0.034 * ratio) % (width + cell) - cell * 0.5;
+ const y = (i * 89 * ratio + Math.sin(time * 0.0008 + i) * cell) % height;
+ ctx.fillRect(Math.round(x), Math.round(y), Math.max(1, ratio * 1.5), Math.max(1, ratio * 1.5));
+ }
+ ctx.restore();
+ }
+
+ function waveY(scene, lane, x, time) {
+ const { height, ratio } = scene;
+ const base = height * (0.18 + lane * 0.14);
+ return base
+ + Math.sin(x * 0.005 + time * 0.0011 + lane * 1.4) * 22 * ratio
+ + Math.sin(x * 0.017 - time * 0.0017 + lane) * 6 * ratio;
+ }
+
+ function drawSignal(scene, time) {
+ const { ctx, width, height, ratio } = scene;
+ const lanes = 6;
+
+ ctx.clearRect(0, 0, width, height);
+ ctx.save();
+ ctx.globalCompositeOperation = 'lighter';
+
+ for (let lane = 0; lane < lanes; lane++) {
+ const lineGradient = ctx.createLinearGradient(0, 0, width, 0);
+ lineGradient.addColorStop(0, 'rgba(204,255,0,0)');
+ lineGradient.addColorStop(0.22, 'rgba(204,255,0,0.22)');
+ lineGradient.addColorStop(0.52, 'rgba(255,255,255,0.24)');
+ lineGradient.addColorStop(0.82, 'rgba(204,255,0,0.22)');
+ lineGradient.addColorStop(1, 'rgba(204,255,0,0)');
+
+ ctx.strokeStyle = lineGradient;
+ ctx.lineWidth = (lane % 2 === 0 ? 1.7 : 1.05) * ratio;
+ ctx.beginPath();
+
+ for (let x = -30 * ratio; x <= width + 30 * ratio; x += 22 * ratio) {
+ const y = waveY(scene, lane, x, reduceMotion ? 0 : time);
+ if (x === -30 * ratio) {
+ ctx.moveTo(x, y);
+ } else {
+ ctx.lineTo(x, y);
+ }
+ }
+ ctx.stroke();
+ }
+
+ for (let i = 0; i < 22; i++) {
+ const lane = i % lanes;
+ const speed = 0.000075 + lane * 0.000006;
+ const progress = reduceMotion ? ((i * 0.137) % 1) : ((time * speed + i * 0.137) % 1);
+ const x = progress * width;
+ const y = waveY(scene, lane, x, reduceMotion ? 0 : time);
+ const length = (18 + (i % 4) * 8) * ratio;
+
+ ctx.strokeStyle = i % 3 === 0 ? 'rgba(255,255,255,0.42)' : 'rgba(204,255,0,0.58)';
+ ctx.lineWidth = Math.max(1, ratio);
+ ctx.beginPath();
+ ctx.moveTo(x - length, y);
+ ctx.lineTo(x + length, y + Math.sin(i + time * 0.001) * 5 * ratio);
+ ctx.stroke();
+ }
+
+ ctx.restore();
+ }
+
+ function frame(time) {
+ scenes.forEach(scene => {
+ if (scene.mode === 'grid') {
+ drawGrid(scene, time);
+ } else {
+ drawSignal(scene, time);
+ }
+ });
+
+ if (!reduceMotion) {
+ requestAnimationFrame(frame);
+ }
+ }
+
+ function resizeScenes() {
+ scenes.forEach(resizeScene);
+ if (reduceMotion) frame(0);
+ }
+
+ window.addEventListener('resize', resizeScenes, { passive: true });
+ window.addEventListener('load', resizeScenes, { once: true });
+
+ frame(performance.now());
+ })();
+
+ /* ─── HERO CANVAS ANIMATION ──────────────────────────────── */
+ (function () {
+ const canvas = document.getElementById('hero-canvas');
+ const section = canvas.closest('section');
+ const ctx = canvas.getContext('2d');
+
+ const NODE_COUNT = 80;
+ const LINK_DIST = 140;
+ const PULSE_SPEED = 0.012;
+
+ let W, H, nodes = [], mouse = { x: -9999, y: -9999 };
+
+ function resize() {
+ const rect = section.getBoundingClientRect();
+ W = canvas.width = rect.width * devicePixelRatio;
+ H = canvas.height = rect.height * devicePixelRatio;
+ canvas.style.width = rect.width + 'px';
+ canvas.style.height = rect.height + 'px';
+ }
+
+ function makeNode() {
+ return {
+ x: Math.random() * W,
+ y: Math.random() * H,
+ vx: (Math.random() - 0.5) * 0.45,
+ vy: (Math.random() - 0.5) * 0.45,
+ r: 1.5 + Math.random() * 2,
+ phase: Math.random() * Math.PI * 2,
+ };
+ }
+
+ function init() {
+ resize();
+ nodes = Array.from({ length: NODE_COUNT }, makeNode);
+ }
+
+ const ORBS = [
+ { cx: 0.20, cy: 0.35, r: 0.22, spd: 0.0007, off: 0 },
+ { cx: 0.75, cy: 0.60, r: 0.18, spd: 0.0011, off: 2.1 },
+ { cx: 0.50, cy: 0.25, r: 0.14, spd: 0.0009, off: 4.5 },
+ { cx: 0.85, cy: 0.20, r: 0.12, spd: 0.0013, off: 1.3 },
+ ];
+
+ function drawOrbs(t) {
+ ORBS.forEach(o => {
+ const cx = (o.cx + Math.sin(t * o.spd + o.off) * 0.06) * W;
+ const cy = (o.cy + Math.cos(t * o.spd * 1.3 + o.off) * 0.06) * H;
+ const r = o.r * Math.min(W, H);
+ const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+ g.addColorStop(0, 'rgba(204,255,0,0.10)');
+ g.addColorStop(0.5, 'rgba(204,255,0,0.04)');
+ g.addColorStop(1, 'rgba(204,255,0,0)');
+ ctx.beginPath();
+ ctx.arc(cx, cy, r, 0, Math.PI * 2);
+ ctx.fillStyle = g;
+ ctx.fill();
+ });
+ }
+
+ let rings = [];
+ section.addEventListener('mousemove', e => {
+ const rect = section.getBoundingClientRect();
+ mouse.x = (e.clientX - rect.left) * devicePixelRatio;
+ mouse.y = (e.clientY - rect.top) * devicePixelRatio;
+ if (Math.random() < 0.08) {
+ rings.push({ x: mouse.x, y: mouse.y, r: 0, alpha: 0.5 });
+ }
+ });
+ section.addEventListener('mouseleave', () => { mouse.x = mouse.y = -9999; });
+
+ function drawRings() {
+ rings = rings.filter(rg => rg.alpha > 0.01);
+ rings.forEach(rg => {
+ rg.r += 1.8;
+ rg.alpha *= 0.93;
+ ctx.beginPath();
+ ctx.arc(rg.x, rg.y, rg.r, 0, Math.PI * 2);
+ ctx.strokeStyle = `rgba(204,255,0,${rg.alpha})`;
+ ctx.lineWidth = 1;
+ ctx.stroke();
+ });
+ }
+
+ let t = 0;
+ function frame() {
+ t++;
+ ctx.clearRect(0, 0, W, H);
+ ctx.fillStyle = '#050505';
+ ctx.fillRect(0, 0, W, H);
+
+ drawOrbs(t);
+
+ nodes.forEach(n => {
+ n.phase += PULSE_SPEED;
+ n.x += n.vx;
+ n.y += n.vy;
+ if (n.x < 0 || n.x > W) n.vx *= -1;
+ if (n.y < 0 || n.y > H) n.vy *= -1;
+
+ const dx = n.x - mouse.x, dy = n.y - mouse.y;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < 90000) {
+ const f = (1 - d2 / 90000) * 0.4;
+ n.vx += (dx / Math.sqrt(d2)) * f;
+ n.vy += (dy / Math.sqrt(d2)) * f;
+ }
+
+ const spd = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
+ if (spd > 1.2) { n.vx /= spd / 1.2; n.vy /= spd / 1.2; }
+ });
+
+ ctx.lineWidth = 0.8;
+ for (let i = 0; i < nodes.length; i++) {
+ for (let j = i + 1; j < nodes.length; j++) {
+ const a = nodes[i], b = nodes[j];
+ const dx = a.x - b.x, dy = a.y - b.y;
+ const d = Math.sqrt(dx * dx + dy * dy);
+ if (d < LINK_DIST * devicePixelRatio) {
+ const alpha = (1 - d / (LINK_DIST * devicePixelRatio)) * 0.35;
+ ctx.strokeStyle = `rgba(204,255,0,${alpha})`;
+ ctx.beginPath();
+ ctx.moveTo(a.x, a.y);
+ ctx.lineTo(b.x, b.y);
+ ctx.stroke();
+ }
+ }
+ }
+
+ nodes.forEach(n => {
+ const pulse = 0.5 + 0.5 * Math.sin(n.phase);
+ const alpha = 0.55 + 0.45 * pulse;
+ const glow = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 4);
+ glow.addColorStop(0, `rgba(204,255,0,${alpha})`);
+ glow.addColorStop(0.4, `rgba(204,255,0,${alpha * 0.3})`);
+ glow.addColorStop(1, 'rgba(204,255,0,0)');
+ ctx.beginPath();
+ ctx.arc(n.x, n.y, n.r * 4 * devicePixelRatio, 0, Math.PI * 2);
+ ctx.fillStyle = glow;
+ ctx.fill();
+
+ ctx.beginPath();
+ ctx.arc(n.x, n.y, n.r * devicePixelRatio, 0, Math.PI * 2);
+ ctx.fillStyle = `rgba(204,255,0,${alpha})`;
+ ctx.fill();
+ });
+
+ drawRings();
+
+ for (let y = 0; y < H; y += 4) {
+ ctx.fillStyle = 'rgba(0,0,0,0.04)';
+ ctx.fillRect(0, y, W, 1);
+ }
+
+ requestAnimationFrame(frame);
+ }
+
+ window.addEventListener('resize', () => { resize(); });
+ init();
+ frame();
+ })();
+ </script>
+</body>
+</html>