patx/afterdarklabs
improve seo add twitter card image
Commit b2424b7 · patx · 2026-05-16T22:31:49-04:00
Comments
No comments yet.
Diff
diff --git a/index.html b/index.html
index b297b98..4b90e1c 100644
--- a/index.html
+++ b/index.html
@@ -4,17 +4,26 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
- <title>Business Websites & Mobile Apps for U.S. Businesses | After Dark Labs</title>
+ <link rel="apple-touch-icon" href="/moon-stars-fill.svg">
+ <link rel="manifest" href="/site.webmanifest">
+ <title>Business Websites & Apps | After Dark Labs</title>
<meta name="description" content="After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools.">
+ <meta name="robots" content="index,follow">
<link rel="canonical" href="https://afterdarklabs.io/">
- <meta property="og:title" content="Business Websites & Mobile Apps for U.S. Businesses | After Dark Labs">
- <meta property="og:description" content="Business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom business tools.">
+ <meta property="og:title" content="Business Websites & Apps | After Dark Labs">
+ <meta property="og:description" content="After Dark Labs builds business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom tools.">
+ <meta property="og:image" content="https://afterdarklabs.io/twitter-card.png">
+ <meta property="og:image:width" content="1536">
+ <meta property="og:image:height" content="1024">
+ <meta property="og:image:alt" content="After Dark Labs business websites and mobile apps">
<meta property="og:type" content="website">
<meta property="og:url" content="https://afterdarklabs.io/">
<meta property="og:site_name" content="After Dark Labs">
- <meta name="twitter:card" content="summary">
- <meta name="twitter:title" content="Business Websites and Mobile Apps for U.S. Businesses | After Dark Labs">
- <meta name="twitter:description" content="Business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom business tools.">
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:title" content="Business Websites & Apps | After Dark Labs">
+ <meta name="twitter:description" content="After Dark Labs builds business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom tools.">
+ <meta name="twitter:image" content="https://afterdarklabs.io/twitter-card.png">
+ <meta name="twitter:image:alt" content="After Dark Labs business websites and mobile apps">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<style>
@@ -101,6 +110,7 @@
<body class="bg-black text-white overflow-x-hidden">
<!-- NAV -->
+ <header>
<nav class="fixed top-0 w-full bg-black/90 backdrop-blur-lg z-50 border-b border-white/10">
<div class="max-w-7xl mx-auto px-6 py-5 flex justify-between items-center">
<div class="flex items-center gap-3">
@@ -111,19 +121,21 @@
</div>
</div>
<div class="hidden md:flex items-center gap-7 text-sm font-medium">
- <a href="#services" class="hover:text-[#ccff00] transition-colors">Services</a>
- <a href="websites.html" class="hover:text-[#ccff00] transition-colors">Websites</a>
- <a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
- <a href="#work" class="hover:text-[#ccff00] transition-colors">Work</a>
- <a href="about.html" class="hover:text-[#ccff00] transition-colors">About</a>
- <a href="#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
+ <a href="#services" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Services</a>
+ <a href="websites.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Websites</a>
+ <a href="mobile-apps.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Mobile Apps</a>
+ <a href="#work" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Work</a>
+ <a href="about.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">About</a>
+ <a href="#contact" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Contact</a>
</div>
- <a href="#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300 flex items-center gap-2">
+ <a href="#contact" class="min-h-12 px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300 flex items-center gap-2">
Start a Project
</a>
</div>
</nav>
+ </header>
+ <main>
<!-- HERO -->
<section class="hero-bg min-h-screen flex items-center pt-20" style="position:relative; overflow:hidden;">
<canvas id="hero-canvas"></canvas>
@@ -160,28 +172,28 @@
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-zinc-900 border border-white/10 rounded-3xl p-10 card-hover">
<div class="w-14 h-14 bg-[#ccff00] text-black rounded-2xl flex items-center justify-center mb-8 text-3xl">📱</div>
- <h3 class="text-3xl font-semibold mb-3"><a href="mobile-apps.html" class="hover:text-[#ccff00] transition-colors">Custom Mobile Apps</a></h3>
+ <h3 class="text-3xl font-semibold mb-3"><a href="mobile-apps.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Custom Mobile Apps</a></h3>
<p class="text-gray-400 mb-8">Custom iOS, Android, and cross-platform apps with branding, UI/UX, backend integrations, launch support, and marketing momentum.</p>
<ul class="space-y-4 text-sm">
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="mobile-app-branding-ui-ux.html" class="hover:text-[#ccff00] transition-colors">Branding, logo design, stunning UI/UX</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="backend-api-integration.html" class="hover:text-[#ccff00] transition-colors">Backend + API Integration</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="app-store-launch-support.html" class="hover:text-[#ccff00] transition-colors">App Store Launch & Support (iOS + Android)</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="influencer-marketing-social-media.html" class="hover:text-[#ccff00] transition-colors">Influencer marketing on social media</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="mobile-app-branding-ui-ux.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Branding, logo design, stunning UI/UX</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="backend-api-integration.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Backend + API Integration</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="app-store-launch-support.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">App Store Launch & Support (iOS + Android)</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="influencer-marketing-social-media.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Influencer marketing on social media</a></li>
</ul>
- <a href="mobile-apps.html" class="inline-flex mt-8 text-[#ccff00] font-semibold hover:text-white transition-colors">Explore mobile app development →</a>
+ <a href="mobile-apps.html" class="inline-flex min-h-12 items-center mt-8 text-[#ccff00] font-semibold hover:text-white transition-colors">Explore mobile app development →</a>
</div>
<div class="bg-zinc-900 border border-white/10 rounded-3xl p-10 card-hover">
<div class="w-14 h-14 bg-[#ccff00] text-black rounded-2xl flex items-center justify-center mb-8 text-3xl">🌐</div>
- <h3 class="text-3xl font-semibold mb-3"><a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business Websites</a></h3>
+ <h3 class="text-3xl font-semibold mb-3"><a href="business-websites.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Business Websites</a></h3>
<p class="text-gray-400 mb-8">Fast, conversion-focused websites for service businesses, construction companies, plumbers, electricians, auto sales teams, ecommerce, bookings, SEO, and long-term growth.</p>
<ul class="space-y-4 text-sm">
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="service-business-website-design.html" class="hover:text-[#ccff00] transition-colors">Service business website design for contractors, trades, and auto sales</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="business-websites.html" class="hover:text-[#ccff00] transition-colors">Business website design and development</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="custom-web-development-ecommerce.html" class="hover:text-[#ccff00] transition-colors">Custom Web Development and E-commerce Solutions</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="online-bookings-appointments-memberships.html" class="hover:text-[#ccff00] transition-colors">Online bookings, appointments, and subscription memberships</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-1"></i> <a href="business-website-seo.html" class="hover:text-[#ccff00] transition-colors">Business website SEO and performance</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="service-business-website-design.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Service business website design for contractors, trades, and auto sales</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="business-websites.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Business website design and development</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="custom-web-development-ecommerce.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Custom Web Development and E-commerce Solutions</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="online-bookings-appointments-memberships.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Online bookings, appointments, and subscription memberships</a></li>
+ <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="business-website-seo.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Business website SEO and performance</a></li>
</ul>
- <a href="business-websites.html" class="inline-flex mt-8 text-[#ccff00] font-semibold hover:text-white transition-colors">Explore business websites →</a>
+ <a href="business-websites.html" class="inline-flex min-h-12 items-center mt-8 text-[#ccff00] font-semibold hover:text-white transition-colors">Explore business websites →</a>
</div>
</div>
</div>
@@ -202,7 +214,7 @@
</button>
<div class="p-6">
<div class="text-[#ccff00] text-sm font-medium">Website • Real estate</div>
- <h4 class="text-xl font-semibold mt-1">Mia Druck</h4>
+ <h3 class="text-xl font-semibold mt-1">Mia Druck</h3>
</div>
</div>
<div class="group rounded-3xl overflow-hidden border border-white/10">
@@ -211,7 +223,7 @@
</button>
<div class="p-6">
<div class="text-[#ccff00] text-sm font-medium">Web App • E-commerce</div>
- <h4 class="text-xl font-semibold mt-1">Garden Fresh Wholesale</h4>
+ <h3 class="text-xl font-semibold mt-1">Garden Fresh Wholesale</h3>
</div>
</div>
<div class="group rounded-3xl overflow-hidden border border-white/10">
@@ -220,7 +232,7 @@
</button>
<div class="p-6">
<div class="text-[#ccff00] text-sm font-medium">Web App • SaaS</div>
- <h4 class="text-xl font-semibold mt-1">Invoice Otter</h4>
+ <h3 class="text-xl font-semibold mt-1">Invoice Otter</h3>
</div>
</div>
</div>
@@ -235,17 +247,27 @@
<form id="contact-form" class="space-y-6" action="https://formspree.io/f/xeedjery" method="POST">
<input type="hidden" name="_subject" value="New project inquiry from After Dark Labs">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
- <input type="text" name="name" placeholder="Your Name" autocomplete="name" required class="bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
- <input type="email" name="email" placeholder="Business Email" autocomplete="email" required class="bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
+ <div class="text-left">
+ <label for="contact-name" class="mb-2 block text-sm font-medium text-gray-300">Your Name</label>
+ <input id="contact-name" type="text" name="name" placeholder="Your Name" autocomplete="name" required class="min-h-12 w-full bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
+ </div>
+ <div class="text-left">
+ <label for="contact-email" class="mb-2 block text-sm font-medium text-gray-300">Business Email</label>
+ <input id="contact-email" type="email" name="email" placeholder="Business Email" autocomplete="email" required class="min-h-12 w-full bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-2xl px-6 py-5 outline-none transition-colors">
+ </div>
+ </div>
+ <div class="text-left">
+ <label for="contact-message" class="mb-2 block text-sm font-medium text-gray-300">Project Details</label>
+ <textarea id="contact-message" name="message" placeholder="Tell us about your project..." rows="6" required class="w-full min-h-36 bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-3xl px-6 py-5 outline-none resize-none"></textarea>
</div>
- <textarea name="message" placeholder="Tell us about your project..." rows="6" required class="w-full bg-zinc-900 border border-white/10 focus:border-[#ccff00] rounded-3xl px-6 py-5 outline-none resize-none"></textarea>
- <button type="submit" class="w-full py-6 bg-[#ccff00] text-black font-bold text-xl rounded-3xl hover:scale-[1.02] transition-all">
+ <button type="submit" class="min-h-12 w-full py-6 bg-[#ccff00] text-black font-bold text-xl rounded-3xl hover:scale-[1.02] transition-all">
Send Message
</button>
</form>
<div id="contact-status" class="hidden rounded-3xl border border-white/10 bg-zinc-900 px-8 py-10 text-left" tabindex="-1" aria-live="polite"></div>
</div>
</section>
+ </main>
<!-- FOOTER -->
<footer class="bg-black py-20">
@@ -259,8 +281,8 @@
</footer>
<div id="work-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-black/85 px-4 py-8 backdrop-blur-sm" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Work screenshot preview">
- <button type="button" id="work-modal-close" class="absolute right-5 top-5 h-11 w-11 text-4xl leading-none text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="Close screenshot preview">×</button>
- <img id="work-modal-image" class="max-h-[86vh] max-w-[94vw] object-contain shadow-2xl" alt="">
+ <button type="button" id="work-modal-close" class="absolute right-5 top-5 h-12 w-12 text-4xl leading-none text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="Close screenshot preview">×</button>
+ <img id="work-modal-image" class="max-h-[86vh] max-w-[94vw] object-contain shadow-2xl" alt="Selected work screenshot preview">
</div>
<script>
diff --git a/site.webmanifest b/site.webmanifest
new file mode 100644
index 0000000..3939cac
--- /dev/null
+++ b/site.webmanifest
@@ -0,0 +1,18 @@
+{
+ "name": "After Dark Labs",
+ "short_name": "After Dark",
+ "description": "Business websites and mobile apps for U.S. businesses.",
+ "start_url": "/",
+ "scope": "/",
+ "display": "standalone",
+ "background_color": "#000000",
+ "theme_color": "#ccff00",
+ "icons": [
+ {
+ "src": "/moon-stars-fill.svg",
+ "sizes": "any",
+ "type": "image/svg+xml",
+ "purpose": "any maskable"
+ }
+ ]
+}
diff --git a/twitter-card.png b/twitter-card.png
new file mode 100644
index 0000000..31e8bae
Binary files /dev/null and b/twitter-card.png differ