initial proyect
This commit is contained in:
Miguel Ortega committed
commit
509272a643
31 files changed
+7170
No files matched your search
@@ -0,0 +1,148 @@
|
||||
import { useState } from 'react';
|
||||
import { FiDollarSign, FiUsers, FiCheckCircle } from 'react-icons/fi';
|
||||
|
||||
interface SellerCalculatorProps {
|
||||
onStartCourse: () => void;
|
||||
}
|
||||
|
||||
export const SellerCalculator: React.FC<SellerCalculatorProps> = ({ onStartCourse }) => {
|
||||
const [coursePrice, setCoursePrice] = useState<number>(29);
|
||||
const [monthlyStudents, setMonthlyStudents] = useState<number>(150);
|
||||
|
||||
const instructorRevenueShare = 0.90; // 90% revenue
|
||||
const monthlyRevenue = coursePrice * monthlyStudents * instructorRevenueShare;
|
||||
const annualRevenue = monthlyRevenue * 12;
|
||||
|
||||
return (
|
||||
<section id="seller-calculator" className="py-16 bg-slate-950/90 border-b border-slate-800/80">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className="text-center max-w-3xl mx-auto mb-12 space-y-3">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-violet-400 bg-violet-500/10 px-3 py-1 rounded-full border border-violet-500/20">
|
||||
Simulador Interactivo
|
||||
</span>
|
||||
<h2 className="text-2xl sm:text-4xl font-extrabold text-white">
|
||||
Calcula tu potencial de ingresos como instructor
|
||||
</h2>
|
||||
<p className="text-sm text-slate-400">
|
||||
Ajusta el precio de tu curso y la cantidad de alumnos estimados al mes para ver cuánto podrías ganar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center bg-slate-900/60 border border-slate-800 rounded-3xl p-6 sm:p-10 shadow-2xl backdrop-blur-sm">
|
||||
|
||||
{/* Controls column */}
|
||||
<div className="lg:col-span-6 space-y-8">
|
||||
|
||||
{/* Price Slider */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<FiDollarSign className="text-violet-400 text-base" /> Precio por curso
|
||||
</label>
|
||||
<span className="text-xl font-black text-cyan-400 font-mono">
|
||||
${coursePrice} USD
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="9"
|
||||
max="199"
|
||||
step="5"
|
||||
value={coursePrice}
|
||||
onChange={(e) => setCoursePrice(Number(e.target.value))}
|
||||
className="w-full h-2.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-violet-500"
|
||||
/>
|
||||
<div className="flex justify-between text-[11px] text-slate-500 font-mono">
|
||||
<span>$9 (Básico)</span>
|
||||
<span>$99 (Especialización)</span>
|
||||
<span>$199 (Master/Bootcamp)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Students Slider */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<FiUsers className="text-violet-400 text-base" /> Alumnos nuevos por mes
|
||||
</label>
|
||||
<span className="text-xl font-black text-violet-400 font-mono">
|
||||
{monthlyStudents} alumnos
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="10"
|
||||
max="1000"
|
||||
step="10"
|
||||
value={monthlyStudents}
|
||||
onChange={(e) => setMonthlyStudents(Number(e.target.value))}
|
||||
className="w-full h-2.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-violet-500"
|
||||
/>
|
||||
<div className="flex justify-between text-[11px] text-slate-500 font-mono">
|
||||
<span>10 alumnos</span>
|
||||
<span>500 alumnos</span>
|
||||
<span>1,000+ alumnos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features checkmarks */}
|
||||
<div className="space-y-2 pt-2 text-xs text-slate-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<FiCheckCircle className="text-emerald-400" /> Cobras el 90% del valor de cada venta
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FiCheckCircle className="text-emerald-400" /> Sin cuotas mensuales ni cobros por alojamiento de video
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<FiCheckCircle className="text-emerald-400" /> Tus derechos de autor y propiedad intelectual 100% protegidos
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Results Display Column */}
|
||||
<div className="lg:col-span-6 bg-gradient-to-br from-violet-950/60 to-slate-950 p-8 rounded-2xl border border-violet-500/30 text-center space-y-6 shadow-xl">
|
||||
|
||||
<span className="text-xs font-semibold text-violet-300 uppercase tracking-wider">
|
||||
Ingresos Estimados Netos
|
||||
</span>
|
||||
|
||||
{/* Monthly Estimate */}
|
||||
<div>
|
||||
<div className="text-4xl sm:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-violet-400 via-purple-300 to-cyan-300 font-mono">
|
||||
${monthlyRevenue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-1 font-medium">al mes proyectado</p>
|
||||
</div>
|
||||
|
||||
{/* Annual Estimate */}
|
||||
<div className="p-4 rounded-xl bg-slate-900/80 border border-slate-800 flex items-center justify-around">
|
||||
<div>
|
||||
<span className="text-[11px] text-slate-400">Proyección Anual</span>
|
||||
<p className="text-xl font-bold text-white font-mono">
|
||||
${annualRevenue.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} USD
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-8 w-[1px] bg-slate-800" />
|
||||
<div>
|
||||
<span className="text-[11px] text-slate-400">Comisión RyCourses</span>
|
||||
<p className="text-xl font-bold text-emerald-400 font-mono">Solo 10%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onStartCourse}
|
||||
className="w-full py-3.5 bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-bold rounded-xl text-sm shadow-xl shadow-violet-600/30 transition-all hover:scale-[1.02] cursor-pointer"
|
||||
>
|
||||
Comenzar a Crear mi Curso Ahora
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user