patx/afterdarklabs
first draft after dark labs website
Commit 659fcbd · patx · 2026-05-15T16:20:42-04:00
Comments
No comments yet.
Diff
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..7b13358
--- /dev/null
+++ b/about.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>About After Dark Labs | Custom Apps and Websites</title>
+ <meta name="description" content="Learn about After Dark Labs, a Fort Lauderdale-based studio creating custom mobile apps, websites, and digital products for businesses across the U.S.">
+ <link rel="canonical" href="/about.html">
+ <meta property="og:title" content="About After Dark Labs | Custom Apps and Websites">
+ <meta property="og:description" content="Placeholder company information for After Dark Labs, a custom app and website studio based in Fort Lauderdale, Florida.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="hover:text-[#ccff00] transition-colors">Websites</a>
+ <a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="text-[#ccff00]">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <p class="text-[#ccff00] font-semibold mb-5">About After Dark Labs</p>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">A digital product studio for businesses ready to move.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">Placeholder text: After Dark Labs partners with founders, local businesses, and growing teams to design and build custom mobile apps, websites, and digital systems.</p>
+ </div>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10">
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-5">Who we are</h2>
+ <p class="text-gray-300 leading-8">Placeholder text: We are a Fort Lauderdale-based studio focused on practical, polished digital work. Our projects combine strategy, design, development, launch support, and ongoing improvement for businesses across the U.S.</p>
+ </div>
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-5">How we work</h2>
+ <p class="text-gray-300 leading-8">Placeholder text: We start by understanding the business goal, then map the user experience, build the core product, and refine the details that make the final result feel fast, trustworthy, and useful.</p>
+ </div>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black">
+ <div class="max-w-5xl mx-auto px-6">
+ <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-8">What we value</h2>
+ <div class="grid md:grid-cols-3 gap-6 text-gray-300">
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <h3 class="font-semibold text-white mb-3">Clear strategy</h3>
+ <p>Placeholder text for positioning, project planning, and business-focused decision making.</p>
+ </div>
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <h3 class="font-semibold text-white mb-3">Strong execution</h3>
+ <p>Placeholder text for design, development, testing, launch, and support practices.</p>
+ </div>
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <h3 class="font-semibold text-white mb-3">Long-term utility</h3>
+ <p>Placeholder text for building products that remain useful as the business grows.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="py-24 border-t 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">Tell us what you are building.</h2>
+ <p class="text-gray-400 text-lg mb-8">After Dark Labs builds custom websites and mobile apps from Fort Lauderdale for businesses across the U.S.</p>
+ <a href="index.html#contact" class="inline-flex 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>→</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/app-store-launch-support.html b/app-store-launch-support.html
new file mode 100644
index 0000000..beee97d
--- /dev/null
+++ b/app-store-launch-support.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>App Store Launch and Support for iOS and 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="/app-store-launch-support.html">
+ <meta property="og:title" content="App Store Launch and Support for iOS and Android | After Dark Labs">
+ <meta property="og:description" content="Prepare, submit, launch, and improve your custom iOS and Android app with After Dark Labs.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="hover:text-[#ccff00] transition-colors">Websites</a>
+ <a href="mobile-apps.html" class="text-[#ccff00]">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <a href="mobile-apps.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Mobile app services</a>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">App Store launch and support for iOS and Android.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">Move from finished build to public release with store preparation, submission support, updates, and practical post-launch improvements.</p>
+ </div>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
+ <p class="text-gray-300 leading-8 mb-8">We help prepare the pieces around the app itself so launch day is organized and the product has a path for continued improvement.</p>
+ <ul class="space-y-4 text-gray-300">
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Store listing copy, screenshot direction, icons, and launch-ready app presentation</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> iOS App Store and Google Play submission coordination and release support</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Production fixes, early user feedback reviews, and update planning</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Support for version releases, feature additions, and launch follow-through</li>
+ </ul>
+ </div>
+ <aside class="border border-white/10 rounded-3xl p-8 bg-black">
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-5">Related app services</h2>
+ <div class="space-y-4">
+ <a href="mobile-app-branding-ui-ux.html" class="block text-gray-300 hover:text-[#ccff00]">Branding, logo design, and UI/UX</a>
+ <a href="backend-api-integration.html" class="block text-gray-300 hover:text-[#ccff00]">Backend and API integration</a>
+ <a href="influencer-marketing-social-media.html" class="block text-gray-300 hover:text-[#ccff00]">Influencer marketing on social media</a>
+ </div>
+ </aside>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black border-t border-white/10">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Launch with the next update already in mind.</h2>
+ <p class="text-gray-400 text-lg mb-8">Prepare your iOS and Android release with a team that can support the product after launch.</p>
+ <a href="index.html#contact" class="inline-flex 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>→</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/backend-api-integration.html b/backend-api-integration.html
new file mode 100644
index 0000000..c4e9140
--- /dev/null
+++ b/backend-api-integration.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Backend and API Integration for Mobile Apps | After Dark Labs</title>
+ <meta name="description" content="Backend and API integration for mobile apps, including authentication, databases, payment systems, notifications, dashboards, and third-party services.">
+ <link rel="canonical" href="/backend-api-integration.html">
+ <meta property="og:title" content="Backend and API Integration for Mobile Apps | After Dark Labs">
+ <meta property="og:description" content="Connect your custom mobile app to the backend systems and APIs it needs to operate.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="hover:text-[#ccff00] transition-colors">Websites</a>
+ <a href="mobile-apps.html" class="text-[#ccff00]">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <a href="mobile-apps.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Mobile app services</a>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Backend and API integration for mobile apps.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">Connect your app to the systems that make it useful: accounts, payments, data, notifications, dashboards, automations, and third-party services.</p>
+ </div>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
+ <p class="text-gray-300 leading-8 mb-8">We design backend connections around the app’s real workflows, balancing reliability, launch speed, and future maintainability.</p>
+ <ul class="space-y-4 text-gray-300">
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> User accounts, authentication, roles, profiles, and secure app access</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Database planning, content management, admin views, and operational records</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Payment, messaging, location, analytics, CRM, and other third-party API connections</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Practical error handling, testing, and support paths for production use</li>
+ </ul>
+ </div>
+ <aside class="border border-white/10 rounded-3xl p-8 bg-black">
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-5">Related app services</h2>
+ <div class="space-y-4">
+ <a href="mobile-app-branding-ui-ux.html" class="block text-gray-300 hover:text-[#ccff00]">Branding, logo design, and UI/UX</a>
+ <a href="app-store-launch-support.html" class="block text-gray-300 hover:text-[#ccff00]">App store launch and support</a>
+ <a href="influencer-marketing-social-media.html" class="block text-gray-300 hover:text-[#ccff00]">Influencer marketing on social media</a>
+ </div>
+ </aside>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black border-t border-white/10">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Build the systems behind the app.</h2>
+ <p class="text-gray-400 text-lg mb-8">Plan the backend and API layer your mobile product needs to work reliably.</p>
+ <a href="index.html#contact" class="inline-flex 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>→</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/brand-positioning-creative-strategy.html b/brand-positioning-creative-strategy.html
new file mode 100644
index 0000000..5fc82b3
--- /dev/null
+++ b/brand-positioning-creative-strategy.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Brand Positioning and Creative Strategy | 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="/brand-positioning-creative-strategy.html">
+ <meta property="og:title" content="Brand Positioning and Creative Strategy | After Dark Labs">
+ <meta property="og:description" content="Clarify your offer, message, and creative direction before building a custom website.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="text-[#ccff00]">Websites</a>
+ <a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <a href="websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Website services</a>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Brand positioning and creative strategy.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">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>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
+ <p class="text-gray-300 leading-8 mb-8">We align the website around what makes your business valuable, who it serves, and what action visitors should take next.</p>
+ <ul class="space-y-4 text-gray-300">
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Offer positioning, audience framing, and service page messaging</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Visual direction for typography, color, layout, imagery, and interaction style</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Creative campaign ideas for launches, seasonal pushes, and content hooks</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Conversion strategy for CTAs, proof points, objections, and next steps</li>
+ </ul>
+ </div>
+ <aside class="border border-white/10 rounded-3xl p-8 bg-black">
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-5">Related website services</h2>
+ <div class="space-y-4">
+ <a href="custom-web-development-ecommerce.html" class="block text-gray-300 hover:text-[#ccff00]">Custom web development and ecommerce</a>
+ <a href="online-bookings-appointments-memberships.html" class="block text-gray-300 hover:text-[#ccff00]">Bookings, appointments, and memberships</a>
+ <a href="seo-performance-optimization.html" class="block text-gray-300 hover:text-[#ccff00]">SEO and performance optimization</a>
+ </div>
+ </aside>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black border-t border-white/10">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Make your website feel intentional.</h2>
+ <p class="text-gray-400 text-lg mb-8">Clarify the message and creative direction before your next build.</p>
+ <a href="index.html#contact" class="inline-flex 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>→</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/custom-web-development-ecommerce.html b/custom-web-development-ecommerce.html
new file mode 100644
index 0000000..cc87bee
--- /dev/null
+++ b/custom-web-development-ecommerce.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Custom Web Development and E-commerce Solutions | After Dark Labs</title>
+ <meta name="description" content="Custom web development and ecommerce solutions for businesses that need fast storefronts, polished service pages, product catalogs, checkout flows, and reliable digital tools.">
+ <link rel="canonical" href="/custom-web-development-ecommerce.html">
+ <meta property="og:title" content="Custom Web Development and E-commerce Solutions | After Dark Labs">
+ <meta property="og:description" content="After Dark Labs builds custom websites and ecommerce systems for businesses across the U.S.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="text-[#ccff00]">Websites</a>
+ <a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <a href="websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Website services</a>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Custom web development and e-commerce solutions.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">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>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
+ <p class="text-gray-300 leading-8 mb-8">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>
+ <ul class="space-y-4 text-gray-300">
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Custom layouts for service businesses, brands, stores, and digital products</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Ecommerce planning for products, collections, carts, checkout, and post-purchase content</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Conversion-focused calls to action, inquiry forms, and lead capture paths</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Clean responsive builds that work across desktop, tablet, and mobile screens</li>
+ </ul>
+ </div>
+ <aside class="border border-white/10 rounded-3xl p-8 bg-black">
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-5">Related website services</h2>
+ <div class="space-y-4">
+ <a href="online-bookings-appointments-memberships.html" class="block text-gray-300 hover:text-[#ccff00]">Bookings, appointments, and memberships</a>
+ <a href="seo-performance-optimization.html" class="block text-gray-300 hover:text-[#ccff00]">SEO and performance optimization</a>
+ <a href="brand-positioning-creative-strategy.html" class="block text-gray-300 hover:text-[#ccff00]">Brand positioning and creative strategy</a>
+ </div>
+ </aside>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black border-t border-white/10">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Build a website around how your business sells.</h2>
+ <p class="text-gray-400 text-lg mb-8">Custom web development from a Fort Lauderdale-based team serving businesses across the U.S.</p>
+ <a href="index.html#contact" class="inline-flex 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>→</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/index.html b/index.html
new file mode 100644
index 0000000..eaf58f7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>After Dark Labs | Custom Mobile Apps & Websites</title>
+ <meta name="description" content="After Dark Labs builds custom mobile apps and high-performance websites for businesses across America, with strategy, design, development, SEO, and launch support.">
+ <link rel="canonical" href="/index.html">
+ <meta property="og:title" content="After Dark Labs | Custom Mobile Apps & Websites">
+ <meta property="og:description" content="Custom mobile apps and high-performance websites from a Fort Lauderdale-based team serving businesses across the U.S.">
+ <meta property="og:type" content="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">
+ <style>
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
+
+ :root { --neon: #ccff00; }
+
+ body { font-family: 'Inter', system-ui, sans-serif; }
+ .heading { font-family: 'Space Grotesk', sans-serif; }
+
+ .hero-bg { background: linear-gradient(135deg, #030303 0%, #0a0a0a 100%); }
+
+ .neon-text {
+ color: var(--neon);
+ text-shadow: 0 0 10px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon);
+ }
+
+ .card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
+ .card-hover:hover {
+ transform: translateY(-12px);
+ box-shadow: 0 25px 50px -12px rgb(204 255 0 / 0.2);
+ }
+
+ /* Full-hero canvas */
+ #hero-canvas {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ z-index: 0;
+ }
+
+ .hero-content {
+ position: relative;
+ z-index: 1;
+ }
+
+ /* Vignette so edges stay dark and text pops */
+ .hero-vignette {
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%),
+ linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.5) 100%);
+ pointer-events: none;
+ z-index: 1;
+ }
+ </style>
+</head>
+<body class="bg-black text-white overflow-x-hidden">
+
+ <!-- NAV -->
+ <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">
+ <div 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>
+ </div>
+ <div class="hidden md:flex items-center gap-7 text-sm font-medium">
+ <a href="#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="hover:text-[#ccff00] transition-colors">Websites</a>
+ <a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
+ <a href="#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300 flex items-center gap-2">
+ Start a Project
+ </a>
+ </div>
+ </nav>
+
+ <!-- HERO -->
+ <section class="hero-bg min-h-screen flex items-center pt-20" style="position:relative; overflow:hidden;">
+ <canvas id="hero-canvas"></canvas>
+ <div class="hero-vignette"></div>
+
+ <div class="hero-content max-w-4xl mx-auto px-6 py-32 flex flex-col items-center text-center w-full">
+ <div class="space-y-8">
+ <h1 class="heading text-7xl md:text-8xl font-bold leading-none tracking-tighter">
+ Digital solutions<br>that help businesses<br><span class="neon-text">thrive</span>.
+ </h1>
+ <p class="text-xl text-gray-300 max-w-xl mx-auto">
+ Custom mobile apps and blazing-fast websites for businesses across America.
+ </p>
+ <div class="flex flex-wrap gap-5 justify-center">
+ <a href="#contact" class="px-8 py-5 bg-[#ccff00] hover:bg-white text-black font-semibold rounded-3xl text-lg transition-all flex items-center gap-3 group">
+ Let's Build Something
+ <span class="group-hover:rotate-45 transition-transform">→</span>
+ </a>
+ <a href="#work" class="px-8 py-5 border border-white/30 hover:border-[#ccff00] font-medium rounded-3xl text-lg transition-all">
+ See Our Work
+ </a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- SERVICES -->
+ <section id="services" class="py-28 bg-zinc-950">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="text-center mb-16">
+ <h2 class="heading text-5xl font-semibold tracking-tighter mb-4">What We Build</h2>
+ <p class="text-gray-400">Premium custom development with an edge.</p>
+ </div>
+ <div class="grid md:grid-cols-2 gap-8">
+ <div class="bg-zinc-900 border border-white/10 rounded-3xl p-10 card-hover">
+ <div class="w-14 h-14 bg-[#ccff00] text-black rounded-2xl flex items-center justify-center mb-8 text-3xl">📱</div>
+ <h3 class="text-3xl font-semibold mb-3"><a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Custom Mobile Apps</a></h3>
+ <p class="text-gray-400 mb-8">Beautiful iOS, Android & cross-platform apps that stand out.</p>
+ <ul class="space-y-4 text-sm">
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="mobile-app-branding-ui-ux.html" class="hover:text-[#ccff00] transition-colors">Branding, logo design, stunning UI/UX</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="backend-api-integration.html" class="hover:text-[#ccff00] transition-colors">Backend + API Integration</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="app-store-launch-support.html" class="hover:text-[#ccff00] transition-colors">App Store Launch & Support (iOS + Android)</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="influencer-marketing-social-media.html" class="hover:text-[#ccff00] transition-colors">Influencer marketing on social media</a></li>
+ </ul>
+ <a href="mobile-apps.html" class="inline-flex mt-8 text-[#ccff00] font-semibold hover:text-white transition-colors">Explore mobile app development →</a>
+ </div>
+ <div class="bg-zinc-900 border border-white/10 rounded-3xl p-10 card-hover">
+ <div class="w-14 h-14 bg-[#ccff00] text-black rounded-2xl flex items-center justify-center mb-8 text-3xl">🌐</div>
+ <h3 class="text-3xl font-semibold mb-3"><a href="websites.html" class="hover:text-[#ccff00] transition-colors">High-Performance Websites</a></h3>
+ <p class="text-gray-400 mb-8">Fast, beautiful, conversion-focused websites that get results.</p>
+ <ul class="space-y-4 text-sm">
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="custom-web-development-ecommerce.html" class="hover:text-[#ccff00] transition-colors">Custom Web Development and E-commerce Solutions</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="online-bookings-appointments-memberships.html" class="hover:text-[#ccff00] transition-colors">Online bookings, appointments, and subscription memberships</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="seo-performance-optimization.html" class="hover:text-[#ccff00] transition-colors">SEO Optimized + Lightning Fast Performance</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="brand-positioning-creative-strategy.html" class="hover:text-[#ccff00] transition-colors">Brand positioning and Creative Strategies</a></li>
+ </ul>
+ <a href="websites.html" class="inline-flex mt-8 text-[#ccff00] font-semibold hover:text-white transition-colors">Explore website development →</a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- WORK -->
+ <section id="work" class="py-28 bg-black">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="flex justify-between items-end mb-12">
+ <div>
+ <h2 class="heading text-5xl font-semibold tracking-tighter">Recent Work</h2>
+ </div>
+ </div>
+ <div class="grid md:grid-cols-3 gap-8">
+ <div class="group rounded-3xl overflow-hidden border border-white/10">
+ <img src="/home/harrisonerd/Pictures/Screenshots/miadruck.png" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Mia Druck real estate website project by After Dark Labs">
+ <div class="p-6">
+ <div class="text-[#ccff00] text-sm font-medium">Website • Real estate</div>
+ <h4 class="text-xl font-semibold mt-1">Mia Druck</h4>
+ </div>
+ </div>
+ <div class="group rounded-3xl overflow-hidden border border-white/10">
+ <img src="/home/harrisonerd/Pictures/Screenshots/gardenfresh.png" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
+ <div class="p-6">
+ <div class="text-[#ccff00] text-sm font-medium">Web App • E-commerce</div>
+ <h4 class="text-xl font-semibold mt-1">Garden Fresh Wholesale</h4>
+ </div>
+ </div>
+ <div class="group rounded-3xl overflow-hidden border border-white/10">
+ <img src="/home/harrisonerd/Pictures/Screenshots/invoiceotter.png" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Invoice Otter SaaS web app project by After Dark Labs">
+ <div class="p-6">
+ <div class="text-[#ccff00] text-sm font-medium">Web App • SaaS</div>
+ <h4 class="text-xl font-semibold mt-1">Invoice Otter</h4>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- CTA -->
+ <section id="contact" class="py-28 border-t border-b border-white/10 bg-zinc-950">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-6xl font-bold tracking-tighter mb-6">Ready to build something exceptional?</h2>
+ <p class="text-xl text-gray-400 mb-10">Tell us about your project. We reply the same day!</p>
+ <form class="space-y-6" onsubmit="handleSubmit(event)">
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+ <input type="text" placeholder="Your Name" class="bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
+ <input type="email" placeholder="Business Email" class="bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
+ </div>
+ <textarea placeholder="Tell us about your project..." rows="6" class="w-full bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-3xl px-6 py-5 outline-none resize-none"></textarea>
+ <button type="submit" class="w-full py-6 bg-[#ccff00] text-black font-bold text-xl rounded-3xl hover:scale-[1.02] transition-all">
+ Send Message
+ </button>
+ </form>
+ </div>
+ </section>
+
+ <!-- FOOTER -->
+ <footer class="bg-black py-20">
+ <div class="max-w-7xl mx-auto px-6 text-center">
+ <div class="flex items-center justify-center gap-3 mb-6">
+ <div class="w-9 h-9 bg-black border-2 border-[#ccff00] rounded-2xl flex items-center justify-center text-2xl">🌑</div>
+ <span class="heading text-3xl font-semibold tracking-tighter">After Dark Labs</span>
+ </div>
+ <p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
+ </div>
+ </footer>
+
+ <script>
+ function handleSubmit(e) {
+ e.preventDefault();
+ alert("Thank you! We'll get back to you within 24 hours. 🌑");
+ }
+
+ /* ─── HERO CANVAS ANIMATION ──────────────────────────────── */
+ (function () {
+ const canvas = document.getElementById('hero-canvas');
+ const section = canvas.closest('section');
+ const ctx = canvas.getContext('2d');
+
+ const NODE_COUNT = 80;
+ const LINK_DIST = 140;
+ const PULSE_SPEED = 0.012;
+
+ let W, H, nodes = [], mouse = { x: -9999, y: -9999 };
+
+ function resize() {
+ const rect = section.getBoundingClientRect();
+ W = canvas.width = rect.width * devicePixelRatio;
+ H = canvas.height = rect.height * devicePixelRatio;
+ canvas.style.width = rect.width + 'px';
+ canvas.style.height = rect.height + 'px';
+ }
+
+ function makeNode() {
+ return {
+ x: Math.random() * W,
+ y: Math.random() * H,
+ vx: (Math.random() - 0.5) * 0.45,
+ vy: (Math.random() - 0.5) * 0.45,
+ r: 1.5 + Math.random() * 2,
+ phase: Math.random() * Math.PI * 2,
+ };
+ }
+
+ function init() {
+ resize();
+ nodes = Array.from({ length: NODE_COUNT }, makeNode);
+ }
+
+ const ORBS = [
+ { cx: 0.20, cy: 0.35, r: 0.22, spd: 0.0007, off: 0 },
+ { cx: 0.75, cy: 0.60, r: 0.18, spd: 0.0011, off: 2.1 },
+ { cx: 0.50, cy: 0.25, r: 0.14, spd: 0.0009, off: 4.5 },
+ { cx: 0.85, cy: 0.20, r: 0.12, spd: 0.0013, off: 1.3 },
+ ];
+
+ function drawOrbs(t) {
+ ORBS.forEach(o => {
+ const cx = (o.cx + Math.sin(t * o.spd + o.off) * 0.06) * W;
+ const cy = (o.cy + Math.cos(t * o.spd * 1.3 + o.off) * 0.06) * H;
+ const r = o.r * Math.min(W, H);
+ const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+ g.addColorStop(0, 'rgba(204,255,0,0.10)');
+ g.addColorStop(0.5, 'rgba(204,255,0,0.04)');
+ g.addColorStop(1, 'rgba(204,255,0,0)');
+ ctx.beginPath();
+ ctx.arc(cx, cy, r, 0, Math.PI * 2);
+ ctx.fillStyle = g;
+ ctx.fill();
+ });
+ }
+
+ let rings = [];
+ section.addEventListener('mousemove', e => {
+ const rect = section.getBoundingClientRect();
+ mouse.x = (e.clientX - rect.left) * devicePixelRatio;
+ mouse.y = (e.clientY - rect.top) * devicePixelRatio;
+ if (Math.random() < 0.08) {
+ rings.push({ x: mouse.x, y: mouse.y, r: 0, alpha: 0.5 });
+ }
+ });
+ section.addEventListener('mouseleave', () => { mouse.x = mouse.y = -9999; });
+
+ function drawRings() {
+ rings = rings.filter(rg => rg.alpha > 0.01);
+ rings.forEach(rg => {
+ rg.r += 1.8;
+ rg.alpha *= 0.93;
+ ctx.beginPath();
+ ctx.arc(rg.x, rg.y, rg.r, 0, Math.PI * 2);
+ ctx.strokeStyle = `rgba(204,255,0,${rg.alpha})`;
+ ctx.lineWidth = 1;
+ ctx.stroke();
+ });
+ }
+
+ let t = 0;
+ function frame() {
+ t++;
+ ctx.clearRect(0, 0, W, H);
+ ctx.fillStyle = '#050505';
+ ctx.fillRect(0, 0, W, H);
+
+ drawOrbs(t);
+
+ nodes.forEach(n => {
+ n.phase += PULSE_SPEED;
+ n.x += n.vx;
+ n.y += n.vy;
+ if (n.x < 0 || n.x > W) n.vx *= -1;
+ if (n.y < 0 || n.y > H) n.vy *= -1;
+
+ const dx = n.x - mouse.x, dy = n.y - mouse.y;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < 90000) {
+ const f = (1 - d2 / 90000) * 0.4;
+ n.vx += (dx / Math.sqrt(d2)) * f;
+ n.vy += (dy / Math.sqrt(d2)) * f;
+ }
+
+ const spd = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
+ if (spd > 1.2) { n.vx /= spd / 1.2; n.vy /= spd / 1.2; }
+ });
+
+ ctx.lineWidth = 0.8;
+ for (let i = 0; i < nodes.length; i++) {
+ for (let j = i + 1; j < nodes.length; j++) {
+ const a = nodes[i], b = nodes[j];
+ const dx = a.x - b.x, dy = a.y - b.y;
+ const d = Math.sqrt(dx * dx + dy * dy);
+ if (d < LINK_DIST * devicePixelRatio) {
+ const alpha = (1 - d / (LINK_DIST * devicePixelRatio)) * 0.35;
+ ctx.strokeStyle = `rgba(204,255,0,${alpha})`;
+ ctx.beginPath();
+ ctx.moveTo(a.x, a.y);
+ ctx.lineTo(b.x, b.y);
+ ctx.stroke();
+ }
+ }
+ }
+
+ nodes.forEach(n => {
+ const pulse = 0.5 + 0.5 * Math.sin(n.phase);
+ const alpha = 0.55 + 0.45 * pulse;
+ const glow = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 4);
+ glow.addColorStop(0, `rgba(204,255,0,${alpha})`);
+ glow.addColorStop(0.4, `rgba(204,255,0,${alpha * 0.3})`);
+ glow.addColorStop(1, 'rgba(204,255,0,0)');
+ ctx.beginPath();
+ ctx.arc(n.x, n.y, n.r * 4 * devicePixelRatio, 0, Math.PI * 2);
+ ctx.fillStyle = glow;
+ ctx.fill();
+
+ ctx.beginPath();
+ ctx.arc(n.x, n.y, n.r * devicePixelRatio, 0, Math.PI * 2);
+ ctx.fillStyle = `rgba(204,255,0,${alpha})`;
+ ctx.fill();
+ });
+
+ drawRings();
+
+ for (let y = 0; y < H; y += 4) {
+ ctx.fillStyle = 'rgba(0,0,0,0.04)';
+ ctx.fillRect(0, y, W, 1);
+ }
+
+ requestAnimationFrame(frame);
+ }
+
+ window.addEventListener('resize', () => { resize(); });
+ init();
+ frame();
+ })();
+ </script>
+</body>
+</html>
diff --git a/influencer-marketing-social-media.html b/influencer-marketing-social-media.html
new file mode 100644
index 0000000..a89bbbf
--- /dev/null
+++ b/influencer-marketing-social-media.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Influencer Marketing for Mobile Apps | After Dark Labs</title>
+ <meta name="description" content="Influencer marketing and social media launch strategy for mobile apps, including creator outreach, content angles, campaign planning, and social proof.">
+ <link rel="canonical" href="/influencer-marketing-social-media.html">
+ <meta property="og:title" content="Influencer Marketing for Mobile Apps | After Dark Labs">
+ <meta property="og:description" content="Build social momentum for your mobile app launch with creator outreach and campaign strategy.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="hover:text-[#ccff00] transition-colors">Websites</a>
+ <a href="mobile-apps.html" class="text-[#ccff00]">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <a href="mobile-apps.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Mobile app services</a>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Influencer marketing on social media for mobile apps.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">Give your app a stronger launch path with creator outreach, social content angles, campaign planning, and the proof new users need to pay attention.</p>
+ </div>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
+ <p class="text-gray-300 leading-8 mb-8">We connect the app’s positioning to social media tactics that can support launch awareness, early adoption, and credibility.</p>
+ <ul class="space-y-4 text-gray-300">
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Creator and influencer angle planning based on the app’s audience and category</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Launch campaign ideas, content prompts, demo concepts, and social proof opportunities</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Store listing and landing page messaging that supports social traffic</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Post-launch feedback loops so content and product updates inform each other</li>
+ </ul>
+ </div>
+ <aside class="border border-white/10 rounded-3xl p-8 bg-black">
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-5">Related app services</h2>
+ <div class="space-y-4">
+ <a href="mobile-app-branding-ui-ux.html" class="block text-gray-300 hover:text-[#ccff00]">Branding, logo design, and UI/UX</a>
+ <a href="backend-api-integration.html" class="block text-gray-300 hover:text-[#ccff00]">Backend and API integration</a>
+ <a href="app-store-launch-support.html" class="block text-gray-300 hover:text-[#ccff00]">App store launch and support</a>
+ </div>
+ </aside>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black border-t border-white/10">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Help the right users discover your app.</h2>
+ <p class="text-gray-400 text-lg mb-8">Pair product launch with social momentum and creator-driven awareness.</p>
+ <a href="index.html#contact" class="inline-flex items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Plan App Marketing <span>→</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/mobile-app-branding-ui-ux.html b/mobile-app-branding-ui-ux.html
new file mode 100644
index 0000000..d86997f
--- /dev/null
+++ b/mobile-app-branding-ui-ux.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mobile App Branding, Logo Design, and UI/UX | After Dark Labs</title>
+ <meta name="description" content="Mobile app branding, logo design, and UI/UX design for custom iOS, Android, and cross-platform apps that need a polished launch-ready identity.">
+ <link rel="canonical" href="/mobile-app-branding-ui-ux.html">
+ <meta property="og:title" content="Mobile App Branding, Logo Design, and UI/UX | After Dark Labs">
+ <meta property="og:description" content="Create a launch-ready app identity, product flow, and mobile UI with After Dark Labs.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="hover:text-[#ccff00] transition-colors">Websites</a>
+ <a href="mobile-apps.html" class="text-[#ccff00]">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <a href="mobile-apps.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Mobile app services</a>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Mobile app branding, logo design, and UI/UX.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">Shape your app into a polished product with a recognizable identity, clear user flows, and interface design that feels natural on mobile screens.</p>
+ </div>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
+ <p class="text-gray-300 leading-8 mb-8">We define the visual system and app experience before development so every screen, interaction, and brand moment feels connected.</p>
+ <ul class="space-y-4 text-gray-300">
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> App logo direction, colors, typography, icons, and visual style</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> User journey planning, onboarding flows, navigation, and core screen hierarchy</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> High-fidelity UI concepts for key mobile screens and states</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Design choices that support store listings, launch content, and future marketing</li>
+ </ul>
+ </div>
+ <aside class="border border-white/10 rounded-3xl p-8 bg-black">
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-5">Related app services</h2>
+ <div class="space-y-4">
+ <a href="backend-api-integration.html" class="block text-gray-300 hover:text-[#ccff00]">Backend and API integration</a>
+ <a href="app-store-launch-support.html" class="block text-gray-300 hover:text-[#ccff00]">App store launch and support</a>
+ <a href="influencer-marketing-social-media.html" class="block text-gray-300 hover:text-[#ccff00]">Influencer marketing on social media</a>
+ </div>
+ </aside>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black border-t border-white/10">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Design the app people remember.</h2>
+ <p class="text-gray-400 text-lg mb-8">Create a stronger product identity before development starts.</p>
+ <a href="index.html#contact" class="inline-flex items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Plan App Design <span>→</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/mobile-apps.html b/mobile-apps.html
new file mode 100644
index 0000000..17c4a90
--- /dev/null
+++ b/mobile-apps.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Custom Mobile App Development | After Dark Labs</title>
+ <meta name="description" content="After Dark Labs designs, builds, launches, and supports custom iOS, Android, and cross-platform mobile apps for businesses across the U.S.">
+ <link rel="canonical" href="/mobile-apps.html">
+ <meta property="og:title" content="Custom Mobile App Development | After Dark Labs">
+ <meta property="og:description" content="Mobile app branding, UI/UX, backend integrations, app store launch support, and social media marketing from a Fort Lauderdale-based team.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="hover:text-[#ccff00] transition-colors">Websites</a>
+ <a href="mobile-apps.html" class="text-[#ccff00]">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <p class="text-[#ccff00] font-semibold mb-5">Custom mobile app development</p>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Mobile apps built for launch and long-term growth.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">After Dark Labs builds polished iOS, Android, and cross-platform apps with thoughtful branding, strong backend connections, store launch support, and marketing momentum.</p>
+ </div>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid md:grid-cols-2 gap-6">
+ <a href="mobile-app-branding-ui-ux.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
+ <i class="fas fa-pen-nib text-[#ccff00] text-3xl mb-6"></i>
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-3">Branding, Logo Design, Stunning UI/UX</h2>
+ <p class="text-gray-400">Visual identity, product flow, interface design, and app experiences that feel credible before a user taps the first button.</p>
+ </a>
+ <a href="backend-api-integration.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
+ <i class="fas fa-code-branch text-[#ccff00] text-3xl mb-6"></i>
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-3">Backend and API Integration</h2>
+ <p class="text-gray-400">Authentication, databases, payment systems, notifications, dashboards, and third-party services connected behind the app.</p>
+ </a>
+ <a href="app-store-launch-support.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
+ <i class="fas fa-rocket text-[#ccff00] text-3xl mb-6"></i>
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-3">App Store Launch and Support for iOS and Android</h2>
+ <p class="text-gray-400">Release preparation, store assets, submission support, production fixes, and post-launch improvements for both major platforms.</p>
+ </a>
+ <a href="influencer-marketing-social-media.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
+ <i class="fas fa-bullhorn text-[#ccff00] text-3xl mb-6"></i>
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-3">Influencer Marketing on Social Media</h2>
+ <p class="text-gray-400">Creator outreach, launch campaigns, social proof, and content strategy that help new apps earn attention after release.</p>
+ </a>
+ </div>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black">
+ <div class="max-w-5xl mx-auto px-6">
+ <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-8">From first concept to shipped app.</h2>
+ <div class="grid md:grid-cols-3 gap-6 text-gray-300">
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <h3 class="font-semibold text-white mb-3">Product clarity</h3>
+ <p>We shape the app around user goals, business rules, core screens, and launch requirements before development begins.</p>
+ </div>
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <h3 class="font-semibold text-white mb-3">Reliable systems</h3>
+ <p>App features are paired with backend services, admin tools, and integrations needed to operate in the real world.</p>
+ </div>
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <h3 class="font-semibold text-white mb-3">Launch support</h3>
+ <p>Store submission, early feedback, updates, and marketing support keep momentum going after the first release.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="py-24 border-t 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">Ready to build your mobile app?</h2>
+ <p class="text-gray-400 text-lg mb-8">Work with a Fort Lauderdale-based mobile app team serving businesses across the U.S.</p>
+ <a href="index.html#contact" class="inline-flex items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start an App Project <span>→</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/online-bookings-appointments-memberships.html b/online-bookings-appointments-memberships.html
new file mode 100644
index 0000000..50c2433
--- /dev/null
+++ b/online-bookings-appointments-memberships.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Online Booking, Appointment, and Membership Websites | After Dark Labs</title>
+ <meta name="description" content="Online booking, appointment scheduling, payment, and subscription membership website features for service businesses and growing teams.">
+ <link rel="canonical" href="/online-bookings-appointments-memberships.html">
+ <meta property="og:title" content="Online Booking, Appointment, and Membership Websites | After Dark Labs">
+ <meta property="og:description" content="Add booking, scheduling, subscriptions, and member access to a custom business website.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="text-[#ccff00]">Websites</a>
+ <a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <a href="websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Website services</a>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Online bookings, appointments, and subscription memberships.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">Turn your website into a working front desk with scheduling, intake, payments, reminders, member access, and recurring revenue tools.</p>
+ </div>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
+ <p class="text-gray-300 leading-8 mb-8">We plan and build booking flows that fit the way your team works, from simple appointment requests to paid reservations, customer accounts, and subscription-based access.</p>
+ <ul class="space-y-4 text-gray-300">
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Booking forms, service menus, availability logic, and intake questions</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Appointment payments, deposits, subscriptions, and membership access paths</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Confirmation pages, email handoffs, customer records, and operational dashboards</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Mobile-friendly flows that make it easy for customers to book without calling</li>
+ </ul>
+ </div>
+ <aside class="border border-white/10 rounded-3xl p-8 bg-black">
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-5">Related website services</h2>
+ <div class="space-y-4">
+ <a href="custom-web-development-ecommerce.html" class="block text-gray-300 hover:text-[#ccff00]">Custom web development and ecommerce</a>
+ <a href="seo-performance-optimization.html" class="block text-gray-300 hover:text-[#ccff00]">SEO and performance optimization</a>
+ <a href="brand-positioning-creative-strategy.html" class="block text-gray-300 hover:text-[#ccff00]">Brand positioning and creative strategy</a>
+ </div>
+ </aside>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black border-t border-white/10">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Make your website easier to do business with.</h2>
+ <p class="text-gray-400 text-lg mb-8">Build scheduling and membership features with a custom website team serving businesses nationwide.</p>
+ <a href="index.html#contact" class="inline-flex 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>→</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/seo-performance-optimization.html b/seo-performance-optimization.html
new file mode 100644
index 0000000..63cf30f
--- /dev/null
+++ b/seo-performance-optimization.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>SEO Optimization and Website Performance | After Dark Labs</title>
+ <meta name="description" content="SEO optimization and lightning-fast website performance for custom websites, including page structure, metadata, responsive design, technical cleanup, and speed-focused builds.">
+ <link rel="canonical" href="/seo-performance-optimization.html">
+ <meta property="og:title" content="SEO Optimization and Website Performance | After Dark Labs">
+ <meta property="og:description" content="Technical SEO foundations and fast website performance for custom business websites.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="text-[#ccff00]">Websites</a>
+ <a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <a href="websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Website services</a>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">SEO optimized and lightning fast website performance.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">Make your website easier to discover, faster to load, and clearer for visitors who are deciding whether to contact you.</p>
+ </div>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <div>
+ <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
+ <p class="text-gray-300 leading-8 mb-8">We build practical SEO foundations into the page structure and pair them with lean implementation choices that help the website feel fast on real devices.</p>
+ <ul class="space-y-4 text-gray-300">
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Unique titles, descriptions, headings, internal links, and service-focused page structure</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Fast-loading layouts, responsive images, cleaner assets, and reduced page friction</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Location-aware language for businesses that want national reach with local trust signals</li>
+ <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Clear calls to action so organic traffic has an obvious next step</li>
+ </ul>
+ </div>
+ <aside class="border border-white/10 rounded-3xl p-8 bg-black">
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-5">Related website services</h2>
+ <div class="space-y-4">
+ <a href="custom-web-development-ecommerce.html" class="block text-gray-300 hover:text-[#ccff00]">Custom web development and ecommerce</a>
+ <a href="online-bookings-appointments-memberships.html" class="block text-gray-300 hover:text-[#ccff00]">Bookings, appointments, and memberships</a>
+ <a href="brand-positioning-creative-strategy.html" class="block text-gray-300 hover:text-[#ccff00]">Brand positioning and creative strategy</a>
+ </div>
+ </aside>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black border-t border-white/10">
+ <div class="max-w-3xl mx-auto text-center px-6">
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6">Give every page a stronger job.</h2>
+ <p class="text-gray-400 text-lg mb-8">Improve search visibility, performance, and conversion clarity with After Dark Labs.</p>
+ <a href="index.html#contact" class="inline-flex items-center gap-3 px-8 py-5 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Improve Website SEO <span>→</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/site.css b/site.css
new file mode 100644
index 0000000..a06a794
--- /dev/null
+++ b/site.css
@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
+
+:root {
+ --neon: #ccff00;
+}
+
+body {
+ font-family: 'Inter', system-ui, sans-serif;
+}
+
+.heading {
+ font-family: 'Space Grotesk', sans-serif;
+}
+
+.neon-text {
+ color: var(--neon);
+ text-shadow: 0 0 10px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon);
+}
+
+.page-hero {
+ background:
+ radial-gradient(circle at 20% 20%, rgba(204, 255, 0, 0.12), transparent 30%),
+ radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.08), transparent 22%),
+ linear-gradient(135deg, #030303 0%, #0a0a0a 100%);
+}
+
+.card-hover {
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-hover:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 20px 45px -18px rgb(204 255 0 / 0.25);
+}
+
+.feature-link {
+ transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
+}
+
+.feature-link:hover {
+ border-color: rgba(204, 255, 0, 0.65);
+ background-color: rgba(39, 39, 42, 0.95);
+ transform: translateY(-4px);
+}
diff --git a/websites.html b/websites.html
new file mode 100644
index 0000000..9c8406e
--- /dev/null
+++ b/websites.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>High-Performance Custom Websites | After Dark Labs</title>
+ <meta name="description" content="After Dark Labs builds high-performance custom websites, ecommerce stores, booking systems, memberships, and SEO-ready pages for businesses across the U.S.">
+ <link rel="canonical" href="/websites.html">
+ <meta property="og:title" content="High-Performance Custom Websites | After Dark Labs">
+ <meta property="og:description" content="Custom website development, ecommerce, booking systems, memberships, SEO, performance, and brand strategy from a Fort Lauderdale-based team.">
+ <meta property="og:type" content="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">
+</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 md:flex items-center gap-7 text-sm font-medium">
+ <a href="index.html#services" class="hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="text-[#ccff00]">Websites</a>
+ <a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
+ <a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
+ <a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ </div>
+ <a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start a Project</a>
+ </div>
+ </nav>
+
+ <main>
+ <section class="page-hero pt-36 pb-24">
+ <div class="max-w-5xl mx-auto px-6">
+ <p class="text-[#ccff00] font-semibold mb-5">Custom website development</p>
+ <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">High-performance websites built to convert.</h1>
+ <p class="text-xl text-gray-300 max-w-3xl">After Dark Labs creates custom websites, ecommerce experiences, booking flows, membership platforms, and SEO-ready pages for businesses that need speed, clarity, and measurable results.</p>
+ </div>
+ </section>
+
+ <section class="py-24 bg-zinc-950">
+ <div class="max-w-7xl mx-auto px-6">
+ <div class="grid md:grid-cols-2 gap-6">
+ <a href="custom-web-development-ecommerce.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
+ <i class="fas fa-cart-shopping text-[#ccff00] text-3xl mb-6"></i>
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-3">Custom Web Development and E-commerce Solutions</h2>
+ <p class="text-gray-400">Purpose-built websites, storefronts, product catalogs, checkout flows, and business tools shaped around how your company actually sells.</p>
+ </a>
+ <a href="online-bookings-appointments-memberships.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
+ <i class="fas fa-calendar-check text-[#ccff00] text-3xl mb-6"></i>
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-3">Online Bookings, Appointments, and Subscription Memberships</h2>
+ <p class="text-gray-400">Scheduling, intake, payment, recurring access, and customer account experiences that reduce manual work and keep clients moving.</p>
+ </a>
+ <a href="seo-performance-optimization.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
+ <i class="fas fa-gauge-high text-[#ccff00] text-3xl mb-6"></i>
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-3">SEO Optimized and Lightning Fast Performance</h2>
+ <p class="text-gray-400">Technical SEO foundations, clear page structure, fast-loading assets, and user-focused content that helps people and search engines understand your business.</p>
+ </a>
+ <a href="brand-positioning-creative-strategy.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
+ <i class="fas fa-bullseye text-[#ccff00] text-3xl mb-6"></i>
+ <h2 class="heading text-3xl font-semibold tracking-tighter mb-3">Brand Positioning and Creative Strategies</h2>
+ <p class="text-gray-400">Messaging, visual direction, campaign ideas, and conversion strategy that make your website feel intentional from the first impression.</p>
+ </a>
+ </div>
+ </div>
+ </section>
+
+ <section class="py-24 bg-black">
+ <div class="max-w-5xl mx-auto px-6">
+ <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-8">Built for search, speed, and sales.</h2>
+ <div class="grid md:grid-cols-3 gap-6 text-gray-300">
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <h3 class="font-semibold text-white mb-3">Clear structure</h3>
+ <p>Pages are organized around the services, locations, questions, and actions your customers care about.</p>
+ </div>
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <h3 class="font-semibold text-white mb-3">Fast experiences</h3>
+ <p>Lean interfaces, optimized assets, and practical technical decisions keep visitors engaged on every device.</p>
+ </div>
+ <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
+ <h3 class="font-semibold text-white mb-3">Conversion paths</h3>
+ <p>Calls to action, forms, booking flows, and content are planned around turning traffic into real opportunities.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="py-24 border-t 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">Need a website that works harder?</h2>
+ <p class="text-gray-400 text-lg mb-8">Talk with a Fort Lauderdale-based team building custom websites for businesses across the U.S.</p>
+ <a href="index.html#contact" class="inline-flex 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>→</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>