132 lines
4.9 KiB
Text
132 lines
4.9 KiB
Text
---
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
import { SITE, authors } from "../lib/blog-data.js";
|
|
import data from "../config/services.json";
|
|
|
|
const author = authors[0];
|
|
const { services, verticals, primaryVertical } = data;
|
|
|
|
const jsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
name: SITE.name,
|
|
jobTitle: author.jobTitle,
|
|
url: SITE.url,
|
|
makesOffer: services.map((s) => ({
|
|
"@type": "Offer",
|
|
itemOffered: { "@type": "Service", name: s.name, description: s.lead },
|
|
})),
|
|
};
|
|
---
|
|
|
|
<BaseLayout
|
|
title={`Services — AI Automation, Websites & Marketing for Law Firms | ${SITE.name}`}
|
|
description="AI automation, website design, and digital marketing for law firms and service businesses. Autonomous systems that bring in more qualified cases and follow up instantly."
|
|
canonical="/services"
|
|
jsonLd={jsonLd}
|
|
>
|
|
<!-- ---------- header ---------- -->
|
|
<section class="mx-auto w-full max-w-6xl px-5 pt-20 pb-14 md:pt-28">
|
|
<p class="font-mono text-xs tracking-[0.18em] text-muted-foreground uppercase">Services</p>
|
|
<h1
|
|
class="mt-6 max-w-[18ch] font-serif text-[clamp(2.2rem,5.6vw,4.2rem)] leading-[1.05] tracking-tight text-balance"
|
|
>
|
|
Automation, websites, and marketing — built for
|
|
<span class="ca-brushed">law firms.</span>
|
|
</h1>
|
|
<p class="mt-7 max-w-[56ch] text-base leading-relaxed text-muted-foreground">
|
|
I help {primaryVertical.toLowerCase()} and service businesses win more qualified work and
|
|
follow up faster — using AI automation, custom websites, and technical marketing
|
|
that run as intelligent systems rather than manual busywork.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ---------- the three services ---------- -->
|
|
<div class="mx-auto w-full max-w-6xl px-5">
|
|
{
|
|
services.map((s, i) => (
|
|
<section class="ca-band" id={s.slug}>
|
|
<div class="grid gap-8 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:gap-16">
|
|
<div>
|
|
<span class="font-mono text-xs tracking-[0.14em] text-[var(--ca-ink-4)] tabular-nums">
|
|
{String(i + 1).padStart(2, "0")}
|
|
</span>
|
|
<h2 class="mt-3 font-serif text-[clamp(1.8rem,4vw,2.6rem)] leading-tight tracking-tight">
|
|
{s.page ? <a href={s.page} class="hover:text-[var(--ca-vermillion)] transition-colors">{s.name}</a> : s.name}
|
|
</h2>
|
|
<p class="mt-4 max-w-[32ch] font-serif text-[clamp(1.1rem,2vw,1.35rem)] leading-snug text-[var(--ca-ink-2)]">
|
|
{s.lead}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="max-w-[60ch] leading-relaxed text-[var(--ca-ink-2)]">{s.body}</p>
|
|
<ul class="ca-cv-points mt-6">
|
|
{s.points.map((p) => (
|
|
<li>{p}</li>
|
|
))}
|
|
</ul>
|
|
<div class="mt-7 flex flex-wrap items-center gap-6">
|
|
{s.page && (
|
|
<a href={s.page} class="ca-quiet text-sm">
|
|
{s.name} for law firms →
|
|
</a>
|
|
)}
|
|
<a
|
|
href={`/contact?subject=${s.subject}`}
|
|
class:list={["text-sm", s.page ? "ca-quiet opacity-70" : "ca-quiet"]}
|
|
>
|
|
Start a {s.name.toLowerCase()} project →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<!-- ---------- who I work with ---------- -->
|
|
<section class="ca-band mx-auto w-full max-w-6xl px-5">
|
|
<div class="mb-10 flex flex-wrap items-baseline gap-6">
|
|
<h2 class="font-serif text-[clamp(1.8rem,4vw,2.4rem)] leading-tight tracking-tight">
|
|
<span class="ca-brushed">Who I work with</span>
|
|
</h2>
|
|
<span class="ml-auto font-mono text-xs tracking-[0.1em] text-[var(--ca-ink-4)] uppercase">
|
|
Primarily legal
|
|
</span>
|
|
</div>
|
|
|
|
<div class="ca-verticals">
|
|
{
|
|
verticals.map((v) => (
|
|
<div class:list={["ca-vertical", v.primary && "is-primary"]}>
|
|
<h3>
|
|
{v.name}
|
|
{v.primary && <span class="ca-vertical-tag">Primary</span>}
|
|
</h3>
|
|
<p>{v.note}</p>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ---------- closing ---------- -->
|
|
<section class="ca-band mx-auto w-full max-w-6xl px-5">
|
|
<h2
|
|
class="max-w-[20ch] font-serif text-[clamp(1.8rem,4.5vw,3.1rem)] leading-tight tracking-tight text-balance"
|
|
>
|
|
More qualified work, <span class="ca-brushed">less manual work.</span>
|
|
</h2>
|
|
<div class="mt-9 flex flex-wrap items-center gap-7">
|
|
<a
|
|
href="/contact"
|
|
class="rounded-[var(--radius)] border border-primary bg-primary px-6 py-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-transparent hover:text-primary"
|
|
>
|
|
Start a conversation
|
|
</a>
|
|
<a href="/projects" class="ca-quiet text-sm">See the work</a>
|
|
</div>
|
|
</section>
|
|
</BaseLayout>
|