Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/the-craft/llms.txt

Use this file to discover all available pages before exploring further.

The Case Studies page is the grimoire’s deep-archive — a two-page spread styled as an open book where each side of the spread tells a different chapter of the same project story. The starter kit ships one fully-rendered sample case study (“The Ethereal Migration”) to demonstrate the layout and visual language. All narrative text, headings, and metrics are live in assets/CaseStudies.js; replace them with your own project stories before deploying.
This page is a starting-point template. The sample content is drawn from the Ethereal Systems work history entry. Replace every heading, paragraph, and metric with your own real project story before deploying.

​
What the Page Renders

CaseStudies.js wraps everything in a PageTransition component and a perspective-1000 outer container. Inside, a motion.div performs a dramatic entry animation: 
<motion.div
  initial={{ rotateX: 20, y: 50, opacity: 0 }}
  animate={{ rotateX: 0, y: 0, opacity: 1 }}
  transition={{ duration: 1, type: "spring" }}
  className="w-full h-full flex flex-col md:flex-row shadow-[0_20px_50px_rgba(0,0,0,0.8)] rounded-lg overflow-hidden"
>
The spring entrance rotates the spread into view from a tilted angle, as if an invisible hand has placed the open tome on the table in front of you.

​
Layout — The Open Book Spread

The spread is a flex flex-col md:flex-row container with two equal flex-1 panels, both using parchment-texture backgrounds. A narrow gradient strip (w-12 bg-gradient-to-r from-transparent via-midnight/40 to-transparent) sits at left-1/2 -translate-x-1/2 on desktop to simulate the book’s spine shadow.
The left page holds the case study narrative. The sample content includes:
  • A drop-cap "I" rendered with float-left text-6xl font-cinzel text-blood inside the first paragraph
  • An opening paragraph describing the client problem
  • A second paragraph describing the approach
  • An <h3> section heading — “The Incantation Strategy” — in Pinyon Script text-blood
  • A <ul> bullet list of strategic decisions
A decorative absolute inset-y-4 right-4 w-px bg-midnight/10 rules line sits at the right edge of the left page (hidden on mobile) to reinforce the printed-book aesthetic.

​
How to Add Case Study Content

Each case study should be modelled as a JavaScript object so you can iterate over them and build a pagination system. Here is a recommended data structure: 
const caseStudies = [
  {
    id: "ethereal-migration",
    title: "The Ethereal Migration",
    client: "Ethereal Systems",
    year: "2023",
    // Left page
    dropCapParagraph:
      "In the year 2023, the grand coven of Ethereal Systems found their primary application cursed by sluggish performance…",
    approachParagraph:
      "My task was clear: a complete transmutation of the frontend architecture…",
    strategyHeading: "The Incantation Strategy",
    strategyPoints: [
      "Incremental adoption using micro-frontends.",
      "Implementation of a strict design system (The Visual Grimoire).",
      "State management overhaul using Zustand for lighter payloads.",
    ],
    // Right page
    outcomeHeading: "The Outcome",
    outcomeParagraph:
      "The ritual was a resounding success. Page load times decreased by 40%…",
    metrics: [
      { value: "40%", label: "Speed Increase" },
      { value: "60%", label: "Dev Velocity" },
    ],
  },
];
Then replace the hard-coded JSX in CaseStudies.js with a render driven by caseStudies[currentIndex], and wire the “Turn Page” button to increment currentIndex.
Keep each left-page narrative to 200–300 words and each right-page outcome to 100–150 words. The fixed aspect-[16/9] container on desktop does not scroll — text that overflows will be clipped. For longer write-ups, remove the fixed aspect ratio and let the spread grow in height.

Build docs developers (and LLMs) love

Get started for freeTalk to us