ComponentsTestimonial Card

1import Image from "next/image";
2
3function TestimonialCard({
4  testimonialText,
5  imageName,
6  altText,
7  personName,
8  company,
9}) {
10  return (
11    <div className="mx-auto max-w-md space-y-4">
12      <svg
13        xmlns="http://www.w3.org/2000/svg"
14        className="w-8 fill-success"
15        viewBox="0 0 35 30"
16        fill="none"
17      >
18        <path d="M22.3838 27.6777C23.5264 28.9961 25.3721 29.6992 27.4814 29.6992C31.6123 29.6992 34.249 26.9746 34.249 22.7559C34.249 18.625 31.5244 15.6367 27.6572 15.6367C26.8662 15.6367 25.9873 15.8125 25.1084 16.0762C24.5811 9.48438 27.833 4.03516 32.2275 2.36523L31.7881 0.871094C24.2295 3.77148 19.4834 11.1543 19.4834 19.8555C19.4834 22.668 20.5381 25.7441 22.3838 27.6777ZM0.499023 19.8555C0.499023 24.6895 3.22363 29.6992 8.49707 29.6992C12.54 29.6992 15.1768 26.9746 15.1768 22.7559C15.1768 18.625 12.4521 15.6367 8.67285 15.6367C7.88184 15.6367 7.00293 15.8125 6.12402 16.0762C5.59668 9.48438 8.84863 4.03516 13.2432 2.36523L12.7158 0.871094C5.24512 3.77148 0.499023 11.1543 0.499023 19.8555Z"></path>
19      </svg>
20      <p className="leading-relaxed md:text-lg">{testimonialText}</p>
21      <div className="flex items-center gap-2">
22        <Image
23          src={imageName}
24          alt={altText}
25          loading="lazy"
26          width="48"
27          height="48"
28          decoding="async"
29          data-nimg="1"
30          className="h-10 w-10 rounded-full object-cover"
31          style={{ color: "transparent" }}
32        />
33        <p>
34          {personName}, <span className="font-bold">{company}</span>
35        </p>
36      </div>
37    </div>
38  );
39}
40
41export default TestimonialCard;

1import TestimonialCard from "./TestimonialCard";
2
3function Demo() {
4  return (
5    <>
6      <section>
7        ...
8        <TestimonialCard
9          testimonialText="I was able to launch many projects using this boilerplate!"
10          imageName="/marc.png"
11          altText="Marc Lou"
12          personName="Marc Lou"
13          company="ShipFast"
14        />
15        ...
16      </section>
17    </>
18  );
19}
20
21export default Demo;