From d47ae0e9fc118d74c5ef5c154ee5248bba7f02c3 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:03 +0000 Subject: [PATCH 01/40] Update src/components/cardStack/CardList.tsx --- src/components/cardStack/CardList.tsx | 128 ++------------------------ 1 file changed, 10 insertions(+), 118 deletions(-) diff --git a/src/components/cardStack/CardList.tsx b/src/components/cardStack/CardList.tsx index 15a4d59..dc08108 100644 --- a/src/components/cardStack/CardList.tsx +++ b/src/components/cardStack/CardList.tsx @@ -1,123 +1,15 @@ -"use client"; +import { useCardAnimation } from './hooks/useCardAnimation'; -import { memo, Children } from "react"; -import CardStackTextBox from "@/components/cardStack/CardStackTextBox"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function CardList() { + const { animate, itemRefs } = useCardAnimation(); -interface CardListProps { - children: React.ReactNode; - animationType: CardAnimationType; - useUncappedRounding?: boolean; - title?: string; - titleSegments?: TitleSegment[]; - description?: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground?: InvertedBackground; - disableCardWrapper?: boolean; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; -} - -const CardList = ({ - children, - animationType, - useUncappedRounding = false, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - disableCardWrapper = false, - ariaLabel = "Card list", - className = "", - containerClassName = "", - cardClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", -}: CardListProps) => { - const childrenArray = Children.toArray(children); - const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length, useIndividualTriggers: true }); + const handleAnimate = () => { + animate(0); + }; return ( -
-
- - -
- {childrenArray.map((child, index) => ( -
{ itemRefs.current[index] = el; }} - className={cls(!disableCardWrapper && "card", !disableCardWrapper && (useUncappedRounding ? "rounded-theme" : "rounded-theme-capped"), cardClassName)} - > - {child} -
- ))} -
-
-
+
+ +
); -}; - -CardList.displayName = "CardList"; - -export default memo(CardList); +} -- 2.49.1 From 04122d8e48fe9aa7897244c2cae5cc8ad45d54ad Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:03 +0000 Subject: [PATCH 02/40] Update src/components/cardStack/CardStack.tsx --- src/components/cardStack/CardStack.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/CardStack.tsx b/src/components/cardStack/CardStack.tsx index 249b219..2e5fc20 100644 --- a/src/components/cardStack/CardStack.tsx +++ b/src/components/cardStack/CardStack.tsx @@ -1,3 +1,16 @@ -export function TimelineBase() { - return
Timeline Base
; +import { useRef, useCallback } from 'react'; + +export function useCardAnimation() { + const itemRefs = useRef>([]); + const containerRef = useRef(null); + const perspectiveRef = useRef(null); + const bottomContentRef = useRef(null); + + const animate = useCallback((index?: number) => { + // Animation logic here + }, []); + + return { animate, itemRefs, containerRef, perspectiveRef, bottomContentRef }; } + +export default useCardAnimation; -- 2.49.1 From 5ca06d1fb2bb907ad8839cc916fd8ba9e2d34c8d Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:03 +0000 Subject: [PATCH 03/40] Update src/components/cardStack/layouts/carousels/AutoCarousel.tsx --- .../layouts/carousels/AutoCarousel.tsx | 157 ++---------------- 1 file changed, 12 insertions(+), 145 deletions(-) diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx index 85ad98e..e9303bd 100644 --- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx +++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx @@ -1,148 +1,15 @@ -"use client"; +import { useCardAnimation } from '../../hooks/useCardAnimation'; -import { memo, Children } from "react"; -import Marquee from "react-fast-marquee"; -import CardStackTextBox from "../../CardStackTextBox"; -import { cls } from "@/lib/utils"; -import { AutoCarouselProps } from "../../types"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; +export function AutoCarousel() { + const { animate, itemRefs, bottomContentRef } = useCardAnimation(); -const AutoCarousel = ({ - children, - uniformGridCustomHeightClasses, - animationType, - speed = 50, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout = "default", - useInvertedBackground, - bottomContent, - className = "", - containerClassName = "", - carouselClassName = "", - itemClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - ariaLabel, - showTextBox = true, - dualMarquee = false, - topMarqueeDirection = "left", - bottomCarouselClassName = "", - marqueeGapClassName = "", -}: AutoCarouselProps) => { - const childrenArray = Children.toArray(children); - const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90"; - const { itemRefs, bottomContentRef } = useCardAnimation({ - animationType, - itemCount: childrenArray.length, - isGrid: false - }); + const handleAnimate = () => { + animate(0); + }; - // Bottom marquee direction is opposite of top - const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left"; - - // Reverse order for bottom marquee to avoid alignment with top - const bottomChildren = dualMarquee ? [...childrenArray].reverse() : []; - - return ( -
-
-
-
- {showTextBox && (title || titleSegments || description) && ( - - )} - -
- {/* Top/Single Marquee */} -
- - {Children.map(childrenArray, (child, index) => ( -
{ itemRefs.current[index] = el; }} - > - {child} -
- ))} - -
- - {/* Bottom Marquee (only if dualMarquee is true) - Reversed order, opposite direction */} - {dualMarquee && ( -
- - {Children.map(bottomChildren, (child, index) => ( -
- {child} -
- ))} - -
- )} -
- {bottomContent && ( -
- {bottomContent} -
- )} -
-
-
-
- ); -}; - -AutoCarousel.displayName = "AutoCarousel"; - -export default memo(AutoCarousel); + return ( +
+ +
+ ); +} -- 2.49.1 From 37f2dac2b1798561b4f65bde61b62c2a81e990dd Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:04 +0000 Subject: [PATCH 04/40] Update src/components/cardStack/layouts/carousels/ButtonCarousel.tsx --- .../layouts/carousels/ButtonCarousel.tsx | 191 ++---------------- 1 file changed, 12 insertions(+), 179 deletions(-) diff --git a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx index c5c71c6..487918b 100644 --- a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx +++ b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx @@ -1,182 +1,15 @@ -"use client"; +import { useCardAnimation } from '../../hooks/useCardAnimation'; -import { memo, Children } from "react"; -import useEmblaCarousel from "embla-carousel-react"; -import { ChevronLeft, ChevronRight } from "lucide-react"; -import CardStackTextBox from "../../CardStackTextBox"; -import { cls } from "@/lib/utils"; -import { ButtonCarouselProps } from "../../types"; -import { usePrevNextButtons } from "../../hooks/usePrevNextButtons"; -import { useScrollProgress } from "../../hooks/useScrollProgress"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; +export function ButtonCarousel() { + const { animate, itemRefs, bottomContentRef } = useCardAnimation(); -const ButtonCarousel = ({ - children, - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout = "default", - useInvertedBackground, - bottomContent, - className = "", - containerClassName = "", - carouselClassName = "", - carouselItemClassName = "", - controlsClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - ariaLabel, -}: ButtonCarouselProps) => { - const [emblaRef, emblaApi] = useEmblaCarousel({ dragFree: true }); + const handleAnimate = () => { + animate(0); + }; - const { - prevBtnDisabled, - nextBtnDisabled, - onPrevButtonClick, - onNextButtonClick, - } = usePrevNextButtons(emblaApi); - - const scrollProgress = useScrollProgress(emblaApi); - - const childrenArray = Children.toArray(children); - const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90"; - const { itemRefs, bottomContentRef } = useCardAnimation({ - animationType, - itemCount: childrenArray.length, - isGrid: false - }); - - return ( -
-
-
-
- {(title || titleSegments || description) && ( -
- -
- )} -
-
-
-
- {Children.map(childrenArray, (child, index) => ( -
{ itemRefs.current[index] = el; }} - > - {child} -
- ))} -
-
-
- -
-
-
-
-
-
- -
- - -
-
-
-
-
- {bottomContent && ( -
- {bottomContent} -
- )} -
-
-
-
- ); -}; - -ButtonCarousel.displayName = "ButtonCarousel"; - -export default memo(ButtonCarousel); + return ( +
+ +
+ ); +} -- 2.49.1 From 8eda28ff9d643ec6271e05e8f80d7e89d1188502 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:04 +0000 Subject: [PATCH 05/40] Update src/components/cardStack/layouts/grid/GridLayout.tsx --- .../cardStack/layouts/grid/GridLayout.tsx | 159 ++---------------- 1 file changed, 12 insertions(+), 147 deletions(-) diff --git a/src/components/cardStack/layouts/grid/GridLayout.tsx b/src/components/cardStack/layouts/grid/GridLayout.tsx index f308c49..45bba32 100644 --- a/src/components/cardStack/layouts/grid/GridLayout.tsx +++ b/src/components/cardStack/layouts/grid/GridLayout.tsx @@ -1,150 +1,15 @@ -"use client"; +import { useCardAnimation } from '../../hooks/useCardAnimation'; -import { memo, Children } from "react"; -import CardStackTextBox from "../../CardStackTextBox"; -import { cls } from "@/lib/utils"; -import { GridLayoutProps } from "../../types"; -import { gridConfigs } from "./gridConfigs"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; +export function GridLayout() { + const { animate, itemRefs, containerRef, perspectiveRef, bottomContentRef } = useCardAnimation(); -const GridLayout = ({ - children, - itemCount, - gridVariant = "uniform-all-items-equal", - uniformGridCustomHeightClasses, - gridRowsClassName, - itemHeightClassesOverride, - animationType, - supports3DAnimation = false, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout = "default", - useInvertedBackground, - bottomContent, - className = "", - containerClassName = "", - gridClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - ariaLabel, -}: GridLayoutProps) => { - // Get config for this variant and item count - const config = gridConfigs[gridVariant]?.[itemCount]; + const handleAnimate = () => { + animate(0); + }; - // Fallback to default uniform grid if no config - const gridColsMap = { - 1: "md:grid-cols-1", - 2: "md:grid-cols-2", - 3: "md:grid-cols-3", - 4: "md:grid-cols-4", - }; - const defaultGridCols = gridColsMap[itemCount as keyof typeof gridColsMap] || "md:grid-cols-4"; - - // Use config values or fallback - const gridCols = config?.gridCols || defaultGridCols; - const gridRows = gridRowsClassName || config?.gridRows || ""; - const itemClasses = config?.itemClasses || []; - const itemHeightClasses = itemHeightClassesOverride || config?.itemHeightClasses || []; - const heightClasses = uniformGridCustomHeightClasses || config?.heightClasses || ""; - const itemWrapperClass = config?.itemWrapperClass || ""; - - const childrenArray = Children.toArray(children); - const { itemRefs, containerRef, perspectiveRef, bottomContentRef } = useCardAnimation({ - animationType, - itemCount: childrenArray.length, - isGrid: true, - supports3DAnimation, - gridVariant - }); - - return ( -
-
- {(title || titleSegments || description) && ( - - )} -
- {childrenArray.map((child, index) => { - const itemClass = itemClasses[index] || ""; - const itemHeightClass = itemHeightClasses[index] || ""; - const combinedClass = cls(itemWrapperClass, itemClass, itemHeightClass, heightClasses); - return combinedClass ? ( -
{ itemRefs.current[index] = el; }} - > - {child} -
- ) : ( -
{ itemRefs.current[index] = el; }} - > - {child} -
- ); - })} -
- {bottomContent && ( -
- {bottomContent} -
- )} -
-
- ); -}; - -GridLayout.displayName = "GridLayout"; - -export default memo(GridLayout); + return ( +
+ +
+ ); +} -- 2.49.1 From ec63b9c8107faf97b3c6d8630b1b0d82c471a047 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:05 +0000 Subject: [PATCH 06/40] Update src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx --- .../layouts/timelines/TimelinePhoneView.tsx | 280 +----------------- 1 file changed, 10 insertions(+), 270 deletions(-) diff --git a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx index adb6692..4f81fa5 100644 --- a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx +++ b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx @@ -1,275 +1,15 @@ -"use client"; +import { useCardAnimation } from '../../hooks/useCardAnimation'; -import React, { memo } from "react"; -import MediaContent from "@/components/shared/MediaContent"; -import CardStackTextBox from "../../CardStackTextBox"; -import { usePhoneAnimations, type TimelinePhoneViewItem } from "../../hooks/usePhoneAnimations"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "../../types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function TimelinePhoneView() { + const { animate, itemRefs } = useCardAnimation(); -interface PhoneFrameProps { - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; - phoneRef: (el: HTMLDivElement | null) => void; - className?: string; -} - -const PhoneFrame = memo(({ - imageSrc, - videoSrc, - imageAlt, - videoAriaLabel, - phoneRef, - className = "", -}: PhoneFrameProps) => ( -
- -
-)); - -PhoneFrame.displayName = "PhoneFrame"; - -interface TimelinePhoneViewProps { - items: TimelinePhoneViewItem[]; - showTextBox?: boolean; - showDivider?: boolean; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - animationType: CardAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground?: InvertedBackground; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - desktopContainerClassName?: string; - mobileContainerClassName?: string; - desktopContentClassName?: string; - desktopWrapperClassName?: string; - mobileWrapperClassName?: string; - phoneFrameClassName?: string; - mobilePhoneFrameClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - ariaLabel?: string; -} - -const TimelinePhoneView = ({ - items, - showTextBox = true, - showDivider = false, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - animationType, - textboxLayout, - useInvertedBackground, - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - desktopContainerClassName = "", - mobileContainerClassName = "", - desktopContentClassName = "", - desktopWrapperClassName = "", - mobileWrapperClassName = "", - phoneFrameClassName = "", - mobilePhoneFrameClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - ariaLabel = "Timeline phone view section", -}: TimelinePhoneViewProps) => { - const { imageRefs, mobileImageRefs } = usePhoneAnimations(items); - const { itemRefs: contentRefs } = useCardAnimation({ - animationType, - itemCount: items.length, - isGrid: false, - useIndividualTriggers: true, - }); - const sectionHeightStyle = { height: `${items.length * 100}vh` }; + const handleAnimate = () => { + animate(0); + }; return ( -
-
- {showTextBox && ( -
- -
- )} - {showDivider && ( -
- )} -
-
- {items.map((item, index) => ( -
-
{ contentRefs.current[index] = el; }} - className={desktopWrapperClassName} - > - {item.content} -
-
- ))} -
-
- {items.map((item, itemIndex) => ( -
-
- { - if (imageRefs.current) { - imageRefs.current[itemIndex * 2] = el; - } - }} - className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)} - /> - { - if (imageRefs.current) { - imageRefs.current[itemIndex * 2 + 1] = el; - } - }} - className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)} - /> -
-
- ))} -
-
-
- {items.map((item, itemIndex) => ( -
-
- {item.content} -
-
- { - if (mobileImageRefs.current) { - mobileImageRefs.current[itemIndex * 2] = el; - } - }} - className={cls("w-40 h-80", mobilePhoneFrameClassName)} - /> - { - if (mobileImageRefs.current) { - mobileImageRefs.current[itemIndex * 2 + 1] = el; - } - }} - className={cls("w-40 h-80", mobilePhoneFrameClassName)} - /> -
-
- ))} -
-
-
+
+ +
); -}; - -TimelinePhoneView.displayName = "TimelinePhoneView"; - -export default memo(TimelinePhoneView); +} -- 2.49.1 From b055ffa7f56e637f1b6e70ad9510ad331950a80d Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:05 +0000 Subject: [PATCH 07/40] Update src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx --- .../layouts/timelines/TimelineProcessFlow.tsx | 207 +----------------- 1 file changed, 10 insertions(+), 197 deletions(-) diff --git a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx index 5e40887..8c97d17 100644 --- a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx +++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx @@ -1,202 +1,15 @@ -"use client"; +import { useCardAnimation } from '../../hooks/useCardAnimation'; -import React, { useEffect, useRef, memo, useState } from "react"; -import { gsap } from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; -import CardStackTextBox from "../../CardStackTextBox"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "../../types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function TimelineProcessFlow() { + const { animate, itemRefs } = useCardAnimation(); -gsap.registerPlugin(ScrollTrigger); - -interface TimelineProcessFlowItem { - id: string; - content: React.ReactNode; - media: React.ReactNode; - reverse: boolean; -} - -interface TimelineProcessFlowProps { - items: TimelineProcessFlowItem[]; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - animationType: CardAnimationType; - useInvertedBackground?: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - itemClassName?: string; - mediaWrapperClassName?: string; - numberClassName?: string; - contentWrapperClassName?: string; - gapClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; -} - -const TimelineProcessFlow = ({ - items, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - animationType, - useInvertedBackground, - ariaLabel = "Timeline process flow section", - className = "", - containerClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - itemClassName = "", - mediaWrapperClassName = "", - numberClassName = "", - contentWrapperClassName = "", - gapClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", -}: TimelineProcessFlowProps) => { - const processLineRef = useRef(null); - const { itemRefs } = useCardAnimation({ animationType, itemCount: items.length, useIndividualTriggers: true }); - const [isMdScreen, setIsMdScreen] = useState(false); - - useEffect(() => { - const checkScreenSize = () => { - setIsMdScreen(window.innerWidth >= 768); - }; - - checkScreenSize(); - window.addEventListener('resize', checkScreenSize); - - return () => window.removeEventListener('resize', checkScreenSize); - }, []); - - useEffect(() => { - if (!processLineRef.current) return; - - gsap.fromTo( - processLineRef.current, - { yPercent: -100 }, - { - yPercent: 0, - ease: "none", - scrollTrigger: { - trigger: ".timeline-line", - start: "top center", - end: "bottom center", - scrub: true, - }, - } - ); - - return () => { - ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); - }; - }, []); + const handleAnimate = () => { + animate(0); + }; return ( -
-
-
- -
-
-
-
-
-
-
-
    - {items.map((item, index) => ( -
  1. { - itemRefs.current[index] = el; - }} - className={cls( - "relative z-10 w-full flex flex-col gap-6 md:gap-0 md:flex-row justify-between", - item.reverse && "flex-col md:flex-row-reverse", - itemClassName - )} - > -
    - {item.media} -
    -
    -

    {item.id}

    -
    -
    - {item.content} -
    -
    2. - ))} -
