patx/afterdarklabs
update layout
Commit a384be5 · patx · 2026-05-22T02:17:14-04:00
Comments
No comments yet.
Diff
diff --git a/about.html b/about.html
index fcbc048..03e9a7a 100644
--- a/about.html
+++ b/about.html
@@ -67,65 +67,82 @@
</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">Senior product execution, without the agency handoff.</h1>
- </div>
- <div class="max-w-5xl mx-auto px-6 grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
- <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <p class="heading text-4xl font-bold tracking-tighter text-[#ccff00]">15+</p>
- <p class="text-gray-300 mt-2">years hands-on</p>
- </div>
- <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <p class="heading text-4xl font-bold tracking-tighter text-[#ccff00]">10M+</p>
- <p class="text-gray-300 mt-2">downloads</p>
+ <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">Senior product execution, without the agency handoff.</h1>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">After Dark Labs is a boutique development studio based out of Fort Lauderdale, serving clients across the United States. From online stores, to custom internal tools for Fortune 500 companies, After Dark Labs specializes in taking ambitious ideas from concept to production.</p>
</div>
- <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <p class="heading text-4xl font-bold tracking-tighter text-[#ccff00]">U.S.</p>
- <p class="text-gray-300 mt-2">businesses served</p>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10">
+ <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>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-5">Who you work with</h2>
- <p class="text-gray-300 leading-8">My name is <a href="https://harrisonerd.com" class="text-[#ccff00] hover:text-white transition-colors">Harrison Erd</a>. I run After Dark Labs solo, which means every project gets direct access to the person doing the strategy, design decisions, development, launch planning, and follow-through. Outside of client work, I have built developer tools used well beyond my own projects, including <a href="https://harrisonerd.com/pickledb/" class="text-[#ccff00] hover:text-white transition-colors">pickleDB</a>, a Python data store with 2M+ downloads, and <a href="https://github.com/patx/micropie" class="text-[#ccff00] hover:text-white transition-colors">MicroPie</a>, a lightweight web framework recognized in the official ASGI documentation for modern Python web apps.</p>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">Who you work with</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Direct access to the person doing the work.</h2>
</div>
- <div>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-5">How projects run</h2>
- <p class="text-gray-300 leading-8">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 class="text-lg leading-8 text-black/75">
+ <p>My name is <a href="https://harrisonerd.com" class="font-semibold text-black underline decoration-black/30 underline-offset-4 transition-opacity hover:opacity-65">Harrison Erd</a>. I run After Dark Labs solo, which means every project gets direct access to the person doing the strategy, design decisions, development, launch planning, and follow-through. Outside of client work, I have built developer tools used well beyond my own projects, including <a href="https://harrisonerd.com/pickledb/" class="font-semibold text-black underline decoration-black/30 underline-offset-4 transition-opacity hover:opacity-65">pickleDB</a>, a Python data store with 2M+ downloads, and <a href="https://github.com/patx/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="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 that changes</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">Senior attention from day one</h3>
- <p>You are not briefed through a sales layer and passed down a chain. The person scoping the work is the person building it.</p>
+ <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-[#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 that changes</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Less handoff. More useful work.</h2>
+ </div>
+ <div class="divide-y divide-black/15 text-lg leading-8 text-black/75">
+ <div class="pb-8">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">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="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <h3 class="font-semibold text-white mb-3">Built for real business use</h3>
- <p>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 class="py-8">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">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="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <h3 class="font-semibold text-white mb-3">Lean by design</h3>
- <p>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 class="pt-8">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">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-24 border-t border-white/10 bg-zinc-950">
+ <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">Work directly with Harrison on your next app or website.</h2>
- <p class="text-gray-400 text-lg mb-8">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="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>
+ <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="index.html#contact" 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>
diff --git a/app-store-launch-support.html b/app-store-launch-support.html
index b3785c0..e672227 100644
--- a/app-store-launch-support.html
+++ b/app-store-launch-support.html
@@ -70,55 +70,65 @@
</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>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <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>
+ <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>
- <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>
+ <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="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Prepared for review and release</h2>
- <p class="leading-8">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>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Support after the first version</h2>
- <p class="leading-8">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 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-24 bg-black border-t border-white/10">
+ <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">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>
+ <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="index.html#contact" 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>
diff --git a/backend-api-integration.html b/backend-api-integration.html
index 75d27db..8e6bc99 100644
--- a/backend-api-integration.html
+++ b/backend-api-integration.html
@@ -70,55 +70,65 @@
</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>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <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>
+ <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>
- <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>
+ <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="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Planned around the product workflow</h2>
- <p class="leading-8">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>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Useful beyond the app screen</h2>
- <p class="leading-8">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 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-24 bg-black border-t border-white/10">
+ <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">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>
+ <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="index.html#contact" 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>
diff --git a/booking-website-for-business.html b/booking-website-for-business.html
index d3ab383..05c729a 100644
--- a/booking-website-for-business.html
+++ b/booking-website-for-business.html
@@ -115,75 +115,87 @@
</nav>
<main>
- <section class="page-hero pt-36 pb-24">
- <div class="max-w-5xl mx-auto px-6">
- <a href="business-websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Business websites</a>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Booking websites that turn interest into scheduled business.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">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>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
- <p class="text-gray-300 leading-8 mb-8">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>
- <ul class="space-y-4 text-gray-300">
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Service menus, booking forms, intake questions, availability logic, and confirmation pages</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Deposits, appointment payments, subscriptions, memberships, and customer accounts</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Email handoffs, reminders, customer records, dashboards, and operational workflows</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Search-ready service pages and mobile-friendly calls to action</li>
- </ul>
+ <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>
- <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="small-business-website-design.html" class="block text-gray-300 hover:text-[#ccff00]">Small business website design</a>
- <a href="business-website-seo.html" class="block text-gray-300 hover:text-[#ccff00]">Business website SEO</a>
- </div>
- </aside>
+ <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="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Built around customer action</h2>
- <p class="leading-8">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>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Operationally useful after the click</h2>
- <p class="leading-8">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 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="py-24 bg-zinc-950 border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">Booking website FAQ</h2>
- <div class="grid md:grid-cols-3 gap-6">
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">What is a booking website?</h3>
- <p class="text-gray-300 leading-8">It lets customers schedule services, request appointments, answer intake questions, pay deposits or fees, receive confirmations, and complete the next step without calling.</p>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Can it include memberships?</h3>
- <p class="text-gray-300 leading-8">Yes. A booking website can include memberships, subscriptions, recurring access, customer accounts, paid reservations, reminders, and account-based customer experiences.</p>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Does it help with leads?</h3>
- <p class="text-gray-300 leading-8">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 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-24 bg-black border-t border-white/10">
+ <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">Make your website easier to book from.</h2>
- <p class="text-gray-400 text-lg mb-8">Build scheduling, intake, payment, and membership paths into a business website that works on every device.</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>
+ <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="index.html#contact" 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>
diff --git a/brand-positioning-creative-strategy.html b/brand-positioning-creative-strategy.html
index a89e96c..be3fc9f 100644
--- a/brand-positioning-creative-strategy.html
+++ b/brand-positioning-creative-strategy.html
@@ -70,57 +70,66 @@
</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>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <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>
+ <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>
- <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="business-websites.html" class="block text-gray-300 hover:text-[#ccff00]">Business website design and development</a>
- <a href="service-business-website-design.html" class="block text-gray-300 hover:text-[#ccff00]">Service business website design</a>
- <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>
+ <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="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">A clearer reason to choose you</h2>
- <p class="leading-8">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>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Creative that supports action</h2>
- <p class="leading-8">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 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-24 bg-black border-t border-white/10">
+ <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">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>
+ <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="index.html#contact" 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>
diff --git a/business-website-seo.html b/business-website-seo.html
index 8e5e0cc..44e7387 100644
--- a/business-website-seo.html
+++ b/business-website-seo.html
@@ -115,75 +115,87 @@
</nav>
<main>
- <section class="page-hero pt-36 pb-24">
- <div class="max-w-5xl mx-auto px-6">
- <a href="business-websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Business websites</a>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Business website SEO built into the structure.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">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>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
- <p class="text-gray-300 leading-8 mb-8">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>
- <ul class="space-y-4 text-gray-300">
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Keyword-focused service pages with unique titles, descriptions, headings, and copy</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Internal links between the homepage, website hub, service pages, and related content</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Technical basics including canonical URLs, crawlable pages, sitemap coverage, and structured data</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Faster loading behavior, mobile-friendly layouts, and practical conversion paths</li>
- </ul>
+ <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>
- <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="business-websites.html" class="block text-gray-300 hover:text-[#ccff00]">Business website design and development</a>
- <a href="seo-performance-optimization.html" class="block text-gray-300 hover:text-[#ccff00]">SEO and performance optimization</a>
- <a href="custom-business-website-development.html" class="block text-gray-300 hover:text-[#ccff00]">Custom business website development</a>
- </div>
- </aside>
+ <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="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Pages with specific jobs</h2>
- <p class="leading-8">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>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Speed that supports action</h2>
- <p class="leading-8">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 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="py-24 bg-zinc-950 border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">Business website SEO FAQ</h2>
- <div class="grid md:grid-cols-3 gap-6">
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">What is business website SEO?</h3>
- <p class="text-gray-300 leading-8">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>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Can SEO be built into a new business website?</h3>
- <p class="text-gray-300 leading-8">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 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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Does performance matter for SEO?</h3>
- <p class="text-gray-300 leading-8">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 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-24 bg-black border-t border-white/10">
+ <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">Give every business website page a clearer job.</h2>
- <p class="text-gray-400 text-lg mb-8">Improve search visibility with better structure, content, internal links, metadata, and performance.</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 Business Website SEO <span>→</span></a>
+ <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="index.html#contact" 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>
diff --git a/business-websites.html b/business-websites.html
index de2aed8..d538e20 100644
--- a/business-websites.html
+++ b/business-websites.html
@@ -132,118 +132,108 @@
</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">Business websites built to bring in real customers.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">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 class="mt-10 flex flex-wrap gap-4">
- <a href="index.html#contact" class="inline-flex items-center gap-3 px-7 py-4 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start a Business Website <span>→</span></a>
- <a href="small-business-website-design.html" class="inline-flex items-center gap-3 px-7 py-4 border border-white/20 rounded-3xl font-semibold hover:border-[#ccff00] transition-all">Small business websites</a>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-7xl mx-auto px-6">
- <div class="max-w-3xl mb-12">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-5">Business website services</h2>
- <p class="text-gray-300 leading-8">The right page structure depends on how the business makes money. The cluster below separates broad business website work from more specific needs like service business leads, local visibility, ecommerce, bookings, and technical SEO.</p>
+ <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="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
- <a href="service-business-website-design.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
- <i class="fas fa-screwdriver-wrench text-[#ccff00] text-3xl mb-6"></i>
- <h2 class="heading text-2xl font-semibold tracking-tighter mb-3">Service Business Website Design</h2>
- <p class="text-gray-400">Websites for construction companies, plumbers, electricians, auto sales teams, contractors, and local operators that need better leads.</p>
- </a>
- <a href="small-business-website-design.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
- <i class="fas fa-store text-[#ccff00] text-3xl mb-6"></i>
- <h2 class="heading text-2xl font-semibold tracking-tighter mb-3">Small Business Website Design</h2>
- <p class="text-gray-400">Focused websites for local teams, service businesses, founders, and lean companies that need a credible digital front door.</p>
- </a>
- <a href="custom-business-website-development.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
- <i class="fas fa-code text-[#ccff00] text-3xl mb-6"></i>
- <h2 class="heading text-2xl font-semibold tracking-tighter mb-3">Custom Business Website Development</h2>
- <p class="text-gray-400">Custom layouts, forms, workflows, integrations, and site features shaped around how the business actually operates.</p>
- </a>
- <a href="business-website-seo.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
- <i class="fas fa-magnifying-glass-chart text-[#ccff00] text-3xl mb-6"></i>
- <h2 class="heading text-2xl font-semibold tracking-tighter mb-3">Business Website SEO</h2>
- <p class="text-gray-400">Page structure, metadata, internal links, performance decisions, and content that help searchers understand the business.</p>
- </a>
- <a href="ecommerce-business-websites.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-2xl font-semibold tracking-tighter mb-3">Ecommerce Business Websites</h2>
- <p class="text-gray-400">Storefronts, product pages, catalogs, checkout paths, and post-purchase touchpoints for businesses that sell online.</p>
- </a>
- <a href="shopify-stores.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
- <i class="fas fa-bag-shopping text-[#ccff00] text-3xl mb-6"></i>
- <h2 class="heading text-2xl font-semibold tracking-tighter mb-3">Shopify Stores</h2>
- <p class="text-gray-400">Shopify store builds, theme customization, product and collection structure, checkout setup, SEO, performance, and launch cleanup.</p>
- </a>
- <a href="booking-website-for-business.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-2xl font-semibold tracking-tighter mb-3">Booking Websites for Business</h2>
- <p class="text-gray-400">Scheduling, appointment requests, intake, payments, reminders, memberships, and customer account flows.</p>
- </a>
- <a href="fort-lauderdale-business-website-design.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
- <i class="fas fa-location-dot text-[#ccff00] text-3xl mb-6"></i>
- <h2 class="heading text-2xl font-semibold tracking-tighter mb-3">Fort Lauderdale Business Websites</h2>
- <p class="text-gray-400">Local business website design and development from a Fort Lauderdale-based builder serving companies nationwide.</p>
- </a>
+ <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="py-24 bg-black border-t border-white/10">
- <div class="max-w-6xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">What a business website needs to do</h2>
- <div class="grid md:grid-cols-3 gap-6 text-gray-300">
- <div class="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="font-semibold text-white text-xl mb-4">Explain the offer fast</h3>
- <p class="leading-8">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>
+ <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="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="font-semibold text-white text-xl mb-4">Support search intent</h3>
- <p class="leading-8">A business website needs service pages, headings, internal links, and helpful answers organized around how customers actually search.</p>
+ <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="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="font-semibold text-white text-xl mb-4">Create a clear next step</h3>
- <p class="leading-8">The site should move people toward an inquiry, consultation, quote request, booking, purchase, membership, or account action.</p>
+ <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="py-24 bg-zinc-950 border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">Business website FAQ</h2>
- <div class="space-y-5">
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">What should a business website include?</h3>
- <p class="text-gray-300 leading-8">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>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Do you build websites for small businesses?</h3>
- <p class="text-gray-300 leading-8">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 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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Can a business website include bookings or ecommerce?</h3>
- <p class="text-gray-300 leading-8">Yes. A business website can include appointment scheduling, intake forms, payments, subscriptions, product catalogs, checkout flows, customer accounts, and connected operational tools.</p>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Do business websites need SEO?</h3>
- <p class="text-gray-300 leading-8">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 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-24 bg-black border-t border-white/10">
+ <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">Build a business website with a clear job.</h2>
- <p class="text-gray-400 text-lg mb-8">Work directly with After Dark Labs on a custom business website built for search, speed, and conversion.</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 Business Website <span>→</span></a>
+ <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="index.html#contact" 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>
diff --git a/custom-business-website-development.html b/custom-business-website-development.html
index 6d25fc8..38e063a 100644
--- a/custom-business-website-development.html
+++ b/custom-business-website-development.html
@@ -115,75 +115,87 @@
</nav>
<main>
- <section class="page-hero pt-36 pb-24">
- <div class="max-w-5xl mx-auto px-6">
- <a href="business-websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Business websites</a>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Custom business website development for real workflows.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">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>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
- <p class="text-gray-300 leading-8 mb-8">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>
- <ul class="space-y-4 text-gray-300">
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Custom page layouts, service structures, lead forms, and quote request paths</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Ecommerce, booking, membership, customer account, and payment experiences</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> API integrations, dashboards, admin workflows, and operational handoffs</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Performance, responsive design, SEO structure, and launch support</li>
- </ul>
+ <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>
- <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="booking-website-for-business.html" class="block text-gray-300 hover:text-[#ccff00]">Booking websites for business</a>
- <a href="business-website-seo.html" class="block text-gray-300 hover:text-[#ccff00]">Business website SEO</a>
- </div>
- </aside>
+ <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="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Built around the business model</h2>
- <p class="leading-8">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>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Designed to keep evolving</h2>
- <p class="leading-8">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 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="py-24 bg-zinc-950 border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">Custom website development FAQ</h2>
- <div class="grid md:grid-cols-3 gap-6">
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">When does a business need a custom website?</h3>
- <p class="text-gray-300 leading-8">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>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Can a custom website connect to business tools?</h3>
- <p class="text-gray-300 leading-8">Yes. A custom business website can connect to forms, email platforms, payment systems, scheduling tools, CRMs, databases, dashboards, APIs, and internal workflows.</p>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Is custom development only for large companies?</h3>
- <p class="text-gray-300 leading-8">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 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-24 bg-black border-t border-white/10">
+ <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">Build the website your workflow actually needs.</h2>
- <p class="text-gray-400 text-lg mb-8">Plan and develop a custom business website with strategy, design, development, SEO, and integrations handled together.</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 Custom Development <span>→</span></a>
+ <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="index.html#contact" 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>
diff --git a/custom-web-development-ecommerce.html b/custom-web-development-ecommerce.html
index 62a6e7c..8826165 100644
--- a/custom-web-development-ecommerce.html
+++ b/custom-web-development-ecommerce.html
@@ -70,59 +70,68 @@
</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>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <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>
+ <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>
- <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="business-websites.html" class="block text-gray-300 hover:text-[#ccff00]">Business website design and development</a>
- <a href="shopify-stores.html" class="block text-gray-300 hover:text-[#ccff00]">Shopify store design and development</a>
- <a href="shopify-migration-optimization.html" class="block text-gray-300 hover:text-[#ccff00]">Shopify migration and cleanup</a>
- <a href="service-business-website-design.html" class="block text-gray-300 hover:text-[#ccff00]">Service business website design</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>
- <a href="brand-positioning-creative-strategy.html" class="block text-gray-300 hover:text-[#ccff00]">Brand positioning and creative strategy</a>
- </div>
- </aside>
+ <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="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Built around the way you sell</h2>
- <p class="leading-8">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>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Ready for the next step</h2>
- <p class="leading-8">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 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-24 bg-black border-t border-white/10">
+ <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">Build a website around how your business sells.</h2>
- <p class="text-gray-400 text-lg mb-8">Custom web development 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>
+ <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="index.html#contact" 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>
diff --git a/ecommerce-business-websites.html b/ecommerce-business-websites.html
index 9bdea6e..abd5f6d 100644
--- a/ecommerce-business-websites.html
+++ b/ecommerce-business-websites.html
@@ -115,77 +115,89 @@
</nav>
<main>
- <section class="page-hero pt-36 pb-24">
- <div class="max-w-5xl mx-auto px-6">
- <a href="business-websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Business websites</a>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Ecommerce business websites built for the full sales path.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">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>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
- <p class="text-gray-300 leading-8 mb-8">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>
- <ul class="space-y-4 text-gray-300">
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Product, collection, service, landing, and checkout page planning</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Cart, payment, subscription, customer account, and post-purchase flows</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Search-ready product copy, internal links, FAQs, and performance-focused layouts</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Integrations for email, inventory, fulfillment, shipping, analytics, or business tools</li>
- </ul>
+ <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>
- <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="shopify-stores.html" class="block text-gray-300 hover:text-[#ccff00]">Shopify store design and development</a>
- <a href="shopify-seo-optimization.html" class="block text-gray-300 hover:text-[#ccff00]">Shopify SEO optimization</a>
- <a href="custom-web-development-ecommerce.html" class="block text-gray-300 hover:text-[#ccff00]">Custom web development and ecommerce</a>
- <a href="custom-business-website-development.html" class="block text-gray-300 hover:text-[#ccff00]">Custom business website development</a>
- <a href="business-website-seo.html" class="block text-gray-300 hover:text-[#ccff00]">Business website SEO</a>
- </div>
- </aside>
+ <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="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Product pages that answer buying questions</h2>
- <p class="leading-8">Strong ecommerce pages make the offer clear with practical details, visuals, pricing context, delivery expectations, FAQs, and calls to action that reduce hesitation.</p>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Checkout paths that fit the business</h2>
- <p class="leading-8">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 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="py-24 bg-zinc-950 border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">Ecommerce business website FAQ</h2>
- <div class="grid md:grid-cols-3 gap-6">
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">What is an ecommerce business website?</h3>
- <p class="text-gray-300 leading-8">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>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Can ecommerce be added to an existing site?</h3>
- <p class="text-gray-300 leading-8">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 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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Does ecommerce need SEO?</h3>
- <p class="text-gray-300 leading-8">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 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-24 bg-black border-t border-white/10">
+ <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">Turn the business website into a stronger sales channel.</h2>
- <p class="text-gray-400 text-lg mb-8">Build an ecommerce website with product structure, checkout flow, SEO, and customer experience planned together.</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 Ecommerce Website <span>→</span></a>
+ <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="index.html#contact" 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>
diff --git a/fort-lauderdale-business-website-design.html b/fort-lauderdale-business-website-design.html
index ac17ba4..82b6767 100644
--- a/fort-lauderdale-business-website-design.html
+++ b/fort-lauderdale-business-website-design.html
@@ -125,76 +125,88 @@
</nav>
<main>
- <section class="page-hero pt-36 pb-24">
- <div class="max-w-5xl mx-auto px-6">
- <a href="business-websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Business websites</a>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Fort Lauderdale business website design for companies that need better leads.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">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>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">Local trust with national-grade execution</h2>
- <p class="text-gray-300 leading-8 mb-8">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>
- <ul class="space-y-4 text-gray-300">
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Website design for Fort Lauderdale service businesses, contractors, trades, auto sales, and local companies</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Service pages and location-aware copy for customers searching by offer, problem, and area</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Quote forms, booking flows, ecommerce paths, and mobile-friendly contact actions</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> SEO metadata, internal links, fast page structure, and launch support</li>
- </ul>
+ <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>
- <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="service-business-website-design.html" class="block text-gray-300 hover:text-[#ccff00]">Service business website design</a>
- <a href="small-business-website-design.html" class="block text-gray-300 hover:text-[#ccff00]">Small business website design</a>
- <a href="business-website-seo.html" class="block text-gray-300 hover:text-[#ccff00]">Business website SEO</a>
- <a href="custom-business-website-development.html" class="block text-gray-300 hover:text-[#ccff00]">Custom business website development</a>
- </div>
- </aside>
+ <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="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Built for South Florida buyers</h2>
- <p class="leading-8">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>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Not limited to local projects</h2>
- <p class="leading-8">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 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="py-24 bg-zinc-950 border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">Fort Lauderdale website design FAQ</h2>
- <div class="grid md:grid-cols-3 gap-6">
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Do you build websites for Fort Lauderdale businesses?</h3>
- <p class="text-gray-300 leading-8">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>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Can the site target local searches?</h3>
- <p class="text-gray-300 leading-8">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 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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Do you only work locally?</h3>
- <p class="text-gray-300 leading-8">No. After Dark Labs is Fort Lauderdale-based and works with businesses across the United States.</p>
+ <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-24 bg-black border-t border-white/10">
+ <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">Build a Fort Lauderdale business website with a clearer path to leads.</h2>
- <p class="text-gray-400 text-lg mb-8">Plan service pages, local SEO structure, quote paths, booking flows, and mobile performance around the way your customers search.</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 Local Website Project <span>→</span></a>
+ <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="index.html#contact" 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>
diff --git a/generative-engine-optimization.html b/generative-engine-optimization.html
index 0b3d07d..1fda4d5 100644
--- a/generative-engine-optimization.html
+++ b/generative-engine-optimization.html
@@ -121,123 +121,121 @@
</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">Generative Engine Optimization</p>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">GEO services for an AI-driven search world.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">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 class="mt-10 flex flex-wrap gap-4">
- <a href="index.html#contact" class="inline-flex items-center gap-3 px-7 py-4 bg-[#ccff00] text-black font-semibold rounded-3xl hover:bg-white transition-all">Start GEO Strategy <span>→</span></a>
- <a href="business-website-seo.html" class="inline-flex items-center gap-3 px-7 py-4 border border-white/20 rounded-3xl font-semibold hover:border-[#ccff00] transition-all">Website SEO</a>
+ <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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">AI is changing search behavior</h2>
- <p class="text-gray-300 leading-8 mb-8">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>
- <ul class="space-y-4 text-gray-300">
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Clarify how your brand, services, products, and app features should be described by AI answer systems</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Build pages, FAQs, structured data, and source-level content that answer specific customer questions</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Improve entity consistency across your website, app store listings, social profiles, reviews, and launch content</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Monitor the questions customers ask AI tools and adjust content when the brand is missing, vague, or misrepresented</li>
- </ul>
+ <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>
- <aside class="border border-white/10 rounded-3xl p-8 bg-black">
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-5">Related services</h2>
- <div class="space-y-4">
- <a href="websites.html" class="block text-gray-300 hover:text-[#ccff00]">Website services</a>
- <a href="mobile-apps.html" class="block text-gray-300 hover:text-[#ccff00]">Mobile app development</a>
- <a href="business-website-seo.html" class="block text-gray-300 hover:text-[#ccff00]">Business website SEO</a>
- <a href="brand-positioning-creative-strategy.html" class="block text-gray-300 hover:text-[#ccff00]">Brand positioning and creative strategy</a>
- </div>
- </aside>
+ <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="py-24 bg-black border-t border-white/10">
- <div class="max-w-6xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">GEO for websites and mobile apps</h2>
- <div class="grid md:grid-cols-2 gap-6 text-gray-300">
- <div class="border border-white/10 rounded-3xl p-8 bg-zinc-950">
- <i class="fas fa-globe text-[#ccff00] text-3xl mb-6"></i>
- <h3 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Website GEO</h3>
- <p class="leading-8 mb-6">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="text-[#ccff00] font-semibold hover:text-white transition-colors">Explore website services →</a>
+ <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 class="border border-white/10 rounded-3xl p-8 bg-zinc-950">
- <i class="fas fa-mobile-screen-button text-[#ccff00] text-3xl mb-6"></i>
- <h3 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Mobile App GEO</h3>
- <p class="leading-8 mb-6">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="text-[#ccff00] font-semibold hover:text-white transition-colors">Explore mobile app services →</a>
+ <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="py-24 bg-zinc-950 border-t border-white/10">
- <div class="max-w-6xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">What GEO work includes</h2>
- <div class="grid md:grid-cols-3 gap-6 text-gray-300">
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="font-semibold text-white text-xl mb-4">AI answer audit</h3>
- <p class="leading-8">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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="font-semibold text-white text-xl mb-4">Source-ready content</h3>
- <p class="leading-8">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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="font-semibold text-white text-xl mb-4">Entity consistency</h3>
- <p class="leading-8">Align names, descriptions, categories, services, products, profiles, app listings, and proof points so the brand is represented consistently across sources.</p>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="font-semibold text-white text-xl mb-4">Structured data</h3>
- <p class="leading-8">Use practical schema for organization, services, apps, FAQs, breadcrumbs, products, local context, and content relationships where it accurately fits.</p>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="font-semibold text-white text-xl mb-4">Authority signals</h3>
- <p class="leading-8">Strengthen reviews, case studies, project examples, founder context, product documentation, app store assets, and content that supports trust.</p>
+ <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="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="font-semibold text-white text-xl mb-4">Ongoing refinement</h3>
- <p class="leading-8">Track AI answer visibility over time and update pages when your brand is absent, outdated, inaccurate, or losing ground to competitors.</p>
+ <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="py-24 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">GEO FAQ</h2>
- <div class="space-y-5">
- <div class="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="text-xl font-semibold mb-3">What is Generative Engine Optimization?</h3>
- <p class="text-gray-300 leading-8">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>
+ <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="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="text-xl font-semibold mb-3">How is GEO different from SEO?</h3>
- <p class="text-gray-300 leading-8">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 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="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="text-xl font-semibold mb-3">Do mobile apps need GEO?</h3>
- <p class="text-gray-300 leading-8">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 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="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="text-xl font-semibold mb-3">Does GEO replace SEO?</h3>
- <p class="text-gray-300 leading-8">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 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-24 bg-zinc-950 border-t border-white/10">
+ <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">Make your brand easier for AI search to understand.</h2>
- <p class="text-gray-400 text-lg mb-8">Add GEO strategy to your website, mobile app, product launch, or service business marketing plan.</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 GEO Services <span>→</span></a>
+ <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="index.html#contact" 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>
diff --git a/influencer-marketing-social-media.html b/influencer-marketing-social-media.html
index ca1beb3..f5e7664 100644
--- a/influencer-marketing-social-media.html
+++ b/influencer-marketing-social-media.html
@@ -70,55 +70,65 @@
</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>
+ <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">Influencer marketing on social media for mobile apps.</h1>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">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>
+ <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="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="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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <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>
+ <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 awareness connected to product positioning.</h2>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">We connect the app’s positioning to social media tactics that can support launch awareness, early adoption, and credibility.</p>
</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>
+ <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>Creator and influencer angle planning based on the app’s audience and category</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Launch campaign ideas, content prompts, demo concepts, and social proof opportunities</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Store listing and landing page messaging that supports social traffic</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Post-launch feedback loops so content and product updates inform each other</span></li>
+ </ul>
</div>
</section>
- <section class="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Positioned for attention</h2>
- <p class="leading-8">Social campaigns work better when the app has a clear audience, a simple hook, and a story creators can explain quickly. We connect product positioning to content angles that fit the category.</p>
+ <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]">App marketing</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Attention works best when the funnel is ready.</h2>
</div>
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Connected to the product funnel</h2>
- <p class="leading-8">Creator traffic should have somewhere useful to go. Store listing copy, landing pages, demo flows, screenshots, and onboarding all help turn launch attention into installs, signups, and feedback.</p>
+ <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">Positioned for attention</h3>
+ <p class="mt-4">Social campaigns work better when the app has a clear audience, a simple hook, and a story creators can explain quickly. We connect product positioning to content angles that fit the category.</p>
+ </div>
+ <div>
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Connected to the product funnel</h3>
+ <p class="mt-4">Creator traffic should have somewhere useful to go. Store listing copy, landing pages, demo flows, screenshots, and onboarding all help turn launch attention into installs, signups, and feedback.</p>
+ </div>
</div>
</div>
</section>
- <section class="py-24 bg-black border-t border-white/10">
+ <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">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>
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6 md:text-6xl">Help the right users discover your app.</h2>
+ <p class="text-gray-400 text-lg mb-10">Pair product launch with social momentum and creator-driven awareness.</p>
+ <a href="index.html#contact" 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 Marketing <span aria-hidden="true">→</span></a>
</div>
</section>
</main>
diff --git a/mobile-app-branding-ui-ux.html b/mobile-app-branding-ui-ux.html
index c7f73e5..bf1a05f 100644
--- a/mobile-app-branding-ui-ux.html
+++ b/mobile-app-branding-ui-ux.html
@@ -70,55 +70,65 @@
</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>
+ <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">Mobile app branding, logo design, and UI/UX.</h1>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">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>
+ <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="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="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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <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>
+ <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 visual system before development starts.</h2>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">We define the visual system and app experience before development so every screen, interaction, and brand moment feels connected.</p>
</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>
+ <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>App logo direction, colors, typography, icons, and visual style</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>User journey planning, onboarding flows, navigation, and core screen hierarchy</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>High-fidelity UI concepts for key mobile screens and states</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Design choices that support store listings, launch content, and future marketing</span></li>
+ </ul>
</div>
</section>
- <section class="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Designed before it is built</h2>
- <p class="leading-8">A mobile app needs more than attractive screens. The brand, onboarding, navigation, empty states, permissions, and core flows should all make the product easier to understand before development starts.</p>
+ <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 experience</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Designed before it is built.</h2>
</div>
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Launch-ready from the first impression</h2>
- <p class="leading-8">Clear mobile UI and a recognizable product identity support store listings, social campaigns, investor demos, and the first few minutes a new user spends inside the app.</p>
+ <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">Designed before it is built</h3>
+ <p class="mt-4">A mobile app needs more than attractive screens. The brand, onboarding, navigation, empty states, permissions, and core flows should all make the product easier to understand before development starts.</p>
+ </div>
+ <div>
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Launch-ready from the first impression</h3>
+ <p class="mt-4">Clear mobile UI and a recognizable product identity support store listings, social campaigns, investor demos, and the first few minutes a new user spends inside the app.</p>
+ </div>
</div>
</div>
</section>
- <section class="py-24 bg-black border-t border-white/10">
+ <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">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>
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6 md:text-6xl">Design the app people remember.</h2>
+ <p class="text-gray-400 text-lg mb-10">Create a stronger product identity before development starts.</p>
+ <a href="index.html#contact" 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 Design <span aria-hidden="true">→</span></a>
</div>
</section>
</main>
diff --git a/mobile-apps.html b/mobile-apps.html
index f71b9ff..a13fc69 100644
--- a/mobile-apps.html
+++ b/mobile-apps.html
@@ -83,71 +83,82 @@
</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 for U.S. businesses with thoughtful branding, strong backend connections, store launch support, GEO for AI search visibility, and marketing momentum.</p>
+ <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]">Custom mobile app development</p>
+ <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Mobile apps built for launch and long-term growth.</h1>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">After Dark Labs builds polished iOS, Android, and cross-platform apps for U.S. businesses with thoughtful branding, strong backend connections, store launch support, GEO for AI search visibility, and marketing momentum.</p>
+ </div>
+ <div>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Mobile 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, stunning UI/UX</span></a></li>
+ <li><a href="backend-api-integration.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Backend and API integration</span></a></li>
+ <li><a href="app-store-launch-support.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>App Store launch 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 for apps</span></a></li>
+ </ul>
+ </div>
</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>
- <a href="generative-engine-optimization.html" class="feature-link bg-zinc-900 border border-white/10 rounded-3xl p-8 block">
- <i class="fas fa-robot text-[#ccff00] text-3xl mb-6"></i>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-3">Generative Engine Optimization for Apps</h2>
- <p class="text-gray-400">GEO strategy for app pages, store listings, FAQs, feature content, reviews, launch assets, and AI answer visibility.</p>
- </a>
+ <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">App capabilities</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Strategy, design, systems, launch, and growth.</h2>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">Every app needs more than screens. The product has to feel credible, connect to the right systems, launch cleanly, and keep a path for users to discover it after release.</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">Branding, Logo Design, Stunning UI/UX</h3>
+ <p class="mt-4">Visual identity, product flow, interface design, and app experiences that feel credible before a user taps the first button.</p>
+ </div>
+ <div class="py-7">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Backend and API Integration</h3>
+ <p class="mt-4">Authentication, databases, payment systems, notifications, dashboards, and third-party services connected behind the app.</p>
+ </div>
+ <div class="py-7">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">App Store Launch and Support</h3>
+ <p class="mt-4">Release preparation, store assets, submission support, production fixes, and post-launch improvements for both major platforms.</p>
+ </div>
+ <div class="pt-7">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Influencer Marketing and GEO</h3>
+ <p class="mt-4">Creator outreach, social proof, app page content, FAQs, launch assets, and AI answer visibility that help new apps earn attention.</p>
+ </div>
</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>
+ <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]">From concept to shipped app</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Built around the product and the business behind it.</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">Product clarity</h3>
+ <p class="mt-4">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 class="py-8">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Reliable systems</h3>
+ <p class="mt-4">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, GEO content, and marketing support keep momentum going after the first release.</p>
+ <div class="pt-8">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Launch support</h3>
+ <p class="mt-4">Store submission, early feedback, updates, GEO content, 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">
+ <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">Ready to build your mobile app?</h2>
- <p class="text-gray-400 text-lg mb-8">Work with a U.S.-focused mobile app partner for strategy, product design, development, GEO, launch, and support.</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>
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6 md:text-6xl">Ready to build your mobile app?</h2>
+ <p class="text-gray-400 text-lg mb-10">Work with a U.S.-focused mobile app partner for strategy, product design, development, GEO, launch, and support.</p>
+ <a href="index.html#contact" 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 App Project <span aria-hidden="true">→</span></a>
</div>
</section>
</main>
diff --git a/online-bookings-appointments-memberships.html b/online-bookings-appointments-memberships.html
index 1a30443..68ff32f 100644
--- a/online-bookings-appointments-memberships.html
+++ b/online-bookings-appointments-memberships.html
@@ -70,57 +70,66 @@
</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>
+ <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">Online bookings, appointments, and subscription memberships.</h1>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Turn your website into a working front desk with scheduling, intake, payments, reminders, member access, and recurring revenue tools.</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="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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <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, automatic shipping labels, 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>
+ <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">Booking flows that match the way your team works.</h2>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">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>
</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="business-websites.html" class="block text-gray-300 hover:text-[#ccff00]">Business website design and development</a>
- <a href="service-business-website-design.html" class="block text-gray-300 hover:text-[#ccff00]">Service business website design</a>
- <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>
+ <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>Booking forms, service menus, availability logic, and intake questions</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Appointment payments, deposits, subscriptions, automatic shipping labels, and membership access paths</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Confirmation pages, email handoffs, customer records, and operational dashboards</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Mobile-friendly flows that make it easy for customers to book without calling</span></li>
+ </ul>
</div>
</section>
- <section class="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Built for real operations</h2>
- <p class="leading-8">Booking and membership features need to match how the business actually runs. That means clear service options, practical intake questions, payment timing, reminders, customer records, and staff-friendly handoffs.</p>
+ <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 operations</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Less friction for customers and staff.</h2>
</div>
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Less friction for customers</h2>
- <p class="leading-8">A well-planned booking website helps visitors take action without a phone call. It can turn search traffic, social traffic, and repeat customers into scheduled appointments, paid reservations, member signups, or account activity.</p>
+ <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 real operations</h3>
+ <p class="mt-4">Booking and membership features need to match how the business actually runs. That means clear service options, practical intake questions, payment timing, reminders, customer records, and staff-friendly handoffs.</p>
+ </div>
+ <div>
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Less friction for customers</h3>
+ <p class="mt-4">A well-planned booking website helps visitors take action without a phone call. It can turn search traffic, social traffic, and repeat customers into scheduled appointments, paid reservations, member signups, or account activity.</p>
+ </div>
</div>
</div>
</section>
- <section class="py-24 bg-black border-t border-white/10">
+ <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">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>
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6 md:text-6xl">Make your website easier to do business with.</h2>
+ <p class="text-gray-400 text-lg mb-10">Build scheduling and membership features with a custom website team serving businesses nationwide.</p>
+ <a href="index.html#contact" 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>
diff --git a/seo-performance-optimization.html b/seo-performance-optimization.html
index ec72aac..adea146 100644
--- a/seo-performance-optimization.html
+++ b/seo-performance-optimization.html
@@ -70,58 +70,67 @@
</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>
+ <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">SEO optimized and lightning fast website performance.</h1>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Make your website easier to discover, faster to load, and clearer for visitors who are deciding whether to contact you.</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="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="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="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="py-24 bg-zinc-950">
- <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[1.2fr_0.8fr] gap-10">
+ <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>
- <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>
+ <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">Practical SEO foundations paired with fast implementation.</h2>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">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>
</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="business-websites.html" class="block text-gray-300 hover:text-[#ccff00]">Business website design and development</a>
- <a href="business-website-seo.html" class="block text-gray-300 hover:text-[#ccff00]">Business website SEO</a>
- <a href="service-business-website-design.html" class="block text-gray-300 hover:text-[#ccff00]">Service business website design</a>
- <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>
+ <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>Unique titles, descriptions, headings, internal links, and service-focused page structure</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Fast-loading layouts, responsive images, cleaner assets, and reduced page friction</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Location-aware language for businesses that want national reach with local trust signals</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Clear calls to action so organic traffic has an obvious next step</span></li>
+ </ul>
</div>
</section>
- <section class="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Search structure with a purpose</h2>
- <p class="leading-8">SEO works best when each page has a specific job. We align titles, headings, internal links, service copy, metadata, and calls to action around the searches and decisions your customers are likely to make.</p>
+ <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 and performance</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Every page gets a clearer job.</h2>
</div>
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Performance that supports conversion</h2>
- <p class="leading-8">Fast pages keep visitors moving. Cleaner assets, responsive layouts, sensible image handling, and lightweight implementation choices help your custom website feel better on phones, laptops, and slower connections.</p>
+ <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">Search structure with a purpose</h3>
+ <p class="mt-4">SEO works best when each page has a specific job. We align titles, headings, internal links, service copy, metadata, and calls to action around the searches and decisions your customers are likely to make.</p>
+ </div>
+ <div>
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Performance that supports conversion</h3>
+ <p class="mt-4">Fast pages keep visitors moving. Cleaner assets, responsive layouts, sensible image handling, and lightweight implementation choices help your custom website feel better on phones, laptops, and slower connections.</p>
+ </div>
</div>
</div>
</section>
- <section class="py-24 bg-black border-t border-white/10">
+ <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">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>
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6 md:text-6xl">Give every page a stronger job.</h2>
+ <p class="text-gray-400 text-lg mb-10">Improve search visibility, performance, and conversion clarity with After Dark Labs.</p>
+ <a href="index.html#contact" 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 Website SEO <span aria-hidden="true">→</span></a>
</div>
</section>
</main>
diff --git a/service-business-website-design.html b/service-business-website-design.html
index e1f2e4c..20bb169 100644
--- a/service-business-website-design.html
+++ b/service-business-website-design.html
@@ -121,100 +121,96 @@
</nav>
<main>
- <section class="page-hero pt-36 pb-24">
- <div class="max-w-5xl mx-auto px-6">
- <a href="business-websites.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Business websites</a>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Service business websites that turn local searches into leads.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">After Dark Labs builds websites for construction companies, plumbers, electricians, auto sales teams, contractors, repair services, and other local operators that need more calls, quote requests, bookings, and qualified inquiries.</p>
+ <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">Service business websites that turn local searches into leads.</h1>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">After Dark Labs builds websites for construction companies, plumbers, electricians, auto sales teams, contractors, repair services, and other local operators that need more calls, quote requests, bookings, and qualified inquiries.</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="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="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 website design</span></a></li>
+ </ul>
+ </div>
</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">
+ <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>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What service businesses need online</h2>
- <p class="text-gray-300 leading-8 mb-8">Most service business websites have a simple job: make the company credible, explain the work clearly, rank for the services people search for, and make it easy to take action from a phone.</p>
- <ul class="space-y-4 text-gray-300">
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Service pages for construction, plumbing, electrical, automotive, repair, installation, or specialty work</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Quote request forms, booking paths, click-to-call CTAs, project intake, and lead qualification</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Service area language, local trust signals, project proof, FAQs, and search-ready page structure</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Fast mobile layouts for customers searching from the job site, roadside, home, or office</li>
- </ul>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">What service businesses need online</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Credibility, service clarity, local intent, and fast action.</h2>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">Most service business websites have a simple job: make the company credible, explain the work clearly, rank for the services people search for, and make it easy to take action from a phone.</p>
</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="small-business-website-design.html" class="block text-gray-300 hover:text-[#ccff00]">Small business website design</a>
- <a href="business-website-seo.html" class="block text-gray-300 hover:text-[#ccff00]">Business website SEO</a>
- <a href="booking-website-for-business.html" class="block text-gray-300 hover:text-[#ccff00]">Booking websites for business</a>
- <a href="fort-lauderdale-business-website-design.html" class="block text-gray-300 hover:text-[#ccff00]">Fort Lauderdale business website design</a>
- </div>
- </aside>
+ <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 pages for construction, plumbing, electrical, automotive, repair, installation, or specialty work</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Quote request forms, booking paths, click-to-call CTAs, project intake, and lead qualification</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Service area language, local trust signals, project proof, FAQs, and search-ready page structure</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Fast mobile layouts for customers searching from the job site, roadside, home, or office</span></li>
+ </ul>
</div>
</section>
- <section class="py-24 bg-black border-t border-white/10">
- <div class="max-w-6xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">Built for the way service customers decide</h2>
- <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 text-gray-300">
- <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <h3 class="font-semibold text-white text-xl mb-3">Construction</h3>
- <p class="leading-8">Show project types, service areas, past work, consultation paths, and quote request forms for construction and contractor leads.</p>
+ <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-[560px] 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 service customers decide</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Built around trades, urgency, proof, and next steps.</h2>
+ </div>
+ <div class="divide-y divide-white/10 text-lg leading-8 text-gray-300 lg:order-1">
+ <div class="pb-7">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Construction</h3>
+ <p class="mt-4">Show project types, service areas, past work, consultation paths, and quote request forms for construction and contractor leads.</p>
</div>
- <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <h3 class="font-semibold text-white text-xl mb-3">Plumbing</h3>
- <p class="leading-8">Organize urgent services, repairs, installations, service areas, call CTAs, and FAQs around what customers need quickly.</p>
+ <div class="py-7">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Plumbing and electrical</h3>
+ <p class="mt-4">Organize urgent services, repairs, installations, service areas, call CTAs, inspections, and FAQs around what customers need quickly.</p>
</div>
- <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <h3 class="font-semibold text-white text-xl mb-3">Electrical</h3>
- <p class="leading-8">Present residential, commercial, repair, installation, inspection, and emergency electrical services with clear next steps.</p>
+ <div class="py-7">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Auto sales</h3>
+ <p class="mt-4">Support inventory discovery, finance inquiries, trade-in forms, appointment requests, and lead capture for buyers comparing options.</p>
</div>
- <div class="border border-white/10 rounded-3xl p-6 bg-zinc-950">
- <h3 class="font-semibold text-white text-xl mb-3">Auto sales</h3>
- <p class="leading-8">Support inventory discovery, finance inquiries, trade-in forms, appointment requests, and lead capture for buyers comparing options.</p>
+ <div class="pt-7">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Local SEO and conversion paths</h3>
+ <p class="mt-4">Service customers search by trade, problem, and location. Good pages describe the work in plain language and lead visitors into a call, quote, appointment, or project request.</p>
</div>
</div>
</div>
</section>
- <section class="py-20 bg-zinc-950 border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Local intent with practical SEO</h2>
- <p class="leading-8">Service customers often search by trade, problem, and location. The site needs pages that describe the work in plain language, support location relevance, and lead visitors into a call, quote, appointment, or project request.</p>
- </div>
+ <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>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Conversion paths for busy teams</h2>
- <p class="leading-8">Good service business websites qualify leads before the first call. Forms, booking flows, photo uploads, financing questions, and service details can make inquiries easier to handle.</p>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">Service business website FAQ</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Common service website questions.</h2>
</div>
- </div>
- </section>
-
- <section class="py-24 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">Service business website FAQ</h2>
- <div class="grid md:grid-cols-3 gap-6">
- <div class="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="text-xl font-semibold mb-3">What service businesses do you build websites for?</h3>
- <p class="text-gray-300 leading-8">Construction companies, plumbers, electricians, contractors, auto sales teams, repair services, home service companies, and other local service businesses.</p>
+ <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 service businesses do you build websites for?</h3>
+ <p class="mt-4">Construction companies, plumbers, electricians, contractors, auto sales teams, repair services, home service companies, and other local service businesses.</p>
</div>
- <div class="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="text-xl font-semibold mb-3">What should the website include?</h3>
- <p class="text-gray-300 leading-8">Clear service pages, service area details, proof of work, trust signals, quote or booking calls to action, contact information, FAQs, and fast mobile-friendly pages.</p>
+ <div class="py-8">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">What should the website include?</h3>
+ <p class="mt-4">Clear service pages, service area details, proof of work, trust signals, quote or booking calls to action, contact information, FAQs, and fast mobile-friendly pages.</p>
</div>
- <div class="border border-white/10 rounded-3xl p-7 bg-zinc-950">
- <h3 class="text-xl font-semibold mb-3">Can it generate leads?</h3>
- <p class="text-gray-300 leading-8">Yes. A service business website can generate leads by matching search intent, explaining services clearly, showing credibility, reducing friction, and giving visitors direct ways to act.</p>
+ <div class="pt-8">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Can it generate leads?</h3>
+ <p class="mt-4">Yes. A service business website can generate leads by matching search intent, explaining services clearly, showing credibility, reducing friction, and giving visitors direct ways to act.</p>
</div>
</div>
</div>
</section>
- <section class="py-24 bg-zinc-950 border-t border-white/10">
+ <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">Build a website that helps customers choose your service business.</h2>
- <p class="text-gray-400 text-lg mb-8">Create service pages, quote paths, booking flows, and local SEO foundations for the way your customers search.</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 Service Business Website <span>→</span></a>
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6 md:text-6xl">Build a website that helps customers choose your service business.</h2>
+ <p class="text-gray-400 text-lg mb-10">Create service pages, quote paths, booking flows, and local SEO foundations for the way your customers search.</p>
+ <a href="index.html#contact" 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 Service Business Website <span aria-hidden="true">→</span></a>
</div>
</section>
</main>
diff --git a/shopify-migration-optimization.html b/shopify-migration-optimization.html
index 1a9073d..8fb1d9f 100644
--- a/shopify-migration-optimization.html
+++ b/shopify-migration-optimization.html
@@ -115,76 +115,88 @@
</nav>
<main>
- <section class="page-hero pt-36 pb-24">
- <div class="max-w-5xl mx-auto px-6">
- <a href="shopify-stores.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Shopify stores</a>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Shopify migration and cleanup without losing the buying path.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">Moving to Shopify or fixing an existing store requires more than copying products. URLs, collections, content, apps, checkout settings, analytics, and performance all need attention so shoppers can still find products and complete orders after launch.</p>
+ <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="shopify-stores.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Shopify stores</a>
+ <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Shopify migration and cleanup without losing the buying path.</h1>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Moving to Shopify or fixing an existing store requires more than copying products. URLs, collections, content, apps, checkout settings, analytics, and performance all need attention so shoppers can still find products and complete orders after launch.</p>
+ </div>
+ <div>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related Shopify 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 development</span></a></li>
+ <li><a href="shopify-store-design.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Shopify store design</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="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>
+ </ul>
+ </div>
</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">
+ <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>
- <h2 class="heading text-4xl font-semibold tracking-tighter mb-6">What this includes</h2>
- <p class="text-gray-300 leading-8 mb-8">A Shopify migration or optimization project starts by identifying what should stay, what should be cleaned up, and what could break during launch. The goal is a store that is easier to manage, faster to use, and clearer for search and shoppers.</p>
- <ul class="space-y-4 text-gray-300">
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Product, collection, page, blog, customer-facing content, navigation, and media review</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> URL mapping, redirects, metadata cleanup, internal links, and launch search checks</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Theme cleanup, app review, image optimization, performance fixes, and mobile QA</li>
- <li class="flex gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> Checkout settings, shipping, taxes, payments, analytics, forms, emails, and launch support</li>
- </ul>
+ <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">Migration planning before launch pressure.</h2>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">A Shopify migration or optimization project starts by identifying what should stay, what should be cleaned up, and what could break during launch. The goal is a store that is easier to manage, faster to use, and clearer for search and shoppers.</p>
</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 Shopify services</h2>
- <div class="space-y-4">
- <a href="shopify-stores.html" class="block text-gray-300 hover:text-[#ccff00]">Shopify store development</a>
- <a href="shopify-store-design.html" class="block text-gray-300 hover:text-[#ccff00]">Shopify store design</a>
- <a href="shopify-seo-optimization.html" class="block text-gray-300 hover:text-[#ccff00]">Shopify SEO optimization</a>
- <a href="ecommerce-business-websites.html" class="block text-gray-300 hover:text-[#ccff00]">Ecommerce business websites</a>
- </div>
- </aside>
+ <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, page, blog, customer-facing content, navigation, and media review</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>URL mapping, redirects, metadata cleanup, internal links, and launch search checks</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Theme cleanup, app review, image optimization, performance fixes, and mobile QA</span></li>
+ <li class="flex min-h-12 items-start gap-4"><span aria-hidden="true">✓</span><span>Checkout settings, shipping, taxes, payments, analytics, forms, emails, and launch support</span></li>
+ </ul>
</div>
</section>
- <section class="py-20 bg-black border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6 grid md:grid-cols-2 gap-10 text-gray-300">
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Preserve what customers and search engines use</h2>
- <p class="leading-8">Existing product, collection, page, and blog URLs should be mapped before launch. Redirects, internal links, metadata, and navigation help reduce broken paths when a store changes structure.</p>
+ <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]">Store continuity</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Protect the paths shoppers already use.</h2>
</div>
- <div>
- <h2 class="heading text-3xl font-semibold tracking-tighter mb-4 text-white">Clean up the store without overcomplicating it</h2>
- <p class="leading-8">Many stores slow down because old apps, unused sections, heavy images, and inconsistent product content accumulate over time. Cleanup should make the store easier for both shoppers and the team running it.</p>
+ <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">Preserve what customers and search engines use</h3>
+ <p class="mt-4">Existing product, collection, page, and blog URLs should be mapped before launch. Redirects, internal links, metadata, and navigation help reduce broken paths when a store changes structure.</p>
+ </div>
+ <div>
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-white">Clean up the store without overcomplicating it</h3>
+ <p class="mt-4">Many stores slow down because old apps, unused sections, heavy images, and inconsistent product content accumulate over time. Cleanup should make the store easier for both shoppers and the team running it.</p>
+ </div>
</div>
</div>
</section>
- <section class="py-24 bg-zinc-950 border-t border-white/10">
- <div class="max-w-5xl mx-auto px-6">
- <h2 class="heading text-4xl md:text-5xl font-semibold tracking-tighter mb-10">Shopify migration FAQ</h2>
- <div class="grid md:grid-cols-3 gap-6">
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">What should be checked?</h3>
- <p class="text-gray-300 leading-8">Products, collections, content, redirects, navigation, checkout settings, shipping, taxes, payment setup, apps, analytics, metadata, and launch QA.</p>
+ <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">Shopify migration FAQ</p>
+ <h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Common migration 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 be checked?</h3>
+ <p class="mt-4">Products, collections, content, redirects, navigation, checkout settings, shipping, taxes, payment setup, apps, analytics, metadata, and launch QA.</p>
</div>
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Is a rebuild required?</h3>
- <p class="text-gray-300 leading-8">Not always. Many stores can improve through theme cleanup, better product content, collections, apps, images, metadata, page speed, and conversion path fixes.</p>
+ <div class="py-8">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Is a rebuild required?</h3>
+ <p class="mt-4">Not always. Many stores can improve through theme cleanup, better product content, collections, apps, images, metadata, page speed, and conversion path fixes.</p>
</div>
- <div class="border border-white/10 rounded-3xl p-7 bg-black">
- <h3 class="text-xl font-semibold mb-3">Do migrations need redirects?</h3>
- <p class="text-gray-300 leading-8">Yes. Redirects matter when product, collection, page, blog, or platform URLs change. They reduce broken links after launch.</p>
+ <div class="pt-8">
+ <h3 class="heading text-3xl font-semibold tracking-tighter text-black">Do migrations need redirects?</h3>
+ <p class="mt-4">Yes. Redirects matter when product, collection, page, blog, or platform URLs change. They reduce broken links after launch.</p>
</div>
</div>
</div>
</section>
- <section class="py-24 bg-black border-t border-white/10">
+ <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">Move or clean up Shopify with the store structure intact.</h2>
- <p class="text-gray-400 text-lg mb-8">Plan redirects, catalog cleanup, theme improvements, apps, checkout, SEO, and launch checks together.</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 Shopify Cleanup <span>→</span></a>
+ <h2 class="heading text-5xl font-bold tracking-tighter mb-6 md:text-6xl">Move or clean up Shopify with the store structure intact.</h2>
+ <p class="text-gray-400 text-lg mb-10">Plan redirects, catalog cleanup, theme improvements, apps, checkout, SEO, and launch checks together.</p>
+ <a href="index.html#contact" 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 Shopify Cleanup <span aria-hidden="true">→</span></a>
</div>
</section>
</main>
diff --git a/shopify-seo-optimization.html b/shopify-seo-optimization.html
index e2a4d4a..c1bcffa 100644
--- a/shopify-seo-optimization.html
+++ b/shopify-seo-optimization.html
@@ -115,77 +115,89 @@
</nav>
<main>
- <section class="page-hero pt-36 pb-24">
- <div class="max-w-5xl mx-auto px-6">
- <a href="shopify-stores.html" class="text-[#ccff00] font-semibold mb-5 inline-block">Shopify stores</a>
- <h1 class="heading text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8">Shopify SEO that gives products and collections a clearer job.</h1>
- <p class="text-xl text-gray-300 max-w-3xl">Shopify SEO works best when the catalog is organized for both search engines and shoppers. We improve product pages, collection pages, metadata, internal links, image handling, performance, and content so the store is easier to discover and easier to understand.</p>
+ <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="shopify-stores.html" class="mb-6 inline-block text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00] transition-colors hover:text-white">Shopify stores</a>
+ <h1 class="heading max-w-5xl text-6xl font-bold leading-none tracking-tighter md:text-8xl">Shopify SEO that gives products and collections a clearer job.</h1>
+ <p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Shopify SEO works best when the catalog is organized for both search engines and shoppers. We improve product pages, collection pages, metadata, internal links, image handling, performance, and content so the store is easier to discover and easier to understand.</p>
+ </div>
+ <div>
+ <p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Related Shopify 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 transi
[Diff truncated. Use the raw view or local clone for the full content.]