VIBN Frontend for Coolify deployment

app/(marketing)/features/page.tsx

@@ -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>
+  );
+}
+

app/(marketing)/layout.tsx

@@ -0,0 +1,120 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import type { Metadata } from "next";
+import { homepage } from "@/marketing/content/homepage";
+
+export const metadata: Metadata = {
+  title: homepage.meta.title,
+  description: homepage.meta.description,
+  openGraph: {
+    title: homepage.meta.title,
+    description: homepage.meta.description,
+    url: "https://www.vibnai.com",
+    siteName: "VIBN",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: homepage.meta.title,
+    description: homepage.meta.description,
+  },
+};
+
+export default function MarketingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      {/* Navigation */}
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container flex h-16 items-center">
+          <div className="flex gap-6 md:gap-10">
+            <Link href="/" className="flex items-center space-x-2">
+              <img 
+                src="/vibn-black-circle-logo.png" 
+                alt="Vib'n" 
+                className="h-8 w-8"
+              />
+              <span className="text-xl font-bold">Vib&apos;n</span>
+            </Link>
+          </div>
+          <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+            <nav className="flex items-center space-x-6">
+              <Link
+                href="/#features"
+                className="text-sm font-medium transition-colors hover:text-primary"
+              >
+                Features
+              </Link>
+              <Link
+                href="/#how-it-works"
+                className="text-sm font-medium transition-colors hover:text-primary"
+              >
+                How It Works
+              </Link>
+              <Link
+                href="/#pricing"
+                className="text-sm font-medium transition-colors hover:text-primary"
+              >
+                Pricing
+              </Link>
+              <Link
+                href="https://github.com/MawkOne/viben"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm font-medium transition-colors hover:text-primary"
+              >
+                GitHub
+              </Link>
+            </nav>
+            <div className="flex items-center space-x-4">
+              <Link href="/auth">
+                <Button variant="ghost" size="sm">
+                  Sign In
+                </Button>
+              </Link>
+              <Link href="/auth">
+                <Button size="sm">Get Started</Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 w-full">{children}</main>
+
+      {/* Footer */}
+      <footer className="border-t py-6 md:py-0">
+        <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+          <div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
+            <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
+              Built by{" "}
+              <a
+                href="https://github.com/MawkOne"
+                target="_blank"
+                rel="noreferrer"
+                className="font-medium underline underline-offset-4"
+              >
+                Mark Henderson
+              </a>
+              . The source code is available on{" "}
+              <a
+                href="https://github.com/MawkOne/viben"
+                target="_blank"
+                rel="noreferrer"
+                className="font-medium underline underline-offset-4"
+              >
+                GitHub
+              </a>
+              .
+            </p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
+

app/(marketing)/page.tsx

@@ -0,0 +1,26 @@
+import {
+  Hero,
+  EmotionalHook,
+  WhoItsFor,
+  Transformation,
+  Features,
+  HowItWorks,
+  Pricing,
+  CTA,
+} from "@/marketing/components";
+
+export default function LandingPage() {
+  return (
+    <div className="flex flex-col">
+      <Hero />
+      <EmotionalHook />
+      <WhoItsFor />
+      <Transformation />
+      <Features />
+      <HowItWorks />
+      <Pricing />
+      <CTA />
+    </div>
+  );
+}
+

app/(marketing)/pricing/page.tsx

@@ -0,0 +1,195 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+import { Check } from "lucide-react";
+
+export default function PricingPage() {
+  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]">
+          Simple, Transparent Pricing
+        </h1>
+        <p className="max-w-[750px] text-center text-lg text-muted-foreground">
+          Start free, upgrade when you need more. No hidden fees, no surprises.
+        </p>
+      </div>
+
+      <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 pt-12 md:grid-cols-3">
+        {/* Free Tier */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-2xl">Free</CardTitle>
+            <CardDescription>Perfect for trying out Vibn</CardDescription>
+            <div className="mt-4">
+              <span className="text-4xl font-bold">$0</span>
+              <span className="text-muted-foreground">/month</span>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <ul className="space-y-3">
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Up to 100 sessions/month</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>1 project</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Basic analytics</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>7-day data retention</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Cursor integration</span>
+              </li>
+            </ul>
+            <Link href="/auth" className="block">
+              <Button variant="outline" className="w-full">
+                Get Started
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        {/* Pro Tier */}
+        <Card className="border-primary shadow-lg">
+          <div className="absolute right-4 top-4 rounded-full bg-primary px-3 py-1 text-xs text-primary-foreground">
+            Popular
+          </div>
+          <CardHeader>
+            <CardTitle className="text-2xl">Pro</CardTitle>
+            <CardDescription>For serious developers</CardDescription>
+            <div className="mt-4">
+              <span className="text-4xl font-bold">$19</span>
+              <span className="text-muted-foreground">/month</span>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <ul className="space-y-3">
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span className="font-medium">Unlimited sessions</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span className="font-medium">Unlimited projects</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Advanced analytics</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>90-day data retention</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>ChatGPT integration</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>GitHub integration</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Priority support</span>
+              </li>
+            </ul>
+            <Link href="/auth" className="block">
+              <Button className="w-full">
+                Start Pro Trial
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        {/* Team Tier */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-2xl">Team</CardTitle>
+            <CardDescription>For teams and organizations</CardDescription>
+            <div className="mt-4">
+              <span className="text-4xl font-bold">$49</span>
+              <span className="text-muted-foreground">/month</span>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <ul className="space-y-3">
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span className="font-medium">Everything in Pro</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Up to 10 team members</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Team analytics</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Unlimited data retention</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Custom integrations</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>SSO support</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Check className="h-5 w-5 text-green-600" />
+                <span>Dedicated support</span>
+              </li>
+            </ul>
+            <Link href="/auth" className="block">
+              <Button variant="outline" className="w-full">
+                Contact Sales
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* FAQ Section */}
+      <div className="mx-auto mt-16 max-w-3xl">
+        <h2 className="mb-8 text-center text-3xl font-bold">Frequently Asked Questions</h2>
+        <div className="space-y-6">
+          <div>
+            <h3 className="mb-2 text-lg font-semibold">Can I try Pro for free?</h3>
+            <p className="text-muted-foreground">
+              Yes! All new accounts get a 14-day free trial of Pro features. No credit card required.
+            </p>
+          </div>
+          <div>
+            <h3 className="mb-2 text-lg font-semibold">What happens when I exceed the free tier limits?</h3>
+            <p className="text-muted-foreground">
+              We&apos;ll notify you when you&apos;re approaching your limits. You can upgrade anytime to continue tracking without interruption.
+            </p>
+          </div>
+          <div>
+            <h3 className="mb-2 text-lg font-semibold">Can I cancel anytime?</h3>
+            <p className="text-muted-foreground">
+              Yes, you can cancel your subscription at any time. You&apos;ll retain access until the end of your billing period.
+            </p>
+          </div>
+          <div>
+            <h3 className="mb-2 text-lg font-semibold">Do you offer discounts for students or non-profits?</h3>
+            <p className="text-muted-foreground">
+              Yes! Contact us at support@vibnai.com for special pricing for students, educators, and non-profit organizations.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+