first commit
This commit is contained in:
@@ -0,0 +1,212 @@
|
||||
/* Modern SaaS Pricing Styles */
|
||||
|
||||
.heroSection {
|
||||
text-align: center;
|
||||
padding: 5rem 2rem 3rem;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
background: linear-gradient(135deg, var(--wine-darkest) 0%, var(--wine-red) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--gray-dark);
|
||||
margin-bottom: 3rem;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.btnGroup {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.primaryBtn {
|
||||
padding: 14px 32px;
|
||||
background: linear-gradient(135deg, var(--wine-red) 0%, var(--wine-dark) 100%);
|
||||
color: var(--white);
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 4px 15px rgba(255, 42, 127, 0.3);
|
||||
}
|
||||
|
||||
.primaryBtn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(255, 42, 127, 0.4);
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pricingSection {
|
||||
padding: 4rem 2rem;
|
||||
background: var(--white-dark);
|
||||
border-radius: 30px;
|
||||
margin: 2rem auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* All Plans Include Section */
|
||||
.featuresSection {
|
||||
padding: 4rem 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
border-top: 1px solid var(--white-darkest);
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
color: var(--wine-superdark);
|
||||
font-weight: 800;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.featuresGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.featureItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
|
||||
border: 1px solid var(--white-darkest);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.featureItem:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.featureIcon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: rgba(127, 42, 255, 0.1);
|
||||
color: var(--wine-darkest);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.featureTitle {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--wine-superdark);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.featureText {
|
||||
color: var(--gray-dark);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* FAQ Section */
|
||||
.faqSection {
|
||||
padding: 5rem 2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.faqItem {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--white-darkest);
|
||||
}
|
||||
|
||||
.faqQuestion {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--wine-superdark);
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.faqQuestion::before {
|
||||
content: "?";
|
||||
display: inline-block;
|
||||
background: var(--wine-darkest);
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.faqAnswer {
|
||||
color: var(--gray-dark);
|
||||
line-height: 1.6;
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
/* Bottom CTA */
|
||||
.ctaSection {
|
||||
background: linear-gradient(135deg, var(--wine-superdark) 0%, var(--wine-darkest) 100%);
|
||||
padding: 5rem 2rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
border-radius: 24px;
|
||||
margin: 0 2rem 5rem 2rem;
|
||||
box-shadow: 0 20px 40px rgba(51,0,128,0.3);
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ctaText {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
background: white;
|
||||
color: var(--wine-darkest);
|
||||
padding: 1rem 3rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.ctaButton:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 15px 25px rgba(0,0,0,0.2);
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import Pricing from "@components/PricingElement/PricingElement";
|
||||
import AnimatedContainer from "@core/app/components/AnimatedConainer/AnimatedContainer";
|
||||
import { IPlan } from "@core/Models/Plans.model";
|
||||
import style from "./page.module.css";
|
||||
import Link from "next/link";
|
||||
import HeaderConfProvider from "@core/app/components/HeaderConfProvider/HeaderConfProvider";
|
||||
import { ScrollToTop } from "@core/app/components/ScrollTop";
|
||||
import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";
|
||||
|
||||
export const dynamic = "force-dynamic"; // Fuerza la página a ser dinámica
|
||||
|
||||
const GetPlanData = async (): Promise<IPlan[]> => {
|
||||
try {
|
||||
const url = process.env.NEXT_PUBLIC_API_URL;
|
||||
const res = await fetch(`${url}plans/find`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({}),
|
||||
cache: "no-store",
|
||||
});
|
||||
const pricingList: IPlan[] = await res.json();
|
||||
|
||||
return pricingList;
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export default async function PricingPage() {
|
||||
const pricingList = await GetPlanData();
|
||||
|
||||
return (
|
||||
<AnimatedContainer
|
||||
color="#aeaeae"
|
||||
minSize={150}
|
||||
maxSize={500}
|
||||
items={10}
|
||||
style={{
|
||||
display: "block",
|
||||
width: "100%",
|
||||
background: "var(--white)",
|
||||
}}
|
||||
>
|
||||
<ScrollToTop />
|
||||
<HeaderConfProvider />
|
||||
<DefaultLoginAction />
|
||||
|
||||
<div className={style.heroSection}>
|
||||
<h1 className={style.heroTitle}>Elegí el plan perfecto para vos</h1>
|
||||
<p className={style.heroSubtitle}>
|
||||
Unite a las organizaciones que ya confían en TurnosXpress. Optimizá tu agenda, conecta con más personas y hace crecer tu negocio sin complicaciones. Transparente, sin comisiones ocultas y podés cancelar cuando quieras.
|
||||
</p>
|
||||
<div className={style.btnGroup}>
|
||||
<Link href="#planes" className={style.primaryBtn}>
|
||||
Elegir un Plan
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="planes" className={style.pricingSection}>
|
||||
<Pricing data={pricingList} />
|
||||
</div>
|
||||
|
||||
{/* All Plans Include Section */}
|
||||
<div className={style.featuresSection}>
|
||||
<h2 className={style.sectionTitle}>Todos los planes incluyen</h2>
|
||||
<div className={style.featuresGrid}>
|
||||
<div className={style.featureItem}>
|
||||
<div className={style.featureIcon}>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8V7z"></path></svg>
|
||||
</div>
|
||||
<h3 className={style.featureTitle}>Máxima Privacidad</h3>
|
||||
<p className={style.featureText}>Toda la información viaja protegida y tus datos y los de tus clientes se mantienen 100% seguros y confidenciales.</p>
|
||||
</div>
|
||||
<div className={style.featureItem}>
|
||||
<div className={style.featureIcon}>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||
</div>
|
||||
<h3 className={style.featureTitle}>Configuración Rápida</h3>
|
||||
<p className={style.featureText}>Empieza a recibir turnos en menos de 5 minutos, sin conocimientos técnicos.</p>
|
||||
</div>
|
||||
<div className={style.featureItem}>
|
||||
<div className={style.featureIcon}>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
|
||||
</div>
|
||||
<h3 className={style.featureTitle}>Soporte Dedicado</h3>
|
||||
<p className={style.featureText}>Nuestro equipo de atención está siempre dispuesto a ayudarte a crecer.</p>
|
||||
</div>
|
||||
<div className={style.featureItem}>
|
||||
<div className={style.featureIcon}>
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
</div>
|
||||
<h3 className={style.featureTitle}>Acceso Global</h3>
|
||||
<p className={style.featureText}>Gestiona tu negocio desde cualquier dispositivo, en cualquier lugar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div className={style.faqSection}>
|
||||
<h2 className={style.sectionTitle}>Preguntas Frecuentes</h2>
|
||||
<div className={style.faqItem}>
|
||||
<h3 className={style.faqQuestion}>¿Puedo cambiar de plan en cualquier momento?</h3>
|
||||
<p className={style.faqAnswer}>Sí, puedes subir o bajar de plan en cualquier momento. Si mejoras tu plan, el cambio será inmediato. Si lo reduces, el cambio aplicará en el próximo ciclo de facturación.</p>
|
||||
</div>
|
||||
<div className={style.faqItem}>
|
||||
<h3 className={style.faqQuestion}>¿Hay algún costo de instalación?</h3>
|
||||
<p className={style.faqAnswer}>No, en TurnosXpress no cobramos comisiones de instalación, mantenimiento ni tarifas ocultas. El precio que ves es el que pagas.</p>
|
||||
</div>
|
||||
<div className={style.faqItem}>
|
||||
<h3 className={style.faqQuestion}>¿Qué pasa si supero el límite de turnos de mi plan?</h3>
|
||||
<p className={style.faqAnswer}>No te dejaremos sin servicio. Te notificaremos para que puedas evaluar subir a un plan superior que se adapte mejor al volumen de tu negocio.</p>
|
||||
</div>
|
||||
<div className={style.faqItem}>
|
||||
<h3 className={style.faqQuestion}>¿Qué medios de pago aceptan?</h3>
|
||||
<p className={style.faqAnswer}>Procesamos todos nuestros pagos a través de la pasarela segura de Mercado Pago. Esto significa que puedes abonar de forma transparente usando tarjetas de crédito, débito, dinero en cuenta o cualquier medio de pago que la plataforma tenga habilitado en Argentina.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA Section */}
|
||||
<div className={style.ctaSection}>
|
||||
<h2 className={style.ctaTitle}>¿Listo para revolucionar tu agenda?</h2>
|
||||
<p className={style.ctaText}>No pierdas más tiempo gestionando turnos manualmente. Empieza a ofrecer una experiencia premium a tus clientes desde hoy mismo.</p>
|
||||
<Link href="#planes" className={style.ctaButton} style={{ textDecoration: "none", display: "inline-block" }}>
|
||||
Elegir un Plan
|
||||
</Link>
|
||||
</div>
|
||||
</AnimatedContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user