diff --git a/src/components/sections/feature/FeatureCardNine.tsx b/src/components/sections/feature/FeatureCardNine.tsx index 81506a6..7fddf29 100644 --- a/src/components/sections/feature/FeatureCardNine.tsx +++ b/src/components/sections/feature/FeatureCardNine.tsx @@ -1,233 +1,49 @@ -"use client"; +'use client'; -import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView"; -import Button from "@/components/button/Button"; -import { cls } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "@/components/cardStack/types"; -import type { TimelinePhoneViewItem } from "@/components/cardStack/hooks/usePhoneAnimations"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +import React from 'react'; +import { cn } from '@/lib/utils'; -type FeaturePhone = { - imageAlt?: string; - videoAriaLabel?: string; -} & ( - | { imageSrc: string; videoSrc?: never } - | { videoSrc: string; imageSrc?: never } - ); +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; -type FeatureCard = { - id: number; - title: string; - description: string; - buttons?: ButtonConfig[]; - phoneOne: FeaturePhone; - phoneTwo: FeaturePhone; -}; +export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + +export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }; + +import type { LucideIcon } from 'lucide-react'; + +interface FeatureCardNineItem { + id: string; + title: string; + description: string; +} interface FeatureCardNineProps { - features: FeatureCard[]; - showStepNumbers: boolean; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - animationType: CardAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - desktopContainerClassName?: string; - mobileContainerClassName?: string; - desktopContentClassName?: string; - desktopWrapperClassName?: string; - mobileWrapperClassName?: string; - phoneFrameClassName?: string; - mobilePhoneFrameClassName?: string; - featureContentClassName?: string; - stepNumberClassName?: string; - featureTitleClassName?: string; - featureDescriptionClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; + items?: FeatureCardNineItem[]; + animationType: CardAnimationType; + itemCount: number; + showTextBox?: boolean; + showDivider?: boolean; + className?: string; } -interface FeatureContentProps { - feature: FeatureCard; - showStepNumbers: boolean; - useInvertedBackground: InvertedBackground; - featureContentClassName: string; - stepNumberClassName: string; - featureTitleClassName: string; - featureDescriptionClassName: string; - cardButtonClassName: string; - cardButtonTextClassName: string; -} - -const FeatureContent = ({ - feature, - showStepNumbers, - useInvertedBackground, - featureContentClassName, - stepNumberClassName, - featureTitleClassName, - featureDescriptionClassName, - cardButtonClassName, - cardButtonTextClassName, -}: FeatureContentProps) => { - const theme = useTheme(); - - return ( -
- {showStepNumbers && ( -
-

- {feature.id} -

-
- )} -

- {feature.title} -

-

- {feature.description} -

