Skip to main content

Documentation Index

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

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

The Case Studies page (/case-studies) is titled “Mission Reports” in the template, with the subtitle “Deep dives into complex orbital mechanics (and web apps).” Unlike the Projects page which gives each entry a card, Case Studies presents a single extended article-style layout for each in-depth project breakdown. The template ships with one example case study — “Project Supernova: Legacy Migration” — and is designed to be extended with additional entries.

​
Layout overview

The page is constrained to max-w-4xl mx-auto py-12. Each case study is an <article> wrapped in motion.div with a glass-panel rounded-3xl overflow-hidden border-aurora-green/20 container. The article divides into two visual zones:
  1. Header block — A bg-space-800/80 p-8 md:p-12 border-b border-white/5 section with an aurora-green glow orb in the top-right corner. Contains the mission status badge, title, and lead paragraph.
  2. Content body — A p-8 md:p-12 space-y-12 section with three sub-sections: Problem & Goal grid, Development Process timeline, and Mission Results metrics grid.

​
Article entrance animation

The motion.article uses initial={{ opacity: 0, y: 20 }} → animate={{ opacity: 1, y: 0 }} — a simple fade-up on page load with no delay, so the content is immediately readable.

​
Header block

The mission status badge is an inline flex pill with bg-aurora-green/10 text-aurora-green px-3 py-1 rounded-full text-sm font-mono. It contains an animate-pulse green dot and the text “Mission Status: Complete”. The title uses font-display font-bold at text-3xl md:text-4xl. An absolutely-positioned w-64 h-64 bg-aurora-green/10 rounded-full filter blur-[80px] glow sits in the corner.

​
Problem & Goal grid

A grid md:grid-cols-2 gap-8 layout presents the problem and goal side by side on desktop, stacked on mobile:
  • Problem column — Icon: Target in text-cosmic-magenta, header “The Problem” in text-cosmic-magenta font-display font-bold, body in text-slate-400
  • Goal column — Icon: Zap in text-aurora-turquoise, header “The Goal” in text-aurora-turquoise font-display font-bold, body in text-slate-400

​
Development Process timeline

A vertical numbered timeline uses a CSS before: pseudo-element for the connecting line: before:bg-gradient-to-b before:from-aurora-green before:to-transparent. Each step is a flex row with:
  • A numbered circle (bg-aurora-green, bg-aurora-teal, bg-cosmic-violet for steps 1, 2, 3)
  • A glass-panel p-4 rounded-xl card with a bold step title and description
On md: screens, odd-numbered steps reverse their flex direction (md:odd:flex-row-reverse) and the numbered circle is offset with md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 to create an alternating left-right layout. On mobile, all steps stack left-aligned. 
Mobile:                    Desktop:
○ Step 1 card              card ← ○ → card
○ Step 2 card                    ○
○ Step 3 card              card ← ○ → card

​
Mission Results metrics

The results section uses bg-aurora-green/5 border border-aurora-green/20 rounded-2xl p-6 md:p-8. The header shows a CircleCheck icon in text-aurora-green. Results are displayed in a grid grid-cols-2 md:grid-cols-4 gap-4 grid of stat blocks, each with:
  • A large metric in text-3xl font-bold text-aurora-green
  • A label in text-xs text-slate-400 uppercase tracking-wider

​
Color tokens used

ElementToken / class
Article borderborder-aurora-green/20
Status badgebg-aurora-green/10 text-aurora-green
Animated status dotbg-aurora-green animate-pulse
Header glowbg-aurora-green/10 blur-[80px]
Problem icon / headertext-cosmic-magenta
Goal icon / headertext-aurora-turquoise
Timeline linefrom-aurora-green to-transparent
Step 1 circlebg-aurora-green text-space-900
Step 2 circlebg-aurora-teal text-space-900
Step 3 circlebg-cosmic-violet text-white
Results sectionbg-aurora-green/5 border-aurora-green/20
Results metricstext-aurora-green
Page heading gradientfrom-aurora-green to-aurora-turquoise

​
Customization guide

1

Edit the example case study

The template article is “Project Supernova: Legacy Migration.” Start by replacing the header text, lead paragraph, and the Problem/Goal column descriptions with your own project details:
// Header block
<h2 className="text-3xl md:text-4xl font-display font-bold text-white mb-4">
  Your Project Name: What You Built {/* ← change this */}
</h2>
<p className="text-lg text-slate-300 max-w-2xl">
  One paragraph overview of the project scope and outcome. {/* ← change this */}
</p>
2

Update the mission status badge

Change “Mission Status: Complete” to reflect the project’s actual status:
<div className="inline-flex items-center space-x-2
                bg-aurora-green/10 text-aurora-green
                px-3 py-1 rounded-full text-sm font-mono mb-6">
  <span className="w-2 h-2 rounded-full bg-aurora-green animate-pulse" />
  <span>Mission Status: Complete</span> {/* ← "In Progress", "Shipped", etc. */}
</div>
3

Edit the Development Process steps

The three process steps are hardcoded in the JSX. Update the <h4> title and <p> description for each numbered step. The circle colors are also hardcoded: bg-aurora-green → bg-aurora-teal → bg-cosmic-violet. Add or remove step blocks to match your actual process:
{/* Step block — duplicate and modify for each process step */}
<div className="relative flex items-center justify-between
                md:justify-normal md:odd:flex-row-reverse group">
  <div className="flex items-center justify-center w-10 h-10
                  rounded-full border-4 border-space-900 bg-aurora-green
                  text-space-900 font-bold z-10 shadow shrink-0
                  md:order-1 md:group-odd:-translate-x-1/2
                  md:group-even:translate-x-1/2">
    1
  </div>
  <div className="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)]
                  glass-panel p-4 rounded-xl">
    <h4 className="font-bold text-white mb-1">Step Title</h4>
    <p className="text-sm text-slate-400">Step description.</p>
  </div>
</div>
4

Replace the outcome metrics

The four result metrics are static JSX. Replace the number and label strings with your actual measurable outcomes:
<div className="text-center">
  <div className="text-3xl font-bold text-aurora-green mb-1">
    40% {/* ← your metric */}
  </div>
  <div className="text-xs text-slate-400 uppercase tracking-wider">
    Conversion Rate Lift {/* ← your label */}
  </div>
</div>
5

Add a second case study

The page is structured to hold multiple <motion.article> blocks in a space-y-16 wrapper. Duplicate the entire article JSX block, change the content, and the page will stack them vertically. Consider using different accent colors (e.g. aurora-teal or cosmic-violet instead of aurora-green) for the second case study to distinguish them visually.
If your process had more than three steps, add additional step blocks with incrementing circle colors. After cosmic-violet (step 3), use aurora-turquoise (step 4) and cosmic-magenta (step 5) to stay within the template’s color palette.

Build docs developers (and LLMs) love

Get started for freeTalk to us