forked from web3templates/nextly-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
testimonials.js
92 lines (84 loc) · 2.84 KB
/
testimonials.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import Image from "next/image";
import React from "react";
import Container from "./container";
import userOneImg from "../public/img/user1.jpg";
import userTwoImg from "../public/img/user2.jpg";
import userThreeImg from "../public/img/user3.jpg";
const Testimonials = () => {
return (
<Container>
<div className="grid gap-10 lg:grid-cols-2 xl:grid-cols-3">
<div className="lg:col-span-2 xl:col-auto">
<div className="flex flex-col justify-between w-full h-full bg-gray-100 px-14 rounded-2xl py-14 dark:bg-trueGray-800">
<p className="text-2xl leading-normal ">
XYZ AC's service was exceptional. Quick response, efficient
installation, and our home is now blissfully cool. Highly
recommend!
</p>
<Avatar
image={userOneImg}
name="Sarah Steiner"
title="VP Sales at Google"
/>
</div>
</div>
<div className="">
<div className="flex flex-col justify-between w-full h-full bg-gray-100 px-14 rounded-2xl py-14 dark:bg-trueGray-800">
<p className="text-2xl leading-normal ">
Impressed by XYZ AC's professionalism. Fixed our unit swiftly, and
it's running better than ever. Thank you!
</p>
<Avatar
image={userTwoImg}
name="Dylan Ambrose"
title="Lead marketer at Netflix"
/>
</div>
</div>
<div className="">
<div className="flex flex-col justify-between w-full h-full bg-gray-100 px-14 rounded-2xl py-14 dark:bg-trueGray-800">
<p className="text-2xl leading-normal ">
XYZ AC is my go-to for all things cooling. Reliable,
knowledgeable, and always on time. Can't ask for more!
</p>
<Avatar
image={userThreeImg}
name="Gabrielle Winn"
title="Co-founder of Acme Inc"
/>
</div>
</div>
</div>
</Container>
);
};
function Avatar(props) {
return (
<div className="flex items-center mt-8 space-x-3">
<div className="flex-shrink-0 overflow-hidden rounded-full w-14 h-14">
<Image
src={props.image}
width="40"
height="40"
alt="Avatar"
placeholder="blur"
/>
</div>
<div>
<div className="text-lg font-medium">{props.name}</div>
<div className="text-gray-600 dark:text-gray-400">{props.title}</div>
</div>
</div>
);
}
function Mark(props) {
return (
<>
{" "}
<mark className="text-indigo-800 bg-indigo-100 rounded-md ring-indigo-100 ring-4 dark:ring-indigo-900 dark:bg-indigo-900 dark:text-indigo-200">
{props.children}
</mark>{" "}
</>
);
}
export default Testimonials;