- {feature.buttons && feature.buttons.length > 0 && ( -
- {feature.buttons.slice(0, 2).map((button, index) => ( -
- )} +export const FeatureCardNine: React.FC = ({ + items = [], + animationType, + itemCount, + showTextBox = true, + showDivider = true, + className, +}) => { + return ( +
+ {items.map((item) => ( +
+

{item.title}

+

{item.description}

+
+ ))}
- ); + ); }; -const FeatureCardNine = ({ - features, - showStepNumbers, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - animationType, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - desktopContainerClassName = "", - mobileContainerClassName = "", - desktopContentClassName = "", - desktopWrapperClassName = "", - mobileWrapperClassName = "", - phoneFrameClassName = "", - mobilePhoneFrameClassName = "", - featureContentClassName = "", - stepNumberClassName = "", - featureTitleClassName = "", - featureDescriptionClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", -}: FeatureCardNineProps) => { - const items: TimelinePhoneViewItem[] = features.map((feature, index) => ({ - trigger: `trigger-${index}`, - content: ( - - ), - imageOne: feature.phoneOne.imageSrc, - videoOne: feature.phoneOne.videoSrc, - imageAltOne: feature.phoneOne.imageAlt || `${feature.title} - Phone 1`, - videoAriaLabelOne: feature.phoneOne.videoAriaLabel || `${feature.title} - Phone 1 video`, - imageTwo: feature.phoneTwo.imageSrc, - videoTwo: feature.phoneTwo.videoSrc, - imageAltTwo: feature.phoneTwo.imageAlt || `${feature.title} - Phone 2`, - videoAriaLabelTwo: feature.phoneTwo.videoAriaLabel || `${feature.title} - Phone 2 video`, - })); - - return ( - - ); -}; - -FeatureCardNine.displayName = "FeatureCardNine"; - export default FeatureCardNine; diff --git a/src/components/sections/feature/FeatureCardSeven.tsx b/src/components/sections/feature/FeatureCardSeven.tsx index 21fcc36..105b8da 100644 --- a/src/components/sections/feature/FeatureCardSeven.tsx +++ b/src/components/sections/feature/FeatureCardSeven.tsx @@ -1,179 +1,40 @@ -"use client"; +'use client'; -import CardList from "@/components/cardStack/CardList"; -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, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +import React from 'react'; +import { cn } from '@/lib/utils'; -type FeatureCard = { - id: number; - title: string; - description: string; - buttons?: ButtonConfig[]; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; + +export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + +export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }; + +import type { LucideIcon } from 'lucide-react'; interface FeatureCardSevenProps { - features: FeatureCard[]; - 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; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - stepNumberClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - imageContainerClassName?: string; - imageClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; + children: React.ReactNode[]; + animationType: CardAnimationType; + itemCount: number; + useIndividualTriggers?: boolean; + className?: string; } -const FeatureCardSeven = ({ - features, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - stepNumberClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - imageContainerClassName = "", - imageClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", -}: FeatureCardSevenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {features.map((feature, index) => ( -
-
-
-
-

- {feature.id} -

-
-

- {feature.title} -

-

- {feature.description} -

- {feature.buttons && feature.buttons.length > 0 && ( -
- {feature.buttons.slice(0, 2).map((button, index) => ( -
- )} -
-
-
- -
-
- ))} - - ); +export const FeatureCardSeven: React.FC = ({ + children, + animationType, + itemCount, + useIndividualTriggers = false, + className, +}) => { + return ( +
+ {React.Children.map(children, (child, index) => ( +
+ {child} +
+ ))} +
+ ); }; -FeatureCardSeven.displayName = "FeatureCardSeven"; - -export default FeatureCardSeven; \ No newline at end of file +export default FeatureCardSeven; diff --git a/src/components/sections/feature/FeatureCardTen.tsx b/src/components/sections/feature/FeatureCardTen.tsx index aa540ff..bed362d 100644 --- a/src/components/sections/feature/FeatureCardTen.tsx +++ b/src/components/sections/feature/FeatureCardTen.tsx @@ -1,263 +1,48 @@ -"use client"; +'use client'; -import React, { memo, useMemo } from "react"; -import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow"; -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 { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +import React from 'react'; +import { cn } from '@/lib/utils'; -type FeatureMedia = { - imageAlt?: string; - videoAriaLabel?: string; -} & ( - | { imageSrc: string; videoSrc?: never } - | { videoSrc: string; imageSrc?: never } - ); +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; -interface FeatureListItem { - icon: LucideIcon; - text: string; -} +export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; -interface FeatureCard { - id: string; - title: string; - description: string; - media: FeatureMedia; - items: FeatureListItem[]; - reverse: boolean; +export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }; + +import type { LucideIcon } from 'lucide-react'; + +interface FeatureCardTenItem { + id: string; + reverse: boolean; + media: React.ReactNode; + content: React.ReactNode; } interface FeatureCardTenProps { - features: FeatureCard[]; - 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; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - itemClassName?: string; - mediaWrapperClassName?: string; - mediaCardClassName?: string; - numberClassName?: string; - contentWrapperClassName?: string; - featureTitleClassName?: string; - featureDescriptionClassName?: string; - listItemClassName?: string; - iconContainerClassName?: string; - iconClassName?: string; - gapClassName?: string; + items?: FeatureCardTenItem[]; + animationType: CardAnimationType; + itemCount: number; + gapClassName?: string; + className?: string; } -interface FeatureMediaProps { - media: FeatureMedia; - title: string; - mediaCardClassName: string; -} - -const FeatureMedia = ({ - media, - title, - mediaCardClassName, -}: FeatureMediaProps) => ( -
- +export const FeatureCardTen: React.FC = ({ + items = [], + animationType, + itemCount, + gapClassName = 'gap-8', + className, +}) => { + return ( +
+ {items.map((item) => ( +
+
{item.media}
+
{item.content}
+
+ ))}
-); - -interface FeatureContentProps { - feature: FeatureCard; - useInvertedBackground: InvertedBackground; - shouldUseLightText: boolean; - featureTitleClassName: string; - featureDescriptionClassName: string; - listItemClassName: string; - iconContainerClassName: string; - iconClassName: string; -} - -const FeatureContent = ({ - feature, - useInvertedBackground, - shouldUseLightText, - featureTitleClassName, - featureDescriptionClassName, - listItemClassName, - iconContainerClassName, - iconClassName, -}: FeatureContentProps) => ( -
-

- {feature.title} -

-

- {feature.description} -

-
    - {feature.items.map((listItem, listIndex) => { - const Icon = listItem.icon; - return ( -
  • -
    - -
    -

    - {listItem.text} -

    -
    • - ); - })} -
-
-); - -const FeatureCardTen = ({ - features, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - animationType, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - itemClassName = "", - mediaWrapperClassName = "", - mediaCardClassName = "", - numberClassName = "", - contentWrapperClassName = "", - featureTitleClassName = "", - featureDescriptionClassName = "", - listItemClassName = "", - iconContainerClassName = "", - iconClassName = "", - gapClassName = "", -}: FeatureCardTenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const timelineItems = useMemo( - () => - features.map((feature) => ({ - id: feature.id, - reverse: feature.reverse, - media: ( - - ), - content: ( - - ), - })), - [ - features, - useInvertedBackground, - shouldUseLightText, - mediaCardClassName, - featureTitleClassName, - featureDescriptionClassName, - listItemClassName, - iconContainerClassName, - iconClassName, - ] - ); - - return ( - - ); + ); }; -FeatureCardTen.displayName = "FeatureCardTen"; - -export default memo(FeatureCardTen); \ No newline at end of file +export default FeatureCardTen; diff --git a/src/components/sections/feature/FeatureCardTwelve.tsx b/src/components/sections/feature/FeatureCardTwelve.tsx index 521d7b3..e00505d 100644 --- a/src/components/sections/feature/FeatureCardTwelve.tsx +++ b/src/components/sections/feature/FeatureCardTwelve.tsx @@ -1,182 +1,40 @@ -"use client"; +'use client'; -import { Fragment } from "react"; -import CardList from "@/components/cardStack/CardList"; -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, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +import React from 'react'; +import { cn } from '@/lib/utils'; -interface FeatureCard { - id: string; - label: string; - title: string; - items: string[]; - buttons?: ButtonConfig[]; -} +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; + +export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + +export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }; + +import type { LucideIcon } from 'lucide-react'; interface FeatureCardTwelveProps { - features: FeatureCard[]; + children: React.ReactNode[]; animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; + itemCount: number; + useIndividualTriggers?: boolean; className?: string; - containerClassName?: string; - cardClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - labelClassName?: string; - cardTitleClassName?: string; - itemsContainerClassName?: string; - itemTextClassName?: string; - cardButtonClassName?: string; - cardButtonTextClassName?: string; } -const FeatureCardTwelve = ({ - features, +export const FeatureCardTwelve: React.FC = ({ + children, animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Feature section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - labelClassName = "", - cardTitleClassName = "", - itemsContainerClassName = "", - itemTextClassName = "", - cardButtonClassName = "", - cardButtonTextClassName = "", -}: FeatureCardTwelveProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - + itemCount, + useIndividualTriggers = false, + className, +}) => { return ( - - {features.map((feature) => ( -
-
-

- {feature.label} -

-
- -
- -
-

- {feature.title} -

- -
- {feature.items.map((item, index) => ( - - - {item} - - {index < feature.items.length - 1 && ( - • - )} - - ))} -
- - {feature.buttons && feature.buttons.length > 0 && ( -
- {feature.buttons.slice(0, 2).map((button, index) => ( -
- )} -
+
+ {React.Children.map(children, (child, index) => ( +
+ {child}
))} - +
); }; -FeatureCardTwelve.displayName = "FeatureCardTwelve"; - export default FeatureCardTwelve; diff --git a/src/components/sections/feature/FeatureCardTwentyFour.tsx b/src/components/sections/feature/FeatureCardTwentyFour.tsx index 5da7878..115b57e 100644 --- a/src/components/sections/feature/FeatureCardTwentyFour.tsx +++ b/src/components/sections/feature/FeatureCardTwentyFour.tsx @@ -1,199 +1,40 @@ -"use client"; +'use client'; -import CardList from "@/components/cardStack/CardList"; -import Tag from "@/components/shared/Tag"; -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 { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +import React from 'react'; +import { cn } from '@/lib/utils'; -type MediaProps = - | { - imageSrc: string; - imageAlt?: string; - videoSrc?: never; - videoAriaLabel?: never; - } - | { - videoSrc: string; - videoAriaLabel?: string; - imageSrc?: never; - imageAlt?: never; - }; +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; -type FeatureItem = MediaProps & { - id: string; - title: string; - author: string; - description: string; - tags: string[]; - onFeatureClick?: () => void; -}; +export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + +export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }; + +import type { LucideIcon } from 'lucide-react'; interface FeatureCardTwentyFourProps { - features: FeatureItem[]; - 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; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - cardTitleClassName?: string; - authorClassName?: string; - cardDescriptionClassName?: string; - tagsContainerClassName?: string; - tagClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; + children: React.ReactNode[]; + animationType: CardAnimationType; + itemCount: number; + useIndividualTriggers?: boolean; + className?: string; } -const FeatureCardTwentyFour = ({ - features, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Features section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - cardTitleClassName = "", - authorClassName = "", - cardDescriptionClassName = "", - tagsContainerClassName = "", - tagClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", -}: FeatureCardTwentyFourProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( - - {features.map((feature) => ( -
-
-

- {feature.title}{" "} - - by {feature.author} - -

- -
-
- {feature.tags.map((tagText, index) => ( - - ))} -
- -

- {feature.description} -

-
-
- -
- -
-
- ))} - - ); +export const FeatureCardTwentyFour: React.FC = ({ + children, + animationType, + itemCount, + useIndividualTriggers = false, + className, +}) => { + return ( +
+ {React.Children.map(children, (child, index) => ( +
+ {child} +
+ ))} +
+ ); }; -FeatureCardTwentyFour.displayName = "FeatureCardTwentyFour"; - export default FeatureCardTwentyFour; diff --git a/src/components/sections/hero/HeroBillboardCarousel.tsx b/src/components/sections/hero/HeroBillboardCarousel.tsx index f6bc30b..8f8d93c 100644 --- a/src/components/sections/hero/HeroBillboardCarousel.tsx +++ b/src/components/sections/hero/HeroBillboardCarousel.tsx @@ -1,155 +1,48 @@ -"use client"; +'use client'; -import TextBox from "@/components/Textbox"; -import MediaContent from "@/components/shared/MediaContent"; -import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel"; -import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType } from "@/types/button"; +import React from 'react'; +import { cn } from '@/lib/utils'; -export interface MediaItem { - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -} - -type HeroBillboardCarouselBackgroundProps = Extract< - HeroBackgroundVariantProps, - | { variant: "plain" } - | { variant: "animated-grid" } - | { variant: "canvas-reveal" } - | { variant: "cell-wave" } - | { variant: "downward-rays-animated" } - | { variant: "downward-rays-animated-grid" } - | { variant: "downward-rays-static" } - | { variant: "downward-rays-static-grid" } - | { variant: "gradient-bars" } - | { variant: "radial-gradient" } - | { variant: "rotated-rays-animated" } - | { variant: "rotated-rays-animated-grid" } - | { variant: "rotated-rays-static" } - | { variant: "rotated-rays-static-grid" } - | { variant: "sparkles-gradient" } ->; +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; interface HeroBillboardCarouselProps { - title: string; - description: string; - background: HeroBillboardCarouselBackgroundProps; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - mediaItems: MediaItem[]; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - mediaWrapperClassName?: string; + children: React.ReactNode[]; + animationType: CardAnimationType; + itemCount: number; + isGrid?: boolean; + className?: string; + carouselClassName?: string; + containerClassName?: string; + itemClassName?: string; + showTextBox?: boolean; + textboxLayout?: string; + ariaLabel?: string; } -const HeroBillboardCarousel = ({ - title, - description, - background, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - mediaItems, - ariaLabel = "Hero section", - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - mediaWrapperClassName = "", -}: HeroBillboardCarouselProps) => { - const renderCarouselItem = (item: MediaItem, index: number) => ( -
- -
- ); - - return ( -
- -
- - -
- - {mediaItems?.map(renderCarouselItem)} - -
-
-
- ); +export const HeroBillboardCarousel: React.FC = ({ + children, + animationType, + itemCount, + isGrid = false, + className, + carouselClassName, + containerClassName, + itemClassName, + showTextBox = true, + textboxLayout = 'default', + ariaLabel = 'Carousel', +}) => { + return ( +
+
+ {React.Children.map(children, (child, index) => ( +
+ {child} +
+ ))} +
+
+ ); }; -HeroBillboardCarousel.displayName = "HeroBillboardCarousel"; - -export default HeroBillboardCarousel; \ No newline at end of file +export default HeroBillboardCarousel; diff --git a/src/components/sections/hero/HeroBillboardDashboard.tsx b/src/components/sections/hero/HeroBillboardDashboard.tsx index f87d7d4..00c1b3a 100644 --- a/src/components/sections/hero/HeroBillboardDashboard.tsx +++ b/src/components/sections/hero/HeroBillboardDashboard.tsx @@ -1,132 +1,75 @@ -"use client"; +'use client'; -import TextBox from "@/components/Textbox"; -import Dashboard from "@/components/shared/Dashboard"; -import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType } from "@/types/button"; -import type { DashboardSidebarItem, DashboardStat, DashboardListItem } from "@/components/shared/Dashboard"; -import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils"; +import React from 'react'; +import Dashboard from '@/components/shared/Dashboard'; +import { cn } from '@/lib/utils'; -type HeroBillboardDashboardBackgroundProps = Extract< - HeroBackgroundVariantProps, - | { variant: "plain" } - | { variant: "animated-grid" } - | { variant: "canvas-reveal" } - | { variant: "cell-wave" } - | { variant: "downward-rays-animated" } - | { variant: "downward-rays-animated-grid" } - | { variant: "downward-rays-static" } - | { variant: "downward-rays-static-grid" } - | { variant: "gradient-bars" } - | { variant: "radial-gradient" } - | { variant: "rotated-rays-animated" } - | { variant: "rotated-rays-animated-grid" } - | { variant: "rotated-rays-static" } - | { variant: "rotated-rays-static-grid" } - | { variant: "sparkles-gradient" } ->; - -interface HeroBillboardDashboardProps { - title: string; - description: string; - background: HeroBillboardDashboardBackgroundProps; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - ariaLabel?: string; - dashboard: { - 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; - }; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - dashboardClassName?: string; +interface DashboardSidebarItem { + label: string; + icon?: React.ReactNode; } -const HeroBillboardDashboard = ({ - title, - description, - background, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - ariaLabel = "Hero section", - dashboard, - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - dashboardClassName = "", -}: HeroBillboardDashboardProps) => { +interface DashboardStat { + label: string; + value: string; +} + +interface DashboardListItem { + label: string; + value: string; +} + +interface ButtonConfig { + text: string; + href?: string; + onClick?: () => void; +} + +interface ChartDataItem { + label: string; + value: number; +} + +interface HeroBillboardDashboardProps { + className?: string; + title?: string; + stats?: [DashboardStat, DashboardStat, DashboardStat]; + logoIcon?: React.ReactNode; + sidebarItems?: DashboardSidebarItem[]; + searchPlaceholder?: string; + buttons?: ButtonConfig[]; + chartTitle?: string; + chartData?: ChartDataItem[]; + listItems?: DashboardListItem[]; + listClassName?: string; + animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; + itemCount?: number; +} + +export const HeroBillboardDashboard: React.FC = ({ + className, + title = 'Dashboard', + stats = [ + { label: 'Total Users', value: '1.2M' }, + { label: 'Revenue', value: '$45.8K' }, + { label: 'Growth', value: '+23%' }, + ], + logoIcon, + sidebarItems = [], + searchPlaceholder = 'Search...', + buttons = [], + chartTitle, + chartData = [], + listItems = [], + listClassName, + animationType = 'none', + itemCount = 5, +}) => { return ( -
- -
- - -
-
+
+ +
); }; -HeroBillboardDashboard.displayName = "HeroBillboardDashboard"; - export default HeroBillboardDashboard; diff --git a/src/components/sections/hero/HeroBillboardGallery.tsx b/src/components/sections/hero/HeroBillboardGallery.tsx index 83075b7..bd2d01d 100644 --- a/src/components/sections/hero/HeroBillboardGallery.tsx +++ b/src/components/sections/hero/HeroBillboardGallery.tsx @@ -1,200 +1,48 @@ -"use client"; +'use client'; -import TextBox from "@/components/Textbox"; -import MediaContent from "@/components/shared/MediaContent"; -import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel"; -import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds"; -import { cls } from "@/lib/utils"; -import { useButtonAnimation } from "@/components/hooks/useButtonAnimation"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType } from "@/types/button"; +import React from 'react'; +import { cn } from '@/lib/utils'; -export interface MediaItem { - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -} - -type HeroBillboardGalleryBackgroundProps = Extract< - HeroBackgroundVariantProps, - | { variant: "plain" } - | { variant: "animated-grid" } - | { variant: "canvas-reveal" } - | { variant: "cell-wave" } - | { variant: "downward-rays-animated" } - | { variant: "downward-rays-animated-grid" } - | { variant: "downward-rays-static" } - | { variant: "downward-rays-static-grid" } - | { variant: "gradient-bars" } - | { variant: "radial-gradient" } - | { variant: "rotated-rays-animated" } - | { variant: "rotated-rays-animated-grid" } - | { variant: "rotated-rays-static" } - | { variant: "rotated-rays-static-grid" } - | { variant: "sparkles-gradient" } ->; +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; interface HeroBillboardGalleryProps { - title: string; - description: string; - background: HeroBillboardGalleryBackgroundProps; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - mediaItems: MediaItem[]; - mediaAnimation: ButtonAnimationType; - ariaLabel?: string; + children: React.ReactNode[]; + animationType: CardAnimationType; + itemCount: number; + isGrid?: boolean; className?: string; + carouselClassName?: string; containerClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - mediaWrapperClassName?: string; - imageClassName?: string; + itemClassName?: string; + showTextBox?: boolean; + textboxLayout?: string; + ariaLabel?: string; } -const HeroBillboardGallery = ({ - title, - description, - background, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - mediaItems, - mediaAnimation, - ariaLabel = "Hero section", - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - mediaWrapperClassName = "", - imageClassName = "", -}: HeroBillboardGalleryProps) => { - const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation }); - - const renderCarouselItem = (item: MediaItem, index: number) => ( -
- -
- ); - - const itemCount = mediaItems?.length || 0; - const desktopWidthClass = itemCount === 3 ? "md:w-[24%]" : itemCount === 4 ? "md:w-[24%]" : "md:w-[23%]"; - +export const HeroBillboardGallery: React.FC = ({ + children, + animationType, + itemCount, + isGrid = false, + className, + carouselClassName, + containerClassName, + itemClassName, + showTextBox = true, + textboxLayout = 'default', + ariaLabel = 'Gallery', +}) => { return ( -
- -
- - -
-
- - {mediaItems?.slice(0, 5).map(renderCarouselItem)} - +
+
+ {React.Children.map(children, (child, index) => ( +
+ {child}
- -
-
- {mediaItems?.slice(0, 5).map((item, index) => { - const rotations = ["-rotate-6", "rotate-6", "-rotate-6", "rotate-6", "-rotate-6"]; - const zIndexes = ["z-10", "z-20", "z-30", "z-40", "z-50"]; - const translates = ["-translate-y-5", "translate-y-5", "-translate-y-5", "translate-y-5", "-translate-y-5"]; - const marginClass = index > 0 ? "-ml-12 md:-ml-15" : ""; - - return ( -
- -
- ); - })} -
-
-
+ ))}
-
+
); }; -HeroBillboardGallery.displayName = "HeroBillboardGallery"; - export default HeroBillboardGallery; diff --git a/src/components/sections/pricing/PricingCardFive.tsx b/src/components/sections/pricing/PricingCardFive.tsx index 0e79a7d..10f685d 100644 --- a/src/components/sections/pricing/PricingCardFive.tsx +++ b/src/components/sections/pricing/PricingCardFive.tsx @@ -1,231 +1,40 @@ -"use client"; +'use client'; -import { Check } from "lucide-react"; -import CardList from "@/components/cardStack/CardList"; -import Tag from "@/components/shared/Tag"; -import Button from "@/components/button/Button"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -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"; +import React from 'react'; +import { cn } from '@/lib/utils'; -type PricingPlan = { - id: string; - tag: string; - tagIcon?: LucideIcon; - price: string; - period: string; - description: string; - button: ButtonConfig; - featuresTitle: string; - features: string[]; -}; +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; + +export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + +export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }; + +import type { LucideIcon } from 'lucide-react'; interface PricingCardFiveProps { - plans: PricingPlan[]; - 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; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - planTagClassName?: string; - planPriceClassName?: string; - planPeriodClassName?: string; - planDescriptionClassName?: string; - planButtonClassName?: string; - planButtonTextClassName?: string; - featuresTitleClassName?: string; - featuresListClassName?: string; - featureItemClassName?: string; - featureIconClassName?: string; - featureTextClassName?: string; + children: React.ReactNode[]; + animationType: CardAnimationType; + itemCount: number; + useIndividualTriggers?: boolean; + className?: string; } -const PricingCardFive = ({ - plans, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Pricing section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - planTagClassName = "", - planPriceClassName = "", - planPeriodClassName = "", - planDescriptionClassName = "", - planButtonClassName = "", - planButtonTextClassName = "", - featuresTitleClassName = "", - featuresListClassName = "", - featureItemClassName = "", - featureIconClassName = "", - featureTextClassName = "", -}: PricingCardFiveProps) => { - 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 {}; - }; - - return ( - - {plans.map((plan) => ( -
-
-
- -
- - {plan.price} - - - {plan.period} - -
-

- {plan.description} -

-
-
- -
- -
-

- {plan.featuresTitle} -

-
    - {plan.features.map((feature, index) => ( -
  • -
    - -
    - - {feature} - -
    • - ))} -
-
-
- ))} - - ); +export const PricingCardFive: React.FC = ({ + children, + animationType, + itemCount, + useIndividualTriggers = false, + className, +}) => { + return ( +
+ {React.Children.map(children, (child, index) => ( +
+ {child} +
+ ))} +
+ ); }; -PricingCardFive.displayName = "PricingCardFive"; - export default PricingCardFive; diff --git a/src/components/sections/pricing/PricingCardNine.tsx b/src/components/sections/pricing/PricingCardNine.tsx index 6eb39d2..68e2ed4 100644 --- a/src/components/sections/pricing/PricingCardNine.tsx +++ b/src/components/sections/pricing/PricingCardNine.tsx @@ -1,216 +1,40 @@ -"use client"; +'use client'; -import { Check } from "lucide-react"; -import CardList from "@/components/cardStack/CardList"; -import Button from "@/components/button/Button"; -import MediaContent from "@/components/shared/MediaContent"; -import Tag from "@/components/shared/Tag"; -import { getButtonProps } from "@/lib/buttonUtils"; -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"; +import React from 'react'; +import { cn } from '@/lib/utils'; -type PricingPlan = { - id: string; - title: string; - price: string; - period: string; - features: string[]; - button: ButtonConfig; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; + +export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + +export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }; + +import type { LucideIcon } from 'lucide-react'; interface PricingCardNineProps { - plans: PricingPlan[]; - 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; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - cardContentClassName?: string; - planImageWrapperClassName?: string; - planImageClassName?: string; - planTitleClassName?: string; - planPriceClassName?: string; - planButtonClassName?: string; - planButtonTextClassName?: string; - featuresListClassName?: string; - featureItemClassName?: string; - featureIconClassName?: string; - featureTextClassName?: string; + children: React.ReactNode[]; + animationType: CardAnimationType; + itemCount: number; + useIndividualTriggers?: boolean; + className?: string; } -const PricingCardNine = ({ - plans, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Pricing section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - cardContentClassName = "", - planImageWrapperClassName = "", - planImageClassName = "", - planTitleClassName = "", - planPriceClassName = "", - planButtonClassName = "", - planButtonTextClassName = "", - featuresListClassName = "", - featureItemClassName = "", - featureIconClassName = "", - featureTextClassName = "", -}: PricingCardNineProps) => { - 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 {}; - }; - - return ( - - {plans.map((plan) => ( -
-
- -
- -
-
- - -

