testimonial-1

• Vista previa

  

  Lorem ipsum dolor sit amet

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad tempora doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa aperiam dolorum, obcaecati corrupti aspernatur a.

  Jorge Luis Trejo

  Desarrollador Frontend SR en ElementumUI

• Código

  import Image from 'next/image';
  
  const Testimonial1 = () => {
    return (
      <div className="max-w-4xl mx-auto flex flex-col md:flex-row items-center gap-8 p-4 pb-8 rounded-xl bg-background-secondary">
        <div className="relative w-full h-80">
          <Image
            src="https://res.cloudinary.com/jotredev/image/upload/v1697759165/ElementumUI/abuelos/pareja-tiro-medio-posando-juntos_hlsehi.webp"
            className="object-cover rounded-xl -mt-20 drop-shadow-2xl"
            alt="Image"
            fill
            loading="lazy"
            blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1697759165/ElementumUI/abuelos/pareja-tiro-medio-posando-juntos_hlsehi.webp"
          />
        </div>
        <div>
          <div className="flex items-center gap-4">
            <i className="fi fi-rr-quote-right text-indigo-500 -rotate-180 text-2xl -translate-y-2"></i>
            <h2 className="text-2xl font-bold">Lorem ipsum dolor sit amet</h2>
            <i className="fi fi-rr-quote-right text-indigo-500 text-2xl"></i>
          </div>
          <p className="my-4 text-muted-foreground">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quibusdam ducimus libero ad tempora
            doloribus expedita laborum saepe voluptas perferendis delectus assumenda rerum, culpa aperiam dolorum,
            obcaecati corrupti aspernatur a.
          </p>
          <div className="mb-8">
            <h4 className="text-lg text-indigo-500 font-bold">Jorge Luis Trejo</h4>
            <p>
              <span className="font-medium">Desarrollador Frontend SR</span> en{' '}
              <span className="font-medium">ElementumUI</span>
            </p>
          </div>
          <div className="flex items-center gap-4">
            <button className="border border-indigo-500 w-10 h-10 flex items-center justify-center rounded-xl hover:bg-indigo-500 group transition-colors duration-300 text-indigo-500 hover:text-white">
              <i className="fi fi-rr-arrow-left"></i>
            </button>
            <button className="border border-indigo-500 w-10 h-10 flex items-center justify-center rounded-xl hover:bg-indigo-500 group transition-colors duration-300 text-indigo-500 hover:text-white">
              <i className="fi fi-rr-arrow-right"></i>
            </button>
          </div>
        </div>
      </div>
    );
  };
  
  export default Testimonial1;