patx/afterdarklabs
drop tailwind and dead code
Commit d77c138 · patx · 2026-09-05T10:25:52-04:00
Comments
No comments yet.
Diff
diff --git a/docs/about.html b/docs/about.html
deleted file mode 100644
index 22b2f4e..0000000
--- a/docs/about.html
+++ /dev/null
@@ -1,160 +0,0 @@
-<!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">
- <title>About Harrison Erd & After Dark Labs | After Dark Labs</title>
- <meta name="description" content="Meet Harrison Erd, the solo builder behind After Dark Labs, delivering custom websites, mobile apps, and digital products for U.S. businesses.">
- <link rel="canonical" href="https://afterdarklabs.io/about.html">
- <meta property="og:title" content="About Harrison Erd & After Dark Labs | After Dark Labs">
- <meta property="og:description" content="Work directly with Harrison Erd, the solo operator behind After Dark Labs, for senior custom app, website, and digital product execution.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/about.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="About Harrison Erd and After Dark Labs | Custom Apps and Websites">
- <meta name="twitter:description" content="Work directly with Harrison Erd, the solo operator behind After Dark Labs, for senior custom app, website, and digital product execution.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "About",
- "item": "https://afterdarklabs.io/about.html"
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <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">Product execution, without the overhead.</h1>
- </div>
- <div class="space-y-8 text-lg leading-8 text-gray-300">
- <div>
- <p class="heading text-5xl font-bold leading-none tracking-tighter text-[#ccff00] md:text-6xl">15+</p>
- <p class="mt-3">years hands-on</p>
- </div>
- <div>
- <p class="heading text-5xl font-bold leading-none tracking-tighter text-[#ccff00] md:text-6xl">10M+</p>
- <p class="mt-3">downloads</p>
- </div>
- <div>
- <p class="heading text-5xl font-bold leading-none tracking-tighter text-[#ccff00] md:text-6xl">U.S.</p>
- <p class="mt-3">businesses served</p>
- </div>
- </div>
- </div>
- </section>
-
- <section class="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-[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">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 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>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">How projects run</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Focused execution from goal to launch.</h2>
- </div>
- <div class="text-lg leading-8 text-gray-300 lg:order-1">
- <p>There are no account managers, handoffs, or layers of agency overhead. We start with the business goal, define the clearest path to a useful product, then move through focused execution so the final website, app, or system feels polished, reliable, and ready for real customers.</p>
- </div>
- </div>
- </section>
-
- <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-[#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-white/10 text-lg leading-8 text-gray-300">
- <div class="pb-8">
- <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-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-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>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Work directly with Harrison on your next app or website.</h2>
- <p class="text-gray-400 text-lg mb-10">Tell me what you are trying to build, fix, or launch. You will get a direct response and a practical path forward.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Contact After Dark Labs <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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>
- </a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/afterdarklabs-redesigned.html b/docs/afterdarklabs-redesigned.html
deleted file mode 100644
index 1b48ee6..0000000
--- a/docs/afterdarklabs-redesigned.html
+++ /dev/null
@@ -1,333 +0,0 @@
-<!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="/favicon.png">
- <link rel="apple-touch-icon" href="/favicon.png">
- <link rel="manifest" href="/site.webmanifest">
- <title>Website Design & Development | After Dark Labs Florida</title>
- <meta name="description" content="Florida-based custom website design and development. Fast, modern business sites, Shopify stores, apps, SEO, and tools that actually convert. Free demo in 24 hours.">
- <meta name="robots" content="index,follow">
- <link rel="canonical" href="https://afterdarklabs.io/">
-
- <!-- Open Graph -->
- <meta property="og:title" content="Website Design & Development | After Dark Labs Florida">
- <meta property="og:description" content="Custom websites, Shopify stores, apps & tools for Florida businesses. Built to stand out and convert.">
- <meta property="og:image" content="https://afterdarklabs.io/twitter-card.png?v=2">
- <meta property="og:image:width" content="1536">
- <meta property="og:image:height" content="1024">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/">
-
- <!-- Twitter -->
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:title" content="Website Design & Development | After Dark Labs Florida">
- <meta name="twitter:description" content="Modern websites and tools for businesses that want to dominate locally.">
- <meta name="twitter:image" content="https://afterdarklabs.io/twitter-card.png?v=2">
-
- <link rel="stylesheet" href="index.tailwind.css">
- <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;
- --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: var(--page-bg); }
-
- .bg-black, .bg-zinc-950 {
- background-color: var(--page-bg) !important;
- }
-
- .neon-text {
- color: var(--neon);
- text-shadow: 0 0 15px var(--neon), 0 0 30px var(--neon);
- }
-
- #hero-canvas {
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
- z-index: 0;
- opacity: 0.75;
- }
-
- .hero-content { position: relative; z-index: 1; }
-
- .hero-vignette {
- position: absolute;
- inset: 0;
- background: radial-gradient(ellipse 70% 60% at 50% 40%, transparent 40%, rgba(var(--page-bg-rgb),0.65) 100%);
- pointer-events: none;
- z-index: 1;
- }
-
- 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 border-b border-white/10">
- <div class="mx-auto max-w-7xl px-4 py-4 sm:px-6">
- <div class="flex items-center justify-between">
- <!-- Logo -->
- <a href="/" 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-2xl font-bold">🌑</div>
- <div>
- <span class="heading block text-2xl font-semibold tracking-tighter">After Dark</span>
- <span class="block -mt-1 text-xs tracking-[3px] text-[#ccff00] font-medium">LABS</span>
- </div>
- </a>
-
- <!-- Desktop Nav -->
- <div class="hidden lg:flex items-center gap-8">
- <a href="#work" class="transition-colors hover:text-[#ccff00]" data-nav-link>Work</a>
- <a href="#services" class="transition-colors hover:text-[#ccff00]" data-nav-link>Services</a>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-all hover:bg-white hover:scale-105">Get Free Demo</a>
- </div>
-
- <!-- Mobile -->
- <div class="lg:hidden flex items-center gap-3">
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="rounded-2xl bg-[#ccff00] px-5 py-2.5 text-sm font-semibold text-black">Get Demo</a>
- <button id="mobile-nav-toggle" class="flex h-10 w-10 items-center justify-center rounded-xl border border-white/20 hover:bg-white/10" aria-label="Toggle menu">
- <span class="text-2xl">☰</span>
- </button>
- </div>
- </div>
- </div>
-
- <!-- Mobile Menu -->
- <div id="mobile-nav-menu" class="hidden lg:hidden border-t border-white/10 bg-black/95">
- <div class="px-6 py-6 flex flex-col gap-4 text-lg">
- <a href="#work" class="py-2 hover:text-[#ccff00]" data-nav-link>Work</a>
- <a href="#services" class="py-2 hover:text-[#ccff00]" data-nav-link>Services</a>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="py-2 hover:text-[#ccff00]" data-nav-link>Get Free Demo</a>
- </div>
- </div>
- </nav>
-
- <main>
- <!-- Hero -->
- <section id="hero" class="hero-bg min-h-screen flex items-center relative overflow-hidden pt-16">
- <canvas id="hero-canvas"></canvas>
- <div class="hero-vignette"></div>
-
- <div class="hero-content mx-auto max-w-5xl px-6 py-24 lg:py-32 text-center lg:text-left">
- <div class="max-w-3xl mx-auto lg:mx-0">
- <div class="inline-flex items-center gap-2 rounded-full border border-[#ccff00]/30 bg-black/60 px-4 py-1.5 text-sm mb-6">
- <span class="text-[#ccff00]">●</span>
- Pompano Beach, FL
- </div>
-
- <h1 class="heading text-6xl md:text-7xl lg:text-[4.2rem] leading-none tracking-tighter font-semibold">
- Websites that make<br>your business <span class="neon-text">unforgettable</span>.
- </h1>
-
- <p class="mt-6 text-xl text-gray-300 max-w-xl mx-auto lg:mx-0">
- Custom design & development for Florida businesses. Fast-loading sites, Shopify stores, and tools that turn visitors into customers.
- </p>
-
- <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer"
- class="px-10 py-5 bg-[#ccff00] hover:bg-white text-black font-semibold rounded-3xl text-lg inline-flex items-center justify-center transition-all hover:scale-105">
- Get Your Free Demo
- </a>
- <a href="#work"
- class="px-8 py-5 border border-white/30 hover:border-white rounded-3xl text-lg inline-flex items-center justify-center transition-all">
- See Our Work
- </a>
- </div>
- </div>
- </div>
- </section>
-
- <!-- Work / Portfolio -->
- <section id="work" class="scroll-mt-24 border-t border-white/10 bg-zinc-950">
- <div class="mx-auto max-w-5xl px-6 py-20">
- <div class="flex flex-col md:flex-row md:items-end gap-4 mb-12">
- <div>
- <p class="text-sm font-bold uppercase tracking-widest text-[#ccff00]">Real results</p>
- <h2 class="heading text-5xl font-semibold tracking-tighter">Selected work</h2>
- </div>
- <p class="md:ml-auto max-w-xs text-gray-400">Every project is built from scratch — no templates, no bloat.</p>
- </div>
-
- <div class="grid md:grid-cols-2 gap-6">
- <a href="https://miadruck.com" target="_blank" class="group block overflow-hidden rounded-3xl bg-black border border-white/10 hover:border-[#ccff00]/50 transition-all">
- <img src="https://afterdarklabs.io/miadruck.webp" width="1200" height="681" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Mia Druck Real Estate">
- <div class="p-6">
- <p class="font-medium">Mia Druck • Real Estate</p>
- <p class="text-sm text-gray-400">Modern lead-generation website</p>
- </div>
- </a>
-
- <a href="https://gardenfreshwholesale.com" target="_blank" class="group block overflow-hidden rounded-3xl bg-black border border-white/10 hover:border-[#ccff00]/50 transition-all">
- <img src="https://afterdarklabs.io/gardenfresh.webp" width="1200" height="702" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Garden Fresh Wholesale">
- <div class="p-6">
- <p class="font-medium">Garden Fresh • Wholesale Produce</p>
- <p class="text-sm text-gray-400">E-commerce platform + SEO</p>
- </div>
- </a>
-
- <a href="https://coralvibefl.com" target="_blank" class="group block overflow-hidden rounded-3xl bg-black border border-white/10 hover:border-[#ccff00]/50 transition-all">
- <img src="https://afterdarklabs.io/coralvibe.webp" width="1200" height="678" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Coral Vibe">
- <div class="p-6">
- <p class="font-medium">Coral Vibe • Shopify Store</p>
- <p class="text-sm text-gray-400">E-commerce with local flavor</p>
- </div>
- </a>
-
- <a href="https://invoiceotter.com" target="_blank" class="group block overflow-hidden rounded-3xl bg-black border border-white/10 hover:border-[#ccff00]/50 transition-all">
- <img src="https://afterdarklabs.io/invoiceotter.webp" width="1200" height="673" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform group-hover:scale-105" alt="Invoice Otter">
- <div class="p-6">
- <p class="font-medium">Invoice Otter • SaaS</p>
- <p class="text-sm text-gray-400">Subscription billing platform</p>
- </div>
- </a>
- </div>
- </div>
- </section>
-
- <!-- Services -->
- <section id="services" class="scroll-mt-24 border-t border-white/10 bg-black">
- <div class="mx-auto max-w-5xl px-6 py-20">
- <div class="max-w-2xl">
- <p class="uppercase tracking-[0.125em] text-[#ccff00] text-sm font-semibold">What we build</p>
- <h2 class="heading text-5xl font-semibold tracking-tighter mt-3">No templates. No nonsense.<br>Just results.</h2>
- <p class="mt-6 text-lg text-gray-300">We create custom digital experiences that load fast, rank well, and make your phone ring.</p>
- </div>
-
- <div class="mt-16 grid md:grid-cols-2 gap-x-16 gap-y-12">
- <div>
- <h3 class="text-[#ccff00] font-semibold text-lg mb-3">Websites & Online Stores</h3>
- <p class="text-gray-400">Professional business sites, Shopify stores, booking systems, and lead capture pages designed to convert South Florida customers.</p>
- </div>
- <div>
- <h3 class="text-[#ccff00] font-semibold text-lg mb-3">Custom Tools & Apps</h3>
- <p class="text-gray-400">Internal dashboards, customer portals, inventory systems, and simple mobile apps that actually match how your business runs.</p>
- </div>
- <div>
- <h3 class="text-[#ccff00] font-semibold text-lg mb-3">SEO & Local Domination</h3>
- <p class="text-gray-400">Technical SEO, Google Business optimization, local search strategies that put you ahead of the competition in Broward & Palm Beach.</p>
- </div>
- <div>
- <h3 class="text-[#ccff00] font-semibold text-lg mb-3">Everything Else</h3>
- <p class="text-gray-400">Branding, logo design, API integrations, hosting, email setup, AI automations — we handle the full stack so you don't have to.</p>
- </div>
- </div>
-
- <div class="mt-16 pt-10 border-t border-white/10">
- <p class="text-sm text-gray-400">Simple sites start at $800–$2,000 (one-time). Custom platforms and apps are quoted individually. Transparent. No monthly bloat fees unless you want ongoing maintenance.</p>
- </div>
- </div>
- </section>
-
- </main>
-
- <footer class="bg-black border-t border-white/10 py-16">
- <div class="max-w-5xl mx-auto px-6 text-center">
- <div class="flex justify-center mb-8">
- <a href="/" class="flex items-center gap-3">
- <div class="h-9 w-9 flex items-center justify-center rounded-2xl border-2 border-[#ccff00] text-3xl">🌑</div>
- <div class="text-left">
- <span class="heading text-3xl tracking-tighter">After Dark</span>
- <span class="block text-xs tracking-widest text-[#ccff00]">LABS</span>
- </div>
- </a>
- </div>
- <p class="text-gray-500">© 2026 Harrison Erd • Pompano Beach, Florida</p>
- <p class="text-xs text-gray-600 mt-6">Built with focus. Delivered with speed.</p>
- </div>
- </footer>
-
- <script>
- // Simplified mobile nav
- const toggle = document.getElementById('mobile-nav-toggle');
- const menu = document.getElementById('mobile-nav-menu');
- toggle.addEventListener('click', () => menu.classList.toggle('hidden'));
-
- // Canvas - toned down
- (function() {
- const canvas = document.getElementById('hero-canvas');
- const ctx = canvas.getContext('2d');
- let W, H, nodes = [];
- const NODE_COUNT = 45; // Reduced
-
- function resize() {
- const rect = canvas.getBoundingClientRect();
- canvas.width = W = rect.width * devicePixelRatio;
- canvas.height = H = rect.height * devicePixelRatio;
- }
-
- function init() {
- resize();
- nodes = Array.from({length: NODE_COUNT}, () => ({
- x: Math.random() * W,
- y: Math.random() * H,
- vx: (Math.random() - 0.5) * 0.6,
- vy: (Math.random() - 0.5) * 0.6,
- r: 1.8
- }));
- }
-
- function frame() {
- ctx.fillStyle = '#17212b';
- ctx.fillRect(0, 0, W, H);
-
- // Draw connections and nodes (simplified)
- ctx.strokeStyle = 'rgba(204,255,0,0.15)';
- 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;
- const dy = a.y - b.y;
- const d = Math.sqrt(dx*dx + dy*dy);
- if (d < 160) {
- ctx.globalAlpha = (160 - d) / 160 * 0.25;
- ctx.beginPath();
- ctx.moveTo(a.x, a.y);
- ctx.lineTo(b.x, b.y);
- ctx.stroke();
- }
- }
- }
- ctx.globalAlpha = 1;
-
- nodes.forEach(n => {
- 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;
-
- ctx.fillStyle = '#ccff00';
- ctx.beginPath();
- ctx.arc(n.x, n.y, n.r, 0, Math.PI*2);
- ctx.fill();
- });
-
- requestAnimationFrame(frame);
- }
-
- window.addEventListener('resize', () => { resize(); init(); });
- init();
- frame();
- })();
- </script>
-</body>
-</html>
diff --git a/docs/app-store-launch-support.html b/docs/app-store-launch-support.html
deleted file mode 100644
index 738af47..0000000
--- a/docs/app-store-launch-support.html
+++ /dev/null
@@ -1,144 +0,0 @@
-<!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">
- <title>App Store Launch Support Services for iOS & Android | After Dark Labs</title>
- <meta name="description" content="App Store and Google Play launch support for custom mobile apps, including release preparation, store assets, submissions, updates, and post-launch improvements.">
- <link rel="canonical" href="https://afterdarklabs.io/app-store-launch-support.html">
- <meta property="og:title" content="App Store Launch Support Services for iOS & Android | After Dark Labs">
- <meta property="og:description" content="Prepare, submit, launch, and improve your custom iOS and Android app with organized app store launch support.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/app-store-launch-support.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="App Store Launch Support for iOS and Android | After Dark Labs">
- <meta name="twitter:description" content="Prepare, submit, launch, and improve your custom iOS and Android app with organized app store launch support.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Mobile Apps",
- "item": "https://afterdarklabs.io/mobile-apps.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "App Store Launch Support",
- "item": "https://afterdarklabs.io/app-store-launch-support.html"
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="mobile-apps.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Mobile app services</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">App Store launch and support for iOS and Android.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Move from finished build to public release with store preparation, submission support, updates, and practical post-launch improvements.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related app services</p>
- <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, and 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 and API integration</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>
- <li><a href="generative-engine-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>Generative engine optimization</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What this includes</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Launch preparation beyond the final build.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">We help prepare the pieces around the app itself so launch day is organized and the product has a path for continued improvement.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Store listing copy, screenshot direction, icons, and launch-ready app presentation</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>iOS App Store and Google Play submission coordination and release support</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Production fixes, early user feedback reviews, and update planning</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Support for version releases, feature additions, and launch follow-through</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Release support</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Prepared for review, release, and the next version.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Prepared for review and release</h3>
- <p class="mt-4">A launch-ready mobile app needs more than a final build. Store copy, screenshots, icons, privacy details, release notes, testing paths, and account setup all affect how smoothly submission goes.</p>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Support after the first version</h3>
- <p class="mt-4">The first release is only the start. Early user feedback, store review notes, production fixes, analytics, and version updates help turn a launched app into a stronger long-term product.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Launch with the next update already in mind.</h2>
- <p class="text-gray-400 text-lg mb-10">Prepare your iOS and Android release with a team that can support the product after launch.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Plan App Launch <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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></a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/backend-api-integration.html b/docs/backend-api-integration.html
deleted file mode 100644
index 249fded..0000000
--- a/docs/backend-api-integration.html
+++ /dev/null
@@ -1,144 +0,0 @@
-<!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">
- <title>Mobile App Backend & API Integration Services | After Dark Labs</title>
- <meta name="description" content="Backend and API integration for mobile apps, including authentication, databases, payments, notifications, dashboards, and third-party services.">
- <link rel="canonical" href="https://afterdarklabs.io/backend-api-integration.html">
- <meta property="og:title" content="Mobile App Backend & API Integration Services | After Dark Labs">
- <meta property="og:description" content="Connect your custom mobile app to the backend systems, data, payments, notifications, dashboards, and APIs it needs to operate.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/backend-api-integration.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Backend and API Integration for Mobile Apps | After Dark Labs">
- <meta name="twitter:description" content="Connect your custom mobile app to the backend systems, data, payments, notifications, dashboards, and APIs it needs to operate.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Mobile Apps",
- "item": "https://afterdarklabs.io/mobile-apps.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "Backend and API Integration",
- "item": "https://afterdarklabs.io/backend-api-integration.html"
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="mobile-apps.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Mobile app services</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Backend and API integration for mobile apps.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Connect your app to the systems that make it useful: accounts, payments, data, notifications, dashboards, automations, and third-party services.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related app services</p>
- <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, and UI/UX</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 and support</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>
- <li><a href="generative-engine-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>Generative engine optimization</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What this includes</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Reliable systems behind the mobile product.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">We design backend connections around the app’s real workflows, balancing reliability, launch speed, and future maintainability.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>User accounts, authentication, roles, profiles, and secure app access</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Database planning, content management, admin views, and operational records</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Payment, messaging, location, analytics, CRM, and other third-party API connections</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Practical error handling, testing, and support paths for production use</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Product workflow</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Built for what happens beyond the app screen.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Planned around the product workflow</h3>
- <p class="mt-4">Backend architecture should match what the app needs to do on day one and what it may need after launch. We map the data, permissions, payments, notifications, and admin needs before connecting services.</p>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Useful beyond the app screen</h3>
- <p class="mt-4">The best mobile products often need dashboards, support views, automations, and web-based tools behind them. When the app and backend are designed together, the business can operate the product with less manual work.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Build the systems behind the app.</h2>
- <p class="text-gray-400 text-lg mb-10">Plan the backend and API layer your mobile product needs to work reliably.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Discuss App Integrations <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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></a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/booking-website-for-business.html b/docs/booking-website-for-business.html
deleted file mode 100644
index cbe5c3a..0000000
--- a/docs/booking-website-for-business.html
+++ /dev/null
@@ -1,211 +0,0 @@
-<!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">
- <title>Booking Website Development for Businesses | After Dark Labs</title>
- <meta name="description" content="Booking website development for businesses that need scheduling, appointment requests, intake forms, payments, memberships, and customer account flows.">
- <link rel="canonical" href="https://afterdarklabs.io/booking-website-for-business.html">
- <meta property="og:title" content="Booking Website Development for Businesses | After Dark Labs">
- <meta property="og:description" content="Business booking websites with scheduling, intake, payments, memberships, reminders, customer accounts, and mobile-friendly conversion paths.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/booking-website-for-business.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Booking Website Development for Businesses | After Dark Labs">
- <meta name="twitter:description" content="Business booking websites with scheduling, intake, payments, memberships, reminders, customer accounts, and mobile-friendly conversion paths.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "Service",
- "name": "Booking website development for businesses",
- "serviceType": "Booking website development",
- "url": "https://afterdarklabs.io/booking-website-for-business.html",
- "description": "Booking website development for businesses that need scheduling, appointment requests, intake forms, payments, memberships, and customer account flows.",
- "provider": {
- "@type": "Organization",
- "name": "After Dark Labs",
- "url": "https://afterdarklabs.io/"
- },
- "areaServed": {
- "@type": "Country",
- "name": "United States"
- }
- },
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Business Websites",
- "item": "https://afterdarklabs.io/business-websites.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "Booking Websites for Business",
- "item": "https://afterdarklabs.io/booking-website-for-business.html"
- }
- ]
- },
- {
- "@type": "FAQPage",
- "mainEntity": [
- {
- "@type": "Question",
- "name": "What is a booking website for a business?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "A booking website lets customers schedule services, request appointments, answer intake questions, pay deposits or fees, receive confirmations, and complete the next step without calling."
- }
- },
- {
- "@type": "Question",
- "name": "Can a booking website include memberships?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. A booking website can include memberships, subscriptions, recurring access, customer accounts, paid reservations, reminders, and account-based customer experiences."
- }
- },
- {
- "@type": "Question",
- "name": "Does a booking website help with leads?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. Booking flows reduce friction by letting visitors act immediately. Clear service pages, intake questions, and calls to action can turn search, social, and referral traffic into scheduled opportunities."
- }
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="business-websites.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Business websites</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Booking websites that turn interest into scheduled business.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">For service businesses, a website should do more than explain the offer. After Dark Labs builds booking websites with scheduling, intake, payments, reminders, memberships, and customer flows that reduce manual work.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related website services</p>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <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>Bookings, appointments, and memberships</span></a></li>
- <li><a href="small-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>Small business website design</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</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What this includes</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">A cleaner customer path and fewer manual handoffs.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">A booking website should match how the business schedules, qualifies, charges, confirms, and follows up. The goal is a cleaner customer path and fewer manual handoffs for the team.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Service menus, booking forms, intake questions, availability logic, and confirmation pages</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Deposits, appointment payments, subscriptions, memberships, and customer accounts</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Email handoffs, reminders, customer records, dashboards, and operational workflows</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Search-ready service pages and mobile-friendly calls to action</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Booking flow</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Built around customer action.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Built around customer action</h3>
- <p class="mt-4">A booking website gives visitors a direct next step. Instead of asking them to call, wait, or compare too long, the site can guide them into the right appointment, request, deposit, or membership path.</p>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Operationally useful after the click</h3>
- <p class="mt-4">The booking flow should help the team too. Intake fields, confirmations, customer records, and handoffs can reduce repeated questions and keep scheduled work easier to manage.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section class="bg-[#ccff00] text-black">
- <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">Booking website FAQ</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Common booking website questions.</h2>
- </div>
- <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
- <div class="pb-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">What is a booking website?</h3>
- <p class="mt-4">It lets customers schedule services, request appointments, answer intake questions, pay deposits or fees, receive confirmations, and complete the next step without calling.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Can it include memberships?</h3>
- <p class="mt-4">Yes. A booking website can include memberships, subscriptions, recurring access, customer accounts, paid reservations, reminders, and account-based customer experiences.</p>
- </div>
- <div class="pt-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Does it help with leads?</h3>
- <p class="mt-4">Yes. Booking flows reduce friction by letting visitors act immediately. Clear service pages and calls to action can turn search, social, and referral traffic into scheduled opportunities.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Make your website easier to book from.</h2>
- <p class="text-gray-400 text-lg mb-10">Build scheduling, intake, payment, and membership paths into a business website that works on every device.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start a Booking Website <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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></a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/brand-positioning-creative-strategy.html b/docs/brand-positioning-creative-strategy.html
deleted file mode 100644
index a1818a1..0000000
--- a/docs/brand-positioning-creative-strategy.html
+++ /dev/null
@@ -1,145 +0,0 @@
-<!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">
- <title>Website Brand Positioning & Creative Strategy Services | After Dark Labs</title>
- <meta name="description" content="Brand positioning and creative strategy for custom websites, including messaging, visual direction, campaign ideas, and conversion-focused content planning.">
- <link rel="canonical" href="https://afterdarklabs.io/brand-positioning-creative-strategy.html">
- <meta property="og:title" content="Website Brand Positioning & Creative Strategy Services | After Dark Labs">
- <meta property="og:description" content="Clarify your offer, message, and creative direction before building or improving a custom website.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/brand-positioning-creative-strategy.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Brand Positioning and Creative Strategy | After Dark Labs">
- <meta name="twitter:description" content="Clarify your offer, message, and creative direction before building or improving a custom website.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Websites",
- "item": "https://afterdarklabs.io/websites.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "Brand Positioning and Creative Strategy",
- "item": "https://afterdarklabs.io/brand-positioning-creative-strategy.html"
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="websites.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Website services</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Brand positioning and creative strategy.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Give your website a sharper point of view with messaging, content direction, and creative choices that make the business easier to understand and remember.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related website services</p>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <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="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</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 ecommerce</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>Bookings, appointments, and memberships</span></a></li>
- <li><a href="seo-performance-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>SEO and performance optimization</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What this includes</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">A sharper point of view for the whole site.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">We align the website around what makes your business valuable, who it serves, and what action visitors should take next.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Offer positioning, audience framing, and service page messaging</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Visual direction for typography, color, layout, imagery, and interaction style</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Creative campaign ideas for launches, seasonal pushes, and content hooks</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Conversion strategy for CTAs, proof points, objections, and next steps</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Creative strategy</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">A clearer reason to choose you.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">A clearer reason to choose you</h3>
- <p class="mt-4">Strong positioning gives the website a point of view. It helps explain what you do, who it is for, why it matters, and what makes the next step worth taking.</p>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Creative that supports action</h3>
- <p class="mt-4">Messaging, visuals, content ideas, and conversion paths should work together. The goal is a website that feels distinct while still making it easy for visitors to understand the offer and reach out.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Make your website feel intentional.</h2>
- <p class="text-gray-400 text-lg mb-10">Clarify the message and creative direction before your next build.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Plan Website Strategy <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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></a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/business-website-seo.html b/docs/business-website-seo.html
deleted file mode 100644
index c2aaf3b..0000000
--- a/docs/business-website-seo.html
+++ /dev/null
@@ -1,211 +0,0 @@
-<!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">
- <title>Business Website SEO & Performance | After Dark Labs</title>
- <meta name="description" content="Business website SEO and performance improvements for clearer service pages, metadata, internal links, technical foundations, and faster customer experiences.">
- <link rel="canonical" href="https://afterdarklabs.io/business-website-seo.html">
- <meta property="og:title" content="Business Website SEO & Performance | After Dark Labs">
- <meta property="og:description" content="SEO-ready business websites with clearer page structure, useful content, internal links, technical foundations, and fast performance.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/business-website-seo.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Business Website SEO and Performance | After Dark Labs">
- <meta name="twitter:description" content="SEO-ready business websites with clearer page structure, useful content, internal links, technical foundations, and fast performance.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "Service",
- "name": "Business website SEO and performance",
- "serviceType": "Business website SEO",
- "url": "https://afterdarklabs.io/business-website-seo.html",
- "description": "Business website SEO and performance improvements for clearer service pages, metadata, internal links, technical foundations, and faster customer experiences.",
- "provider": {
- "@type": "Organization",
- "name": "After Dark Labs",
- "url": "https://afterdarklabs.io/"
- },
- "areaServed": {
- "@type": "Country",
- "name": "United States"
- }
- },
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Business Websites",
- "item": "https://afterdarklabs.io/business-websites.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "Business Website SEO",
- "item": "https://afterdarklabs.io/business-website-seo.html"
- }
- ]
- },
- {
- "@type": "FAQPage",
- "mainEntity": [
- {
- "@type": "Question",
- "name": "What is business website SEO?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Business website SEO is the process of organizing pages, titles, headings, internal links, content, technical foundations, and performance so search engines and customers can understand what the business offers."
- }
- },
- {
- "@type": "Question",
- "name": "Can SEO be built into a new business website?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. SEO should be planned during the website build so the site launches with clear page structure, unique metadata, useful service content, internal links, mobile-friendly layouts, and fast loading behavior."
- }
- },
- {
- "@type": "Question",
- "name": "Does performance matter for business website SEO?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Performance matters because fast pages improve the user experience and reduce friction for visitors. Lean assets, responsive layouts, and clean implementation support both search and conversion goals."
- }
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="business-websites.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Business websites</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Business website SEO built into the structure.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Search visibility is easier to improve when the website is built around clear service intent from the start. After Dark Labs plans titles, headings, content, internal links, speed, and calls to action around how customers search and decide.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related website services</p>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <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="seo-performance-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>SEO and performance optimization</span></a></li>
- <li><a href="custom-business-website-development.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 business website development</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What this includes</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Search intent planned before launch.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">Business website SEO is not just adding keywords after launch. The work starts with deciding what each page should rank for, what customer question it answers, and what next step it should create.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Keyword-focused service pages with unique titles, descriptions, headings, and copy</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Internal links between the homepage, website hub, service pages, and related content</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Technical basics including canonical URLs, crawlable pages, sitemap coverage, and structured data</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Faster loading behavior, mobile-friendly layouts, and practical conversion paths</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">SEO structure</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Pages with specific jobs.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Pages with specific jobs</h3>
- <p class="mt-4">A strong SEO structure gives important searches their own destination. A homepage, service hub, local page, ecommerce page, booking page, and FAQ content should not all compete for the same vague phrase.</p>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Speed that supports action</h3>
- <p class="mt-4">SEO traffic only helps if visitors stay long enough to act. Cleaner assets, responsive layouts, readable content, and fast page behavior make the website easier to use once someone lands on it.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section class="bg-[#ccff00] text-black">
- <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">Business website SEO FAQ</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Common SEO questions.</h2>
- </div>
- <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
- <div class="pb-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">What is business website SEO?</h3>
- <p class="mt-4">It is the process of organizing pages, titles, headings, links, content, technical foundations, and performance so search engines and customers can understand what the business offers.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Can SEO be built into a new business website?</h3>
- <p class="mt-4">Yes. SEO should be planned during the build so the site launches with clear page structure, unique metadata, useful service content, internal links, mobile-friendly layouts, and fast loading behavior.</p>
- </div>
- <div class="pt-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Does performance matter for SEO?</h3>
- <p class="mt-4">Performance matters because fast pages improve the user experience and reduce friction. Lean assets, responsive layouts, and clean implementation support both search and conversion goals.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Give every business website page a clearer job.</h2>
- <p class="text-gray-400 text-lg mb-10">Improve search visibility with better structure, content, internal links, metadata, and performance.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Improve Business Website SEO <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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></a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/business-websites.html b/docs/business-websites.html
deleted file mode 100644
index 9896a80..0000000
--- a/docs/business-websites.html
+++ /dev/null
@@ -1,252 +0,0 @@
-<!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">
- <title>Business Website Design & Development | After Dark Labs</title>
- <meta name="description" content="Business website design and development for service businesses, contractors, plumbers, electricians, auto sales teams, ecommerce, bookings, and growth.">
- <link rel="canonical" href="https://afterdarklabs.io/business-websites.html">
- <meta property="og:title" content="Business Website Design & Development | After Dark Labs">
- <meta property="og:description" content="Fast, SEO-ready business websites for service companies, contractors, trades, auto sales, ecommerce brands, booking flows, and growing U.S. teams.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/business-websites.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Business Website Design and Development | After Dark Labs">
- <meta name="twitter:description" content="Fast, SEO-ready business websites for service companies, contractors, trades, auto sales, ecommerce brands, booking flows, and growing U.S. teams.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "Service",
- "name": "Business website design and development",
- "serviceType": "Business website design and development",
- "url": "https://afterdarklabs.io/business-websites.html",
- "description": "Business website design and development for service businesses, contractors, plumbers, electricians, auto sales teams, ecommerce, bookings, and growth.",
- "provider": {
- "@type": "Organization",
- "name": "After Dark Labs",
- "url": "https://afterdarklabs.io/"
- },
- "areaServed": [
- {
- "@type": "Country",
- "name": "United States"
- },
- {
- "@type": "City",
- "name": "Fort Lauderdale"
- }
- ]
- },
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Websites",
- "item": "https://afterdarklabs.io/websites.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "Business Websites",
- "item": "https://afterdarklabs.io/business-websites.html"
- }
- ]
- },
- {
- "@type": "FAQPage",
- "mainEntity": [
- {
- "@type": "Question",
- "name": "What should a business website include?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "A strong business website should explain the offer, show proof, answer common buying questions, load quickly, work on mobile devices, and give visitors a clear way to contact, book, buy, or request a quote."
- }
- },
- {
- "@type": "Question",
- "name": "Do you build websites for small businesses?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. After Dark Labs builds small business websites for service companies, construction companies, plumbers, electricians, contractors, auto sales teams, ecommerce sellers, booking-based businesses, and founders who need a professional site built around real customer actions."
- }
- },
- {
- "@type": "Question",
- "name": "Can a business website include bookings or ecommerce?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. A business website can include appointment scheduling, intake forms, payments, subscriptions, product catalogs, checkout flows, customer accounts, and connected operational tools."
- }
- },
- {
- "@type": "Question",
- "name": "Do business websites need SEO?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "SEO helps search engines and customers understand what the business offers. Every business website should have clear page structure, unique metadata, internal links, useful content, and fast performance foundations."
- }
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="websites.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Website services</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Business websites built to bring in real customers.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">After Dark Labs designs and develops custom business websites for service companies, construction businesses, plumbers, electricians, contractors, auto sales teams, ecommerce brands, and U.S. companies that need leads, bookings, sales, or account activity.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Business website services</p>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <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</span></a></li>
- <li><a href="small-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>Small business website design</span></a></li>
- <li><a href="custom-business-website-development.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 business website development</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</span></a></li>
- <li><a href="ecommerce-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>Ecommerce business websites</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>Shopify stores</span></a></li>
- <li><a href="booking-website-for-business.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>Booking websites for business</span></a></li>
- <li><a href="fort-lauderdale-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>Fort Lauderdale business websites</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">Business website services</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">The page structure follows the way the business makes money.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">The cluster separates broad business website work from more specific needs like service business leads, local visibility, ecommerce, bookings, and technical SEO.</p>
- </div>
- <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
- <div class="pb-7">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Service and small business websites</h3>
- <p class="mt-4">Websites for local teams, contractors, auto sales teams, founders, and operators that need a credible digital front door and better leads.</p>
- </div>
- <div class="py-7">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Custom development and SEO</h3>
- <p class="mt-4">Custom layouts, forms, workflows, integrations, metadata, internal links, performance decisions, and search-ready content.</p>
- </div>
- <div class="pt-7">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Ecommerce, Shopify, and bookings</h3>
- <p class="mt-4">Storefronts, product pages, catalogs, checkout paths, scheduling, appointment requests, memberships, and customer account flows.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">What a business website needs to do</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Explain, support search, and create a next step.</h2>
- </div>
- <div class="divide-y divide-white/10 text-lg leading-8 text-gray-300 lg:order-1">
- <div class="pb-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Explain the offer fast</h3>
- <p class="mt-4">Visitors should know what the business does, who it helps, why it is credible, and what step to take next without digging through vague copy.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Support search intent</h3>
- <p class="mt-4">A business website needs service pages, headings, internal links, and helpful answers organized around how customers actually search.</p>
- </div>
- <div class="pt-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Create a clear next step</h3>
- <p class="mt-4">The site should move people toward an inquiry, consultation, quote request, booking, purchase, membership, or account action.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section class="bg-[#ccff00] text-black">
- <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">Business website FAQ</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Common website questions.</h2>
- </div>
- <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
- <div class="pb-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">What should a business website include?</h3>
- <p class="mt-4">It should explain the offer, show proof, answer common buying questions, load quickly, work on mobile devices, and give visitors a clear way to contact, book, buy, or request a quote.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Do you build websites for small businesses?</h3>
- <p class="mt-4">Yes. After Dark Labs builds small business websites for service companies, construction companies, plumbers, electricians, contractors, auto sales teams, ecommerce sellers, booking-based businesses, and founders who need a professional site built around real customer actions.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Can a business website include bookings or ecommerce?</h3>
- <p class="mt-4">Yes. A business website can include appointment scheduling, intake forms, payments, subscriptions, product catalogs, checkout flows, customer accounts, and connected operational tools.</p>
- </div>
- <div class="pt-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Do business websites need SEO?</h3>
- <p class="mt-4">SEO helps search engines and customers understand what the business offers. Every business website should have clear page structure, unique metadata, internal links, useful content, and fast performance foundations.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Build a business website with a clear job.</h2>
- <p class="text-gray-400 text-lg mb-10">Work directly with After Dark Labs on a custom business website built for search, speed, and conversion.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start a Business Website <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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>
- </a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/custom-business-website-development.html b/docs/custom-business-website-development.html
deleted file mode 100644
index b5f6587..0000000
--- a/docs/custom-business-website-development.html
+++ /dev/null
@@ -1,211 +0,0 @@
-<!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">
- <title>Custom Business Website Development | After Dark Labs</title>
- <meta name="description" content="Custom business website development for companies that need tailored pages, forms, workflows, integrations, ecommerce, booking, or backend tools.">
- <link rel="canonical" href="https://afterdarklabs.io/custom-business-website-development.html">
- <meta property="og:title" content="Custom Business Website Development | After Dark Labs">
- <meta property="og:description" content="Tailored business websites with custom layouts, forms, workflows, integrations, ecommerce paths, booking flows, and backend tools.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/custom-business-website-development.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Custom Business Website Development | After Dark Labs">
- <meta name="twitter:description" content="Tailored business websites with custom layouts, forms, workflows, integrations, ecommerce paths, booking flows, and backend tools.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "Service",
- "name": "Custom business website development",
- "serviceType": "Custom business website development",
- "url": "https://afterdarklabs.io/custom-business-website-development.html",
- "description": "Custom business website development for companies that need tailored pages, forms, workflows, integrations, ecommerce, booking, or backend tools.",
- "provider": {
- "@type": "Organization",
- "name": "After Dark Labs",
- "url": "https://afterdarklabs.io/"
- },
- "areaServed": {
- "@type": "Country",
- "name": "United States"
- }
- },
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Business Websites",
- "item": "https://afterdarklabs.io/business-websites.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "Custom Business Website Development",
- "item": "https://afterdarklabs.io/custom-business-website-development.html"
- }
- ]
- },
- {
- "@type": "FAQPage",
- "mainEntity": [
- {
- "@type": "Question",
- "name": "When does a business need a custom website?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "A custom website makes sense when the business needs specific page structure, workflows, integrations, checkout paths, booking logic, customer accounts, or messaging that a generic template cannot handle well."
- }
- },
- {
- "@type": "Question",
- "name": "Can a custom website connect to business tools?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. A custom business website can connect to forms, email platforms, payment systems, scheduling tools, CRMs, databases, dashboards, APIs, and internal workflows."
- }
- },
- {
- "@type": "Question",
- "name": "Is custom development only for large companies?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "No. Custom development is useful for any business that needs the site to match its sales process, operations, customer experience, or technical requirements."
- }
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="business-websites.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Business websites</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Custom business website development for real workflows.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">After Dark Labs builds custom business websites that go beyond a brochure: tailored service pages, lead flows, ecommerce paths, booking features, backend integrations, and web app-style tools when the business needs them.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related website services</p>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <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 ecommerce</span></a></li>
- <li><a href="booking-website-for-business.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>Booking websites for business</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</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What this includes</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">A working system, not a static collection of pages.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">Custom development starts by mapping how the business sells, serves customers, and hands work off internally. The website can then become a working system instead of a static collection of pages.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Custom page layouts, service structures, lead forms, and quote request paths</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Ecommerce, booking, membership, customer account, and payment experiences</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>API integrations, dashboards, admin workflows, and operational handoffs</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Performance, responsive design, SEO structure, and launch support</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Custom workflows</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Built around the business model.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Built around the business model</h3>
- <p class="mt-4">A custom business website can support complex offers, multi-step sales paths, service qualification, product catalogs, intake questions, account access, and team workflows that simple templates usually flatten.</p>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Designed to keep evolving</h3>
- <p class="mt-4">The first version can stay focused while leaving room for better SEO pages, new services, ecommerce, booking, customer portals, or connected <a href="mobile-apps.html" class="text-[#ccff00] hover:text-white transition-colors">mobile app experiences</a>.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section class="bg-[#ccff00] text-black">
- <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">Custom website development FAQ</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Common custom build questions.</h2>
- </div>
- <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
- <div class="pb-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">When does a business need a custom website?</h3>
- <p class="mt-4">When the business needs specific page structure, workflows, integrations, checkout paths, booking logic, customer accounts, or messaging that a generic template cannot handle well.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Can a custom website connect to business tools?</h3>
- <p class="mt-4">Yes. A custom business website can connect to forms, email platforms, payment systems, scheduling tools, CRMs, databases, dashboards, APIs, and internal workflows.</p>
- </div>
- <div class="pt-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Is custom development only for large companies?</h3>
- <p class="mt-4">No. Custom development is useful for any business that needs the site to match its sales process, operations, customer experience, or technical requirements.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Build the website your workflow actually needs.</h2>
- <p class="text-gray-400 text-lg mb-10">Plan and develop a custom business website with strategy, design, development, SEO, and integrations handled together.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start Custom Development <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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></a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/custom-web-development-ecommerce.html b/docs/custom-web-development-ecommerce.html
deleted file mode 100644
index 782bcdc..0000000
--- a/docs/custom-web-development-ecommerce.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!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">
- <title>Custom Web Development & Ecommerce Solutions - U.S. | After Dark Labs</title>
- <meta name="description" content="Custom web development and ecommerce solutions for U.S. businesses that need fast storefronts, polished service pages, checkout flows, and reliable digital tools.">
- <link rel="canonical" href="https://afterdarklabs.io/custom-web-development-ecommerce.html">
- <meta property="og:title" content="Custom Web Development & Ecommerce Solutions - U.S. | After Dark Labs">
- <meta property="og:description" content="Custom websites, ecommerce storefronts, product pages, service pages, checkout paths, and digital tools for U.S. businesses.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/custom-web-development-ecommerce.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Custom Web Development and Ecommerce Solutions | After Dark Labs">
- <meta name="twitter:description" content="Custom websites, ecommerce storefronts, product pages, service pages, checkout paths, and digital tools for U.S. businesses.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Websites",
- "item": "https://afterdarklabs.io/websites.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "Custom Web Development and Ecommerce",
- "item": "https://afterdarklabs.io/custom-web-development-ecommerce.html"
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="websites.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Website services</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Custom web development and e-commerce solutions.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Build a website or online store around your exact offer, customer journey, and operations instead of forcing your business into a generic template.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related website services</p>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <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="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>Shopify store design and development</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>Shopify migration and cleanup</span></a></li>
- <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</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>Bookings, appointments, and memberships</span></a></li>
- <li><a href="seo-performance-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>SEO and performance optimization</span></a></li>
- <li><a href="brand-positioning-creative-strategy.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>Brand positioning and creative strategy</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What this includes</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Custom websites shaped around real business goals.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">After Dark Labs creates custom marketing sites, ecommerce storefronts, product pages, service pages, checkout paths, admin workflows, and content structures that support real business goals.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Custom layouts for service businesses, brands, stores, and digital products</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Ecommerce planning for products, collections, carts, checkout, and post-purchase content</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Conversion-focused calls to action, inquiry forms, and lead capture paths</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Clean responsive builds that work across desktop, tablet, and mobile screens</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Custom web development</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Built around the way you sell.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Built around the way you sell</h3>
- <p class="mt-4">The strongest custom websites do more than look polished. They make the offer clear, guide visitors through the right information, and connect sales paths to the systems your team already uses.</p>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Ready for the next step</h3>
- <p class="mt-4">A website can start as a focused marketing site and grow into ecommerce, booking, customer portals, or connected app workflows. For product experiences beyond the browser, After Dark Labs also builds <a href="mobile-apps.html" class="text-[#ccff00] hover:text-white transition-colors">custom mobile apps</a>.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Build a website around how your business sells.</h2>
- <p class="text-gray-400 text-lg mb-10">Custom web development for businesses across the U.S.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start a Website Project <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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></a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/ecommerce-business-websites.html b/docs/ecommerce-business-websites.html
deleted file mode 100644
index 9a96150..0000000
--- a/docs/ecommerce-business-websites.html
+++ /dev/null
@@ -1,213 +0,0 @@
-<!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">
- <title>Ecommerce Business Website Development | After Dark Labs</title>
- <meta name="description" content="Ecommerce business website development for product catalogs, storefronts, checkout flows, subscriptions, customer accounts, and SEO-ready sales pages.">
- <link rel="canonical" href="https://afterdarklabs.io/ecommerce-business-websites.html">
- <meta property="og:title" content="Ecommerce Business Website Development | After Dark Labs">
- <meta property="og:description" content="Custom ecommerce business websites with storefronts, product pages, checkout paths, customer accounts, subscriptions, and search-ready structure.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/ecommerce-business-websites.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Ecommerce Business Website Development | After Dark Labs">
- <meta name="twitter:description" content="Custom ecommerce business websites with storefronts, product pages, checkout paths, customer accounts, subscriptions, and search-ready structure.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "Service",
- "name": "Ecommerce business website development",
- "serviceType": "Ecommerce website development",
- "url": "https://afterdarklabs.io/ecommerce-business-websites.html",
- "description": "Ecommerce business website development for product catalogs, storefronts, checkout flows, subscriptions, customer accounts, and SEO-ready sales pages.",
- "provider": {
- "@type": "Organization",
- "name": "After Dark Labs",
- "url": "https://afterdarklabs.io/"
- },
- "areaServed": {
- "@type": "Country",
- "name": "United States"
- }
- },
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Business Websites",
- "item": "https://afterdarklabs.io/business-websites.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "Ecommerce Business Websites",
- "item": "https://afterdarklabs.io/ecommerce-business-websites.html"
- }
- ]
- },
- {
- "@type": "FAQPage",
- "mainEntity": [
- {
- "@type": "Question",
- "name": "What is an ecommerce business website?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "An ecommerce business website is a site built to sell products, services, subscriptions, or digital goods through product pages, carts, checkout flows, payment handling, and customer communication."
- }
- },
- {
- "@type": "Question",
- "name": "Can ecommerce be added to an existing business website?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. Ecommerce can often be added through new product pages, collections, checkout paths, payment integrations, customer accounts, or a custom storefront connected to existing business systems."
- }
- },
- {
- "@type": "Question",
- "name": "Does an ecommerce business website need SEO?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. Ecommerce SEO helps product, collection, service, and category pages become easier to understand for search engines and customers. It also supports paid and social traffic by making landing pages clearer."
- }
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="business-websites.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Business websites</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Ecommerce business websites built for the full sales path.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">A business website that sells online needs more than a checkout button. After Dark Labs builds ecommerce sites with clear product structure, polished sales pages, payment paths, account experiences, and content that supports search and conversion.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related website services</p>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <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>Shopify store design and development</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 optimization</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 ecommerce</span></a></li>
- <li><a href="custom-business-website-development.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 business website development</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</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What this includes</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Product discovery through post-purchase support.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">Ecommerce website development starts with how products are discovered, compared, purchased, fulfilled, and supported. The site should make the path from interest to payment feel direct.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Product, collection, service, landing, and checkout page planning</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Cart, payment, subscription, customer account, and post-purchase flows</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Search-ready product copy, internal links, FAQs, and performance-focused layouts</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Integrations for email, inventory, fulfillment, shipping, analytics, or business tools</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Ecommerce sales path</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Product pages and checkout paths that fit the offer.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Product pages that answer buying questions</h3>
- <p class="mt-4">Strong ecommerce pages make the offer clear with practical details, visuals, pricing context, delivery expectations, FAQs, and calls to action that reduce hesitation.</p>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Checkout paths that fit the business</h3>
- <p class="mt-4">The right ecommerce flow depends on the offer: one-time purchases, wholesale orders, subscriptions, deposits, quote requests, digital products, or custom fulfillment rules.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section class="bg-[#ccff00] text-black">
- <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">Ecommerce business website FAQ</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Common ecommerce questions.</h2>
- </div>
- <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
- <div class="pb-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">What is an ecommerce business website?</h3>
- <p class="mt-4">It is a site built to sell products, services, subscriptions, or digital goods through product pages, carts, checkout flows, payment handling, and customer communication.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Can ecommerce be added to an existing site?</h3>
- <p class="mt-4">Yes. Ecommerce can often be added through new product pages, collections, checkout paths, payment integrations, customer accounts, or a custom storefront connected to existing systems.</p>
- </div>
- <div class="pt-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Does ecommerce need SEO?</h3>
- <p class="mt-4">Yes. Ecommerce SEO helps product, collection, service, and category pages become easier to understand for search engines and customers while making landing pages clearer.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Turn the business website into a stronger sales channel.</h2>
- <p class="text-gray-400 text-lg mb-10">Build an ecommerce website with product structure, checkout flow, SEO, and customer experience planned together.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start an Ecommerce Website <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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></a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/fort-lauderdale-business-website-design.html b/docs/fort-lauderdale-business-website-design.html
deleted file mode 100644
index b997a39..0000000
--- a/docs/fort-lauderdale-business-website-design.html
+++ /dev/null
@@ -1,222 +0,0 @@
-<!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">
- <title>Fort Lauderdale Business Website Design | After Dark Labs</title>
- <meta name="description" content="Fort Lauderdale business website design and development for service companies, contractors, auto sales teams, ecommerce brands, and local businesses.">
- <link rel="canonical" href="https://afterdarklabs.io/fort-lauderdale-business-website-design.html">
- <meta property="og:title" content="Fort Lauderdale Business Website Design | After Dark Labs">
- <meta property="og:description" content="Business website design in Fort Lauderdale for service businesses, contractors, ecommerce teams, auto sales, and companies serving South Florida or the U.S.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/fort-lauderdale-business-website-design.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Fort Lauderdale Business Website Design | After Dark Labs">
- <meta name="twitter:description" content="Business website design in Fort Lauderdale for service businesses, contractors, ecommerce teams, auto sales, and companies serving South Florida or the U.S.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "Service",
- "name": "Fort Lauderdale business website design",
- "serviceType": "Business website design",
- "url": "https://afterdarklabs.io/fort-lauderdale-business-website-design.html",
- "description": "Fort Lauderdale business website design and development for service companies, contractors, auto sales teams, ecommerce brands, and local businesses.",
- "provider": {
- "@type": "Organization",
- "name": "After Dark Labs",
- "url": "https://afterdarklabs.io/"
- },
- "areaServed": [
- {
- "@type": "City",
- "name": "Fort Lauderdale"
- },
- {
- "@type": "AdministrativeArea",
- "name": "South Florida"
- },
- {
- "@type": "Country",
- "name": "United States"
- }
- ]
- },
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Business Websites",
- "item": "https://afterdarklabs.io/business-websites.html"
- },
- {
- "@type": "ListItem",
- "position": 3,
- "name": "Fort Lauderdale Business Website Design",
- "item": "https://afterdarklabs.io/fort-lauderdale-business-website-design.html"
- }
- ]
- },
- {
- "@type": "FAQPage",
- "mainEntity": [
- {
- "@type": "Question",
- "name": "Do you build websites for Fort Lauderdale businesses?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. After Dark Labs is based in Fort Lauderdale and builds business websites for local service companies, contractors, auto sales teams, ecommerce brands, and companies serving South Florida or customers nationwide."
- }
- },
- {
- "@type": "Question",
- "name": "Can a Fort Lauderdale business website target local searches?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. Local search visibility can be supported with clear service pages, Fort Lauderdale and service area language, useful FAQs, internal links, fast mobile pages, and accurate business information across the web."
- }
- },
- {
- "@type": "Question",
- "name": "Do you only work with Fort Lauderdale businesses?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "No. After Dark Labs is Fort Lauderdale-based and works with businesses across the United States."
- }
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <div class="max-w-7xl mx-auto grid gap-14 px-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-end">
- <div>
- <a href="business-websites.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Business websites</a>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Fort Lauderdale business website design for companies that need better leads.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">After Dark Labs is based in Fort Lauderdale and builds custom business websites for service companies, contractors, plumbers, electricians, auto sales teams, ecommerce brands, and local operators serving South Florida or customers across the U.S.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related website services</p>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <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</span></a></li>
- <li><a href="small-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>Small business website design</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</span></a></li>
- <li><a href="custom-business-website-development.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 business website development</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">Local trust with national-grade execution</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Local relevance without generic local copy.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">A Fort Lauderdale business website needs to communicate local relevance without becoming generic. We plan pages around services, service areas, proof, FAQs, mobile performance, and conversion paths that make sense for the business.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Website design for Fort Lauderdale service businesses, contractors, trades, auto sales, and local companies</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Service pages and location-aware copy for customers searching by offer, problem, and area</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Quote forms, booking flows, ecommerce paths, and mobile-friendly contact actions</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>SEO metadata, internal links, fast page structure, and launch support</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">South Florida buyers</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Built for local leads and broader reach.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Built for South Florida buyers</h3>
- <p class="mt-4">Local customers need to understand what you do, where you work, why you are credible, and how to start. Clear service pages, proof, calls to action, and fast mobile layouts matter when people are comparing nearby options.</p>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Not limited to local projects</h3>
- <p class="mt-4">After Dark Labs is Fort Lauderdale-based, but the same website strategy can support companies that sell regionally or nationally through ecommerce, bookings, service requests, or custom business workflows.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section class="bg-[#ccff00] text-black">
- <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">Fort Lauderdale website design FAQ</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Common local website questions.</h2>
- </div>
- <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
- <div class="pb-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Do you build websites for Fort Lauderdale businesses?</h3>
- <p class="mt-4">Yes. After Dark Labs is based in Fort Lauderdale and builds business websites for local service companies, contractors, auto sales teams, ecommerce brands, and companies serving South Florida.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Can the site target local searches?</h3>
- <p class="mt-4">Yes. Local visibility can be supported with clear service pages, Fort Lauderdale and service area language, FAQs, internal links, fast mobile pages, and accurate business information across the web.</p>
- </div>
- <div class="pt-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Do you only work locally?</h3>
- <p class="mt-4">No. After Dark Labs is Fort Lauderdale-based and works with businesses across the United States.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Build a Fort Lauderdale business website with a clearer path to leads.</h2>
- <p class="text-gray-400 text-lg mb-10">Plan service pages, local SEO structure, quote paths, booking flows, and mobile performance around the way your customers search.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start a Local Website Project <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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></a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/generative-engine-optimization.html b/docs/generative-engine-optimization.html
deleted file mode 100644
index accabec..0000000
--- a/docs/generative-engine-optimization.html
+++ /dev/null
@@ -1,254 +0,0 @@
-<!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">
- <title>Generative Engine Optimization GEO Services | After Dark Labs</title>
- <meta name="description" content="Generative Engine Optimization (GEO) services for websites and mobile apps, helping brands show up accurately in ChatGPT, Gemini, AI Overviews, and answer engines.">
- <link rel="canonical" href="https://afterdarklabs.io/generative-engine-optimization.html">
- <meta property="og:title" content="Generative Engine Optimization GEO Services | After Dark Labs">
- <meta property="og:description" content="GEO services for websites and mobile apps that need stronger visibility, accuracy, and brand representation in AI-driven search and answer engines.">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/generative-engine-optimization.html">
- <meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Generative Engine Optimization GEO Services | After Dark Labs">
- <meta name="twitter:description" content="GEO services for websites and mobile apps that need stronger visibility, accuracy, and brand representation in AI-driven search and answer engines.">
- <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">
- <link rel="stylesheet" href="site.css">
- <script src="site.js" defer></script>
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@graph": [
- {
- "@type": "Service",
- "name": "Generative Engine Optimization",
- "alternateName": "GEO",
- "serviceType": "Generative Engine Optimization",
- "url": "https://afterdarklabs.io/generative-engine-optimization.html",
- "description": "Generative Engine Optimization (GEO) services for websites and mobile apps, helping brands show up accurately in ChatGPT, Gemini, AI Overviews, and answer engines.",
- "provider": {
- "@type": "Organization",
- "name": "After Dark Labs",
- "url": "https://afterdarklabs.io/"
- },
- "areaServed": {
- "@type": "Country",
- "name": "United States"
- }
- },
- {
- "@type": "BreadcrumbList",
- "itemListElement": [
- {
- "@type": "ListItem",
- "position": 1,
- "name": "Home",
- "item": "https://afterdarklabs.io/"
- },
- {
- "@type": "ListItem",
- "position": 2,
- "name": "Generative Engine Optimization",
- "item": "https://afterdarklabs.io/generative-engine-optimization.html"
- }
- ]
- },
- {
- "@type": "FAQPage",
- "mainEntity": [
- {
- "@type": "Question",
- "name": "What is Generative Engine Optimization?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Generative Engine Optimization, or GEO, is the process of making a brand, product, service, website, or app easier for AI answer engines to understand, summarize, cite, and represent accurately."
- }
- },
- {
- "@type": "Question",
- "name": "How is GEO different from SEO?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "SEO focuses on visibility in traditional search results. GEO builds on SEO by also shaping content, entity signals, FAQs, structured data, comparisons, and source clarity for AI-generated answers."
- }
- },
- {
- "@type": "Question",
- "name": "Do mobile apps need GEO?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "Yes. Mobile apps need clear app pages, store listing language, feature explanations, use cases, support content, reviews, and brand consistency so AI systems can describe the app accurately when users research solutions."
- }
- },
- {
- "@type": "Question",
- "name": "Does GEO replace SEO?",
- "acceptedAnswer": {
- "@type": "Answer",
- "text": "No. GEO should work with SEO. Traditional search, AI summaries, answer engines, social discovery, app stores, and direct brand searches all influence how customers find and evaluate a business."
- }
- }
- ]
- }
- ]
- }
- </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="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
- <a href="shopify-stores.html" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
- <a href="about.html" 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>
- <section class="bg-black pt-36 pb-20 md:pt-44 md:pb-28">
- <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]">Generative Engine Optimization</p>
- <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">GEO services for an AI-driven search world.</h1>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Traditional SEO is no longer the whole visibility picture. ChatGPT, Google Gemini, AI Overviews, Perplexity, and other answer engines can shape what customers learn before they ever click a website, app store listing, or ad.</p>
- </div>
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related services</p>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li><a href="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>Website services</span></a></li>
- <li><a href="mobile-apps.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>Mobile app development</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</span></a></li>
- <li><a href="brand-positioning-creative-strategy.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>Brand positioning and creative strategy</span></a></li>
- </ul>
- </div>
- </div>
- </section>
-
- <section class="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-[0.95fr_1.05fr] lg:items-center">
- <div>
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">AI is changing search behavior</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Answer engines now shape the first impression.</h2>
- <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">People increasingly ask AI systems for recommendations, comparisons, summaries, local options, app ideas, and product research. Gartner has warned that answer engines will disintermediate organic search traffic, and its public research also says marketers need to optimize for both AI-driven and traditional search.</p>
- </div>
- <ul class="space-y-5 text-lg font-semibold md:text-xl">
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Clarify how your brand, services, products, and app features should be described by AI answer systems</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Build pages, FAQs, structured data, and source-level content that answer specific customer questions</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Improve entity consistency across your website, app store listings, social profiles, reviews, and launch content</span></li>
- <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Monitor the questions customers ask AI tools and adjust content when the brand is missing, vague, or misrepresented</span></li>
- </ul>
- </div>
- </section>
-
- <section class="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-[1.05fr_0.95fr] lg:items-center">
- <div class="lg:order-2">
- <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">GEO for websites and mobile apps</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Clear source material for every product surface.</h2>
- </div>
- <div class="space-y-10 text-lg leading-8 text-gray-300 lg:order-1">
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Website GEO</h3>
- <p class="mt-4">For business websites, GEO means building content that answer engines can understand: service pages, local context, comparison content, FAQs, proof points, schema, and clear source material for what the company does.</p>
- <a href="websites.html" class="mt-5 inline-flex min-h-12 items-center gap-3 font-semibold text-[#ccff00] transition-colors hover:text-white">Explore website services <span aria-hidden="true">→</span></a>
- </div>
- <div>
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Mobile App GEO</h3>
- <p class="mt-4">For mobile apps, GEO connects app store optimization, product messaging, feature pages, support content, reviews, launch campaigns, and use-case language so AI systems can explain the app accurately.</p>
- <a href="mobile-apps.html" class="mt-5 inline-flex min-h-12 items-center gap-3 font-semibold text-[#ccff00] transition-colors hover:text-white">Explore mobile app services <span aria-hidden="true">→</span></a>
- </div>
- </div>
- </div>
- </section>
-
- <section class="bg-[#ccff00] text-black">
- <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 GEO work includes</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Audit, content, entity consistency, and refinement.</h2>
- </div>
- <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
- <div class="pb-7">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">AI answer audit</h3>
- <p class="mt-4">Test prompts around your category, brand, services, competitors, local market, app features, and buying questions to see what AI systems currently say.</p>
- </div>
- <div class="py-7">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Source-ready content</h3>
- <p class="mt-4">Create or improve pages that give AI systems clear facts, definitions, use cases, service details, location context, comparisons, and direct answers.</p>
- </div>
- <div class="py-7">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Entity consistency and structured data</h3>
- <p class="mt-4">Align names, descriptions, categories, services, products, profiles, app listings, proof points, schema, FAQs, breadcrumbs, products, local context, and content relationships where they accurately fit.</p>
- </div>
- <div class="pt-7">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Authority signals and ongoing refinement</h3>
- <p class="mt-4">Strengthen reviews, case studies, founder context, product documentation, app store assets, and content that supports trust, then update pages when your brand is absent, outdated, inaccurate, or losing ground.</p>
- </div>
- </div>
- </div>
- </section>
-
- <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-[#ccff00]">GEO FAQ</p>
- <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Common AI search questions.</h2>
- </div>
- <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-white">What is Generative Engine Optimization?</h3>
- <p class="mt-4">Generative Engine Optimization, or GEO, makes a brand, product, service, website, or app easier for AI answer engines to understand, summarize, cite, and represent accurately.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">How is GEO different from SEO?</h3>
- <p class="mt-4">SEO focuses on traditional search results. GEO builds on SEO by also shaping content, entity signals, FAQs, structured data, comparisons, and source clarity for AI-generated answers.</p>
- </div>
- <div class="py-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Do mobile apps need GEO?</h3>
- <p class="mt-4">Yes. Mobile apps need clear app pages, store listing language, feature explanations, use cases, support content, reviews, and brand consistency so AI systems can describe the app accurately when users research solutions.</p>
- </div>
- <div class="pt-8">
- <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Does GEO replace SEO?</h3>
- <p class="mt-4">No. GEO should work with SEO. Traditional search, AI summaries, answer engines, social discovery, app stores, and direct brand searches all influence how customers find and evaluate a business.</p>
- </div>
- </div>
- </div>
- </section>
-
- <section 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-5xl font-bold tracking-tighter mb-6 md:text-6xl">Make your brand easier for AI search to understand.</h2>
- <p class="text-gray-400 text-lg mb-10">Add GEO strategy to your website, mobile app, product launch, or service business marketing plan.</p>
- <a href="https://calendly.com/harrison-afterdarklabs/30min" target="_blank" rel="noopener noreferrer" class="inline-flex min-h-12 items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start GEO Services <span aria-hidden="true">→</span></a>
- </div>
- </section>
- </main>
-
- <footer class="bg-black py-16 border-t border-white/10">
- <div class="max-w-7xl mx-auto px-6 text-center">
- <a href="index.html" class="inline-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>
- </a>
- <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
- </div>
- </footer>
-</body>
-</html>
diff --git a/docs/gitman.webp b/docs/gitman.webp
deleted file mode 100644
index 43ef1e2..0000000
Binary files a/docs/gitman.webp and /dev/null differ
diff --git a/docs/index.html b/docs/index.html
index b1c33a1..3cca345 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -30,7 +30,6 @@
<meta name="twitter:image:alt" content="After Dark Labs. Custom websites and apps.">
<link rel="preload" href="https://afterdarklabs.io/fonts/ubuntu-400-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2" as="font" type="font/woff2" crossorigin>
- <link rel="stylesheet" href="https://afterdarklabs.io/index.tailwind.css?v=4">
<style>
@font-face {
font-family: 'Ubuntu';
@@ -57,18 +56,24 @@
}
:root {
- --neon: #ccff00;
--page-bg: #000000;
- --page-bg-rgb: 0, 0, 0;
--site-nav-height: 5.75rem;
}
+ *,
+ *::before,
+ *::after {
+ box-sizing: border-box;
+ }
+
html {
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
overscroll-behavior-x: none;
scroll-behavior: smooth;
+ line-height: 1.5;
+ -webkit-text-size-adjust: 100%;
}
@media (min-width: 1024px) {
@@ -80,133 +85,154 @@
font-size: 125%;
}
- nav img[src*="/logo_assets/mark"] {
- width: 3rem;
- height: 3rem;
- }
-
- .hero-content h1 {
- font-size: 4.5rem;
- }
- }
-
- @media (min-width: 1600px) {
- .hero-content h1 {
- font-size: 6rem;
- }
}
body {
+ margin: 0;
max-width: 100%;
overflow-x: hidden;
overflow-x: clip;
overscroll-behavior-x: none;
background: var(--page-bg);
+ color: #fff;
font-family: 'Ubuntu', system-ui, sans-serif;
+ line-height: inherit;
+ }
+
+ h1,
+ h2,
+ p {
+ margin: 0;
+ }
+
+ h1,
+ h2 {
+ font-size: inherit;
+ font-weight: inherit;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ img,
+ svg {
+ display: block;
+ vertical-align: middle;
+ }
+
+ img {
+ max-width: 100%;
+ height: auto;
}
nav {
+ position: fixed;
+ top: 0;
+ z-index: 50;
+ width: 100%;
+ background: #000;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
- .heading,
- .logo-font { font-family: inherit; color: #fff; }
+ .nav-shell {
+ width: 100%;
+ max-width: 80rem;
+ margin-inline: auto;
+ padding: 1rem;
+ }
- .hero-bg { background: var(--page-bg); }
+ .mobile-nav,
+ .desktop-nav {
+ align-items: center;
+ justify-content: space-between;
+ }
- .bg-black,
- .bg-zinc-950 {
- background-color: var(--page-bg) !important;
+ .mobile-nav {
+ display: flex;
+ gap: 0.75rem;
}
- .neon-ink {
- color: #fff;
+ .desktop-nav {
+ display: none;
}
- .bg-black\/90 {
- background-color: #000 !important;
+ .nav-brand {
+ display: flex;
+ align-items: center;
+ color: #fff;
}
- .neon-text {
- position: relative;
- isolation: isolate;
- display: inline-flex;
- align-items: baseline;
- font: inherit;
- letter-spacing: inherit;
- line-height: inherit;
- color: var(--neon);
- white-space: nowrap;
+ .mobile-nav .nav-brand {
+ min-width: 0;
+ padding: 0.375rem 0.75rem 0.375rem 0.375rem;
+ border-radius: 1rem;
+ text-align: left;
+ transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
- .neon-text::before {
- content: "";
- position: absolute;
- inset: -0.24em -0.42em -0.18em;
- background: radial-gradient(ellipse at 50% 58%, rgba(204,255,0,0.38), rgba(204,255,0,0.16) 42%, transparent 74%);
- filter: blur(0.18em);
- opacity: 0.9;
- pointer-events: none;
- z-index: -2;
+ .mobile-nav .nav-brand:hover {
+ background: rgba(255, 255, 255, 0.1);
}
- .neon-letter,
- .neon-gap {
- position: relative;
- display: inline-block;
- font: inherit;
- letter-spacing: inherit;
- line-height: inherit;
+ .mobile-nav .nav-brand:focus {
+ outline: none;
}
- .neon-letter {
- color: #ccff00;
- -webkit-text-fill-color: currentColor;
- -webkit-text-stroke: 0.006em rgba(235,255,120,0.58);
- filter:
- drop-shadow(0 0 0.012em rgba(235,255,120,0.54))
- drop-shadow(0 0 0.045em rgba(204,255,0,0.72))
- drop-shadow(0 0 0.105em rgba(204,255,0,0.28))
- drop-shadow(0 0 0.24em rgba(204,255,0,0.16));
- text-shadow:
- 0 0 0.026em rgba(235,255,120,0.38),
- 0 0 0.095em rgba(204,255,0,0.42);
+ .mobile-nav .nav-brand:focus-visible {
+ outline: 2px solid #fff;
+ outline-offset: 2px;
}
- .neon-letter::after {
- content: attr(data-letter);
- position: absolute;
- inset: 0;
- color: transparent;
- -webkit-text-fill-color: transparent;
- -webkit-text-stroke: 0.018em rgba(4,8,10,0.46);
- transform: translate(0.01em, 0.012em);
- opacity: 0.45;
- z-index: -1;
+ .desktop-nav .nav-brand {
+ gap: 0.75rem;
}
- .neon-letter--flicker {
- animation: neon-letter-flicker var(--flicker-duration, 12s) steps(1, end) infinite;
- animation-delay: var(--flicker-delay, 0s);
+ @media (min-width: 640px) {
+ .nav-shell {
+ padding-inline: 1.5rem;
+ }
}
- .neon-gap {
- width: 0.18em;
+ @media (min-width: 1024px) {
+ .nav-shell {
+ padding-block: 1.25rem;
+ }
+
+ .mobile-nav {
+ display: none;
+ }
+
+ .desktop-nav {
+ display: flex;
+ }
}
.hero-content {
position: relative;
z-index: 2;
+ display: grid;
+ width: 100%;
max-width: none;
+ justify-items: center;
+ gap: 2.5rem;
+ margin-inline: auto;
padding-inline: 0;
padding-block: 0;
+ text-align: center;
}
#hero {
+ position: relative;
+ display: flex;
box-sizing: border-box;
height: 100svh;
min-height: 100svh;
+ align-items: center;
+ overflow: hidden;
+ background: var(--page-bg);
padding-top: var(--site-nav-height);
padding-bottom: 0;
}
@@ -229,15 +255,21 @@
.nav-cta {
display: inline-flex;
+ flex-shrink: 0;
min-height: 3.25rem;
align-items: center;
justify-content: center;
padding: 0.75rem 1.15rem;
+ border-radius: 1rem;
background-color: #000 !important;
color: #fff !important;
font-size: clamp(1.05rem, 5vw, 1.3rem);
+ font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
+ transition:
+ color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+ background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-cta:hover,
@@ -251,6 +283,7 @@
gap: 0.22em;
padding-right: 0.08em;
font-size: clamp(1.25rem, 5.8vw, 1.7rem);
+ font-weight: 600;
line-height: 0.9;
letter-spacing: -0.055em;
white-space: nowrap;
@@ -325,6 +358,7 @@
padding-right: 0.1em;
font-size: 31vw;
font-size: min(31vw, calc((100svh - var(--site-nav-height)) * 0.4));
+ font-weight: 700;
line-height: 0.8;
letter-spacing: -0.075em;
}
@@ -375,7 +409,7 @@
}
.hero-scroll-hint:focus-visible {
- outline: 2px solid var(--neon);
+ outline: 2px solid #fff;
outline-offset: 0.4rem;
}
@@ -384,30 +418,6 @@
50% { transform: translateY(0.2rem) rotate(45deg); }
}
- @keyframes neon-letter-flicker {
- 0%, 4.8%, 5.4%, 5.9%, 37.5%, 38%, 38.6%, 100% {
- opacity: 1;
- -webkit-text-stroke-color: rgba(235,255,120,0.58);
- filter:
- drop-shadow(0 0 0.012em rgba(235,255,120,0.54))
- drop-shadow(0 0 0.045em rgba(204,255,0,0.72))
- drop-shadow(0 0 0.105em rgba(204,255,0,0.28))
- drop-shadow(0 0 0.24em rgba(204,255,0,0.16));
- }
- 5%, 37.8% {
- opacity: 0.08;
- -webkit-text-stroke-color: rgba(204,255,0,0.18);
- filter: none;
- }
- 5.7%, 38.3% {
- opacity: 0.38;
- -webkit-text-stroke-color: rgba(204,255,0,0.36);
- filter:
- drop-shadow(0 0 0.012em rgba(204,255,0,0.34))
- drop-shadow(0 0 0.036em rgba(204,255,0,0.20));
- }
- }
-
.work-intro {
position: relative;
height: 100svh;
@@ -532,11 +542,6 @@
will-change: auto;
}
- .neon-letter,
- .neon-letter--flicker {
- animation: none;
- }
-
.hero-letter {
opacity: 1;
filter: none;
@@ -573,6 +578,12 @@
padding: clamp(0rem, 0.5vw, 0.5rem) clamp(1rem, 2vw, 2rem);
}
+ #work {
+ scroll-margin-top: 6rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ background: var(--page-bg);
+ }
+
.work-stage-content {
width: 100%;
max-width: none;
@@ -595,7 +606,9 @@
width: 100%;
min-width: 0;
aspect-ratio: 16 / 9;
+ overflow: hidden;
border-radius: 0;
+ background: var(--page-bg);
}
#work-scroller > article > .portfolio-media {
@@ -649,7 +662,7 @@
}
#work-scroller > article:focus-within {
- outline: 2px solid var(--neon);
+ outline: 2px solid #fff;
outline-offset: -2px;
}
@@ -846,34 +859,34 @@
}
</script>
</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="flex items-center justify-between gap-3 lg:hidden">
- <a href="#hero" class="nav-brand flex min-w-0 items-center rounded-2xl p-1.5 pr-3 text-left text-white transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="After Dark Labs — go to top">
- <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">After</span><span class="nav-brand-letter">Dark</span><span class="nav-brand-letter">Labs</span></span>
+<body>
+ <nav>
+ <div class="nav-shell">
+ <div class="mobile-nav">
+ <a href="#hero" class="nav-brand" aria-label="After Dark Labs — go to top">
+ <span class="nav-brand-word" aria-hidden="true"><span class="nav-brand-letter">After</span><span class="nav-brand-letter">Dark</span><span class="nav-brand-letter">Labs</span></span>
</a>
- <a href="/cdn-cgi/l/email-protection#d9b1bcb5b5b699b8bfadbcabbdb8abb2b5b8bbaaf7b0b6" class="nav-cta neon-ink shrink-0 rounded-2xl bg-[#fff] font-semibold transition-colors hover:bg-white">Let's Talk</a>
+ <a href="mailto:[email protected]" class="nav-cta">Let's Talk</a>
</div>
- <div class="hidden items-center justify-between lg:flex">
- <a href="#hero" class="nav-brand flex items-center gap-3" aria-label="After Dark Labs — go to top">
+ <div class="desktop-nav">
+ <a href="#hero" class="nav-brand" aria-label="After Dark Labs — go to top">
<div>
- <span class="nav-brand-word logo-font font-semibold" aria-hidden="true"><span class="nav-brand-letter">After</span><span class="nav-brand-letter">Dark</span><span class="nav-brand-letter">Labs</span></span>
+ <span class="nav-brand-word" aria-hidden="true"><span class="nav-brand-letter">After</span><span class="nav-brand-letter">Dark</span><span class="nav-brand-letter">Labs</span></span>
</div>
</a>
- <a href="/cdn-cgi/l/email-protection#69010c05050629080f1d0c1b0d081b0205080b1a470006" class="nav-cta neon-ink rounded-2xl bg-[#fff] font-semibold transition-colors hover:bg-white">Let's Talk</a>
+ <a href="mailto:[email protected]" class="nav-cta">Let's Talk</a>
</div>
</div>
</nav>
<main>
- <section id="hero" class="hero-bg min-h-screen flex items-center pt-20" style="position:relative; overflow:hidden;">
+ <section id="hero">
<div class="hero-vignette"></div>
- <div class="hero-content mx-auto grid w-full max-w-7xl justify-items-center gap-10 px-6 py-32 text-center">
+ <div class="hero-content">
<div>
- <h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl" aria-label="After Dark Labs - Custom websites and apps"><span class="hero-word hero-letter" aria-hidden="true">After</span><span class="hero-word hero-letter" aria-hidden="true">Dark</span><span class="hero-word hero-letter" aria-hidden="true">Labs</span></h1>
+ <h1 aria-label="After Dark Labs - Custom websites and apps"><span class="hero-word hero-letter" aria-hidden="true">After</span><span class="hero-word hero-letter" aria-hidden="true">Dark</span><span class="hero-word hero-letter" aria-hidden="true">Labs</span></h1>
</div>
</div>
@@ -904,86 +917,86 @@
</div>
</section>
- <section id="work" class="scroll-mt-24 border-t border-white/10 bg-black" aria-label="Featured work">
+ <section id="work" aria-label="Featured work">
<div class="work-stage">
<div class="work-stage-content">
- <div id="work-scroller" class="portfolio-grid">
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <div id="work-scroller">
+ <article>
<div class="portfolio-media">
- <img src="https://afterdarklabs.io/gardenfresh.webp?v=2" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
+ <img src="https://afterdarklabs.io/gardenfresh.webp?v=2" width="1200" height="702" loading="lazy" decoding="async" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
</div>
- <div class="portfolio-details p-6">
- <p class="text-sm font-medium text-white">
+ <div class="portfolio-details">
+ <p>
<span class="portfolio-description">We built <span class="portfolio-name">Garden Fresh Wholesale</span>'s business website and local SEO strategy that increased customer acquisition by 48% since launch. <a class="portfolio-live-link" href="https://gardenfreshwholesale.com" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
</p>
</div>
</article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <article>
<div class="portfolio-media">
- <img src="https://afterdarklabs.io/miadruck.webp?v=3" width="1200" height="681" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Mia Druck real estate website project by After Dark Labs">
+ <img src="https://afterdarklabs.io/miadruck.webp?v=3" width="1200" height="681" loading="lazy" decoding="async" alt="Mia Druck real estate website project by After Dark Labs">
</div>
- <div class="portfolio-details p-6">
- <p class="text-sm font-medium text-white">
+ <div class="portfolio-details">
+ <p>
<span class="portfolio-description"><span class="portfolio-name">Mia Druck</span> needed a real estate website with heavy local SEO and a custom API for the most up-to-date listings and sales. We delivered this custom site in under a week. <a class="portfolio-live-link" href="https://miadruck.com" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
</p>
</div>
</article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <article>
<div class="portfolio-media">
- <img src="https://afterdarklabs.io/coralvibe.webp?v=1" width="1200" height="678" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
+ <img src="https://afterdarklabs.io/coralvibe.webp?v=1" width="1200" height="678" loading="lazy" decoding="async" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
</div>
- <div class="portfolio-details p-6">
- <p class="text-sm font-medium text-white">
+ <div class="portfolio-details">
+ <p>
<span class="portfolio-description"><span class="portfolio-name">Coral Vibe</span> hired us to design their Shopify store and provide support for ecommerce operations, product management, and social media marketing. Since launch, store visits resulting in sales have increased by 86%. <a class="portfolio-live-link" href="https://coralvibefl.com" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
</p>
</div>
</article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <article>
<div class="portfolio-media">
- <img src="https://afterdarklabs.io/frontlineboats.webp?v=1" width="1200" height="700" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Frontline Boat Services marine services website project by After Dark Labs">
+ <img src="https://afterdarklabs.io/frontlineboats.webp?v=1" width="1200" height="700" loading="lazy" decoding="async" alt="Frontline Boat Services marine services website project by After Dark Labs">
</div>
- <div class="portfolio-details p-6">
- <p class="text-sm font-medium text-white">
+ <div class="portfolio-details">
+ <p>
<span class="portfolio-description">For <span class="portfolio-name">Frontline Boat Services</span>, we built a highly focused business website with local SEO, custom payment links for customers, and an owner-managed photo gallery. <a class="portfolio-live-link" href="https://frontlineboats.com" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
</p>
</div>
</article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <article>
<div class="portfolio-media">
- <img src="https://afterdarklabs.io/voldservices.webp" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Vold Services exterior cleaning website with a scroll-animated hero, designed by After Dark Labs">
+ <img src="https://afterdarklabs.io/voldservices.webp" width="1200" height="702" loading="lazy" decoding="async" alt="Vold Services exterior cleaning website with a scroll-animated hero, designed by After Dark Labs">
</div>
- <div class="portfolio-details p-6">
- <p class="text-sm font-medium text-white">
+ <div class="portfolio-details">
+ <p>
<span class="portfolio-description"><span class="portfolio-name">Vold Services</span> hired us to create their business website with a scroll-animated hero, local SEO/GEO and an owner-managed photo gallery. <a class="portfolio-live-link" href="https://voldservices.com" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
</p>
</div>
</article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <article>
<div class="portfolio-media">
- <img src="https://afterdarklabs.io/vegy.webp?v=1" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Vegy wholesale ordering platform project by After Dark Labs">
+ <img src="https://afterdarklabs.io/vegy.webp?v=1" width="1200" height="702" loading="lazy" decoding="async" alt="Vegy wholesale ordering platform project by After Dark Labs">
</div>
- <div class="portfolio-details p-6">
- <p class="text-sm font-medium text-white">
+ <div class="portfolio-details">
+ <p>
<span class="portfolio-description">We have partnered with <span class="portfolio-name">Vegy</span> since 2023 to create a white-label web app for wholesale ordering with AI and email integrations, real-time updates, and advanced analytics. The app processed over $2 million in orders in the first year. <a class="portfolio-live-link" href="https://vegy.app/" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
</p>
</div>
</article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <article>
<div class="portfolio-media">
- <img src="https://afterdarklabs.io/prima.webp?v=1" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Prima Produce business website project by After Dark Labs">
+ <img src="https://afterdarklabs.io/prima.webp?v=1" width="1200" height="702" loading="lazy" decoding="async" alt="Prima Produce business website project by After Dark Labs">
</div>
- <div class="portfolio-details p-6">
- <p class="text-sm font-medium text-white">
+ <div class="portfolio-details">
+ <p>
<span class="portfolio-description">Our partner <span class="portfolio-name">Prima Produce</span> hired us to build their business website with custom online ordering and cohesive branding. Working with their existing logo, we created a complete online experience for Prima's customers. <a class="portfolio-live-link" href="https://prima.vegy.app/" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
</p>
</div>
</article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
+ <article>
<div class="portfolio-media">
- <img src="https://afterdarklabs.io/invoiceotter.webp?v=1" width="1200" height="673" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Invoice Otter SaaS project by After Dark Labs">
+ <img src="https://afterdarklabs.io/invoiceotter.webp?v=1" width="1200" height="673" loading="lazy" decoding="async" alt="Invoice Otter SaaS project by After Dark Labs">
</div>
- <div class="portfolio-details p-6">
- <p class="text-sm font-medium text-white">
+ <div class="portfolio-details">
+ <p>
<span class="portfolio-description">We built the mobile app, web interface, and the APIs for <span class="portfolio-name">Invoice Otter</span>'s contractor invoicing and estimating solutions with subscriptions, integrated payments, a custom AI chatbot, and per-user customization. <a class="portfolio-live-link" href="https://invoiceotter.com" target="_blank" rel="noopener noreferrer">View project <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg></a></span>
</p>
</div>
@@ -996,7 +1009,7 @@
<div class="work-intro-stage">
<h2 id="closing-heading" class="work-heading">
<span class="work-heading-words">
- <a class="work-heading-word work-heading-email" href="/cdn-cgi/l/email-protection#6f070a0303002f0e091b0a1d0b0e1d04030e0d1c410600">
+ <a class="work-heading-word work-heading-email" href="mailto:[email protected]">
<span class="work-heading-word">Let’s</span>
<span class="work-heading-word">move</span>
<span class="work-heading-word">your</span>
@@ -1016,7 +1029,7 @@
</main>
- <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
+ <script>
(function () {
const hero = document.getElementById('hero');
if (!hero) return;
diff --git a/docs/index.tailwind.css b/docs/index.tailwind.css
deleted file mode 100644
index c32ad2c..0000000
--- a/docs/index.tailwind.css
+++ /dev/null
@@ -1 +0,0 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.top-0{top:0}.isolate{isolation:isolate}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-mt-1{margin-top:-.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.min-h-screen{min-height:100vh}.w-\[82vw\]{width:82vw}.w-full{width:100%}.min-w-0{min-width:0}.max-w-7xl{max-width:80rem}.shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-start{scroll-snap-align:start}.scroll-mt-24{scroll-margin-top:6rem}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-t-3xl{border-top-left-radius:1.5rem;border-top-right-radius:1.5rem}.border-t{border-top-width:1px}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.bg-\[\#ccff00\]{--tw-bg-opacity:1;background-color:rgb(204 255 0/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/90{background-color:rgba(0,0,0,.9)}.bg-zinc-950{--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1\.5{padding:.375rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:.5rem}.pr-3{padding-right:.75rem}.pt-20{padding-top:5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-7xl{font-size:4.5rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-none{line-height:1}.tracking-\[3px\]{letter-spacing:3px}.tracking-tighter{letter-spacing:-.05em}.text-\[\#ccff00\]{--tw-text-opacity:1;color:rgb(204 255 0/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.no-scrollbar{scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:text-\[\#ccff00\]:hover{--tw-text-opacity:1;color:rgb(204 255 0/var(--tw-text-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-\[\#ccff00\]:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(204 255 0/var(--tw-ring-opacity,1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-\[\#17212b\]:focus-visible{--tw-ring-offset-color:#17212b}@media (min-width:640px){.sm\:w-\[28rem\]{width:28rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:768px){.md\:w-\[38rem\]{width:38rem}.md\:text-8xl{font-size:6rem;line-height:1}}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.lg\:text-7xl{font-size:4.5rem;line-height:1}}@media (min-width:1280px){.xl\:text-8xl{font-size:6rem;line-height:1}}
\ No newline at end of file
diff --git a/docs/index_firstlove.html b/docs/index_firstlove.html
deleted file mode 100644
index 023c67b..0000000
--- a/docs/index_firstlove.html
+++ /dev/null
@@ -1,858 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="icon" href="https://afterdarklabs.io/logo_assets/favicon.ico">
- <link rel="icon" type="image/svg+xml" href="https://afterdarklabs.io/logo_assets/badge.svg">
- <link rel="icon" type="image/png" sizes="32x32" href="https://afterdarklabs.io/logo_assets/favicon-32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="https://afterdarklabs.io/logo_assets/favicon-16.png">
- <link rel="apple-touch-icon" sizes="180x180" href="https://afterdarklabs.io/logo_assets/apple-touch-icon.png">
- <link rel="manifest" href="https://afterdarklabs.io/site.webmanifest">
- <title>Website Design & Development in South Florida | After Dark Labs</title>
- <meta name="description" content="South Florida website design and development for custom websites, Shopify stores, mobile apps, SaaS platforms, APIs, AI integrations, and business tools.">
- <meta name="robots" content="index,follow,max-image-preview:large">
- <link rel="canonical" href="https://afterdarklabs.io/">
- <meta property="og:title" content="Website Design & Development in South Florida | After Dark Labs">
- <meta property="og:description" content="South Florida website design and development for custom websites, Shopify stores, mobile apps, SaaS platforms, APIs, AI integrations, and business tools.">
- <meta property="og:image" content="https://afterdarklabs.io/twitter-card.png?v=3">
- <meta property="og:image:width" content="1200">
- <meta property="og:image:height" content="630">
- <meta property="og:image:alt" content="After Dark Labs websites and tools that help businesses stand out">
- <meta property="og:type" content="website">
- <meta property="og:url" content="https://afterdarklabs.io/">
- <meta property="og:site_name" content="After Dark Labs">
- <meta property="og:locale" content="en_US">
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:title" content="Website Design & Development in South Florida | After Dark Labs">
- <meta name="twitter:description" content="South Florida website design and development for custom websites, Shopify stores, mobile apps, SaaS platforms, APIs, AI integrations, and business tools.">
- <meta name="twitter:image" content="https://afterdarklabs.io/twitter-card.png?v=3">
- <meta name="twitter:image:alt" content="After Dark Labs websites and tools that help businesses stand out">
- <link rel="preload" href="https://afterdarklabs.io/fonts/ubuntu-400-latin.woff2" as="font" type="font/woff2" crossorigin>
- <link rel="preload" href="https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2" as="font" type="font/woff2" crossorigin>
- <link rel="stylesheet" href="https://afterdarklabs.io/index.tailwind.css?v=4">
- <style>
- @font-face {
- font-family: 'Ubuntu';
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: url('https://afterdarklabs.io/fonts/ubuntu-400-latin.woff2') format('woff2');
- }
-
- @font-face {
- font-family: 'Ubuntu';
- font-style: normal;
- font-weight: 500;
- font-display: swap;
- src: url('https://afterdarklabs.io/fonts/ubuntu-500-latin.woff2') format('woff2');
- }
-
- @font-face {
- font-family: 'Ubuntu';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: url('https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2') format('woff2');
- }
-
- :root {
- --neon: #ccff00;
- --page-bg: #17212b;
- --page-bg-rgb: 23, 33, 43;
- --site-nav-height: 5.75rem;
- }
-
- html { scroll-behavior: smooth; }
-
- @media (min-width: 1024px) {
- :root {
- --site-nav-height: 5.5rem;
- }
-
- html {
- font-size: 125%;
- }
-
- nav img[src*="/logo_assets/mark"],
- footer img[src*="/logo_assets/mark"] {
- width: 3rem;
- height: 3rem;
- }
-
- .hero-content h1 {
- font-size: 4.5rem;
- }
- }
-
- @media (min-width: 1600px) {
- .hero-content h1 {
- font-size: 6rem;
- }
- }
-
- body {
- background: var(--page-bg);
- font-family: 'Ubuntu', system-ui, sans-serif;
- }
-
- .heading,
- .logo-font { font-family: inherit; }
-
- .hero-bg { background: var(--page-bg); }
-
- .bg-black,
- .bg-zinc-950 {
- background-color: var(--page-bg) !important;
- }
-
- .neon-ink {
- color: var(--page-bg);
- }
-
- .bg-black\/90 {
- background-color: rgba(var(--page-bg-rgb), 0.92) !important;
- }
-
- .neon-text {
- position: relative;
- isolation: isolate;
- display: inline-flex;
- align-items: baseline;
- font: inherit;
- letter-spacing: inherit;
- line-height: inherit;
- color: var(--neon);
- white-space: nowrap;
- }
-
- .neon-text::before {
- content: "";
- position: absolute;
- inset: -0.24em -0.42em -0.18em;
- background: radial-gradient(ellipse at 50% 58%, rgba(204,255,0,0.38), rgba(204,255,0,0.16) 42%, transparent 74%);
- filter: blur(0.18em);
- opacity: 0.9;
- pointer-events: none;
- z-index: -2;
- }
-
- .neon-letter,
- .neon-gap {
- position: relative;
- display: inline-block;
- font: inherit;
- letter-spacing: inherit;
- line-height: inherit;
- }
-
- .neon-letter {
- color: #ccff00;
- -webkit-text-fill-color: currentColor;
- -webkit-text-stroke: 0.006em rgba(235,255,120,0.58);
- filter:
- drop-shadow(0 0 0.012em rgba(235,255,120,0.54))
- drop-shadow(0 0 0.045em rgba(204,255,0,0.72))
- drop-shadow(0 0 0.105em rgba(204,255,0,0.28))
- drop-shadow(0 0 0.24em rgba(204,255,0,0.16));
- text-shadow:
- 0 0 0.026em rgba(235,255,120,0.38),
- 0 0 0.095em rgba(204,255,0,0.42);
- }
-
- .neon-letter::after {
- content: attr(data-letter);
- position: absolute;
- inset: 0;
- color: transparent;
- -webkit-text-fill-color: transparent;
- -webkit-text-stroke: 0.018em rgba(4,8,10,0.46);
- transform: translate(0.01em, 0.012em);
- opacity: 0.45;
- z-index: -1;
- }
-
- .neon-letter--flicker {
- animation: neon-letter-flicker var(--flicker-duration, 12s) steps(1, end) infinite;
- animation-delay: var(--flicker-delay, 0s);
- }
-
- .neon-gap {
- width: 0.18em;
- }
-
- .hero-content {
- position: relative;
- z-index: 2;
- }
-
- .hero-vignette {
- position: absolute;
- inset: 0;
- background:
- 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;
- }
-
- .hero-ticker {
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 3;
- overflow: hidden;
- border-top: 1px solid rgba(255,255,255,0.14);
- background: rgba(var(--page-bg-rgb),0.92);
- outline: none;
- }
-
- .hero-ticker:focus-visible {
- border-top-color: var(--neon);
- box-shadow: inset 0 2px 0 var(--neon);
- }
-
- .hero-ticker-track {
- display: flex;
- width: max-content;
- animation: hero-ticker-scroll var(--ticker-duration, 10s) linear infinite;
- will-change: transform;
- }
-
- .hero-ticker:focus-visible .hero-ticker-track {
- animation-play-state: paused;
- }
-
- @media (hover: hover) and (pointer: fine) {
- .hero-ticker:hover .hero-ticker-track {
- animation-play-state: paused;
- }
- }
-
- .hero-ticker-group {
- display: flex;
- flex: none;
- align-items: center;
- gap: 0.8rem;
- margin: 0;
- padding: 1.15rem 0.4rem 1.15rem 1.2rem;
- list-style: none;
- white-space: nowrap;
- }
-
- .hero-ticker-item {
- display: inline-flex;
- align-items: center;
- gap: 0.8rem;
- color: #f3f4f6;
- font-size: 0.95rem;
- font-weight: 600;
- letter-spacing: 0;
- }
-
- .hero-ticker-item::after {
- content: "";
- width: 0.35rem;
- height: 0.35rem;
- flex: none;
- border-radius: 50%;
- background: var(--neon);
- box-shadow: 0 0 0.5rem rgba(204,255,0,0.3);
- }
-
- @media (max-width: 767px) {
- #hero {
- --mobile-nav-height: 5.75rem;
- --mobile-ticker-height: 3.4rem;
- box-sizing: border-box;
- height: var(--mobile-hero-height, 100svh);
- min-height: var(--mobile-hero-height, 100svh);
- align-items: stretch;
- padding-top: var(--mobile-nav-height);
- padding-bottom: var(--mobile-ticker-height);
- }
-
- .hero-content {
- align-content: center;
- gap: 0;
- padding-block: clamp(1.25rem, 4svh, 2rem);
- }
-
- .hero-content h1 {
- font-size: clamp(2.75rem, 17vw, 4.5rem);
- font-size: clamp(2.75rem, min(17vw, 9.5svh), 4.5rem);
- }
-
- .hero-ticker-group {
- padding-top: 0.95rem;
- padding-bottom: 0.95rem;
- }
- }
-
- @keyframes hero-ticker-scroll {
- to { transform: translate3d(calc(0px - var(--ticker-distance, 50%)), 0, 0); }
- }
-
- @keyframes neon-letter-flicker {
- 0%, 4.8%, 5.4%, 5.9%, 37.5%, 38%, 38.6%, 100% {
- opacity: 1;
- -webkit-text-stroke-color: rgba(235,255,120,0.58);
- filter:
- drop-shadow(0 0 0.012em rgba(235,255,120,0.54))
- drop-shadow(0 0 0.045em rgba(204,255,0,0.72))
- drop-shadow(0 0 0.105em rgba(204,255,0,0.28))
- drop-shadow(0 0 0.24em rgba(204,255,0,0.16));
- }
- 5%, 37.8% {
- opacity: 0.08;
- -webkit-text-stroke-color: rgba(204,255,0,0.18);
- filter: none;
- }
- 5.7%, 38.3% {
- opacity: 0.38;
- -webkit-text-stroke-color: rgba(204,255,0,0.36);
- filter:
- drop-shadow(0 0 0.012em rgba(204,255,0,0.34))
- drop-shadow(0 0 0.036em rgba(204,255,0,0.20));
- }
- }
-
- @media (prefers-reduced-motion: reduce) {
- .neon-letter,
- .neon-letter--flicker {
- animation: none;
- }
-
- .hero-ticker {
- overflow-x: auto;
- }
-
- .hero-ticker-track {
- animation: none;
- transform: none;
- will-change: auto;
- }
-
- .hero-ticker-group[aria-hidden="true"] {
- display: none;
- }
- }
-
- .work-stage {
- padding-block: 5rem 5.5rem;
- }
-
- .work-scroll-ready .work-stage {
- position: sticky;
- top: 0;
- display: flex;
- height: 100svh;
- min-height: 34rem;
- align-items: center;
- overflow: hidden;
- box-sizing: border-box;
- padding-top: clamp(6rem, 12svh, 8rem);
- padding-bottom: clamp(2.5rem, 8svh, 5rem);
- }
-
- .work-stage-content {
- width: 100%;
- min-width: 0;
- }
-
- #work-scroller {
- padding-inline: 1rem 0;
- scroll-padding-inline: 1rem;
- }
-
- #work-scroller > article:last-child {
- margin-inline-end: 1rem;
- }
-
- .portfolio-cover {
- display: flex;
- width: fit-content;
- align-items: center;
- border: 1px solid var(--page-bg);
- background: var(--page-bg);
- color: #fff;
- }
-
- .portfolio-cover-title {
- padding-block: clamp(1.5rem, 4vw, 3rem);
- padding-inline: 1rem;
- font-size: clamp(2.75rem, 6vw, 4rem);
- font-weight: 700;
- line-height: 0.86;
- letter-spacing: -0.07em;
- }
-
- .portfolio-description {
- display: block;
- color: #fff;
- }
-
- .portfolio-name {
- font-weight: 700;
- }
-
- .work-scroll-ready #work-scroller {
- overflow: visible;
- scroll-behavior: auto;
- touch-action: pan-y;
- transform: translate3d(var(--work-offset, 0px), 0, 0);
- will-change: transform;
- }
-
- @media (min-width: 768px) {
- .work-scroll-ready .work-stage {
- top: var(--site-nav-height);
- height: calc(100svh - var(--site-nav-height));
- min-height: 0;
- padding-block: clamp(1rem, 3svh, 2rem);
- }
-
- .work-scroll-ready #work-scroller {
- padding-bottom: 0;
- }
-
- #work-scroller > article {
- width: clamp(25rem, calc(125svh - 12rem), 38rem);
- }
-
- #work-scroller > .portfolio-cover {
- width: fit-content;
- }
- }
-
- @media (prefers-reduced-motion: reduce) {
- .work-scroll-ready {
- height: auto !important;
- }
-
- .work-scroll-ready .work-stage {
- position: relative;
- top: auto;
- height: auto;
- min-height: 0;
- overflow: visible;
- padding-block: 5rem 5.5rem;
- }
-
- .work-scroll-ready #work-scroller {
- display: grid;
- width: auto;
- grid-template-columns: 1fr;
- overflow: visible;
- transform: none !important;
- will-change: auto;
- }
-
- .work-scroll-ready #work-scroller > article {
- width: auto;
- }
-
- #work-scroller > article:last-child {
- margin-inline-end: 0;
- }
- }
-
- @media (min-width: 768px) and (prefers-reduced-motion: reduce) {
- .work-scroll-ready #work-scroller {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
- }
-
- </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_assets/icon-512.png",
- "founder": {
- "@type": "Person",
- "name": "Harrison Erd",
- "url": "https://harrisonerd.com/"
- },
- "areaServed": {
- "@type": "Country",
- "name": "United States"
- },
- "description": "After Dark Labs provides South Florida website design and development for custom websites, Shopify stores, mobile apps, SaaS platforms, APIs, AI integrations, branding, hosting, and business tools."
- },
- {
- "@type": "WebSite",
- "@id": "https://afterdarklabs.io/#website",
- "url": "https://afterdarklabs.io/",
- "name": "After Dark Labs",
- "alternateName": "After Dark Labs Florida",
- "publisher": {
- "@id": "https://afterdarklabs.io/#organization"
- },
- "description": "After Dark Labs provides website design and development for custom websites, Shopify stores, mobile apps, and business tools."
- },
- {
- "@type": "Service",
- "@id": "https://afterdarklabs.io/#digital-services",
- "name": "Website, ecommerce, app, and business software development",
- "description": "Custom websites, ecommerce stores, mobile apps, SaaS platforms, branding, hosting, APIs, AI chatbots, and intelligent automation.",
- "provider": {
- "@id": "https://afterdarklabs.io/#organization"
- },
- "areaServed": {
- "@type": "Country",
- "name": "United States"
- },
- "serviceType": [
- "Custom website design and development",
- "Shopify and ecommerce development",
- "Mobile app development",
- "Custom platforms, dashboards, and API integrations",
- "Brand identity and digital marketing",
- "Hosting and business technology",
- "AI integrations, chatbots, and intelligent automation"
- ],
- "url": "https://afterdarklabs.io/"
- }
- ]
- }
- </script>
-</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="flex items-center justify-between gap-3 lg:hidden">
- <a href="#hero" class="flex min-w-0 items-center gap-2 rounded-2xl p-1.5 pr-3 text-left text-white transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="Go to top">
- <img src="https://afterdarklabs.io/logo_assets/mark.svg" width="48" height="48" alt="" aria-hidden="true">
- <span class="min-w-0">
- <span class="logo-font block truncate text-xl font-semibold tracking-tighter">After Dark</span>
- <span class="logo-font -mt-1 block text-xs tracking-[3px] text-[#ccff00]">LABS</span>
- </span>
- </a>
- <a href="mailto:[email protected]" class="neon-ink shrink-0 rounded-2xl bg-[#ccff00] px-4 py-3 text-sm font-semibold transition-colors hover:bg-white">Let's Talk</a>
- </div>
-
- <div class="hidden items-center justify-between lg:flex">
- <a href="#hero" class="flex items-center gap-3" aria-label="Go to top">
- <img src="https://afterdarklabs.io/logo_assets/mark.svg" width="48" height="48" alt="" aria-hidden="true">
- <div>
- <span class="logo-font block text-2xl font-semibold tracking-tighter">After Dark</span>
- <span class="logo-font -mt-1 block text-sm tracking-[3px] text-[#ccff00]">LABS</span>
- </div>
- </a>
- <a href="mailto:[email protected]" class="neon-ink rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold transition-colors hover:bg-white">Let's Talk</a>
- </div>
- </div>
- </nav>
-
- <main>
- <section id="hero" class="hero-bg min-h-screen flex items-center pt-20" style="position:relative; overflow:hidden;">
- <div class="hero-vignette"></div>
-
- <div class="hero-content mx-auto grid w-full max-w-7xl justify-items-center gap-10 px-6 py-32 text-center">
- <div>
- <h1 class="heading text-7xl font-bold leading-none tracking-tighter md:text-8xl lg:text-7xl xl:text-8xl">
- Web design that <span class="neon-text" aria-hidden="true"><span class="neon-letter neon-letter--flicker" data-letter="s" style="--flicker-delay:-1.1s; --flicker-duration:11s;">s</span><span class="neon-letter" data-letter="t">t</span><span class="neon-letter neon-letter--flicker" data-letter="a" style="--flicker-delay:-5.6s; --flicker-duration:13s;">a</span><span class="neon-letter" data-letter="n">n</span><span class="neon-letter neon-letter--flicker" data-letter="d" style="--flicker-delay:-8.4s; --flicker-duration:15s;">d</span><span class="neon-letter neon-letter--flicker" data-letter="s" style="--flicker-delay:-7.4s; --flicker-duration:10s;">s</span><span class="neon-gap"></span><span class="neon-letter" data-letter="o">o</span><span class="neon-letter neon-letter--flicker" data-letter="u" style="--flicker-delay:-3.3s; --flicker-duration:12s;">u</span><span class="neon-letter" data-letter="t">t</span></span><span class="sr-only">stand out</span>
- </h1>
- </div>
- </div>
-
- <div class="hero-ticker" role="region" aria-label="Services" tabindex="0">
- <div class="hero-ticker-track">
- <ul class="hero-ticker-group" aria-label="Services offered">
- <li class="hero-ticker-item">Custom Websites & Apps</li>
- <li class="hero-ticker-item">Ecommerce Stores</li>
- <li class="hero-ticker-item">Brand Identity</li>
- <li class="hero-ticker-item">AI Integrations</li>
- </ul>
- <ul class="hero-ticker-group" aria-hidden="true">
- <li class="hero-ticker-item">Custom Websites & Apps</li>
- <li class="hero-ticker-item">Ecommerce Stores</li>
- <li class="hero-ticker-item">Brand Identity</li>
- <li class="hero-ticker-item">AI Integrations</li>
- </ul>
- </div>
- </div>
- </section>
-
- <section id="work" class="scroll-mt-24 border-t border-white/10 bg-black" aria-label="Featured work">
- <div class="work-stage">
- <div class="work-stage-content">
- <div id="work-scroller" class="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth pb-2">
- <article class="portfolio-cover w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl sm:w-[28rem] md:w-[38rem]">
- <p class="portfolio-cover-title">Featured<br>Work <span class="neon-text" aria-hidden="true"><span class="neon-letter neon-letter--flicker" data-letter="→" style="--flicker-delay:-4.2s; --flicker-duration:11s;">→</span></span></p>
- </article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
- <a href="https://gardenfreshwholesale.com" target="_blank" rel="noopener noreferrer" class="block w-full 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]" aria-label="Visit Garden Fresh Wholesale website">
- <img src="https://afterdarklabs.io/gardenfresh.webp?v=2" width="1200" height="702" loading="lazy" decoding="async" class="aspect-video w-full object-cover" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
- </a>
- <div class="p-6">
- <p class="text-sm font-medium text-white">
- <span class="portfolio-description">We built <span class="portfolio-name">Garden Fresh Wholesale</span>'s business website and local SEO strategy that increased customer acquisition by 48% since launch.</span>
- </p>
- </div>
- </article>
- <article class="w-[82vw] shrink-0 snap-start overflow-hidden rounded-3xl bg-zinc-950 sm:w-[28rem] md:w-[38rem]">
- <a href="https://miadruck.com" target="_blank" rel="noopener noreferrer" class="block w-full overflow-hidden rounded-t-3xl text-left focus:outline-none focu
[Diff truncated. Use the raw view or local clone for the full content.]