- {plan.title} -

- -
    - {plan.features.map((feature, index) => ( -
  • -
    - -
    - - {feature} - -
    • - ))} -
-
- -
-
- ))} - - ); +export const PricingCardNine: React.FC = ({ + children, + animationType, + itemCount, + useIndividualTriggers = false, + className, +}) => { + return ( +
+ {React.Children.map(children, (child, index) => ( +
+ {child} +
+ ))} +
+ ); }; -PricingCardNine.displayName = "PricingCardNine"; - export default PricingCardNine; diff --git a/src/components/sections/team/TeamCardEleven.tsx b/src/components/sections/team/TeamCardEleven.tsx index 725e0a8..5672af4 100644 --- a/src/components/sections/team/TeamCardEleven.tsx +++ b/src/components/sections/team/TeamCardEleven.tsx @@ -1,196 +1,40 @@ -"use client"; +'use client'; -import CardList from "@/components/cardStack/CardList"; -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 { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +import React from 'react'; +import { cn } from '@/lib/utils'; -type TeamMember = { - id: string; - title: string; - subtitle: string; - detail: string; - imageSrc?: string; - imageAlt?: string; - videoSrc?: string; - videoAriaLabel?: string; -}; +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; -type TeamGroup = { - id: string; - groupTitle: string; - members: TeamMember[]; -}; +export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + +export type TitleSegment = { type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }; + +import type { LucideIcon } from 'lucide-react'; interface TeamCardElevenProps { - groups: TeamGroup[]; - 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; - textBoxClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - groupTitleClassName?: string; - memberClassName?: string; - memberImageClassName?: string; - memberTitleClassName?: string; - memberSubtitleClassName?: string; - memberDetailClassName?: string; + children: React.ReactNode[]; + animationType: CardAnimationType; + itemCount: number; + useIndividualTriggers?: boolean; + className?: string; } -const TeamCardEleven = ({ - groups, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Team section", - className = "", - containerClassName = "", - cardClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - groupTitleClassName = "", - memberClassName = "", - memberImageClassName = "", - memberTitleClassName = "", - memberSubtitleClassName = "", - memberDetailClassName = "", -}: TeamCardElevenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const renderMemberRow = (member: TeamMember) => ( -
-
-
- -
- -
-

- {member.title} -

-

- {member.subtitle} -

-
-
- -

- {member.detail} -

+export const TeamCardEleven: React.FC = ({ + children, + animationType, + itemCount, + useIndividualTriggers = false, + className, +}) => { + return ( +
+ {React.Children.map(children, (child, index) => ( +
+ {child}
- ); - - return ( - - {groups.map((group) => ( -
-

- {group.groupTitle} -

- -
- {group.members.map(renderMemberRow)} -
-
- ))} - - ); + ))} +
+ ); }; -TeamCardEleven.displayName = "TeamCardEleven"; - export default TeamCardEleven; diff --git a/src/components/sections/testimonial/TestimonialCardSix.tsx b/src/components/sections/testimonial/TestimonialCardSix.tsx index 6f6932b..201da1a 100644 --- a/src/components/sections/testimonial/TestimonialCardSix.tsx +++ b/src/components/sections/testimonial/TestimonialCardSix.tsx @@ -1,203 +1,46 @@ -"use client"; +'use client'; -import { memo } from "react"; -import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel"; -import TestimonialAuthor from "@/components/shared/TestimonialAuthor"; -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 { CardAnimationType, ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types"; +import React from 'react'; +import { cn } from '@/lib/utils'; -type Testimonial = { - id: string; - name: string; - handle: string; - testimonial: string; - imageSrc?: string; - imageAlt?: string; - icon?: LucideIcon; -}; +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; interface TestimonialCardSixProps { - testimonials: Testimonial[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - speed?: number; - topMarqueeDirection?: "left" | "right"; - ariaLabel?: string; - className?: string; - containerClassName?: string; - carouselClassName?: string; - bottomCarouselClassName?: string; - cardClassName?: string; - testimonialClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - iconClassName?: string; - nameClassName?: string; - handleClassName?: string; - textBoxClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + children: React.ReactNode[]; + animationType: CardAnimationType; + itemCount: number; + uniformGridCustomHeightClasses?: string; + speed?: number; + className?: string; + carouselClassName?: string; + containerClassName?: string; + itemClassName?: string; + ariaLabel?: string; } -interface TestimonialCardProps { - testimonial: Testimonial; - useInvertedBackground: boolean; - cardClassName?: string; - testimonialClassName?: string; - imageWrapperClassName?: string; - imageClassName?: string; - iconClassName?: string; - nameClassName?: string; - handleClassName?: string; -} - -const TestimonialCard = memo(({ - testimonial, - useInvertedBackground, - cardClassName = "", - testimonialClassName = "", - imageWrapperClassName = "", - imageClassName = "", - iconClassName = "", - nameClassName = "", - handleClassName = "", -}: TestimonialCardProps) => { - const Icon = testimonial.icon || Quote; - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - return ( -
-

- {testimonial.testimonial} -

- - -
- ); -}); - -TestimonialCard.displayName = "TestimonialCard"; - -const TestimonialCardSix = ({ - testimonials, - animationType, - title, - titleSegments, - description, - textboxLayout, - useInvertedBackground, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - speed = 40, - topMarqueeDirection = "left", - ariaLabel = "Testimonials section", - className = "", - containerClassName = "", - carouselClassName = "", - bottomCarouselClassName = "", - cardClassName = "", - testimonialClassName = "", - imageWrapperClassName = "", - imageClassName = "", - iconClassName = "", - nameClassName = "", - handleClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: TestimonialCardSixProps) => { - return ( - - {testimonials.map((testimonial, index) => ( - - ))} - - ); +export const TestimonialCardSix: React.FC = ({ + children, + animationType, + itemCount, + uniformGridCustomHeightClasses = 'min-h-95 2xl:min-h-105', + speed = 30, + className, + carouselClassName, + containerClassName, + itemClassName, + ariaLabel = 'Testimonials', +}) => { + return ( +
+
+ {React.Children.map(children, (child, index) => ( +
+ {child} +
+ ))} +
+
+ ); }; -TestimonialCardSix.displayName = "TestimonialCardSix"; - -export default TestimonialCardSix; \ No newline at end of file +export default TestimonialCardSix; diff --git a/src/hooks/useCardAnimation.ts b/src/hooks/useCardAnimation.ts new file mode 100644 index 0000000..308c741 --- /dev/null +++ b/src/hooks/useCardAnimation.ts @@ -0,0 +1,36 @@ +'use client'; + +import { useRef, useEffect } from 'react'; + +export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'; + +interface UseCardAnimationProps { + animationType: CardAnimationType; + itemCount: number; + useIndividualTriggers?: boolean; + isGrid?: boolean; + supports3DAnimation?: boolean; + gridVariant?: string; +} + +export const useCardAnimation = ({ + animationType, + itemCount, + useIndividualTriggers = false, + isGrid = false, + supports3DAnimation = false, + gridVariant, +}: UseCardAnimationProps) => { + const itemRefs = useRef>>( + Array.from({ length: itemCount }, () => ({ current: null })) + ); + + useEffect(() => { + // Animation logic would be implemented here + // For now, this is a placeholder that provides the hook structure + }, [animationType, itemCount, useIndividualTriggers, isGrid, supports3DAnimation, gridVariant]); + + return { itemRefs }; +}; + +export default useCardAnimation;