Skip to main content

Documentation Index

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

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

The Whispers page (/testimonials) renders the TestimonialsPage component (Qe) — a three-column grid of parchment cards that behave like physical notes pinned to a corkboard. Each card rests at a slight tilt in its default state; hovering snaps it upright, lifts it off the surface, and illuminates a candle tucked beside it.

​
Route

/testimonials → TestimonialsPage (Qe)

​
Page Structure

The page is wrapped in max-w-5xl mx-auto py-12. A centered header block renders “Whispers from the Coven” in font-heading text-5xl and the subtitle “Words from past collaborators.” in font-code. Below that, a grid md:grid-cols-3 gap-8 holds the three testimonial cards.

​
Card Anatomy

Each grid cell is a motion.div that owns the hover state and contains two children:

​
1. Parchment Note

A motion.div styled with parchment-bg p-8 border rounded-sm relative z-10 origin-top. The animate prop drives all three visual states simultaneously: 
animate={{
  rotate: isHovered ? 0 : index % 2 === 0 ? -2 : 2,
  y: isHovered ? -10 : 0,
  scale: isHovered ? 1.05 : 1,
}}
transition={{ type: "spring", stiffness: 200, damping: 20 }}
  • Default — odd-indexed cards tilt +2°, even-indexed cards tilt −2°.
  • Hovered — rotation resets to 0, card lifts y: -10, and scale grows to 1.05.
The border transitions from border-witch-plum/30 to border-witch-amber with a shadow-[0_10px_30px_rgba(0,0,0,0.5)] depth shadow when hovered. A push-pin dot sits at the top center of the card: absolute -top-2 left-1/2 -translate-x-1/2 w-3 h-3 rounded-full bg-witch-dark border border-witch-plum shadow-sm. Inside the card:
  • Quote — font-body italic text-lg leading-relaxed text-witch-moonlight/90, wrapped in typographic " " quotation marks.
  • Attribution — font-code text-xs text-witch-turquoise/80 text-right uppercase tracking-wider, prefixed with an em dash.

​
2. Candle

A Candle component is absolutely positioned at bottom-[-40px] right-[-16px] beneath and beside the card, wrapped in a motion.div that fades in (opacity: 0 → 1) with a duration: 0.3 transition when the card is hovered: 
animate={{ opacity: isHovered ? 1 : 0 }}
The candle is non-interactive (pointer-events-none) so it does not interfere with the card’s hover zone.

​
Testimonial Data

const testimonials = [
  {
    id: 1,
    quote:
      "She didn't just fix the bugs, she banished them entirely. The codebase feels lighter, almost as if a curse was lifted.",
    author: "Lead Engineer, Ethereal Systems",
  },
  {
    id: 2,
    quote:
      "Her UI components are pure enchantment. Users are captivated, and the accessibility is flawless.",
    author: "Product Manager, Arcane Analytics",
  },
  {
    id: 3,
    quote:
      "I thought our deployment pipeline was doomed. She drew a few diagrams, muttered something about Docker, and suddenly we were shipping daily.",
    author: "CTO, Startup Void",
  },
];

​
Interaction Summary

StateRotationY OffsetScaleBorderCandle
Default (even index)−2°01.0witch-plum/30Hidden
Default (odd index)+2°01.0witch-plum/30Hidden
Hovered0°−10px1.05witch-amberVisible

​
Customization

​
Adding a New Testimonial

Append an entry to the testimonials array. The grid automatically adds a new column (or wraps to a second row once there are more than three on md viewports): 
{
  id: 4,
  quote:
    "The refactor was surgical. She removed five hundred lines of code and nothing broke. I still don't fully understand how.",
  author: "Staff Engineer, Phantom Labs",
},
The tilt direction alternates by index (index % 2 === 0). With four cards the fourth will tilt −2° (same direction as the first). If you want a specific card to tilt the other way, swap the index check for a per-entry tilt field.

​
Adjusting the Tilt Angle

The ±2 degree values are set directly in the animate prop. To make cards feel more scattered, increase the magnitude: 
rotate: isHovered ? 0 : index % 2 === 0 ? -4 : 4,
Keep values under ±8° — beyond that the push-pin illusion breaks and the text becomes hard to read.

Build docs developers (and LLMs) love

Get started for freeTalk to us