Skip to main content

​
Overview

The Testimonials component displays a carousel of testimonials from portfolio company founders. It uses the Glide.js library for smooth sliding animations and supports both mouse/touch navigation and keyboard arrow keys.

​
Props Interface

​
setScrollEnabled
(enabled: boolean) => void
required
Callback to disable page-level scrolling during touch interactions with the carousel

​
Data Structure

Each testimonial has the following structure: 
interface Quote {
  quote: string;    // Testimonial text
  author: string;   // Founder name
  company: string;  // Company name
  link: string;     // Company URL (optional in interface, present in data)
}

​
Features

​
Glide.js Integration

The component initializes a Glide carousel with these settings: 
const glide = new Glide('.glide', {
  type: 'carousel',      // Infinite loop
  startAt: 0,            // First testimonial
  perView: 1,            // One quote at a time
  autoplay: false,       // Manual navigation only
});
The carousel loops infinitely, allowing users to navigate continuously through all 23 testimonials.

​
Keyboard Navigation

Arrow keys trigger visual feedback on the navigation buttons: 
useEffect(() => {
  const handleArrow = (event: { key: String; }) => {
    if (event.key === "ArrowLeft") {
      const leftArrow = document.getElementById("left-arrow");
      leftArrow.classList.add('scale-95', 'opacity-50');
      setTimeout(() => {
        leftArrow.classList.remove('scale-95', 'opacity-50');
      }, 300);
    }
    // Similar for ArrowRight
  };
  window.addEventListener('keydown', handleArrow);
}, []);

​
Touch Scroll Prevention

Prevents page scrolling during carousel swipe gestures: 
const handleTouchMove = (e: TouchEvent) => {
  e.preventDefault();
};
testimonial.addEventListener('touchmove', handleTouchMove, { passive: false });

​
Usage Example

From page.tsx:329-333: 
import Testimonials from '@/components/Testimonials';

function TestimonialsSection() {
  const [scrollEnabled, setScrollEnabled] = useState(true);

  return (
    <div className="bg-offwhite min-h-screen flex flex-col">
      <Testimonials setScrollEnabled={setScrollEnabled} />
    </div>
  );
}

​
Testimonial Content

The component includes 23 testimonials from founders at:

Early Stage

  • Tabular (Ryan Blue)
  • Clay (Kareem Amin)
  • Temporal (Maxim Fateev)
  • Railway (Jake Cooper)
  • E2B (Vasek Mlejnsky)

Growth Stage

  • Verkada (Raj Misra)
  • Athelas/Commure (Tanay Tandon)
  • Hadrian (Chris Power)
  • PostHog (James Hawkins)
  • Warp (Zach Lloyd)

Acquired

  • Tabular → Databricks (Ryan Blue)
  • AlpacaML → Captions (Nicole Fitzgerald)

International

  • Rerun (Moritz Schiebold - European roots)
  • Houm (Benjamin Labra - Latin America)

​
Component Structure

<div className="glide__arrows flex gap-6" data-glide-el="controls">
  <div className="glide__arrow--left" data-glide-dir="<">
    <button id="left-arrow" className="arrow-container">
      <Image src="/images/left.svg" alt="left arrow" />
    </button>
  </div>
  <div className="glide__arrow--right" data-glide-dir=">">
    <button id="right-arrow" className="arrow-container">
      <Image src="/images/right.svg" alt="right arrow" />
    </button>
  </div>
</div>

​
Interactions

​
Responsive Design

Text Sizing (responsive breakpoints):
  • md:text-b2xs (small tablets)
  • lg:text-bxs (tablets)
  • xl:text-bsm (laptops)
  • 2xl:text-bmd (large desktops)
Layout:
  • Width: 80% of container (w-4/5)
  • Heading: “Founders” in font-arya
  • Quote text: font-bitter with generous line height
  • Author: font-semibold
  • Company: font-bitter-italic with hover underline
Arrow Buttons:
  • Size: w-10 h-10 on mobile, 2xl:w-12 2xl:h-12 on large screens
  • Gap: gap-3 on mobile, lg:gap-6 on large screens

​
Example Testimonials

“Quality is really what really sets Liu apart from other investors. Working with Liu was unique because she was extremely proactive. She was my first call, and she was always trying to find ways to help, not just relying on me to think about what I needed.”
Ryan Blue, Tabular (acquired by Databricks)
“Liu is the best kind of investor: she is technical, understands product deeply, and can quickly understand the big picture. She’s really well connected with top talent and investors. She’ll help when she’s needed and give you space to operate otherwise.”
Kareem Amin, Clay
“Liu has been an invaluable investor for Warp, going way beyond just investing money. She invested a bunch of her time helping us with GTM, Growth, and Product. She is more willing and able than most investors to roll up her sleeves and help the leadership team operate.”
Zach Lloyd, Warp

​
Styling Details

  • Container: Full width flex column with centered content
  • Background: bg-offwhite
  • Text color: text-dark-green
  • Heading size: text-tmd to text-txl (responsive)
  • Quote text: Line height scales with breakpoints (md:leading-lg, etc.)
  • Hover states: Company links underline with decoration-[1px]

​
Dependencies

{
  "@glidejs/glide": "^3.x",
  "next/image": "Next.js Image component"
}
Required CSS: 
import '@glidejs/glide/dist/css/glide.core.min.css';
import '@glidejs/glide/dist/css/glide.theme.min.css';

​
Source Reference

Component: src/components/Testimonials.tsx (317 lines) Key Features:
  • Glide.js carousel with infinite loop
  • Keyboard navigation with visual feedback
  • Touch event handling for mobile
  • 23 founder testimonials with company links

Build docs developers (and LLMs) love

Get started for freeTalk to us