Initial commit
This commit is contained in:
122
src/components/sections/socialProof/SocialProofOne.tsx
Normal file
122
src/components/sections/socialProof/SocialProofOne.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Marquee from "react-fast-marquee";
|
||||
import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
interface SocialProofOneProps {
|
||||
logos: string[];
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground: InvertedBackground;
|
||||
speed?: number;
|
||||
showCard?: boolean;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxTitleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
textBoxDescriptionClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
textBoxTagClassName?: string;
|
||||
textBoxButtonContainerClassName?: string;
|
||||
textBoxButtonClassName?: string;
|
||||
textBoxButtonTextClassName?: string;
|
||||
contentClassName?: string;
|
||||
logoItemClassName?: string;
|
||||
logoCardClassName?: string;
|
||||
logoImageClassName?: string;
|
||||
}
|
||||
|
||||
const SocialProofOne = ({
|
||||
logos,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
speed = 40,
|
||||
showCard = true,
|
||||
ariaLabel = "Social proof section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
contentClassName = "",
|
||||
logoItemClassName = "",
|
||||
logoCardClassName = "",
|
||||
logoImageClassName = "",
|
||||
}: SocialProofOneProps) => {
|
||||
const repeatedLogos = [...logos, ...logos, ...logos];
|
||||
|
||||
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)}>
|
||||
{(title || description) && (
|
||||
<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("mask-padding-x", contentClassName)}>
|
||||
<Marquee gradient={false} speed={speed}>
|
||||
{repeatedLogos.map((src, i) => (
|
||||
<div className={cls(showCard ? "mx-4" : "mx-8", logoItemClassName)} key={i}>
|
||||
<div className={cls(showCard ? "card px-4 py-3 mb-1 rounded-theme" : "", logoCardClassName)}>
|
||||
<Image
|
||||
width={500}
|
||||
height={500}
|
||||
src={src}
|
||||
alt={`Partner ${i + 1}`}
|
||||
className={cls("relative z-1", showCard ? "h-7 w-auto" : "h-8 w-auto", logoImageClassName)}
|
||||
unoptimized={src.startsWith('http') || src.startsWith('//')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Marquee>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
SocialProofOne.displayName = "SocialProofOne";
|
||||
|
||||
export default SocialProofOne;
|
||||
148
src/components/sections/socialProof/SocialProofThree.tsx
Normal file
148
src/components/sections/socialProof/SocialProofThree.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import Image from "next/image";
|
||||
import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { CardAnimationType, ButtonConfig, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
interface SocialProofThreeProps {
|
||||
logos: string[];
|
||||
animationType: CardAnimationType;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground: InvertedBackground;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
speed?: number;
|
||||
topMarqueeDirection?: "left" | "right";
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
carouselClassName?: string;
|
||||
bottomCarouselClassName?: string;
|
||||
logoCardClassName?: string;
|
||||
logoImageClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
textBoxTitleClassName?: string;
|
||||
textBoxDescriptionClassName?: string;
|
||||
textBoxTagClassName?: string;
|
||||
textBoxButtonContainerClassName?: string;
|
||||
textBoxButtonClassName?: string;
|
||||
textBoxButtonTextClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
}
|
||||
|
||||
interface LogoCardProps {
|
||||
src: string;
|
||||
index: number;
|
||||
logoCardClassName?: string;
|
||||
logoImageClassName?: string;
|
||||
}
|
||||
|
||||
const LogoCard = memo(({
|
||||
src,
|
||||
index,
|
||||
logoCardClassName = "",
|
||||
logoImageClassName = "",
|
||||
}: LogoCardProps) => {
|
||||
return (
|
||||
<div className={cls("h-full card rounded-theme flex items-center justify-center", logoCardClassName)}>
|
||||
<Image
|
||||
width={500}
|
||||
height={500}
|
||||
src={src}
|
||||
alt={`Partner ${index + 1}`}
|
||||
className={cls("relative z-1 h-1/2 w-1/2", logoImageClassName)}
|
||||
unoptimized={src.startsWith('http') || src.startsWith('//')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
LogoCard.displayName = "LogoCard";
|
||||
|
||||
const SocialProofThree = ({
|
||||
logos,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
speed = 40,
|
||||
topMarqueeDirection = "left",
|
||||
ariaLabel = "Social proof section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
carouselClassName = "",
|
||||
bottomCarouselClassName = "",
|
||||
logoCardClassName = "",
|
||||
logoImageClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
}: SocialProofThreeProps) => {
|
||||
return (
|
||||
<AutoCarousel
|
||||
speed={speed}
|
||||
uniformGridCustomHeightClasses="min-h-none"
|
||||
animationType={animationType}
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
showTextBox={true}
|
||||
dualMarquee={true}
|
||||
topMarqueeDirection={topMarqueeDirection}
|
||||
carouselClassName={carouselClassName}
|
||||
bottomCarouselClassName={bottomCarouselClassName}
|
||||
containerClassName={containerClassName}
|
||||
className={className}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
itemClassName="w-30! md:w-carousel-item-3! xl:w-carousel-item-4! aspect-square"
|
||||
>
|
||||
{logos.map((src, index) => (
|
||||
<LogoCard
|
||||
key={`${src}-${index}`}
|
||||
src={src}
|
||||
index={index}
|
||||
logoCardClassName={logoCardClassName}
|
||||
logoImageClassName={logoImageClassName}
|
||||
/>
|
||||
))}
|
||||
</AutoCarousel>
|
||||
);
|
||||
};
|
||||
|
||||
SocialProofThree.displayName = "SocialProofThree";
|
||||
|
||||
export default SocialProofThree;
|
||||
134
src/components/sections/socialProof/SocialProofTwo.tsx
Normal file
134
src/components/sections/socialProof/SocialProofTwo.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
|
||||
import Image from "next/image";
|
||||
import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
interface SocialProofTwoProps {
|
||||
logos: string[];
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground: InvertedBackground;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxTitleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
textBoxDescriptionClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
textBoxTagClassName?: string;
|
||||
textBoxButtonContainerClassName?: string;
|
||||
textBoxButtonClassName?: string;
|
||||
textBoxButtonTextClassName?: string;
|
||||
contentClassName?: string;
|
||||
logoRowClassName?: string;
|
||||
logoItemClassName?: string;
|
||||
logoCardClassName?: string;
|
||||
logoImageClassName?: string;
|
||||
}
|
||||
|
||||
const SocialProofTwo = ({
|
||||
logos,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "Social proof section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
contentClassName = "",
|
||||
logoRowClassName = "",
|
||||
logoItemClassName = "",
|
||||
logoCardClassName = "",
|
||||
logoImageClassName = "",
|
||||
}: SocialProofTwoProps) => {
|
||||
// Calculate flex basis based on number of logos
|
||||
const getFlexBasis = () => {
|
||||
const count = logos.length;
|
||||
if (count === 2) return "md:basis-1/2";
|
||||
if (count === 3) return "md:basis-1/3";
|
||||
if (count === 4) return "md:basis-1/4";
|
||||
if (count === 5) return "md:basis-1/5";
|
||||
return "md:flex-1";
|
||||
};
|
||||
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)}>
|
||||
{(title || description) && (
|
||||
<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("", contentClassName)}>
|
||||
<div className={cls("flex flex-col md:flex-row items-stretch gap-4", logoRowClassName)}>
|
||||
{logos.map((src, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={cls(
|
||||
"flex items-center justify-center w-full",
|
||||
getFlexBasis(),
|
||||
logoItemClassName
|
||||
)}
|
||||
>
|
||||
<div className={cls("card p-6 rounded-theme w-full h-full flex items-center justify-center", logoCardClassName)}>
|
||||
<Image
|
||||
width={500}
|
||||
height={500}
|
||||
src={src}
|
||||
alt={`Partner ${i + 1}`}
|
||||
className={cls("relative z-1 w-1/2 md:w-auto md:h-8 2xl:h-10 h-auto object-contain", logoImageClassName)}
|
||||
unoptimized={src.startsWith('http') || src.startsWith('//')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
SocialProofTwo.displayName = "SocialProofTwo";
|
||||
|
||||
export default SocialProofTwo;
|
||||
Reference in New Issue
Block a user