Initial commit
This commit is contained in:
294
src/components/sections/feature/FeatureBento.tsx
Normal file
294
src/components/sections/feature/FeatureBento.tsx
Normal file
@@ -0,0 +1,294 @@
|
||||
"use client";
|
||||
|
||||
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 } from "@/components/cardStack/types";
|
||||
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type BentoAnimationType = Exclude<CardAnimationTypeWith3D, "depth-3d" | "scale-rotate">;
|
||||
|
||||
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;
|
||||
buttons?: ButtonConfig[];
|
||||
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,
|
||||
buttons,
|
||||
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 (
|
||||
<div className="relative w-full h-full min-h-0" style={{
|
||||
maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
|
||||
WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
|
||||
maskComposite: "intersect",
|
||||
WebkitMaskComposite: "source-in"
|
||||
}}>
|
||||
<BentoGlobe className="w-full scale-150 mt-[15%]" />
|
||||
</div>
|
||||
);
|
||||
case "icon-info-cards":
|
||||
return <BentoIconInfoCards items={feature.items} useInvertedBackground={useInvertedBackground} />;
|
||||
case "animated-bar-chart":
|
||||
return <BentoAnimatedBarChart />;
|
||||
case "3d-stack-cards":
|
||||
return <Bento3DStackCards cards={feature.items.map(item => ({ Icon: item.icon, title: item.title, subtitle: item.subtitle, detail: item.detail }))} useInvertedBackground={useInvertedBackground} />;
|
||||
case "3d-task-list":
|
||||
return <Bento3DTaskList title={feature.title} items={feature.items} useInvertedBackground={useInvertedBackground} />;
|
||||
case "orbiting-icons":
|
||||
return <BentoOrbitingIcons centerIcon={feature.centerIcon} items={feature.items} useInvertedBackground={useInvertedBackground} />;
|
||||
case "marquee":
|
||||
return feature.variant === "text"
|
||||
? <BentoMarquee centerIcon={feature.centerIcon} variant="text" texts={feature.texts} useInvertedBackground={useInvertedBackground} />
|
||||
: <BentoMarquee centerIcon={feature.centerIcon} variant="icon" icons={feature.icons} useInvertedBackground={useInvertedBackground} />;
|
||||
case "map":
|
||||
return <BentoMap useInvertedBackground={useInvertedBackground} />;
|
||||
case "line-chart":
|
||||
return <BentoLineChart useInvertedBackground={useInvertedBackground} />;
|
||||
case "3d-card-grid":
|
||||
return <Bento3DCardGrid items={feature.items} centerIcon={feature.centerIcon} useInvertedBackground={useInvertedBackground} />;
|
||||
case "phone":
|
||||
return <BentoPhoneAnimation statusIcon={feature.statusIcon} alertIcon={feature.alertIcon} alertTitle={feature.alertTitle} alertMessage={feature.alertMessage} apps={feature.apps} useInvertedBackground={useInvertedBackground} />;
|
||||
case "chat":
|
||||
return <BentoChatAnimation aiIcon={feature.aiIcon} userIcon={feature.userIcon} exchanges={feature.exchanges} placeholder={feature.placeholder} useInvertedBackground={useInvertedBackground} />;
|
||||
case "reveal-icon":
|
||||
return <BentoRevealIcon icon={feature.icon} useInvertedBackground={useInvertedBackground} />;
|
||||
case "timeline":
|
||||
return <BentoTimeline heading={feature.heading} subheading={feature.subheading} items={feature.items} completedLabel={feature.completedLabel} useInvertedBackground={useInvertedBackground} />;
|
||||
case "media-stack":
|
||||
return <BentoMediaStack items={feature.items} useInvertedBackground={useInvertedBackground} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<CardStack
|
||||
mode={carouselMode}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
uniformGridCustomHeightClasses="min-h-0"
|
||||
animationType={animationType}
|
||||
carouselThreshold={4}
|
||||
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
carouselItemClassName="w-carousel-item-3 xl:w-carousel-item-3!"
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={`${feature.title}-${index}`}
|
||||
className={cls("card flex flex-col gap-4 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
|
||||
>
|
||||
<div className="relative w-full h-70 min-h-0 overflow-hidden">
|
||||
{getBentoComponent(feature)}
|
||||
</div>
|
||||
<div className="relative z-1 flex flex-col gap-1">
|
||||
<h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
{feature.button && (
|
||||
<Button {...getButtonProps(feature.button, 0, theme.defaultButtonVariant, cls("w-full", cardButtonClassName), cardButtonTextClassName)} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureBento.displayName = "FeatureBento";
|
||||
|
||||
export default FeatureBento;
|
||||
151
src/components/sections/feature/FeatureCardEight.tsx
Normal file
151
src/components/sections/feature/FeatureCardEight.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import TimelineHorizontalCardStack from "@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack";
|
||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type FeatureCard = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
} & (
|
||||
| { imageSrc: string; videoSrc?: never }
|
||||
| { videoSrc: string; imageSrc?: never }
|
||||
);
|
||||
|
||||
interface FeatureCardEightProps {
|
||||
features: FeatureCard[];
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
cardClassName?: string;
|
||||
progressBarClassName?: string;
|
||||
cardContentClassName?: string;
|
||||
stepNumberClassName?: string;
|
||||
cardTitleClassName?: string;
|
||||
cardDescriptionClassName?: string;
|
||||
mediaContainerClassName?: string;
|
||||
mediaClassName?: string;
|
||||
}
|
||||
|
||||
const FeatureCardEight = ({
|
||||
features,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "Feature section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
cardClassName = "",
|
||||
progressBarClassName = "",
|
||||
cardContentClassName = "",
|
||||
stepNumberClassName = "",
|
||||
cardTitleClassName = "",
|
||||
cardDescriptionClassName = "",
|
||||
mediaContainerClassName = "",
|
||||
mediaClassName = "",
|
||||
}: FeatureCardEightProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
|
||||
const mediaItems = features.map((feature) => ({
|
||||
imageSrc: feature.imageSrc,
|
||||
videoSrc: feature.videoSrc,
|
||||
imageAlt: feature.imageAlt || feature.title,
|
||||
videoAriaLabel: feature.videoAriaLabel || feature.title,
|
||||
}));
|
||||
|
||||
return (
|
||||
<TimelineHorizontalCardStack
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
mediaItems={mediaItems}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
cardClassName={cardClassName}
|
||||
progressBarClassName={progressBarClassName}
|
||||
mediaContainerClassName={mediaContainerClassName}
|
||||
mediaClassName={mediaClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className={cls("relative z-1 w-full min-h-0 h-fit flex flex-col gap-3", cardContentClassName)}
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"h-8 w-[var(--height-8)] primary-button text-background rounded-theme flex items-center justify-center",
|
||||
stepNumberClassName
|
||||
)}
|
||||
>
|
||||
<p className="text-sm truncate">
|
||||
{feature.id}
|
||||
</p>
|
||||
</div>
|
||||
<h2 className={cls("mt-1 text-3xl font-medium leading-[1.15] text-balance", shouldUseLightText && "text-background", cardTitleClassName)}>
|
||||
{feature.title}
|
||||
</h2>
|
||||
<p className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</TimelineHorizontalCardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardEight.displayName = "FeatureCardEight";
|
||||
|
||||
export default FeatureCardEight;
|
||||
255
src/components/sections/feature/FeatureCardMedia.tsx
Normal file
255
src/components/sections/feature/FeatureCardMedia.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
"use client";
|
||||
|
||||
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 } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
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;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
}
|
||||
|
||||
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 (
|
||||
<article
|
||||
className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
|
||||
onClick={feature.onCardClick}
|
||||
role="article"
|
||||
aria-label={feature.title}
|
||||
>
|
||||
<div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={feature.imageSrc}
|
||||
videoSrc={feature.videoSrc}
|
||||
imageAlt={feature.imageAlt || feature.title}
|
||||
videoAriaLabel={feature.videoAriaLabel || feature.title}
|
||||
imageClassName={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
|
||||
/>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Tag
|
||||
text={feature.tag}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={tagClassName}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cls("relative z-1 card rounded-theme-capped p-6 flex flex-col gap-2 flex-1", contentClassName)}>
|
||||
<h3 className={cls(
|
||||
"text-xl md:text-2xl font-medium leading-tight",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
cardTitleClassName
|
||||
)}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
|
||||
<p className={cls(
|
||||
"text-base leading-tight",
|
||||
shouldUseLightText ? "text-background/75" : "text-foreground/75",
|
||||
cardDescriptionClassName
|
||||
)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
|
||||
{feature.buttons && feature.buttons.length > 0 && (
|
||||
<div className={cls("flex flex-wrap gap-4 mt-2", cardButtonContainerClassName)}>
|
||||
{feature.buttons.slice(0, 2).map((button, index) => (
|
||||
<Button
|
||||
key={`${button.text}-${index}`}
|
||||
{...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
});
|
||||
|
||||
FeatureCardItem.displayName = "FeatureCardItem";
|
||||
|
||||
const FeatureCardMedia = ({
|
||||
features,
|
||||
carouselMode = "buttons",
|
||||
uniformGridCustomHeightClasses,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
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 (
|
||||
<CardStack
|
||||
mode={carouselMode}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
ariaLabel={ariaLabel}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<FeatureCardItem
|
||||
key={feature.id}
|
||||
feature={feature}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
itemClassName={itemClassName}
|
||||
mediaWrapperClassName={mediaWrapperClassName}
|
||||
mediaClassName={mediaClassName}
|
||||
tagClassName={tagClassName}
|
||||
contentClassName={contentClassName}
|
||||
cardTitleClassName={cardTitleClassName}
|
||||
cardDescriptionClassName={cardDescriptionClassName}
|
||||
cardButtonContainerClassName={cardButtonContainerClassName}
|
||||
cardButtonClassName={cardButtonClassName}
|
||||
cardButtonTextClassName={cardButtonTextClassName}
|
||||
/>
|
||||
))}
|
||||
</CardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardMedia.displayName = "FeatureCardMedia";
|
||||
|
||||
export default FeatureCardMedia;
|
||||
224
src/components/sections/feature/FeatureCardNine.tsx
Normal file
224
src/components/sections/feature/FeatureCardNine.tsx
Normal file
@@ -0,0 +1,224 @@
|
||||
"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, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TimelinePhoneViewItem } from "@/components/cardStack/hooks/usePhoneAnimations";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type FeaturePhone = {
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
} & (
|
||||
| { imageSrc: string; videoSrc?: never }
|
||||
| { videoSrc: string; imageSrc?: never }
|
||||
);
|
||||
|
||||
type FeatureCard = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
buttons?: ButtonConfig[];
|
||||
phoneOne: FeaturePhone;
|
||||
phoneTwo: FeaturePhone;
|
||||
};
|
||||
|
||||
interface FeatureCardNineProps {
|
||||
features: FeatureCard[];
|
||||
showStepNumbers: boolean;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className={cls("relative z-1 h-full w-content-width mx-auto md:w-full flex flex-col items-center text-center gap-3 md:px-5", featureContentClassName)}>
|
||||
{showStepNumbers && (
|
||||
<div
|
||||
className={cls(
|
||||
"h-8 w-[var(--height-8)] primary-button text-background rounded-theme flex items-center justify-center",
|
||||
stepNumberClassName
|
||||
)}
|
||||
>
|
||||
<p className="text-sm truncate">
|
||||
{feature.id}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<h2 className={cls("text-5xl font-medium leading-[1.15] text-balance", useInvertedBackground === "invertDefault" && "text-background", featureTitleClassName)}>
|
||||
{feature.title}
|
||||
</h2>
|
||||
<p className={cls("text-base leading-[1.2] text-balance", useInvertedBackground === "invertDefault" ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
{feature.buttons && feature.buttons.length > 0 && (
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{feature.buttons.slice(0, 2).map((button, index) => (
|
||||
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FeatureCardNine = ({
|
||||
features,
|
||||
showStepNumbers,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
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: (
|
||||
<FeatureContent
|
||||
feature={feature}
|
||||
showStepNumbers={showStepNumbers}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
featureContentClassName={featureContentClassName}
|
||||
stepNumberClassName={stepNumberClassName}
|
||||
featureTitleClassName={featureTitleClassName}
|
||||
featureDescriptionClassName={featureDescriptionClassName}
|
||||
cardButtonClassName={cardButtonClassName}
|
||||
cardButtonTextClassName={cardButtonTextClassName}
|
||||
/>
|
||||
),
|
||||
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 (
|
||||
<TimelinePhoneView
|
||||
items={items}
|
||||
showTextBox={true}
|
||||
showDivider={true}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
desktopContainerClassName={desktopContainerClassName}
|
||||
mobileContainerClassName={mobileContainerClassName}
|
||||
desktopContentClassName={desktopContentClassName}
|
||||
desktopWrapperClassName={desktopWrapperClassName}
|
||||
mobileWrapperClassName={mobileWrapperClassName}
|
||||
phoneFrameClassName={phoneFrameClassName}
|
||||
mobilePhoneFrameClassName={mobilePhoneFrameClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardNine.displayName = "FeatureCardNine";
|
||||
|
||||
export default FeatureCardNine;
|
||||
193
src/components/sections/feature/FeatureCardNineteen.tsx
Normal file
193
src/components/sections/feature/FeatureCardNineteen.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import TimelineCardStack from "@/components/cardStack/layouts/timelines/TimelineCardStack";
|
||||
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, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type FeatureCard = {
|
||||
id: number;
|
||||
tag: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description: string;
|
||||
buttons?: ButtonConfig[];
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
};
|
||||
|
||||
interface FeatureCardNineteenProps {
|
||||
features: FeatureCard[];
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
cardContentClassName?: string;
|
||||
cardTagClassName?: string;
|
||||
cardTitleClassName?: string;
|
||||
cardDescriptionClassName?: string;
|
||||
cardButtonClassName?: string;
|
||||
cardButtonTextClassName?: string;
|
||||
imageContainerClassName?: string;
|
||||
imageClassName?: string;
|
||||
}
|
||||
|
||||
const FeatureCardNineteen = ({
|
||||
features,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "Feature section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
cardContentClassName = "",
|
||||
cardTagClassName = "",
|
||||
cardTitleClassName = "",
|
||||
cardDescriptionClassName = "",
|
||||
cardButtonClassName = "",
|
||||
cardButtonTextClassName = "",
|
||||
imageContainerClassName = "",
|
||||
imageClassName = "",
|
||||
}: FeatureCardNineteenProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
|
||||
return (
|
||||
<TimelineCardStack
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature) => {
|
||||
const stepNumber = String(feature.id).padStart(2, "0");
|
||||
return (
|
||||
<div
|
||||
key={feature.id}
|
||||
className={cls("relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between overflow-hidden", cardContentClassName)}
|
||||
>
|
||||
<div className="relative w-full md:w-1/2 md:h-full flex flex-col justify-between p-8 md:p-12">
|
||||
<div className="flex flex-col gap-4 md:gap-6">
|
||||
<Tag
|
||||
text={feature.tag}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={cardTagClassName}
|
||||
/>
|
||||
<h2 className={cls(
|
||||
"text-5xl md:text-7xl font-medium leading-none",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
cardTitleClassName
|
||||
)}>
|
||||
{feature.title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="block md:hidden w-full h-px my-6 bg-accent/20" />
|
||||
<div className="flex flex-col gap-2 md:gap-4">
|
||||
<h3 className={cls(
|
||||
"text-xl md:text-4xl font-medium",
|
||||
shouldUseLightText ? "text-background" : "text-foreground"
|
||||
)}>
|
||||
{feature.subtitle}
|
||||
</h3>
|
||||
<p className={cls(
|
||||
"text-base md:text-lg leading-tight",
|
||||
shouldUseLightText ? "text-background/80" : "text-foreground/80",
|
||||
cardDescriptionClassName
|
||||
)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
{feature.buttons && feature.buttons.length > 0 && (
|
||||
<div className="flex flex-wrap gap-4 mt-2">
|
||||
{feature.buttons.slice(0, 2).map((button, buttonIndex) => (
|
||||
<Button
|
||||
key={`${button.text}-${buttonIndex}`}
|
||||
{...getButtonProps(button, buttonIndex, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-full md:w-4/10 min-h-0 h-full flex flex-col gap-10 p-8 md:p-12">
|
||||
<h3 className="hidden md:block text-8xl font-medium text-accent/20 self-end">
|
||||
{stepNumber}
|
||||
</h3>
|
||||
<div
|
||||
className={cls(
|
||||
"relative max-h-full min-h-0 w-full h-full min-w-0 max-w-full md:aspect-[4/5] rounded-theme-capped overflow-hidden rotate-3",
|
||||
imageContainerClassName
|
||||
)}
|
||||
>
|
||||
<MediaContent
|
||||
imageSrc={feature.imageSrc}
|
||||
videoSrc={feature.videoSrc}
|
||||
imageAlt={feature.imageAlt || feature.title}
|
||||
videoAriaLabel={feature.videoAriaLabel || feature.title}
|
||||
imageClassName={cls("w-full h-full object-cover", imageClassName)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</TimelineCardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardNineteen.displayName = "FeatureCardNineteen";
|
||||
|
||||
export default FeatureCardNineteen;
|
||||
190
src/components/sections/feature/FeatureCardOne.tsx
Normal file
190
src/components/sections/feature/FeatureCardOne.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
"use client";
|
||||
|
||||
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 } 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;
|
||||
buttons?: ButtonConfig[];
|
||||
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,
|
||||
buttons,
|
||||
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 {};
|
||||
};
|
||||
|
||||
return (
|
||||
<CardStack
|
||||
mode={carouselMode}
|
||||
gridVariant={gridVariant}
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
supports3DAnimation={true}
|
||||
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={`${feature.title}-${index}`}
|
||||
className={cls("card flex flex-col gap-4 p-4 rounded-theme-capped min-h-0 h-full", cardClassName)}
|
||||
>
|
||||
<MediaContent
|
||||
imageSrc={feature.imageSrc}
|
||||
videoSrc={feature.videoSrc}
|
||||
imageAlt={feature.imageAlt || "Feature image"}
|
||||
videoAriaLabel={feature.videoAriaLabel || "Feature video"}
|
||||
imageClassName={cls("relative z-1 min-h-0 h-full", mediaClassName)}
|
||||
/>
|
||||
<div className="relative z-1 flex flex-col gap-1">
|
||||
<h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
{feature.button && (
|
||||
<Button
|
||||
{...getButtonProps(
|
||||
{ ...feature.button, props: { ...feature.button.props, ...getButtonConfigProps() } },
|
||||
0,
|
||||
theme.defaultButtonVariant,
|
||||
cls("w-full", cardButtonClassName),
|
||||
cardButtonTextClassName
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardOne.displayName = "FeatureCardOne";
|
||||
|
||||
export default FeatureCardOne;
|
||||
173
src/components/sections/feature/FeatureCardSeven.tsx
Normal file
173
src/components/sections/feature/FeatureCardSeven.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
"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, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type FeatureCard = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
buttons?: ButtonConfig[];
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
};
|
||||
|
||||
interface FeatureCardSevenProps {
|
||||
features: FeatureCard[];
|
||||
animationType: CardAnimationType;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
}
|
||||
|
||||
const FeatureCardSeven = ({
|
||||
features,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
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 (
|
||||
<CardList
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
animationType={animationType}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
cardClassName={cardClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className={cls("relative z-1 w-full min-h-0 h-full flex flex-col justify-between items-center p-6 gap-6 md:p-15 md:gap-15", index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse", cardContentClassName)}
|
||||
>
|
||||
<div className="w-full md:w-1/2 min-w-0 h-fit md:h-full flex flex-col justify-center">
|
||||
<div className="w-full min-w-0 flex flex-col gap-3 md:gap-5">
|
||||
<div
|
||||
className={cls(
|
||||
"h-8 w-[var(--height-8)] primary-button text-background rounded-theme flex items-center justify-center",
|
||||
stepNumberClassName
|
||||
)}
|
||||
>
|
||||
<p className="text-sm truncate">
|
||||
{feature.id}
|
||||
</p>
|
||||
</div>
|
||||
<h2 className={cls("mt-1 text-4xl md:text-5xl font-medium leading-[1.15] text-balance", shouldUseLightText && "text-background", cardTitleClassName)}>
|
||||
{feature.title}
|
||||
</h2>
|
||||
<p className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
{feature.buttons && feature.buttons.length > 0 && (
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{feature.buttons.slice(0, 2).map((button, index) => (
|
||||
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={cls(
|
||||
"relative w-full md:w-1/2 aspect-square overflow-hidden rounded-theme-capped",
|
||||
imageContainerClassName
|
||||
)}
|
||||
>
|
||||
<MediaContent
|
||||
imageSrc={feature.imageSrc}
|
||||
videoSrc={feature.videoSrc}
|
||||
imageAlt={feature.imageAlt || feature.title}
|
||||
videoAriaLabel={feature.videoAriaLabel || feature.title}
|
||||
imageClassName={cls("w-full h-full object-cover", imageClassName)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardList>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardSeven.displayName = "FeatureCardSeven";
|
||||
|
||||
export default FeatureCardSeven;
|
||||
167
src/components/sections/feature/FeatureCardSix.tsx
Normal file
167
src/components/sections/feature/FeatureCardSix.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import TimelineCardStack from "@/components/cardStack/layouts/timelines/TimelineCardStack";
|
||||
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, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type FeatureCard = {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
buttons?: ButtonConfig[];
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
};
|
||||
|
||||
interface FeatureCardSixProps {
|
||||
features: FeatureCard[];
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
cardContentClassName?: string;
|
||||
stepNumberClassName?: string;
|
||||
cardTitleClassName?: string;
|
||||
cardDescriptionClassName?: string;
|
||||
imageContainerClassName?: string;
|
||||
imageClassName?: string;
|
||||
cardButtonClassName?: string;
|
||||
cardButtonTextClassName?: string;
|
||||
}
|
||||
|
||||
const FeatureCardSix = ({
|
||||
features,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "Feature section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
cardContentClassName = "",
|
||||
stepNumberClassName = "",
|
||||
cardTitleClassName = "",
|
||||
cardDescriptionClassName = "",
|
||||
imageContainerClassName = "",
|
||||
imageClassName = "",
|
||||
cardButtonClassName = "",
|
||||
cardButtonTextClassName = "",
|
||||
}: FeatureCardSixProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
|
||||
return (
|
||||
<TimelineCardStack
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className={cls("relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between items-center p-10 gap-10 md:p-15 md:gap-15", cardContentClassName)}
|
||||
>
|
||||
<div className="w-full md:w-1/2 min-w-0 h-fit md:h-full flex flex-col justify-center">
|
||||
<div className="w-full min-w-0 flex flex-col gap-3 md:gap-5">
|
||||
<div
|
||||
className={cls(
|
||||
"h-8 w-[var(--height-8)] primary-button text-background rounded-theme flex items-center justify-center",
|
||||
stepNumberClassName
|
||||
)}
|
||||
>
|
||||
<p className="text-sm truncate">
|
||||
{feature.id}
|
||||
</p>
|
||||
</div>
|
||||
<h2 className={cls("mt-1 text-4xl md:text-5xl font-medium leading-[1.15] text-balance truncate", shouldUseLightText && "text-background", cardTitleClassName)}>
|
||||
{feature.title}
|
||||
</h2>
|
||||
<p className={cls("text-base leading-[1.15] text-balance truncate", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
{feature.buttons && feature.buttons.length > 0 && (
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{feature.buttons.slice(0, 2).map((button, index) => (
|
||||
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={cls(
|
||||
"relative z-1 w-full md:w-1/2 min-h-0 h-full overflow-hidden rounded-theme-capped",
|
||||
imageContainerClassName
|
||||
)}
|
||||
>
|
||||
<MediaContent
|
||||
imageSrc={feature.imageSrc}
|
||||
videoSrc={feature.videoSrc}
|
||||
imageAlt={feature.imageAlt || feature.title}
|
||||
videoAriaLabel={feature.videoAriaLabel || feature.title}
|
||||
imageClassName={cls("w-full min-h-0 h-full object-cover", imageClassName)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</TimelineCardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardSix.displayName = "FeatureCardSix";
|
||||
|
||||
export default FeatureCardSix;
|
||||
161
src/components/sections/feature/FeatureCardSixteen.tsx
Normal file
161
src/components/sections/feature/FeatureCardSixteen.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
"use client";
|
||||
|
||||
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 } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type ComparisonItem = {
|
||||
items: string[];
|
||||
};
|
||||
|
||||
interface FeatureCardSixteenProps {
|
||||
negativeCard: ComparisonItem;
|
||||
positiveCard: ComparisonItem;
|
||||
animationType: CardAnimationTypeWith3D;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground: InvertedBackground;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
}
|
||||
|
||||
const FeatureCardSixteen = ({
|
||||
negativeCard,
|
||||
positiveCard,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
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 (
|
||||
<section
|
||||
ref={containerRef}
|
||||
aria-label={ariaLabel}
|
||||
className={cls("relative py-20 w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
|
||||
>
|
||||
<div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
/>
|
||||
|
||||
<div
|
||||
ref={perspectiveRef}
|
||||
className={cls(
|
||||
"relative mx-auto w-full md:w-60 grid grid-cols-1 gap-6",
|
||||
cards.length >= 2 ? "md:grid-cols-2" : "md:grid-cols-1",
|
||||
gridClassName
|
||||
)}
|
||||
>
|
||||
{cards.map((card, index) => (
|
||||
<div
|
||||
key={card.variant}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
className={cls(
|
||||
"relative h-full card rounded-theme-capped p-6",
|
||||
cardClassName
|
||||
)}
|
||||
>
|
||||
<div className={cls("flex flex-col gap-6", card.variant === "negative" && "opacity-50")}>
|
||||
<PricingFeatureList
|
||||
features={card.items}
|
||||
icon={card.variant === "positive" ? Check : X}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
className={itemsListClassName}
|
||||
featureItemClassName={itemClassName}
|
||||
featureIconWrapperClassName=""
|
||||
featureIconClassName={itemIconClassName}
|
||||
featureTextClassName={cls("truncate", itemTextClassName)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardSixteen.displayName = "FeatureCardSixteen";
|
||||
|
||||
export default FeatureCardSixteen;
|
||||
257
src/components/sections/feature/FeatureCardTen.tsx
Normal file
257
src/components/sections/feature/FeatureCardTen.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
"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, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type FeatureMedia = {
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
} & (
|
||||
| { imageSrc: string; videoSrc?: never }
|
||||
| { videoSrc: string; imageSrc?: never }
|
||||
);
|
||||
|
||||
interface FeatureListItem {
|
||||
icon: LucideIcon;
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface FeatureCard {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
media: FeatureMedia;
|
||||
items: FeatureListItem[];
|
||||
reverse: boolean;
|
||||
}
|
||||
|
||||
interface FeatureCardTenProps {
|
||||
features: FeatureCard[];
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
}
|
||||
|
||||
interface FeatureMediaProps {
|
||||
media: FeatureMedia;
|
||||
title: string;
|
||||
mediaCardClassName: string;
|
||||
}
|
||||
|
||||
const FeatureMedia = ({
|
||||
media,
|
||||
title,
|
||||
mediaCardClassName,
|
||||
}: FeatureMediaProps) => (
|
||||
<div className={cls("card rounded-theme-capped p-4 aspect-square md:aspect-[16/10]", mediaCardClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={media.imageSrc}
|
||||
videoSrc={media.videoSrc}
|
||||
imageAlt={media.imageAlt || title}
|
||||
videoAriaLabel={media.videoAriaLabel || `${title} video`}
|
||||
imageClassName="relative z-1 w-full h-full object-cover rounded-theme-capped"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
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) => (
|
||||
<div className="flex flex-col gap-3" >
|
||||
<h3 className={cls("text-xl md:text-4xl font-medium leading-[1.15]", useInvertedBackground === "invertDefault" && "text-background", featureTitleClassName)}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className={cls("text-base leading-[1.2]", useInvertedBackground === "invertDefault" ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
<ul className="flex flex-col m-0 mt-1 p-0 list-none gap-3">
|
||||
{feature.items.map((listItem, listIndex) => {
|
||||
const Icon = listItem.icon;
|
||||
return (
|
||||
<li key={listIndex} className="flex items-center gap-3">
|
||||
<div
|
||||
className={cls(
|
||||
"shrink-0 h-9 aspect-square flex items-center justify-center rounded bg-background card",
|
||||
iconContainerClassName
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className={cls("h-4/10 w-4/10", shouldUseLightText ? "text-background" : "text-foreground", iconClassName)}
|
||||
strokeWidth={1.25}
|
||||
/>
|
||||
</div>
|
||||
<p className={cls("text-base", useInvertedBackground === "invertDefault" ? "text-background/75" : "text-foreground/75", listItemClassName)}>
|
||||
{listItem.text}
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
const FeatureCardTen = ({
|
||||
features,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
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: (
|
||||
<FeatureMedia
|
||||
media={feature.media}
|
||||
title={feature.title}
|
||||
mediaCardClassName={mediaCardClassName}
|
||||
/>
|
||||
),
|
||||
content: (
|
||||
<FeatureContent
|
||||
feature={feature}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
featureTitleClassName={featureTitleClassName}
|
||||
featureDescriptionClassName={featureDescriptionClassName}
|
||||
listItemClassName={listItemClassName}
|
||||
iconContainerClassName={iconContainerClassName}
|
||||
iconClassName={iconClassName}
|
||||
/>
|
||||
),
|
||||
})),
|
||||
[
|
||||
features,
|
||||
useInvertedBackground,
|
||||
shouldUseLightText,
|
||||
mediaCardClassName,
|
||||
featureTitleClassName,
|
||||
featureDescriptionClassName,
|
||||
listItemClassName,
|
||||
iconContainerClassName,
|
||||
iconClassName,
|
||||
]
|
||||
);
|
||||
|
||||
return (
|
||||
<TimelineProcessFlow
|
||||
items={timelineItems}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
animationType={animationType}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
ariaLabel={ariaLabel}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
textBoxTitleClassName={textBoxTitleClassName}
|
||||
textBoxDescriptionClassName={textBoxDescriptionClassName}
|
||||
textBoxTagClassName={textBoxTagClassName}
|
||||
textBoxButtonContainerClassName={textBoxButtonContainerClassName}
|
||||
textBoxButtonClassName={textBoxButtonClassName}
|
||||
textBoxButtonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
itemClassName={itemClassName}
|
||||
mediaWrapperClassName={mediaWrapperClassName}
|
||||
numberClassName={numberClassName}
|
||||
contentWrapperClassName={contentWrapperClassName}
|
||||
gapClassName={gapClassName}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardTen.displayName = "FeatureCardTen";
|
||||
|
||||
export default memo(FeatureCardTen);
|
||||
177
src/components/sections/feature/FeatureCardTwelve.tsx
Normal file
177
src/components/sections/feature/FeatureCardTwelve.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
"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, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
interface FeatureCard {
|
||||
id: string;
|
||||
label: string;
|
||||
title: string;
|
||||
items: string[];
|
||||
buttons?: ButtonConfig[];
|
||||
}
|
||||
|
||||
interface FeatureCardTwelveProps {
|
||||
features: FeatureCard[];
|
||||
animationType: CardAnimationType;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
labelClassName?: string;
|
||||
cardTitleClassName?: string;
|
||||
itemsContainerClassName?: string;
|
||||
itemTextClassName?: string;
|
||||
cardButtonClassName?: string;
|
||||
cardButtonTextClassName?: string;
|
||||
}
|
||||
|
||||
const FeatureCardTwelve = ({
|
||||
features,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
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);
|
||||
|
||||
return (
|
||||
<CardList
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
animationType={animationType}
|
||||
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
cardClassName={cardClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<div
|
||||
key={feature.id}
|
||||
className={cls(
|
||||
"relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row gap-6 p-6 md:p-15",
|
||||
cardContentClassName
|
||||
)}
|
||||
>
|
||||
<div className="relative z-1 w-full md:w-1/2 flex md:justify-start">
|
||||
<h2 className={cls(
|
||||
"text-5xl md:text-6xl font-medium leading-[1.1]",
|
||||
shouldUseLightText && "text-background",
|
||||
labelClassName
|
||||
)}>
|
||||
{feature.label}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
|
||||
|
||||
<div className="relative z-1 w-full md:w-1/2 flex flex-col gap-4">
|
||||
<h3 className={cls(
|
||||
"text-xl md:text-3xl font-medium leading-tight",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
cardTitleClassName
|
||||
)}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
|
||||
<div className={cls("flex flex-wrap items-center gap-2", itemsContainerClassName)}>
|
||||
{feature.items.map((item, index) => (
|
||||
<Fragment key={index}>
|
||||
<span className={cls(
|
||||
"text-base",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
itemTextClassName
|
||||
)}>
|
||||
{item}
|
||||
</span>
|
||||
{index < feature.items.length - 1 && (
|
||||
<span className="text-base text-accent">•</span>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{feature.buttons && feature.buttons.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-4">
|
||||
{feature.buttons.slice(0, 2).map((button, index) => (
|
||||
<Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardList>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardTwelve.displayName = "FeatureCardTwelve";
|
||||
|
||||
export default FeatureCardTwelve;
|
||||
172
src/components/sections/feature/FeatureCardTwentyFive.tsx
Normal file
172
src/components/sections/feature/FeatureCardTwentyFive.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
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 } 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;
|
||||
buttons?: ButtonConfig[];
|
||||
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,
|
||||
buttons,
|
||||
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);
|
||||
|
||||
return (
|
||||
<CardStack
|
||||
mode={carouselMode}
|
||||
gridVariant="two-items-per-row"
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
supports3DAnimation={true}
|
||||
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature, index) => {
|
||||
const IconComponent = feature.icon;
|
||||
return (
|
||||
<div
|
||||
key={`${feature.title}-${index}`}
|
||||
className={cls("card flex flex-col gap-5 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
|
||||
>
|
||||
<div className="relative z-1 flex flex-col gap-1">
|
||||
<div className={cls("h-15 w-[3.75rem] mb-1 aspect-square rounded-theme primary-button flex items-center justify-center", cardIconWrapperClassName)}>
|
||||
<IconComponent className={cls("h-4/10 w-4/10 text-background", cardIconClassName)} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
|
||||
{feature.mediaItems.map((item, mediaIndex) => (
|
||||
<div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
|
||||
<MediaContent
|
||||
imageSrc={item.imageSrc}
|
||||
videoSrc={item.videoSrc}
|
||||
imageAlt={item.imageAlt || "Feature image"}
|
||||
videoAriaLabel={item.videoAriaLabel || "Feature video"}
|
||||
imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardTwentyFive.displayName = "FeatureCardTwentyFive";
|
||||
|
||||
export default FeatureCardTwentyFive;
|
||||
194
src/components/sections/feature/FeatureCardTwentyFour.tsx
Normal file
194
src/components/sections/feature/FeatureCardTwentyFour.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
"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, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type MediaProps =
|
||||
| {
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
videoSrc?: never;
|
||||
videoAriaLabel?: never;
|
||||
}
|
||||
| {
|
||||
videoSrc: string;
|
||||
videoAriaLabel?: string;
|
||||
imageSrc?: never;
|
||||
imageAlt?: never;
|
||||
};
|
||||
|
||||
type FeatureItem = MediaProps & {
|
||||
id: string;
|
||||
title: string;
|
||||
author: string;
|
||||
description: string;
|
||||
tags: string[];
|
||||
onFeatureClick?: () => void;
|
||||
};
|
||||
|
||||
interface FeatureCardTwentyFourProps {
|
||||
features: FeatureItem[];
|
||||
animationType: CardAnimationType;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
}
|
||||
|
||||
const FeatureCardTwentyFour = ({
|
||||
features,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
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 (
|
||||
<CardList
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
animationType={animationType}
|
||||
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
cardClassName={cardClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<article
|
||||
key={feature.id}
|
||||
className={cls(
|
||||
"relative z-1 w-full min-h-0 h-full flex flex-col md:grid md:grid-cols-10 gap-6 md:gap-10 cursor-pointer group p-6 md:p-10",
|
||||
cardContentClassName
|
||||
)}
|
||||
onClick={feature.onFeatureClick}
|
||||
role="article"
|
||||
aria-label={feature.title}
|
||||
>
|
||||
<div className="relative z-1 w-full md:col-span-6 flex flex-col gap-3 md:gap-12">
|
||||
<h3 className={cls(
|
||||
"text-3xl md:text-5xl text-balance font-medium leading-tight line-clamp-3",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
cardTitleClassName
|
||||
)}>
|
||||
{feature.title}{" "}
|
||||
<span className={cls(
|
||||
shouldUseLightText ? "text-background/50" : "text-foreground/50",
|
||||
authorClassName
|
||||
)}>
|
||||
by {feature.author}
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
<div className="mt-auto flex flex-col gap-4">
|
||||
<div className={cls("flex flex-wrap gap-2", tagsContainerClassName)}>
|
||||
{feature.tags.map((tagText, index) => (
|
||||
<Tag key={index} text={tagText} useInvertedBackground={useInvertedBackground} className={tagClassName} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className={cls(
|
||||
"text-base md:text-2xl text-balance leading-tight line-clamp-2",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
cardDescriptionClassName
|
||||
)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cls(
|
||||
"relative z-1 w-full md:col-span-4 aspect-square md:aspect-auto overflow-hidden rounded-theme-capped",
|
||||
mediaWrapperClassName
|
||||
)}>
|
||||
<MediaContent
|
||||
imageSrc={feature.imageSrc}
|
||||
videoSrc={feature.videoSrc}
|
||||
imageAlt={feature.imageAlt}
|
||||
videoAriaLabel={feature.videoAriaLabel}
|
||||
imageClassName={cls("w-full h-full object-cover", mediaClassName)}
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</CardList>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardTwentyFour.displayName = "FeatureCardTwentyFour";
|
||||
|
||||
export default FeatureCardTwentyFour;
|
||||
220
src/components/sections/feature/FeatureCardTwentyOne.tsx
Normal file
220
src/components/sections/feature/FeatureCardTwentyOne.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import TextBox from "@/components/Textbox";
|
||||
import Accordion from "@/components/Accordion";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type MediaProps =
|
||||
| {
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
videoSrc?: never;
|
||||
videoAriaLabel?: never;
|
||||
}
|
||||
| {
|
||||
videoSrc: string;
|
||||
videoAriaLabel?: string;
|
||||
imageSrc?: never;
|
||||
imageAlt?: never;
|
||||
};
|
||||
|
||||
type AccordionItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
};
|
||||
|
||||
type FeatureCardTwentyOneProps = MediaProps & {
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
accordionItems: AccordionItem[];
|
||||
useInvertedBackground: InvertedBackground;
|
||||
mediaPosition?: "left" | "right";
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
mediaWrapperClassName?: string;
|
||||
mediaClassName?: string;
|
||||
contentClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
accordionContainerClassName?: string;
|
||||
accordionClassName?: string;
|
||||
accordionTitleClassName?: string;
|
||||
accordionContentClassName?: string;
|
||||
accordionIconContainerClassName?: string;
|
||||
accordionIconClassName?: string;
|
||||
};
|
||||
|
||||
const FeatureCardTwentyOne = ({
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
accordionItems,
|
||||
imageSrc,
|
||||
imageAlt,
|
||||
videoSrc,
|
||||
videoAriaLabel,
|
||||
useInvertedBackground,
|
||||
mediaPosition = "left",
|
||||
ariaLabel = "Feature section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
mediaWrapperClassName = "",
|
||||
mediaClassName = "",
|
||||
contentClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
accordionContainerClassName = "",
|
||||
accordionClassName = "",
|
||||
accordionTitleClassName = "",
|
||||
accordionContentClassName = "",
|
||||
accordionIconContainerClassName = "",
|
||||
accordionIconClassName = "",
|
||||
}: FeatureCardTwentyOneProps) => {
|
||||
const [activeAccordion, setActiveAccordion] = useState<number>(0);
|
||||
|
||||
const handleAccordionToggle = (index: number) => {
|
||||
setActiveAccordion(activeAccordion === index ? -1 : index);
|
||||
};
|
||||
|
||||
const mediaElement = (
|
||||
<div className={cls(
|
||||
"w-full md:w-1/2 h-[50svh] md:h-auto rounded-theme-capped overflow-hidden",
|
||||
mediaWrapperClassName
|
||||
)}>
|
||||
<MediaContent
|
||||
imageSrc={imageSrc}
|
||||
videoSrc={videoSrc}
|
||||
imageAlt={imageAlt}
|
||||
videoAriaLabel={videoAriaLabel}
|
||||
imageClassName={cls("w-full h-full object-cover", mediaClassName)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const contentElement = (
|
||||
<div className={cls(
|
||||
"w-full md:w-1/2 flex flex-col",
|
||||
contentClassName
|
||||
)}>
|
||||
{/* Mobile */}
|
||||
<TextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={cls("flex flex-col gap-1 md:hidden", textBoxClassName)}
|
||||
titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
|
||||
descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
|
||||
tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
|
||||
buttonContainerClassName={cls("flex flex-wrap gap-4 mt-4", buttonContainerClassName)}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={cls("text-base", buttonTextClassName)}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
center={true}
|
||||
/>
|
||||
{/* Desktop */}
|
||||
<TextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={cls("hidden md:flex flex-col gap-1", textBoxClassName)}
|
||||
titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
|
||||
descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
|
||||
tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
|
||||
buttonContainerClassName={cls("flex flex-wrap gap-4 mt-4", buttonContainerClassName)}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={cls("text-base", buttonTextClassName)}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
center={false}
|
||||
/>
|
||||
|
||||
<div className={cls(
|
||||
"flex flex-col mt-8 divide-y divide-accent/20 border-y border-accent/20",
|
||||
accordionContainerClassName
|
||||
)}>
|
||||
{accordionItems.map((item, index) => (
|
||||
<Accordion
|
||||
key={item.id}
|
||||
index={index}
|
||||
isActive={activeAccordion === index}
|
||||
onToggle={handleAccordionToggle}
|
||||
title={item.title}
|
||||
content={item.content}
|
||||
showCard={false}
|
||||
useInvertedBackground={useInvertedBackground === "noInvert" ? undefined : useInvertedBackground}
|
||||
className={cls("py-4 md:py-6", accordionClassName)}
|
||||
titleClassName={cls("text-xl md:text-2xl", accordionTitleClassName)}
|
||||
contentClassName={accordionContentClassName}
|
||||
iconContainerClassName={accordionIconContainerClassName}
|
||||
iconClassName={accordionIconClassName}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label={ariaLabel}
|
||||
className={cls("relative w-full py-20", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
|
||||
>
|
||||
<div className={cls(
|
||||
"w-content-width mx-auto flex flex-col md:flex-row gap-8 md:gap-15",
|
||||
containerClassName
|
||||
)}>
|
||||
{mediaPosition === "left" ? (
|
||||
<>
|
||||
{mediaElement}
|
||||
{contentElement}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{contentElement}
|
||||
{mediaElement}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardTwentyOne.displayName = "FeatureCardTwentyOne";
|
||||
|
||||
export default FeatureCardTwentyOne;
|
||||
181
src/components/sections/feature/FeatureCardTwentySix.tsx
Normal file
181
src/components/sections/feature/FeatureCardTwentySix.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import ArrowCarousel from "@/components/cardStack/layouts/carousels/ArrowCarousel";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { useButtonClick } from "@/components/button/useButtonClick";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
buttonIcon: LucideIcon;
|
||||
buttonHref?: string;
|
||||
buttonOnClick?: () => void;
|
||||
};
|
||||
|
||||
interface FeatureCardTwentySixProps {
|
||||
features: FeatureItem[];
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
carouselClassName?: string;
|
||||
controlsClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
textBoxTagClassName?: string;
|
||||
textBoxButtonContainerClassName?: string;
|
||||
textBoxButtonClassName?: string;
|
||||
textBoxButtonTextClassName?: string;
|
||||
}
|
||||
|
||||
interface FeatureCardProps {
|
||||
feature: FeatureItem;
|
||||
cardClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
buttonClassName?: string;
|
||||
}
|
||||
|
||||
const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
|
||||
|
||||
const FeatureCard = memo(({
|
||||
feature,
|
||||
cardClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
buttonClassName = "",
|
||||
}: FeatureCardProps) => {
|
||||
const Icon = feature.buttonIcon;
|
||||
const handleClick = useButtonClick(feature.buttonHref, feature.buttonOnClick);
|
||||
|
||||
return (
|
||||
<div className={cls("relative h-90 md:h-100 2xl:h-110 rounded-theme-capped overflow-hidden", cardClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={feature.imageSrc}
|
||||
videoSrc={feature.videoSrc}
|
||||
imageAlt={feature.imageAlt}
|
||||
videoAriaLabel={feature.videoAriaLabel}
|
||||
imageClassName="!absolute inset-0 w-full h-full object-cover !rounded-none"
|
||||
/>
|
||||
<div
|
||||
className="absolute z-1 backdrop-blur-xl opacity-100 w-full h-1/3 left-0 bottom-0"
|
||||
style={{ maskImage: MASK_GRADIENT }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-foreground/60 to-transparent z-1" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 md:p-8 flex items-end md:items-center justify-between gap-4 z-2">
|
||||
<div className="flex flex-col gap-0 min-w-0">
|
||||
<h3 className={cls("text-2xl md:text-3xl font-medium leading-tight text-background", titleClassName)}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className={cls("text-sm md:text-base leading-tight text-background/75", descriptionClassName)}>
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className={cls("shrink-0 primary-button h-8 w-auto aspect-square rounded-theme flex items-center justify-center cursor-pointer", buttonClassName)}
|
||||
aria-label={feature.buttonHref ? `Navigate to ${feature.buttonHref}` : "Action button"}
|
||||
>
|
||||
<Icon className="w-4/10 h-4/10 text-background" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
FeatureCard.displayName = "FeatureCard";
|
||||
|
||||
const FeatureCardTwentySix = ({
|
||||
features,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "Feature section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
cardClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
textBoxTitleImageWrapperClassName = "",
|
||||
textBoxTitleImageClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
cardTitleClassName = "",
|
||||
cardDescriptionClassName = "",
|
||||
cardButtonClassName = "",
|
||||
carouselClassName = "",
|
||||
controlsClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
}: FeatureCardTwentySixProps) => {
|
||||
return (
|
||||
<ArrowCarousel
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
ariaLabel={ariaLabel}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard
|
||||
key={`${feature.title}-${index}`}
|
||||
feature={feature}
|
||||
cardClassName={cardClassName}
|
||||
titleClassName={cardTitleClassName}
|
||||
descriptionClassName={cardDescriptionClassName}
|
||||
buttonClassName={cardButtonClassName}
|
||||
/>
|
||||
))}
|
||||
</ArrowCarousel>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardTwentySix.displayName = "FeatureCardTwentySix";
|
||||
|
||||
export default FeatureCardTwentySix;
|
||||
235
src/components/sections/feature/FeatureCardTwentyThree.tsx
Normal file
235
src/components/sections/feature/FeatureCardTwentyThree.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
"use client";
|
||||
|
||||
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 } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
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;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
}
|
||||
|
||||
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 (
|
||||
<article
|
||||
className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
|
||||
onClick={feature.onFeatureClick}
|
||||
role="article"
|
||||
aria-label={feature.title}
|
||||
>
|
||||
<div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={feature.imageSrc}
|
||||
videoSrc={feature.videoSrc}
|
||||
imageAlt={feature.imageAlt || feature.title}
|
||||
videoAriaLabel={feature.videoAriaLabel || feature.title}
|
||||
imageClassName={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={cls("relative z-1 card rounded-theme-capped p-5 flex flex-col gap-4", cardClassName)}>
|
||||
<h3 className={cls(
|
||||
"text-xl md:text-2xl font-medium leading-tight",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
cardTitleClassName
|
||||
)}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className={cls("flex items-center gap-2 flex-wrap", tagsContainerClassName)}>
|
||||
{feature.tags.map((tag, index) => (
|
||||
<Tag
|
||||
key={index}
|
||||
text={tag}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={tagClassName}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<ArrowRight
|
||||
className={cls(
|
||||
"h-[var(--text-base)] w-auto shrink-0 transition-transform duration-300 group-hover:-rotate-45",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
arrowClassName
|
||||
)}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
});
|
||||
|
||||
FeatureCardItem.displayName = "FeatureCardItem";
|
||||
|
||||
const FeatureCardTwentyThree = ({
|
||||
features,
|
||||
carouselMode = "buttons",
|
||||
uniformGridCustomHeightClasses,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
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 (
|
||||
<CardStack
|
||||
mode={carouselMode}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
ariaLabel={ariaLabel}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<FeatureCardItem
|
||||
key={feature.id}
|
||||
feature={feature}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
itemClassName={itemClassName}
|
||||
mediaWrapperClassName={mediaWrapperClassName}
|
||||
mediaClassName={mediaClassName}
|
||||
cardClassName={cardClassName}
|
||||
cardTitleClassName={cardTitleClassName}
|
||||
tagsContainerClassName={tagsContainerClassName}
|
||||
tagClassName={tagClassName}
|
||||
arrowClassName={arrowClassName}
|
||||
/>
|
||||
))}
|
||||
</CardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardTwentyThree.displayName = "FeatureCardTwentyThree";
|
||||
|
||||
export default FeatureCardTwentyThree;
|
||||
169
src/components/sections/feature/FeatureCardTwentyTwo.tsx
Normal file
169
src/components/sections/feature/FeatureCardTwentyTwo.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
"use client";
|
||||
|
||||
import { Fragment } 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 } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type FeatureItem = {
|
||||
id: string;
|
||||
category: string[];
|
||||
title: string;
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
};
|
||||
|
||||
interface FeatureCardTwentyTwoProps {
|
||||
features: FeatureItem[];
|
||||
animationType: CardAnimationType;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground: InvertedBackground;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
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;
|
||||
cardContentClassName?: string;
|
||||
cardTitleClassName?: string;
|
||||
categoryContainerClassName?: string;
|
||||
categoryClassName?: string;
|
||||
mediaWrapperClassName?: string;
|
||||
mediaClassName?: string;
|
||||
}
|
||||
|
||||
const FeatureCardTwentyTwo = ({
|
||||
features,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
ariaLabel = "Features section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
gridClassName = "",
|
||||
cardClassName = "",
|
||||
cardContentClassName = "",
|
||||
cardTitleClassName = "",
|
||||
categoryContainerClassName = "",
|
||||
categoryClassName = "",
|
||||
mediaWrapperClassName = "",
|
||||
mediaClassName = "",
|
||||
}: FeatureCardTwentyTwoProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
const { itemRefs } = useCardAnimation({ animationType, itemCount: features.length });
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label={ariaLabel}
|
||||
className={cls("relative py-20 w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
|
||||
>
|
||||
<div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
/>
|
||||
|
||||
<div className={cls("grid grid-cols-1 md:grid-cols-2 gap-8 card rounded-theme-capped p-5 md:p-8", gridClassName)}>
|
||||
{features.map((feature, index) => (
|
||||
<article
|
||||
key={feature.id}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
className={cls("relative h-full flex flex-col md:flex-row md:items-center gap-4 md:gap-8 cursor-pointer", cardClassName)}
|
||||
>
|
||||
<div className={cls("relative z-1 w-full md:h-50 md:w-auto aspect-square rounded-theme-capped overflow-hidden shrink-0", mediaWrapperClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={feature.imageSrc}
|
||||
videoSrc={feature.videoSrc}
|
||||
imageAlt={feature.imageAlt || feature.title}
|
||||
videoAriaLabel={feature.videoAriaLabel || feature.title}
|
||||
imageClassName={cls("w-full h-full object-cover", mediaClassName)}
|
||||
/>
|
||||
</div>
|
||||
<div className={cls("relative z-1 flex flex-col gap-2 min-w-0 flex-1", cardContentClassName)}>
|
||||
<h3 className={cls(
|
||||
"text-3xl font-medium leading-tight line-clamp-2",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
cardTitleClassName
|
||||
)}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<div className={cls("flex flex-wrap items-center gap-2", categoryContainerClassName)}>
|
||||
{feature.category.map((cat, idx) => (
|
||||
<Fragment key={idx}>
|
||||
<span className={cls(
|
||||
"text-sm",
|
||||
shouldUseLightText ? "text-background/75" : "text-foreground/75",
|
||||
categoryClassName
|
||||
)}>
|
||||
{cat}
|
||||
</span>
|
||||
{idx < feature.category.length - 1 && (
|
||||
<span className="text-sm text-accent">•</span>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardTwentyTwo.displayName = "FeatureCardTwentyTwo";
|
||||
|
||||
export default FeatureCardTwentyTwo;
|
||||
189
src/components/sections/feature/FeatureProcessSteps.tsx
Normal file
189
src/components/sections/feature/FeatureProcessSteps.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import TextBox from "@/components/Textbox";
|
||||
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 { InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
import type { ButtonConfig } from "@/types/button";
|
||||
|
||||
interface ProcessStep {
|
||||
number: string;
|
||||
title: string;
|
||||
description: string;
|
||||
tag?: string;
|
||||
}
|
||||
|
||||
interface FeatureProcessStepsProps {
|
||||
title: string;
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
steps: ProcessStep[];
|
||||
useInvertedBackground: InvertedBackground;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
gridClassName?: string;
|
||||
leftColumnClassName?: string;
|
||||
rightColumnClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
stepsContainerClassName?: string;
|
||||
stepClassName?: string;
|
||||
stepNumberClassName?: string;
|
||||
stepContentClassName?: string;
|
||||
stepTitleClassName?: string;
|
||||
stepTagClassName?: string;
|
||||
stepDescriptionClassName?: string;
|
||||
}
|
||||
|
||||
const FeatureProcessSteps = ({
|
||||
title,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
steps,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "Process steps section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
gridClassName = "",
|
||||
leftColumnClassName = "",
|
||||
rightColumnClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
stepsContainerClassName = "",
|
||||
stepClassName = "",
|
||||
stepNumberClassName = "",
|
||||
stepContentClassName = "",
|
||||
stepTitleClassName = "",
|
||||
stepTagClassName = "",
|
||||
stepDescriptionClassName = "",
|
||||
}: FeatureProcessStepsProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label={ariaLabel}
|
||||
className={cls(
|
||||
"relative py-20 w-full",
|
||||
useInvertedBackground === "invertDefault" && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className={cls("w-content-width mx-auto", containerClassName)}>
|
||||
<div className={cls("grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-10 items-center", gridClassName)}>
|
||||
<div className={cls("flex flex-col", leftColumnClassName)}>
|
||||
<TextBox
|
||||
title={title}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={cls("gap-3 md:gap-3", textBoxClassName)}
|
||||
titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
|
||||
descriptionClassName={cls("text-lg leading-tight text-balance", descriptionClassName)}
|
||||
tagClassName={cls("mb-1", tagClassName)}
|
||||
buttonContainerClassName={cls("mt-2", buttonContainerClassName)}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
</div>
|
||||
<div className={cls("flex flex-col gap-6", rightColumnClassName)}>
|
||||
{steps && steps.length > 0 && (
|
||||
<div className={cls("flex flex-col", stepsContainerClassName)}>
|
||||
{steps.map((step, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cls(
|
||||
"flex gap-6",
|
||||
stepClassName
|
||||
)}
|
||||
>
|
||||
{/* Number box with line below */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={cls(
|
||||
"card h-12 w-fit aspect-square rounded-theme flex items-center justify-center shrink-0",
|
||||
stepNumberClassName
|
||||
)}
|
||||
>
|
||||
<p
|
||||
className={cls(
|
||||
"text-lg font-medium",
|
||||
shouldUseLightText ? "text-background" : "text-foreground"
|
||||
)}
|
||||
>
|
||||
{step.number}
|
||||
</p>
|
||||
</div>
|
||||
{/* Line segment */}
|
||||
{index < steps.length - 1 && (
|
||||
<div
|
||||
className={cls(
|
||||
"h-full w-px",
|
||||
useInvertedBackground === "invertDefault" ? "bg-background/20" : "bg-foreground/20"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className={cls("w-full min-w-0 flex flex-col gap-2", stepContentClassName)}>
|
||||
<div className="w-full min-w-0 flex items-center gap-3">
|
||||
<h3
|
||||
className={cls(
|
||||
"text-2xl font-medium truncate",
|
||||
useInvertedBackground === "invertDefault" ? "text-background" : "text-foreground",
|
||||
stepTitleClassName
|
||||
)}
|
||||
>
|
||||
{step.title}
|
||||
</h3>
|
||||
{step.tag && (
|
||||
<Tag
|
||||
text={step.tag}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={cls("text-xs text-nowrap", stepTagClassName)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p
|
||||
className={cls(
|
||||
"text-base leading-tight mb-12",
|
||||
useInvertedBackground === "invertDefault" ? "text-background/75" : "text-foreground/75",
|
||||
stepDescriptionClassName
|
||||
)}
|
||||
>
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureProcessSteps.displayName = "FeatureProcessSteps";
|
||||
|
||||
export default memo(FeatureProcessSteps);
|
||||
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
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,
|
||||
} 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;
|
||||
buttons?: ButtonConfig[];
|
||||
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,
|
||||
buttons,
|
||||
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
|
||||
);
|
||||
|
||||
return (
|
||||
<CardStack
|
||||
mode={carouselMode}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<FeatureBorderGlowItem
|
||||
key={`${feature.title}-${index}`}
|
||||
item={feature}
|
||||
index={index}
|
||||
className={cardClassName}
|
||||
iconContainerClassName={iconContainerClassName}
|
||||
iconClassName={iconClassName}
|
||||
titleClassName={cardTitleClassName}
|
||||
descriptionClassName={cardDescriptionClassName}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
/>
|
||||
))}
|
||||
</CardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureBorderGlow.displayName = "FeatureBorderGlow";
|
||||
|
||||
export default FeatureBorderGlow;
|
||||
@@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import { GlowingEffect } from "@/components/background/GlowingEffect";
|
||||
import { GLOWING_EFFECT_PROPS } from "./constants";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
export interface FeatureBorderGlowItemData {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface FeatureBorderGlowItemProps {
|
||||
item: FeatureBorderGlowItemData;
|
||||
index: number;
|
||||
className?: string;
|
||||
iconContainerClassName?: string;
|
||||
iconClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
shouldUseLightText?: boolean;
|
||||
}
|
||||
|
||||
const FeatureBorderGlowItem = memo(function FeatureBorderGlowItem({
|
||||
item,
|
||||
index,
|
||||
className = "",
|
||||
iconContainerClassName = "",
|
||||
iconClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
shouldUseLightText = false,
|
||||
}: FeatureBorderGlowItemProps) {
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<article
|
||||
key={`feature-${index}`}
|
||||
className={cls("card relative rounded-theme-capped min-h-0 h-full", className)}
|
||||
aria-label={item.title}
|
||||
>
|
||||
<div className="relative z-10 w-full h-full p-5 flex flex-col justify-between gap-5">
|
||||
<div
|
||||
className={cls(
|
||||
"h-15 w-[3.75rem] aspect-square primary-button rounded-theme flex items-center justify-center",
|
||||
iconContainerClassName
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className={cls(
|
||||
"w-[35%] aspect-square text-background",
|
||||
iconClassName
|
||||
)}
|
||||
strokeWidth={1}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3
|
||||
className={cls(
|
||||
"text-2xl font-medium leading-tight",
|
||||
shouldUseLightText && "text-background",
|
||||
titleClassName
|
||||
)}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
className={cls(
|
||||
"text-sm leading-tight",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
descriptionClassName
|
||||
)}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<GlowingEffect {...GLOWING_EFFECT_PROPS} />
|
||||
</article>
|
||||
);
|
||||
});
|
||||
|
||||
FeatureBorderGlowItem.displayName = "FeatureBorderGlowItem";
|
||||
|
||||
export default FeatureBorderGlowItem;
|
||||
@@ -0,0 +1,8 @@
|
||||
export const GLOWING_EFFECT_PROPS = {
|
||||
spread: 40,
|
||||
glow: true,
|
||||
disabled: false,
|
||||
proximity: 64,
|
||||
inactiveZone: 0.01,
|
||||
borderWidth: 1.5,
|
||||
} as const;
|
||||
@@ -0,0 +1,32 @@
|
||||
.feature-card-three-title {
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
.feature-card-three-description {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Mobile touch support - duplicate hover states for is-active class */
|
||||
.feature-card-three-item.is-active .feature-card-three-item-box > div {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.feature-card-three-item.is-active .feature-card-three-content-wrapper {
|
||||
transform: translateY(var(--hover-translate-y));
|
||||
}
|
||||
|
||||
.feature-card-three-item.is-active .feature-card-three-title {
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
.feature-card-three-item.is-active .feature-card-three-description-wrapper {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feature-card-three-item.is-active .feature-card-three-reveal-bg {
|
||||
--tw-translate-y: 0px !important;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
|
||||
left: calc(var(--vw-1_5) * 0.75);
|
||||
bottom: calc(var(--vw-1_5) * 0.75);
|
||||
right: calc(var(--vw-1_5) * 0.75);
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
"use client";
|
||||
|
||||
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 } 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;
|
||||
buttons?: ButtonConfig[];
|
||||
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,
|
||||
buttons,
|
||||
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<HTMLDivElement>(null);
|
||||
const [activeIndex, setActiveIndex] = useState<number | null>(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",
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={containerRef}>
|
||||
<CardStack
|
||||
mode={carouselMode}
|
||||
gridVariant={gridVariant}
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCardThreeItem
|
||||
key={`${feature.id}-${index}`}
|
||||
ref={setRef(index)}
|
||||
item={feature}
|
||||
isActive={activeIndex === index}
|
||||
onItemClick={() => handleItemClick(index)}
|
||||
className={cardClassName}
|
||||
itemContentClassName={itemContentClassName}
|
||||
itemTitleClassName={cardTitleClassName}
|
||||
itemDescriptionClassName={cardDescriptionClassName}
|
||||
/>
|
||||
))}
|
||||
</CardStack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureCardThree.displayName = "FeatureCardThree";
|
||||
|
||||
export default FeatureCardThree;
|
||||
@@ -0,0 +1,144 @@
|
||||
"use client";
|
||||
|
||||
import { forwardRef, memo } from "react";
|
||||
import Image from "next/image";
|
||||
import { Info } from "lucide-react";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface FeatureCardThreeItemData {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
}
|
||||
|
||||
interface FeatureCardThreeItemProps {
|
||||
item: FeatureCardThreeItemData;
|
||||
isActive?: boolean;
|
||||
onItemClick?: () => void;
|
||||
className?: string;
|
||||
itemContentClassName?: string;
|
||||
itemTitleClassName?: string;
|
||||
itemDescriptionClassName?: string;
|
||||
}
|
||||
|
||||
const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
|
||||
|
||||
const FeatureCardThreeItem = memo(
|
||||
forwardRef<HTMLDivElement, FeatureCardThreeItemProps>(
|
||||
(
|
||||
{
|
||||
item,
|
||||
isActive = false,
|
||||
onItemClick,
|
||||
className = "",
|
||||
itemContentClassName = "",
|
||||
itemTitleClassName = "",
|
||||
itemDescriptionClassName = "",
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cls(
|
||||
"feature-card-three-item relative overflow-hidden h-full rounded-theme-capped group",
|
||||
isActive && "is-active",
|
||||
className
|
||||
)}
|
||||
role="article"
|
||||
aria-label={`${item.title} - Feature ${item.id}`}
|
||||
tabIndex={0}
|
||||
onClick={onItemClick}
|
||||
>
|
||||
<div
|
||||
className="feature-card-three-item-box absolute top-6 left-6 z-10 flex items-center justify-center [perspective:1000px] [transform-style:preserve-3d]"
|
||||
>
|
||||
<div
|
||||
className="relative h-8 aspect-square rounded-theme bg-background transition-transform duration-400 ease-[cubic-bezier(0.4,0,0.2,1)] [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]"
|
||||
>
|
||||
<div
|
||||
className="feature-card-three-item-box-front absolute w-full h-full rounded-theme bg-background flex items-center justify-center [backface-visibility:hidden]"
|
||||
>
|
||||
<p
|
||||
className="feature-card-three-description text-foreground truncate"
|
||||
>
|
||||
{item.id}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="feature-card-three-item-box-back absolute w-full h-full rounded-theme bg-background flex items-center justify-center [backface-visibility:hidden] [transform:rotateY(180deg)]"
|
||||
>
|
||||
<Info
|
||||
className="w-1/2 h-1/2 text-foreground"
|
||||
strokeWidth={1.5}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Image
|
||||
src={item.imageSrc}
|
||||
alt={item.imageAlt || item.title}
|
||||
width={1920}
|
||||
height={1080}
|
||||
className="relative z-1 object-cover rounded-theme-capped h-full w-full "
|
||||
unoptimized={item.imageSrc.startsWith('http') || item.imageSrc.startsWith('//')}
|
||||
aria-hidden={item.imageAlt === ""}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute z-10 bottom-0 left-0 right-0 h-30 backdrop-blur-xl opacity-100"
|
||||
style={{ maskImage: MASK_GRADIENT }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div
|
||||
className="feature-card-three-content-wrapper absolute z-20 transition-all duration-400 ease-out flex flex-col gap-2 group-hover:[transform:translateY(var(--hover-translate-y))]"
|
||||
style={{
|
||||
top: "var(--content-top-position)",
|
||||
left: "calc((var(--vw-1_5) * 1.5))",
|
||||
width: "calc(100% - (var(--vw-1_5) * 3))",
|
||||
}}
|
||||
>
|
||||
<div className="feature-card-three-title-row">
|
||||
<h2
|
||||
className={cls(
|
||||
"feature-card-three-title font-semibold leading-[110%] transition-colors text-background group-hover:text-foreground",
|
||||
itemTitleClassName
|
||||
)}
|
||||
>
|
||||
{item.title}
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
className="feature-card-three-description-wrapper transition-all duration-400 ease-out opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<p
|
||||
className={cls("feature-card-three-description leading-[120%] w-full text-foreground", itemDescriptionClassName)}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cls(
|
||||
"feature-card-three-reveal-bg !absolute left-0 bottom-0 card backdrop-blur-xs z-10 rounded-theme-capped transition-all duration-400 ease-out translate-y-full right-0 group-hover:translate-y-0 group-hover:left-[calc(var(--vw-1_5)*0.75)] group-hover:bottom-[calc(var(--vw-1_5)*0.75)] group-hover:right-[calc(var(--vw-1_5)*0.75)]",
|
||||
itemContentClassName
|
||||
)}
|
||||
style={{
|
||||
height: "var(--reveal-bg-height)",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
FeatureCardThreeItem.displayName = "FeatureCardThreeItem";
|
||||
|
||||
export default FeatureCardThreeItem;
|
||||
@@ -0,0 +1,122 @@
|
||||
import { useEffect, useCallback, useMemo } from 'react'
|
||||
|
||||
let cachedVw15: number | null = null
|
||||
let lastWindowWidth = 0
|
||||
|
||||
const getVw15InPixels = (): number => {
|
||||
const currentWidth = window.innerWidth
|
||||
if (cachedVw15 !== null && lastWindowWidth === currentWidth) {
|
||||
return cachedVw15
|
||||
}
|
||||
|
||||
const temp = document.createElement('div')
|
||||
temp.style.position = 'absolute'
|
||||
temp.style.width = 'var(--vw-1_5)'
|
||||
document.body.appendChild(temp)
|
||||
const width = temp.getBoundingClientRect().width
|
||||
document.body.removeChild(temp)
|
||||
|
||||
cachedVw15 = width || 0
|
||||
lastWindowWidth = currentWidth
|
||||
return cachedVw15
|
||||
}
|
||||
|
||||
|
||||
const debounce = <T extends (...args: unknown[]) => void>(func: T, wait: number): ((...args: Parameters<T>) => void) & { cancel: () => void } => {
|
||||
let timeout: NodeJS.Timeout | null = null
|
||||
|
||||
const debouncedFunction = function executedFunction(...args: Parameters<T>) {
|
||||
const later = () => {
|
||||
timeout = null
|
||||
func(...args)
|
||||
}
|
||||
if (timeout !== null) {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
timeout = setTimeout(later, wait)
|
||||
}
|
||||
|
||||
debouncedFunction.cancel = () => {
|
||||
if (timeout !== null) {
|
||||
clearTimeout(timeout)
|
||||
timeout = null
|
||||
}
|
||||
}
|
||||
|
||||
return debouncedFunction
|
||||
}
|
||||
|
||||
interface DynamicDimensionsOptions {
|
||||
titleSelector?: string
|
||||
descriptionSelector?: string
|
||||
containerSelector?: string | null
|
||||
}
|
||||
|
||||
type RefArray = React.RefObject<(HTMLDivElement | null)[]> | React.RefObject<(HTMLDivElement | null)[]>[]
|
||||
|
||||
export const useDynamicDimensions = (refs: RefArray, options: DynamicDimensionsOptions = {}) => {
|
||||
const {
|
||||
titleSelector = '.feature-card-three-title',
|
||||
descriptionSelector = '.feature-card-three-description',
|
||||
containerSelector = null
|
||||
} = options
|
||||
|
||||
const calculateDimensions = useCallback(() => {
|
||||
const processRef = (ref: HTMLElement | null) => {
|
||||
if (!ref) return
|
||||
|
||||
const container = containerSelector ? ref.querySelector(containerSelector) as HTMLElement : ref
|
||||
if (!container) return
|
||||
|
||||
const titleElement = container.querySelector(titleSelector) as HTMLElement
|
||||
const descriptionElement = container.querySelector(descriptionSelector) as HTMLElement
|
||||
|
||||
if (titleElement && descriptionElement) {
|
||||
const titleHeight = titleElement.offsetHeight
|
||||
const descriptionHeight = descriptionElement.offsetHeight
|
||||
|
||||
const contentTop = `calc(100% - ${titleHeight}px - calc(var(--vw-1_5) * 1.5))`
|
||||
|
||||
const vw15 = getVw15InPixels()
|
||||
|
||||
const contentWrapperHeight = titleHeight + descriptionHeight
|
||||
|
||||
const revealBgHeight = contentWrapperHeight + (vw15 * 2)
|
||||
|
||||
const moveUp = descriptionHeight + (vw15 * 0.55)
|
||||
|
||||
ref.style.setProperty('--reveal-bg-height', `${revealBgHeight}px`)
|
||||
ref.style.setProperty('--content-top-position', contentTop)
|
||||
ref.style.setProperty('--hover-translate-y', `-${moveUp}px`)
|
||||
}
|
||||
}
|
||||
|
||||
if (Array.isArray(refs)) {
|
||||
refs.forEach((refArray) => {
|
||||
if (refArray?.current && Array.isArray(refArray.current)) {
|
||||
refArray.current.forEach(processRef)
|
||||
}
|
||||
})
|
||||
} else if ('current' in refs && refs.current) {
|
||||
if (Array.isArray(refs.current)) {
|
||||
refs.current.forEach(processRef)
|
||||
} else {
|
||||
processRef(refs.current)
|
||||
}
|
||||
}
|
||||
}, [titleSelector, descriptionSelector, containerSelector, refs])
|
||||
|
||||
const debouncedCalculate = useMemo(
|
||||
() => debounce(calculateDimensions, 250),
|
||||
[calculateDimensions]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
calculateDimensions()
|
||||
window.addEventListener('resize', debouncedCalculate)
|
||||
return () => {
|
||||
window.removeEventListener('resize', debouncedCalculate)
|
||||
debouncedCalculate.cancel()
|
||||
}
|
||||
}, [calculateDimensions, debouncedCalculate])
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
"use client";
|
||||
|
||||
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,
|
||||
} 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;
|
||||
buttons?: ButtonConfig[];
|
||||
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,
|
||||
buttons,
|
||||
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
|
||||
);
|
||||
|
||||
return (
|
||||
<CardStack
|
||||
mode={carouselMode}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<FeatureHoverPatternItem
|
||||
key={`${feature.title}-${index}`}
|
||||
item={feature}
|
||||
index={index}
|
||||
className={cardClassName}
|
||||
iconContainerClassName={iconContainerClassName}
|
||||
iconClassName={iconClassName}
|
||||
titleClassName={cardTitleClassName}
|
||||
descriptionClassName={cardDescriptionClassName}
|
||||
gradientClassName={gradientClassName}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
buttonClassName={cardButtonClassName}
|
||||
buttonTextClassName={cardButtonTextClassName}
|
||||
/>
|
||||
))}
|
||||
</CardStack>
|
||||
);
|
||||
};
|
||||
|
||||
FeatureHoverPattern.displayName = "FeatureHoverPattern";
|
||||
|
||||
export default FeatureHoverPattern;
|
||||
@@ -0,0 +1,153 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useRef } from "react";
|
||||
import { useMotionValue } from "framer-motion";
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import { CardPattern } from "@/components/background/CardPattern";
|
||||
import Button from "@/components/button/Button";
|
||||
import { usePatternInteraction } from "./usePatternInteraction";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { getButtonProps } from "@/lib/buttonUtils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
import type { ButtonConfig } from "@/components/cardStack/types";
|
||||
|
||||
export interface FeatureHoverPatternItemData {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
button?: ButtonConfig;
|
||||
}
|
||||
|
||||
interface FeatureHoverPatternItemProps {
|
||||
item: FeatureHoverPatternItemData;
|
||||
index: number;
|
||||
className?: string;
|
||||
iconContainerClassName?: string;
|
||||
iconClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
gradientClassName?: string;
|
||||
shouldUseLightText?: boolean;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
}
|
||||
|
||||
const FeatureHoverPatternItem = memo(function FeatureHoverPatternItem({
|
||||
item,
|
||||
index,
|
||||
className = "",
|
||||
iconContainerClassName = "",
|
||||
iconClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
gradientClassName = "",
|
||||
shouldUseLightText = false,
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
}: FeatureHoverPatternItemProps) {
|
||||
const theme = useTheme();
|
||||
const Icon = item.icon;
|
||||
const mouseX = useMotionValue(0);
|
||||
const mouseY = useMotionValue(0);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const getButtonConfigProps = () => {
|
||||
if (theme.defaultButtonVariant === "hover-bubble") {
|
||||
return { bgClassName: "w-full" };
|
||||
}
|
||||
if (theme.defaultButtonVariant === "icon-arrow") {
|
||||
return { className: "justify-between" };
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
const { state, onMouseMove } = usePatternInteraction(
|
||||
mouseX,
|
||||
mouseY,
|
||||
containerRef
|
||||
);
|
||||
|
||||
return (
|
||||
<article
|
||||
key={`feature-${index}`}
|
||||
className={cls(
|
||||
"card rounded-theme-capped min-h-0 h-full",
|
||||
className
|
||||
)}
|
||||
aria-label={item.title}
|
||||
>
|
||||
<div className="relative z-10 w-full h-full p-5 flex flex-col gap-5 justify-between">
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cls(
|
||||
"group/primary-button relative w-full h-full flex items-center justify-center",
|
||||
state.isMobile && state.isInView ? "group/primary-button-active" : ""
|
||||
)}
|
||||
onMouseMove={onMouseMove}
|
||||
>
|
||||
<div
|
||||
className={cls(
|
||||
"relative z-20 h-15 w-auto aspect-square primary-button rounded-theme transition-all duration-300 flex items-center justify-center shadow",
|
||||
iconContainerClassName
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className={cls(
|
||||
"w-[35%] aspect-square text-background",
|
||||
iconClassName
|
||||
)}
|
||||
strokeWidth={1}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div className="opacity-25">
|
||||
<CardPattern
|
||||
mouseX={mouseX}
|
||||
mouseY={mouseY}
|
||||
randomString={state.randomString}
|
||||
isActive={state.isMobile && state.isInView}
|
||||
gradientClassName={
|
||||
gradientClassName || "bg-gradient-to-r from-accent to-background-accent"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3
|
||||
className={cls(
|
||||
"text-2xl font-medium leading-tight",
|
||||
shouldUseLightText && "text-background",
|
||||
titleClassName
|
||||
)}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p
|
||||
className={cls(
|
||||
"text-sm leading-tight",
|
||||
shouldUseLightText ? "text-background" : "text-foreground",
|
||||
descriptionClassName
|
||||
)}
|
||||
>
|
||||
{item.description}
|
||||
</p>
|
||||
{item.button && (
|
||||
<Button
|
||||
{...getButtonProps(
|
||||
{ ...item.button, props: { ...item.button.props, ...getButtonConfigProps() } },
|
||||
0,
|
||||
theme.defaultButtonVariant,
|
||||
cls("w-full mt-1", buttonClassName),
|
||||
buttonTextClassName
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
});
|
||||
|
||||
FeatureHoverPatternItem.displayName = "FeatureHoverPatternItem";
|
||||
|
||||
export default FeatureHoverPatternItem;
|
||||
@@ -0,0 +1,17 @@
|
||||
export const MOBILE_BREAKPOINT = 768;
|
||||
export const RANDOM_STRING_LENGTH = 1500;
|
||||
export const VIEW_CHECK_INTERVAL = 100;
|
||||
export const PATTERN_VISIBILITY_THRESHOLD = 0.2;
|
||||
export const ICON_VISIBILITY_THRESHOLD = 0.4;
|
||||
export const THROTTLE_DELAY = 16;
|
||||
export const CHARACTERS =
|
||||
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
export const CHARACTERS_LENGTH = CHARACTERS.length;
|
||||
|
||||
export const generateRandomString = (length: number): string => {
|
||||
let result = "";
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += CHARACTERS[Math.floor(Math.random() * CHARACTERS_LENGTH)];
|
||||
}
|
||||
return result;
|
||||
};
|
||||
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
useCallback,
|
||||
MouseEvent,
|
||||
RefObject,
|
||||
} from "react";
|
||||
import { MotionValue } from "framer-motion";
|
||||
import {
|
||||
MOBILE_BREAKPOINT,
|
||||
VIEW_CHECK_INTERVAL,
|
||||
PATTERN_VISIBILITY_THRESHOLD,
|
||||
ICON_VISIBILITY_THRESHOLD,
|
||||
THROTTLE_DELAY,
|
||||
RANDOM_STRING_LENGTH,
|
||||
generateRandomString,
|
||||
} from "./constants";
|
||||
|
||||
interface InteractionState {
|
||||
randomString: string;
|
||||
isMobile: boolean;
|
||||
isInView: boolean;
|
||||
isIconActive: boolean;
|
||||
}
|
||||
|
||||
export function usePatternInteraction(
|
||||
mouseX: MotionValue<number>,
|
||||
mouseY: MotionValue<number>,
|
||||
containerRef: RefObject<HTMLDivElement | null>
|
||||
) {
|
||||
const lastRandomUpdateRef = useRef<number>(0);
|
||||
|
||||
const [state, setState] = useState<InteractionState>({
|
||||
randomString: "",
|
||||
isMobile: false,
|
||||
isInView: false,
|
||||
isIconActive: false,
|
||||
});
|
||||
|
||||
const checkMobile = useCallback(() => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isMobile: window.innerWidth < MOBILE_BREAKPOINT,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
randomString: generateRandomString(RANDOM_STRING_LENGTH),
|
||||
isMobile: window.innerWidth < MOBILE_BREAKPOINT,
|
||||
}));
|
||||
|
||||
window.addEventListener("resize", checkMobile);
|
||||
return () => window.removeEventListener("resize", checkMobile);
|
||||
}, [checkMobile]);
|
||||
|
||||
const updateRandomString = useCallback(() => {
|
||||
const now = Date.now();
|
||||
if (now - lastRandomUpdateRef.current > THROTTLE_DELAY) {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
randomString: generateRandomString(RANDOM_STRING_LENGTH),
|
||||
}));
|
||||
lastRandomUpdateRef.current = now;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const updateMobilePosition = useCallback(() => {
|
||||
if (!containerRef.current) return;
|
||||
const { left, top } = containerRef.current.getBoundingClientRect();
|
||||
const viewportCenterX = window.innerWidth / 2;
|
||||
const viewportCenterY = window.innerHeight / 2;
|
||||
|
||||
mouseX.set(viewportCenterX - left);
|
||||
mouseY.set(viewportCenterY - top);
|
||||
updateRandomString();
|
||||
}, [mouseX, mouseY, updateRandomString, containerRef]);
|
||||
|
||||
const checkInView = useCallback(() => {
|
||||
if (!containerRef.current) return;
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const viewportHeight = window.innerHeight;
|
||||
const threshold = viewportHeight * PATTERN_VISIBILITY_THRESHOLD;
|
||||
const iconThreshold = viewportHeight * ICON_VISIBILITY_THRESHOLD;
|
||||
|
||||
const inView =
|
||||
rect.top < viewportHeight - threshold && rect.bottom > threshold;
|
||||
const iconActive =
|
||||
rect.top < viewportHeight - iconThreshold &&
|
||||
rect.bottom > iconThreshold;
|
||||
|
||||
setState((prev) => ({ ...prev, isInView: inView, isIconActive: iconActive }));
|
||||
|
||||
if (inView) {
|
||||
updateMobilePosition();
|
||||
}
|
||||
}, [updateMobilePosition, containerRef]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!state.isMobile) {
|
||||
setState((prev) => ({ ...prev, isInView: false, isIconActive: false }));
|
||||
return;
|
||||
}
|
||||
|
||||
checkInView();
|
||||
const interval = setInterval(checkInView, VIEW_CHECK_INTERVAL);
|
||||
window.addEventListener("scroll", checkInView, { passive: true });
|
||||
window.addEventListener("resize", checkInView);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
window.removeEventListener("scroll", checkInView);
|
||||
window.removeEventListener("resize", checkInView);
|
||||
};
|
||||
}, [state.isMobile, checkInView]);
|
||||
|
||||
const onMouseMove = useCallback(
|
||||
(event: MouseEvent<HTMLDivElement>) => {
|
||||
if (state.isMobile) return;
|
||||
|
||||
const { left, top } = event.currentTarget.getBoundingClientRect();
|
||||
mouseX.set(event.clientX - left);
|
||||
mouseY.set(event.clientY - top);
|
||||
updateRandomString();
|
||||
},
|
||||
[state.isMobile, mouseX, mouseY, updateRandomString]
|
||||
);
|
||||
|
||||
return {
|
||||
state,
|
||||
onMouseMove,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user