VIBN Frontend for Coolify deployment
This commit is contained in:
281
app/(marketing)/features/page.tsx
Normal file
281
app/(marketing)/features/page.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Code2,
|
||||
Brain,
|
||||
BarChart3,
|
||||
Zap,
|
||||
Github,
|
||||
Sparkles,
|
||||
Clock,
|
||||
DollarSign,
|
||||
Users,
|
||||
FileCode,
|
||||
TrendingUp,
|
||||
Shield
|
||||
} from "lucide-react";
|
||||
|
||||
export default function FeaturesPage() {
|
||||
return (
|
||||
<div className="container py-8 md:py-12 lg:py-24">
|
||||
<div className="mx-auto flex max-w-[980px] flex-col items-center gap-4">
|
||||
<h1 className="text-4xl font-extrabold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">
|
||||
Powerful Features for AI Developers
|
||||
</h1>
|
||||
<p className="max-w-[750px] text-center text-lg text-muted-foreground">
|
||||
Everything you need to track, analyze, and optimize your AI-powered development workflow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Main Features */}
|
||||
<div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 pt-12 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Code2 className="h-12 w-12 text-blue-600" />
|
||||
<CardTitle>Automatic Session Tracking</CardTitle>
|
||||
<CardDescription>
|
||||
Every coding session is automatically captured with zero configuration.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Real-time session monitoring</li>
|
||||
<li>• File change tracking</li>
|
||||
<li>• Keystroke and activity metrics</li>
|
||||
<li>• AI request logging</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Brain className="h-12 w-12 text-purple-600" />
|
||||
<CardTitle>AI Usage Analytics</CardTitle>
|
||||
<CardDescription>
|
||||
Deep insights into how you and your team use AI tools.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Token usage by model</li>
|
||||
<li>• Request/response tracking</li>
|
||||
<li>• Prompt effectiveness analysis</li>
|
||||
<li>• Model performance comparison</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<DollarSign className="h-12 w-12 text-green-600" />
|
||||
<CardTitle>Cost Tracking</CardTitle>
|
||||
<CardDescription>
|
||||
Real-time cost monitoring for all your AI services.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Per-project cost breakdown</li>
|
||||
<li>• Daily/weekly/monthly reports</li>
|
||||
<li>• Budget alerts</li>
|
||||
<li>• Cost attribution per developer</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Clock className="h-12 w-12 text-orange-600" />
|
||||
<CardTitle>Productivity Metrics</CardTitle>
|
||||
<CardDescription>
|
||||
Track your velocity and identify productivity patterns.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Active coding time</li>
|
||||
<li>• Lines of code metrics</li>
|
||||
<li>• Time-to-completion tracking</li>
|
||||
<li>• Peak productivity hours</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Github className="h-12 w-12 text-gray-600" />
|
||||
<CardTitle>GitHub Integration</CardTitle>
|
||||
<CardDescription>
|
||||
Connect your repositories for comprehensive code analysis.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Repository structure analysis</li>
|
||||
<li>• Dependency tracking</li>
|
||||
<li>• Architecture visualization</li>
|
||||
<li>• Tech stack detection</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Sparkles className="h-12 w-12 text-pink-600" />
|
||||
<CardTitle>Smart Summaries</CardTitle>
|
||||
<CardDescription>
|
||||
AI-powered summaries of your work and progress.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Daily work summaries</li>
|
||||
<li>• Project progress reports</li>
|
||||
<li>• Key accomplishments</li>
|
||||
<li>• Improvement suggestions</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Users className="h-12 w-12 text-cyan-600" />
|
||||
<CardTitle>Team Collaboration</CardTitle>
|
||||
<CardDescription>
|
||||
Built for teams working with AI tools together.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Team dashboards</li>
|
||||
<li>• Shared project insights</li>
|
||||
<li>• Collaborative analytics</li>
|
||||
<li>• Knowledge sharing</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<FileCode className="h-12 w-12 text-indigo-600" />
|
||||
<CardTitle>Code Quality Tracking</CardTitle>
|
||||
<CardDescription>
|
||||
Monitor code quality and AI-generated code effectiveness.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• AI vs manual code tracking</li>
|
||||
<li>• Quality metrics</li>
|
||||
<li>• Bug pattern detection</li>
|
||||
<li>• Code review insights</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<TrendingUp className="h-12 w-12 text-emerald-600" />
|
||||
<CardTitle>Trend Analysis</CardTitle>
|
||||
<CardDescription>
|
||||
Understand long-term patterns in your development process.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Historical trend charts</li>
|
||||
<li>• Performance over time</li>
|
||||
<li>• Seasonal patterns</li>
|
||||
<li>• Predictive insights</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Shield className="h-12 w-12 text-red-600" />
|
||||
<CardTitle>Privacy & Security</CardTitle>
|
||||
<CardDescription>
|
||||
Your code and data stay private and secure.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• End-to-end encryption</li>
|
||||
<li>• No code storage</li>
|
||||
<li>• GDPR compliant</li>
|
||||
<li>• SOC 2 Type II certified</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Zap className="h-12 w-12 text-yellow-600" />
|
||||
<CardTitle>Real-Time Insights</CardTitle>
|
||||
<CardDescription>
|
||||
Get instant feedback as you code.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Live dashboards</li>
|
||||
<li>• Instant notifications</li>
|
||||
<li>• Real-time cost updates</li>
|
||||
<li>• Activity streaming</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<BarChart3 className="h-12 w-12 text-violet-600" />
|
||||
<CardTitle>Custom Reports</CardTitle>
|
||||
<CardDescription>
|
||||
Create custom reports tailored to your needs.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li>• Customizable dashboards</li>
|
||||
<li>• Export to CSV/PDF</li>
|
||||
<li>• Scheduled reports</li>
|
||||
<li>• Custom metrics</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Integration Section */}
|
||||
<div className="mx-auto mt-24 max-w-4xl">
|
||||
<h2 className="mb-8 text-center text-3xl font-bold">Seamless Integrations</h2>
|
||||
<div className="grid grid-cols-2 gap-8 md:grid-cols-4">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-muted">
|
||||
<Code2 className="h-8 w-8" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">Cursor</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-muted">
|
||||
<Brain className="h-8 w-8" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">ChatGPT</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-muted">
|
||||
<Github className="h-8 w-8" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">GitHub</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-muted">
|
||||
<Sparkles className="h-8 w-8" />
|
||||
</div>
|
||||
<span className="text-sm font-medium">More Soon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user