SEO: add indexable /services landing page with Service schema

src/app/services/page.tsx

@@ -0,0 +1,318 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Radio, Cable, Cloud, Tv, Ruler, Wrench, MonitorCheck, Headset, ArrowRight } from "lucide-react";
+import Navigation from "@/components/Navigation";
+import Footer from "@/components/Footer";
+
+const SITE_URL = "https://wilddragon.net";
+const PAGE_URL = `${SITE_URL}/services`;
+
+export const metadata: Metadata = {
+  title:
+    "Broadcast Systems Integration & Production Facility Design — Washington DC",
+  description:
+    "Broadcast systems integration services in the Washington DC area: facility design, IP & cloud production (SMPTE ST 2110, NDI, SRT), XR stages, vMix and AMPP cloud workflows, Ross and Grass Valley integration, and live production engineering.",
+  alternates: {
+    canonical: PAGE_URL,
+  },
+  openGraph: {
+    title:
+      "Broadcast Systems Integration & Production Facility Design — Washington DC",
+    description:
+      "Facility design, IP & cloud production, XR stages, and live broadcast engineering for sports, corporate, financial services, aerospace, and defense.",
+    url: PAGE_URL,
+    type: "website",
+  },
+};
+
+const capabilities = [
+  {
+    icon: Radio,
+    title: "Broadcast Systems Design",
+    description:
+      "End-to-end broadcast facility design including signal flow engineering, equipment specification, and architectural documentation. Every facility starts with documentation that defines how signals move, how operators interact, and how systems scale.",
+    deliverables: [
+      "System architecture & block diagrams",
+      "Equipment specification & BOMs",
+      "Rack elevations & floor plans",
+      "Signal flow & line drawings",
+    ],
+  },
+  {
+    icon: Cable,
+    title: "Systems Integration",
+    description:
+      "Full system integration from rack fabrication and cable infrastructure through to final termination, labeling, commissioning, and operator training. Clean builds technicians can troubleshoot and maintain for years.",
+    deliverables: [
+      "Rack fabrication & wiring",
+      "Termination & labeling",
+      "Commissioning & QC",
+      "As-built documentation",
+    ],
+  },
+  {
+    icon: Cloud,
+    title: "IP & Cloud Production",
+    description:
+      "Cloud-native production architectures, SMPTE ST 2110, NDI, SRT, and hybrid on-prem/cloud workflows. Including vMix clusters, Grass Valley AMPP, and remote production designs that scale globally.",
+    deliverables: [
+      "SMPTE ST 2110 networks",
+      "NDI / SRT contribution",
+      "vMix & AMPP cloud production",
+      "Hybrid on-prem / cloud workflows",
+    ],
+  },
+  {
+    icon: Tv,
+    title: "Broadcast Engineering",
+    description:
+      "Live production engineering, RF systems, video routing, and real-time broadcast operations. Coming from a live production background, the systems are designed for the people who actually use them.",
+    deliverables: [
+      "Live event engineering",
+      "RF & wireless coordination",
+      "Routing & multiviewer config",
+      "On-site production support",
+    ],
+  },
+];
+
+const process = [
+  {
+    icon: Ruler,
+    phase: "01",
+    title: "Design",
+    description:
+      "Signal flow engineering, system architecture, and equipment specification. Every facility starts with documentation that defines how signals move, how operators interact, and how systems scale.",
+  },
+  {
+    icon: Wrench,
+    phase: "02",
+    title: "Integrate",
+    description:
+      "Full system builds from rack fabrication and cable infrastructure through to final termination and labeling. Clean builds that technicians can troubleshoot and maintain for years.",
+  },
+  {
+    icon: MonitorCheck,
+    phase: "03",
+    title: "Commission",
+    description:
+      "End-to-end system testing, calibration, and performance verification. Every signal path tested, every failover validated, every workflow documented before handoff.",
+  },
+  {
+    icon: Headset,
+    phase: "04",
+    title: "Support",
+    description:
+      "Operator training, documentation packages, and ongoing technical support. Systems designed with the people who use them in mind — not just the engineers who build them.",
+  },
+];
+
+const verticals = [
+  { name: "Sports Broadcast", description: "Arena and stadium production, multi-camera live workflows, and dedicated game-day infrastructure." },
+  { name: "Corporate Broadcast", description: "Studios, hybrid meeting integration, and broadcast-grade conferencing for enterprise clients." },
+  { name: "Financial Services", description: "Compliant broadcast facilities with redundant infrastructure for global content delivery." },
+  { name: "Extended Reality", description: "LED volumes, in-camera VFX, real-time rendering pipelines, and virtual production stages." },
+  { name: "Aerospace & Defense", description: "Mobile fly-pack production for field events and rapidly deployable broadcast environments." },
+];
+
+export default function ServicesPage() {
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@graph": [
+      {
+        "@type": "BreadcrumbList",
+        itemListElement: [
+          { "@type": "ListItem", position: 1, name: "Home", item: `${SITE_URL}/` },
+          { "@type": "ListItem", position: 2, name: "Services", item: PAGE_URL },
+        ],
+      },
+      ...capabilities.map((cap) => ({
+        "@type": "Service",
+        name: cap.title,
+        description: cap.description,
+        provider: { "@id": `${SITE_URL}/#organization` },
+        areaServed: ["Washington, DC", "Maryland", "Virginia", "United States"],
+        serviceType: cap.title,
+        url: PAGE_URL,
+      })),
+    ],
+  };
+
+  return (
+    <main className="min-h-screen bg-white">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+      />
+
+      <Navigation />
+
+      {/* Hero */}
+      <section className="pt-32 pb-20 bg-primary">
+        <div className="max-w-6xl mx-auto px-6">
+          <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
+            Services
+          </p>
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-[1.05] mb-6 max-w-4xl">
+            Broadcast Systems Integration &amp; Production Facility Design
+          </h1>
+          <p className="text-lg md:text-xl text-neutral-400 max-w-3xl leading-relaxed">
+            Based in the Washington DC area, I design and integrate broadcast
+            production facilities for sports, corporate, financial services,
+            aerospace, and defense organizations. From SMPTE ST 2110 IP networks
+            and cloud production to traditional SDI infrastructure, XR stages,
+            and live event engineering.
+          </p>
+        </div>
+      </section>
+
+      {/* Capabilities */}
+      <section className="py-20 md:py-28">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="max-w-3xl mb-14">
+            <div className="w-10 h-px bg-accent mb-6" />
+            <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
+              Capabilities
+            </p>
+            <h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight mb-5">
+              Full-stack broadcast expertise.
+            </h2>
+            <p className="text-muted leading-relaxed">
+              An operator&apos;s perspective on systems design — built from a
+              career that spans both live production and infrastructure
+              engineering.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {capabilities.map((cap) => (
+              <article
+                key={cap.title}
+                className="bg-white rounded-xl p-8 border border-neutral-200/80 hover:border-accent/20 hover:shadow-lg hover:shadow-neutral-200/50 transition-all duration-400"
+              >
+                <div className="w-12 h-12 rounded-lg bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-5">
+                  <cap.icon size={22} className="text-accent" strokeWidth={1.5} />
+                </div>
+                <h3 className="text-xl font-semibold text-primary mb-3">
+                  {cap.title}
+                </h3>
+                <p className="text-[14px] text-muted leading-relaxed mb-5">
+                  {cap.description}
+                </p>
+                <ul className="space-y-2 border-t border-neutral-100 pt-5">
+                  {cap.deliverables.map((d) => (
+                    <li key={d} className="flex items-start gap-3 text-[13px] text-muted">
+                      <span className="w-1 h-1 rounded-full bg-accent mt-2 shrink-0" />
+                      <span>{d}</span>
+                    </li>
+                  ))}
+                </ul>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Process */}
+      <section className="py-20 md:py-28 bg-surface-dark">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="max-w-3xl mb-14">
+            <div className="w-10 h-px bg-accent mb-6" />
+            <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
+              Process
+            </p>
+            <h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight mb-5">
+              From blueprint to broadcast.
+            </h2>
+            <p className="text-muted leading-relaxed">
+              A complete lifecycle approach to broadcast facility design and
+              systems integration. Every project follows a disciplined process
+              that ensures systems work flawlessly when the red light goes on.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
+            {process.map((step) => (
+              <div
+                key={step.title}
+                className="relative bg-white rounded-xl p-7 border border-neutral-200/80"
+              >
+                <span className="font-mono text-[10px] text-accent/30 absolute top-5 right-5">
+                  {step.phase}
+                </span>
+                <div className="w-11 h-11 rounded-lg bg-neutral-50 border border-neutral-100 flex items-center justify-center mb-5">
+                  <step.icon size={20} className="text-accent" strokeWidth={1.5} />
+                </div>
+                <h3 className="text-base font-semibold text-primary mb-3">
+                  {step.title}
+                </h3>
+                <p className="text-[13px] text-muted leading-relaxed">
+                  {step.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Verticals */}
+      <section className="py-20 md:py-28">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="max-w-3xl mb-14">
+            <div className="w-10 h-px bg-accent mb-6" />
+            <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
+              Industries
+            </p>
+            <h2 className="text-3xl md:text-4xl font-semibold text-primary leading-tight mb-5">
+              Industries served.
+            </h2>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {verticals.map((v) => (
+              <div key={v.name} className="border-t border-neutral-200 pt-5">
+                <h3 className="text-base font-semibold text-primary mb-2">
+                  {v.name}
+                </h3>
+                <p className="text-[13px] text-muted leading-relaxed">
+                  {v.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-20 md:py-28 bg-primary">
+        <div className="max-w-4xl mx-auto px-6 text-center">
+          <h2 className="text-3xl md:text-4xl font-semibold text-white mb-4">
+            Planning a new facility?
+          </h2>
+          <p className="text-neutral-400 mb-8 max-w-xl mx-auto leading-relaxed">
+            Whether you&apos;re building a new control room, migrating to IP, or
+            evaluating cloud production, I&apos;d love to talk through your
+            project.
+          </p>
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
+            <a
+              href="mailto:zgaetano@wilddragon.net"
+              className="inline-flex items-center gap-2 px-7 py-3 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-all duration-200"
+            >
+              Start a Conversation
+              <ArrowRight size={14} />
+            </a>
+            <Link
+              href="/#projects"
+              className="px-7 py-3 border border-neutral-700 text-neutral-400 text-sm font-medium rounded-md hover:border-neutral-500 hover:text-neutral-200 transition-colors duration-200"
+            >
+              See Selected Work
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}