blob: cde6ea11828392e4ee1a2ba535fb9d300b652767 (
plain)
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
|
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 ">
Share a real <Mark>testimonial</Mark>
that hits some of your benefits from one of your popular customer.
</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 ">
Make sure you only pick the <Mark>right sentence</Mark>
to keep it short and simple.
</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 ">
This is an <Mark>awesome</Mark> landing page template I've seen. I
would use this for anything.
</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;
|