<!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="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="hover:text-[#ccff00] transition-colors">Contact</a>
</div>
<a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" 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="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" 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.webp" width="1200" height="681" loading="lazy" decoding="async" 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.webp" width="1200" height="702" loading="lazy" decoding="async" 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.webp" width="1200" height="673" loading="lazy" decoding="async" 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.webp" width="1200" height="678" loading="lazy" decoding="async" 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>
</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 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>