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
137
138
139
140
141
|
import { motion } from "motion/react";
const posts = [
{
id: 1,
title: "Boost your conversion rate",
href: "#",
description:
"Illo sint volupta. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.",
date: "Mar 16, 2020",
datetime: "2020-03-16",
category: { title: "AP Calculus", href: "#" },
author: {
name: "Michael Foster",
role: "Co-Founder / CTO",
href: "#",
imageUrl:
"https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
},
},
{
id: 2,
title: "How to use search engine optimization to drive sales",
href: "#",
description:
"Optio cum necessitatibus dolor voluptatum provident commodi et. Qui aperiam fugiat nemo cumque.",
date: "Mar 10, 2020",
datetime: "2020-03-10",
category: { title: "ACT Prep", href: "#" },
author: {
name: "Lindsay Walton",
role: "Front-end Developer",
href: "#",
imageUrl:
"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
},
},
{
id: 3,
title: "Improve your customer experience",
href: "#",
description:
"Cupiditate maiores ullam eveniet adipisci in doloribus nulla minus. Voluptas iusto libero adipisci rem et corporis. Nostrud sint anim sunt aliqua. Nulla eu labore irure incididunt velit cillum quis magna dolore.",
date: "Feb 12, 2020",
datetime: "2020-02-12",
category: { title: "HS Algebra", href: "#" },
author: {
name: "Tom Cook",
role: "Director of Product",
href: "#",
imageUrl:
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
},
},
];
export default function Testimonials() {
return (
<>
<div
aria-hidden="true"
className="absolute inset-x-0 -z-10 transform-gpu overflow-hidden blur-3xl -translate-y-60 sm:-translate-y-80"
>
<div
style={{
clipPath:
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
}}
className="relative rotate-12 aspect-1000/900 sm:aspect-1155/700 w-144.5-translate-x-1/2 bg-linear-to-r from-indigo-600 via-red-200 to-red-500 opacity-30 sm:w-288.75 max-w-7xl mx-auto"
/>
</div>
<div className="pt-24 sm:pt-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<motion.div
className="mx-auto max-w-2xl lg:mx-0"
initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.25, delay: 0.1 }}
>
<h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
From the Students
</h2>
<p className="mt-2 text-lg/8 text-gray-600">
Listen to what our students have to say about their experiences.
</p>
</motion.div>
<motion.div
className="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-indigo-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
{posts.map((post) => (
<article
key={post.id}
className="flex max-w-xl flex-col items-start justify-between"
>
<div className="flex items-center gap-x-4 text-xs">
<time dateTime={post.datetime} className="text-gray-500">
{post.date}
</time>
<p className="relative z-10 rounded-full bg-indigo-100 px-3 py-1.5 font-medium text-gray-600 hover:bg-indigo-200">
{post.category.title}
</p>
</div>
<div className="group relative grow">
<h3 className="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
<a href={post.href}>
<span className="absolute inset-0" />
{post.title}
</a>
</h3>
<p className="mt-5 line-clamp-3 text-sm/6 text-gray-600">
{post.description}
</p>
</div>
<div className="relative mt-8 flex items-center gap-x-4 justify-self-end">
<img
alt=""
src={post.author.imageUrl}
className="size-10 rounded-full bg-gray-50"
/>
<div className="text-sm/6">
<p className="font-semibold text-gray-900">
<a href={post.author.href}>
<span className="absolute inset-0" />
{post.author.name}
</a>
</p>
<p className="text-gray-600">{post.author.role}</p>
</div>
</div>
</article>
))}
</motion.div>
</div>
</div>
</>
);
}
|
