blocks-dusted 0.1.11 → 0.1.13

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

@@ -1,247 +1,247 @@
-'use client'
-
-import React, { useId, useEffect, useState } from 'react'
-import { motion } from 'framer-motion'
-import { Swiper, SwiperSlide } from 'swiper/react'
-import { Navigation, Pagination } from 'swiper/modules'
-import 'swiper/css'
-import 'swiper/css/navigation'
-import 'swiper/css/pagination'
-import { cn } from '@/utilities/ui'
-import RichText from '@/components/RichText/index'
-// import { Media } from '@/components/Media'
-import Image from 'next/image'
-
-export type TestimonialItem = {
-  id: string
-  clientName: any
-  designation: any
-  company: any
-  content: any
-  companyLogo?: any
-}
-
-export type TestimonialBlockProps = {
-  testimonials: TestimonialItem[]
-  heading?: any
-  testimonialClass?: string
-  sectionId?: string
-  subHeader?: string
-  showPagination?: boolean
-  showNavigation?: boolean
-  slidesPerViewTablet?: number
-  slidesPerViewDesktop?: number
-  carouselSpeed?: number
-}
-
-export const DDTestim: React.FC<TestimonialBlockProps> = ({
-  testimonials,
-  heading,
-  testimonialClass,
-  sectionId,
-  subHeader,
-  showPagination = true,
-  showNavigation = true,
-  slidesPerViewTablet = 2,
-  slidesPerViewDesktop = 3,
-  carouselSpeed = 1000
-}) => {
-  const uniqueId = useId().replace(/:/g, '')
-  const [swiperReady, setSwiperReady] = useState(false)
-
-  useEffect(() => {
-    setSwiperReady(true)
-  }, [])
-
-  if (!testimonials || testimonials.length === 0) return null
-
-  return (
-    <section
-      className={cn(
-        'testimonialsSwiper relative px-0 pb-16 pt-0',
-        'py-16',
-        '[--swiper-navigation-top-offset:82%] [--swiper-navigation-size:24px] [--swiper-navigation-sides-offset:33rem] [--swiper-navigation-color:var(--color-accent)] [--swiper-pagination-color: #5c4dfd] [--swiper-pagination-bullet-inactive-color:var(--color-alt)]',
-        '[&_.swiper]:min-w-[375px] [&_.swiper]:!w-full [&_.swiper]:!pb-8 [&_.swiper]:![perspective:1200px] [&_.swiper]:![transform-style:preserve-3d]',
-        'max-md:[&_.swiper]:ml-0 max-md:[&_.swiper]:min-w-[300px] max-md:[&_.swiper]:scale-95',
-        '[&_.swiper-wrapper]:ml-[-4rem] [&_.swiper-wrapper]:scale-95 [&_.swiper-wrapper]:gap-8 [&_.swiper-wrapper]:p-0',
-        '[&_.swiper-pagination-fraction]:relative [&_.swiper-pagination-fraction]:top-6 [&_.swiper-pagination-fraction]:mx-auto [&_.swiper-pagination-fraction]:w-fit [&_.swiper-pagination-fraction]:max-w-[90%] [&_.swiper-pagination-fraction]:pt-4',
-        '[&_.swiper-pagination-custom]:relative [&_.swiper-pagination-custom]:top-6 [&_.swiper-pagination-custom]:mx-auto [&_.swiper-pagination-custom]:w-fit [&_.swiper-pagination-custom]:max-w-[90%] [&_.swiper-pagination-custom]:pt-4',
-        '[&_.swiper-horizontal>.swiper-pagination-bullets]:relative [&_.swiper-horizontal>.swiper-pagination-bullets]:top-6 [&_.swiper-horizontal>.swiper-pagination-bullets]:mx-auto [&_.swiper-horizontal>.swiper-pagination-bullets]:w-fit [&_.swiper-horizontal>.swiper-pagination-bullets]:max-w-[90%] [&_.swiper-horizontal>.swiper-pagination-bullets]:pt-4',
-        '[&_.swiper-pagination-bullets.swiper-pagination-horizontal]:relative [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:top-6 [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:mx-auto [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:w-fit [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:max-w-[90%] [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:pt-4',
-        '[html[data-theme="light"]_&_.swiperButtonPrev]:invert [html[data-theme="light"]_&_.swiperButtonPrev]:hue-rotate-[24deg] [html[data-theme="light"]_&_.swiperButtonPrev]:transition-opacity [html[data-theme="light"]_&_.swiperButtonPrev]:duration-300',
-        '[html[data-theme="light"]_&_.swiperButtonNext]:invert [html[data-theme="light"]_&_.swiperButtonNext]:hue-rotate-[24deg] [html[data-theme="light"]_&_.swiperButtonNext]:transition-opacity [html[data-theme="light"]_&_.swiperButtonNext]:duration-300',
-        testimonialClass
-      )}
-      id={sectionId || 'testimonials'}
-    >
-      {(heading || subHeader) && (
-        <div className="mb-10 text-center">
-          {subHeader && <h6 className="text-lg font-semibold">{subHeader}</h6>}
-          {heading && swiperReady && (
-            <RichText
-              className="mb-6 text-2xl font-bold md:text-3xl"
-              data={heading}
-              suppressContentEditableWarning
-              suppressHydrationWarning
-            />
-          )}
-        </div>
-      )}
-
-      <div className="relative">
-        {swiperReady && (
-          <Swiper
-            modules={[Navigation, Pagination]}
-            pagination={showPagination ? { clickable: true } : undefined}
-            navigation={
-              showNavigation
-                ? {
-                    nextEl: `.next-${uniqueId}`,
-                    prevEl: `.prev-${uniqueId}`
-                  }
-                : undefined
-            }
-            speed={carouselSpeed}
-            spaceBetween={20}
-            slidesPerView={1}
-            loop={testimonials.length > 1}
-            breakpoints={{
-              768: {
-                slidesPerView: slidesPerViewTablet
-              },
-              1024: {
-                slidesPerView: slidesPerViewDesktop
-              }
-            }}
-            className="swiper-container w-full lg:max-w-full"
-          >
-            {testimonials.map((testimonial) => (
-              <SwiperSlide key={testimonial.id} className="swiper-slide card-bottom-lit">
-                <motion.div
-                  initial={{ opacity: 0, y: 30 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.4 }}
-                  className="m-0 mt-8 flex items-center gap-0 rounded-sm bg-card px-0 shadow-xl"
-                >
-                  <div className="flex-1 p-0">
-                    <div className="relative pb-8 pt-8">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="256.721"
-                        height="208.227"
-                        viewBox="0 0 256.721 208.227"
-                        className="absolute -left-2 -top-10 pt-8 opacity-40"
-                      >
-                        <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="#fff"
-                          stroke="#fff"
-                          strokeWidth="1"
-                          opacity="0.25"
-                        />
-                      </svg>
-                      s
-                      <div className="container p-4 pt-8">
-                        {swiperReady && (
-                          <RichText
-                            suppressContentEditableWarning
-                            suppressHydrationWarning
-                            data={testimonial.content}
-                            className={cn(
-                              'testimonialContent min-h-fit max-h-[50vh] text-stone-200 dark:text-stone-200 max-w-none overflow-hidden px-0 md:px-6',
-                              '[&_.customSpan]:text-base [&_.customSpan]:leading-8 [&_.customSpan]:brightness-125',
-                              '[&_p]:text-base [&_p]:leading-8 [&_p]:brightness-125',
-                              'max-md:max-h-fit max-md:[&_.customSpan]:text-base max-md:[&_.customSpan]:leading-normal'
-                            )}
-                            enableGutter={false}
-                            enableProse={false}
-                          />
-                        )}
-                      </div>
-                    </div>
-
-                    <div className="flex items-center pb-4 shadow-xl">
-                      <div className="bg-4 dark:bg-1 p-4 shadow-xl">
-                        <div className="color-base">
-                          <div className="block">
-                            {swiperReady && (
-                              <RichText
-                                suppressContentEditableWarning
-                                suppressHydrationWarning
-                                enableGutter={false}
-                                enableProse={false}
-                                className="testimonial-clientname text-lg font-semibold text-white"
-                                data={testimonial.clientName}
-                              />
-                            )}
-                          </div>
-                        </div>
-
-                        <div className="color-base font-semibold">
-                          <div className="block">
-                            {swiperReady && (
-                              <RichText
-                                suppressContentEditableWarning
-                                suppressHydrationWarning
-                                data={testimonial.company}
-                                enableGutter={false}
-                                enableProse={false}
-                                className="testimonial-company mt-1 origin-left scale-90 text-xs text-white/80"
-                              />
-                            )}
-                          </div>
-                        </div>
-                      </div>
-
-                      {testimonial.companyLogo?.url && (
-                        <div className="testimonialLogo relative left-2 top-2 ml-auto flex h-auto w-40 items-center justify-center pr-8 opacity-90">
-                          {/* <Media
-                            resource={testimonial.companyLogo}
-                            className="max-h-32 max-w-32 object-contain"
-                          /> */}
-
-                          <Image
-                            src={testimonial.companyLogo.url}
-                            alt={''}
-                            fill
-                            sizes="40px"
-                            className="object-cover object-top"
-                          />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </motion.div>
-              </SwiperSlide>
-            ))}
-          </Swiper>
-        )}
-      </div>
-
-      {showNavigation && (
-        <div className="swiperNavArrows relative top-[-50px] flex justify-center">
-          <button
-            className={cn(
-              `swiperButtonPrev swiper-button-prev prev-${uniqueId}`,
-              'z-[100] h-8 w-10 translate-y-[80%] rotate-[180deg] cursor-pointer rounded-none p-2 opacity-100 transition-all duration-300',
-              'bg-transparent hover:border-white/50 hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-30'
-            )}
-          >
-            <span className="ti-arrow-left relative left-2" />
-          </button>
-
-          <button
-            className={cn(
-              `swiperButtonNext swiper-button-next next-${uniqueId}`,
-              'z-[100] h-8 w-10 translate-y-[80%] rotate-[180deg]  cursor-pointer rounded-none p-2 opacity-100 transition-all duration-300',
-              'bg-transparent hover:border-white/50 hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-30'
-            )}
-          >
-            <span className="ti-arrow-right relative right-2" />
-          </button>
-        </div>
-      )}
-    </section>
-  )
-}
+'use client'
+
+import React, { useId, useEffect, useState } from 'react'
+import { motion } from 'framer-motion'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Navigation, Pagination } from 'swiper/modules'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import { cn } from '@/utilities/ui'
+import RichText from '@/components/RichText/index'
+// import { Media } from '@/components/Media'
+import Image from 'next/image'
+
+export type TestimonialItem = {
+  id: string
+  clientName: any
+  designation: any
+  company: any
+  content: any
+  companyLogo?: any
+}
+
+export type TestimonialBlockProps = {
+  testimonials: TestimonialItem[]
+  heading?: any
+  testimonialClass?: string
+  sectionId?: string
+  subHeader?: string
+  showPagination?: boolean
+  showNavigation?: boolean
+  slidesPerViewTablet?: number
+  slidesPerViewDesktop?: number
+  carouselSpeed?: number
+}
+
+export const DDTestim: React.FC<TestimonialBlockProps> = ({
+  testimonials,
+  heading,
+  testimonialClass,
+  sectionId,
+  subHeader,
+  showPagination = true,
+  showNavigation = true,
+  slidesPerViewTablet = 2,
+  slidesPerViewDesktop = 3,
+  carouselSpeed = 1000,
+}) => {
+  const uniqueId = useId().replace(/:/g, '')
+  const [swiperReady, setSwiperReady] = useState(false)
+
+  useEffect(() => {
+    setSwiperReady(true)
+  }, [])
+
+  if (!testimonials || testimonials.length === 0) return null
+
+  return (
+    <section
+      className={cn(
+        'testimonialsSwiper relative left-1/2 w-screen max-w-none -translate-x-1/2 px-0 pb-16 pt-0',
+        'py-16',
+        '[--swiper-navigation-top-offset:82%] [--swiper-navigation-size:18px] [--swiper-navigation-sides-offset:33rem] [--swiper-navigation-color:var(--color-accent)] [--swiper-pagination-color: #5c4dfd] [--swiper-pagination-bullet-inactive-color:var(--color-alt)]',
+        '[&_.swiper]:min-w-[375px] [&_.swiper]:!w-full [&_.swiper]:!pb-8 [&_.swiper]:![perspective:1200px] [&_.swiper]:![transform-style:preserve-3d]',
+        'max-md:[&_.swiper]:ml-0 max-md:[&_.swiper]:min-w-[300px] max-md:[&_.swiper]:scale-95',
+        '[&_.swiper-wrapper]:scale-95 [&_.swiper-wrapper]:gap-8 [&_.swiper-wrapper]:p-0',
+        '[&_.swiper-pagination-fraction]:relative [&_.swiper-pagination-fraction]:top-6 [&_.swiper-pagination-fraction]:mx-auto [&_.swiper-pagination-fraction]:w-fit [&_.swiper-pagination-fraction]:max-w-[90%] [&_.swiper-pagination-fraction]:pt-4',
+        '[&_.swiper-pagination-custom]:relative [&_.swiper-pagination-custom]:top-6 [&_.swiper-pagination-custom]:mx-auto [&_.swiper-pagination-custom]:w-fit [&_.swiper-pagination-custom]:max-w-[90%] [&_.swiper-pagination-custom]:pt-4',
+        '[&_.swiper-horizontal>.swiper-pagination-bullets]:relative [&_.swiper-horizontal>.swiper-pagination-bullets]:top-6 [&_.swiper-horizontal>.swiper-pagination-bullets]:mx-auto [&_.swiper-horizontal>.swiper-pagination-bullets]:w-fit [&_.swiper-horizontal>.swiper-pagination-bullets]:max-w-[90%] [&_.swiper-horizontal>.swiper-pagination-bullets]:pt-4',
+        '[&_.swiper-pagination-bullets.swiper-pagination-horizontal]:!left-1/2 [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:relative [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:top-6 [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:!w-fit [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:max-w-[90%] [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:!-translate-x-1/2 [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:pt-4',
+        '[html[data-theme="light"]_&_.swiperButtonPrev]:invert [html[data-theme="light"]_&_.swiperButtonPrev]:hue-rotate-[24deg] [html[data-theme="light"]_&_.swiperButtonPrev]:transition-opacity [html[data-theme="light"]_&_.swiperButtonPrev]:duration-300',
+        '[html[data-theme="light"]_&_.swiperButtonNext]:invert [html[data-theme="light"]_&_.swiperButtonNext]:hue-rotate-[24deg] [html[data-theme="light"]_&_.swiperButtonNext]:transition-opacity [html[data-theme="light"]_&_.swiperButtonNext]:duration-300',
+        testimonialClass,
+      )}
+      id={sectionId || 'testimonials'}
+    >
+      {(heading || subHeader) && (
+        <div className="mb-10 text-center">
+          {subHeader && <h6 className="text-lg font-semibold">{subHeader}</h6>}
+          {heading && swiperReady && (
+            <RichText
+              className="mb-6 text-2xl font-bold md:text-3xl"
+              data={heading}
+              suppressContentEditableWarning
+              suppressHydrationWarning
+            />
+          )}
+        </div>
+      )}
+
+      <div className="relative">
+        {swiperReady && (
+          <Swiper
+            modules={[Navigation, Pagination]}
+            pagination={showPagination ? { clickable: true } : undefined}
+            navigation={
+              showNavigation
+                ? {
+                    nextEl: `.next-${uniqueId}`,
+                    prevEl: `.prev-${uniqueId}`,
+                  }
+                : undefined
+            }
+            speed={carouselSpeed}
+            spaceBetween={20}
+            slidesPerView={1}
+            loop={testimonials.length > 1}
+            breakpoints={{
+              768: {
+                slidesPerView: slidesPerViewTablet,
+              },
+              1024: {
+                slidesPerView: slidesPerViewDesktop,
+              },
+            }}
+            className="swiper-container w-full lg:max-w-full"
+          >
+            {testimonials.map((testimonial) => (
+              <SwiperSlide key={testimonial.id} className="swiper-slide card-bottom-lit">
+                <motion.div
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.4 }}
+                  className="m-0 mt-8 flex items-center gap-0 rounded-sm bg-card px-0 shadow-xl"
+                >
+                  <div className="flex-1 p-0">
+                    <div className="relative pb-8 pt-8">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="256.721"
+                        height="208.227"
+                        viewBox="0 0 256.721 208.227"
+                        className="absolute -left-2 -top-10 pt-8 opacity-40 invert-[1] dark:invert-[0]"
+                      >
+                        <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="#fff"
+                          stroke="#fff"
+                          strokeWidth="1"
+                          opacity="0.25"
+                        />
+                      </svg>
+
+                      <div className="container p-4 pt-8">
+                        {swiperReady && (
+                          <RichText
+                            suppressContentEditableWarning
+                            suppressHydrationWarning
+                            data={testimonial.content}
+                            className={cn(
+                              'testimonialContent min-h-fit max-h-[50vh] text-stone-800 dark:text-stone-200 max-w-none overflow-hidden px-0 md:px-6',
+                              '[&_.customSpan]:text-base [&_.customSpan]:leading-8 [&_.customSpan]:brightness-125',
+                              '[&_p]:text-base [&_p]:leading-8 [&_p]:brightness-125',
+                              'max-md:max-h-fit max-md:[&_.customSpan]:text-base max-md:[&_.customSpan]:leading-normal',
+                            )}
+                            enableGutter={false}
+                            enableProse={false}
+                          />
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center pb-4 shadow-xl">
+                      <div className="bg-stone-300 dark:bg-stone-800 p-4 shadow-xl">
+                        <div className="color-base">
+                          <div className="block">
+                            {swiperReady && (
+                              <RichText
+                                suppressContentEditableWarning
+                                suppressHydrationWarning
+                                enableGutter={false}
+                                enableProse={false}
+                                className="testimonial-clientname text-lg font-semibold text-black dark:text-white"
+                                data={testimonial.clientName}
+                              />
+                            )}
+                          </div>
+                        </div>
+
+                        <div className="color-base font-semibold">
+                          <div className="block">
+                            {swiperReady && (
+                              <RichText
+                                suppressContentEditableWarning
+                                suppressHydrationWarning
+                                data={testimonial.company}
+                                enableGutter={false}
+                                enableProse={false}
+                                className="testimonial-company mt-1 origin-left scale-90 text-xs text-black/80 dark:text-white/80"
+                              />
+                            )}
+                          </div>
+                        </div>
+                      </div>
+
+                      {testimonial.companyLogo?.url && (
+                        <div className="testimonialLogo relative left-2 top-2 ml-auto flex h-auto w-40 items-center justify-center pr-8 opacity-90">
+                          {/* <Media
+                            resource={testimonial.companyLogo}
+                            className="max-h-32 max-w-32 object-contain"
+                          /> */}
+
+                          <Image
+                            src={testimonial.companyLogo.url}
+                            alt={''}
+                            fill
+                            sizes="40px"
+                            className="object-cover object-top"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </motion.div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        )}
+      </div>
+
+      {showNavigation && (
+        <div className="swiperNavArrows pointer-events-none relative flex justify-center gap-24 scale-80">
+          <button
+            className={cn(
+              `swiperButtonPrev swiper-button-prev prev-${uniqueId}`,
+              'pointer-events-auto z-[100] !relative !inset-auto !m-0 flex !h-8 !w-8 !translate-y-0 cursor-pointer items-center justify-center rounded-full p-0 opacity-100 transition-all duration-300',
+              'bg-transparent hover:border-white/50 hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-30',
+            )}
+          >
+            <span className="sr-only">Previous testimonial</span>
+          </button>
+
+          <button
+            className={cn(
+              `swiperButtonNext swiper-button-next next-${uniqueId}`,
+              'pointer-events-auto z-[100] !relative !inset-auto !m-0 flex !h-8 !w-8 !translate-y-0 cursor-pointer items-center justify-center rounded-full p-0 opacity-100 transition-all duration-300',
+              'bg-transparent hover:border-white/50 hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-30',
+            )}
+          >
+            <span className="sr-only">Next testimonial</span>
+          </button>
+        </div>
+      )}
+    </section>
+  )
+}