<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="moon-stars-fill.svg">
<link rel="apple-touch-icon" href="/moon-stars-fill.svg">
<link rel="manifest" href="/site.webmanifest">
<title>Business Websites & Apps | After Dark Labs</title>
<meta name="description" content="After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools.">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://afterdarklabs.io/">
<meta property="og:title" content="Business Websites & Apps | After Dark Labs">
<meta property="og:description" content="After Dark Labs builds business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom tools.">
<meta property="og:image" content="https://afterdarklabs.io/twitter-card.png">
<meta property="og:image:width" content="1536">
<meta property="og:image:height" content="1024">
<meta property="og:image:alt" content="After Dark Labs business websites and mobile apps">
<meta property="og:type" content="website">
<meta property="og:url" content="https://afterdarklabs.io/">
<meta property="og:site_name" content="After Dark Labs">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Business Websites & Apps | After Dark Labs">
<meta name="twitter:description" content="After Dark Labs builds business websites and mobile apps for service businesses, ecommerce teams, booking flows, and custom tools.">
<meta name="twitter:image" content="https://afterdarklabs.io/twitter-card.png">
<meta name="twitter:image:alt" content="After Dark Labs business websites and mobile apps">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<script src="site.js" defer></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --neon: #ccff00; }
body { font-family: 'Inter', system-ui, sans-serif; }
.heading { font-family: 'Space Grotesk', sans-serif; }
.hero-bg { background: linear-gradient(135deg, #030303 0%, #0a0a0a 100%); }
.neon-text {
color: var(--neon);
text-shadow: 0 0 10px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon);
}
/* Full-hero canvas */
#hero-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
}
/* Vignette so edges stay dark and text pops */
.hero-vignette {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%),
linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.5) 100%);
pointer-events: none;
z-index: 1;
}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://afterdarklabs.io/#organization",
"name": "After Dark Labs",
"url": "https://afterdarklabs.io/",
"logo": "https://afterdarklabs.io/logo.png",
"founder": {
"@type": "Person",
"name": "Harrison Erd"
},
"areaServed": {
"@type": "Country",
"name": "United States"
},
"description": "After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools."
},
{
"@type": "WebSite",
"@id": "https://afterdarklabs.io/#website",
"url": "https://afterdarklabs.io/",
"name": "After Dark Labs",
"publisher": {
"@id": "https://afterdarklabs.io/#organization"
},
"description": "After Dark Labs builds business websites and mobile apps for U.S. companies, including service businesses, ecommerce teams, booking flows, and custom tools."
}
]
}
</script>
</head>
<body class="bg-black text-white overflow-x-hidden">
<nav class="fixed top-0 w-full bg-black/90 backdrop-blur-lg z-50 border-b border-white/10">
<div class="max-w-7xl mx-auto px-6 py-5 flex justify-between items-center">
<a href="index.html" class="flex items-center gap-3">
<div class="w-9 h-9 bg-black border-2 border-[#ccff00] rounded-2xl flex items-center justify-center text-xl font-bold">🌑</div>
<div>
<span class="heading text-2xl font-semibold tracking-tighter">After Dark</span>
<span class="text-[#ccff00] text-sm tracking-[3px] block -mt-1">LABS</span>
</div>
</a>
<div class="hidden md:flex items-center gap-7 text-sm font-medium">
<a href="index.html#mobile-apps" class="hover:text-[#ccff00] transition-colors">Mobile Apps</a>
<a href="index.html#business-websites" class="hover:text-[#ccff00] transition-colors">Business Websites</a>
<a href="index.html#shopify-stores" class="hover:text-[#ccff00] transition-colors">Shopify Stores</a>
<a href="index.html#work" class="hover:text-[#ccff00] transition-colors">Our Work</a>
<a href="index.html#about" class="hover:text-[#ccff00] transition-colors">About</a>
<a href="index.html#contact" class="hover:text-[#ccff00] transition-colors">Contact</a>
</div>
<a href="index.html#contact" class="px-6 py-3 bg-[#ccff00] text-black font-semibold rounded-2xl hover:bg-white transition-all duration-300">Start Project</a>
</div>
</nav>
<main>
<!-- HERO -->
<section class="hero-bg min-h-screen flex items-center pt-20" style="position:relative; overflow:hidden;">
<canvas id="hero-canvas"></canvas>
<div class="hero-vignette"></div>
<div class="hero-content max-w-4xl mx-auto px-6 py-32 flex flex-col items-center text-center w-full">
<div class="space-y-8">
<h1 class="heading text-7xl md:text-8xl font-bold leading-none tracking-tighter">
Custom websites<br>and mobile apps<br>that help businesses<br><span class="neon-text">thrive</span>.
</h1>
<p class="text-xl text-gray-300 max-w-xl mx-auto">
Strategy, design, development, SEO, integrations, and launch support for U.S. businesses that need digital products built with focus.
</p>
<div class="flex flex-wrap gap-5 justify-center">
<a href="#contact" class="px-8 py-5 bg-[#ccff00] hover:bg-white text-black font-semibold rounded-3xl text-lg transition-all flex items-center gap-3 group">
Let's Build Something
<span class="group-hover:rotate-45 transition-transform">→</span>
</a>
<a href="#work" class="px-8 py-5 border border-white/30 hover:border-[#ccff00] font-medium rounded-3xl text-lg transition-all">
See Our Work
</a>
</div>
</div>
</div>
</section>
<!-- SERVICES -->
<section id="services" class="bg-zinc-950">
<article id="mobile-apps" class="scroll-mt-24 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-[1.05fr_0.95fr] lg:items-center">
<div>
<div class="mb-8 text-7xl" aria-hidden="true">📱</div>
<p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">Mobile app development</p>
<h3 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">
<a href="mobile-apps.html" class="transition-opacity hover:opacity-70">Custom Mobile Apps</a>
</h3>
<p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">Custom iOS, Android, and cross-platform apps with branding, UI/UX, backend integrations, launch support, and marketing momentum.</p>
<a href="mobile-apps.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-black px-6 py-3 font-semibold text-white transition-colors hover:bg-zinc-800">
Explore mobile app development
<span aria-hidden="true">→</span>
</a>
</div>
<ul class="space-y-5 text-lg font-semibold md:text-xl">
<li><a href="mobile-app-branding-ui-ux.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span 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 aria-hidden="true">↗</span><span>Backend + API Integration</span></a></li>
<li><a href="app-store-launch-support.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>App Store Launch & Support (iOS + Android)</span></a></li>
<li><a href="influencer-marketing-social-media.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Influencer marketing on social media</span></a></li>
</ul>
</div>
</article>
<article id="business-websites" class="scroll-mt-24 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-[0.95fr_1.05fr] lg:items-center">
<div class="lg:order-2">
<div class="mb-8 text-7xl" aria-hidden="true">🌐</div>
<p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-[#ccff00]">Website development</p>
<h3 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">
<a href="business-websites.html" class="transition-opacity hover:opacity-70">Business Websites</a>
</h3>
<p class="mt-8 max-w-2xl text-lg leading-8 text-gray-300">Fast, conversion-focused websites for service businesses, construction companies, plumbers, electricians, auto sales teams, ecommerce, bookings, SEO, and long-term growth.</p>
<a href="business-websites.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-[#ccff00] px-6 py-3 font-semibold text-black transition-colors hover:bg-white">
Explore business websites
<span aria-hidden="true">→</span>
</a>
</div>
<ul class="space-y-5 text-lg font-semibold md:text-xl lg:order-1">
<li><a href="service-business-website-design.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Service business website design for contractors, trades, and auto sales</span></a></li>
<li><a href="business-websites.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Business website design and development</span></a></li>
<li><a href="custom-web-development-ecommerce.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Custom Web Development and E-commerce Solutions</span></a></li>
<li><a href="online-bookings-appointments-memberships.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Online bookings, appointments, and subscription memberships</span></a></li>
<li><a href="business-website-seo.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span class="text-[#ccff00]" aria-hidden="true">↗</span><span>Business website SEO and performance</span></a></li>
</ul>
</div>
</article>
<article id="shopify-stores" class="scroll-mt-24 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-[1.05fr_0.95fr] lg:items-center">
<div>
<div class="mb-8 text-7xl" aria-hidden="true">🛒</div>
<p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/60">Commerce systems</p>
<h3 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">
<a href="shopify-stores.html" class="transition-opacity hover:opacity-70">Shopify Stores</a>
</h3>
<p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">Shopify store builds and improvements for brands that need better product structure, polished theme customization, faster storefronts, checkout clarity, and search-ready content.</p>
<a href="shopify-stores.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-black px-6 py-3 font-semibold text-white transition-colors hover:bg-zinc-800">
Explore Shopify stores
<span aria-hidden="true">→</span>
</a>
</div>
<ul class="space-y-5 text-lg font-semibold md:text-xl">
<li><a href="shopify-store-design.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Shopify storefront design and theme customization</span></a></li>
<li><a href="shopify-stores.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Product, collection, and checkout structure</span></a></li>
<li><a href="shopify-seo-optimization.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Shopify SEO, performance, and metadata</span></a></li>
<li><a href="shopify-migration-optimization.html" class="inline-flex min-h-12 items-start gap-4 transition-opacity hover:opacity-65"><span aria-hidden="true">↗</span><span>Store migration, cleanup, and launch support</span></a></li>
</ul>
</div>
</article>
</section>
<!-- WORK -->
<section id="work" class="py-28 bg-black">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-12">
<div>
<h2 class="heading text-5xl font-semibold tracking-tighter">Recent Work</h2>
</div>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="group rounded-3xl overflow-hidden border border-white/10">
<button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
<img src="https://afterdarklabs.io/miadruck.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Mia Druck real estate website project by After Dark Labs">
</button>
<div class="p-6">
<div class="text-[#ccff00] text-sm font-medium">Website • Real estate</div>
<h3 class="text-xl font-semibold mt-1">Mia Druck</h3>
</div>
</div>
<div class="group rounded-3xl overflow-hidden border border-white/10">
<button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
<img src="https://afterdarklabs.io/gardenfresh.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Garden Fresh Wholesale ecommerce web app project by After Dark Labs">
</button>
<div class="p-6">
<div class="text-[#ccff00] text-sm font-medium">Business Website • SEO</div>
<h3 class="text-xl font-semibold mt-1">Garden Fresh Wholesale</h3>
</div>
</div>
<div class="group rounded-3xl overflow-hidden border border-white/10">
<button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
<img src="https://afterdarklabs.io/invoiceotter.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Invoice Otter SaaS web app project by After Dark Labs">
</button>
<div class="p-6">
<div class="text-[#ccff00] text-sm font-medium">Web App • SaaS</div>
<h3 class="text-xl font-semibold mt-1">Invoice Otter</h3>
</div>
</div>
<div class="group rounded-3xl overflow-hidden border border-white/10">
<button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
<img src="https://afterdarklabs.io/vegy.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Vegy SaaS web app project by After Dark Labs">
</button>
<div class="p-6">
<div class="text-[#ccff00] text-sm font-medium">Web App • SaaS</div>
<h3 class="text-xl font-semibold mt-1">Vegy</h3>
</div>
</div>
<div class="group rounded-3xl overflow-hidden border border-white/10">
<button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
<img src="https://afterdarklabs.io/coralvibe.png?v=3" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Shopify store for Coral Vibe Florida project by After Dark Labs">
</button>
<div class="p-6">
<div class="text-[#ccff00] text-sm font-medium">Shopify • E-Commerce</div>
<h3 class="text-xl font-semibold mt-1">Coral Vibe</h3>
</div>
</div>
<div class="group rounded-3xl overflow-hidden border border-white/10">
<button type="button" class="block w-full cursor-zoom-in overflow-hidden text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00] focus-visible:ring-offset-2 focus-visible:ring-offset-black" data-work-preview>
<img src="https://afterdarklabs.io/tikitide.png?v=1" width="1901" height="1079" loading="lazy" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" alt="Tiki tide boat rentals Florida keys online booking web app project by After Dark Labs">
</button>
<div class="p-6">
<div class="text-[#ccff00] text-sm font-medium">Website • Online Booking</div>
<h3 class="text-xl font-semibold mt-1">Tiki Tide Boat Rentals</h3>
</div>
</div>
</div>
</div>
</section>
<!-- ABOUT -->
<section id="about" class="scroll-mt-24 bg-[#ccff00] text-black">
<div class="max-w-7xl mx-auto grid gap-12 px-6 py-20 md:py-24 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
<div>
<p class="mb-5 text-sm font-bold uppercase tracking-[0.28em] text-black/55">About After Dark Labs</p>
<h2 class="heading max-w-4xl text-5xl font-semibold leading-none tracking-tighter md:text-7xl">Senior product execution, without the agency handoff.</h2>
<p class="mt-8 max-w-2xl text-lg leading-8 text-black/75">After Dark Labs is a boutique development studio based out of Fort Lauderdale, serving clients across the United States. From online stores, to custom internal tools for Fortune 500 companies, After Dark Labs specializes in taking ambitious ideas from concept to production.</p>
<a href="about.html" class="mt-10 inline-flex min-h-12 items-center gap-3 rounded-2xl bg-black px-6 py-3 font-semibold text-white transition-colors hover:bg-zinc-800">
More about After Dark Labs
<span aria-hidden="true">→</span>
</a>
</div>
<div class="space-y-8 text-lg leading-8 text-black/75">
<div>
<p class="heading text-4xl font-bold tracking-tighter text-black">15+ years</p>
<p>Direct strategy, design decisions, development, launch planning, and follow-through from the person doing the work.</p>
</div>
<div>
<p class="heading text-4xl font-bold tracking-tighter text-black">20+ products shipped</p>
<p>Projects range from service business websites and Shopify stores to SaaS tools, booking flows, and mobile app experiences.</p>
</div>
<div>
<p class="heading text-4xl font-bold tracking-tighter text-black">Lean by design</p>
<p>No account-manager layers or agency handoffs, so more attention goes into the work that moves the business forward.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section id="contact" class="py-28 border-t border-b border-white/10 bg-zinc-950">
<div class="max-w-3xl mx-auto text-center px-6">
<h2 class="heading text-6xl font-bold tracking-tighter mb-6">Ready to build something exceptional?</h2>
<p class="text-xl text-gray-400 mb-10">Tell us about your project. We reply the same day!</p>
<form 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">
<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>
<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">
<div class="max-w-7xl mx-auto px-6 text-center">
<div class="flex items-center justify-center gap-3 mb-6">
<div class="w-9 h-9 bg-black border-2 border-[#ccff00] rounded-2xl flex items-center justify-center text-2xl">🌑</div>
<span class="heading text-3xl font-semibold tracking-tighter">After Dark Labs</span>
</div>
<p class="text-gray-500">© 2026 After Dark Labs • Fort Lauderdale, FL</p>
</div>
</footer>
<div id="work-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-black/85 px-4 py-8 backdrop-blur-sm" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Work screenshot preview">
<button type="button" id="work-modal-close" class="absolute right-5 top-5 h-12 w-12 text-4xl leading-none text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#ccff00]" aria-label="Close screenshot preview">×</button>
<img id="work-modal-image" class="max-h-[86vh] max-w-[94vw] object-contain shadow-2xl" alt="Selected work screenshot preview">
</div>
<script>
(function () {
const form = document.getElementById('contact-form');
const status = document.getElementById('contact-status');
if (!form || !status) return;
const submitButton = form.querySelector('button[type="submit"]');
const defaultButtonText = submitButton.textContent.trim();
function showStatus(type, title, message) {
const isSuccess = type === 'success';
status.className = [
'rounded-3xl border px-8 py-10 text-left',
isSuccess ? 'border-[#ccff00]/40 bg-[#ccff00]/10' : 'border-red-400/40 bg-red-950/30',
].join(' ');
status.setAttribute('role', isSuccess ? 'status' : 'alert');
const eyebrow = document.createElement('p');
eyebrow.className = `text-sm font-semibold uppercase tracking-[0.2em] ${isSuccess ? 'text-[#ccff00]' : 'text-red-300'}`;
eyebrow.textContent = isSuccess ? 'Message sent' : 'Message not sent';
const heading = document.createElement('h3');
heading.className = 'heading mt-3 text-3xl font-semibold tracking-tighter text-white';
heading.textContent = title;
const body = document.createElement('p');
body.className = 'mt-4 text-lg leading-8 text-gray-300';
body.textContent = message;
status.replaceChildren(eyebrow, heading, body);
form.remove();
status.focus({ preventScroll: true });
}
form.addEventListener('submit', async event => {
event.preventDefault();
if (!form.reportValidity()) return;
submitButton.disabled = true;
submitButton.textContent = 'Sending...';
submitButton.classList.add('cursor-wait', 'opacity-80');
try {
const response = await fetch(form.action, {
method: form.method,
body: new FormData(form),
headers: { Accept: 'application/json' },
});
const data = await response.json().catch(() => ({}));
if (!response.ok) {
const errors = Array.isArray(data.errors)
? data.errors.map(error => error.message).filter(Boolean).join(' ')
: '';
throw new Error(errors || 'The message could not be submitted.');
}
showStatus(
'success',
'Thank you. We will be in touch soon.',
'Your project details were sent successfully, and we will reply as soon as possible.'
);
} catch (error) {
showStatus(
'error',
'We could not send your message.',
error.message || 'Please refresh the page and try again in a moment.'
);
} finally {
submitButton.disabled = false;
submitButton.textContent = defaultButtonText;
submitButton.classList.remove('cursor-wait', 'opacity-80');
}
});
})();
(function () {
const modal = document.getElementById('work-modal');
const modalImage = document.getElementById('work-modal-image');
const closeButton = document.getElementById('work-modal-close');
const previewButtons = document.querySelectorAll('[data-work-preview]');
let lastFocused = null;
function openPreview(button) {
const image = button.querySelector('img');
lastFocused = document.activeElement;
modalImage.src = image.currentSrc || image.src;
modalImage.alt = image.alt;
modal.classList.remove('hidden');
modal.classList.add('flex');
modal.setAttribute('aria-hidden', 'false');
document.body.classList.add('overflow-hidden');
closeButton.focus({ preventScroll: true });
}
function closePreview() {
modal.classList.add('hidden');
modal.classList.remove('flex');
modal.setAttribute('aria-hidden', 'true');
modalImage.removeAttribute('src');
document.body.classList.remove('overflow-hidden');
if (lastFocused) lastFocused.focus({ preventScroll: true });
}
previewButtons.forEach(button => {
button.addEventListener('click', () => openPreview(button));
});
closeButton.addEventListener('click', closePreview);
modal.addEventListener('click', event => {
if (event.target === modal) closePreview();
});
window.addEventListener('keydown', event => {
if (event.key === 'Escape' && !modal.classList.contains('hidden')) closePreview();
});
})();
/* ─── HERO CANVAS ANIMATION ──────────────────────────────── */
(function () {
const canvas = document.getElementById('hero-canvas');
const section = canvas.closest('section');
const ctx = canvas.getContext('2d');
const NODE_COUNT = 80;
const LINK_DIST = 140;
const PULSE_SPEED = 0.012;
let W, H, nodes = [], mouse = { x: -9999, y: -9999 };
function resize() {
const rect = section.getBoundingClientRect();
W = canvas.width = rect.width * devicePixelRatio;
H = canvas.height = rect.height * devicePixelRatio;
canvas.style.width = rect.width + 'px';
canvas.style.height = rect.height + 'px';
}
function makeNode() {
return {
x: Math.random() * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 0.45,
vy: (Math.random() - 0.5) * 0.45,
r: 1.5 + Math.random() * 2,
phase: Math.random() * Math.PI * 2,
};
}
function init() {
resize();
nodes = Array.from({ length: NODE_COUNT }, makeNode);
}
const ORBS = [
{ cx: 0.20, cy: 0.35, r: 0.22, spd: 0.0007, off: 0 },
{ cx: 0.75, cy: 0.60, r: 0.18, spd: 0.0011, off: 2.1 },
{ cx: 0.50, cy: 0.25, r: 0.14, spd: 0.0009, off: 4.5 },
{ cx: 0.85, cy: 0.20, r: 0.12, spd: 0.0013, off: 1.3 },
];
function drawOrbs(t) {
ORBS.forEach(o => {
const cx = (o.cx + Math.sin(t * o.spd + o.off) * 0.06) * W;
const cy = (o.cy + Math.cos(t * o.spd * 1.3 + o.off) * 0.06) * H;
const r = o.r * Math.min(W, H);
const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
g.addColorStop(0, 'rgba(204,255,0,0.10)');
g.addColorStop(0.5, 'rgba(204,255,0,0.04)');
g.addColorStop(1, 'rgba(204,255,0,0)');
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2);
ctx.fillStyle = g;
ctx.fill();
});
}
let rings = [];
section.addEventListener('mousemove', e => {
const rect = section.getBoundingClientRect();
mouse.x = (e.clientX - rect.left) * devicePixelRatio;
mouse.y = (e.clientY - rect.top) * devicePixelRatio;
if (Math.random() < 0.08) {
rings.push({ x: mouse.x, y: mouse.y, r: 0, alpha: 0.5 });
}
});
section.addEventListener('mouseleave', () => { mouse.x = mouse.y = -9999; });
function drawRings() {
rings = rings.filter(rg => rg.alpha > 0.01);
rings.forEach(rg => {
rg.r += 1.8;
rg.alpha *= 0.93;
ctx.beginPath();
ctx.arc(rg.x, rg.y, rg.r, 0, Math.PI * 2);
ctx.strokeStyle = `rgba(204,255,0,${rg.alpha})`;
ctx.lineWidth = 1;
ctx.stroke();
});
}
let t = 0;
function frame() {
t++;
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = '#050505';
ctx.fillRect(0, 0, W, H);
drawOrbs(t);
nodes.forEach(n => {
n.phase += PULSE_SPEED;
n.x += n.vx;
n.y += n.vy;
if (n.x < 0 || n.x > W) n.vx *= -1;
if (n.y < 0 || n.y > H) n.vy *= -1;
const dx = n.x - mouse.x, dy = n.y - mouse.y;
const d2 = dx * dx + dy * dy;
if (d2 < 90000) {
const f = (1 - d2 / 90000) * 0.4;
n.vx += (dx / Math.sqrt(d2)) * f;
n.vy += (dy / Math.sqrt(d2)) * f;
}
const spd = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
if (spd > 1.2) { n.vx /= spd / 1.2; n.vy /= spd / 1.2; }
});
ctx.lineWidth = 0.8;
for (let i = 0; i < nodes.length; i++) {
for (let j = i + 1; j < nodes.length; j++) {
const a = nodes[i], b = nodes[j];
const dx = a.x - b.x, dy = a.y - b.y;
const d = Math.sqrt(dx * dx + dy * dy);
if (d < LINK_DIST * devicePixelRatio) {
const alpha = (1 - d / (LINK_DIST * devicePixelRatio)) * 0.35;
ctx.strokeStyle = `rgba(204,255,0,${alpha})`;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
}
}
}
nodes.forEach(n => {
const pulse = 0.5 + 0.5 * Math.sin(n.phase);
const alpha = 0.55 + 0.45 * pulse;
const glow = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 4);
glow.addColorStop(0, `rgba(204,255,0,${alpha})`);
glow.addColorStop(0.4, `rgba(204,255,0,${alpha * 0.3})`);
glow.addColorStop(1, 'rgba(204,255,0,0)');
ctx.beginPath();
ctx.arc(n.x, n.y, n.r * 4 * devicePixelRatio, 0, Math.PI * 2);
ctx.fillStyle = glow;
ctx.fill();
ctx.beginPath();
ctx.arc(n.x, n.y, n.r * devicePixelRatio, 0, Math.PI * 2);
ctx.fillStyle = `rgba(204,255,0,${alpha})`;
ctx.fill();
});
drawRings();
for (let y = 0; y < H; y += 4) {
ctx.fillStyle = 'rgba(0,0,0,0.04)';
ctx.fillRect(0, y, W, 1);
}
requestAnimationFrame(frame);
}
window.addEventListener('resize', () => { resize(); });
init();
frame();
})();
</script>
</body>
</html>