forked from Nutlope/roomGPT
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Testimonials.tsx
136 lines (133 loc) · 4.67 KB
/
Testimonials.tsx
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import Image from "next/image";
const testimonials = [
[
{
content: "So good! I need this right now. Congrats on the launch!",
link: "https://twitter.com/eveporcello/status/1631438728999899136",
author: {
name: "Eve Porcello",
role: "Engineer & Author",
image: "/eve.jpg",
},
},
{
content:
"Finally! Something to help me get over my indecisiveness when decorating my house!",
link: "https://twitter.com/arthur_dvorkin/status/1631402865209274369",
author: {
name: "Arthur Dvorkin",
role: "Engineer",
image: "/arthur.jpg",
},
},
],
[
{
content:
"This is incredible, you don't need an interior designer anymore.",
link: "https://www.tiktok.com/@thenubians/video/7206088336044313861?q=roomgpt.io&t=1677909079689",
author: {
name: "Ade Dada",
role: "Startup Founder",
image: "/ade.jpeg",
},
},
{
content:
"I haven't changed my room layout for 5 years, but this app may change that. Great job.",
link: "https://twitter.com/RobAttfield/status/1631545265281974273",
author: {
name: "Rob Attfield",
role: "Software Engineer",
image: "/rob.jpg",
},
},
],
[
{
content:
"This is fantastic. I've already decided on a new wall color from a generated image and repainting it is now my weekend project.",
link: "https://twitter.com/Music4UsAll/status/1631622608595607552",
author: {
name: "Music",
role: "Some dude on the internet",
image: "/music.jpg",
},
},
{
content: "🤯",
link: "https://twitter.com/github/status/1631821360619028482",
author: {
name: "GitHub",
role: "The one and only",
image: "/github.jpg",
},
},
],
];
export function Testimonials() {
return (
<section
id="testimonials"
aria-label="What our customers are saying"
className="py-10"
>
<div className="mx-auto px-4 sm:px-6 lg:px-8 md:px-7">
<div className="mx-auto md:text-center">
<h1 className="mx-auto max-w-4xl font-display text-4xl font-bold tracking-normal text-gray-300 sm:text-6xl">
Loved by many worldwide.
</h1>
<p className="mx-auto mt-6 max-w-xl text-lg sm:text-gray-400 text-gray-500 leading-7">
See what our over 1 million users are saying about the product.
</p>
</div>
<ul
role="list"
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-16 lg:max-w-none lg:grid-cols-3"
>
{testimonials.map((column, columnIndex) => (
<li key={columnIndex}>
<ul role="list" className="flex flex-col gap-y-6 sm:gap-y-8">
{column.map((testimonial, testimonialIndex) => (
<li
key={testimonialIndex}
className="hover:scale-105 transition duration-300 ease-in-out "
>
<a href={testimonial.link} target="_blank" rel="noreferrer">
<figure className="relative rounded-2xl bg-gray-600 p-6 shadow-xl shadow-slate-900/10">
<blockquote className="relative">
<p className="text-lg tracking-tight text-white">
"{testimonial.content}"
</p>
</blockquote>
<figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
<div>
<div className="font-display text-base text-white">
{testimonial.author.name}
</div>
<div className="mt-1 text-sm text-gray-400">
{testimonial.author.role}
</div>
</div>
<div className="overflow-hidden rounded-full bg-slate-50">
<Image
className="h-14 w-14 object-cover"
src={testimonial.author.image}
alt="picture of the testimonial author"
width={56}
height={56}
/>
</div>
</figcaption>
</figure>
</a>
</li>
))}
</ul>
</li>
))}
</ul>
</div>
</section>
);
}