feat(justine): isolate design system — verbatim CSS + (justine) route group
- Add app/styles/justine/01-homepage.css: rules from 01_homepage.html scoped to [data-justine] - Replace app/(marketing) with app/(justine): layout wraps data-justine + Plus Jakarta - JustineHomePage/Nav/Footer: original class names (btn-ink, hero-grid, …) + inline styles from HTML - Remove app/justine-marketing.css; move /features /pricing /privacy /terms under (justine) Made-with: Cursor
This commit is contained in:
281
app/(justine)/features/page.tsx
Normal file
281
app/(justine)/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="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>
|
||||
);
|
||||
}
|
||||
|
||||
47
app/(justine)/layout.tsx
Normal file
47
app/(justine)/layout.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Plus_Jakarta_Sans } from "next/font/google";
|
||||
import { homepage } from "@/marketing/content/homepage";
|
||||
import { JustineNav } from "@/marketing/components/justine/JustineNav";
|
||||
import { JustineFooter } from "@/marketing/components/justine/JustineFooter";
|
||||
import "../styles/justine/01-homepage.css";
|
||||
|
||||
const justineJakarta = Plus_Jakarta_Sans({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700", "800"],
|
||||
variable: "--font-justine-jakarta",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
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 JustineLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-justine
|
||||
className={`${justineJakarta.variable} flex min-h-screen flex-col`}
|
||||
>
|
||||
<JustineNav />
|
||||
<main>{children}</main>
|
||||
<JustineFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
app/(justine)/page.tsx
Normal file
5
app/(justine)/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { JustineHomePage } from "@/marketing/components/justine/JustineHomePage";
|
||||
|
||||
export default function LandingPage() {
|
||||
return <JustineHomePage />;
|
||||
}
|
||||
195
app/(justine)/pricing/page.tsx
Normal file
195
app/(justine)/pricing/page.tsx
Normal file
@@ -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'll notify you when you'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'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>
|
||||
);
|
||||
}
|
||||
|
||||
181
app/(justine)/privacy/page.tsx
Normal file
181
app/(justine)/privacy/page.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Privacy Policy — Vib'n",
|
||||
description: "How Vib'n collects, uses, and protects your personal information.",
|
||||
};
|
||||
|
||||
export default function PrivacyPage() {
|
||||
const lastUpdated = "February 19, 2026";
|
||||
|
||||
return (
|
||||
<div className="container max-w-3xl mx-auto py-16 px-6">
|
||||
<h1 className="text-3xl font-bold mb-2">Privacy Policy</h1>
|
||||
<p className="text-sm text-muted-foreground mb-10">Last updated: {lastUpdated}</p>
|
||||
|
||||
<div className="prose prose-neutral dark:prose-invert max-w-none space-y-8">
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Vib'n ("we", "us", or "our") is operated by Mark Henderson,
|
||||
located in Victoria, British Columbia, Canada. We are committed to protecting your
|
||||
personal information in accordance with the <em>Personal Information Protection Act</em> (BC PIPA)
|
||||
and Canada's <em>Personal Information Protection and Electronic Documents Act</em> (PIPEDA).
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
This policy explains what information we collect when you use vibnai.com, how we use
|
||||
it, and what rights you have over it.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">1. Information We Collect</h2>
|
||||
<h3 className="font-medium mb-2">Information you provide</h3>
|
||||
<ul className="list-disc pl-6 space-y-1 text-muted-foreground">
|
||||
<li>Your name and email address when you sign in with Google</li>
|
||||
<li>Project names, descriptions, and content you create on the platform</li>
|
||||
<li>Code and files stored in your Vib'n repositories</li>
|
||||
<li>Conversations with the AI assistant</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="font-medium mt-4 mb-2">Information collected automatically</h3>
|
||||
<ul className="list-disc pl-6 space-y-1 text-muted-foreground">
|
||||
<li>Session tokens to keep you signed in</li>
|
||||
<li>Basic usage data (pages visited, features used) for product improvement</li>
|
||||
<li>Server logs including IP address and browser type for security and debugging</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">2. How We Use Your Information</h2>
|
||||
<ul className="list-disc pl-6 space-y-1 text-muted-foreground">
|
||||
<li>To provide, operate, and improve the Vib'n platform</li>
|
||||
<li>To authenticate you and maintain your session</li>
|
||||
<li>To power AI features — your project context is sent to the Gemini API to generate responses</li>
|
||||
<li>To send transactional emails (account, billing) when necessary</li>
|
||||
<li>To detect and prevent fraud, abuse, or security incidents</li>
|
||||
</ul>
|
||||
<p className="mt-3 text-muted-foreground">
|
||||
We do not sell your personal information to third parties. We do not use your data
|
||||
to train AI models.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">3. Third-Party Services</h2>
|
||||
<p className="text-muted-foreground mb-3">We use the following third-party services to operate Vib'n:</p>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2 pr-4 font-medium">Service</th>
|
||||
<th className="text-left py-2 pr-4 font-medium">Purpose</th>
|
||||
<th className="text-left py-2 font-medium">Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-muted-foreground">
|
||||
<tr className="border-b">
|
||||
<td className="py-2 pr-4">Google OAuth</td>
|
||||
<td className="py-2 pr-4">Sign-in authentication</td>
|
||||
<td className="py-2">USA</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="py-2 pr-4">Google Gemini API</td>
|
||||
<td className="py-2 pr-4">AI chat and code assistance</td>
|
||||
<td className="py-2">USA</td>
|
||||
</tr>
|
||||
<tr className="border-b">
|
||||
<td className="py-2 pr-4">Google Cloud Run</td>
|
||||
<td className="py-2 pr-4">IDE workspace hosting</td>
|
||||
<td className="py-2">Canada</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 pr-4">PostgreSQL (self-hosted)</td>
|
||||
<td className="py-2 pr-4">User and project data storage</td>
|
||||
<td className="py-2">Canada</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p className="mt-3 text-muted-foreground text-sm">
|
||||
By using Vib'n, you consent to your data being processed in these jurisdictions.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">4. Data Retention</h2>
|
||||
<p className="text-muted-foreground">
|
||||
We retain your account and project data for as long as your account is active.
|
||||
If you delete your account, we will delete your personal information within 30 days,
|
||||
except where we are required to retain it by law (e.g. billing records for 7 years
|
||||
under Canadian tax regulations).
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">5. Your Rights</h2>
|
||||
<p className="text-muted-foreground mb-3">Under BC PIPA and PIPEDA, you have the right to:</p>
|
||||
<ul className="list-disc pl-6 space-y-1 text-muted-foreground">
|
||||
<li>Access the personal information we hold about you</li>
|
||||
<li>Correct inaccurate information</li>
|
||||
<li>Request deletion of your account and associated data</li>
|
||||
<li>Withdraw consent for non-essential data processing</li>
|
||||
<li>Lodge a complaint with the Office of the Information and Privacy Commissioner for BC</li>
|
||||
</ul>
|
||||
<p className="mt-3 text-muted-foreground">
|
||||
To exercise any of these rights, email us at{" "}
|
||||
<a href="mailto:privacy@vibnai.com" className="underline underline-offset-4">
|
||||
privacy@vibnai.com
|
||||
</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">6. Cookies</h2>
|
||||
<p className="text-muted-foreground">
|
||||
We use a single session cookie to keep you signed in. We do not use advertising
|
||||
cookies or third-party tracking pixels. You can clear cookies in your browser at any
|
||||
time, which will sign you out of Vib'n.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">7. Security</h2>
|
||||
<p className="text-muted-foreground">
|
||||
We use HTTPS for all data in transit, encrypted storage for sensitive credentials,
|
||||
and session-based authentication. No system is 100% secure — if you discover a
|
||||
security issue please contact us at{" "}
|
||||
<a href="mailto:security@vibnai.com" className="underline underline-offset-4">
|
||||
security@vibnai.com
|
||||
</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">8. Changes to This Policy</h2>
|
||||
<p className="text-muted-foreground">
|
||||
We may update this policy from time to time. We will notify you of material changes
|
||||
by posting the new policy on this page with an updated date. Continued use of Vib'n
|
||||
after changes constitutes acceptance of the updated policy.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">9. Contact</h2>
|
||||
<p className="text-muted-foreground">
|
||||
For any privacy questions or concerns:
|
||||
</p>
|
||||
<address className="not-italic mt-2 text-muted-foreground">
|
||||
Mark Henderson<br />
|
||||
Vib'n<br />
|
||||
Victoria, British Columbia, Canada<br />
|
||||
<a href="mailto:privacy@vibnai.com" className="underline underline-offset-4">
|
||||
privacy@vibnai.com
|
||||
</a>
|
||||
</address>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
188
app/(justine)/terms/page.tsx
Normal file
188
app/(justine)/terms/page.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Terms of Service — Vib'n",
|
||||
description: "Terms governing your use of the Vib'n platform.",
|
||||
};
|
||||
|
||||
export default function TermsPage() {
|
||||
const lastUpdated = "February 19, 2026";
|
||||
|
||||
return (
|
||||
<div className="container max-w-3xl mx-auto py-16 px-6">
|
||||
<h1 className="text-3xl font-bold mb-2">Terms of Service</h1>
|
||||
<p className="text-sm text-muted-foreground mb-10">Last updated: {lastUpdated}</p>
|
||||
|
||||
<div className="prose prose-neutral dark:prose-invert max-w-none space-y-8">
|
||||
|
||||
<section>
|
||||
<p>
|
||||
These Terms of Service ("Terms") govern your use of Vib'n, operated by
|
||||
Mark Henderson in Victoria, British Columbia, Canada ("we", "us",
|
||||
or "our"). By creating an account or using vibnai.com, you agree to these Terms.
|
||||
If you do not agree, do not use the service.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">1. The Service</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Vib'n is an AI-powered software development platform that provides code repositories,
|
||||
a browser-based IDE, and AI assistance tools. We reserve the right to modify, suspend,
|
||||
or discontinue any part of the service at any time with reasonable notice where possible.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">2. Accounts</h2>
|
||||
<ul className="list-disc pl-6 space-y-1 text-muted-foreground">
|
||||
<li>You must be at least 16 years old to use Vib'n</li>
|
||||
<li>You are responsible for maintaining the security of your account</li>
|
||||
<li>You are responsible for all activity that occurs under your account</li>
|
||||
<li>You must notify us immediately of any unauthorized access at{" "}
|
||||
<a href="mailto:security@vibnai.com" className="underline underline-offset-4">
|
||||
security@vibnai.com
|
||||
</a>
|
||||
</li>
|
||||
<li>One person may not maintain more than one free account</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">3. Acceptable Use</h2>
|
||||
<p className="text-muted-foreground mb-3">You agree not to use Vib'n to:</p>
|
||||
<ul className="list-disc pl-6 space-y-1 text-muted-foreground">
|
||||
<li>Violate any applicable law or regulation</li>
|
||||
<li>Build, distribute, or host malware, spyware, or other malicious software</li>
|
||||
<li>Infringe on the intellectual property rights of others</li>
|
||||
<li>Harass, threaten, or harm any person</li>
|
||||
<li>Attempt to gain unauthorized access to any system or network</li>
|
||||
<li>Use automated tools to scrape or stress-test the platform without permission</li>
|
||||
<li>Resell or sublicense access to the platform without our written consent</li>
|
||||
<li>Use AI features to generate content that is illegal, defamatory, or harmful</li>
|
||||
</ul>
|
||||
<p className="mt-3 text-muted-foreground">
|
||||
We reserve the right to suspend or terminate accounts that violate these terms.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">4. Your Content</h2>
|
||||
<p className="text-muted-foreground">
|
||||
You retain ownership of all code, files, and content you create on Vib'n.
|
||||
By using the platform, you grant us a limited licence to store, display, and process
|
||||
your content solely to provide the service. We do not claim ownership of your work
|
||||
and do not use your content to train AI models.
|
||||
</p>
|
||||
<p className="mt-3 text-muted-foreground">
|
||||
You are responsible for ensuring you have the rights to any content you upload or
|
||||
generate through the platform.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">5. AI Features</h2>
|
||||
<ul className="list-disc pl-6 space-y-1 text-muted-foreground">
|
||||
<li>AI-generated code and suggestions are provided as-is without warranty</li>
|
||||
<li>You are responsible for reviewing and testing any AI-generated output before use</li>
|
||||
<li>Do not submit sensitive personal data, passwords, or confidential business secrets to the AI assistant</li>
|
||||
<li>AI responses may be inaccurate — always verify critical information independently</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">6. Payment and Credits</h2>
|
||||
<ul className="list-disc pl-6 space-y-1 text-muted-foreground">
|
||||
<li>Subscription fees are billed monthly or annually as selected at checkout</li>
|
||||
<li>Credits for AI usage are consumed as you use AI features and do not roll over unless stated</li>
|
||||
<li>All fees are in Canadian dollars (CAD) unless otherwise stated</li>
|
||||
<li>We do not offer refunds for partial months or unused credits, except where required by law</li>
|
||||
<li>We will provide 30 days notice before any price changes take effect</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">7. Availability and Uptime</h2>
|
||||
<p className="text-muted-foreground">
|
||||
We aim to maintain high availability but do not guarantee uninterrupted service.
|
||||
Scheduled maintenance will be announced in advance where possible. We are not liable
|
||||
for losses arising from service downtime or interruptions.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">8. Intellectual Property</h2>
|
||||
<p className="text-muted-foreground">
|
||||
The Vib'n name, logo, platform design, and underlying software are owned by us and
|
||||
protected by applicable intellectual property laws. You may not copy, modify, or
|
||||
distribute our platform or branding without express written permission.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">9. Disclaimer of Warranties</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Vib'n is provided "as is" and "as available" without warranties of any kind,
|
||||
express or implied, including but not limited to merchantability, fitness for a
|
||||
particular purpose, or non-infringement. We do not warrant that the service will
|
||||
be error-free or that AI outputs will be accurate or complete.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">10. Limitation of Liability</h2>
|
||||
<p className="text-muted-foreground">
|
||||
To the maximum extent permitted by applicable law, we shall not be liable for any
|
||||
indirect, incidental, special, consequential, or punitive damages, or any loss of
|
||||
profits or data, arising from your use of the service. Our total liability to you
|
||||
for any claim shall not exceed the amount you paid us in the 3 months prior to the
|
||||
claim.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">11. Termination</h2>
|
||||
<p className="text-muted-foreground">
|
||||
You may cancel your account at any time from your account settings. We may suspend
|
||||
or terminate your account for violation of these Terms, with notice where reasonably
|
||||
possible. Upon termination, you may request an export of your data within 30 days.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">12. Governing Law</h2>
|
||||
<p className="text-muted-foreground">
|
||||
These Terms are governed by the laws of the Province of British Columbia and the
|
||||
federal laws of Canada applicable therein. Any disputes shall be resolved in the
|
||||
courts of Victoria, British Columbia, Canada.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">13. Changes to These Terms</h2>
|
||||
<p className="text-muted-foreground">
|
||||
We may update these Terms from time to time. We will notify you of material changes
|
||||
at least 30 days in advance by email or by posting a notice on the platform.
|
||||
Continued use after changes take effect constitutes acceptance.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-3">14. Contact</h2>
|
||||
<p className="text-muted-foreground">
|
||||
For questions about these Terms:
|
||||
</p>
|
||||
<address className="not-italic mt-2 text-muted-foreground">
|
||||
Mark Henderson<br />
|
||||
Vib'n<br />
|
||||
Victoria, British Columbia, Canada<br />
|
||||
<a href="mailto:legal@vibnai.com" className="underline underline-offset-4">
|
||||
legal@vibnai.com
|
||||
</a>
|
||||
</address>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user