mawkone
eb198e2d4d
Ships accumulated WIP that was sitting uncommitted: - New (home) dashboard route pages: overview, code, data/tables, hosting, infrastructure, services, domains, integrations, agents, analytics, api, automations, billing, logs, market, marketing(+seo/social), product, security, storage, users, settings(app/auth). - dashboard-sidebar, project-icon-rail, chat-panel updates; mcp + anatomy route changes; package.json/lock dependency bumps. - Coolify log tooling (scripts/fetch-app-logs.mjs + fetch-app-logs-ssh.mjs) and ai-new-thread.md "Fetching Production Logs" section. Excludes throwaway debug scripts and telemetry audit dumps (the latter contain live credentials and must not be committed).
67 lines
3.7 KiB
TypeScript
67 lines
3.7 KiB
TypeScript
import { Suspense } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
|
|
import { Loader2, CreditCard, ArrowRight, ShieldCheck, Zap } from "lucide-react";
|
|
|
|
export default async function BillingPage(props: { params: Promise<{ projectId: string }> }) {
|
|
const { projectId } = await props.params;
|
|
|
|
return (
|
|
<div style={{ padding: "40px 48px", maxWidth: 1000, margin: "0 auto", fontFamily: "var(--font-inter), sans-serif" }}>
|
|
<div style={{ marginBottom: 32 }}>
|
|
<h1 style={{ fontFamily: "var(--font-lora), serif", fontSize: "1.8rem", color: "#1a1a1a", marginBottom: 8 }}>
|
|
Payments & Billing
|
|
</h1>
|
|
<p style={{ color: "#6b6560", fontSize: "0.95rem" }}>
|
|
Connect your bank account to start charging customers for this project.
|
|
</p>
|
|
</div>
|
|
|
|
<div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "24px" }}>
|
|
|
|
{/* Onboarding Card */}
|
|
<Card style={{ border: "1px solid #6366f1", boxShadow: "0 4px 14px rgba(99, 102, 241, 0.08)" }}>
|
|
<CardHeader>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
|
|
<div style={{ background: "#e0e7ff", padding: 8, borderRadius: 8, color: "#4f46e5" }}>
|
|
<CreditCard style={{ width: 24, height: 24 }} />
|
|
</div>
|
|
<div>
|
|
<CardTitle style={{ fontSize: "1.2rem" }}>Accept Payments with Stripe</CardTitle>
|
|
<CardDescription>Setup takes 3 minutes. Vibn handles the code.</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div style={{ background: "#f8fafc", padding: 20, borderRadius: 8, marginBottom: 24 }}>
|
|
<h4 style={{ fontWeight: 600, fontSize: "0.9rem", color: "#111827", marginBottom: 12 }}>What you get immediately:</h4>
|
|
<ul style={{ display: "flex", flexDirection: "column", gap: 12, margin: 0, padding: 0, listStyle: "none" }}>
|
|
<li style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: "0.85rem", color: "#4b5563" }}>
|
|
<Zap style={{ width: 16, height: 16, color: "#eab308", flexShrink: 0 }} />
|
|
<span><strong>AI Auto-Wiring:</strong> The Vibn AI will automatically inject your secure Stripe keys into your live Coolify application.</span>
|
|
</li>
|
|
<li style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: "0.85rem", color: "#4b5563" }}>
|
|
<ShieldCheck style={{ width: 16, height: 16, color: "#22c55e", flexShrink: 0 }} />
|
|
<span><strong>Instant Compliance:</strong> Securely accept Apple Pay, Google Pay, and credit cards with PCI compliance handled automatically.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p style={{ fontSize: "0.85rem", color: "#6b7280", lineHeight: 1.5 }}>
|
|
By connecting, you agree to Stripe's Services Agreement. Vibn takes a small 1% platform fee on successful transactions to keep the AI platform running.
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter style={{ background: "#f9fafb", borderTop: "1px solid #f3f4f6", padding: "16px 24px" }}>
|
|
<button
|
|
className="bg-indigo-600 hover:bg-indigo-700 text-white transition-colors"
|
|
style={{ padding: "10px 20px", borderRadius: 6, fontSize: "0.9rem", fontWeight: 500, display: "flex", alignItems: "center", gap: 8 }}
|
|
>
|
|
Connect with Stripe <ArrowRight style={{ width: 16, height: 16 }} />
|
|
</button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|