Skip to main content

Documentation Index

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

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

The Testimonials page forgoes the conventional carousel or card stack in favour of something far more Y2K: a phpBB-style internet forum thread. Each recommendation is a “forum post” with a left-column user profile (username, role badge, pixel-art avatar, post count, join date) and a right-column message body. The MessageCircle, MessageSquare, and Star Lucide icons are associated with this section.

​
Purpose

This page provides social proof from clients, colleagues, or collaborators. The forum layout is both thematic and clever — it positions testimonials as organic, community-generated praise rather than polished marketing copy, which tends to feel more authentic. The humorous usernames and fictional post counts add to the site’s self-aware personality.

​
Layout and Structure

The page is a max-w-5xl mx-auto single column. A two-part header shows the "What Internet Strangers Say" heading in text-3xl font-bold text-win-teal and a breadcrumb-style subtitle: "Forum Index > General Discussion > Testimonials". A win98-button labelled "Post Reply" sits in the top-right corner. Below the header, the forum thread table is a border-2 border-win-gray shadow-bevel-outset container:
  • Column header bar: bg-win-blue text-white font-bold text-sm with two labelled columns: “Author” (fixed w-48) and “Message” (flex-grow).
  • Post rows: Alternating bg-white / bg-gray-50 rows, each split into:
    • Author column (bg-[#f8f8f8], border-r): username in font-bold text-win-blue text-lg, role label in text-xs text-gray-600, a w-24 h-24 pixel-art avatar image, and a text-[10px] stats block showing Posts and Joined date.
    • Message column: A bg-[#f0f0f0] meta strip at the top (post date, "NEW!" badge for recent entries), the testimonial text in font-times text-sm leading-relaxed, an optional font-courier signature below a --- separator, and a [Reply] | [Quote] action bar at the bottom.
  • Thread footer: A bg-win-gray strip with a win98-button “Top” link.
The "NEW!" badge on recent posts uses text-y2k-pink font-pixel text-[8px] animate-blink. It renders when a post’s isNew field is true. Use this flag to highlight the most recently added testimonial.

​
Testimonial Data Structure

{
  id: 1,
  username: "xX_CodeMaster_Xx",
  role: "Administrator",
  posts: 1337,
  joined: "Jan 1999",
  date: "Today, 14:32 PM",
  isNew: true,
  content: "I hired this dev to rebuild my Geocities fan page...",
  signature: "--- \nBest viewed in 800x600 resolution."
}
The three default testimonial entries are:
UsernameRolePostsisNew
xX_CodeMaster_XxAdministrator1337true
DesignGuru99Member42false
NoobSaibotNewbie3false

​
How to Customize

1

Add real testimonials

Replace the placeholder entries in the data array with real quotes. Use actual names or initials in the username field, and set role to something meaningful (e.g. “Client”, “Engineering Manager”, “Collaborator”). Keep posts and joined as fun fictional values for the retro feel.
2

Update avatars

Avatars pull from DiceBear’s pixel-art style seeded by entry.username. Change the seed to any string for a different generated avatar, or replace the <img src> with a real headshot URL.
3

Add or remove the signature block

The signature field is optional — if it is an empty string or null, the signature block is not rendered. Use it for a real LinkedIn profile URL or a brief title, or omit it entirely.
4

Change the forum breadcrumb

The subtitle "Forum Index > General Discussion > Testimonials" is a plain text string in the header. Rename it to fit the tone you want — or replace it with a short description of who left these testimonials.
The "Post Reply" button in the header currently does nothing. You could wire it up to open the Contact page in a new modal, or link it directly to "#/contact" so interested visitors can leave their own message.

Build docs developers (and LLMs) love

Get started for freeTalk to us