Testamonial Section One

1/* eslint-disable @next/next/no-img-element */
2 
3import { Badge } from '@/components/ui/badge'
4import { Button } from '@/components/ui/button'
5import { IconArrowRight } from '@tabler/icons-react'
6import Link from 'next/link'
7 
8const customerPortraits = [
9  {
10    name: 'Liam Brown',
11    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlH4NUrIqHjv3VPCtBSMksEJOn7pmfxyc9IoU5',
12  },
13  {
14    name: 'Elijah Jones',
15    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTl81tMhO4dwU2oJkmKaujTg9FMAr3QiGROq5bE',
16  },
17  {
18    name: 'Isabella Garcia',
19    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlnj8ad4LL1RTlFOStU5Vx6bKDsZupeXgyGkhM',
20  },
21  {
22    name: 'Henry Lee',
23    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlKywRt8Sa4eSEgVXynrIRWAk3NL9mFjvOTM0B',
24  },
25  {
26    name: 'Ava Williams',
27    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlh433XXK0RlaETPbLcZQjyfg2StNvuB13w8rI',
28  },
29  {
30    name: 'Olivia Miller',
31    avatar: 'https://p1r7j2dwef.ufs.sh/f/nrPqHGLL1RTlCsjkx0nF5BMj7T0uXqWGgbANfhcdeI8P3x9v',
32  },
33]
34 
35export default function TestamonialSectionOne() {
36  const left = customerPortraits.slice(0, 2)
37  const right = customerPortraits.slice(3, 5)
38 
39  return (
40    <section className="bg-gray-50 py-16 md:py-32 dark:bg-transparent">
41      <div className="mx-auto flex max-w-6xl items-center justify-between px-4">
42        <div className="space-y-24">
43          {left.map((member) => (
44            <div
45              key={member.name}
46              className="group size-20 origin-right -rotate-6 transform overflow-hidden rounded-xl transition-transform duration-300 hover:rotate-0 motion-reduce:transition-none motion-reduce:hover:-rotate-6 md:size-50"
47            >
48              <img
49                src={member.avatar}
50                alt={member.name}
51                className="inset-0 h-full w-full object-cover object-top grayscale transition-[transform,filter] duration-300 group-hover:scale-103 group-hover:grayscale-0 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
52              />
53            </div>
54          ))}
55        </div>
56 
57        <div className="flex flex-col items-center justify-center gap-2">
58          <Badge variant="outline" className="text-muted-foreground uppercase shadow-md">
59            Testimonials
60          </Badge>
61          <div className="mx-auto flex max-w-md flex-col items-center justify-center gap-4 text-center md:max-w-2xl">
62            <h1 className="text-3xl font-medium md:text-6xl">
63              Trusted by leaders{' '}
64// … truncated