chore: remove deprecated modular marketing components (Group 3)
This commit is contained in:
@@ -1,281 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,195 +0,0 @@
|
||||
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="relative 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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,181 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from "../features/page";
|
||||
@@ -1,188 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Sparkles, Calendar } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { homepage } from "@/marketing/content/homepage";
|
||||
|
||||
export function CTA() {
|
||||
return (
|
||||
<section className="w-full py-16 md:py-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="vibn-cta-surface mx-auto flex max-w-[980px] flex-col items-center gap-6 rounded-2xl border border-border p-12 md:p-16">
|
||||
<h2 className="font-serif text-2xl font-semibold leading-tight tracking-tight md:text-4xl lg:text-5xl text-center max-w-[800px]">
|
||||
{homepage.finalCTA.title}
|
||||
</h2>
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-4">
|
||||
<Link href="/auth?new=1">
|
||||
<Button size="lg" className="h-12 px-8 text-base">
|
||||
<Sparkles className="mr-2 h-5 w-5" />
|
||||
{homepage.finalCTA.cta.primary}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="https://calendly.com/your-link" target="_blank" rel="noopener noreferrer">
|
||||
<Button variant="outline" size="lg" className="h-12 px-8 text-base">
|
||||
<Calendar className="mr-2 h-5 w-5" />
|
||||
{homepage.finalCTA.cta.secondary}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import { homepage } from "@/marketing/content/homepage";
|
||||
|
||||
export function EmotionalHook() {
|
||||
return (
|
||||
<section className="w-full py-16 md:py-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="mx-auto max-w-[800px] text-center space-y-4">
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
|
||||
{homepage.emotionalHook.title}
|
||||
</h2>
|
||||
<p className="vibn-gradient-text font-serif text-4xl font-semibold tracking-tight md:text-6xl">
|
||||
{homepage.emotionalHook.subtitle}
|
||||
</p>
|
||||
<p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">
|
||||
{homepage.emotionalHook.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { homepage } from "@/marketing/content/homepage";
|
||||
|
||||
export function Features() {
|
||||
return (
|
||||
<section id="features" className="w-full py-16 md:py-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="mx-auto flex max-w-[980px] flex-col items-center gap-4 mb-12">
|
||||
<h2 className="font-serif text-3xl font-semibold leading-tight tracking-tight md:text-5xl text-center">
|
||||
{homepage.features.title}
|
||||
</h2>
|
||||
<p className="max-w-[750px] text-center text-lg text-muted-foreground md:text-xl">
|
||||
{homepage.features.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{homepage.features.list.map((feature, index) => (
|
||||
<Card key={index} className="transition-all hover:border-primary/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{feature.title}</CardTitle>
|
||||
<CardDescription className="text-base leading-relaxed">
|
||||
{feature.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import { Github, Mail } from "lucide-react";
|
||||
|
||||
const YEAR = new Date().getFullYear();
|
||||
|
||||
const links = {
|
||||
product: [
|
||||
{ label: "Features", href: "/#features" },
|
||||
{ label: "How It Works", href: "/#how-it-works" },
|
||||
{ label: "Pricing", href: "/#pricing" },
|
||||
{ label: "Sign In", href: "/auth" },
|
||||
{ label: "Get Started", href: "/auth?new=1" },
|
||||
],
|
||||
resources: [
|
||||
{ label: "GitHub", href: "https://github.com/MawkOne/viben", external: true },
|
||||
{ label: "Documentation", href: "https://github.com/MawkOne/viben", external: true },
|
||||
{ label: "Changelog", href: "https://github.com/MawkOne/viben/releases", external: true },
|
||||
],
|
||||
legal: [
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Contact", href: "mailto:hello@vibnai.com", external: true },
|
||||
],
|
||||
};
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t bg-muted/30">
|
||||
<div className="container mx-auto px-6 py-12 md:py-16">
|
||||
|
||||
{/* Top — logo + columns */}
|
||||
<div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-4">
|
||||
|
||||
{/* Brand */}
|
||||
<div className="col-span-2 md:col-span-1">
|
||||
<Link href="/" className="flex items-center gap-2 mb-4">
|
||||
<img src="/vibn-black-circle-logo.png" alt="Vib'n" className="h-8 w-8" />
|
||||
<span className="font-serif text-lg font-bold tracking-tight">Vib'n</span>
|
||||
</Link>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed max-w-[220px]">
|
||||
AI-powered development platform for vibe coders. From idea to market.
|
||||
</p>
|
||||
<div className="flex items-center gap-3 mt-5">
|
||||
<a
|
||||
href="https://github.com/MawkOne/viben"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<Github className="h-5 w-5" />
|
||||
</a>
|
||||
<a
|
||||
href="mailto:hello@vibnai.com"
|
||||
aria-label="Email"
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<Mail className="h-5 w-5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-4">Product</h3>
|
||||
<ul className="space-y-3">
|
||||
{links.product.map((l) => (
|
||||
<li key={l.label}>
|
||||
<Link
|
||||
href={l.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Resources */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-4">Resources</h3>
|
||||
<ul className="space-y-3">
|
||||
{links.resources.map((l) => (
|
||||
<li key={l.label}>
|
||||
<a
|
||||
href={l.href}
|
||||
target={l.external ? "_blank" : undefined}
|
||||
rel={l.external ? "noopener noreferrer" : undefined}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{l.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Legal */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-4">Legal</h3>
|
||||
<ul className="space-y-3">
|
||||
{links.legal.map((l) => (
|
||||
<li key={l.label}>
|
||||
{l.external ? (
|
||||
<a
|
||||
href={l.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{l.label}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
href={l.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom bar */}
|
||||
<div className="mt-12 pt-8 border-t flex flex-col items-center justify-between gap-3 md:flex-row">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
© {YEAR} Vib'n · Victoria, British Columbia, Canada
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Built with ❤️ for vibe coders everywhere
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { Sparkles, ArrowRight } from "lucide-react";
|
||||
import { homepage } from "@/marketing/content/homepage";
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="w-full">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col items-center gap-6 pb-16 pt-16 md:py-24 lg:py-32">
|
||||
<div className="flex max-w-[980px] flex-col items-center gap-6 text-center">
|
||||
{/* Main title */}
|
||||
<h1 className="font-serif text-3xl font-bold leading-tight tracking-tight md:text-5xl md:font-semibold lg:text-6xl lg:leading-[1.1]">
|
||||
{homepage.hero.title}
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="max-w-[750px] text-lg text-muted-foreground sm:text-xl md:text-2xl">
|
||||
{homepage.hero.subtitle}
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 mt-4">
|
||||
<Link href="/auth?new=1">
|
||||
<Button size="lg" className="h-12 px-8 text-base">
|
||||
<Sparkles className="mr-2 h-5 w-5" />
|
||||
{homepage.hero.cta.primary}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="#how-it-works">
|
||||
<Button variant="outline" size="lg" className="h-12 px-8 text-base">
|
||||
{homepage.hero.cta.secondary}
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import { homepage } from "@/marketing/content/homepage";
|
||||
|
||||
export function HowItWorks() {
|
||||
return (
|
||||
<section id="how-it-works" className="w-full py-16 md:py-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="mx-auto max-w-[900px] space-y-12">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
|
||||
{homepage.howItWorks.title}
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground md:text-xl">
|
||||
{homepage.howItWorks.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8 pt-8">
|
||||
{homepage.howItWorks.steps.map((step) => (
|
||||
<div key={step.number} className="flex gap-6">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xl">
|
||||
{step.number}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 pt-1">
|
||||
<h3 className="text-2xl font-bold">{step.title}</h3>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1 @@
|
||||
/**
|
||||
* Marketing Components
|
||||
* All marketing-specific components for the landing page
|
||||
*/
|
||||
|
||||
export { Hero } from "./hero";
|
||||
export { EmotionalHook } from "./emotional-hook";
|
||||
export { WhoItsFor } from "./who-its-for";
|
||||
export { Transformation } from "./transformation";
|
||||
export { Features } from "./features";
|
||||
export { HowItWorks } from "./how-it-works";
|
||||
export { Pricing } from "./pricing";
|
||||
export { CTA } from "./cta";
|
||||
export { Footer } from "./footer";
|
||||
|
||||
// Public components exports from subdirectories when needed
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Check } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { homepage } from "@/marketing/content/homepage";
|
||||
|
||||
export function Pricing() {
|
||||
return (
|
||||
<section id="pricing" className="w-full py-16 md:py-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="mx-auto max-w-[980px] space-y-12">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
|
||||
{homepage.pricing.title}
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground md:text-xl">
|
||||
{homepage.pricing.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-3 pt-8">
|
||||
{homepage.pricing.tiers.map((tier) => (
|
||||
<Card
|
||||
key={tier.name}
|
||||
className={`flex flex-col ${
|
||||
tier.highlighted
|
||||
? "border-primary shadow-lg scale-105"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">{tier.name}</CardTitle>
|
||||
<CardDescription className="text-base">
|
||||
{tier.description}
|
||||
</CardDescription>
|
||||
<div className="pt-4">
|
||||
<span className="text-4xl font-bold">{tier.price}</span>
|
||||
{tier.price !== "Free" && (
|
||||
<span className="text-muted-foreground">/month</span>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 space-y-4">
|
||||
<ul className="space-y-3">
|
||||
{tier.features.map((feature, index) => (
|
||||
<li key={index} className="flex items-start gap-3">
|
||||
<Check className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
|
||||
<span className="text-sm">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/auth" className="block pt-4">
|
||||
<Button
|
||||
className="w-full"
|
||||
variant={tier.highlighted ? "default" : "outline"}
|
||||
>
|
||||
{tier.price === "Free" ? "Start Free" : "Get Started"}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
import { Sparkles } from "lucide-react";
|
||||
import { homepage } from "@/marketing/content/homepage";
|
||||
|
||||
export function Transformation() {
|
||||
return (
|
||||
<section className="w-full py-16 md:py-24 bg-muted/30">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="mx-auto max-w-[900px] space-y-12">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
|
||||
{homepage.transformation.title}
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">
|
||||
{homepage.transformation.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 pt-8">
|
||||
{homepage.transformation.outcomes.map((outcome, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-4 rounded-lg border bg-background p-6 shadow-sm"
|
||||
>
|
||||
<div className="mt-1 rounded-full bg-primary p-2 text-primary-foreground">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
</div>
|
||||
<p className="text-lg leading-relaxed font-medium">{outcome}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import { Check } from "lucide-react";
|
||||
import { homepage } from "@/marketing/content/homepage";
|
||||
|
||||
export function WhoItsFor() {
|
||||
return (
|
||||
<section id="who-its-for" className="w-full py-16 md:py-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="mx-auto max-w-[900px] space-y-12">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
|
||||
{homepage.whoItsFor.title}
|
||||
</h2>
|
||||
<p className="text-2xl font-semibold text-muted-foreground md:text-3xl">
|
||||
{homepage.whoItsFor.subtitle}
|
||||
</p>
|
||||
<p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">
|
||||
{homepage.whoItsFor.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 pt-8">
|
||||
{homepage.whoItsFor.traits.map((trait, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-4 rounded-lg border bg-card p-6 transition-all hover:border-primary/50"
|
||||
>
|
||||
<div className="rounded-full bg-primary/10 p-2 mt-1">
|
||||
<Check className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<p className="text-lg leading-relaxed">{trait}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user