fixes and architecture
This commit is contained in:
Emmanuel Rojas committed
1 parent
ce98f270d5
commit
dd43fa04c1
104 files changed
+7098
-5198
No files matched your search
@@ -0,0 +1,200 @@
|
||||
"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>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user