Reviews Section

The Reviews section component creates an engaging, auto-scrolling testimonial showcase with smooth animations and interactive hover effects. Perfect for displaying social proof and customer feedback in a modern, dynamic way.

Overview

Key features of the Reviews section:

• Infinite smooth scrolling animation
• Pause on hover interaction
• Responsive card design
• Automatic content duplication for seamless loops
• GSAP-powered animations
• Accessible structure

Basic Implementation

1
---
2
import Reviews from '@/components/NST-components/sections/reviews/Reviews.astro';
3
import { reviewsData } from './your-reviews-data';
4
---
5

6
<Reviews data={reviewsData} />

Data Structure

The Reviews component expects an array of review objects with the following structure:

1
interface Review {
2
  author: string;
3
  role: string;
4
  content: string;
5
  image: string;
6
}
7

8
const reviews: Review[] = [
9
  {
10
    author: 'Sarah Johnson',
11
    role: 'Marketing Director',
12
    content: 'This product has transformed how we work. Absolutely incredible results!',
13
    image: '/testimonials/person1.jpg',
14
  },
15
  // ... additional reviews
16
];

Animation Features

Auto-Scrolling

The component implements smooth, continuous scrolling using GSAP:

• Automatic calculation of scroll speed based on content width
• Seamless infinite loop through content duplication
• Smooth acceleration and deceleration
• Performance-optimized using will-change transform

Hover Interaction

1
// Animation automatically pauses on hover
2
reviewsTrack.addEventListener('mouseenter', () => {
3
  // Smooth pause transition
4
});
5

6
reviewsTrack.addEventListener('mouseleave', () => {
7
  // Smooth resume transition
8
});

Styling Customization

Card Styling

1
<Reviews class="custom-reviews-section" cardClass="custom-review-card" />

CSS Custom Properties

1
.custom-reviews-section {
2
  --review-card-width: 400px;
3
  --review-card-gap: 2rem;
4
  --review-scroll-speed: 50;
5
  --review-gradient-fade: 15%;
6
}

Accessibility Features

• Proper image alt text for reviewer photos
• Semantic HTML structure
• Reduced motion support
• ARIA labels for dynamic content
• Keyboard pause controls

Best Practices

1. Content Guidelines

   • Keep testimonials concise and impactful
   • Include authentic reviewer details
   • Use high-quality profile images
   • Maintain consistent content length

2. Visual Presentation

   • Ensure readable text contrast
   • Optimize image sizes
   • Maintain consistent card heights
   • Use appropriate spacing

3. Performance Optimization

   • Lazy load images
   • Optimize animation performance
   • Consider reduced motion preferences
   • Monitor scroll performance

Common Customizations

Custom Card Layout

1
<Reviews>
2
  <template slot="review-card">
3
    {
4
      (review) => (
5
        <div class="custom-review-layout">
6
          <img src={review.image} alt={review.author} />
7
          <div class="content">
8
            <p>{review.content}</p>
9
            <cite>{review.author}</cite>
10
          </div>
11
        </div>
12
      )
13
    }
14
  </template>
15
</Reviews>

Animation Speed Control

1
<Reviews scrollSpeed={75} Adjust scroll speed pauseOnHover={false} Disable pause on hover />

Technical Details

Animation Implementation

The component uses GSAP for smooth animations:

1
const scrollTween = gsap.to(reviewsTrack, {
2
  x: `-${totalWidth}px`,
3
  duration: totalWidth / scrollSpeed,
4
  ease: 'none',
5
  repeat: -1,
6
});