buildmymcpserver/apps/web/app/(marketing)/guides/article-shell.tsx

import Link from 'next/link';
import type { ReactNode } from 'react';

// Shared layout + typographic primitives for /guides/* SEO articles. Server
// component (no client JS) so each article page can export its own metadata.

export function ArticleShell({
  title,
  subtitle,
  updated,
  children,
}: {
  title: string;
  subtitle?: string;
  updated?: string;
  children: ReactNode;
}) {
  return (
    <article className="mx-auto max-w-3xl px-6 py-14">
      <Link
        href="/guides"
        className="text-[12px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
      >
        ← Guides
      </Link>
      <h1 className="mt-4 text-[30px] font-semibold leading-tight tracking-tight text-[--color-fg]">
        {title}
      </h1>
      {subtitle && <p className="mt-3 text-[15px] leading-relaxed text-[--color-fg-muted]">{subtitle}</p>}
      {updated && <p className="mt-2 text-[12px] text-[--color-fg-subtle]">Updated {updated}</p>}
      <div className="mt-8">{children}</div>

      <div className="mt-14 rounded-lg border border-[--color-border] bg-[--color-bg-subtle] p-5">
        <p className="text-[14px] font-medium text-[--color-fg]">
          Skip the boilerplate — describe your tool, get a hosted MCP server.
        </p>
        <p className="mt-1 text-[13px] text-[--color-fg-muted]">
          BuildMyMCPServer generates the TypeScript server, wraps it in OAuth 2.1 and deploys it to a
          public Streamable HTTP URL for Claude, Cursor and ChatGPT. Free tier, source export, no
          lock-in.
        </p>
        <Link
          href="/login"
          className="mt-3 inline-flex h-9 items-center rounded-md bg-[--color-accent] px-4 text-[13px] font-medium text-white transition-colors hover:bg-[#5557e8]"
        >
          Start building →
        </Link>
      </div>
    </article>
  );
}

export function H2({ children }: { children: ReactNode }) {
  return (
    <h2 className="mt-10 text-[19px] font-semibold tracking-tight text-[--color-fg]">{children}</h2>
  );
}

export function P({ children }: { children: ReactNode }) {
  return <p className="mt-3 text-[14.5px] leading-relaxed text-[--color-fg-muted]">{children}</p>;
}

export function UL({ children }: { children: ReactNode }) {
  return (
    <ul className="mt-3 list-disc space-y-1.5 pl-5 text-[14.5px] leading-relaxed text-[--color-fg-muted]">
      {children}
    </ul>
  );
}

export function Strong({ children }: { children: ReactNode }) {
  return <strong className="font-semibold text-[--color-fg]">{children}</strong>;
}

export function OL({ children }: { children: ReactNode }) {
  return (
    <ol className="mt-3 list-decimal space-y-1.5 pl-5 text-[14.5px] leading-relaxed text-[--color-fg-muted]">
      {children}
    </ol>
  );
}

/** Comparison / feature tables. Pass fully-formed <thead>/<tbody> children;
 *  the wrapper provides the horizontal-scroll container so wide tables never
 *  break the mobile viewport. */
export function Table({ children }: { children: ReactNode }) {
  return (
    <div className="mt-4 overflow-x-auto rounded-lg border border-[--color-border]">
      <table className="w-full min-w-[560px] border-collapse text-left text-[13.5px] leading-relaxed [&_td]:border-t [&_td]:border-[--color-border] [&_td]:px-3.5 [&_td]:py-2.5 [&_td]:align-top [&_td]:text-[--color-fg-muted] [&_th]:bg-[--color-bg-subtle] [&_th]:px-3.5 [&_th]:py-2.5 [&_th]:text-[12px] [&_th]:font-semibold [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-[--color-fg]">
        {children}
      </table>
    </div>
  );
}

/** Callout for caveats and version-sensitive facts. */
export function Note({ children }: { children: ReactNode }) {
  return (
    <div className="mt-4 rounded-lg border border-[--color-border] bg-[--color-bg-subtle] px-4 py-3 text-[13.5px] leading-relaxed text-[--color-fg-muted]">
      {children}
    </div>
  );
}