EFC/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Precios

Browse Source
This commit is contained in:
Kevin Rosales
2025-08-08 12:17:23 -06:00
parent ecbcea4758
commit eab7390fa3
2 changed files with 34 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/Landing.jsx
View File

@@ -150,29 +150,31 @@ export default function Landing() {
{/* Estadísticas animadas */} {/* Estadísticas animadas */}
<div id="estadisticas" className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-20"> <div id="estadisticas" className="grid grid-cols-2 md:grid-cols-4 gap-8 mt-20">
{stats.map((stat, index) => ( {/*
<div {plans.map((plan, idx) => (
key={index} <div
className="text-center p-6 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 hover:bg-white/20 transition-all duration-300 transform hover:-translate-y-2" key={plan.name}
> className="bg-white bg-opacity-10 backdrop-blur-lg rounded-3xl shadow-lg p-8 w-full md:w-80 flex flex-col items-center border border-white border-opacity-20"
<div className="text-4xl mb-2">{stat.icon}</div> >
<div className="text-3xl font-bold text-white mb-1">{stat.number}</div> <h3 className="text-2xl font-bold mb-2 text-white drop-shadow-lg">{plan.name}</h3>
<div className="text-blue-200 text-sm">{stat.label}</div> <p className="mb-4 text-white text-opacity-80 text-center">{plan.description}</p>
<div className="mb-6">
<span className="text-4xl font-extrabold text-blue-300 drop-shadow-lg">
{plan.price}
</span>
<span className="ml-2 text-lg text-white text-opacity-70">{plan.period}</span>
</div> </div>
))} <ul className="mb-6 text-white text-opacity-80 text-left list-disc list-inside">
</div> {plan.features.map((feature, i) => (
</div> <li key={i}>{feature}</li>
))}
{/* Scroll indicator */} </ul>
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"> <button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full shadow-lg transition duration-300">
<button Comenzar
onClick={() => scrollToSection('caracteristicas')} </button>
className="text-white/70 hover:text-white transition-colors" </div>
> ))}
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> */}
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
</button>
</div> </div>
</section> </section>
@@ -392,7 +394,7 @@ export default function Landing() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Plan Básico */} {/* Plan Básico */}
<div className="bg-white rounded-lg shadow-md p-8 border border-gray-200"> <div className="bg-white rounded-lg shadow-md p-8 border border-gray-200">
{/* <div className="text-center"> <div className="text-center">
<h3 className="text-2xl font-semibold text-gray-900 mb-2">Básico</h3> <h3 className="text-2xl font-semibold text-gray-900 mb-2">Básico</h3>
<p className="text-gray-600 mb-4">Para agencias pequeñas</p> <p className="text-gray-600 mb-4">Para agencias pequeñas</p>
<div className="mb-6"> <div className="mb-6">
@@ -429,10 +431,10 @@ export default function Landing() {
Comenzar prueba gratuita Comenzar prueba gratuita
</button> </button>
</div> </div>
</div> */} </div>
{/* Plan Profesional */} {/* Plan Profesional */}
{/* <div className="bg-white rounded-lg shadow-xl p-8 border-2 border-indigo-500 relative"> <div className="bg-white rounded-lg shadow-xl p-8 border-2 border-indigo-500 relative">
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span className="bg-indigo-500 text-white px-4 py-1 rounded-full text-sm font-medium"> <span className="bg-indigo-500 text-white px-4 py-1 rounded-full text-sm font-medium">
Más Popular Más Popular
@@ -481,10 +483,10 @@ export default function Landing() {
Comenzar prueba gratuita Comenzar prueba gratuita
</button> </button>
</div> </div>
</div> */} </div>
{/* Plan Empresarial */} {/* Plan Empresarial */}
{/* <div className="bg-white rounded-lg shadow-md p-8 border border-gray-200"> <div className="bg-white rounded-lg shadow-md p-8 border border-gray-200">
<div className="text-center"> <div className="text-center">
<h3 className="text-2xl font-semibold text-gray-900 mb-2">Empresarial</h3> <h3 className="text-2xl font-semibold text-gray-900 mb-2">Empresarial</h3>
<p className="text-gray-600 mb-4">Para grandes corporaciones</p> <p className="text-gray-600 mb-4">Para grandes corporaciones</p>
@@ -530,7 +532,7 @@ export default function Landing() {
</div> </div>
</div> </div>
</div> </div>
</div> */} </div>
{/* Contacto Section */} {/* Contacto Section */}
<div id="contacto" className="mt-20 bg-white rounded-2xl shadow-lg p-8 md:p-12"> <div id="contacto" className="mt-20 bg-white rounded-2xl shadow-lg p-8 md:p-12">

6
src/pages/LandingAnimated.jsx
View File

@@ -601,7 +601,7 @@ export default function LandingAnimated() {
</section> </section>
{/* Precios */} {/* Precios */}
{/* <section id="precios" className="py-20 bg-white"> <section id="precios" className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div <div
data-animate="pricing-header" data-animate="pricing-header"
@@ -700,10 +700,12 @@ export default function LandingAnimated() {
<div className="text-center mb-8"> <div className="text-center mb-8">
<h3 className="text-2xl font-bold mb-2" style={{ color: '#333333' }}>{plan.name}</h3> <h3 className="text-2xl font-bold mb-2" style={{ color: '#333333' }}>{plan.name}</h3>
<p className="mb-4" style={{ color: '#7A7A7A' }}>{plan.description}</p> <p className="mb-4" style={{ color: '#7A7A7A' }}>{plan.description}</p>
{/*
<div className="mb-4"> <div className="mb-4">
<span className="text-4xl font-extrabold" style={{ color: '#1B2A41' }}>{plan.price}</span> <span className="text-4xl font-extrabold" style={{ color: '#1B2A41' }}>{plan.price}</span>
<span style={{ color: '#7A7A7A' }}>{plan.period}</span> <span style={{ color: '#7A7A7A' }}>{plan.period}</span>
</div> </div>
*/}
</div> </div>
<ul className="space-y-3 mb-8"> <ul className="space-y-3 mb-8">
@@ -731,7 +733,7 @@ export default function LandingAnimated() {
))} ))}
</div> </div>
</div> </div>
</section> */} </section>
{/* Contacto */} {/* Contacto */}
<section id="contacto" className="relative py-20 overflow-hidden" style={{ <section id="contacto" className="relative py-20 overflow-hidden" style={{