266 lines
7.8 KiB
TypeScript
266 lines
7.8 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
import { Check, ChevronRight, Clock, XCircle } from "lucide-react"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import Link from "next/link"
|
|
import { motion } from "motion/react"
|
|
|
|
interface PricingFeatures {
|
|
everything: string[]
|
|
storage: string[]
|
|
ai: string[]
|
|
}
|
|
|
|
interface FeatureItemProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
interface PricingCardProps {
|
|
title: string
|
|
price: string
|
|
period: string
|
|
description: string
|
|
features: string[]
|
|
badge?: string
|
|
buttonText?: string
|
|
buttonIcon?: React.ReactNode
|
|
isComingSoon?: boolean
|
|
className?: string
|
|
}
|
|
|
|
const cardVariants = {
|
|
initial: {
|
|
transform: "scale(1)",
|
|
transition: {
|
|
type: "spring",
|
|
stiffness: 300,
|
|
damping: 20,
|
|
layout: false
|
|
}
|
|
},
|
|
hover: {
|
|
transform: "scale(1.02)",
|
|
transition: {
|
|
type: "spring",
|
|
stiffness: 300,
|
|
damping: 20,
|
|
layout: false
|
|
}
|
|
}
|
|
} as const
|
|
|
|
const textVariants = {
|
|
initial: {
|
|
color: "inherit",
|
|
transition: { duration: 0.2 }
|
|
},
|
|
hover: {
|
|
color: "inherit",
|
|
transition: { duration: 0.2 }
|
|
}
|
|
} as const
|
|
|
|
const features: PricingFeatures = {
|
|
everything: [
|
|
"Use anything and everything on LibreCloud",
|
|
"Unlimited Password/Secret Storage with Vaultwarden",
|
|
"4GB of Email Storage",
|
|
"Unlimited Git Repositories with Gitea",
|
|
"Unlimited Fair-Use Actions runs with Gitea",
|
|
"Priority support via Email/Telegram",
|
|
],
|
|
storage: [
|
|
"ZERO FEES - You pay the price we pay",
|
|
"Through some providers, we offer 24/7 monitoring",
|
|
"Several data storage providers to choose from",
|
|
"Clone/erase your entire disk at any time (coming soon)",
|
|
"Do anything with your extra slice... we'll setup email, services, and more at no additional cost",
|
|
],
|
|
ai: [
|
|
"Flexible options such as OpenRouter and Cloud VPS",
|
|
"Pay per token or hour at no additional cost from LibreCloud",
|
|
"Use our open-source chat interface with a range of providers",
|
|
"Use the latest models such as Anthropic's Claude 3.7 Sonnet and OpenAI's o3-mini",
|
|
],
|
|
}
|
|
|
|
const FeatureItem: React.FC<FeatureItemProps> = ({ children }) => (
|
|
<div className="flex items-start space-x-2 mb-4">
|
|
<div className="flex-shrink-0 flex items-center justify-center">
|
|
<Check className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<motion.span
|
|
initial="initial"
|
|
whileHover="hover"
|
|
variants={textVariants}
|
|
className="text-sm text-muted-foreground group-hover:text-muted-foreground/90 transition-colors duration-300"
|
|
>
|
|
{children}
|
|
</motion.span>
|
|
</div>
|
|
)
|
|
|
|
const PricingCard: React.FC<PricingCardProps> = ({
|
|
title,
|
|
price,
|
|
period,
|
|
description,
|
|
features,
|
|
badge,
|
|
buttonText,
|
|
buttonIcon,
|
|
isComingSoon,
|
|
className,
|
|
}) => (
|
|
<motion.div
|
|
className="relative h-full"
|
|
initial="initial"
|
|
whileHover="hover"
|
|
variants={cardVariants}
|
|
style={{
|
|
willChange: "transform",
|
|
transformStyle: "preserve-3d"
|
|
}}
|
|
>
|
|
<div
|
|
className={`relative h-full overflow-hidden rounded-xl border border-border bg-card text-card-foreground hover:bg-accent/5 transition-colors duration-300 group ${className}`}
|
|
>
|
|
<div className="p-6">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<motion.h3
|
|
variants={textVariants}
|
|
className="text-2xl font-bold text-foreground group-hover:text-foreground/90 transition-colors duration-300"
|
|
>
|
|
{title}
|
|
</motion.h3>
|
|
{badge && (
|
|
<div>
|
|
<Badge variant="outline" className="text-xs font-medium bg-background/50 text-foreground/90">
|
|
{badge}
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
{title !== "Everything" ? (
|
|
<motion.span
|
|
variants={textVariants}
|
|
className="text-sm text-muted-foreground block mb-1 group-hover:text-muted-foreground/90 transition-colors duration-300"
|
|
>
|
|
Starting at
|
|
</motion.span>
|
|
) : (
|
|
<motion.span
|
|
variants={textVariants}
|
|
className="text-sm text-muted-foreground italic block mb-1 group-hover:text-muted-foreground/90 transition-colors duration-300"
|
|
>
|
|
Always
|
|
</motion.span>
|
|
)}
|
|
<motion.span
|
|
variants={textVariants}
|
|
className="text-6xl font-bold text-foreground group-hover:text-foreground/90 transition-colors duration-300"
|
|
>
|
|
{price}
|
|
</motion.span>
|
|
<motion.span
|
|
variants={textVariants}
|
|
className="text-muted-foreground ml-2 group-hover:text-muted-foreground/90 transition-colors duration-300"
|
|
>
|
|
{period}
|
|
</motion.span>
|
|
</div>
|
|
<motion.p
|
|
variants={textVariants}
|
|
className="text-sm text-muted-foreground mt-4 mb-6 group-hover:text-muted-foreground/90 transition-colors duration-300"
|
|
>
|
|
{description}
|
|
</motion.p>
|
|
{isComingSoon ? (
|
|
<Button className="w-full" size="lg" variant="outline" disabled>
|
|
<Clock /> Coming Soon
|
|
</Button>
|
|
) : buttonText ? (
|
|
process.env.SIGNUP_ENABLED === "true" ? (
|
|
<Link href="/account/login" className="block">
|
|
<Button className="w-full group" size="lg">
|
|
{buttonText}
|
|
{buttonIcon}
|
|
</Button>
|
|
</Link>
|
|
) : (
|
|
<Button className="w-full" size="lg" variant="outline" disabled>
|
|
<XCircle className="h-5 w-5" />
|
|
Registration Closed
|
|
</Button>
|
|
)
|
|
) : null}
|
|
</div>
|
|
<Separator className="bg-border" />
|
|
<div className="p-6 space-y-4">
|
|
<motion.h4
|
|
variants={textVariants}
|
|
className="text-sm font-medium text-foreground group-hover:text-foreground/90 transition-colors duration-300"
|
|
>
|
|
What's included:
|
|
</motion.h4>
|
|
<div className="space-y-1">
|
|
{features.map((feature, index) => (
|
|
<FeatureItem key={index}>{feature}</FeatureItem>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
|
|
export default function Pricing(): React.ReactElement {
|
|
return (
|
|
<section id="pricing" className="pb-10 relative overflow-hidden">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-extrabold text-foreground mb-4">Pricing You'll Love</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
Simple, transparent pricing with zero additional fees.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
<PricingCard
|
|
title="Everything"
|
|
price="$0.00"
|
|
period="/mo"
|
|
description="All the services we offer, completely free."
|
|
features={features.everything}
|
|
badge="Most Popular"
|
|
buttonText="Get Started"
|
|
buttonIcon={<ChevronRight className="h-4 w-4" />}
|
|
/>
|
|
|
|
<PricingCard
|
|
title="Storage"
|
|
price="$0.117"
|
|
period="/GB"
|
|
description="Flexible storage options with no markup."
|
|
features={features.storage}
|
|
isComingSoon
|
|
/>
|
|
|
|
<PricingCard
|
|
title="Generative AI"
|
|
price="$0.00"
|
|
period="/M tokens"
|
|
description="Access powerful AI models at the best price."
|
|
features={features.ai}
|
|
isComingSoon
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|