199 lines
11 KiB
TypeScript
199 lines
11 KiB
TypeScript
import React from 'react';
|
|
import { FiArrowRight, FiPlay, FiStar, FiUsers, FiAward, FiCheckCircle } from 'react-icons/fi';
|
|
import { FaGraduationCap } from 'react-icons/fa';
|
|
|
|
interface HeroSectionProps {
|
|
onExploreClick: () => void;
|
|
onOpenPreview: (courseId: string) => void;
|
|
}
|
|
|
|
export const HeroSection: React.FC<HeroSectionProps> = ({ onExploreClick, onOpenPreview }) => {
|
|
return (
|
|
<div className="relative overflow-hidden bg-slate-950 pt-10 pb-16 lg:pt-16 lg:pb-24 border-b border-slate-800/60">
|
|
|
|
{/* Background glow effects */}
|
|
<div className="absolute -top-40 -left-40 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="absolute top-1/3 -right-40 w-96 h-96 bg-cyan-500/15 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="absolute -bottom-20 left-1/3 w-80 h-80 bg-indigo-600/15 rounded-full blur-3xl pointer-events-none" />
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
|
|
|
{/* Left Column: Copy & CTAs */}
|
|
<div className="lg:col-span-7 space-y-6 text-center lg:text-left">
|
|
|
|
{/* Promo Pill */}
|
|
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-500/15 to-cyan-500/15 border border-cyan-500/30 text-cyan-300">
|
|
<span className="flex h-2 w-2 rounded-full bg-cyan-400 animate-ping" />
|
|
<FaGraduationCap className="text-cyan-400 text-sm" />
|
|
<span>Nuevos cursos actualizados para 2026</span>
|
|
</div>
|
|
|
|
{/* Main Headline */}
|
|
<h1 className="text-3xl sm:text-5xl lg:text-6xl font-black text-white tracking-tight leading-[1.15]">
|
|
Aprende las habilidades{' '}
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-teal-300">
|
|
más demandadas
|
|
</span>{' '}
|
|
con expertos reales.
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="text-base sm:text-lg text-slate-300 max-w-2xl mx-auto lg:mx-0 font-normal leading-relaxed">
|
|
Cursos prácticos basados en proyectos reales. Desde <span className="text-cyan-300 font-medium">Desarrollo Web y Apps</span> hasta <span className="text-cyan-300 font-medium">Inteligencia Artificial y Ciberseguridad</span>. Aprende a tu propio ritmo y obtén certificaciones verificadas.
|
|
</p>
|
|
|
|
{/* Actions & Buttons */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-2">
|
|
<button
|
|
onClick={onExploreClick}
|
|
className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 via-cyan-600 to-teal-500 hover:from-blue-500 hover:to-cyan-400 text-white font-bold rounded-xl text-base shadow-xl shadow-cyan-500/25 hover:shadow-cyan-500/40 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-2"
|
|
>
|
|
<span>Explorar Catálogo</span>
|
|
<FiArrowRight className="text-lg" />
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => onOpenPreview('course-1')}
|
|
className="w-full sm:w-auto px-6 py-4 bg-slate-900/80 hover:bg-slate-800 text-slate-200 hover:text-white font-semibold rounded-xl text-base border border-slate-700 hover:border-slate-600 transition-all flex items-center justify-center gap-2"
|
|
>
|
|
<div className="w-6 h-6 rounded-full bg-cyan-500/20 text-cyan-400 flex items-center justify-center text-xs">
|
|
<FiPlay className="ml-0.5" />
|
|
</div>
|
|
<span>Ver Clase Muestra Gratis</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Trust checkmarks */}
|
|
<div className="pt-3 flex flex-wrap items-center justify-center lg:justify-start gap-x-6 gap-y-2 text-xs text-slate-400">
|
|
<span className="flex items-center gap-1.5">
|
|
<FiCheckCircle className="text-emerald-400" /> Acceso de por vida
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<FiCheckCircle className="text-emerald-400" /> Garantía de reembolso 30 días
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<FiCheckCircle className="text-emerald-400" /> Certificado de finalización
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Hero Visual Card */}
|
|
<div className="lg:col-span-5 relative">
|
|
<div className="relative mx-auto max-w-md lg:max-w-none">
|
|
|
|
{/* Main Course Highlight Card */}
|
|
<div className="rounded-2xl bg-gradient-to-b from-slate-800/80 to-slate-900/90 border border-slate-700/80 p-5 shadow-2xl backdrop-blur-md relative overflow-hidden group">
|
|
|
|
{/* Thumbnail image */}
|
|
<div className="relative rounded-xl overflow-hidden aspect-video mb-4 bg-slate-800">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800&auto=format&fit=crop&q=80"
|
|
alt="React 19 Preview"
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-slate-950/20 to-transparent" />
|
|
|
|
{/* Play badge */}
|
|
<button
|
|
onClick={() => onOpenPreview('course-1')}
|
|
className="absolute inset-0 m-auto w-14 h-14 rounded-full bg-gradient-to-r from-blue-600 to-cyan-500 text-white flex items-center justify-center shadow-lg shadow-cyan-500/50 hover:scale-110 active:scale-95 transition-transform"
|
|
aria-label="Reproducir video"
|
|
>
|
|
<FiPlay className="text-xl ml-1" />
|
|
</button>
|
|
|
|
<span className="absolute top-3 left-3 bg-amber-500/90 text-slate-950 text-[11px] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow">
|
|
🔥 Curso Más Vendido
|
|
</span>
|
|
|
|
<span className="absolute bottom-3 right-3 bg-slate-950/80 backdrop-blur-md text-white text-xs px-2 py-0.5 rounded font-mono">
|
|
38h 45m
|
|
</span>
|
|
</div>
|
|
|
|
{/* Course Meta in card */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between text-xs text-slate-400">
|
|
<span className="font-semibold text-cyan-400">Desarrollo Web & Next.js</span>
|
|
<div className="flex items-center gap-1 text-amber-400">
|
|
<FiStar className="fill-amber-400" />
|
|
<span className="font-bold text-white">4.9</span>
|
|
<span>(1.4k reseñas)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-bold text-white leading-snug">
|
|
Master en React 19, Next.js 15 y TypeScript Profesional
|
|
</h3>
|
|
|
|
<div className="flex items-center justify-between pt-2 border-t border-slate-800">
|
|
<div className="flex items-center gap-2">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80"
|
|
alt="Instructor"
|
|
className="w-7 h-7 rounded-full object-cover ring-1 ring-cyan-400/50"
|
|
/>
|
|
<span className="text-xs text-slate-300 font-medium">Ing. Carlos Mendoza</span>
|
|
</div>
|
|
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-xs text-slate-500 line-through font-mono">$89.99</span>
|
|
<span className="text-xl font-black text-emerald-400 font-mono">$24.99</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Stat Badge: Students Active */}
|
|
<div className="absolute -bottom-6 -left-6 bg-slate-900/90 border border-slate-700/80 rounded-xl p-3.5 shadow-2xl backdrop-blur-md flex items-center gap-3 hidden sm:flex animate-bounce duration-1000">
|
|
<div className="w-10 h-10 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center text-lg">
|
|
<FiUsers />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-bold text-white">50,000+ Estudiantes</p>
|
|
<p className="text-[11px] text-slate-400">Aprendiendo activamente</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Stat Badge: Top Rated */}
|
|
<div className="absolute -top-6 -right-6 bg-slate-900/90 border border-slate-700/80 rounded-xl p-3.5 shadow-2xl backdrop-blur-md flex items-center gap-3 hidden sm:flex">
|
|
<div className="w-10 h-10 rounded-lg bg-amber-500/20 text-amber-400 flex items-center justify-center text-lg">
|
|
<FiAward />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-bold text-white">Calidad Top 1%</p>
|
|
<p className="text-[11px] text-slate-400">Instructores validados</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Bottom stats banner */}
|
|
<div className="mt-16 pt-10 border-t border-slate-800/80 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
|
|
<div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800/60">
|
|
<div className="text-2xl sm:text-3xl font-black text-white font-mono">1,200+</div>
|
|
<div className="text-xs text-slate-400 mt-1">Cursos en Alta Definición</div>
|
|
</div>
|
|
<div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800/60">
|
|
<div className="text-2xl sm:text-3xl font-black text-cyan-400 font-mono">50,000+</div>
|
|
<div className="text-xs text-slate-400 mt-1">Alumnos Graduados</div>
|
|
</div>
|
|
<div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800/60">
|
|
<div className="text-2xl sm:text-3xl font-black text-amber-400 font-mono">4.9 / 5.0</div>
|
|
<div className="text-xs text-slate-400 mt-1">Puntuación Media</div>
|
|
</div>
|
|
<div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800/60">
|
|
<div className="text-2xl sm:text-3xl font-black text-emerald-400 font-mono">98%</div>
|
|
<div className="text-xs text-slate-400 mt-1">Tasa de Contratación</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|