librecloud/web
3
0
Fork 0
Code Issues Pull Requests Packages Projects 2 Releases Wiki Activity

design: add pricing section
Some checks failed
Bump Dependencies / update-dependencies (push) Successful in 1m39s
Build and Push Docker Image / build_and_push (push) Failing after 9m10s

Browse Source
This commit is contained in:
Aidan 2025-03-01 14:21:53 -05:00
parent 30acaa34d4
commit 63eaceb6e6
2 changed files with 174 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/page.tsx
View File

@ -4,6 +4,7 @@ import { Mail, Lock, Disc3, Headset } from "lucide-react"
import { SiGitea, SiAuthentik } from "react-icons/si";
import Navbar from "@/components/pages/main/Navbar"
import PoweredBySection from "@/components/pages/main/PoweredBySection"
import Pricing from "@/components/pages/main/Pricing"
export default function Home() {
const features = [
@ -55,6 +56,7 @@ export default function Home() {
</div>
</section>
<PoweredBySection />
<Pricing />
</main>
</div>
)

172
components/pages/main/Pricing.tsx Normal file
View File

@ -0,0 +1,172 @@
"use client"
import type React from "react"
import { useState } from "react"
import { Check, ChevronRight, Clock } from "lucide-react"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"
import Link from "next/link"
export default function Pricing() {
const [hoveredCard, setHoveredCard] = useState<number | null>(null)
const features = {
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 = ({ children }: { children: React.ReactNode }) => (
<div className="flex items-start space-x-2 mb-4">
<Check className="h-5 w-5 text-primary shrink-0 mt-0.5" />
<span className="text-sm text-foreground">{children}</span>
</div>
)
const cardVariants = {
default: { scale: 1, y: 0 },
hover: { scale: 1.03, y: -8 },
}
return (
<section id="love" className="py-24">
<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-white mb-4">Pricing You&#39;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">
<motion.div
className={`relative overflow-hidden rounded-xl border bg-gray-800 text-card-foreground shadow transition-all duration-300 ${hoveredCard === 0 ? "border-gray-700" : "border-border"}`}
variants={cardVariants}
initial="default"
animate={hoveredCard === 0 ? "hover" : "default"}
onMouseEnter={() => setHoveredCard(0)}
onMouseLeave={() => setHoveredCard(null)}
>
<div className="p-6">
<div className="mb-4 flex items-center justify-between">
<h3 className="text-2xl font-bold">Everything</h3>
<Badge variant="outline" className="text-xs font-medium bg-gray-900">
Most Popular
</Badge>
</div>
<div className="mb-4">
<span className="text-6xl font-bold">$0.00</span>
<span className="text-muted-foreground ml-2">/mo</span>
</div>
<p className="text-sm text-muted-foreground mb-6">
All the essential services you need, completely free.
</p>
<Link href="/account/login">
<Button className="w-full" size="lg">
Get Started <ChevronRight className="ml-2 h-4 w-4" />
</Button>
</Link>
</div>
<Separator />
<div className="p-6 space-y-4">
<h4 className="text-sm font-medium">What&#39;s included:</h4>
<div>
{features.everything.map((feature, index) => (
<FeatureItem key={index}>{feature}</FeatureItem>
))}
</div>
</div>
</motion.div>
<motion.div
className={`relative overflow-hidden rounded-xl border text-card-foreground shadow transition-all duration-300 ${hoveredCard === 1 ? "border-gray-700" : "border-border"}`}
variants={cardVariants}
initial="default"
animate={hoveredCard === 1 ? "hover" : "default"}
onMouseEnter={() => setHoveredCard(1)}
onMouseLeave={() => setHoveredCard(null)}
>
<div className="p-6">
<h3 className="text-2xl font-bold mb-2">Storage</h3>
<div className="text-sm text-muted-foreground mb-2">Starting at</div>
<div className="mb-4">
<span className="text-6xl font-bold">$0.117</span>
<span className="text-muted-foreground ml-2">/GB</span>
</div>
<p className="text-sm text-muted-foreground mb-6">Flexible storage options with no markup.</p>
<Button className="w-full" size="lg" variant="outline" disabled>
<Clock /> Coming Soon
</Button>
</div>
<Separator />
<div className="p-6 space-y-4">
<h4 className="text-sm font-medium">What&#39;s included:</h4>
<div>
{features.storage.map((feature, index) => (
<FeatureItem key={index}>{feature}</FeatureItem>
))}
</div>
<div className="pt-4">
<p className="text-xs text-muted-foreground">
Calculator price rounded to nearest dollar and based on Namecheap provider, priced at $0.70/GB
</p>
</div>
</div>
</motion.div>
<motion.div
className={`relative overflow-hidden rounded-xl border text-card-foreground shadow transition-all duration-300 ${hoveredCard === 2 ? "border-gray-700" : "border-border"}`}
variants={cardVariants}
initial="default"
animate={hoveredCard === 2 ? "hover" : "default"}
onMouseEnter={() => setHoveredCard(2)}
onMouseLeave={() => setHoveredCard(null)}
>
<div className="p-6">
<h3 className="text-2xl font-bold mb-2">Generative AI</h3>
<div className="text-sm text-muted-foreground mb-2">Starting at</div>
<div className="mb-4">
<span className="text-6xl font-bold">$0.00</span>
<span className="text-muted-foreground ml-2">/M tokens</span>
</div>
<p className="text-sm text-muted-foreground mb-6">Access powerful AI models at cost price.</p>
<Button className="w-full" size="lg" variant="outline" disabled>
<Clock /> Coming Soon
</Button>
</div>
<Separator />
<div className="p-6 space-y-4">
<h4 className="text-sm font-medium">What&#39;s included:</h4>
<div>
{features.ai.map((feature, index) => (
<FeatureItem key={index}>{feature}</FeatureItem>
))}
</div>
</div>
</motion.div>
</div>
</div>
</section>
)
}