feat(reviews): StarRating component replacing static star image

src/components/sections/Reviews.tsx

@@ -3,9 +3,9 @@
 
 import { useRef, useState } from 'react'
 import { useAutoScroll } from '@/hooks/useAutoScroll'
+import StarRating from '@/components/ui/StarRating'
 import type { ReviewCMS, Media } from '@/types/globals'
 
-const IMG_RATE = '/images/figma/rate-stars.svg'
 const IMG_AVATAR_DEFAULT = '/images/figma/review-avatar-bg.webp'
 
 function getMediaUrl(img: Media | string | null | undefined): string | null {
@@ -137,11 +137,7 @@ export function Reviews({ data, title }: ReviewsProps) {
                           >
                             {review.ago}
                           </span>
-                          <img
-                            src={IMG_RATE}
-                            alt={`${review.rating ?? 5} зірок`}
-                            className="h-5 w-[120px] object-contain"
-                          />
+                          <StarRating value={review.rating ?? 5} size={16} className="flex gap-[2px]" />
                         </div>
                       </div>
                     </div>

src/components/ui/StarRating.tsx

@@ -0,0 +1,23 @@
+type Props = { value: number; max?: number; size?: number; className?: string }
+
+export default function StarRating({ value, max = 5, size = 16, className }: Props) {
+  const v = Math.max(0, Math.min(max, Math.round(value)))
+  return (
+    <div className={className} aria-label={`${v} з ${max} зірок`} style={{ display: 'flex' }}>
+      {Array.from({ length: max }).map((_, i) => (
+        <svg
+          key={i}
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill={i < v ? '#FDCF54' : 'none'}
+          stroke="#FDCF54"
+          strokeWidth="2"
+          style={{ display: 'inline-block' }}
+        >
+          <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
+        </svg>
+      ))}
+    </div>
+  )
+}