bender/01b57db5-aeba-48f3-9de4-e4e1380f1e13
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-06-15 10:47:22 +00:00
commit 2c00005eca
315 changed files with 37931 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/sections/pricing/PricingCenteredCards.tsx Normal file
View File

@@ -0,0 +1,100 @@
import { Check } from "lucide-react";
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import GridOrCarousel from "@/components/ui/GridOrCarousel";
import ScrollReveal from "@/components/ui/ScrollReveal";
type PricingPlan = {
tag: string;
price: string;
description: string;
features: string[];
primaryButton: { text: string; href: string };
secondaryButton?: { text: string; href: string };
};
const PricingCenteredCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
plans,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
plans: PricingPlan[];
}) => (
<section aria-label="Pricing section" className="py-20">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{tag}</p>
</div>
<TextAnimation
text={title}
variant="fade"
gradientText={true}
tag="h2"
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={description}
variant="fade"
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
/>
{(primaryButton || secondaryButton) && (
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
{primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
{secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
</div>
)}
</div>
<ScrollReveal variant="fade-blur">
<GridOrCarousel>
{plans.map((plan) => (
<div key={plan.tag} className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded text-center">
<div className="px-3 py-1 text-sm card rounded w-fit">
<p>{plan.tag}</p>
</div>
<div className="flex flex-col gap-1">
<span className="text-5xl md:text-6xl font-semibold">{plan.price}</span>
<span className="text-base font-medium">{plan.description}</span>
</div>
<div className="flex flex-col gap-3 w-full">
<Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-full" />
{plan.secondaryButton && <Button text={plan.secondaryButton.text} href={plan.secondaryButton.href} variant="secondary" className="w-full" />}
</div>
<div className="w-full h-px bg-foreground/20" />
<div className="flex flex-col gap-3 w-full">
{plan.features.map((feature) => (
<div key={feature} className="flex items-start gap-3">
<div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
<Check className="size-3 text-primary-cta-text" strokeWidth={2} />
</div>
<span className="text-base text-left">{feature}</span>
</div>
))}
</div>
</div>
))}
</GridOrCarousel>
</ScrollReveal>
</div>
</section>
);
export default PricingCenteredCards;

104
src/components/sections/pricing/PricingHighlightedCards.tsx Normal file
View File

@@ -0,0 +1,104 @@
import { Check } from "lucide-react";
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import GridOrCarousel from "@/components/ui/GridOrCarousel";
import ScrollReveal from "@/components/ui/ScrollReveal";
import { cls } from "@/lib/utils";
type PricingPlan = {
tag: string;
price: string;
description: string;
features: string[];
highlight?: string;
primaryButton: { text: string; href: string };
secondaryButton?: { text: string; href: string };
};
const PricingHighlightedCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
plans,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
plans: PricingPlan[];
}) => (
<section aria-label="Pricing section" className="py-20">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{tag}</p>
</div>
<TextAnimation
text={title}
variant="fade-blur"
gradientText={true}
tag="h2"
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={description}
variant="fade-blur"
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
/>
{(primaryButton || secondaryButton) && (
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
{primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
{secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
</div>
)}
</div>
<ScrollReveal variant="slide-up">
<GridOrCarousel>
{plans.map((plan) => (
<div key={plan.tag} className="flex flex-col h-full">
<div className={cls("px-5 py-2 text-base", plan.highlight ? "text-center primary-button rounded-t text-primary-cta-text" : "invisible")}>
{plan.highlight || "placeholder"}
</div>
<div className={cls("flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 flex-1 card text-center", plan.highlight ? "rounded-t-none rounded-b" : "rounded")}>
<div className="flex flex-col gap-1">
<span className="text-5xl md:text-6xl font-semibold">{plan.price}</span>
<span className="text-base font-medium">{plan.tag}</span>
</div>
<div className="h-px w-full bg-foreground/20" />
<div className="flex flex-col gap-3 w-full">
{plan.features.map((feature) => (
<div key={feature} className="flex items-start gap-3">
<div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
<Check className="size-3 text-primary-cta-text" strokeWidth={2} />
</div>
<span className="text-base text-left">{feature}</span>
</div>
))}
</div>
<div className="flex flex-col gap-3 w-full mt-auto">
<Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-full" />
{plan.secondaryButton && <Button text={plan.secondaryButton.text} href={plan.secondaryButton.href} variant="secondary" className="w-full" />}
</div>
</div>
</div>
))}
</GridOrCarousel>
</ScrollReveal>
</div>
</section>
);
export default PricingHighlightedCards;

100
src/components/sections/pricing/PricingLayeredCards.tsx Normal file
View File

@@ -0,0 +1,100 @@
import { Check } from "lucide-react";
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import GridOrCarousel from "@/components/ui/GridOrCarousel";
import ScrollReveal from "@/components/ui/ScrollReveal";
type PricingPlan = {
tag: string;
price: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton?: { text: string; href: string };
features: string[];
};
const PricingLayeredCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
plans,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
plans: PricingPlan[];
}) => (
<section aria-label="Pricing section" className="py-20">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center gap-2 w-content-width mx-auto">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{tag}</p>
</div>
<TextAnimation
text={title}
variant="fade"
gradientText={true}
tag="h2"
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={description}
variant="fade"
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
/>
{(primaryButton || secondaryButton) && (
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
{primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
{secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
</div>
)}
</div>
<ScrollReveal variant="slide-up">
<GridOrCarousel>
{plans.map((plan) => (
<div key={plan.tag} className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 h-full card rounded">
<div className="flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 secondary-button rounded">
<div className="px-3 py-1 w-fit text-sm card rounded">
<p>{plan.tag}</p>
</div>
<div className="flex flex-col gap-1">
<span className="text-5xl md:text-6xl font-semibold">{plan.price}</span>
<span className="text-base font-medium">{plan.description}</span>
</div>
<div className="flex flex-col gap-3">
<Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-full" />
{plan.secondaryButton && <Button text={plan.secondaryButton.text} href={plan.secondaryButton.href} variant="secondary" className="w-full" />}
</div>
</div>
<div className="flex flex-col gap-3 p-3 xl:p-3.5 2xl:p-4">
{plan.features.map((feature) => (
<div key={feature} className="flex items-start gap-3">
<div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
<Check className="size-3 text-primary-cta-text" strokeWidth={2} />
</div>
<span className="text-base leading-snug">{feature}</span>
</div>
))}
</div>
</div>
))}
</GridOrCarousel>
</ScrollReveal>
</div>
</section>
);
export default PricingLayeredCards;

98
src/components/sections/pricing/PricingMediaCards.tsx Normal file
View File

@@ -0,0 +1,98 @@
import { Check } from "lucide-react";
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import ScrollReveal from "@/components/ui/ScrollReveal";
type PricingPlan = {
tag: string;
price: string;
period: string;
features: string[];
primaryButton: { text: string; href: string };
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const PricingMediaCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
plans,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
plans: PricingPlan[];
}) => (
<section aria-label="Pricing section" className="py-20">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center gap-2 w-content-width mx-auto">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{tag}</p>
</div>
<TextAnimation
text={title}
variant="slide-up"
gradientText={true}
tag="h2"
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={description}
variant="slide-up"
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
/>
{(primaryButton || secondaryButton) && (
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
{primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
{secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
</div>
)}
</div>
<div className="flex flex-col gap-5 w-content-width mx-auto">
{plans.map((plan) => (
<ScrollReveal
variant="fade-blur"
key={plan.tag}
className="flex flex-col md:flex-row gap-6 md:gap-10 p-6 md:p-10 card rounded"
>
<div className="w-full md:w-1/2 aspect-square md:aspect-4/3 rounded overflow-hidden">
<ImageOrVideo imageSrc={plan.imageSrc} videoSrc={plan.videoSrc} />
</div>
<div className="flex flex-col justify-center gap-2 w-full md:w-1/2">
<div className="px-3 py-1 mb-1 w-fit text-sm card rounded">
<p>{plan.price}{plan.period}</p>
</div>
<h3 className="text-4xl md:text-5xl font-semibold leading-[1.15] text-balance">{plan.tag}</h3>
<div className="flex flex-col gap-3 mt-1">
{plan.features.map((feature) => (
<div key={feature} className="flex items-start gap-3">
<div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
<Check className="size-3 text-primary-cta-text" strokeWidth={2} />
</div>
<span className="text-base leading-snug">{feature}</span>
</div>
))}
</div>
<Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-fit mt-2 md:mt-3" />
</div>
</ScrollReveal>
))}
</div>
</div>
</section>
);
export default PricingMediaCards;

93
src/components/sections/pricing/PricingSimpleCards.tsx Normal file
View File

@@ -0,0 +1,93 @@
import { Check } from "lucide-react";
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import GridOrCarousel from "@/components/ui/GridOrCarousel";
import ScrollReveal from "@/components/ui/ScrollReveal";
type PricingPlan = {
tag: string;
price: string;
description: string;
features: string[];
};
const PricingSimpleCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
plans,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
plans: PricingPlan[];
}) => (
<section aria-label="Pricing section" className="py-20">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{tag}</p>
</div>
<TextAnimation
text={title}
variant="fade-blur"
gradientText={true}
tag="h2"
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={description}
variant="fade-blur"
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
/>
{(primaryButton || secondaryButton) && (
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
{primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
{secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
</div>
)}
</div>
<ScrollReveal variant="fade">
<GridOrCarousel>
{plans.map((plan) => (
<div key={plan.tag} className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded">
<div className="px-3 py-1 text-sm card rounded w-fit">
<p>{plan.tag}</p>
</div>
<div className="flex flex-col gap-1">
<span className="text-5xl md:text-6xl font-semibold">{plan.price}</span>
<span className="text-base font-medium">{plan.description}</span>
</div>
<div className="w-full h-px bg-foreground/20" />
<div className="flex flex-col gap-3">
{plan.features.map((feature) => (
<div key={feature} className="flex items-start gap-3">
<div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
<Check className="size-3 text-primary-cta-text" strokeWidth={2} />
</div>
<span className="text-base">{feature}</span>
</div>
))}
</div>
</div>
))}
</GridOrCarousel>
</ScrollReveal>
</div>
</section>
);
export default PricingSimpleCards;

109
src/components/sections/pricing/PricingSplitCards.tsx Normal file
View File

@@ -0,0 +1,109 @@
import { Check } from "lucide-react";
import Button from "@/components/ui/Button";
import TextAnimation from "@/components/ui/TextAnimation";
import ScrollReveal from "@/components/ui/ScrollReveal";
type PricingPlan = {
tag: string;
price: string;
period: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton?: { text: string; href: string };
featuresTitle: string;
features: string[];
};
const PricingSplitCards = ({
tag,
title,
description,
primaryButton,
secondaryButton,
plans,
}: {
tag: string;
title: string;
description: string;
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
plans: PricingPlan[];
}) => (
<section aria-label="Pricing section" className="py-20">
<div className="flex flex-col gap-8 md:gap-10">
<div className="flex flex-col items-center gap-2 w-content-width mx-auto">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{tag}</p>
</div>
<TextAnimation
text={title}
variant="fade-blur"
gradientText={true}
tag="h2"
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
/>
<TextAnimation
text={description}
variant="fade-blur"
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
/>
{(primaryButton || secondaryButton) && (
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
{primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
{secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
</div>
)}
</div>
<div className="flex flex-col gap-5 w-content-width mx-auto">
{plans.map((plan) => (
<ScrollReveal
variant="fade-blur"
key={plan.tag}
className="flex flex-col md:flex-row gap-5 md:gap-12 p-5 md:p-12 card rounded"
>
<div className="flex flex-col gap-2 justify-between w-full md:w-1/2">
<div className="flex flex-col gap-2">
<div className="px-3 py-1 mb-2 w-fit text-sm card rounded">
<p>{plan.tag}</p>
</div>
<div className="flex items-baseline gap-1">
<span className="text-5xl md:text-6xl font-semibold">{plan.price}</span>
<span className="text-2xl font-medium">{plan.period}</span>
</div>
<p className="text-xl md:text-2xl leading-snug text-balance">{plan.description}</p>
</div>
<div className="flex flex-col gap-3">
<Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-full" />
{plan.secondaryButton && <Button text={plan.secondaryButton.text} href={plan.secondaryButton.href} variant="secondary" className="w-full" />}
</div>
</div>
<div className="w-full h-px bg-foreground/20 md:hidden" />
<div className="flex flex-col gap-3 w-full md:w-1/2">
<h3 className="text-xl font-medium truncate">{plan.featuresTitle}</h3>
<div className="w-full h-px bg-foreground/5" />
{plan.features.map((feature) => (
<div key={feature} className="flex items-start gap-3">
<div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
<Check className="size-3 text-primary-cta-text" strokeWidth={2} />
</div>
<span className="text-base leading-snug">{feature}</span>
</div>
))}
</div>
</ScrollReveal>
))}
</div>
</div>
</section>
);
export default PricingSplitCards;