Skip to content

Commit a00a983

Browse files
hcourdenthcourdent
authored
Testimonials profile pictures & end of useless showAll (windmill-labs#597)
1 parent a4ec382 commit a00a983

File tree

1 file changed

+86
-83
lines changed

1 file changed

+86
-83
lines changed

‎src/landing/TestimonialsSection.tsx

Lines changed: 86 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,8 @@ const clientTestimonials = [
169169
position: 'Co-Founder & CTO',
170170
dark: '/images/brands/logo-original-dark-transparent.png',
171171
light: '/images/brands/logo-original-light-transparent.png',
172-
anchor: 'photoroom'
172+
anchor: 'photoroom',
173+
profile_picture: 'https://media.licdn.com/dms/image/D4E03AQEgFugU1CsFxA/profile-displayphoto-shrink_400_400/0/1709041891469?e=1719446400&v=beta&t=oJBEWO8a4xQSmO0MGqryGgdSmj3e6KKRjxhs2IVXMs0',
173174
},
174175
company_url: 'https://photoroom.com',
175176
linkedIn: 'https://www.linkedin.com/in/eliotandres/',
@@ -182,7 +183,8 @@ const clientTestimonials = [
182183
position: 'Software Engineer',
183184
dark: '/images/brands/Kahoot_Logo-dark.svg',
184185
light: '/images/brands/Kahoot_Logo.svg',
185-
anchor: 'kahoot'
186+
anchor: 'kahoot',
187+
profile_picture: 'https://media.licdn.com/dms/image/C4E03AQHGq8BtXdRm_Q/profile-displayphoto-shrink_200_200/0/1516320962101?e=1719446400&v=beta&t=yxGBFspRGNpOqcL_2uEkBRqK6Op1AzadqmUyXb3D2lI'
186188
},
187189
company_url: 'https://motimateapp.com',
188190
linkedIn: 'https://www.linkedin.com/in/sindresvendby/',
@@ -195,7 +197,8 @@ const clientTestimonials = [
195197
position: 'Chief Technology Officer',
196198
dark: '/images/brands/Bloomcredit-Dark.svg',
197199
light: '/images/brands/Bloomcredit-Light.svg',
198-
anchor: 'bloomcredit'
200+
anchor: 'bloomcredit',
201+
profile_picture: 'https://media.licdn.com/dms/image/C4E03AQGsYhBLnQ307A/profile-displayphoto-shrink_200_200/0/1626408831967?e=1719446400&v=beta&t=eRmvNTEh7i8PLxgiQM-CoOiaMRzZG0uAr3eilcMrfrc'
199202
},
200203
text: `Bloom Credit uses Windmill to automate back office and support tasks, and orchestrate their ELT process. It is rapidly becoming a foundational technology in our SaaS control plane. The Windmill team have been great partners; they are responsive to support inquiries and new feature requests and are truly invested in our success with the platform.`,
201204
company_url: 'https://bloomcredit.io',
@@ -209,7 +212,8 @@ const clientTestimonials = [
209212
position: 'Co-Founder & CEO',
210213
dark: '/images/brands/Qovery-dark.png',
211214
light: '/images/brands/Qovery-light.svg',
212-
anchor: 'qovery'
215+
anchor: 'qovery',
216+
profile_picture: 'https://media.licdn.com/dms/image/D4E03AQFlNTUW60HFbQ/profile-displayphoto-shrink_200_200/0/1693895616954?e=1719446400&v=beta&t=N_v3VJUZvoyLAgW2Egs63YpgJOzIPy_WF_D2hd9GB0I'
213217
},
214218
company_url: 'https://www.qovery.com',
215219
linkedIn: 'https://www.linkedin.com/in/romaricphilogene/',
@@ -230,13 +234,8 @@ const clientTestimonials = [
230234
];
231235

232236
export default function Example() {
233-
const [showAll, setShowAll] = useState(true);
234237
const { colorMode } = useColorMode();
235238

236-
const toggleTestimonials = () => {
237-
setShowAll(!showAll);
238-
};
239-
240239
return (
241240
<LandingSection bgClass="">
242241
<div>
@@ -250,56 +249,66 @@ export default function Example() {
250249
</span>
251250
</div>
252251
<div className="mx-auto mt-8 lg:mx-0 lg:max-w-none">
253-
<div className="columns-1 sm:columns-2 gap-8 flow-root mb-8">
254-
{clientTestimonials.map((testimonial, index) => (
255-
<div
256-
key={testimonial.author.name + index}
257-
className="sm:inline-block sm:w-full mb-8 testimonials scroll-m-64"
258-
id={testimonial.author.anchor}
259-
>
260-
<div className="block rounded-2xl dark:bg-gray-1000 border dark:border-0 text-sm leading-6 hover:bg-gray-50 hover:no-underline shadow-sm">
261-
<div className="dark:text-gray-50 text-gray-900 p-8 text-md leading-6">
262-
<p>{testimonial.text}</p>
263-
</div>
264-
<div className="flex items-center border-t dark:border-gray-800 px-6 py-4 gap-4 ">
265-
{testimonial.linkedIn ? (
266-
<a className="w-full" href={testimonial.linkedIn} target="_blank">
267-
<p className="text-sm font-bold dark:text-gray-50 text-gray-900 ">
268-
{testimonial.author.name}
269-
</p>
270-
<div className="text-sm dark:text-gray-50 text-gray-500">
271-
{[testimonial.author.position, testimonial.author.company]
272-
.filter(Boolean)
273-
.join(' @ ')}
274-
</div>
275-
</a>
276-
) : (
277-
<>
278-
<p className="text-sm font-bold dark:text-gray-50 text-gray-900 w-full ">
279-
{testimonial.author.name}
280-
</p>
281-
<div className="text-sm dark:text-gray-50 text-gray-500">
282-
{[testimonial.author.position, testimonial.author.company]
283-
.filter(Boolean)
284-
.join(' @ ')}
285-
</div>
286-
</>
287-
)}
252+
<div className="columns-1 sm:columns-2 gap-8 flow-root mb-8">
253+
{clientTestimonials.map((testimonial, index) => (
254+
<div
255+
key={testimonial.author.name + index}
256+
className="sm:inline-block sm:w-full mb-8 testimonials scroll-m-64"
257+
id={testimonial.author.anchor}
258+
>
259+
<div className="block rounded-2xl dark:bg-gray-1000 border dark:border-0 text-sm leading-6 hover:bg-gray-50 hover:no-underline shadow-sm">
260+
<div className="dark:text-gray-50 text-gray-900 p-8 text-md leading-6">
261+
<p>{testimonial.text}</p>
262+
</div>
263+
<div className="flex items-center border-t dark:border-gray-800 px-6 py-4 gap-4">
264+
{testimonial.author.profile_picture ? (
265+
<a href={testimonial.linkedIn ? testimonial.linkedIn : "#"} target="_blank" rel="noopener noreferrer">
266+
<img
267+
src={testimonial.author.profile_picture}
268+
alt={testimonial.author.name}
269+
className="w-12 h-12 rounded-full border-2 border-blue-500 flex-shrink-0"
270+
/>
271+
</a>
272+
) : null}
273+
{testimonial.linkedIn ? (
274+
<a className="flex-grow" href={testimonial.linkedIn} target="_blank" rel="noopener noreferrer">
275+
<p className="text-sm font-bold dark:text-gray-50 text-gray-900">
276+
{testimonial.author.name}
277+
</p>
278+
<div className="text-sm dark:text-gray-50 text-gray-500">
279+
{[testimonial.author.position, testimonial.author.company]
280+
.filter(Boolean)
281+
.join(' @ ')}
282+
</div>
283+
</a>
284+
) : (
285+
<>
286+
<p className="text-sm font-bold dark:text-gray-50 text-gray-900 w-full">
287+
{testimonial.author.name}
288+
</p>
289+
<div className="text-sm dark:text-gray-50 text-gray-500">
290+
{[testimonial.author.position, testimonial.author.company]
291+
.filter(Boolean)
292+
.join(' @ ')}
293+
</div>
294+
</>
295+
)}
288296

289-
<a
290-
className="flex-shrink-0 cursor-pointer"
291-
href={testimonial.company_url}
292-
target="_blank"
293-
title={testimonial.author.company}
294-
>
295-
<img
296-
width={100}
297-
height={32}
298-
src={
299-
colorMode === 'dark' ? testimonial.author.dark : testimonial.author.light
300-
}
301-
alt=""
302-
/>
297+
<a
298+
className="flex-shrink-0 cursor-pointer"
299+
href={testimonial.company_url}
300+
target="_blank"
301+
title={testimonial.author.company}
302+
rel="noopener noreferrer"
303+
>
304+
<img
305+
width={100}
306+
height={32}
307+
src={
308+
colorMode === 'dark' ? testimonial.author.dark : testimonial.author.light
309+
}
310+
alt=""
311+
/>
303312
</a>
304313
</div>
305314
</div>
@@ -309,37 +318,31 @@ export default function Example() {
309318

310319
<div className="flex flex-row gap-2 items-center mb-4 h-8">
311320
<div className="text-lg text-gray-600 max-w-3xl dark:text-gray-200">Community</div>
312-
<button
313-
onClick={toggleTestimonials}
314-
className="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-blue-100 px-4 py-1 text-xs font-medium text-blue-600 shadow-sm hover:bg-blue-200 hover:text-blue-800 !no-underline transition-all"
315-
>
316-
{showAll ? 'Show Less' : 'Show All'}
317-
</button>
318321
</div>
319322

320323
<div className="columns-1 sm:columns-2 md:columns-3 gap-4 flow-root">
321-
{testimonials.slice(0, showAll ? testimonials.length : 2).map((testimonial, index) => (
324+
{testimonials.map((testimonial, index) => (
325+
<div
326+
key={testimonial.author.handle + index}
327+
className="sm:inline-block sm:w-full mb-4 testimonials"
328+
>
329+
<a
330+
href={testimonial.linkedIn}
331+
className="block rounded-2xl dark:bg-gray-1000 border dark:border-0 p-6 text-sm leading-6 hover:bg-gray-50 hover:no-underline"
332+
target="_blank"
333+
>
334+
<div className="dark:text-gray-50 text-gray-900">
335+
<p>{testimonial.body}</p>
336+
</div>
322337
<div
323-
key={testimonial.author.handle + index}
324-
className="sm:inline-block sm:w-full mb-4 testimonials"
338+
className={`font-semibold dark:text-gray-50 text-gray-900 mt-2 ${testimonial.author.handle}-name`}
325339
>
326-
<a
327-
href={testimonial.author.backlink}
328-
className="block rounded-2xl dark:bg-gray-1000 border dark:border-0 p-6 text-sm leading-6 hover:bg-gray-50 hover:no-underline"
329-
target="_blank"
330-
>
331-
<div className="dark:text-gray-50 text-gray-900">
332-
<p>{testimonial.body}</p>
333-
</div>
334-
<div
335-
className={`font-semibold dark:text-gray-50 text-gray-900 mt-2 ${testimonial.author.handle}-name`}
336-
>
337-
{testimonial.author.name}
338-
</div>
339-
<div className="text-xs text-gray-400 mt-1">{testimonial.author.date}</div>
340-
</a>
340+
{testimonial.author.name}
341341
</div>
342-
))}
342+
<div className="text-xs text-gray-400 mt-1">{testimonial.author.date}</div>
343+
</a>
344+
</div>
345+
))}
343346
</div>
344347
</div>
345348
</div>

0 commit comments

Comments
 (0)