feat: add alternating testimonial cards to hero section

Merge version_7_1778225913518 into main

src/components/custom/TestimonialCard.css

@@ -0,0 +1,11 @@
+.testimonial-card {
+  transition: opacity 0.5s ease-in-out;
+}
+
+.fade-in {
+  opacity: 1;
+}
+
+.fade-out {
+  opacity: 0;
+}

src/components/custom/TestimonialCard.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import './TestimonialCard.css';
+
+const testimonials = [
+  {
+    quote: "Their team transformed our yard into a paradise. So professional and creative!",
+    author: "Alex & Jamie R.",
+    avatar: "https://randomuser.me/api/portraits/women/44.jpg",
+  },
+  {
+    quote: "Incredible attention to detail. Our garden has never looked better. Highly recommend!",
+    author: "Casey L.",
+    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
+  },
+  {
+    quote: "The best landscaping service in town. They exceeded all our expectations.",
+    author: "Jordan P.",
+    avatar: "https://randomuser.me/api/portraits/women/65.jpg",
+  },
+];
+
+const TestimonialCard = () => {
+  const [index, setIndex] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setVisible(false);
+      setTimeout(() => {
+        setIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
+        setVisible(true);
+      }, 500); // CSS transition duration
+    }, 3000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="absolute bottom-10 left-10 z-20">
+      <div className={`testimonial-card ${visible ? 'fade-in' : 'fade-out'}`}>
+        <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 max-w-sm shadow-lg">
+          <p className="text-gray-800 italic">"{testimonials[index].quote}"</p>
+          <div className="flex items-center mt-3">
+            <img src={testimonials[index].avatar} alt={testimonials[index].author} className="w-10 h-10 rounded-full mr-3" />
+            <p className="text-gray-900 font-semibold">{testimonials[index].author}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TestimonialCard;

src/components/sections/hero/HeroOverlay.tsx

@@ -1,6 +1,7 @@
 import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
+import TestimonialCard from "@/components/custom/TestimonialCard";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import AvatarGroup from "@/components/ui/AvatarGroup";
 
@@ -42,7 +43,7 @@ const HeroOverlay = ({
         aria-hidden="true"
       />
 
-      <div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25">
+      <div className="relative z-10 w-content-width mx-auto pb-40 md:pb-50">
         <div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
           <span className="w-fit px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
 
@@ -73,6 +74,7 @@ const HeroOverlay = ({
             </div>
           )}
         </div>
+        <TestimonialCard />
       </div>
     </section>
   );