The Testimonials page reimagines the standard endorsement section by assigning each reviewer a magical familiar — a cat, raven, owl, toad, or bat — rather than using a generic avatar placeholder. Every testimonial is rendered using theDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/web-weaver/llms.txt
Use this file to discover all available pages before exploring further.
Familiar component, which pairs a thematic creature illustration with the quote. On medium and larger screens the components alternate between left- and right-aligned indents, giving the page a staggered, rhythmic layout that prevents the monotony of a plain list.
Route
#/testimonials or click the Testimonials link in the site navigation.
Visual Layout
Familiar Illustration
Each testimonial features a small SVG or icon illustration of its assigned familiar creature (cat, raven, owl, toad, bat). The illustration appears beside the quote block.
Quote Block
The testimonial text is displayed in a styled blockquote. The author’s name and role appear below the quote in smaller, muted type.
Alternating Indent
On
md and larger breakpoints, odd-indexed testimonials indent from the left and even-indexed ones indent from the right. This creates a conversational, back-and-forth visual rhythm down the page.Stacked on Mobile
On small viewports all indents collapse and the testimonials stack in a single centred column, each with the familiar illustration above the quote.
Familiar Types
| Type | Creature | Personality implied |
|---|---|---|
cat | Luna | Meticulous, quality-focused |
raven | Corvus | Technically brilliant, observant |
owl | Archimedes | Wise, forward-thinking |
toad | Barnaby | Practical, problem-solving |
bat | Vlad | Fearless in complex / dark codebases |
Data & Configuration
Testimonials are stored in theq array inside assets/main.js:
Field reference
| Field | Type | Purpose |
|---|---|---|
type | 'cat' | 'raven' | 'owl' | 'toad' | 'bat' | Determines which familiar illustration renders alongside the quote |
quote | string | The testimonial text displayed in the blockquote |
author | string | Reviewer’s (familiar’s) name displayed below the quote |
role | string | Reviewer’s job title or role displayed beneath the name |
Customisation
Edit a testimonial quote
Update the
quote, author, or role fields in the relevant q array object. You can use real testimonials from colleagues or clients — keep the whimsical tone in the quote text if you want to maintain the aesthetic, but real names and roles in the author and role fields are perfectly appropriate.Add a new testimonial
Append a new object to the
q array. Choose a type from the five available familiars. If all five familiar types are already in use, you can reuse a type — multiple testimonials can share the same familiar illustration.Add a new familiar type
Define a new type string (e.g.
'fox') and create the corresponding SVG illustration. Register the new type in the Familiar component’s type-to-illustration map, then use it in the q array.Change the alternating layout threshold
The left/right alternation is controlled by a CSS media query breakpoint in the
Familiar component. By default it activates at md (768 px). Change this to lg to keep the stacked layout on tablets, or to sm to activate alternation on larger phones.Key Components
| Component | Description | Docs |
|---|---|---|
Familiar | Renders a single testimonial with a creature illustration and alternating indent | /components/familiar |
Interactive Behaviour
Alternating indent on medium+ screens
Alternating indent on medium+ screens
The
Familiar component receives its index in the q array as a prop. Even indices render with margin-left: auto (right-aligned) and odd indices with margin-right: auto (left-aligned) on viewports wider than the md breakpoint. This is a pure CSS layout behaviour — no JavaScript state is involved.Scroll-entrance animations (optional)
Scroll-entrance animations (optional)
By default the testimonials render statically. If you want them to animate in as the user scrolls, wrap each
Familiar in a Framer Motion motion.div with whileInView={{ opacity: 1, y: 0 }} and initial={{ opacity: 0, y: 30 }}. Add viewport={{ once: true }} so the animation only fires once per page visit, and set a transition.delay proportional to the index for a staggered effect.The
type field is case-sensitive. Using 'Cat' instead of 'cat' will fail to match the illustration map inside the Familiar component and the illustration will fall back to a default placeholder. Always use lowercase type strings.