patx/afterdarklabs
update services section on index
Commit 9d7d65c · patx · 2026-05-21T17:09:46-04:00
Comments
No comments yet.
Diff
diff --git a/index.html b/index.html
index 9c13c97..8853ca5 100644
--- a/index.html
+++ b/index.html
@@ -41,12 +41,6 @@
text-shadow: 0 0 10px var(--neon), 0 0 25px var(--neon), 0 0 50px var(--neon);
}
- .card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
- .card-hover:hover {
- transform: translateY(-12px);
- box-shadow: 0 25px 50px -12px rgb(204 255 0 / 0.2);
- }
-
/* Full-hero canvas */
#hero-canvas {
position: absolute;
@@ -158,52 +152,74 @@
</section>
<!-- SERVICES -->
- <section id="services" class="py-28 bg-zinc-950">
- <div class="max-w-7xl mx-auto px-6">
- <div class="text-center mb-16">
- <h2 class="heading text-5xl font-semibold tracking-tighter mb-4">What We Build</h2>
- <p class="text-gray-400">Custom website development and mobile app development for businesses that need useful, polished digital products.</p>
- </div>
- <div class="grid gap-8 lg:grid-cols-3">
- <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="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-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 min-h-12 items-center mt-8 text-[#ccff00] font-semibold hover:text-white transition-colors">Explore mobile app development →</a>
+ <section id="services" class="bg-zinc-950">
+ <article 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>
+ <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>
- <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="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-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 min-h-12 items-center mt-8 text-[#ccff00] font-semibold hover:text-white transition-colors">Explore business websites →</a>
+ <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 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 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-black/50">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-black/70">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-black px-6 py-3 font-semibold text-white transition-colors hover:bg-zinc-800">
+ Explore business websites
+ <span aria-hidden="true">→</span>
+ </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="shopify-stores.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Shopify Stores</a></h3>
- <p class="text-gray-400 mb-8">Shopify store builds and improvements for brands that need better product structure, polished theme customization, faster storefronts, checkout clarity, and search-ready content.</p>
- <ul class="space-y-4 text-sm">
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="shopify-store-design.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Shopify storefront design and theme customization</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="shopify-stores.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Product, collection, and checkout structure</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="shopify-seo-optimization.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Shopify SEO, performance, and metadata</a></li>
- <li class="flex items-start gap-3"><i class="fas fa-check text-[#ccff00] mt-4"></i> <a href="shopify-migration-optimization.html" class="inline-flex min-h-12 items-center hover:text-[#ccff00] transition-colors">Store migration, cleanup, and launch support</a></li>
- </ul>
- <a href="shopify-stores.html" class="inline-flex min-h-12 items-center mt-8 text-[#ccff00] font-semibold hover:text-white transition-colors">Explore Shopify stores →</a>
+ <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 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 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 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 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 aria-hidden="true">↗</span><span>Business website SEO and performance</span></a></li>
+ </ul>
+ </div>
+ </article>
+ <article 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>
+ <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>
- </div>
+ </article>
</section>
<!-- WORK -->