Skip to content

Commit a2991ac

Browse files
iamsmrutiiamsmruti
committed
update: added pricing page
1 parent 458fb1e commit a2991ac

2 files changed

Lines changed: 185 additions & 0 deletions

File tree

‎src/app/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default function Home() {
2020
</div>
2121

2222
<div className="hidden md:flex items-center gap-8 text-sm font-medium text-white/70 tracking-wide">
23+
<Link href="/pricing" className="hover:text-white transition-colors">Pricing</Link>
2324
<Link href="/blog" className="hover:text-white transition-colors">Blog</Link>
2425
<Link href="#download" className="bg-primary/10 text-primary border border-primary/20 px-5 py-2 rounded-full hover:bg-primary hover:text-white transition-all shadow-[0_0_10px_rgba(101,140,194,0.1)]">
2526
Download

‎src/app/pricing/page.tsx‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import { CheckCircle2, ShieldAlert, Check, X, ArrowRight, Zap, Crown, Bot, Database, FolderGit2 } from "lucide-react";
2+
import Link from "next/link";
3+
import { Activity } from "lucide-react";
4+
5+
export const metadata = {
6+
title: "Devian | Features & Pricing",
7+
description: "Compare Devian Community and Devian Pro plans. Upgrade to unlock powerful local AI capabilities and unrestricted docker management.",
8+
};
9+
10+
const FEATURES = [
11+
{
12+
category: "General & UI",
13+
items: [
14+
{ name: "Native macOS & Windows app", community: true, pro: true },
15+
{ name: "Modern Dark UI & Animations", community: true, pro: true },
16+
{ name: "VS Code / Cursor Integration", community: true, pro: true },
17+
]
18+
},
19+
{
20+
category: "Local Repositories",
21+
items: [
22+
{ name: "Scan & View Local Projects", community: true, pro: true },
23+
{ name: "Open in Editor/Terminal", community: true, pro: true },
24+
{ name: "Find unused & stale repos", community: false, pro: true },
25+
{ name: "1-Click node_modules cleanup", community: false, pro: true },
26+
{ name: "Identify broken dependencies", community: false, pro: true },
27+
]
28+
},
29+
{
30+
category: "Docker & Infrastructure",
31+
items: [
32+
{ name: "View Running Containers", community: true, pro: true },
33+
{ name: "Start/Stop Containers", community: true, pro: true },
34+
{ name: "Cross-container Insights", community: false, pro: true },
35+
{ name: "Database Schema Visualizer", community: false, pro: true },
36+
]
37+
},
38+
{
39+
category: "System & Network",
40+
items: [
41+
{ name: "View Active Ports", community: true, pro: true },
42+
{ name: "Kill Processes holding ports", community: true, pro: true },
43+
{ name: "CPU & Memory Analytics", community: true, pro: true },
44+
{ name: "Time-series Resource Tracking", community: false, pro: true },
45+
]
46+
},
47+
{
48+
category: "AI & Intelligence",
49+
items: [
50+
{ name: "Local LLM Orchestration", community: false, pro: true },
51+
{ name: "Smart Environment Analytics", community: false, pro: true },
52+
{ name: "Auto-fix Dependency Errors", community: false, pro: true },
53+
]
54+
}
55+
];
56+
57+
export default function FeaturesPage() {
58+
return (
59+
<div className="min-h-screen bg-[#121212] text-white selection:bg-primary/30">
60+
{/* Navigation */}
61+
<nav className="flex items-center justify-between px-4 md:px-8 py-4 border-b border-white/5 bg-[#121212]/80 backdrop-blur-xl z-50">
62+
<div className="flex items-center gap-3">
63+
<Link href="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
64+
<div className="h-9 w-9 rounded-xl bg-gradient-to-br from-primary/30 to-primary/10 flex items-center justify-center border border-primary/20 shadow-[0_0_15px_rgba(101,140,194,0.3)]">
65+
<Activity className="h-5 w-5 text-primary" />
66+
</div>
67+
<span className="text-xl font-bold tracking-tight">Devian</span>
68+
</Link>
69+
</div>
70+
<div className="hidden md:flex items-center gap-8 text-sm font-medium text-white/70 tracking-wide">
71+
<Link href="/" className="hover:text-white transition-colors">Home</Link>
72+
<a href="https://buy.stripe.com/test_5kQ9AVeTd5vzcwOb058k800" className="bg-primary/10 text-primary border border-primary/20 px-5 py-2 rounded-full hover:bg-primary hover:text-white transition-all shadow-[0_0_10px_rgba(101,140,194,0.1)]">
73+
Buy Devian Pro
74+
</a>
75+
</div>
76+
</nav>
77+
78+
<main className="pt-32 pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
79+
<div className="text-center max-w-3xl mx-auto mb-20 animate-fade-in">
80+
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight mb-6">
81+
Choose the right plan for your <span className="text-primary">workflow</span>
82+
</h1>
83+
<p className="text-zinc-400 text-lg sm:text-xl">
84+
Devian Community is free forever for basic environment management. Upgrade to Devian Pro to unlock AI agents, bulk cleanup, and advanced docker insights.
85+
</p>
86+
</div>
87+
88+
{/* Pricing Cards */}
89+
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mb-24">
90+
<div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-8 flex flex-col">
91+
<h3 className="text-2xl font-bold mb-2">Community</h3>
92+
<div className="text-4xl font-bold mb-6">$0<span className="text-lg text-zinc-500 font-normal">/forever</span></div>
93+
<p className="text-zinc-400 mb-8 flex-1">
94+
Perfect for students and hobbyists who need a better way to view their local stack.
95+
</p>
96+
<Link href="/downloads" className="w-full text-center py-3 bg-zinc-800 hover:bg-zinc-700 text-white rounded-lg font-medium transition-colors">
97+
Download Free
98+
</Link>
99+
</div>
100+
101+
<div className="bg-gradient-to-b from-primary/10 to-zinc-900/50 border border-primary/30 rounded-2xl p-8 flex flex-col relative overflow-hidden">
102+
<div className="absolute top-0 right-0 p-6 opacity-10">
103+
<Crown className="w-24 h-24 text-primary" />
104+
</div>
105+
<div className="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
106+
SUPPORT INDIE DEV
107+
</div>
108+
109+
<h3 className="text-2xl font-bold mb-2 flex items-center gap-2">
110+
Devian Pro <Zap className="w-5 h-5 text-primary" />
111+
</h3>
112+
<div className="text-4xl font-bold mb-6">$29<span className="text-lg text-zinc-500 font-normal">/lifetime</span></div>
113+
<p className="text-zinc-400 mb-8 flex-1 relative z-10">
114+
For professional developers who want absolute control, intelligent insights, and AI automation.
115+
</p>
116+
<a
117+
href="https://buy.stripe.com/test_5kQ9AVeTd5vzcwOb058k800"
118+
className="w-full text-center py-3 bg-primary hover:bg-primary/90 text-white rounded-lg font-medium transition-colors shadow-[0_0_30px_-5px_var(--tw-shadow-color)] shadow-primary/30 relative z-10"
119+
>
120+
Buy Devian Pro
121+
</a>
122+
<p className="text-center text-xs text-zinc-500 mt-3 relative z-10">Valid for up to 3 personal devices</p>
123+
</div>
124+
</div>
125+
126+
{/* Comparison Table */}
127+
<div className="max-w-4xl mx-auto">
128+
<h2 className="text-2xl font-bold text-center mb-12">Detailed Comparison</h2>
129+
130+
<div className="bg-zinc-900/30 border border-zinc-800/50 rounded-2xl overflow-hidden">
131+
<div className="grid grid-cols-5 p-4 bg-zinc-900/80 border-b border-zinc-800 text-sm font-semibold text-zinc-300">
132+
<div className="col-span-3">Feature</div>
133+
<div className="text-center">Community</div>
134+
<div className="text-center text-primary">Pro</div>
135+
</div>
136+
137+
{FEATURES.map((category, i) => (
138+
<div key={i}>
139+
<div className="bg-zinc-900/40 px-4 py-2 text-xs font-semibold text-zinc-500 uppercase tracking-wider border-b border-zinc-800/50">
140+
{category.category}
141+
</div>
142+
{category.items.map((item, j) => (
143+
<div key={j} className="grid grid-cols-5 p-4 border-b border-zinc-800/30 text-sm hover:bg-zinc-800/20 transition-colors">
144+
<div className="col-span-3 text-zinc-300 flex items-center gap-2">
145+
{item.name}
146+
</div>
147+
<div className="flex items-center justify-center">
148+
{item.community ? (
149+
<Check className="w-4 h-4 text-emerald-500" />
150+
) : (
151+
<span className="w-4 h-px bg-zinc-700" />
152+
)}
153+
</div>
154+
<div className="flex items-center justify-center">
155+
{item.pro ? (
156+
<Check className="w-4 h-4 text-primary" />
157+
) : (
158+
<span className="w-4 h-px bg-zinc-700" />
159+
)}
160+
</div>
161+
</div>
162+
))}
163+
</div>
164+
))}
165+
</div>
166+
</div>
167+
168+
{/* Bottom CTA */}
169+
<div className="mt-32 text-center max-w-2xl mx-auto bg-gradient-to-b from-primary/10 to-transparent p-12 rounded-3xl border border-primary/20">
170+
<h2 className="text-3xl font-bold mb-4">Ready to supercharge your workflow?</h2>
171+
<p className="text-zinc-400 mb-8">
172+
Join other professional developers building faster with Devian Pro. One-time payment, lifetime updates.
173+
</p>
174+
<a
175+
href="https://buy.stripe.com/test_5kQ9AVeTd5vzcwOb058k800"
176+
className="inline-flex items-center justify-center px-8 py-4 bg-primary hover:bg-primary/90 text-white rounded-full font-medium transition-all hover:scale-105 shadow-[0_0_40px_-10px_var(--tw-shadow-color)] shadow-primary"
177+
>
178+
Get Devian Pro Today
179+
</a>
180+
</div>
181+
</main>
182+
</div>
183+
);
184+
}

0 commit comments

Comments
 (0)