Fullmetal.Finance — marketing site

The landing page and writing/blog for Fullmetal.Finance — the collateral efficiency layer for institutional finance (an execution venue and collateral management protocol for OTC derivatives).

This repo is only the marketing site. Demo apps live in separate repos and deploy to their own subdomains (e.g. demo.fullmetal.finance); this site just links out to them.

Stack

• Next.js 16 (App Router) · React 19 · TypeScript
• Tailwind CSS v4 (configured via @theme in app/globals.css)
• Markdown-driven blog: gray-matter + marked
• Statically rendered — every route is prerendered at build (output: static-friendly)
• Deploy target: Vercel

⚠️ This is Next.js 16. Some APIs differ from older versions — notably the dynamic request APIs (params, searchParams, cookies(), headers()) are async and must be awaited. See AGENTS.md. This site is static and doesn't use them, but keep it in mind when extending.

Quick start

npm install
npm run dev      # http://localhost:3000

Script	What it does
npm run dev	Dev server with hot reload
npm run build	Production build (prerenders routes)
npm run start	Serve the production build locally
npm run lint	ESLint

Project structure

app/
  layout.tsx              Root layout — metadata, JSON-LD (Organization), fonts
  page.tsx                Home (hero + footer)
  globals.css             Design tokens, theme, .eyebrow + .prose styles
  icon.png                Favicon (auto-detected by Next)
  robots.ts               → /robots.txt
  sitemap.ts              → /sitemap.xml (includes blog posts)
  writing/
    page.tsx              /writing — blog tile grid
    [slug]/page.tsx       /writing/<slug> — full post (SSG)
  components/
    Hero.tsx              Hero shell (server)
    HeroLattice.tsx       Animated lattice — the ONLY client component
    Nav.tsx               Hero nav overlay
    SiteHeader.tsx        Compact header for non-hero pages (/writing)
    Logo.tsx              Brand lockup (nav)
    Footer.tsx            Footer (logo, links, contact)
content/
  writing/<slug>.md       Blog posts (Markdown + frontmatter)
lib/
  site.ts                 Central config — URLs, nav, contact, OG
  posts.ts                Blog content pipeline (server-only; uses fs)
public/
  writing/<slug>/         Per-post images (covers, inline)
  logo*.png, sui-logo.png, favicon.png, ...

Configuration

Most copy/links live in lib/site.ts — edit URLs, nav items, and contact details there rather than hunting through components:

• SITE — name, url, description, tagline, OG image
• NAV_LINKS — top-nav / footer links (external: true opens in a new tab)
• LINKS — primary CTA targets (demo, writing, docs)
• CONTACT — email, Telegram, X

Adding a writing post

A post is a Markdown file plus its images. For slug my-post:

1. Markdown → content/writing/my-post.md:

   ---
   title: "Your title"
   date: "2026-06-15"        # ISO yyyy-mm-dd; controls sort order (newest first)
   author: "Adrija"
   excerpt: "One–two sentence summary shown on the tile and in SEO/OG."
   cover: "/writing/my-post/cover.png"
   ---
   
   Your Markdown body. GitHub-flavored Markdown is supported
   (headings, lists, tables, code, blockquotes, images, links).
   

2. Images → public/writing/my-post/ (e.g. cover.png, plus any inline images you reference from the body as /writing/my-post/<file>).

That's it — the post appears at /writing/my-post and on the /writing index automatically (routes are generated from the files at build via generateStaticParams; unknown slugs 404). Reading time is computed from word count.

There's a starter post (the-case-for-smart-collateral) with a placeholder cover — delete it or replace its content + public/writing/the-case-for-smart-collateral/cover.png once you have real posts.

Assets & logos

Drop images in public/ (served from /). The nav and footer use transparent-background logos (logo-transparent.png, fullmetal-footer-transparent.png) so they sit cleanly on the page color in both light and dark mode; dark:invert flips the grayscale marks to light for dark mode.

Those transparent versions were generated from the originals (logo.png, fullmetal-footer-logo.png) by keying out the flat background. If you replace a logo with a new flat-background image, re-key it (or export a natively transparent PNG). The originals are kept for reference.

next/image is used for all images and only works with local /public paths out of the box; to load images from an external host, add an images.remotePatterns entry in next.config.ts.

SEO

• Metadata via the Next metadata API in layout.tsx and per-page (title template, description, OpenGraph, Twitter card, canonical).
• schema.org/Organization JSON-LD in the root layout.
• app/robots.ts and app/sitemap.ts generate /robots.txt and /sitemap.xml (the sitemap includes every writing post).
• Semantic HTML (h1/h2/nav/main/footer), next/image with alt text, server components by default.

The hero animation

HeroLattice.tsx renders an animated body-centered-cubic lattice (SVG + SMIL). It's the only client component. The markup is rendered into the initial HTML (not injected via innerHTML after mount) so the browser parses the SMIL timeline natively. Theming uses currentColor, and it respects prefers-reduced-motion. On mobile it renders as a band above the copy; on desktop it occupies the right side behind a fade.

Deploying

Push to a Vercel project — no extra config. The custom domain is fullmetal.finance. Build command next build, output is prerendered static HTML.