Reviews

Review components can be extremely useful to show your prospects how satisfied previous clients have been with your product or service. We strongly recommend using real data for authenticity.

---
// Import
import Review from "../Review.astro";
---
(...)
<Review />
(...)

1. Simple Review

A simple and easy-to-use review component with all the necessary information to show your customers.

Preview
Code

Yefmann Arrdich

May 11 1918

This is an amazing product! I highly recommend it to everyone, but I don't like that everything is on black and white.

---
// 4 Instructions in this component

import { Image } from "astro:assets";
import avatar from "../../../assets/images/avatar.png";

// Start editing the name here ↓. ❶
const name = "Yefmann Arrdich";

// Here you can write the review. ❷
const review = "This is an amazing product! I highly recommend it to everyone, but I don't like that everything is on black and white.";

// Here you can change the rating (from 1 to 5). ❸
const rating = 4;

// Here you can change the date. ❹
const date = "May 11 1918";
---

<div class="border border-white/30 w-xs p-4 rounded-md space-y-4">

  <div class="flex items-center gap-2">

    <Image src={avatar} alt="Avatar image" class="size-8 rounded-full bg-white"/>
    <p class="font-semibold">{name}</p>
    <p class="mr-0 ml-auto font-light text-xs">{date}</p>

  </div>

  <div class="flex gap-1">

    {Array.from({ length: rating }).map((_, i) => (

      <div class="text-white/70">

        <svg xmlns="http://www.w3.org/2000/svg"
             fill="currentColor"
             viewBox="0 0 24 24"
             class="size-5">
          <path stroke-linecap="round"
                stroke-linejoin="round"
                d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
        </svg>
      </div>
    ))}

  </div>

  <p class="text-sm text-white/80">{review}</p>

</div>