vibn-frontend/app/(marketing)/features/page.tsx

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="font-serif text-4xl font-bold leading-tight tracking-tight 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-primary" />
            <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-primary" />
            <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-primary" />
            <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-primary" />
            <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-primary" />
            <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-primary" />
            <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-primary" />
            <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-primary" />
            <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-primary" />
            <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-primary" />
            <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-primary" />
            <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-primary" />
            <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>
  );
}