201 lines
7.7 KiB
TypeScript
201 lines
7.7 KiB
TypeScript
"use client";
|
|
import { FiCheck, FiZap, FiAward, FiBriefcase, FiDollarSign, FiClock, FiUsers, FiShield } from "react-icons/fi";
|
|
import { useTheme } from "../../context/ThemeContext";
|
|
import { Button } from "../ui/Button";
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
const beneficios = [
|
|
{ icon: FiDollarSign, titulo: "0% de comisión", desc: "Tú te quedas el 100% de cada venta. Sin sorpresas." },
|
|
{ icon: FiClock, titulo: "Pagos semanales", desc: "Recibe tus ganancias directo a tu cuenta cada semana." },
|
|
{ icon: FiUsers, titulo: "Audiencia activa", desc: "Accede a miles de estudiantes listos para aprender." },
|
|
{ icon: FiShield, titulo: "Sin contratos", desc: "Cancela cuando quieras. Sin letra pequeña." },
|
|
];
|
|
|
|
const planes = [
|
|
{
|
|
id: "starter",
|
|
icon: FiZap,
|
|
nombre: "Starter",
|
|
precio: "Gratis",
|
|
subprecio: "para siempre",
|
|
descripcion: "Ideal para comenzar a compartir tu conocimiento.",
|
|
color: "text-slate-400",
|
|
highlight: false,
|
|
cta: "Comenzar gratis",
|
|
features: [
|
|
"Hasta 3 cursos publicados",
|
|
"Herramientas básicas de edición",
|
|
"Panel de estadísticas simple",
|
|
"Soporte por email",
|
|
"Certificados para estudiantes",
|
|
],
|
|
},
|
|
{
|
|
id: "pro",
|
|
icon: FiAward,
|
|
nombre: "Pro",
|
|
precio: "$49",
|
|
subprecio: "/ mes",
|
|
descripcion: "Para instructores que quieren crecer y monetizar.",
|
|
color: "text-violet-400",
|
|
highlight: true,
|
|
cta: "Empezar con Pro",
|
|
features: [
|
|
"Cursos ilimitados",
|
|
"Analytics avanzado y reportes",
|
|
"Cupones y descuentos",
|
|
"Página de instructor personalizada",
|
|
"Soporte prioritario 24/7",
|
|
"Acceso a comunidad privada",
|
|
],
|
|
},
|
|
{
|
|
id: "business",
|
|
icon: FiBriefcase,
|
|
nombre: "Business",
|
|
precio: "$89",
|
|
subprecio: "/ mes",
|
|
descripcion: "Para academias y equipos de contenido educativo.",
|
|
color: "text-sky-400",
|
|
highlight: false,
|
|
cta: "Contactar ventas",
|
|
features: [
|
|
"Todo lo de Pro",
|
|
"Múltiples instructores",
|
|
"White-label y dominio propio",
|
|
"Integraciones con tu CRM",
|
|
"Gestor de cuenta dedicado",
|
|
"Contrato personalizado",
|
|
],
|
|
},
|
|
];
|
|
|
|
export const PlanesSection: React.FC = () => {
|
|
const { isDark } = useTheme();
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<section className="py-20">
|
|
<div className="text-center mb-14 space-y-3">
|
|
<span className={`inline-block text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full border ${
|
|
isDark ? "text-violet-400 bg-violet-500/10 border-violet-500/20" : "text-violet-600 bg-violet-50 border-violet-200"
|
|
}`}>
|
|
Para instructores
|
|
</span>
|
|
<h2 className={`text-2xl sm:text-3xl font-extrabold ${isDark ? "text-white" : "text-slate-900"}`}>
|
|
Elige el plan que se adapta a ti
|
|
</h2>
|
|
<p className={`text-sm max-w-md mx-auto ${isDark ? "text-slate-400" : "text-slate-500"}`}>
|
|
Comienza gratis y escala cuando estés listo. Sin contratos forzosos.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Beneficios */}
|
|
<div className={`grid grid-cols-2 md:grid-cols-4 gap-4 mb-12 p-6 rounded-2xl border ${
|
|
isDark ? "bg-slate-900/40 border-slate-800" : "bg-slate-50 border-slate-200"
|
|
}`}>
|
|
{beneficios.map(({ icon: Icon, titulo, desc }) => (
|
|
<div key={titulo} className="flex items-start gap-3">
|
|
<div className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${
|
|
isDark ? "bg-violet-500/15" : "bg-violet-100"
|
|
}`}>
|
|
<Icon className={`text-sm ${isDark ? "text-violet-400" : "text-violet-600"}`} />
|
|
</div>
|
|
<div>
|
|
<p className={`text-sm font-bold ${isDark ? "text-white" : "text-slate-900"}`}>{titulo}</p>
|
|
<p className={`text-xs leading-relaxed ${isDark ? "text-slate-400" : "text-slate-500"}`}>{desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-5 items-start">
|
|
{planes.map((plan) => {
|
|
const Icon = plan.icon;
|
|
return (
|
|
<div
|
|
key={plan.id}
|
|
className={`relative flex flex-col rounded-2xl border p-7 transition-all duration-200 ${
|
|
plan.highlight
|
|
? isDark
|
|
? "bg-violet-950/60 border-violet-700/60 shadow-xl shadow-violet-900/30"
|
|
: "bg-violet-600 border-violet-500 shadow-xl shadow-violet-600/25"
|
|
: isDark
|
|
? "bg-slate-900/60 border-slate-800 hover:border-slate-700"
|
|
: "bg-white border-slate-200 hover:border-slate-300 shadow-sm"
|
|
}`}
|
|
>
|
|
{plan.highlight && (
|
|
<span className={`absolute -top-3 left-1/2 -translate-x-1/2 text-[11px] font-black uppercase tracking-widest px-3 py-1 rounded-full ${
|
|
isDark ? "bg-violet-500 text-white" : "bg-white text-violet-700"
|
|
}`}>
|
|
Más popular
|
|
</span>
|
|
)}
|
|
|
|
<div className="mb-6">
|
|
<div className={`w-10 h-10 rounded-xl flex items-center justify-center mb-4 ${
|
|
plan.highlight
|
|
? isDark ? "bg-violet-500/20" : "bg-white/20"
|
|
: isDark ? "bg-slate-800" : "bg-slate-100"
|
|
}`}>
|
|
<Icon className={`text-lg ${plan.highlight ? (isDark ? "text-violet-300" : "text-white") : plan.color}`} />
|
|
</div>
|
|
<h3 className={`text-lg font-bold mb-1 ${
|
|
plan.highlight ? (isDark ? "text-white" : "text-white") : isDark ? "text-white" : "text-slate-900"
|
|
}`}>
|
|
{plan.nombre}
|
|
</h3>
|
|
<p className={`text-xs leading-relaxed ${
|
|
plan.highlight ? (isDark ? "text-violet-300" : "text-violet-100") : isDark ? "text-slate-400" : "text-slate-500"
|
|
}`}>
|
|
{plan.descripcion}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-7">
|
|
<div className="flex items-baseline gap-1">
|
|
<span className={`text-4xl font-black ${
|
|
plan.highlight ? (isDark ? "text-white" : "text-white") : isDark ? "text-white" : "text-slate-900"
|
|
}`}>
|
|
{plan.precio}
|
|
</span>
|
|
<span className={`text-sm ${
|
|
plan.highlight ? (isDark ? "text-violet-300" : "text-violet-100") : isDark ? "text-slate-500" : "text-slate-400"
|
|
}`}>
|
|
{plan.subprecio}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="space-y-3 mb-8 flex-1">
|
|
{plan.features.map((f) => (
|
|
<li key={f} className="flex items-start gap-2.5">
|
|
<FiCheck className={`text-sm mt-0.5 shrink-0 ${
|
|
plan.highlight ? (isDark ? "text-violet-400" : "text-white") : isDark ? "text-violet-400" : "text-violet-600"
|
|
}`} />
|
|
<span className={`text-sm ${
|
|
plan.highlight ? (isDark ? "text-slate-300" : "text-violet-50") : isDark ? "text-slate-300" : "text-slate-600"
|
|
}`}>
|
|
{f}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Button
|
|
variant={plan.highlight ? (isDark ? "violet" : "outline") : "outline"}
|
|
size="md"
|
|
onClick={() => router.push("/login")}
|
|
className="w-full justify-center"
|
|
>
|
|
{plan.cta}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|