Добавляем отзывы пользователей на лендинг SaaS-приложения с помощью Next.js и Tailwind

Почему важны пользовательские отзывы?

Когда посетители доходят до середины лендинга, они начинают задумываться о доверии продукту. Именно здесь важную роль играют отзывы реальных пользователей.

Отзывы помогают:

• укрепить доверие;
• снизить сомнения;
• увеличить конверсию.

Многие успешные компании активно используют отзывы клиентов для повышения своей репутации.

Структура компонентов

Для удобства поддержки кода разделим секцию отзывов на отдельные компоненты. Пример структуры папок:

components/
testimonials/
    Testimonials.tsx
    TestimonialCard.tsx

Это позволит легко масштабировать секцию при необходимости добавления новых отзывов.

Компонент карточек отзывов

Простой пример компонента карточки отзыва выглядит так:

export function TestimonialCard({ name, role, quote, avatar }) {
  return (
    <div className="p-6 border rounded-xl bg-white shadow-sm">
      <p className="text-gray-600 italic">"{quote}"</p>
      <div className="flex items-center mt-6 gap-3">
        <img src={avatar} className="w-10 h-10 rounded-full" />
        <div>
          <div className="font-semibold">{name}</div>
          <div className="text-sm text-gray-500">{role}</div>
        </div>
      </div>
    </div>
  );
}

Компонент отображает цитату, аватар пользователя, его имя и должность.

Создание отзывчивого грида отзывов

Теперь разместим несколько карточек отзывов внутри адаптивного грида:

export default function Testimonials() {
  return (
    <section className="py-24">
      <div className="grid md:grid-cols-3 gap-8">
        <TestimonialCard />
        <TestimonialCard />
        <TestimonialCard />
      </div>
    </section>
  );
}

Такая структура обеспечивает чистоту дизайна, адаптацию под разные устройства и визуальную сбалансированность.