Testimonials.tsx

The Testimonials component displays customer testimonials from Twitter/X in an infinite scrolling marquee. It fetches content from the locale file and renders embedded tweets with gradient fade effects.

Usage

Basic Implementation

import { Testimonials } from '@/components/Testimonials';

export default function HomePage() {
  return (
    <main>
      <Testimonials />
    </main>
  );
}

Locale Configuration

Configure testimonials in locales/en.json:

{
  "homePage": {
    "testimonialsSection": {
      "title": "What our customers say",
      "description": "Real feedback from real users",
      "cta": {
        "text": "Share your feedback",
        "href": "https://twitter.com/intent/tweet?text=@yourusername"
      },
      "testimonials": [
        { "tweetId": "1234567890123456789" },
        { "tweetId": "9876543210987654321" },
        { "tweetId": "1111222233334444555" }
      ]
    }
  }
}

Features

• Twitter/X Integration: Embeds real tweets using tweet IDs
• Infinite Scroll: Marquee animation with configurable speed
• Pause on Hover: Users can pause scrolling to read testimonials
• Gradient Fade: Smooth fade effects on left and right edges
• Responsive Design: Adapts to all screen sizes
• CTA Button: Links to Twitter for users to share feedback

Implementation Details

Marquee Configuration

The component uses the Marquee component with these settings:

• pauseOnHover - Pauses animation when user hovers
• repeat={4} - Repeats testimonials 4 times for seamless loop
• [--duration:35s] - 35-second animation duration
• [--gap:3rem] - 3rem gap between testimonials

Tweet Component

Each testimonial is rendered using the Tweet component:

<Tweet id={testimonial.tweetId} />

The Tweet component handles:

• Fetching tweet data from Twitter/X API
• Rendering tweet content, author, and metadata
• Responsive layout and styling

Gradient Overlays

The component adds gradient overlays to create fade effects:

{/* Left fade */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-[15%] bg-gradient-to-r from-surface" />

{/* Right fade */}
<div className="pointer-events-none absolute inset-y-0 right-0 w-[15%] bg-gradient-to-l from-surface" />

Customization

Changing Animation Speed

Modify the --duration CSS variable:

<Marquee
  pauseOnHover
  repeat={4}
  className="[--duration:20s] [--gap:3rem]"
>
  {/* testimonials */}
</Marquee>

Adjusting Repeat Count

Change the repeat prop for more or fewer loops:

<Marquee
  pauseOnHover
  repeat={6}
  className="[--duration:35s] [--gap:3rem]"
>
  {/* testimonials */}
</Marquee>

Custom Gradient Width

Adjust the gradient overlay width:

<div className="pointer-events-none absolute inset-y-0 left-0 w-[25%] bg-gradient-to-r from-surface" />
<div className="pointer-events-none absolute inset-y-0 right-0 w-[25%] bg-gradient-to-l from-surface" />

Getting Tweet IDs

To add testimonials:

1. Find the tweet on Twitter/X
2. Copy the tweet URL (e.g., https://twitter.com/user/status/1234567890123456789)
3. Extract the ID from the URL (the numbers at the end)
4. Add to locales/en.json:

{
  "testimonials": [
    { "tweetId": "1234567890123456789" }
  ]
}

Styling

The component uses Tailwind CSS with custom design tokens:

• bg-surface - Background color for gradient fades
• Full-width layout with max-w-full w-full
• Responsive padding: px-20 max-md:px-7

Related

• Marquee.tsx - Infinite scroll component
• Section.tsx - Section wrapper
• SectionHeader.tsx - Header component