338 lines
11 KiB
TypeScript
338 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useRef } from "react";
|
||
import { ScrollReveal } from "@/components/ScrollReveal";
|
||
import { SectionScrollTitle } from "@/components/SectionScrollTitle";
|
||
import { SignInButton } from "@/components/SignInButton";
|
||
import { getVideoAttributionText } from "@/lib/branding";
|
||
import { SALES_EMAIL } from "@/lib/plans";
|
||
|
||
const FEATURE_LABELS = [
|
||
"Infrastructure",
|
||
"Limit",
|
||
"Batch mode",
|
||
"Bulk image matching",
|
||
"File type",
|
||
"Playlists",
|
||
"API support",
|
||
"ID3 tags",
|
||
"Support",
|
||
"Watermark",
|
||
] as const;
|
||
|
||
type PlanFeatures = Record<(typeof FEATURE_LABELS)[number], string>;
|
||
|
||
type InfrastructureChip = "cloud" | "self-hosted";
|
||
|
||
type PlanConfig = {
|
||
name: string;
|
||
badge: string;
|
||
price: string;
|
||
priceNote: string;
|
||
features: PlanFeatures;
|
||
infrastructureChips: InfrastructureChip[];
|
||
watermarkNote?: string;
|
||
cta:
|
||
| { type: "signin" }
|
||
| { type: "link"; label: string; href: string }
|
||
| { type: "disabled"; label: string }
|
||
| { type: "mailto"; label: string; email: string; subject: string };
|
||
highlighted: boolean;
|
||
hover: string;
|
||
accent: string;
|
||
badgeClass: string;
|
||
ctaClass?: string;
|
||
};
|
||
|
||
const PLANS: PlanConfig[] = [
|
||
{
|
||
name: "Bedroom Producer",
|
||
badge: "Free",
|
||
price: "€0",
|
||
priceNote: "/ forever",
|
||
features: {
|
||
Infrastructure: "Cloud",
|
||
Limit: "10 videos* / month · 720p · buy 1–15 extras (€0.25 each)",
|
||
"Batch mode": "Limited batch · up to 3 files",
|
||
"Bulk image matching": "1 static image only",
|
||
"File type": "MP3",
|
||
Playlists: "Not included",
|
||
"API support": "Not included",
|
||
"ID3 tags": "Auto-fill title & metadata from MP3 tags",
|
||
Support: "Community",
|
||
Watermark: "2 clean videos, then Songs2VID badge · bottom-right",
|
||
},
|
||
infrastructureChips: ["cloud"],
|
||
watermarkNote:
|
||
`First 2 successful Free renders are watermark-free; later Free renders include the "${getVideoAttributionText()}" badge (bottom-right). Upgrade to Pro for unwatermarked videos.`,
|
||
cta: { type: "signin" },
|
||
highlighted: false,
|
||
hover:
|
||
"hover:border-red-500/40 hover:bg-red-500/[0.04] hover:shadow-lg hover:shadow-red-500/15",
|
||
accent: "text-red-400",
|
||
badgeClass: "bg-gray-800 text-gray-400",
|
||
},
|
||
{
|
||
name: "Independent Artist",
|
||
badge: "Pro",
|
||
price: "€5",
|
||
priceNote: "/ mo",
|
||
features: {
|
||
Infrastructure: "Cloud",
|
||
Limit: "50 videos / month · 1080p",
|
||
"Batch mode": "Full batch · up to 5 files",
|
||
"Bulk image matching": "Unique image per track (PRO)",
|
||
"File type": "MP3 / WAV / FLAC",
|
||
Playlists: "Create & add uploads to YouTube playlists",
|
||
"API support": "REST API · upload, batch & playlists",
|
||
"ID3 tags": "Extended metadata support",
|
||
Support: "E-Mail",
|
||
Watermark: "Custom text/logo/fonts · art-track layouts + blur (PRO)",
|
||
},
|
||
infrastructureChips: ["cloud"],
|
||
cta: { type: "link", label: "Upgrade to Pro", href: "/dashboard/settings" },
|
||
highlighted: true,
|
||
hover:
|
||
"hover:border-accent/50 hover:bg-accent/[0.06] hover:shadow-lg hover:shadow-accent/20",
|
||
accent: "text-accent",
|
||
badgeClass: "bg-accent/15 text-accent",
|
||
},
|
||
{
|
||
name: "Record Label / Studio",
|
||
badge: "Enterprise",
|
||
price: "Custom",
|
||
priceNote: "/ contact sales",
|
||
features: {
|
||
Infrastructure: "Cloud or self-hosted",
|
||
Limit: "Unlimited 4K · zero limit",
|
||
"Batch mode": "Unlimited synchronized batch processing",
|
||
"Bulk image matching": "Unique image per track",
|
||
"File type": "WAV / FLAC / lossless",
|
||
Playlists: "Org-wide playlist workflows",
|
||
"API support": "Full API access · custom integrations & SLAs",
|
||
"ID3 tags": "Full metadata · custom mapping",
|
||
Support: "Top-priority**",
|
||
Watermark: "Custom branding · position studio",
|
||
},
|
||
infrastructureChips: ["cloud", "self-hosted"],
|
||
cta: {
|
||
type: "mailto",
|
||
label: "Contact Sales",
|
||
email: SALES_EMAIL,
|
||
subject: "Songs2VID Enterprise Inquiry",
|
||
},
|
||
highlighted: false,
|
||
hover:
|
||
"hover:border-[#609926]/45 hover:bg-[#609926]/[0.06] hover:shadow-lg hover:shadow-[#609926]/20",
|
||
accent: "text-[#609926]",
|
||
badgeClass: "bg-[#609926]/15 text-[#609926]",
|
||
ctaClass:
|
||
"border-[#609926]/40 bg-[#609926]/10 text-[#609926] hover:border-[#609926]/60 hover:bg-[#609926]/20",
|
||
},
|
||
];
|
||
|
||
function FeatureValue({ value }: { value: string }) {
|
||
return <span className="text-sm text-gray-200">{value}</span>;
|
||
}
|
||
|
||
function CloudIcon({ className }: { className?: string }) {
|
||
return (
|
||
<svg
|
||
className={className}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="1.5"
|
||
aria-hidden="true"
|
||
>
|
||
<path
|
||
d="M7.5 18.5h9.75a4.25 4.25 0 0 0 .55-8.46A5.75 5.75 0 0 0 6.9 8.8 4.5 4.5 0 0 0 7.5 18.5Z"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function ServerIcon({ className }: { className?: string }) {
|
||
return (
|
||
<svg
|
||
className={className}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="1.5"
|
||
aria-hidden="true"
|
||
>
|
||
<rect x="4" y="5" width="16" height="6" rx="2" />
|
||
<rect x="4" y="13" width="16" height="6" rx="2" />
|
||
<path d="M7.5 8h.01M7.5 16h.01" strokeLinecap="round" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function InfrastructureChips({
|
||
chips,
|
||
}: {
|
||
chips: InfrastructureChip[];
|
||
}) {
|
||
return (
|
||
<div className="mt-2 flex flex-wrap items-center gap-2">
|
||
{chips.includes("cloud") && (
|
||
<span className="inline-flex items-center gap-2 rounded-lg border border-gray-700/60 bg-surface-dark/40 px-3 py-2 text-sm text-gray-200">
|
||
<CloudIcon className="h-4 w-4 text-gray-300" />
|
||
Cloud
|
||
</span>
|
||
)}
|
||
{chips.includes("self-hosted") && (
|
||
<span className="inline-flex items-center gap-2 rounded-lg border border-gray-700/60 bg-surface-dark/40 px-3 py-2 text-sm text-gray-200">
|
||
<ServerIcon className="h-4 w-4 text-gray-300" />
|
||
Self-hosted
|
||
</span>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PricingCard({ plan }: { plan: PlanConfig }) {
|
||
const {
|
||
name,
|
||
badge,
|
||
price,
|
||
priceNote,
|
||
features,
|
||
watermarkNote,
|
||
infrastructureChips,
|
||
cta,
|
||
highlighted,
|
||
hover,
|
||
accent,
|
||
badgeClass,
|
||
ctaClass,
|
||
} = plan;
|
||
|
||
return (
|
||
<div
|
||
className={`group relative flex h-full flex-col rounded-2xl border bg-surface p-6 transition-all duration-300 sm:p-7 ${
|
||
highlighted
|
||
? "border-accent/40 shadow-[0_0_32px_rgba(74,158,255,0.12)]"
|
||
: "border-gray-700/50"
|
||
} ${hover}`}
|
||
>
|
||
{highlighted && (
|
||
<span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-accent px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-white">
|
||
Most popular
|
||
</span>
|
||
)}
|
||
|
||
<div className="mb-6">
|
||
<div className="mb-3 flex items-start justify-between gap-3">
|
||
<h3 className="text-lg font-semibold text-white">{name}</h3>
|
||
<span
|
||
className={`shrink-0 rounded px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider ${badgeClass}`}
|
||
>
|
||
{badge}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex items-end gap-1">
|
||
<span className={`text-4xl font-bold ${accent}`}>{price}</span>
|
||
<span className="mb-1 text-sm text-gray-500">{priceNote}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<ul className="mb-6 flex-1 space-y-4 border-t border-gray-700/50 pt-6">
|
||
{FEATURE_LABELS.map((label) => (
|
||
<li key={label}>
|
||
<p className="text-xs font-medium uppercase tracking-wider text-gray-500">{label}</p>
|
||
{label === "Infrastructure" ? (
|
||
<InfrastructureChips chips={infrastructureChips} />
|
||
) : (
|
||
<FeatureValue value={features[label]} />
|
||
)}
|
||
{label === "Watermark" && watermarkNote && (
|
||
<p className="mt-1.5 rounded-lg border border-gray-700/60 bg-surface-dark/80 px-3 py-2 text-xs leading-relaxed text-gray-400">
|
||
{watermarkNote}
|
||
</p>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<div className="mt-auto">
|
||
{cta.type === "signin" && <SignInButton fullWidth />}
|
||
{cta.type === "link" && (
|
||
<Link
|
||
href={cta.href}
|
||
className={`inline-flex w-full items-center justify-center rounded border px-4 py-3 text-sm font-medium transition-all duration-300 ${ctaClass ?? "border-gray-600 text-white hover:border-gray-400"}`}
|
||
>
|
||
{cta.label}
|
||
</Link>
|
||
)}
|
||
{cta.type === "disabled" && (
|
||
<button
|
||
type="button"
|
||
disabled
|
||
className="w-full cursor-not-allowed rounded border border-gray-700 bg-surface-light px-4 py-3 text-sm font-medium text-gray-500"
|
||
>
|
||
{cta.label}
|
||
</button>
|
||
)}
|
||
{cta.type === "mailto" && (
|
||
<a
|
||
href={`mailto:${cta.email}?subject=${encodeURIComponent(cta.subject)}`}
|
||
className={`inline-flex w-full items-center justify-center rounded border px-4 py-3 text-sm font-medium transition-all duration-300 ${ctaClass ?? ""}`}
|
||
>
|
||
{cta.label}
|
||
</a>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function PricingSection() {
|
||
const sectionRef = useRef<HTMLElement>(null);
|
||
|
||
return (
|
||
<section
|
||
ref={sectionRef}
|
||
id="pricing"
|
||
className="relative scroll-mt-24 overflow-x-visible overflow-y-hidden px-6 py-24"
|
||
>
|
||
<SectionScrollTitle sectionRef={sectionRef} title="Pricing" />
|
||
|
||
<div className="relative z-10 mx-auto max-w-7xl">
|
||
<ScrollReveal>
|
||
<h2 className="mb-4 text-center text-3xl font-bold text-white">Pricing</h2>
|
||
<p className="mx-auto mb-10 max-w-2xl text-center text-gray-400">
|
||
Free with optional extras, Pro at €5/month, or Enterprise for studios.
|
||
</p>
|
||
</ScrollReveal>
|
||
|
||
<div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3 xl:gap-6">
|
||
{PLANS.map((plan, index) => (
|
||
<ScrollReveal key={plan.name} delay={index * 100}>
|
||
<PricingCard plan={plan} />
|
||
</ScrollReveal>
|
||
))}
|
||
</div>
|
||
|
||
<ScrollReveal delay={360}>
|
||
<p className="mx-auto mt-10 max-w-2xl text-center text-xs text-gray-500">
|
||
*Free includes 10 videos/month; buy 1–15 extras at €0.25 each (max 15 extras). After both
|
||
are used, Pro (€5/mo · 50 videos) is required. Total balance capped at 30. Deduction
|
||
order: monthly first, then extras. Free also includes 2 lifetime watermark-free
|
||
successful videos; later Free renders include a Songs2VID watermark unless you upgrade.
|
||
</p>
|
||
<p className="mx-auto mt-4 max-w-2xl text-center text-xs text-gray-500">
|
||
**Technical support is strictly reserved for Managed Cloud and paid Professional Setup
|
||
agreements; independent self-hosted deployments are community-supported.
|
||
</p>
|
||
</ScrollReveal>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|