home page parts

components/pages/home/testimonal.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay } from "swiper/modules";
+import Image from "next/image";
+import "swiper/css";
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+
+const testimonials = [
+  {
+    id: 1,
+    quote:
+      "I've witnessed Fireforce in action multiple times, and they never cease to amaze me with their dedication and professionalism. They are the backbone of our safety and security. Thank you, Fireforce!",
+    name: "JOHN SMITH",
+    role: "Manager",
+    avatar: "/images/home/avatar.jpg",
+    rating: 5,
+  },
+  {
+    id: 2,
+    quote:
+      "The team's response time and expertise saved our property from a devastating fire. Their bravery and commitment to protecting our community is truly remarkable. Highly recommend their services!",
+    name: "SARAH JOHNSON",
+    role: "Business Owner",
+    avatar: "/images/home/avatar.jpg",
+    rating: 5,
+  },
+  {
+    id: 3,
+    quote:
+      "Working alongside Fireforce has been an honor. Their training programs and emergency protocols are second to none. They set the standard for fire safety excellence in our region.",
+    name: "MICHAEL DAVIS",
+    role: "Safety Director",
+    avatar: "/images/home/avatar.jpg",
+    rating: 5,
+  },
+];
+
+function StarRating({ rating }: { rating: number }) {
+  return (
+    <div className="flex gap-1">
+      {[...Array(rating)].map((_, i) => (
+        <svg
+          key={i}
+          className="w-4 h-4 md:w-5 md:h-5 text-yellow-400 fill-current"
+          viewBox="0 0 20 20"
+        >
+          <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
+        </svg>
+      ))}
+    </div>
+  );
+}
+
+export function Testimonial() {
+  return (
+    <section className="w-full bg-[#1a1a1a]">
+      <div className="flex flex-col lg:flex-row min-h-[400px] lg:min-h-[500px]">
+        {/* Left Side - Firefighter Image */}
+        <div className="relative w-full lg:w-1/2 h-[300px] sm:h-[400px] lg:h-auto">
+          <Image
+            src="/images/home/testimonal.jpg"
+            alt="Professional firefighter in protective gear"
+            fill
+            className="object-cover object-top"
+            priority
+          />
+        </div>
+
+        {/* Right Side - Testimonial Content with Background */}
+        <div className="relative w-full lg:w-1/2 min-h-[350px] sm:min-h-[400px] lg:min-h-[500px]">
+          {/* Background Image */}
+          <div className="absolute inset-0">
+            <Image
+              src="/images/home/fikrBack.jpg"
+              alt="Firefighters in action"
+              fill
+              className="object-cover"
+            />
+            {/* Gradient Overlay - Direction to the right */}
+            <div className="absolute inset-0 bg-linear-to-r from-[#1a1a1a] via-[#1a1a1a]/80 to-transparent" />
+          </div>
+
+          {/* Content */}
+          <div className="relative z-10 h-full flex flex-col items-start justify-center px-6 sm:px-10 lg:px-12 xl:px-16 py-10 lg:py-0">
+            {/* Header */}
+            <div className="w-full max-w-xl mx-auto mb-5">
+              <div className="flex items-center gap-2">
+                <DotAnimatsiya />
+                <span className="text-white font-semibold text-sm tracking-wider">
+                  TESTIMONIALS
+                </span>
+              </div>
+            </div>
+
+            <Swiper
+              modules={[Autoplay]}
+              autoplay={{
+                delay: 5000,
+                disableOnInteraction: false,
+              }}
+              loop={true}
+              pagination={false}
+              navigation={false}
+              className="w-full max-w-xl"
+            >
+              {testimonials.map((testimonial) => (
+                <SwiperSlide key={testimonial.id}>
+                  <div className="space-y-6">
+                    {/* Quote */}
+                    <p className="text-white text-base sm:text-lg lg:text-xl leading-relaxed">
+                      "{testimonial.quote}"
+                    </p>
+
+                    {/* Author Info */}
+                    <div className="flex items-center gap-3">
+                      <div className="relative w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden">
+                        <Image
+                          src={testimonial.avatar || "/placeholder.svg"}
+                          alt={testimonial.name}
+                          fill
+                          className="object-cover"
+                        />
+                      </div>
+                      <div>
+                        <h4 className="text-white font-bold text-sm sm:text-base">
+                          {testimonial.name}
+                        </h4>
+                        <p className="text-red-600 text-xs sm:text-sm">
+                          {testimonial.role}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Star Rating */}
+                    <StarRating rating={testimonial.rating} />
+                  </div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}