blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DD-Testim2/Component.tsx

@@ -1,256 +1,265 @@
-'use client'
-
-import React, { useRef } from 'react'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import { Navigation } from 'swiper/modules'
-import type { Swiper as SwiperInstance } from 'swiper'
-import { cn } from '@/utilities/ui'
-import { Media } from '@/components/Media'
-import RichText from '@/components/RichText'
-import type { Testimonial } from '@/payload-types'
-import 'swiper/css'
-import 'swiper/css/navigation'
-
-export interface Testimonial2BlockProps {
-  awardsTitle?: string
-  testimonialsTitle?: string
-  features?: Array<{
-    title: string
-    company?: string
-    year?: string
-    category?: string
-    link?: string
-    id?: string
-  }>
-  testimonials?: Array<Testimonial | string | number>
-  containerClass?: string
-}
-
-export const DDTestim2: React.FC<Testimonial2BlockProps> = ({
-  awardsTitle = '',
-  testimonialsTitle = '',
-  features = [],
-  testimonials = [],
-  containerClass = ''
-}) => {
-  // Filter and type-guard testimonials
-  const validTestimonials = testimonials?.filter(
-    (t): t is Testimonial => typeof t === 'object' && t !== null
-  )
-
-  const prevButtonRef = useRef(null)
-  const nextButtonRef = useRef(null)
-  const swiperRef = useRef<SwiperInstance | null>(null)
-
-  const swiperOptions = {
-    spaceBetween: 30,
-    slidesPerView: 1,
-    loop: true,
-    modules: [Navigation],
-    navigation: {
-      prevEl: '.custom-swiper-button-prev',
-      nextEl: '.custom-swiper-button-next'
-    },
-    onSwiper: (swiper: SwiperInstance) => {
-      swiperRef.current = swiper
-    }
-  }
-
-  return (
-    <section
-      className={cn(
-        'half-block sub-bg max-w-none mx-0 md:mx-auto prose md:prose-md dark:prose-invert m-0 p-[15px]',
-        containerClass
-      )}
-      id="testimonial2-block"
-    >
-      <div className="w-full max-w-[1500px] mx-auto px-4">
-        <div className="w-full flex flex-wrap lg:flex-nowrap px-0">
-          {/* Awards Section */}
-          {features && features.length > 0 && (
-            <div className="w-full lg:w-1/2 pt-10 pb-10 pl-10 md:pt-[30px] md:pb-[30px] md:pl-5">
-              <div className="mr-0 md:mr-5">
-                <div className="mb-20">
-                  <h3 className="uppercase tracking-[1px]">{awardsTitle}</h3>
-                </div>
-                <div className="flex flex-wrap -mx-[15px] py-[25px] px-[15px] border-b border-white/50">
-                  <div className="w-full md:w-[58.333333%] px-[15px]">
-                    <div className="p-0">
-                      <h6 className="text-sm uppercase tracking-[2px]">Featured Projects</h6>
-                    </div>
-                  </div>
-                  <div className="w-full md:w-[25%] px-[15px]">
-                    <div className="p-0">
-                      <h6 className="text-sm uppercase tracking-[2px]">Category</h6>
-                    </div>
-                  </div>
-                </div>
-
-                {features.map((feature, index) => (
-                  <div
-                    key={feature.id || index}
-                    className="group flex flex-wrap -mx-[15px] py-[25px] px-[15px] border-b border-white/[0.08] relative transition-all duration-400 z-[3] hover:after:h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-0 after:bg-[#fdfdfd29] after:transition-all after:duration-400 after:z-[-1]"
-                  >
-                    <div className="w-full md:w-[58.333333%] px-[15px]">
-                      <div className="p-0 flex justify-start">
-                        <h6 className="text-stone-200 dark:text-stone-200 transition-all duration-400 dark:group-hover:text-white light:group-hover:text-[#0c0c0c]">
-                          {feature.title}
-                          {feature.title.length < 25 && <br />}
-                          <span className="text-sm opacity-70 ml-[15px]">
-                            {feature.company} <span>{feature.year}</span>
-                          </span>
-                        </h6>
-                      </div>
-                    </div>
-                    <div className="w-full flex md:w-[25%] px-[15px]">
-                      <div className="p-0 flex justify-end mr-1 scale-90 origin-right">
-                        <h6 className="text-stone-200 dark:text-stone-200 transition-all duration-400">
-                          {feature.category}
-                        </h6>
-                        <a href={feature.link} className="ml-2 mt-2 inline-block scale-110">
-                          <svg
-                            width="18"
-                            height="18"
-                            viewBox="0 0 18 18"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="transition-transform duration-300 ease-in-out group-hover:translate-x-[3px] group-hover:-translate-y-[3px]"
-                          >
-                            <path
-                              d="M13.922 4.5V11.8125C13.922 11.9244 13.8776 12.0317 13.7985 12.1108C13.7193 12.1899 13.612 12.2344 13.5002 12.2344C13.3883 12.2344 13.281 12.1899 13.2018 12.1108C13.1227 12.0317 13.0783 11.9244 13.0783 11.8125V5.51953L4.79547 13.7953C4.71715 13.8736 4.61092 13.9176 4.50015 13.9176C4.38939 13.9176 4.28316 13.8736 4.20484 13.7953C4.12652 13.717 4.08252 13.6108 4.08252 13.5C4.08252 13.3892 4.12652 13.283 4.20484 13.2047L12.4806 4.92188H6.18765C6.07577 4.92188 5.96846 4.87743 5.88934 4.79831C5.81023 4.71919 5.76578 4.61189 5.76578 4.5C5.76578 4.38811 5.81023 4.28081 5.88934 4.20169C5.96846 4.12257 6.07577 4.07813 6.18765 4.07812H13.5002C13.612 4.07813 13.7193 4.12257 13.7985 4.20169C13.8776 4.28081 13.922 4.38811 13.922 4.5Z"
-                              fill="currentColor"
-                            ></path>
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    {/* <div className="w-full md:w-[16.666667%] px-[15px]"></div> */}
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Testimonials Section */}
-          {validTestimonials && validTestimonials.length > 0 && (
-            <div className="w-full lg:w-1/2 pr-0 mr-0">
-              <div className="testim-crev">
-                <div className="p-4 my-4">
-                  <h3 className="uppercase tracking-[1px]">{testimonialsTitle}</h3>
-                </div>
-                <div className="testim-swiper bg-lines pb-16 px-0 -ml-1 rounded-3xl">
-                  <Swiper
-                    id="content-carousel-container-unq-testim"
-                    className="swiper-container"
-                    {...swiperOptions}
-                  >
-                    {validTestimonials.map((testimonial, index) => (
-                      <SwiperSlide
-                        key={testimonial.id || index}
-                        style={{ left: '20px', marginRight: '50px' }}
-                      >
-                        <div className="container item sub-background border-t border-l border-b mb-4 -ml-4 pt-12 pb-10 px-10 rounded-[40px_0px_0px_40px] relative md:pt-[30px] md:pb-0 md:px-5">
-                          <div className="w-full">
-                            <div className="flex items-center">
-                              <div className="ml-auto">
-                                <svg
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  width="256.721"
-                                  height="208.227"
-                                  viewBox="0 0 256.721 208.227"
-                                  className="w-[100px] h-20 mb-10 scale-[4] opacity-10 mr-44 md:w-[110px] md:h-[110px] md:pt-4 md:-mb-16"
-                                >
-                                  <path
-                                    d="M-23.723-530.169v97.327H-121.05v-68.7q0-40.076,13.359-73.472T-62.845-639.9l36.259,28.625Q-63.8-570.244-68.57-530.169Zm158.395,0v97.327H37.345v-68.7q0-40.076,13.359-73.472T95.55-639.9l36.259,28.625Q94.6-570.244,89.825-530.169Z"
-                                    transform="translate(121.55 640.568)"
-                                    fill="none"
-                                    stroke="#fff"
-                                    strokeWidth="1"
-                                    opacity="0.322"
-                                  ></path>
-                                </svg>
-                              </div>
-                            </div>
-                            <div className="text">
-                              {testimonial.content && (
-                                <RichText
-                                  data={testimonial.content}
-                                  enableGutter={false}
-                                  className=" text-stone-200 dark:text-stone-200"
-                                />
-                              )}
-                            </div>
-                            <div className="flex items-center mt-10 md:-ml-5">
-                              <div className="relative p-5 rounded-[0_30px_0_0] w-20 h-20 overflow-hidden md:mb-0 md:p-0 md:flex md:w-auto">
-                                <div className="w-full h-full rounded-full overflow-hidden invert-[0.8] dark:invert-[0] object-cover">
-                                  {testimonial.companyLogo &&
-                                  typeof testimonial.companyLogo === 'object' ? (
-                                    <Media
-                                      resource={testimonial.companyLogo}
-                                      imgClassName="object-cover"
-                                    />
-                                  ) : (
-                                    <svg
-                                      className="w-full h-full opacity-20"
-                                      viewBox="0 0 24 24"
-                                      fill="none"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
-                                        fill="currentColor"
-                                      />
-                                    </svg>
-                                  )}
-                                </div>
-                              </div>
-                              <div className="text-left ml-[30px] md:ml-0 md:mt-0 md:max-w-[55vw]">
-                                {testimonial.clientName && (
-                                  <RichText
-                                    data={testimonial.clientName}
-                                    enableGutter={false}
-                                    className=" text-stone-200 dark:text-stone-200"
-                                  />
-                                )}
-                                {testimonial.company && (
-                                  <div
-                                    className="text-alt scale-95 origin-top-left opacity-100"
-                                    style={{ maxWidth: '280px', marginTop: '-8px' }}
-                                  >
-                                    <RichText
-                                      data={testimonial.company}
-                                      enableGutter={false}
-                                      className="text-sm"
-                                    />
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </SwiperSlide>
-                    ))}
-                  </Swiper>
-
-                  {/* Navigation Buttons */}
-                  <div className="flex gap-12 justify-start mt-8 ml-8">
-                    <div
-                      ref={prevButtonRef}
-                      className="swiper-button-prev custom-swiper-button-prev relative w-[20px] h-[20px] rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 bg-transparent hover:border-white/50 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed"
-                    ></div>
-                    <div
-                      ref={nextButtonRef}
-                      className="swiper-button-next custom-swiper-button-next relative w-[20px] h-[20px] rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 bg-transparent hover:border-white/50 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default DDTestim2
+'use client'
+
+import React, { useRef } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Navigation } from 'swiper/modules'
+import type { Swiper as SwiperInstance } from 'swiper'
+import { cn } from '@/utilities/ui'
+import { Media } from '@/components/Media'
+import RichText from '@/components/RichText'
+import type { Testimonial } from '@/payload-types'
+import 'swiper/css'
+import 'swiper/css/navigation'
+
+export interface Testimonial2BlockProps {
+  awardsTitle?: string
+  testimonialsTitle?: string
+  features?: Array<{
+    title: string
+    company?: string
+    year?: string
+    category?: string
+    link?: string
+    id?: string
+  }>
+  testimonials?: Array<Testimonial | string | number>
+  containerClass?: string
+}
+
+export const DDTestim2: React.FC<Testimonial2BlockProps> = ({
+  awardsTitle = '',
+  testimonialsTitle = '',
+  features = [],
+  testimonials = [],
+  containerClass = '',
+}) => {
+  // Filter and type-guard testimonials
+  const validTestimonials = testimonials?.filter(
+    (t): t is Testimonial => typeof t === 'object' && t !== null,
+  )
+
+  const prevButtonRef = useRef(null)
+  const nextButtonRef = useRef(null)
+  const swiperRef = useRef<SwiperInstance | null>(null)
+
+  const swiperOptions = {
+    spaceBetween: 30,
+    slidesPerView: 1,
+    loop: true,
+    modules: [Navigation],
+    navigation: {
+      prevEl: '.custom-swiper-button-prev',
+      nextEl: '.custom-swiper-button-next',
+    },
+    onSwiper: (swiper: SwiperInstance) => {
+      swiperRef.current = swiper
+    },
+  }
+
+  return (
+    <section
+      className={cn(
+        'half-block sub-bg relative w-screen max-w-none prose md:prose-md dark:prose-invert m-0 p-[15px]',
+        containerClass,
+      )}
+      id="testimonial2-block"
+      style={{ left: '50%', marginLeft: '-50vw', width: '100vw', maxWidth: 'none' }}
+    >
+      <div className="w-full max-w-none px-0">
+        <div className="w-full flex flex-wrap lg:flex-nowrap px-0">
+          {/* Awards Section */}
+          {features && features.length > 0 && (
+            <div className="w-full lg:w-1/2 pt-10 pb-10 pl-10 md:pt-[30px] md:pb-[30px] md:pl-5">
+              <div className="mr-0 md:mr-5">
+                <div className="mb-20">
+                  <h3 className="uppercase tracking-[1px] text-stone-900 dark:text-stone-100">
+                    {awardsTitle}
+                  </h3>
+                </div>
+                <div className="flex flex-wrap -mx-[15px] py-[25px] px-[15px] border-b border-stone-300 dark:border-white/20">
+                  <div className="w-full md:w-[58.333333%] px-[15px]">
+                    <div className="p-0">
+                      <h6 className="text-sm uppercase tracking-[2px] text-stone-900 dark:text-stone-100">
+                        Featured Projects
+                      </h6>
+                    </div>
+                  </div>
+                  <div className="w-full md:w-[25%] px-[15px]">
+                    <div className="p-0">
+                      <h6 className="text-sm uppercase tracking-[2px] text-stone-900 dark:text-stone-100">
+                        Category
+                      </h6>
+                    </div>
+                  </div>
+                </div>
+
+                {features.map((feature, index) => (
+                  <div
+                    key={feature.id || index}
+                    className="group flex flex-wrap -mx-[15px] py-[25px] px-[15px] border-b border-stone-300 dark:border-white/10 relative transition-all duration-400 z-[3] hover:after:h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-0 after:bg-[#fdfdfd29] after:transition-all after:duration-400 after:z-[-1]"
+                  >
+                    <div className="w-full md:w-[58.333333%] px-[15px]">
+                      <div className="p-0 flex justify-start">
+                        <h6 className="text-stone-800 transition-all duration-400 group-hover:!text-stone-950 dark:text-stone-200 dark:group-hover:!text-white">
+                          {feature.title}
+                          {feature.title.length < 25 && <br />}
+                          <span className="text-sm opacity-70 ml-[15px]">
+                            {feature.company} <span>{feature.year}</span>
+                          </span>
+                        </h6>
+                      </div>
+                    </div>
+                    <div className="w-full flex md:w-[25%] px-[15px]">
+                      <div className="p-0 flex justify-end mr-1 scale-90 origin-right">
+                        <h6 className="text-stone-800 transition-all duration-400 group-hover:!text-stone-950 dark:text-stone-200 dark:group-hover:!text-white">
+                          {feature.category}
+                        </h6>
+                        <a href={feature.link} className="ml-2 mt-2 inline-block scale-110">
+                          <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 18 18"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="transition-transform duration-300 ease-in-out group-hover:translate-x-[3px] group-hover:-translate-y-[3px]"
+                          >
+                            <path
+                              d="M13.922 4.5V11.8125C13.922 11.9244 13.8776 12.0317 13.7985 12.1108C13.7193 12.1899 13.612 12.2344 13.5002 12.2344C13.3883 12.2344 13.281 12.1899 13.2018 12.1108C13.1227 12.0317 13.0783 11.9244 13.0783 11.8125V5.51953L4.79547 13.7953C4.71715 13.8736 4.61092 13.9176 4.50015 13.9176C4.38939 13.9176 4.28316 13.8736 4.20484 13.7953C4.12652 13.717 4.08252 13.6108 4.08252 13.5C4.08252 13.3892 4.12652 13.283 4.20484 13.2047L12.4806 4.92188H6.18765C6.07577 4.92188 5.96846 4.87743 5.88934 4.79831C5.81023 4.71919 5.76578 4.61189 5.76578 4.5C5.76578 4.38811 5.81023 4.28081 5.88934 4.20169C5.96846 4.12257 6.07577 4.07813 6.18765 4.07812H13.5002C13.612 4.07813 13.7193 4.12257 13.7985 4.20169C13.8776 4.28081 13.922 4.38811 13.922 4.5Z"
+                              fill="currentColor"
+                            ></path>
+                          </svg>
+                        </a>
+                      </div>
+                    </div>
+                    {/* <div className="w-full md:w-[16.666667%] px-[15px]"></div> */}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Testimonials Section */}
+          {validTestimonials && validTestimonials.length > 0 && (
+            <div className="w-full lg:w-1/2 pr-0 mr-0">
+              <div className="testim-crev">
+                <div className="p-4 my-4">
+                  <h3 className="uppercase tracking-[1px] text-stone-900 dark:text-stone-100">
+                    {testimonialsTitle}
+                  </h3>
+                </div>
+                <div className="testim-swiper bg-lines px-0 -ml-1 rounded-3xl">
+                  <Swiper
+                    id="content-carousel-container-unq-testim"
+                    className="swiper-container"
+                    {...swiperOptions}
+                  >
+                    {validTestimonials.map((testimonial, index) => (
+                      <SwiperSlide
+                        key={testimonial.id || index}
+                        style={{ left: '20px', marginRight: '50px' }}
+                      >
+                        <div className="container item sub-background border-t border-l border-b border-stone-300 hover:border-stone-400 dark:border-stone-700 dark:hover:border-stone-600 mb-4 -ml-4 pt-12 pb-10 pl-10 !pr-0 shadow-lg rounded-[40px_0px_0px_40px] relative md:pt-[30px] md:pb-0 md:pl-5 md:!pr-0">
+                          <div className="w-full">
+                            <div className="flex items-center">
+                              <div className="ml-auto">
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="256.721"
+                                  height="208.227"
+                                  viewBox="0 0 256.721 208.227"
+                                  className="w-[100px] h-20 mb-10 scale-[4] opacity-10 mr-44 md:w-[110px] md:h-[110px] md:pt-4 md:-mb-16"
+                                >
+                                  <path
+                                    d="M-23.723-530.169v97.327H-121.05v-68.7q0-40.076,13.359-73.472T-62.845-639.9l36.259,28.625Q-63.8-570.244-68.57-530.169Zm158.395,0v97.327H37.345v-68.7q0-40.076,13.359-73.472T95.55-639.9l36.259,28.625Q94.6-570.244,89.825-530.169Z"
+                                    transform="translate(121.55 640.568)"
+                                    fill="none"
+                                    stroke="#fff"
+                                    strokeWidth="1"
+                                    opacity="0.322"
+                                  ></path>
+                                </svg>
+                              </div>
+                            </div>
+                            <div className="text">
+                              {testimonial.content && (
+                                <RichText
+                                  data={testimonial.content}
+                                  enableGutter={false}
+                                  className="!text-stone-900 [&_.payload-richtext]:!text-stone-900 [&_.payload-richtext_*]:!text-stone-900 dark:!text-stone-100 dark:[&_.payload-richtext]:!text-stone-100 dark:[&_.payload-richtext_*]:!text-stone-100"
+                                />
+                              )}
+                            </div>
+                            <div className="flex items-center mt-10 md:-ml-5">
+                              <div className="relative p-5 rounded-[0_30px_0_0] w-20 h-20 overflow-hidden md:mb-0 md:p-0 md:flex md:w-auto">
+                                <div className="w-full h-full rounded-full overflow-hidden invert-[0.8] dark:invert-[0] object-cover">
+                                  {testimonial.companyLogo &&
+                                  typeof testimonial.companyLogo === 'object' ? (
+                                    <Media
+                                      resource={testimonial.companyLogo}
+                                      imgClassName="object-cover"
+                                    />
+                                  ) : (
+                                    <svg
+                                      className="w-full h-full opacity-20"
+                                      viewBox="0 0 24 24"
+                                      fill="none"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
+                                        fill="currentColor"
+                                      />
+                                    </svg>
+                                  )}
+                                </div>
+                              </div>
+                              <div className="text-left ml-[30px] md:ml-0 md:mt-0 md:max-w-[55vw0] gap-4">
+                                {testimonial.clientName && (
+                                  <RichText
+                                    data={testimonial.clientName}
+                                    enableGutter={false}
+                                    className="!text-stone-900 [&_.payload-richtext]:!text-stone-900 [&_.payload-richtext_*]:!text-stone-900 dark:!text-stone-100 dark:[&_.payload-richtext]:!text-stone-100 dark:[&_.payload-richtext_*]:!text-stone-100"
+                                  />
+                                )}
+                                {testimonial.company && (
+                                  <div
+                                    className="text-alt scale-95 origin-top-left opacity-100 pt-2"
+                                    style={{ maxWidth: '280px', marginTop: '-8px' }}
+                                  >
+                                    <RichText
+                                      data={testimonial.company}
+                                      enableGutter={false}
+                                      className="text-sm !text-stone-900 [&_.payload-richtext]:!text-stone-900 [&_.payload-richtext_*]:!text-stone-900 dark:!text-stone-100 dark:[&_.payload-richtext]:!text-stone-100 dark:[&_.payload-richtext_*]:!text-stone-100"
+                                    />
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </SwiperSlide>
+                    ))}
+                  </Swiper>
+
+                  {/* Navigation Buttons */}
+                  <div className="pointer-events-none flex min-h-14 items-center justify-between px-4 py-3">
+                    <div
+                      ref={prevButtonRef}
+                      className="swiper-button-prev custom-swiper-button-prev pointer-events-auto !relative !inset-auto !m-0 !h-5 !w-5 rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 bg-transparent hover:border-white/50 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed after:!text-[8px]"
+                    ></div>
+                    <div
+                      ref={nextButtonRef}
+                      className="swiper-button-next custom-swiper-button-next pointer-events-auto !relative !inset-auto !m-0 !h-5 !w-5 rounded-full flex items-center justify-center cursor-pointer transition-all duration-300 bg-transparent hover:border-white/50 hover:bg-white/5 disabled:opacity-30 disabled:cursor-not-allowed after:!text-[8px]"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default DDTestim2