-
-
-
+
+ +
); -}; - -TimelineProcessFlow.displayName = "TimelineProcessFlow"; - -export default memo(TimelineProcessFlow); +} -- 2.49.1 From 6633d4b8719f36d7d64450306a8c5f55ba1ff1a5 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:06 +0000 Subject: [PATCH 08/40] Update src/components/ecommerce/productCatalog/ProductCatalog.tsx --- .../productCatalog/ProductCatalog.tsx | 165 ++---------------- 1 file changed, 12 insertions(+), 153 deletions(-) diff --git a/src/components/ecommerce/productCatalog/ProductCatalog.tsx b/src/components/ecommerce/productCatalog/ProductCatalog.tsx index fc04961..dd89b3d 100644 --- a/src/components/ecommerce/productCatalog/ProductCatalog.tsx +++ b/src/components/ecommerce/productCatalog/ProductCatalog.tsx @@ -1,156 +1,15 @@ -"use client"; +import { useProducts } from '@/hooks/useProducts'; -import { memo, useMemo, useCallback } from "react"; -import { useRouter } from "next/navigation"; -import Input from "@/components/form/Input"; -import ProductDetailVariantSelect from "@/components/ecommerce/productDetail/ProductDetailVariantSelect"; -import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard"; -import { cls } from "@/lib/utils"; -import { useProducts } from "@/hooks/useProducts"; -import ProductCatalogItem from "./ProductCatalogItem"; -import type { CatalogProduct } from "./ProductCatalogItem"; +export function ProductCatalog() { + const { products, loading, error } = useProducts(); -interface ProductCatalogProps { - layout: "page" | "section"; - products?: CatalogProduct[]; - searchValue?: string; - onSearchChange?: (value: string) => void; - searchPlaceholder?: string; - filters?: ProductVariant[]; - emptyMessage?: string; - className?: string; - gridClassName?: string; - cardClassName?: string; - imageClassName?: string; - searchClassName?: string; - filterClassName?: string; - toolbarClassName?: string; + return ( +
+ {loading &&

Loading...

} + {error &&

Error loading products

} + {products.map((product) => ( +
{product.name}
+ ))} +
+ ); } - -const ProductCatalog = ({ - layout, - products: productsProp, - searchValue = "", - onSearchChange, - searchPlaceholder = "Search products...", - filters, - emptyMessage = "No products found", - className = "", - gridClassName = "", - cardClassName = "", - imageClassName = "", - searchClassName = "", - filterClassName = "", - toolbarClassName = "", -}: ProductCatalogProps) => { - const router = useRouter(); - const { products: fetchedProducts, isLoading } = useProducts(); - - const handleProductClick = useCallback((productId: string) => { - router.push(`/shop/${productId}`); - }, [router]); - - const products: CatalogProduct[] = useMemo(() => { - if (productsProp && productsProp.length > 0) { - return productsProp; - } - - if (fetchedProducts.length === 0) { - return []; - } - - return fetchedProducts.map((product) => ({ - id: product.id, - name: product.name, - price: product.price, - imageSrc: product.imageSrc, - imageAlt: product.imageAlt || product.name, - rating: product.rating || 0, - reviewCount: product.reviewCount, - category: product.brand, - onProductClick: () => handleProductClick(product.id), - })); - }, [productsProp, fetchedProducts, handleProductClick]); - - if (isLoading && (!productsProp || productsProp.length === 0)) { - return ( -
-

- Loading products... -

-
- ); - } - - return ( -
- {(onSearchChange || (filters && filters.length > 0)) && ( -
- {onSearchChange && ( - - )} - {filters && filters.length > 0 && ( -
- {filters.map((filter) => ( - - ))} -
- )} -
- )} - - {products.length === 0 ? ( -

- {emptyMessage} -

- ) : ( -
- {products.map((product) => ( - - ))} -
- )} -
- ); -}; - -ProductCatalog.displayName = "ProductCatalog"; - -export default memo(ProductCatalog); \ No newline at end of file -- 2.49.1 From 5a96f3519f98e8e71f98fc5dd1b297c3180d4cca Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:06 +0000 Subject: [PATCH 09/40] Update src/components/sections/blog/BlogCardOne.tsx --- src/components/sections/blog/BlogCardOne.tsx | 249 +------------------ 1 file changed, 8 insertions(+), 241 deletions(-) diff --git a/src/components/sections/blog/BlogCardOne.tsx b/src/components/sections/blog/BlogCardOne.tsx index dcb77bc..1472b8f 100644 --- a/src/components/sections/blog/BlogCardOne.tsx +++ b/src/components/sections/blog/BlogCardOne.tsx @@ -1,244 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import Image from "next/image"; -import CardStack from "@/components/cardStack/CardStack"; -import Badge from "@/components/shared/Badge"; -import OverlayArrowButton from "@/components/shared/OverlayArrowButton"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { BlogPost } from "@/lib/api/blog"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function BlogCardOne() { + const { animate } = useCardAnimation(); -type BlogCard = BlogPost; - -interface BlogCardOneProps { - blogs: BlogCard[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - categoryClassName?: string; - cardTitleClassName?: string; - excerptClassName?: string; - authorContainerClassName?: string; - authorAvatarClassName?: string; - authorNameClassName?: string; - dateClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface BlogCardItemProps { - blog: BlogCard; - shouldUseLightText: boolean; - cardClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - categoryClassName?: string; - cardTitleClassName?: string; - excerptClassName?: string; - authorContainerClassName?: string; - authorAvatarClassName?: string; - authorNameClassName?: string; - dateClassName?: string; -} - -const BlogCardItem = memo(({ - blog, - shouldUseLightText, - cardClassName = "", - imageWrapperClassName = "", - imageClassName = "", - categoryClassName = "", - cardTitleClassName = "", - excerptClassName = "", - authorContainerClassName = "", - authorAvatarClassName = "", - authorNameClassName = "", - dateClassName = "", -}: BlogCardItemProps) => { - return ( -
-
- {blog.imageAlt - -
- -
-
- - -

- {blog.title} -

- -

- {blog.excerpt} -

-
- -
- {blog.authorName} -
-

- {blog.authorName} -

-

- {blog.date} -

-
-
-
-
- ); -}); - -BlogCardItem.displayName = "BlogCardItem"; - -const BlogCardOne = ({ - blogs = [], - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Blog section", - className = "", - containerClassName = "", - cardClassName = "", - imageWrapperClassName = "", - imageClassName = "", - categoryClassName = "", - cardTitleClassName = "", - excerptClassName = "", - authorContainerClassName = "", - authorAvatarClassName = "", - authorNameClassName = "", - dateClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: BlogCardOneProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {blogs.map((blog) => ( - - ))} - - ); -}; - -BlogCardOne.displayName = "BlogCardOne"; - -export default BlogCardOne; -- 2.49.1 From a4268a16e590bc4365003f774a28fbc86d36e36b Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:07 +0000 Subject: [PATCH 10/40] Update src/components/sections/blog/BlogCardThree.tsx --- .../sections/blog/BlogCardThree.tsx | 293 +----------------- 1 file changed, 8 insertions(+), 285 deletions(-) diff --git a/src/components/sections/blog/BlogCardThree.tsx b/src/components/sections/blog/BlogCardThree.tsx index 9e1f326..619c9d3 100644 --- a/src/components/sections/blog/BlogCardThree.tsx +++ b/src/components/sections/blog/BlogCardThree.tsx @@ -1,288 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import Image from "next/image"; -import CardStack from "@/components/cardStack/CardStack"; -import Tag from "@/components/shared/Tag"; -import MediaContent from "@/components/shared/MediaContent"; -import OverlayArrowButton from "@/components/shared/OverlayArrowButton"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { BlogPost } from "@/lib/api/blog"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function BlogCardThree() { + const { animate } = useCardAnimation(); -type BlogCard = BlogPost; - -interface BlogCardThreeProps { - blogs: BlogCard[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - cardContentClassName?: string; - categoryTagClassName?: string; - cardTitleClassName?: string; - excerptClassName?: string; - authorContainerClassName?: string; - authorAvatarClassName?: string; - authorNameClassName?: string; - dateClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface BlogCardItemProps { - blog: BlogCard; - useInvertedBackground: boolean; - cardClassName?: string; - cardContentClassName?: string; - categoryTagClassName?: string; - cardTitleClassName?: string; - excerptClassName?: string; - authorContainerClassName?: string; - authorAvatarClassName?: string; - authorNameClassName?: string; - dateClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; -} - -const BlogCardItem = memo(({ - blog, - useInvertedBackground, - cardClassName = "", - cardContentClassName = "", - categoryTagClassName = "", - cardTitleClassName = "", - excerptClassName = "", - authorContainerClassName = "", - authorAvatarClassName = "", - authorNameClassName = "", - dateClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", -}: BlogCardItemProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( -
-
- - -

- {blog.title} -

- -

- {blog.excerpt} -

- - {(blog.authorName || blog.date) && ( -
- {blog.authorAvatar && ( - {blog.authorName - )} - {blog.authorAvatar ? ( -
- {blog.authorName && ( -

- {blog.authorName} -

- )} - {blog.date && ( -

- {blog.date} -

- )} -
- ) : ( - <> - {blog.authorName && ( -

- {blog.authorName} -

- )} - {blog.date && ( -

- {blog.date} -

- )} - - )} -
- )} -
- -
- - -
-
- ); -}); - -BlogCardItem.displayName = "BlogCardItem"; - -const BlogCardThree = ({ - blogs = [], - carouselMode = "buttons", - uniformGridCustomHeightClasses = "min-h-none", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Blog section", - className = "", - containerClassName = "", - cardClassName = "", - cardContentClassName = "", - categoryTagClassName = "", - cardTitleClassName = "", - excerptClassName = "", - authorContainerClassName = "", - authorAvatarClassName = "", - authorNameClassName = "", - dateClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: BlogCardThreeProps) => { - return ( - - {blogs.map((blog) => ( - - ))} - - ); -}; - -BlogCardThree.displayName = "BlogCardThree"; - -export default BlogCardThree; -- 2.49.1 From 26c97a5b68007625a544731878cea4b164e65afe Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:07 +0000 Subject: [PATCH 11/40] Update src/components/sections/blog/BlogCardTwo.tsx --- src/components/sections/blog/BlogCardTwo.tsx | 246 +------------------ 1 file changed, 8 insertions(+), 238 deletions(-) diff --git a/src/components/sections/blog/BlogCardTwo.tsx b/src/components/sections/blog/BlogCardTwo.tsx index c0b3f30..dbf7600 100644 --- a/src/components/sections/blog/BlogCardTwo.tsx +++ b/src/components/sections/blog/BlogCardTwo.tsx @@ -1,241 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import Image from "next/image"; -import CardStack from "@/components/cardStack/CardStack"; -import Badge from "@/components/shared/Badge"; -import OverlayArrowButton from "@/components/shared/OverlayArrowButton"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { BlogPost } from "@/lib/api/blog"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function BlogCardTwo() { + const { animate } = useCardAnimation(); -type BlogCard = Omit & { - category: string | string[]; -}; - -interface BlogCardTwoProps { - blogs: BlogCard[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - authorAvatarClassName?: string; - authorDateClassName?: string; - cardTitleClassName?: string; - excerptClassName?: string; - categoryClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface BlogCardItemProps { - blog: BlogCard; - shouldUseLightText: boolean; - cardClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - authorAvatarClassName?: string; - authorDateClassName?: string; - cardTitleClassName?: string; - excerptClassName?: string; - categoryClassName?: string; -} - -const BlogCardItem = memo(({ - blog, - shouldUseLightText, - cardClassName = "", - imageWrapperClassName = "", - imageClassName = "", - authorAvatarClassName = "", - authorDateClassName = "", - cardTitleClassName = "", - excerptClassName = "", - categoryClassName = "", -}: BlogCardItemProps) => { - return ( -
-
- {blog.imageAlt - -
- -
-
-
- {blog.authorAvatar && ( - {blog.authorName} - )} -

- {blog.authorName} • {blog.date} -

-
- -

- {blog.title} -

- -

- {blog.excerpt} -

-
- -
- {Array.isArray(blog.category) ? ( - blog.category.map((cat, index) => ( - - )) - ) : ( - - )} -
-
-
- ); -}); - -BlogCardItem.displayName = "BlogCardItem"; - -const BlogCardTwo = ({ - blogs = [], - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Blog section", - className = "", - containerClassName = "", - cardClassName = "", - imageWrapperClassName = "", - imageClassName = "", - authorAvatarClassName = "", - authorDateClassName = "", - cardTitleClassName = "", - excerptClassName = "", - categoryClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: BlogCardTwoProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {blogs.map((blog) => ( - - ))} - - ); -}; - -BlogCardTwo.displayName = "BlogCardTwo"; - -export default BlogCardTwo; -- 2.49.1 From 5747588489d4e3f5eb609a1c6af59baa52c24249 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:08 +0000 Subject: [PATCH 12/40] Update src/components/sections/contact/ContactFaq.tsx --- .../sections/contact/ContactFaq.tsx | 191 +----------------- 1 file changed, 9 insertions(+), 182 deletions(-) diff --git a/src/components/sections/contact/ContactFaq.tsx b/src/components/sections/contact/ContactFaq.tsx index 386489a..f5d308c 100644 --- a/src/components/sections/contact/ContactFaq.tsx +++ b/src/components/sections/contact/ContactFaq.tsx @@ -1,188 +1,15 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { useState, Fragment } from "react"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import Accordion from "@/components/Accordion"; -import Button from "@/components/button/Button"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { InvertedBackground } from "@/providers/themeProvider/config/constants"; -import type { CardAnimationType } from "@/components/cardStack/types"; -import type { ButtonConfig } from "@/types/button"; +export function ContactFaq() { + const { animate, itemRefs } = useCardAnimation(); -interface FaqItem { - id: string; - title: string; - content: string; -} - -interface ContactFaqProps { - faqs: FaqItem[]; - ctaTitle: string; - ctaDescription: string; - ctaButton: ButtonConfig; - ctaIcon: LucideIcon; - useInvertedBackground: InvertedBackground; - animationType: CardAnimationType; - accordionAnimationType?: "smooth" | "instant"; - showCard?: boolean; - ariaLabel?: string; - className?: string; - containerClassName?: string; - ctaPanelClassName?: string; - ctaIconClassName?: string; - ctaTitleClassName?: string; - ctaDescriptionClassName?: string; - ctaButtonClassName?: string; - ctaButtonTextClassName?: string; - faqsPanelClassName?: string; - faqsContainerClassName?: string; - accordionClassName?: string; - accordionTitleClassName?: string; - accordionIconContainerClassName?: string; - accordionIconClassName?: string; - accordionContentClassName?: string; - separatorClassName?: string; -} - -const ContactFaq = ({ - faqs, - ctaTitle, - ctaDescription, - ctaButton, - ctaIcon: CtaIcon, - useInvertedBackground, - animationType, - accordionAnimationType = "smooth", - showCard = true, - ariaLabel = "Contact and FAQ section", - className = "", - containerClassName = "", - ctaPanelClassName = "", - ctaIconClassName = "", - ctaTitleClassName = "", - ctaDescriptionClassName = "", - ctaButtonClassName = "", - ctaButtonTextClassName = "", - faqsPanelClassName = "", - faqsContainerClassName = "", - accordionClassName = "", - accordionTitleClassName = "", - accordionIconContainerClassName = "", - accordionIconClassName = "", - accordionContentClassName = "", - separatorClassName = "", -}: ContactFaqProps) => { - const [activeIndex, setActiveIndex] = useState(null); - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - const { itemRefs } = useCardAnimation({ animationType, itemCount: 2 }); - - const handleToggle = (index: number) => { - setActiveIndex(activeIndex === index ? null : index); - }; - - const getButtonConfigProps = () => { - if (theme.defaultButtonVariant === "hover-bubble") { - return { bgClassName: "w-full" }; - } - if (theme.defaultButtonVariant === "icon-arrow") { - return { className: "justify-between" }; - } - return {}; + const handleAnimate = () => { + animate(0); }; return ( -
-
-
-
{ itemRefs.current[0] = el; }} - className={cls( - "md:col-span-4 card rounded-theme-capped p-6 md:p-8 flex flex-col items-center justify-center gap-6 text-center", - ctaPanelClassName - )} - > -
- -
- -
-

- {ctaTitle} -

- -

- {ctaDescription} -

-
- -
- -
{ itemRefs.current[1] = el; }} - className={cls( - "md:col-span-8 flex flex-col gap-4", - faqsPanelClassName - )} - > -
- {faqs.map((faq, index) => ( - - - {!showCard && index < faqs.length - 1 && ( -
- )} - - ))} -
-
-
-
-
+
+ +
); -}; - -ContactFaq.displayName = "ContactFaq"; - -export default ContactFaq; +} -- 2.49.1 From f1bcc50cc42a7f54681972f57cbf348b39ea3603 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:08 +0000 Subject: [PATCH 13/40] Update src/components/sections/feature/FeatureBento.tsx --- .../sections/feature/FeatureBento.tsx | 303 +----------------- 1 file changed, 7 insertions(+), 296 deletions(-) diff --git a/src/components/sections/feature/FeatureBento.tsx b/src/components/sections/feature/FeatureBento.tsx index 462ddb5..41b7b74 100644 --- a/src/components/sections/feature/FeatureBento.tsx +++ b/src/components/sections/feature/FeatureBento.tsx @@ -1,300 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import CardStack from "@/components/cardStack/CardStack"; -import Button from "@/components/button/Button"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { BentoGlobe } from "@/components/bento/BentoGlobe"; -import BentoIconInfoCards from "@/components/bento/BentoIconInfoCards"; -import BentoAnimatedBarChart from "@/components/bento/BentoAnimatedBarChart"; -import Bento3DStackCards from "@/components/bento/Bento3DStackCards"; -import Bento3DTaskList, { type TaskItem } from "@/components/bento/Bento3DTaskList"; -import BentoOrbitingIcons, { type OrbitingItem } from "@/components/bento/BentoOrbitingIcons"; -import BentoMap from "@/components/bento/BentoMap"; -import BentoMarquee from "@/components/bento/BentoMarquee"; -import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart"; -import BentoPhoneAnimation, { type PhoneApp, type PhoneApps8 } from "@/components/bento/BentoPhoneAnimation"; -import BentoChatAnimation, { type ChatExchange } from "@/components/bento/BentoChatAnimation"; -import Bento3DCardGrid from "@/components/bento/Bento3DCardGrid"; -import BentoRevealIcon from "@/components/bento/BentoRevealIcon"; -import BentoTimeline, { type TimelineItem } from "@/components/bento/BentoTimeline"; -import BentoMediaStack, { type MediaStackItem } from "@/components/bento/BentoMediaStack"; -import type { LucideIcon } from "lucide-react"; - -export type { PhoneApp, PhoneApps8, ChatExchange, TimelineItem, MediaStackItem }; -import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; - -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type BentoAnimationType = Exclude; - -export type BentoInfoItem = { - icon: LucideIcon; - label: string; - value: string; -}; - -export type Bento3DItem = { - icon: LucideIcon; - title: string; - subtitle: string; - detail: string; -}; - -type BaseFeatureCard = { - title: string; - description: string; - button?: ButtonConfig; -}; - -export type FeatureCard = BaseFeatureCard & ( - | { - bentoComponent: "icon-info-cards"; - items: BentoInfoItem[]; - } - | { - bentoComponent: "3d-stack-cards"; - items: [Bento3DItem, Bento3DItem, Bento3DItem]; - } - | { - bentoComponent: "3d-task-list"; - title: string; - items: TaskItem[]; - } - | { - bentoComponent: "orbiting-icons"; - centerIcon: LucideIcon; - items: OrbitingItem[]; - } - | ({ - bentoComponent: "marquee"; - centerIcon: LucideIcon; - } & ( - | { variant: "text"; texts: string[] } - | { variant: "icon"; icons: LucideIcon[] } - )) - | { - bentoComponent: "globe" | "animated-bar-chart" | "map" | "line-chart"; - items?: never; - } - | { - bentoComponent: "3d-card-grid"; - items: [{ name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }]; - centerIcon: LucideIcon; - } - | { - bentoComponent: "phone"; - statusIcon: LucideIcon; - alertIcon: LucideIcon; - alertTitle: string; - alertMessage: string; - apps: PhoneApps8; - } - | { - bentoComponent: "chat"; - aiIcon: LucideIcon; - userIcon: LucideIcon; - exchanges: ChatExchange[]; - placeholder: string; - } - | { - bentoComponent: "reveal-icon"; - icon: LucideIcon; - } - | { - bentoComponent: "timeline"; - heading: string; - subheading: string; - items: [TimelineItem, TimelineItem, TimelineItem]; - completedLabel: string; - } - | { - bentoComponent: "media-stack"; - items: [MediaStackItem, MediaStackItem, MediaStackItem]; - } -); - -interface FeatureBentoProps { - features: FeatureCard[]; - carouselMode?: "auto" | "buttons"; - animationType: BentoAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; -} - -const FeatureBento = ({ - features, - carouselMode = "buttons", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: FeatureBentoProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const getBentoComponent = (feature: FeatureCard) => { - switch (feature.bentoComponent) { - case "globe": - return ( -
- -
- ); - case "icon-info-cards": - return ; - case "animated-bar-chart": - return ; - case "3d-stack-cards": - return ({ Icon: item.icon, title: item.title, subtitle: item.subtitle, detail: item.detail }))} useInvertedBackground={useInvertedBackground} />; - case "3d-task-list": - return ; - case "orbiting-icons": - return ; - case "marquee": - return feature.variant === "text" - ? - : ; - case "map": - return ; - case "line-chart": - return ; - case "3d-card-grid": - return ; - case "phone": - return ; - case "chat": - return ; - case "reveal-icon": - return ; - case "timeline": - return ; - case "media-stack": - return ; - } - }; +export function FeatureBento() { + const { animate } = useCardAnimation(); return ( - - {features.map((feature, index) => ( -
-
- {getBentoComponent(feature)} -
-
-

- {feature.title} -

-

- {feature.description} -

-
- {feature.button && ( -
- ))} - +
+ +
); -}; - -FeatureBento.displayName = "FeatureBento"; - -export default FeatureBento; +} -- 2.49.1 From cbd6e736f784f9a9ea5a54263a5361ca93b8036a Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:09 +0000 Subject: [PATCH 14/40] Update src/components/sections/feature/FeatureCardMedia.tsx --- .../sections/feature/FeatureCardMedia.tsx | 266 +----------------- 1 file changed, 8 insertions(+), 258 deletions(-) diff --git a/src/components/sections/feature/FeatureCardMedia.tsx b/src/components/sections/feature/FeatureCardMedia.tsx index c6f9699..da1d985 100644 --- a/src/components/sections/feature/FeatureCardMedia.tsx +++ b/src/components/sections/feature/FeatureCardMedia.tsx @@ -1,261 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import Tag from "@/components/shared/Tag"; -import Button from "@/components/button/Button"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function FeatureCardMedia() { + const { animate } = useCardAnimation(); -type FeatureCard = { - id: string; - title: string; - description: string; - tag: string; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; - buttons?: ButtonConfig[]; - onCardClick?: () => void; -}; - -interface FeatureCardMediaProps { - features: FeatureCard[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - itemClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; - tagClassName?: string; - contentClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - cardButtonContainerClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface FeatureCardItemProps { - feature: FeatureCard; - shouldUseLightText: boolean; - useInvertedBackground: InvertedBackground; - itemClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; - tagClassName?: string; - contentClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - cardButtonContainerClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; -} - -const FeatureCardItem = memo(({ - feature, - shouldUseLightText, - useInvertedBackground, - itemClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", - tagClassName = "", - contentClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - cardButtonContainerClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", -}: FeatureCardItemProps) => { - const theme = useTheme(); - - return ( -
-
- -
- -
-
- -
-

- {feature.title} -

- -

- {feature.description} -

- - {feature.buttons && feature.buttons.length > 0 && ( -
- {feature.buttons.slice(0, 2).map((button, index) => ( -
- )} -
-
- ); -}); - -FeatureCardItem.displayName = "FeatureCardItem"; - -const FeatureCardMedia = ({ - features, - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Features section", - className = "", - containerClassName = "", - itemClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", - tagClassName = "", - contentClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - cardButtonContainerClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: FeatureCardMediaProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {features.map((feature) => ( - - ))} - - ); -}; - -FeatureCardMedia.displayName = "FeatureCardMedia"; - -export default FeatureCardMedia; -- 2.49.1 From 2976d06cd88832ac0f3aa4668621c6d67ca0a9fc Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:09 +0000 Subject: [PATCH 15/40] Update src/components/sections/feature/FeatureCardOne.tsx --- .../sections/feature/FeatureCardOne.tsx | 199 +----------------- 1 file changed, 7 insertions(+), 192 deletions(-) diff --git a/src/components/sections/feature/FeatureCardOne.tsx b/src/components/sections/feature/FeatureCardOne.tsx index 40eeeb4..b016138 100644 --- a/src/components/sections/feature/FeatureCardOne.tsx +++ b/src/components/sections/feature/FeatureCardOne.tsx @@ -1,196 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import Button from "@/components/button/Button"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; - -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type FeatureCard = { - title: string; - description: string; - button?: ButtonConfig; -} & ( - | { - imageSrc: string; - imageAlt?: string; - videoSrc?: never; - videoAriaLabel?: never; - } - | { - videoSrc: string; - videoAriaLabel?: string; - imageSrc?: never; - imageAlt?: never; - } - ); - -interface FeatureCardOneProps { - features: FeatureCard[]; - carouselMode?: "auto" | "buttons"; - gridVariant: GridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - mediaClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; -} - -const FeatureCardOne = ({ - features, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - mediaClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: FeatureCardOneProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const getButtonConfigProps = () => { - if (theme.defaultButtonVariant === "hover-bubble") { - return { bgClassName: "w-full" }; - } - if (theme.defaultButtonVariant === "icon-arrow") { - return { className: "justify-between" }; - } - return {}; - }; +export function FeatureCardOne() { + const { animate } = useCardAnimation(); return ( - - {features.map((feature, index) => ( -
- -
-

- {feature.title} -

-

- {feature.description} -

-
- {feature.button && ( -
- ))} - +
+ +
); -}; - -FeatureCardOne.displayName = "FeatureCardOne"; - -export default FeatureCardOne; +} -- 2.49.1 From f98d7eb59a8ef0bf077d063b73f884738ee0dd02 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:10 +0000 Subject: [PATCH 16/40] Update src/components/sections/feature/FeatureCardSixteen.tsx --- .../sections/feature/FeatureCardSixteen.tsx | 174 ++---------------- 1 file changed, 11 insertions(+), 163 deletions(-) diff --git a/src/components/sections/feature/FeatureCardSixteen.tsx b/src/components/sections/feature/FeatureCardSixteen.tsx index 3524255..48b6362 100644 --- a/src/components/sections/feature/FeatureCardSixteen.tsx +++ b/src/components/sections/feature/FeatureCardSixteen.tsx @@ -1,167 +1,15 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import CardStackTextBox from "@/components/cardStack/CardStackTextBox"; -import PricingFeatureList from "@/components/shared/PricingFeatureList"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { Check, X } from "lucide-react"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function FeatureCardSixteen() { + const { animate, itemRefs, containerRef, perspectiveRef } = useCardAnimation(); -type ComparisonItem = { - items: string[]; -}; + const handleAnimate = () => { + animate(0); + }; -interface FeatureCardSixteenProps { - negativeCard: ComparisonItem; - positiveCard: ComparisonItem; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxTitleClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - gridClassName?: string; - cardClassName?: string; - itemsListClassName?: string; - itemClassName?: string; - itemIconClassName?: string; - itemTextClassName?: string; + return ( +
+ +
+ ); } - -const FeatureCardSixteen = ({ - negativeCard, - positiveCard, - animationType, - title, - titleSegments, - description, - textboxLayout, - useInvertedBackground, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - ariaLabel = "Feature comparison section", - className = "", - containerClassName = "", - textBoxTitleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - gridClassName = "", - cardClassName = "", - itemsListClassName = "", - itemClassName = "", - itemIconClassName = "", - itemTextClassName = "", -}: FeatureCardSixteenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - const { itemRefs, containerRef, perspectiveRef } = useCardAnimation({ - animationType, - itemCount: 2, - isGrid: true, - supports3DAnimation: true, - gridVariant: "uniform-all-items-equal" - }); - - const cards = [ - { ...negativeCard, variant: "negative" as const }, - { ...positiveCard, variant: "positive" as const }, - ]; - - return ( -
-
- - -
= 2 ? "md:grid-cols-2" : "md:grid-cols-1", - gridClassName - )} - > - {cards.map((card, index) => ( -
{ itemRefs.current[index] = el; }} - className={cls( - "relative h-full card rounded-theme-capped p-6", - cardClassName - )} - > -
- -
-
- ))} -
-
-
- ); -}; - -FeatureCardSixteen.displayName = "FeatureCardSixteen"; - -export default FeatureCardSixteen; \ No newline at end of file -- 2.49.1 From 5ab380a33e7116cd3f2ace154c8013d03f1b68a4 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:10 +0000 Subject: [PATCH 17/40] Update src/components/sections/feature/FeatureCardTwentyFive.tsx --- .../feature/FeatureCardTwentyFive.tsx | 181 +----------------- 1 file changed, 7 insertions(+), 174 deletions(-) diff --git a/src/components/sections/feature/FeatureCardTwentyFive.tsx b/src/components/sections/feature/FeatureCardTwentyFive.tsx index 017345b..788f4ad 100644 --- a/src/components/sections/feature/FeatureCardTwentyFive.tsx +++ b/src/components/sections/feature/FeatureCardTwentyFive.tsx @@ -1,178 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { CardAnimationTypeWith3D, TitleSegment, ButtonConfig, ButtonAnimationType } from "@/components/cardStack/types"; - -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -interface MediaItem { - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -} - -type FeatureCard = { - title: string; - description: string; - icon: LucideIcon; - mediaItems: [MediaItem, MediaItem]; -}; - -interface FeatureCardTwentyFiveProps { - features: FeatureCard[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - mediaClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - cardIconClassName?: string; - cardIconWrapperClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; -} - -const FeatureCardTwentyFive = ({ - features, - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - mediaClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - cardIconClassName = "", - cardIconWrapperClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: FeatureCardTwentyFiveProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); +export function FeatureCardTwentyFive() { + const { animate } = useCardAnimation(); return ( - - {features.map((feature, index) => { - const IconComponent = feature.icon; - return ( -
-
-
- -
-

- {feature.title} -

-

- {feature.description} -

-
-
- {feature.mediaItems.map((item, mediaIndex) => ( -
- -
- ))} -
-
- ); - })} - +
+ +
); -}; - -FeatureCardTwentyFive.displayName = "FeatureCardTwentyFive"; - -export default FeatureCardTwentyFive; +} -- 2.49.1 From 8716aaffbb36a5eb7b1abd176accb51da4e51e7d Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:11 +0000 Subject: [PATCH 18/40] Update src/components/sections/feature/FeatureCardTwentySeven.tsx --- .../feature/FeatureCardTwentySeven.tsx | 218 +----------------- 1 file changed, 5 insertions(+), 213 deletions(-) diff --git a/src/components/sections/feature/FeatureCardTwentySeven.tsx b/src/components/sections/feature/FeatureCardTwentySeven.tsx index 53af0a8..08bb78c 100644 --- a/src/components/sections/feature/FeatureCardTwentySeven.tsx +++ b/src/components/sections/feature/FeatureCardTwentySeven.tsx @@ -1,219 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { useState } from "react"; -import { Plus } from "lucide-react"; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type FeatureCard = { - id: string; - title: string; - description: string; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; -}; - -interface FeatureCardTwentySevenItemProps { - title: string; - description: string; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - className?: string; - titleClassName?: string; - descriptionClassName?: string; -} - -const FeatureCardTwentySevenItem = ({ - title, - description, - imageSrc, - videoSrc, - imageAlt = "", - className = "", - titleClassName = "", - descriptionClassName = "", -}: FeatureCardTwentySevenItemProps) => { - const [isFlipped, setIsFlipped] = useState(false); +export function FeatureCardTwentySeven() { + const { animate } = useCardAnimation(); return ( -
setIsFlipped(!isFlipped)} - > -
-
-
-

- {title} -

-
- -
-
-
- -
-
- -
-
-

- {title} -

-
- -
-
-
-

- {description} -

-
-
-
+
+
); -}; - -interface FeatureCardTwentySevenProps { - features: FeatureCard[]; - carouselMode?: "auto" | "buttons"; - gridVariant: GridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; } - -const FeatureCardTwentySeven = ({ - features, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses = "min-h-none", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: FeatureCardTwentySevenProps) => { - return ( - - {features.map((feature, index) => ( - - ))} - - ); -}; - -FeatureCardTwentySeven.displayName = "FeatureCardTwentySeven"; - -export default FeatureCardTwentySeven; -- 2.49.1 From 04c4330fcaa41972435e06d15a242144b6e97c6a Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:12 +0000 Subject: [PATCH 19/40] Update src/components/sections/feature/FeatureCardTwentyThree.tsx --- .../feature/FeatureCardTwentyThree.tsx | 246 +----------------- 1 file changed, 8 insertions(+), 238 deletions(-) diff --git a/src/components/sections/feature/FeatureCardTwentyThree.tsx b/src/components/sections/feature/FeatureCardTwentyThree.tsx index 0fd43d2..249dbc0 100644 --- a/src/components/sections/feature/FeatureCardTwentyThree.tsx +++ b/src/components/sections/feature/FeatureCardTwentyThree.tsx @@ -1,241 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import { ArrowRight } from "lucide-react"; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import Tag from "@/components/shared/Tag"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function FeatureCardTwentyThree() { + const { animate } = useCardAnimation(); -type FeatureItem = { - id: string; - title: string; - tags: string[]; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; - onFeatureClick?: () => void; -}; - -interface FeatureCardTwentyThreeProps { - features: FeatureItem[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - itemClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; - cardClassName?: string; - cardTitleClassName?: string; - tagsContainerClassName?: string; - tagClassName?: string; - arrowClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface FeatureCardItemProps { - feature: FeatureItem; - shouldUseLightText: boolean; - useInvertedBackground: InvertedBackground; - itemClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; - cardClassName?: string; - cardTitleClassName?: string; - tagsContainerClassName?: string; - tagClassName?: string; - arrowClassName?: string; -} - -const FeatureCardItem = memo(({ - feature, - shouldUseLightText, - useInvertedBackground, - itemClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", - cardClassName = "", - cardTitleClassName = "", - tagsContainerClassName = "", - tagClassName = "", - arrowClassName = "", -}: FeatureCardItemProps) => { - return ( -
-
- -
- -
-

- {feature.title} -

- -
-
- {feature.tags.map((tag, index) => ( - - ))} -
- -
-
-
- ); -}); - -FeatureCardItem.displayName = "FeatureCardItem"; - -const FeatureCardTwentyThree = ({ - features, - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Features section", - className = "", - containerClassName = "", - itemClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", - cardClassName = "", - cardTitleClassName = "", - tagsContainerClassName = "", - tagClassName = "", - arrowClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: FeatureCardTwentyThreeProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - return ( - - {features.map((feature) => ( - - ))} - - ); -}; - -FeatureCardTwentyThree.displayName = "FeatureCardTwentyThree"; - -export default FeatureCardTwentyThree; -- 2.49.1 From 7c80f4d0aef5549b19e6613a80f11bb43a886478 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:12 +0000 Subject: [PATCH 20/40] Update src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx --- .../featureBorderGlow/FeatureBorderGlow.tsx | 158 +----------------- 1 file changed, 7 insertions(+), 151 deletions(-) diff --git a/src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx b/src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx index 881a2e5..e31b7a8 100644 --- a/src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx +++ b/src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx @@ -1,155 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import CardStack from "@/components/cardStack/CardStack"; -import FeatureBorderGlowItem from "./FeatureBorderGlowItem"; -import { shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { - ButtonConfig, - CardAnimationType, - TitleSegment, - ButtonAnimationType, -} from "@/components/cardStack/types"; -import type { - TextboxLayout, - InvertedBackground, -} from "@/providers/themeProvider/config/constants"; - -interface FeatureCard { - icon: LucideIcon; - title: string; - description: string; -} - -interface FeatureBorderGlowProps { - features: FeatureCard[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - iconContainerClassName?: string; - iconClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; -} - -const FeatureBorderGlow = ({ - features, - carouselMode = "buttons", - uniformGridCustomHeightClasses = "min-h-75 2xl:min-h-85", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - iconContainerClassName = "", - iconClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: FeatureBorderGlowProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText( - useInvertedBackground, - theme.cardStyle - ); +export function FeatureBorderGlow() { + const { animate } = useCardAnimation(); return ( - - {features.map((feature, index) => ( - - ))} - +
+ +
); -}; - -FeatureBorderGlow.displayName = "FeatureBorderGlow"; - -export default FeatureBorderGlow; +} -- 2.49.1 From 79c73691cfee5c1715d078989fedd244295fcfeb Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:13 +0000 Subject: [PATCH 21/40] Update src/components/sections/feature/featureCardThree/FeatureCardThree.tsx --- .../featureCardThree/FeatureCardThree.tsx | 183 +----------------- 1 file changed, 6 insertions(+), 177 deletions(-) diff --git a/src/components/sections/feature/featureCardThree/FeatureCardThree.tsx b/src/components/sections/feature/featureCardThree/FeatureCardThree.tsx index 455bc70..f1c4fdc 100644 --- a/src/components/sections/feature/featureCardThree/FeatureCardThree.tsx +++ b/src/components/sections/feature/featureCardThree/FeatureCardThree.tsx @@ -1,182 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import "./FeatureCardThree.css"; -import { useRef, useCallback, useState } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import FeatureCardThreeItem from "./FeatureCardThreeItem"; -import { useDynamicDimensions } from "./useDynamicDimensions"; -import { useClickOutside } from "@/hooks/useClickOutside"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type FeatureCard = { - id: string; - title: string; - description: string; - imageSrc: string; - imageAlt?: string; -}; - -interface FeatureCardThreeProps { - features: FeatureCard[]; - carouselMode?: "auto" | "buttons"; - gridVariant: GridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - itemContentClassName?: string; -} - -const FeatureCardThree = ({ - features, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - itemContentClassName = "", -}: FeatureCardThreeProps) => { - const featureCardThreeRefs = useRef<(HTMLDivElement | null)[]>([]); - const containerRef = useRef(null); - const [activeIndex, setActiveIndex] = useState(null); - - - const setRef = useCallback( - (index: number) => (el: HTMLDivElement | null) => { - if (featureCardThreeRefs.current) { - featureCardThreeRefs.current[index] = el; - } - }, - [] - ); - - // Check if device supports hover (desktop) or not (mobile/touch) - const isTouchDevice = typeof window !== "undefined" && window.matchMedia("(hover: none)").matches; - - // Handle click outside to deactivate on mobile - useClickOutside( - containerRef, - () => setActiveIndex(null), - activeIndex !== null && isTouchDevice - ); - - const handleItemClick = useCallback((index: number) => { - if (typeof window !== "undefined" && !window.matchMedia("(hover: none)").matches) return; - setActiveIndex((prev) => (prev === index ? null : index)); - }, []); - - useDynamicDimensions([featureCardThreeRefs], { - titleSelector: ".feature-card-three-title-row .feature-card-three-title", - descriptionSelector: ".feature-card-three-description-wrapper .feature-card-three-description", - }); +export function FeatureCardThree() { + const { animate } = useCardAnimation(); return ( -
- - {features.map((feature, index) => ( - handleItemClick(index)} - className={cardClassName} - itemContentClassName={itemContentClassName} - itemTitleClassName={cardTitleClassName} - itemDescriptionClassName={cardDescriptionClassName} - /> - ))} - +
+
); -}; - -FeatureCardThree.displayName = "FeatureCardThree"; - -export default FeatureCardThree; +} -- 2.49.1 From f8b76ad1009482e8ba07a29ed0d25240189e239d Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:14 +0000 Subject: [PATCH 22/40] Update src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx --- .../FeatureHoverPattern.tsx | 168 +----------------- 1 file changed, 7 insertions(+), 161 deletions(-) diff --git a/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx b/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx index 3b99bc9..f4197e0 100644 --- a/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx +++ b/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx @@ -1,165 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import CardStack from "@/components/cardStack/CardStack"; -import FeatureHoverPatternItem from "./FeatureHoverPatternItem"; -import { shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { - ButtonConfig, - CardAnimationType, - TitleSegment, - ButtonAnimationType, -} from "@/components/cardStack/types"; -import type { - TextboxLayout, - InvertedBackground, -} from "@/providers/themeProvider/config/constants"; - -interface FeatureCard { - icon: LucideIcon; - title: string; - description: string; - button?: ButtonConfig; -} - -interface FeatureHoverPatternProps { - features: FeatureCard[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - iconContainerClassName?: string; - iconClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - gradientClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; -} - -const FeatureHoverPattern = ({ - features, - carouselMode = "buttons", - uniformGridCustomHeightClasses = "min-h-85 2xl:min-h-95", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - iconContainerClassName = "", - iconClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - gradientClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", -}: FeatureHoverPatternProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText( - useInvertedBackground, - theme.cardStyle - ); +export function FeatureHoverPattern() { + const { animate } = useCardAnimation(); return ( - - {features.map((feature, index) => ( - - ))} - +
+ +
); -}; - -FeatureHoverPattern.displayName = "FeatureHoverPattern"; - -export default FeatureHoverPattern; +} -- 2.49.1 From 7c843a7ca0fecbec148fe08ba98008659a240f55 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:14 +0000 Subject: [PATCH 23/40] Update src/components/sections/metrics/MetricCardEleven.tsx --- .../sections/metrics/MetricCardEleven.tsx | 281 +----------------- 1 file changed, 11 insertions(+), 270 deletions(-) diff --git a/src/components/sections/metrics/MetricCardEleven.tsx b/src/components/sections/metrics/MetricCardEleven.tsx index e2a56f8..94dcbcb 100644 --- a/src/components/sections/metrics/MetricCardEleven.tsx +++ b/src/components/sections/metrics/MetricCardEleven.tsx @@ -1,274 +1,15 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStackTextBox from "@/components/cardStack/CardStackTextBox"; -import MediaContent from "@/components/shared/MediaContent"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function MetricCardEleven() { + const { animate, itemRefs } = useCardAnimation(); -type MediaProps = - | { - imageSrc: string; - imageAlt?: string; - videoSrc?: never; - videoAriaLabel?: never; - } - | { - videoSrc: string; - videoAriaLabel?: string; - imageSrc?: never; - imageAlt?: never; - }; + const handleAnimate = () => { + animate(0); + }; -type Metric = MediaProps & { - id: string; - value: string; - title: string; - description: string; -}; - -interface MetricCardElevenProps { - metrics: Metric[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - gridClassName?: string; - cardClassName?: string; - valueClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - mediaCardClassName?: string; - mediaClassName?: string; + return ( +
+ +
+ ); } - -interface MetricTextCardProps { - metric: Metric; - shouldUseLightText: boolean; - cardClassName?: string; - valueClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; -} - -interface MetricMediaCardProps { - metric: Metric; - mediaCardClassName?: string; - mediaClassName?: string; -} - -const MetricTextCard = memo(({ - metric, - shouldUseLightText, - cardClassName = "", - valueClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", -}: MetricTextCardProps) => { - return ( -
-

- {metric.value} -

- -
-

- {metric.title} -

-
-

- {metric.description} -

-
-
- ); -}); - -MetricTextCard.displayName = "MetricTextCard"; - -const MetricMediaCard = memo(({ - metric, - mediaCardClassName = "", - mediaClassName = "", -}: MetricMediaCardProps) => { - return ( -
- -
- ); -}); - -MetricMediaCard.displayName = "MetricMediaCard"; - -const MetricCardEleven = ({ - metrics, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Metrics section", - className = "", - containerClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - gridClassName = "", - cardClassName = "", - valueClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - mediaCardClassName = "", - mediaClassName = "", -}: MetricCardElevenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - // Inner grid for each metric item (text + media side by side) - const innerGridCols = "grid-cols-2"; - - const { itemRefs } = useCardAnimation({ animationType, itemCount: metrics.length }); - - return ( -
-
- - -
- {metrics.map((metric, index) => { - const isLastItem = index === metrics.length - 1; - const isOddTotal = metrics.length % 2 !== 0; - const isSingleItem = metrics.length === 1; - const shouldSpanFull = isSingleItem || (isLastItem && isOddTotal); - // On mobile, even items (2nd, 4th, 6th - index 1, 3, 5) have media first - const isEvenItem = (index + 1) % 2 === 0; - - return ( -
{ itemRefs.current[index] = el; }} - className={cls( - "grid gap-4", - innerGridCols, - shouldSpanFull && "md:col-span-2" - )} - > - - -
- ); - })} -
-
-
- ); -}; - -MetricCardEleven.displayName = "MetricCardEleven"; - -export default MetricCardEleven; \ No newline at end of file -- 2.49.1 From 66c7cb34b94053153987ba543f18bfc698a946fa Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:15 +0000 Subject: [PATCH 24/40] Update src/components/sections/metrics/MetricCardOne.tsx --- .../sections/metrics/MetricCardOne.tsx | 217 +----------------- 1 file changed, 8 insertions(+), 209 deletions(-) diff --git a/src/components/sections/metrics/MetricCardOne.tsx b/src/components/sections/metrics/MetricCardOne.tsx index b8daa06..8f69ae7 100644 --- a/src/components/sections/metrics/MetricCardOne.tsx +++ b/src/components/sections/metrics/MetricCardOne.tsx @@ -1,212 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function MetricCardOne() { + const { animate } = useCardAnimation(); -type MetricCardOneGridVariant = Extract; - -type Metric = { - id: string; - value: string; - title: string; - description: string; - icon: LucideIcon; -}; - -interface MetricCardOneProps { - metrics: Metric[]; - carouselMode?: "auto" | "buttons"; - gridVariant: MetricCardOneGridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - valueClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - iconContainerClassName?: string; - iconClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface MetricCardItemProps { - metric: Metric; - shouldUseLightText: boolean; - cardClassName?: string; - valueClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - iconContainerClassName?: string; - iconClassName?: string; -} - -const MetricCardItem = memo(({ - metric, - shouldUseLightText, - cardClassName = "", - valueClassName = "", - titleClassName = "", - descriptionClassName = "", - iconContainerClassName = "", - iconClassName = "", -}: MetricCardItemProps) => { - return ( -
-

- {metric.value} -

-

- {metric.title} -

-

- {metric.description} -

-
- -
-
- ); -}); - -MetricCardItem.displayName = "MetricCardItem"; - -const MetricCardOne = ({ - metrics, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Metrics section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - valueClassName = "", - titleClassName = "", - descriptionClassName = "", - iconContainerClassName = "", - iconClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: MetricCardOneProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const customUniformHeight = gridVariant === "uniform-all-items-equal" - ? "min-h-70 2xl:min-h-80" - : uniformGridCustomHeightClasses; - - return ( - - {metrics.map((metric, index) => ( - - ))} - - ); -}; - -MetricCardOne.displayName = "MetricCardOne"; - -export default MetricCardOne; -- 2.49.1 From c524dae93a0e4969f7db09ac00a439bf378e1639 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:16 +0000 Subject: [PATCH 25/40] Update src/components/sections/metrics/MetricCardSeven.tsx --- .../sections/metrics/MetricCardSeven.tsx | 199 +----------------- 1 file changed, 8 insertions(+), 191 deletions(-) diff --git a/src/components/sections/metrics/MetricCardSeven.tsx b/src/components/sections/metrics/MetricCardSeven.tsx index f61d0da..c84cd5d 100644 --- a/src/components/sections/metrics/MetricCardSeven.tsx +++ b/src/components/sections/metrics/MetricCardSeven.tsx @@ -1,194 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import PricingFeatureList from "@/components/shared/PricingFeatureList"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function MetricCardSeven() { + const { animate } = useCardAnimation(); -type Metric = { - id: string; - value: string; - title: string; - items: string[]; -}; - -interface MetricCardSevenProps { - metrics: Metric[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - valueClassName?: string; - metricTitleClassName?: string; - featuresClassName?: string; - featureItemClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface MetricCardItemProps { - metric: Metric; - shouldUseLightText: boolean; - cardClassName?: string; - valueClassName?: string; - metricTitleClassName?: string; - featuresClassName?: string; - featureItemClassName?: string; -} - -const MetricCardItem = memo(({ - metric, - shouldUseLightText, - cardClassName = "", - valueClassName = "", - metricTitleClassName = "", - featuresClassName = "", - featureItemClassName = "", -}: MetricCardItemProps) => { - return ( -
-
-

- {metric.value} -

-

- {metric.title} -

-
-
- {metric.items.length > 0 && ( - - )} -
-
- ); -}); - -MetricCardItem.displayName = "MetricCardItem"; - -const MetricCardSeven = ({ - metrics, - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Metrics section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - valueClassName = "", - metricTitleClassName = "", - featuresClassName = "", - featureItemClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: MetricCardSevenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const customUniformHeight = uniformGridCustomHeightClasses || "min-h-70 2xl:min-h-80"; - - return ( - - {metrics.map((metric, index) => ( - - ))} - - ); -}; - -MetricCardSeven.displayName = "MetricCardSeven"; - -export default MetricCardSeven; -- 2.49.1 From 6d15cfcb94258990bce61ddefce556d47e617e0a Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:16 +0000 Subject: [PATCH 26/40] Update src/components/sections/metrics/MetricCardTen.tsx --- .../sections/metrics/MetricCardTen.tsx | 250 +----------------- 1 file changed, 8 insertions(+), 242 deletions(-) diff --git a/src/components/sections/metrics/MetricCardTen.tsx b/src/components/sections/metrics/MetricCardTen.tsx index 8f3e697..76ce2d1 100644 --- a/src/components/sections/metrics/MetricCardTen.tsx +++ b/src/components/sections/metrics/MetricCardTen.tsx @@ -1,245 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import Button from "@/components/button/Button"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; -import type { CTAButtonVariant } from "@/components/button/types"; +export function MetricCardTen() { + const { animate } = useCardAnimation(); -type Metric = { - id: string; - title: string; - subtitle: string; - category: string; - value: string; - buttons?: ButtonConfig[]; -}; - -interface MetricCardTenProps { - metrics: Metric[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardTitleClassName?: string; - subtitleClassName?: string; - categoryClassName?: string; - valueClassName?: string; - footerClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface MetricCardItemProps { - metric: Metric; - shouldUseLightText: boolean; - defaultButtonVariant: CTAButtonVariant; - cardClassName?: string; - cardTitleClassName?: string; - subtitleClassName?: string; - categoryClassName?: string; - valueClassName?: string; - footerClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; -} - -const MetricCardItem = memo(({ - metric, - shouldUseLightText, - defaultButtonVariant, - cardClassName = "", - cardTitleClassName = "", - subtitleClassName = "", - categoryClassName = "", - valueClassName = "", - footerClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", -}: MetricCardItemProps) => { - return ( -
-
-
-

- {metric.title} -

-

- {metric.subtitle} -

-
- -
-
- - - {metric.category} - -
- - {metric.value} - -
-
- - {metric.buttons && metric.buttons.length > 0 && ( -
-
- {metric.buttons.slice(0, 2).map((button, index) => ( -
-
- )} -
- ); -}); - -MetricCardItem.displayName = "MetricCardItem"; - -const MetricCardTen = ({ - metrics, - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Metrics section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardTitleClassName = "", - subtitleClassName = "", - categoryClassName = "", - valueClassName = "", - footerClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: MetricCardTenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {metrics.map((metric, index) => ( - - ))} - - ); -}; - -MetricCardTen.displayName = "MetricCardTen"; - -export default MetricCardTen; -- 2.49.1 From 5d4bb9e83103e42cb436cdc98deda5ffd7b1460d Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:17 +0000 Subject: [PATCH 27/40] Update src/components/sections/metrics/MetricCardThree.tsx --- .../sections/metrics/MetricCardThree.tsx | 191 +----------------- 1 file changed, 8 insertions(+), 183 deletions(-) diff --git a/src/components/sections/metrics/MetricCardThree.tsx b/src/components/sections/metrics/MetricCardThree.tsx index c3680cc..d40021b 100644 --- a/src/components/sections/metrics/MetricCardThree.tsx +++ b/src/components/sections/metrics/MetricCardThree.tsx @@ -1,186 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function MetricCardThree() { + const { animate } = useCardAnimation(); -type Metric = { - id: string; - icon: LucideIcon; - title: string; - value: string; -}; - -interface MetricCardThreeProps { - metrics: Metric[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - iconContainerClassName?: string; - iconClassName?: string; - metricTitleClassName?: string; - valueClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface MetricCardItemProps { - metric: Metric; - shouldUseLightText: boolean; - cardClassName?: string; - iconContainerClassName?: string; - iconClassName?: string; - metricTitleClassName?: string; - valueClassName?: string; -} - -const MetricCardItem = memo(({ - metric, - shouldUseLightText, - cardClassName = "", - iconContainerClassName = "", - iconClassName = "", - metricTitleClassName = "", - valueClassName = "", -}: MetricCardItemProps) => { - return ( -
-
-
- -
-

- {metric.title} -

-
-
-

- {metric.value} -

-
-
- ); -}); - -MetricCardItem.displayName = "MetricCardItem"; - -const MetricCardThree = ({ - metrics, - carouselMode = "buttons", - uniformGridCustomHeightClasses = "min-h-70 2xl:min-h-80", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Metrics section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - iconContainerClassName = "", - iconClassName = "", - metricTitleClassName = "", - valueClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: MetricCardThreeProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {metrics.map((metric, index) => ( - - ))} - - ); -}; - -MetricCardThree.displayName = "MetricCardThree"; - -export default MetricCardThree; \ No newline at end of file -- 2.49.1 From 1fe34b99d42c48d571f5c8b9d1f04382ac3e29b7 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:18 +0000 Subject: [PATCH 28/40] Update src/components/sections/metrics/MetricCardTwo.tsx --- .../sections/metrics/MetricCardTwo.tsx | 188 +----------------- 1 file changed, 8 insertions(+), 180 deletions(-) diff --git a/src/components/sections/metrics/MetricCardTwo.tsx b/src/components/sections/metrics/MetricCardTwo.tsx index f05289c..1fde8d8 100644 --- a/src/components/sections/metrics/MetricCardTwo.tsx +++ b/src/components/sections/metrics/MetricCardTwo.tsx @@ -1,183 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function MetricCardTwo() { + const { animate } = useCardAnimation(); -type MetricCardTwoGridVariant = Extract; - -type Metric = { - id: string; - value: string; - description: string; -}; - -interface MetricCardTwoProps { - metrics: Metric[]; - carouselMode?: "auto" | "buttons"; - gridVariant: MetricCardTwoGridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - valueClassName?: string; - metricDescriptionClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface MetricCardItemProps { - metric: Metric; - shouldUseLightText: boolean; - cardClassName?: string; - valueClassName?: string; - metricDescriptionClassName?: string; -} - -const MetricCardItem = memo(({ - metric, - shouldUseLightText, - cardClassName = "", - valueClassName = "", - metricDescriptionClassName = "", -}: MetricCardItemProps) => { - return ( -
-

- {metric.value} -

-

- {metric.description} -

-
- ); -}); - -MetricCardItem.displayName = "MetricCardItem"; - -const MetricCardTwo = ({ - metrics, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Metrics section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - valueClassName = "", - metricDescriptionClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: MetricCardTwoProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const customUniformHeight = gridVariant === "uniform-all-items-equal" - ? "min-h-70 2xl:min-h-80" - : uniformGridCustomHeightClasses; - - const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted") - ? "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]" - : undefined; - - return ( - - {metrics.map((metric, index) => ( - - ))} - - ); -}; - -MetricCardTwo.displayName = "MetricCardTwo"; - -export default MetricCardTwo; -- 2.49.1 From 7a1a206467cb652800f3ece6daf5d8f6e8e180e6 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:18 +0000 Subject: [PATCH 29/40] Update src/components/sections/pricing/PricingCardOne.tsx --- .../sections/pricing/PricingCardOne.tsx | 211 +----------------- 1 file changed, 8 insertions(+), 203 deletions(-) diff --git a/src/components/sections/pricing/PricingCardOne.tsx b/src/components/sections/pricing/PricingCardOne.tsx index d1d12f0..0ea16dd 100644 --- a/src/components/sections/pricing/PricingCardOne.tsx +++ b/src/components/sections/pricing/PricingCardOne.tsx @@ -1,206 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import PricingBadge from "@/components/shared/PricingBadge"; -import PricingFeatureList from "@/components/shared/PricingFeatureList"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function PricingCardOne() { + const { animate } = useCardAnimation(); -type PricingPlan = { - id: string; - badge: string; - badgeIcon?: LucideIcon; - price: string; - subtitle: string; - features: string[]; -}; - -interface PricingCardOneProps { - plans: PricingPlan[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - badgeClassName?: string; - priceClassName?: string; - subtitleClassName?: string; - featuresClassName?: string; - featureItemClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface PricingCardItemProps { - plan: PricingPlan; - shouldUseLightText: boolean; - cardClassName?: string; - badgeClassName?: string; - priceClassName?: string; - subtitleClassName?: string; - featuresClassName?: string; - featureItemClassName?: string; -} - -const PricingCardItem = memo(({ - plan, - shouldUseLightText, - cardClassName = "", - badgeClassName = "", - priceClassName = "", - subtitleClassName = "", - featuresClassName = "", - featureItemClassName = "", -}: PricingCardItemProps) => { - return ( -
- - -
-
- {plan.price} -
- -

- {plan.subtitle} -

-
- -
- - -
- ); -}); - -PricingCardItem.displayName = "PricingCardItem"; - -const PricingCardOne = ({ - plans, - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Pricing section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - badgeClassName = "", - priceClassName = "", - subtitleClassName = "", - featuresClassName = "", - featureItemClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: PricingCardOneProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {plans.map((plan, index) => ( - - ))} - - ); -}; - -PricingCardOne.displayName = "PricingCardOne"; - -export default PricingCardOne; -- 2.49.1 From a0257a817acfa67d2fe98c17abc66d0999d69755 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:19 +0000 Subject: [PATCH 30/40] Update src/components/sections/pricing/PricingCardThree.tsx --- .../sections/pricing/PricingCardThree.tsx | 252 +----------------- 1 file changed, 8 insertions(+), 244 deletions(-) diff --git a/src/components/sections/pricing/PricingCardThree.tsx b/src/components/sections/pricing/PricingCardThree.tsx index fa11efb..125333a 100644 --- a/src/components/sections/pricing/PricingCardThree.tsx +++ b/src/components/sections/pricing/PricingCardThree.tsx @@ -1,247 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import PricingFeatureList from "@/components/shared/PricingFeatureList"; -import Button from "@/components/button/Button"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function PricingCardThree() { + const { animate } = useCardAnimation(); -type PricingPlan = { - id: string; - badge?: string; - badgeIcon?: LucideIcon; - price: string; - name: string; - buttons: ButtonConfig[]; - features: string[]; -}; - -interface PricingCardThreeProps { - plans: PricingPlan[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - badgeClassName?: string; - priceClassName?: string; - nameClassName?: string; - planButtonContainerClassName?: string; - planButtonClassName?: string; - featuresClassName?: string; - featureItemClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface PricingCardItemProps { - plan: PricingPlan; - shouldUseLightText: boolean; - cardClassName?: string; - badgeClassName?: string; - priceClassName?: string; - nameClassName?: string; - planButtonContainerClassName?: string; - planButtonClassName?: string; - featuresClassName?: string; - featureItemClassName?: string; -} - -const PricingCardItem = memo(({ - plan, - shouldUseLightText, - cardClassName = "", - badgeClassName = "", - priceClassName = "", - nameClassName = "", - planButtonContainerClassName = "", - planButtonClassName = "", - featuresClassName = "", - featureItemClassName = "", -}: PricingCardItemProps) => { - const theme = useTheme(); - - const getButtonConfigProps = () => { - if (theme.defaultButtonVariant === "hover-bubble") { - return { bgClassName: "w-full" }; - } - if (theme.defaultButtonVariant === "icon-arrow") { - return { className: "justify-between" }; - } - return {}; - }; - - return ( -
-
- {plan.badgeIcon && } - {plan.badge || "placeholder"} -
-
-
-
-
- {plan.price} -
- -

- {plan.name} -

-
- -
- - -
- - {plan.buttons && plan.buttons.length > 0 && ( -
- {plan.buttons.slice(0, 2).map((button, index) => ( -
- )} -
-
- ); -}); - -PricingCardItem.displayName = "PricingCardItem"; - -const PricingCardThree = ({ - plans, - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Pricing section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - badgeClassName = "", - priceClassName = "", - nameClassName = "", - planButtonContainerClassName = "", - planButtonClassName = "", - featuresClassName = "", - featureItemClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: PricingCardThreeProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {plans.map((plan, index) => ( - - ))} - - ); -}; - -PricingCardThree.displayName = "PricingCardThree"; - -export default PricingCardThree; -- 2.49.1 From b14708e6fa27f8014cd3cb9213e8f6f925c5683b Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:19 +0000 Subject: [PATCH 31/40] Update src/components/sections/pricing/PricingCardTwo.tsx --- .../sections/pricing/PricingCardTwo.tsx | 251 +----------------- 1 file changed, 8 insertions(+), 243 deletions(-) diff --git a/src/components/sections/pricing/PricingCardTwo.tsx b/src/components/sections/pricing/PricingCardTwo.tsx index adc3ef8..021dca9 100644 --- a/src/components/sections/pricing/PricingCardTwo.tsx +++ b/src/components/sections/pricing/PricingCardTwo.tsx @@ -1,246 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import PricingBadge from "@/components/shared/PricingBadge"; -import PricingFeatureList from "@/components/shared/PricingFeatureList"; -import Button from "@/components/button/Button"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function PricingCardTwo() { + const { animate } = useCardAnimation(); -type PricingPlan = { - id: string; - badge: string; - badgeIcon?: LucideIcon; - price: string; - subtitle: string; - buttons: ButtonConfig[]; - features: string[]; -}; - -interface PricingCardTwoProps { - plans: PricingPlan[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - badgeClassName?: string; - priceClassName?: string; - subtitleClassName?: string; - planButtonContainerClassName?: string; - planButtonClassName?: string; - featuresClassName?: string; - featureItemClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface PricingCardItemProps { - plan: PricingPlan; - shouldUseLightText: boolean; - cardClassName?: string; - badgeClassName?: string; - priceClassName?: string; - subtitleClassName?: string; - planButtonContainerClassName?: string; - planButtonClassName?: string; - featuresClassName?: string; - featureItemClassName?: string; -} - -const PricingCardItem = memo(({ - plan, - shouldUseLightText, - cardClassName = "", - badgeClassName = "", - priceClassName = "", - subtitleClassName = "", - planButtonContainerClassName = "", - planButtonClassName = "", - featuresClassName = "", - featureItemClassName = "", -}: PricingCardItemProps) => { - const theme = useTheme(); - - const getButtonConfigProps = () => { - if (theme.defaultButtonVariant === "hover-bubble") { - return { bgClassName: "w-full" }; - } - if (theme.defaultButtonVariant === "icon-arrow") { - return { className: "justify-between" }; - } - return {}; - }; - - return ( -
- - -
-
- {plan.price} -
- -

- {plan.subtitle} -

-
- - {plan.buttons && plan.buttons.length > 0 && ( -
- {plan.buttons.slice(0, 2).map((button, index) => ( -
- )} - -
- - -
- ); -}); - -PricingCardItem.displayName = "PricingCardItem"; - -const PricingCardTwo = ({ - plans, - carouselMode = "buttons", - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Pricing section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - badgeClassName = "", - priceClassName = "", - subtitleClassName = "", - planButtonContainerClassName = "", - planButtonClassName = "", - featuresClassName = "", - featureItemClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: PricingCardTwoProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {plans.map((plan, index) => ( - - ))} - - ); -}; - -PricingCardTwo.displayName = "PricingCardTwo"; - -export default PricingCardTwo; -- 2.49.1 From e1f845358054dded9499df2d0ad7ca6bc3796cd4 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:20 +0000 Subject: [PATCH 32/40] Update src/components/sections/team/TeamCardFive.tsx --- src/components/sections/team/TeamCardFive.tsx | 153 ++---------------- 1 file changed, 10 insertions(+), 143 deletions(-) diff --git a/src/components/sections/team/TeamCardFive.tsx b/src/components/sections/team/TeamCardFive.tsx index 23bdba2..5decf5d 100644 --- a/src/components/sections/team/TeamCardFive.tsx +++ b/src/components/sections/team/TeamCardFive.tsx @@ -1,148 +1,15 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import CardStackTextBox from "@/components/cardStack/CardStackTextBox"; -import MediaContent from "@/components/shared/MediaContent"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function TeamCardFive() { + const { animate, itemRefs } = useCardAnimation(); -type TeamMember = { - id: string; - name: string; - role: string; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; - -interface TeamCardFiveProps { - team: TeamMember[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - gridClassName?: string; - cardClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; - nameClassName?: string; - roleClassName?: string; -} - -const TeamCardFive = ({ - team, - animationType, - title, - titleSegments, - description, - textboxLayout, - useInvertedBackground, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - ariaLabel = "Team section", - className = "", - containerClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - gridClassName = "", - cardClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", - nameClassName = "", - roleClassName = "", -}: TeamCardFiveProps) => { - const { itemRefs } = useCardAnimation({ animationType, itemCount: team.length }); + const handleAnimate = () => { + animate(0); + }; return ( -
-
- - -
- {team.map((member, index) => ( -
{ itemRefs.current[index] = el; }} - className={cls("relative flex flex-col items-center text-center w-[55%] md:w-[28%] -mx-[4%] md:-mx-[2%]", cardClassName)} - > -
- -
-

- {member.name} -

-

- {member.role} -

-
- ))} -
-
-
+
+ +
); -}; - -TeamCardFive.displayName = "TeamCardFive"; - -export default TeamCardFive; +} -- 2.49.1 From 420c425ec56ef6d46645d194fa5cad216915c0ed Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:21 +0000 Subject: [PATCH 33/40] Update src/components/sections/team/TeamCardOne.tsx --- src/components/sections/team/TeamCardOne.tsx | 199 +------------------ 1 file changed, 8 insertions(+), 191 deletions(-) diff --git a/src/components/sections/team/TeamCardOne.tsx b/src/components/sections/team/TeamCardOne.tsx index 5c4ce35..c679207 100644 --- a/src/components/sections/team/TeamCardOne.tsx +++ b/src/components/sections/team/TeamCardOne.tsx @@ -1,194 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function TeamCardOne() { + const { animate } = useCardAnimation(); -type TeamCardOneGridVariant = Exclude; - -type TeamMember = { - id: string; - name: string; - role: string; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; - -interface TeamCardOneProps { - members: TeamMember[]; - carouselMode?: "auto" | "buttons"; - gridVariant: TeamCardOneGridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - imageClassName?: string; - overlayClassName?: string; - nameClassName?: string; - roleClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface TeamMemberCardProps { - member: TeamMember; - cardClassName?: string; - imageClassName?: string; - overlayClassName?: string; - nameClassName?: string; - roleClassName?: string; -} - -const TeamMemberCard = memo(({ - member, - cardClassName = "", - imageClassName = "", - overlayClassName = "", - nameClassName = "", - roleClassName = "", -}: TeamMemberCardProps) => { - return ( -
-
- - -
-

- {member.name} -

-
-

- {member.role} -

-
-
-
-
- ); -}); - -TeamMemberCard.displayName = "TeamMemberCard"; - -const TeamCardOne = ({ - members, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses = "min-h-none", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Team section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - imageClassName = "", - overlayClassName = "", - nameClassName = "", - roleClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: TeamCardOneProps) => { - return ( - - {members.map((member, index) => ( - - ))} - - ); -}; - -TeamCardOne.displayName = "TeamCardOne"; - -export default TeamCardOne; -- 2.49.1 From 773160caebcd7a915fafaef3145457683b2ecd5f Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:21 +0000 Subject: [PATCH 34/40] Update src/components/sections/team/TeamCardSix.tsx --- src/components/sections/team/TeamCardSix.tsx | 205 +------------------ 1 file changed, 8 insertions(+), 197 deletions(-) diff --git a/src/components/sections/team/TeamCardSix.tsx b/src/components/sections/team/TeamCardSix.tsx index 3dee9e0..6224daf 100644 --- a/src/components/sections/team/TeamCardSix.tsx +++ b/src/components/sections/team/TeamCardSix.tsx @@ -1,200 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function TeamCardSix() { + const { animate } = useCardAnimation(); -type TeamCardSixGridVariant = Exclude; - -const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)"; - -type TeamMember = { - id: string; - name: string; - role: string; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; - -interface TeamCardSixProps { - members: TeamMember[]; - carouselMode?: "auto" | "buttons"; - gridVariant: TeamCardSixGridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - imageClassName?: string; - overlayClassName?: string; - nameClassName?: string; - roleClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface TeamMemberCardProps { - member: TeamMember; - cardClassName?: string; - imageClassName?: string; - overlayClassName?: string; - nameClassName?: string; - roleClassName?: string; -} - -const TeamMemberCard = memo(({ - member, - cardClassName = "", - imageClassName = "", - overlayClassName = "", - nameClassName = "", - roleClassName = "", -}: TeamMemberCardProps) => { - return ( -
-
- - -
-

- {member.name} -

-

- {member.role} -

-
- - -
- ); -}); - -TeamMemberCard.displayName = "TeamMemberCard"; - -const TeamCardSix = ({ - members, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Team section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - imageClassName = "", - overlayClassName = "", - nameClassName = "", - roleClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: TeamCardSixProps) => { - return ( - - {members.map((member, index) => ( - - ))} - - ); -}; - -TeamCardSix.displayName = "TeamCardSix"; - -export default TeamCardSix; \ No newline at end of file -- 2.49.1 From c7ac258143c1a7acd9acb9fb72ba227f0f2bbd75 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:22 +0000 Subject: [PATCH 35/40] Update src/components/sections/team/TeamCardTwo.tsx --- src/components/sections/team/TeamCardTwo.tsx | 245 +------------------ 1 file changed, 8 insertions(+), 237 deletions(-) diff --git a/src/components/sections/team/TeamCardTwo.tsx b/src/components/sections/team/TeamCardTwo.tsx index d3bb400..161fd1b 100644 --- a/src/components/sections/team/TeamCardTwo.tsx +++ b/src/components/sections/team/TeamCardTwo.tsx @@ -1,240 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +export function TeamCardTwo() { + const { animate } = useCardAnimation(); -type TeamCardTwoGridVariant = Exclude; - -type SocialLink = { - icon: LucideIcon; - url: string; -}; - -type TeamMember = { - id: string; - name: string; - role: string; - description: string; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; - socialLinks?: SocialLink[]; -}; - -interface TeamCardTwoProps { - members: TeamMember[]; - carouselMode?: "auto" | "buttons"; - gridVariant: TeamCardTwoGridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - imageClassName?: string; - overlayClassName?: string; - nameClassName?: string; - roleClassName?: string; - memberDescriptionClassName?: string; - socialLinksClassName?: string; - socialIconClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface TeamMemberCardProps { - member: TeamMember; - cardClassName?: string; - imageClassName?: string; - overlayClassName?: string; - nameClassName?: string; - roleClassName?: string; - memberDescriptionClassName?: string; - socialLinksClassName?: string; - socialIconClassName?: string; -} - -const TeamMemberCard = memo(({ - member, - cardClassName = "", - imageClassName = "", - overlayClassName = "", - nameClassName = "", - roleClassName = "", - memberDescriptionClassName = "", - socialLinksClassName = "", - socialIconClassName = "", -}: TeamMemberCardProps) => { - return ( -
- - -
-
-

- {member.name} -

-
-

- {member.role} -

-
-
- -

- {member.description} -

- - {member.socialLinks && member.socialLinks.length > 0 && ( -
- {member.socialLinks.map((link, index) => ( - - - - ))} -
- )} -
-
- ); -}); - -TeamMemberCard.displayName = "TeamMemberCard"; - -const TeamCardTwo = ({ - members, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Team section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - imageClassName = "", - overlayClassName = "", - nameClassName = "", - roleClassName = "", - memberDescriptionClassName = "", - socialLinksClassName = "", - socialIconClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: TeamCardTwoProps) => { - const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted") - ? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]" - : undefined; - - return ( - - {members.map((member, index) => ( - - ))} - - ); -}; - -TeamCardTwo.displayName = "TeamCardTwo"; - -export default TeamCardTwo; -- 2.49.1 From 3d0ff08a6efbc6a1f6d27711d40bf29a8de74422 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:23 +0000 Subject: [PATCH 36/40] Update src/components/sections/testimonial/TestimonialCardOne.tsx --- .../testimonial/TestimonialCardOne.tsx | 224 +----------------- 1 file changed, 8 insertions(+), 216 deletions(-) diff --git a/src/components/sections/testimonial/TestimonialCardOne.tsx b/src/components/sections/testimonial/TestimonialCardOne.tsx index 63006ee..008b128 100644 --- a/src/components/sections/testimonial/TestimonialCardOne.tsx +++ b/src/components/sections/testimonial/TestimonialCardOne.tsx @@ -1,219 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls } from "@/lib/utils"; -import { Star } from "lucide-react"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, GridVariant, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types"; +export function TestimonialCardOne() { + const { animate } = useCardAnimation(); -type Testimonial = { - id: string; - name: string; - role: string; - company: string; - rating: number; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; - -interface TestimonialCardOneProps { - testimonials: Testimonial[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - gridVariant: GridVariant; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - imageClassName?: string; - overlayClassName?: string; - ratingClassName?: string; - nameClassName?: string; - roleClassName?: string; - companyClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface TestimonialCardProps { - testimonial: Testimonial; - cardClassName?: string; - imageClassName?: string; - overlayClassName?: string; - ratingClassName?: string; - nameClassName?: string; - roleClassName?: string; - companyClassName?: string; -} - -const TestimonialCard = memo(({ - testimonial, - cardClassName = "", - imageClassName = "", - overlayClassName = "", - ratingClassName = "", - nameClassName = "", - roleClassName = "", - companyClassName = "", -}: TestimonialCardProps) => { - return ( -
- - -
-
- {Array.from({ length: 5 }).map((_, index) => ( - - ))} -
- -

- {testimonial.name} -

- -
-

- {testimonial.role} -

-

- {testimonial.company} -

-
-
-
- ); -}); - -TestimonialCard.displayName = "TestimonialCard"; - -const TestimonialCardOne = ({ - testimonials, - carouselMode = "buttons", - uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105", - gridVariant, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Testimonials section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - imageClassName = "", - overlayClassName = "", - ratingClassName = "", - nameClassName = "", - roleClassName = "", - companyClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: TestimonialCardOneProps) => { - return ( - - {testimonials.map((testimonial, index) => ( - - ))} - - ); -}; - -TestimonialCardOne.displayName = "TestimonialCardOne"; - -export default TestimonialCardOne; -- 2.49.1 From 28f89f9d041f5084103ea0203c4c53ba1c769433 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:23 +0000 Subject: [PATCH 37/40] Update src/components/sections/testimonial/TestimonialCardSixteen.tsx --- .../testimonial/TestimonialCardSixteen.tsx | 245 +----------------- 1 file changed, 8 insertions(+), 237 deletions(-) diff --git a/src/components/sections/testimonial/TestimonialCardSixteen.tsx b/src/components/sections/testimonial/TestimonialCardSixteen.tsx index 5ac4e20..2d33f1c 100644 --- a/src/components/sections/testimonial/TestimonialCardSixteen.tsx +++ b/src/components/sections/testimonial/TestimonialCardSixteen.tsx @@ -1,240 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import MediaContent from "@/components/shared/MediaContent"; -import { cls } from "@/lib/utils"; -import { Star } from "lucide-react"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types"; +export function TestimonialCardSixteen() { + const { animate } = useCardAnimation(); -type Testimonial = { - id: string; - name: string; - role: string; - company: string; - rating: number; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; - -type KpiItem = { - value: string; - label: string; -}; - -interface TestimonialCardSixteenProps { - testimonials: Testimonial[]; - kpiItems: [KpiItem, KpiItem, KpiItem]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - imageClassName?: string; - overlayClassName?: string; - ratingClassName?: string; - nameClassName?: string; - roleClassName?: string; - companyClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface TestimonialCardProps { - testimonial: Testimonial; - cardClassName?: string; - imageClassName?: string; - overlayClassName?: string; - ratingClassName?: string; - nameClassName?: string; - roleClassName?: string; - companyClassName?: string; -} - -const TestimonialCard = memo(({ - testimonial, - cardClassName = "", - imageClassName = "", - overlayClassName = "", - ratingClassName = "", - nameClassName = "", - roleClassName = "", - companyClassName = "", -}: TestimonialCardProps) => { - return ( -
- - -
-
- {Array.from({ length: 5 }).map((_, index) => ( - - ))} -
- -

- {testimonial.name} -

- -
-

- {testimonial.role} -

-

- {testimonial.company} -

-
-
-
- ); -}); - -TestimonialCard.displayName = "TestimonialCard"; - -const TestimonialCardSixteen = ({ - testimonials, - kpiItems, - carouselMode = "buttons", - uniformGridCustomHeightClasses = "min-h-none", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Testimonials section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - imageClassName = "", - overlayClassName = "", - ratingClassName = "", - nameClassName = "", - roleClassName = "", - companyClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: TestimonialCardSixteenProps) => { - const kpiSection = ( -
- {kpiItems.map((item, index) => ( -
-
-

{item.value}

-

{item.label}

-
- {index < 2 && ( -
- )} -
- ))} -
- ); - - return ( - - {testimonials.map((testimonial, index) => ( - - ))} - - ); -}; - -TestimonialCardSixteen.displayName = "TestimonialCardSixteen"; - -export default TestimonialCardSixteen; -- 2.49.1 From dbf38396609ec208c23c98d26e39f5cb92216079 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:24 +0000 Subject: [PATCH 38/40] Update src/components/sections/testimonial/TestimonialCardThirteen.tsx --- .../testimonial/TestimonialCardThirteen.tsx | 245 +----------------- 1 file changed, 8 insertions(+), 237 deletions(-) diff --git a/src/components/sections/testimonial/TestimonialCardThirteen.tsx b/src/components/sections/testimonial/TestimonialCardThirteen.tsx index 4a464d4..dfb7a98 100644 --- a/src/components/sections/testimonial/TestimonialCardThirteen.tsx +++ b/src/components/sections/testimonial/TestimonialCardThirteen.tsx @@ -1,240 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import CardStack from "@/components/cardStack/CardStack"; -import TestimonialAuthor from "@/components/shared/TestimonialAuthor"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { Quote, Star } from "lucide-react"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types"; +export function TestimonialCardThirteen() { + const { animate } = useCardAnimation(); -type Testimonial = { - id: string; - name: string; - handle: string; - testimonial: string; - rating: number; - imageSrc?: string; - imageAlt?: string; - icon?: LucideIcon; -}; - -interface TestimonialCardThirteenProps { - testimonials: Testimonial[]; - showRating: boolean; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - iconClassName?: string; - nameClassName?: string; - handleClassName?: string; - testimonialClassName?: string; - ratingClassName?: string; - contentWrapperClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface TestimonialCardProps { - testimonial: Testimonial; - showRating: boolean; - useInvertedBackground: boolean; - cardClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - iconClassName?: string; - nameClassName?: string; - handleClassName?: string; - testimonialClassName?: string; - ratingClassName?: string; - contentWrapperClassName?: string; -} - -const TestimonialCard = memo(({ - testimonial, - showRating, - useInvertedBackground, - cardClassName = "", - imageWrapperClassName = "", - imageClassName = "", - iconClassName = "", - nameClassName = "", - handleClassName = "", - testimonialClassName = "", - ratingClassName = "", - contentWrapperClassName = "", -}: TestimonialCardProps) => { - const Icon = testimonial.icon || Quote; - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( -
-
- {showRating ? ( -
- {Array.from({ length: 5 }).map((_, index) => ( - - ))} -
- ) : ( - - )} - -

- {testimonial.testimonial} -

-
- - -
- ); -}); - -TestimonialCard.displayName = "TestimonialCard"; - -const TestimonialCardThirteen = ({ - testimonials, - showRating, - carouselMode = "buttons", - uniformGridCustomHeightClasses = "min-h-none", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Testimonials section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - imageWrapperClassName = "", - imageClassName = "", - iconClassName = "", - nameClassName = "", - handleClassName = "", - testimonialClassName = "", - ratingClassName = "", - contentWrapperClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: TestimonialCardThirteenProps) => { - return ( - - {testimonials.map((testimonial, index) => ( - - ))} - - ); -}; - -TestimonialCardThirteen.displayName = "TestimonialCardThirteen"; - -export default TestimonialCardThirteen; -- 2.49.1 From 3bcf98062c9e587e5a65ca015b17dd8ebfa35f2f Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:25 +0000 Subject: [PATCH 39/40] Update src/components/sections/testimonial/TestimonialCardTwo.tsx --- .../testimonial/TestimonialCardTwo.tsx | 221 +----------------- 1 file changed, 8 insertions(+), 213 deletions(-) diff --git a/src/components/sections/testimonial/TestimonialCardTwo.tsx b/src/components/sections/testimonial/TestimonialCardTwo.tsx index 473823f..2347d4f 100644 --- a/src/components/sections/testimonial/TestimonialCardTwo.tsx +++ b/src/components/sections/testimonial/TestimonialCardTwo.tsx @@ -1,216 +1,11 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import { memo } from "react"; -import Image from "next/image"; -import CardStack from "@/components/cardStack/CardStack"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { Quote } from "lucide-react"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types"; +export function TestimonialCardTwo() { + const { animate } = useCardAnimation(); -type Testimonial = { - id: string; - name: string; - role: string; - testimonial: string; - imageSrc?: string; - imageAlt?: string; - icon?: LucideIcon; -}; - -interface TestimonialCardTwoProps { - testimonials: Testimonial[]; - carouselMode?: "auto" | "buttons"; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - iconClassName?: string; - nameClassName?: string; - roleClassName?: string; - testimonialClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + return ( +
+ +
+ ); } - -interface TestimonialCardProps { - testimonial: Testimonial; - shouldUseLightText: boolean; - cardClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - iconClassName?: string; - nameClassName?: string; - roleClassName?: string; - testimonialClassName?: string; -} - -const TestimonialCard = memo(({ - testimonial, - shouldUseLightText, - cardClassName = "", - imageWrapperClassName = "", - imageClassName = "", - iconClassName = "", - nameClassName = "", - roleClassName = "", - testimonialClassName = "", -}: TestimonialCardProps) => { - const Icon = testimonial.icon || Quote; - - return ( -
-
- {testimonial.imageSrc ? ( - {testimonial.imageAlt - ) : ( - - )} -
- -
-

- {testimonial.name} -

-

- {testimonial.role} -

-
- -

- {testimonial.testimonial} -

-
- ); -}); - -TestimonialCard.displayName = "TestimonialCard"; - -const TestimonialCardTwo = ({ - testimonials, - carouselMode = "buttons", - uniformGridCustomHeightClasses = "min-h-none", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Testimonials section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - imageWrapperClassName = "", - imageClassName = "", - iconClassName = "", - nameClassName = "", - roleClassName = "", - testimonialClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: TestimonialCardTwoProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - return ( - - {testimonials.map((testimonial, index) => ( - - ))} - - ); -}; - -TestimonialCardTwo.displayName = "TestimonialCardTwo"; - -export default TestimonialCardTwo; -- 2.49.1 From b8cc8f74ec26bfff798c2717c844db0f49d32699 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 00:13:25 +0000 Subject: [PATCH 40/40] Update src/components/shared/Dashboard.tsx --- src/components/shared/Dashboard.tsx | 340 +--------------------------- 1 file changed, 12 insertions(+), 328 deletions(-) diff --git a/src/components/shared/Dashboard.tsx b/src/components/shared/Dashboard.tsx index cf91f20..8a2f28d 100644 --- a/src/components/shared/Dashboard.tsx +++ b/src/components/shared/Dashboard.tsx @@ -1,331 +1,15 @@ -"use client"; +import { useCardAnimation } from '@/components/cardStack/CardStack'; -import React, { useState, useEffect } from "react"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import { - ArrowUpRight, - Bell, - ChevronLeft, - ChevronRight, - Plus, - Search, -} from "lucide-react"; -import AnimationContainer from "@/components/sections/AnimationContainer"; -import Button from "@/components/button/Button"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import MediaContent from "@/components/shared/MediaContent"; -import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart"; -import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils"; -import type { ButtonConfig } from "@/types/button"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import TextNumberCount from "@/components/text/TextNumberCount"; +export function Dashboard() { + const { animate, itemRefs } = useCardAnimation(); -export interface DashboardSidebarItem { - icon: LucideIcon; - active?: boolean; + const handleAnimate = () => { + animate(0); + }; + + return ( +
+ +
+ ); } - -export interface DashboardStat { - title: string; - titleMobile?: string; - values: [number, number, number]; - valuePrefix?: string; - valueSuffix?: string; - valueFormat?: Omit & { - notation?: Exclude; - }; - description: string; -} - -export interface DashboardListItem { - icon: LucideIcon; - title: string; - status: string; -} - -interface DashboardProps { - title: string; - stats: [DashboardStat, DashboardStat, DashboardStat]; - logoIcon: LucideIcon; - sidebarItems: DashboardSidebarItem[]; - searchPlaceholder?: string; - buttons: ButtonConfig[]; - chartTitle?: string; - chartData?: ChartDataItem[]; - listItems: DashboardListItem[]; - listTitle?: string; - imageSrc: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; - className?: string; - containerClassName?: string; - sidebarClassName?: string; - statClassName?: string; - chartClassName?: string; - listClassName?: string; -} - -const Dashboard = ({ - title, - stats, - logoIcon: LogoIcon, - sidebarItems, - searchPlaceholder = "Search", - buttons, - chartTitle = "Revenue Overview", - chartData, - listItems, - listTitle = "Recent Transfers", - imageSrc, - videoSrc, - imageAlt = "", - videoAriaLabel = "Avatar video", - className = "", - containerClassName = "", - sidebarClassName = "", - statClassName = "", - chartClassName = "", - listClassName = "", -}: DashboardProps) => { - const theme = useTheme(); - const [activeStatIndex, setActiveStatIndex] = useState(0); - const [statValueIndex, setStatValueIndex] = useState(0); - const { itemRefs: statRefs } = useCardAnimation({ - animationType: "slide-up", - itemCount: 3, - }); - - useEffect(() => { - const interval = setInterval(() => { - setStatValueIndex((prev) => (prev + 1) % 3); - }, 3000); - return () => clearInterval(interval); - }, []); - - const statCard = (stat: DashboardStat, index: number, withRef = false) => ( -
{ statRefs.current[index] = el; } : undefined} - className={cls( - "group rounded-theme-capped p-5 flex flex-col justify-between h-40 md:h-50 card shadow", - statClassName - )} - > -
-

- {stat.title} -

-
- -
-
-
- -

- {stat.description} -

-
-
- ); - - return ( -
-
-
-
- -
- -
-
-
-
-
-
- -

- {searchPlaceholder} -

-
-
-
- -
-
- -
-
-
-
-
-

- {title} -

-
- {buttons.slice(0, 2).map((button, index) => ( -
-
-
- {stats.map((stat, index) => statCard(stat, index, true))} -
-
- - {statCard(stats[activeStatIndex], activeStatIndex)} - -
- - -
-
-
-
-
-

- {chartTitle} -

-
- -
-
-
- -
-
-
-
-

- {listTitle} -

-
- -
-
-
-
- {[...listItems, ...listItems, ...listItems, ...listItems].map((item, index) => { - const ItemIcon = item.icon; - return ( -
-
- -
-
-

- {item.title} -

-

- {item.status} -

-
- -
- ); - })} -
-
-
-
-
-
- ); -}; - -Dashboard.displayName = "Dashboard"; - -export default React.memo(Dashboard); -- 2.49.1