Testimonial

import React from "react";

const Testimonial = () => {
  return (
    <div className="py-12 bg-gradient-to-b from-gray-100 to-gray-50 dark:from-gray-800 dark:to-gray-900">
      <div className="mx-auto max-w-md px-4">
        <div className="rounded-3xl bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70">
          <div className="p-8">
            <h3 className="text-2xl font-medium text-gray-900 dark:text-white mb-4">
              Client Feedback
            </h3>
            <p className="text-lg text-gray-700 dark:text-gray-300 mb-8 leading-relaxed">
              &quot;The product has streamlined our workflow, saving us
              countless hours. It&apos;s an invaluable tool for our team.&quot;
            </p>
            <div className="flex items-center">
              <div className="relative">
                <img
                  src="/pfp"
                  alt="Avatar"
                  className="mr-4 h-12 w-12 rounded-full object-cover ring-2 ring-white dark:ring-gray-700"
                />
              </div>
              <div>
                <p className="font-medium text-gray-900 dark:text-white">
                  Alex Chen
                </p>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Product Manager, TechCorp
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Testimonial;

import React from "react";

const Testimonial = () => {
  return (
    <div className="bg-gradient-to-b from-gray-100 to-gray-50 dark:from-gray-900 dark:to-gray-800 py-16">
      <div className="mx-auto max-w-6xl px-4">
        <h2 className="mb-12 text-center text-4xl font-medium text-gray-900 dark:text-white">
          What Our Clients Say
        </h2>
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {[
            {
              quote:
                "This solution has transformed our business operations. The efficiency gains are remarkable.",
              name: "Emma Watson",
              position: "COO, InnovateNow",
            },
            {
              quote:
                "The customer support is unparalleled. They've been incredibly responsive and helpful throughout our journey.",
              name: "Michael Chang",
              position: "Founder, StartUp Solutions",
            },
            {
              quote:
                "We've experienced a significant boost in team collaboration since adopting this platform.",
              name: "Olivia Martinez",
              position: "HR Director, GlobalTech",
            },
          ].map((testimonial, index) => (
            <div
              key={index}
              className="bg-white bg-opacity-70 dark:bg-gray-800 dark:bg-opacity-70 rounded-3xl p-8 transition-all duration-300 hover:transform hover:scale-105"
            >
              <p className="mb-8 text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
                &quot;{testimonial.quote}&quot;
              </p>
              <p className="font-medium text-gray-900 dark:text-white">
                {testimonial.name}
              </p>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {testimonial.position}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Testimonial;

import React from "react";

const Testimonial = () => {
  return (
    <div className="bg-gradient-to-b from-gray-100 to-gray-50 dark:from-gray-800 dark:to-gray-900 py-16">
      <div className="mx-auto max-w-5xl px-4">
        <div className="overflow-hidden rounded-3xl bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70">
          <div className="p-12">
            <h3 className="text-3xl font-medium text-gray-900 dark:text-white mb-6">
              A Game-Changing Experience
            </h3>
            <p className="mt-4 text-xl text-gray-700 dark:text-gray-300 leading-relaxed mb-8">
              &quot;We&apos;ve seen a 50% increase in productivity since
              implementing this solution. It&apos;s intuitive, powerful, and has
              become an essential part of our daily operations. The impact on
              our business has been nothing short of transformative.&quot;
            </p>
            <div className="flex items-center">
              <div className="relative">
                <img
                  src="pfp"
                  alt="Avatar"
                  className="mr-6 h-16 w-16 rounded-full object-cover ring-2 ring-white dark:ring-gray-700"
                />
              </div>
              <div>
                <p className="font-medium text-gray-900 dark:text-white text-lg">
                  Sarah Johnson
                </p>
                <p className="text-gray-500 dark:text-gray-400">
                  CTO, TechInnovate Inc.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Testimonial;

import React, { useEffect, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";

const Testimonial = () => {
  const testimonials = [
    {
      quote:
        "This product has revolutionized how we approach our projects. The intuitive interface and powerful features have made our team more efficient and creative. It's not just a tool; it's a catalyst for innovation.",
      name: "David Lee",
      position: "Lead Designer, CreativeTech",
    },
    {
      quote:
        "The level of customization and flexibility offered by this platform is unmatched. It has allowed us to tailor our workflows perfectly to our unique needs.",
      name: "Amanda Rodriguez",
      position: "Operations Manager, FlexiSolutions",
    },
    {
      quote:
        "From the moment we implemented this system, our productivity skyrocketed. The seamless integration with our existing tools made the transition smooth and the benefits immediate.",
      name: "Robert Chen",
      position: "CEO, InnovateCorp",
    },
  ];

  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
    }, 5000);
    return () => clearInterval(timer);
  }, []);

  const goToPrevious = () => {
    setCurrentIndex(
      (prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length
    );
  };

  const goToNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
  };

  return (
    <div className="bg-gradient-to-b from-gray-100 to-gray-50 dark:from-gray-900 dark:to-gray-800 py-16">
      <div className="mx-auto max-w-4xl px-4">
        <div className="relative overflow-hidden rounded-3xl bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70">
          <div className="px-8 py-12 md:px-12 md:py-16">
            <h3 className="mb-6 text-3xl font-medium text-gray-900 dark:text-white">
              Transformative Impact
            </h3>
            <p className="mb-8 text-xl text-gray-700 dark:text-gray-300 leading-relaxed">
              &quot;{testimonials[currentIndex].quote}&quot;
            </p>
            <div className="flex items-center">
              <div className="relative">
                <img
                  src="/pfp.jpg"
                  alt="Avatar"
                  className="mr-6 h-16 w-16 rounded-full object-cover ring-2 ring-white dark:ring-gray-700"
                />
              </div>
              <div>
                <p className="font-medium text-gray-900 dark:text-white text-lg">
                  {testimonials[currentIndex].name}
                </p>
                <p className="text-gray-500 dark:text-gray-400">
                  {testimonials[currentIndex].position}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div className="mt-8 flex justify-center gap-4">
          <button
            onClick={goToPrevious}
            className="rounded-full bg-white dark:bg-gray-700 p-3 text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300"
          >
            <ChevronLeft size={24} />
          </button>
          <button
            onClick={goToNext}
            className="rounded-full bg-white dark:bg-gray-700 p-3 text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300"
          >
            <ChevronRight size={24} />
          </button>
        </div>
      </div>
    </div>
  );
};

export default Testimonial;