@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/non-functional/Testimonials.tsx

@@ -1,335 +1,335 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { useRef, useState, useEffect } from "react";
-
-interface TestimonialModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  quote: string;
-  author: string;
-  isMobile: boolean;
-}
-
-interface TestimonialsProps {
-  isMobile: boolean;
-}
-
-const TestimonialModal: React.FC<TestimonialModalProps> = ({ isOpen, onClose, quote, author, isMobile }) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      const firstFocusable = modalRef.current?.querySelector("button") as HTMLElement;
-      firstFocusable?.focus();
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div
-      className="fixed inset-0 bg-black/50 flex items-center justify-center z-[10000] p-4"
-      onClick={handleClickOutside}
-      aria-modal="true"
-      role="dialog"
-    >
-      <motion.div
-        ref={modalRef}
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
-        exit={{ opacity: 0, scale: 0.95 }}
-        className="bg-white rounded-2xl p-6 sm:p-8 max-w-lg w-full overflow-y-auto relative glassmorphism"
-        style={{ maxHeight: isMobile ? "50vh" : "80vh" }}
-      >
-        <button
-          onClick={onClose}
-          className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
-          aria-label="Close testimonial modal"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M18 6L6 18M6 6l12 12" />
-          </svg>
-        </button>
-        <p className="text-[#2D2D2D] text-lg sm:text-xl font-medium italic mb-4">
-          “{quote}”
-        </p>
-        <p className="text-[#2D2D2D] text-base sm:text-lg font-medium text-right">
-          — {author}
-        </p>
-      </motion.div>
-    </div>
-  );
-};
-
-const Testimonials: React.FC<TestimonialsProps> = ({ isMobile }) => {
-  const [selectedTestimonial, setSelectedTestimonial] = useState<{
-    quote: string;
-    author: string;
-  } | null>(null);
-  const testimonialRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const event = new CustomEvent("modalStateChange", {
-      detail: { isOpen: !!selectedTestimonial },
-    });
-    window.dispatchEvent(event);
-  }, [selectedTestimonial]);
-
-  const sectionVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  const cardVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-    hover: {
-      scale: isMobile ? 1 : 1.05,
-      transition: { duration: 0.2, ease: "easeOut" },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  const scrollToTestimonials = () => {
-    if (testimonialRef.current) {
-      const headerOffset = 290;
-      const elementPosition = testimonialRef.current.getBoundingClientRect().top + window.pageYOffset;
-      window.scrollTo({
-        top: elementPosition - headerOffset,
-        behavior: "smooth",
-      });
-    }
-  };
-
-  return (
-    <div className={`pt-12 px-12 pb-24 bg-[#1B2743] ${isMobile ? "pt-32" : "pt-12"} pb-12`}>
-      <style jsx>{`
-        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
-
-        :root {
-          --jubilee: #F47C7C;
-          --natural-white: #F7F7F7;
-          --caviar: #2D2D2D;
-          --storm-cloud: #4A636E;
-          --modern-purple: #D946EF;
-        }
-
-        * {
-          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        }
-
-        .glassmorphism {
-          background: rgba(255, 255, 255, 0.1);
-          backdrop-filter: blur(12px);
-          -webkit-backdrop-filter: blur(12px);
-          border: 1px solid rgba(255, 255, 255, 0.2);
-          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
-          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
-        }
-
-        @supports not (backdrop-filter: blur(12px)) {
-          .glassmorphism {
-            background: rgba(255, 255, 255, 0.3);
-          }
-        }
-
-        .glassmorphism:hover {
-          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
-        }
-
-        .line-clamp-8 {
-          display: -webkit-box;
-          -webkit-line-clamp: 8;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-        }
-      `}</style>
-      {!isMobile && (
-        <div className="flex justify-center">
-          <button
-            onClick={scrollToTestimonials}
-            className="relative mb-72 transition-all duration-300 hover:scale-110"
-            style={{ top: "-20px" }}
-            aria-label="Scroll down"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="120"
-              height="60"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="text-white transition-all duration-300"
-            >
-              <polyline points="4 8 12 16 20 8" />
-            </svg>
-          </button>
-        </div>
-      )}
-      <motion.div
-        ref={testimonialRef}
-        variants={sectionVariants}
-        initial="hidden"
-        animate="visible"
-      >
-        <motion.h2
-          variants={itemVariants}
-          className="text-4xl sm:text-5xl font-extrabold mb-16 text-white/90 text-center tracking-tight drop-shadow-md uppercase"
-        >
-          Testimonials
-        </motion.h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12 min-h-fit items-stretch">
-          {[
-            {
-              quote: `Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.`,
-              author: "Susan H.",
-            },
-            {
-              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-              author: "Pam S.",
-            },
-            {
-              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-              author: "Stan K.",
-            },
-            {
-              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-              author: "Vicki M.",
-            },
-            {
-              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-              author: "Deb G.",
-            },
-            {
-              quote:
-                "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-              author: "Annie T.",
-            },
-            {
-              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-              author: "Kristi K.",
-              image: "",
-            },
-            {
-              quote:
-                "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-              author: "Carol K.",
-            },
-            {
-              quote:
-                "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-              author: "Kate F.",
-            },
-            {
-              quote:
-                "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
-              author: "Anita D.",
-            },
-          ].map((testimonial, index) => (
-            <motion.div
-              key={index}
-              variants={cardVariants}
-              initial="hidden"
-              animate="visible"
-              whileHover="hover"
-              className="flex"
-            >
-              <div
-                className="mb-16 overflow-hidden bg-white/30 backdrop-blur-lg border border-white/10 shadow-lg rounded-2xl w-full h-[500px] flex flex-col items-center justify-between"
-                style={{
-                  backgroundImage: testimonial.image ? `url(${testimonial.image})` : "none",
-                  backgroundSize: "contain",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                }}
-                role="region"
-                aria-label="Testimonial"
-              >
-                <div className={`flex-1 flex flex-col justify-center w-full bg-black/40 rounded-2xl ${isMobile ? "p-4" : "p-12"}`}>
-                  <div className="flex flex-col items-center justify-center h-full">
-                    <p
-                      className="text-white text-base sm:text-lg font-medium italic mb-2 text-center content-text line-clamp-8"
-                    >
-                      “{testimonial.quote}”
-                    </p>
-                    <p
-                      className="text-white/80 text-sm sm:text-base font-medium text-center content-text"
-                      style={{
-                        textShadow: `
-                          -1px -1px 0 #000,
-                          1px -1px 0 #000,
-                          -1px 1px 0 #000,
-                          1px 1px 0 #000,
-                          0 2px 4px rgba(0, 0, 0, 0.4)
-                        `,
-                      }}
-                    >
-                      — {testimonial.author}
-                    </p>
-                  </div>
-                  <button
-                    onClick={() => setSelectedTestimonial({ quote: testimonial.quote, author: testimonial.author })}
-                    className="mt-4 text-white bg-[#4a90e2] hover:bg-[#5c9de3] rounded-full px-4 py-2 text-sm font-semibold transition-colors duration-200 self-center"
-                  >
-                    Read More
-                  </button>
-                </div>
-              </div>
-            </motion.div>
-          ))}
-        </div>
-        <TestimonialModal
-          isOpen={!!selectedTestimonial}
-          onClose={() => setSelectedTestimonial(null)}
-          quote={selectedTestimonial?.quote || ""}
-          author={selectedTestimonial?.author || ""}
-          isMobile={isMobile}
-        />
-      </motion.div>
-    </div>
-  );
-};
-
+"use client";
+
+import { motion } from "framer-motion";
+import { useRef, useState, useEffect } from "react";
+
+interface TestimonialModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  quote: string;
+  author: string;
+  isMobile: boolean;
+}
+
+interface TestimonialsProps {
+  isMobile: boolean;
+}
+
+const TestimonialModal: React.FC<TestimonialModalProps> = ({ isOpen, onClose, quote, author, isMobile }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      const firstFocusable = modalRef.current?.querySelector("button") as HTMLElement;
+      firstFocusable?.focus();
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-[10000] p-4"
+      onClick={handleClickOutside}
+      aria-modal="true"
+      role="dialog"
+    >
+      <motion.div
+        ref={modalRef}
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        className="bg-white rounded-2xl p-6 sm:p-8 max-w-lg w-full overflow-y-auto relative glassmorphism"
+        style={{ maxHeight: isMobile ? "50vh" : "80vh" }}
+      >
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
+          aria-label="Close testimonial modal"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+        <p className="text-[#2D2D2D] text-lg sm:text-xl font-medium italic mb-4">
+          “{quote}”
+        </p>
+        <p className="text-[#2D2D2D] text-base sm:text-lg font-medium text-right">
+          — {author}
+        </p>
+      </motion.div>
+    </div>
+  );
+};
+
+const Testimonials: React.FC<TestimonialsProps> = ({ isMobile }) => {
+  const [selectedTestimonial, setSelectedTestimonial] = useState<{
+    quote: string;
+    author: string;
+  } | null>(null);
+  const testimonialRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const event = new CustomEvent("modalStateChange", {
+      detail: { isOpen: !!selectedTestimonial },
+    });
+    window.dispatchEvent(event);
+  }, [selectedTestimonial]);
+
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  const cardVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+    hover: {
+      scale: isMobile ? 1 : 1.05,
+      transition: { duration: 0.2, ease: "easeOut" },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  const scrollToTestimonials = () => {
+    if (testimonialRef.current) {
+      const headerOffset = 290;
+      const elementPosition = testimonialRef.current.getBoundingClientRect().top + window.pageYOffset;
+      window.scrollTo({
+        top: elementPosition - headerOffset,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  return (
+    <div className={`pt-12 px-12 pb-24 bg-[#1B2743] ${isMobile ? "pt-32" : "pt-12"} pb-12`}>
+      <style jsx>{`
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap");
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --modern-purple: #D946EF;
+        }
+
+        * {
+          font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+        }
+
+        @supports not (backdrop-filter: blur(12px)) {
+          .glassmorphism {
+            background: rgba(255, 255, 255, 0.3);
+          }
+        }
+
+        .glassmorphism:hover {
+          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        }
+
+        .line-clamp-8 {
+          display: -webkit-box;
+          -webkit-line-clamp: 8;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      `}</style>
+      {!isMobile && (
+        <div className="flex justify-center">
+          <button
+            onClick={scrollToTestimonials}
+            className="relative mb-72 transition-all duration-300 hover:scale-110"
+            style={{ top: "-20px" }}
+            aria-label="Scroll down"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="120"
+              height="60"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="text-white transition-all duration-300"
+            >
+              <polyline points="4 8 12 16 20 8" />
+            </svg>
+          </button>
+        </div>
+      )}
+      <motion.div
+        ref={testimonialRef}
+        variants={sectionVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <motion.h2
+          variants={itemVariants}
+          className="text-4xl sm:text-5xl font-extrabold mb-16 text-white/90 text-center tracking-tight drop-shadow-md uppercase"
+        >
+          Testimonials
+        </motion.h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12 min-h-fit items-stretch">
+          {[
+            {
+              quote: `Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.`,
+              author: "Susan H.",
+            },
+            {
+              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
+              author: "Pam S.",
+            },
+            {
+              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
+              author: "Stan K.",
+            },
+            {
+              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
+              author: "Vicki M.",
+            },
+            {
+              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
+              author: "Deb G.",
+            },
+            {
+              quote:
+                "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
+              author: "Annie T.",
+            },
+            {
+              quote: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
+              author: "Kristi K.",
+              image: "",
+            },
+            {
+              quote:
+                "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
+              author: "Carol K.",
+            },
+            {
+              quote:
+                "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
+              author: "Kate F.",
+            },
+            {
+              quote:
+                "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
+              author: "Anita D.",
+            },
+          ].map((testimonial, index) => (
+            <motion.div
+              key={index}
+              variants={cardVariants}
+              initial="hidden"
+              animate="visible"
+              whileHover="hover"
+              className="flex"
+            >
+              <div
+                className="mb-16 overflow-hidden bg-white/30 backdrop-blur-lg border border-white/10 shadow-lg rounded-2xl w-full h-[500px] flex flex-col items-center justify-between"
+                style={{
+                  backgroundImage: testimonial.image ? `url(${testimonial.image})` : "none",
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                }}
+                role="region"
+                aria-label="Testimonial"
+              >
+                <div className={`flex-1 flex flex-col justify-center w-full bg-black/40 rounded-2xl ${isMobile ? "p-4" : "p-12"}`}>
+                  <div className="flex flex-col items-center justify-center h-full">
+                    <p
+                      className="text-white text-base sm:text-lg font-medium italic mb-2 text-center content-text line-clamp-8"
+                    >
+                      “{testimonial.quote}”
+                    </p>
+                    <p
+                      className="text-white/80 text-sm sm:text-base font-medium text-center content-text"
+                      style={{
+                        textShadow: `
+                          -1px -1px 0 #000,
+                          1px -1px 0 #000,
+                          -1px 1px 0 #000,
+                          1px 1px 0 #000,
+                          0 2px 4px rgba(0, 0, 0, 0.4)
+                        `,
+                      }}
+                    >
+                      — {testimonial.author}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => setSelectedTestimonial({ quote: testimonial.quote, author: testimonial.author })}
+                    className="mt-4 text-white bg-[#4a90e2] hover:bg-[#5c9de3] rounded-full px-4 py-2 text-sm font-semibold transition-colors duration-200 self-center"
+                  >
+                    Read More
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+        <TestimonialModal
+          isOpen={!!selectedTestimonial}
+          onClose={() => setSelectedTestimonial(null)}
+          quote={selectedTestimonial?.quote || ""}
+          author={selectedTestimonial?.author || ""}
+          isMobile={isMobile}
+        />
+      </motion.div>
+    </div>
+  );
+};
+
 export default Testimonials;