Files
topsysops-app/public-site/components/sections/Reviews.jsx
T
ogrechkoandClaude Sonnet 5 30e1aea20b Fix SEO/UX audit gaps: canonical tags, org schema, nav, header claims
Add canonical URLs and a sitewide Organization JSON-LD (linked via @id
to page-specific LocalBusiness/Service/Article schemas), move FAQ and
Reviews into the top nav, attach the 24/7 support claim to a tooltip
on the header badge instead of leaving it unexplained, drop the
unverifiable incidents_resolved stat from the hero terminal animation,
and clean up the empty-reviews state instead of showing a thin
placeholder.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013otXCiTZsxdZ4SJKZ9wUky
2026-08-25 23:43:17 +03:00

78 lines
3.0 KiB
React

import Link from 'next/link';
import { Star } from 'lucide-react';
import Reveal from '../Reveal.jsx';
import SectionHeading from '../SectionHeading.jsx';
import ReviewForm from './ReviewForm.jsx';
function cx(...args) {
return args.filter(Boolean).join(' ');
}
export default function Reviews({ reviews, limit, moreHref, showForm = true }) {
const list = limit ? reviews.slice(0, limit) : reviews;
// Пустая витрина отзывов на тизере (главная) выглядит слабо - лучше не показывать
// секцию вовсе, чем пустой список без формы для его заполнения.
if (list.length === 0 && !showForm) return null;
if (list.length === 0) {
return (
<section id="reviews" className="py-20 bg-slate-100/60 dark:bg-slate-950/40">
<div className="max-w-2xl mx-auto px-5 sm:px-8">
<SectionHeading
eyebrow="reviews --approved"
title="Отзывы клиентов"
desc="Отзывов пока нет - будьте первым, кто расскажет о работе с нами. Публикуется после проверки менеджером."
/>
<Reveal>
<ReviewForm />
</Reveal>
</div>
</section>
);
}
return (
<section id="reviews" className="py-20 bg-slate-100/60 dark:bg-slate-950/40">
<div className="max-w-6xl mx-auto px-5 sm:px-8">
<SectionHeading
eyebrow="reviews --approved"
title="Отзывы клиентов"
desc="Публикуются после проверки менеджером - это защищает страницу от спама и фейков."
/>
<div className={cx('grid gap-10', showForm && 'md:grid-cols-2')}>
<Reveal>
<div className="space-y-4">
{list.map((r) => (
<div key={r.id} className="rounded-lg border p-5 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800">
<div className="flex items-center gap-1 mb-2">
{[1, 2, 3, 4, 5].map((n) => (
<Star key={n} className={cx('h-4 w-4', n <= r.rating ? 'fill-amber-400 text-amber-400' : 'text-slate-300')} />
))}
</div>
<p className="text-sm mb-3">{r.text}</p>
<p className="text-xs text-slate-400 dark:text-slate-500">
{r.name}
{r.role ? ` · ${r.role}` : ''}
</p>
</div>
))}
</div>
{moreHref && (
<Link href={moreHref} className="mt-6 inline-block text-sm text-emerald-500 font-medium hover:underline">
Все отзывы →
</Link>
)}
</Reveal>
{showForm && (
<Reveal delay={100}>
<ReviewForm />
</Reveal>
)}
</div>
</div>
</section>
);
}