[V0_FILE]typescriptreact:file="components/dark-pricing.tsx" "use client" import type React from "react" import type { ReactNode, CSSProperties } from "react" import { Check, X } from "lucide-react" import { cn } from "@/lib/utils" import { motion } from "framer-motion" export const DarkPricing = () => { return (

Pricing

Use it for free for yourself, upgrade when your team needs advanced control.

Get started free} benefits={[ { text: "One workspace", checked: true }, { text: "Email support", checked: true }, { text: "1 day data retention", checked: false }, { text: "Custom roles", checked: false }, { text: "Priority support", checked: false }, { text: "SSO", checked: false }, ]} /> 14-day free trial } benefits={[ { text: "Five workspaces", checked: true }, { text: "Email support", checked: true }, { text: "7 day data retention", checked: true }, { text: "Custom roles", checked: true }, { text: "Priority support", checked: false }, { text: "SSO", checked: false }, ]} /> Contact us} benefits={[ { text: "Unlimited workspaces", checked: true }, { text: "Email support", checked: true }, { text: "30 day data retention", checked: true }, { text: "Custom roles", checked: true }, { text: "Priority support", checked: true }, { text: "SSO", checked: true }, ]} />

) } const PriceCard = ({ tier, price, bestFor, CTA, benefits }: PriceCardProps) => { return (

{tier} {price} {bestFor}

{benefits.map((b, i) => ( ))}

{CTA} ) } const Benefit = ({ text, checked }: BenefitType) => { return (

{checked ? ( ) : ( )} {text}

) } const Card = ({ className, children, style = {} }: CardProps) => { return ( {children} ) } const GhostButton = ({ children, className, ...rest }: GhostButtonProps) => { return ( ) } type PriceCardProps = { tier: string price: string bestFor: string CTA: ReactNode benefits: BenefitType[] } type CardProps = { className?: string children?: ReactNode style?: CSSProperties } type BenefitType = { text: string checked: boolean } type GhostButtonProps = { children: ReactNode className?: string } & React.ButtonHTMLAttributes [V0_FILE]typescriptreact:file="app/page.tsx" import { DarkPricing } from "@/components/dark-pricing" export default function Home() { return (

) }

About

About