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.
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.
---// Importimport Review from "../Review.astro";---(...)<Review />(...)1. Simple Review
Section titled “1. Simple Review”A simple and easy-to-use review component with all the necessary information to show your customers.
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>