Skip to main content

Documentation Index

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

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

​
Testimonials Page

The Testimonials page (/testimonials) is reached via the navigation label “Peer Reports”. It uses the PolaroidTestimonials component to present professional endorsements as a scattered arrangement of polaroid-style cards. Each card has a slight rotation, a coloured photo placeholder gradient, and handwritten-style attribution text beneath the quote.

​
PolaroidTestimonials Component

PolaroidTestimonials (components/aurora/PolaroidTestimonials.js) renders testimonials as interactive polaroid cards. Key behaviours:
  • Cards are initially scattered across the viewport with individual rotation values applied via CSS transform: rotate().
  • On hover, a card lifts (scale + shadow) and rotates back to 0° for easier reading.
  • The photo area at the top of each polaroid is a placeholder gradient generated from the imageHue value — a CSS hue-rotate degree that shifts a base teal gradient to a unique tint per card.
  • Quote text is displayed in a serif or handwriting font beneath the photo area, with author and role in a smaller monospace style.

​
imageHue Field

imageHue is a CSS hue rotation value (in degrees, 0–360) applied to the base placeholder gradient: 
/* Base gradient (hue: 0°) */
background: linear-gradient(135deg, #2dd4bf, #0f172a);

/* With imageHue: 120 applied */
filter: hue-rotate(120deg);
/* Result: shifts towards green/lime tones */
This gives each polaroid a distinct photo placeholder colour without requiring a real image file.

​
Testimonials Data

// components/aurora/PolaroidTestimonials.js
const testimonials = [
  {
    id: 't1',
    author: 'Dr. E. Vance',
    role: 'Lead Architect @ Nova Systems',
    text: "Brought order to our chaotic frontend architecture. Their ability to see the entire system while sweating the micro-interactions is rare.",
    rotation: -2,   // degrees — slight counter-clockwise tilt
    x: 0,           // % from left
    y: 0,           // % from top
    imageHue: 190,  // teal-blue placeholder
  },
  {
    id: 't2',
    author: 'S. Chen',
    role: 'Product Manager',
    text: "Communicates complex technical constraints with absolute clarity. Never says \"it's impossible\", only \"here are the physics of that request\".",
    rotation: 3,
    x: 20,
    y: 40,
    imageHue: 260,  // violet placeholder
  },
  {
    id: 't3',
    author: 'M. Rodriguez',
    role: 'Senior Developer',
    text: "The cleanest code I've ever inherited. Every module felt like a well-calibrated instrument.",
    rotation: -4,
    x: -20,
    y: 20,
    imageHue: 220,  // blue-indigo placeholder
  },
];
The rotation, x, y, and imageHue values above are the exact defaults from PolaroidTestimonials.js. Adjust them freely to suit your own layout — x and y are applied as pixel offsets via Framer Motion’s animate prop, so negative values move cards left or up from their natural flow position.

​
Testimonial Quotes

Dr. E. Vance — Lead Architect @ Nova Systems

“Brought order to our chaotic frontend architecture. Their ability to see the entire system while sweating the micro-interactions is rare.”

S. Chen — Product Manager

“Communicates complex technical constraints with absolute clarity. Never says ‘it’s impossible’, only ‘here are the physics of that request’.”

M. Rodriguez — Senior Developer

“The cleanest code I’ve ever inherited. Every module felt like a well-calibrated instrument.”

​
Data Shape Reference

FieldTypeDescription
idstringUnique identifier (e.g. 't1').
authorstringReviewer’s name, displayed beneath the quote in small caps.
rolestringJob title and company of the reviewer.
textstringThe testimonial quote body. No need to add quotation marks — the component wraps the text in styled quote characters.
rotationnumberCSS rotation in degrees applied to the polaroid card. Negative = counter-clockwise. Typical range: -5 to +5.
xnumberHorizontal position of the card as a percentage of the container width.
ynumberVertical position of the card as a percentage of the container height.
imageHuenumberCSS hue-rotate value (0–360°) applied to the placeholder photo gradient at the top of the polaroid.

​
Adding a Testimonial

1

Open PolaroidTestimonials.js

The testimonials array is at the top of components/aurora/PolaroidTestimonials.js.
2

Append a new object

Add a new entry with id, author, role, and text. Optionally set rotation, x, y, and imageHue.
3

Adjust layout positions

If you have four or more cards, redistribute the x/y values so cards don’t overlap. A simple grid pattern (e.g. three columns at x: 15, 45, 75) works well as a starting point.
Keep rotation values small (±1° to ±4°). Larger rotations can make text harder to read before hover and reduce the sense of authenticity that makes the polaroid metaphor convincing.

Build docs developers (and LLMs) love

Get started for freeTalk to us