Merge version_3 into main #3
138
src/app/booking-confirmation/page.tsx
Normal file
138
src/app/booking-confirmation/page.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import { MessageCircle, ArrowRight } from 'lucide-react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
export default function BookingConfirmationPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const plan = searchParams.get('plan') || 'service';
|
||||
|
||||
const whatsappNumber = '525512345678';
|
||||
const whatsappMessage = `Hola GlowStudio MX, acabo de completar el pago de mi servicio y me gustaría confirmar mi reserva. Plan: ${plan}`;
|
||||
const whatsappLink = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(whatsappMessage)}`;
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="GlowStudio MX"
|
||||
navItems={[
|
||||
{ name: "Servicios", id: "/" },
|
||||
{ name: "Precios", id: "/" },
|
||||
{ name: "Reseñas", id: "/" },
|
||||
{ name: "Contacto", id: "/" }
|
||||
]}
|
||||
button={{
|
||||
text: "Volver al Inicio", href: "/"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
title="¡Pago Completado con Éxito!"
|
||||
description="Tu reserva está casi lista. El siguiente paso es confirmar tu cita directamente con nuestro equipo a través de WhatsApp. Enviaremos tu información de pago y disponibilidad de horarios."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-showing-her-nail-art-fingernails-with-flower_23-2149820402.jpg", alt: "Confirmación de reserva" }
|
||||
]}
|
||||
avatarText="Hablemos en WhatsApp"
|
||||
buttons={[
|
||||
{ text: "Abrir WhatsApp", href: whatsappLink },
|
||||
{ text: "Volver a Servicios", href: "/" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="py-20 px-4" style={{ backgroundColor: 'var(--background)' }}>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="rounded-2xl p-8 mb-8" style={{ backgroundColor: 'var(--card)' }}>
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<MessageCircle size={48} style={{ color: 'var(--primary-cta)' }} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-center mb-4" style={{ color: 'var(--foreground)' }}>
|
||||
Contacta por WhatsApp
|
||||
</h2>
|
||||
<p className="text-center mb-6" style={{ color: 'var(--foreground)' }}>
|
||||
Nuestro número de WhatsApp es: <strong>+52 55 1234 5678</strong>
|
||||
</p>
|
||||
<p className="text-center mb-8" style={{ color: 'var(--foreground)' }}>
|
||||
Simplemente haz clic en el botón de abajo para abrir WhatsApp y confirmar tu cita. Nuestro equipo te responderá en los próximos minutos durante nuestro horario de atención.
|
||||
</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
href={whatsappLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 px-8 py-3 rounded-full font-semibold transition-all duration-300"
|
||||
style={{
|
||||
backgroundColor: 'var(--primary-cta)',
|
||||
color: 'var(--primary-cta-text)',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<MessageCircle size={20} />
|
||||
Contactar por WhatsApp
|
||||
<ArrowRight size={16} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl p-8" style={{ backgroundColor: 'var(--card)' }}>
|
||||
<h3 className="text-xl font-bold mb-4" style={{ color: 'var(--foreground)' }}>
|
||||
¿Qué sucede después?
|
||||
</h3>
|
||||
<ul className="space-y-3" style={{ color: 'var(--foreground)' }}>
|
||||
<li className="flex gap-3">
|
||||
<span className="text-lg font-bold" style={{ color: 'var(--primary-cta)' }}>1.</span>
|
||||
<span>Abre WhatsApp usando el botón anterior</span>
|
||||
</li>
|
||||
<li className="flex gap-3">
|
||||
<span className="text-lg font-bold" style={{ color: 'var(--primary-cta)' }}>2.</span>
|
||||
<span>Nuestro equipo confirmará tu pago y servicio</span>
|
||||
</li>
|
||||
<li className="flex gap-3">
|
||||
<span className="text-lg font-bold" style={{ color: 'var(--primary-cta)' }}>3.</span>
|
||||
<span>Te enviaremos nuestro calendario de disponibilidad</span>
|
||||
</li>
|
||||
<li className="flex gap-3">
|
||||
<span className="text-lg font-bold" style={{ color: 'var(--primary-cta)' }}>4.</span>
|
||||
<span>Elige tu fecha y hora preferida</span>
|
||||
</li>
|
||||
<li className="flex gap-3">
|
||||
<span className="text-lg font-bold" style={{ color: 'var(--primary-cta)' }}>5.</span>
|
||||
<span>¡Listo! Tu cita está confirmada</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="GlowStudio MX"
|
||||
leftLink={{ text: "Política de Privacidad", href: "/" }}
|
||||
rightLink={{ text: "Términos de Servicio", href: "/" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -11,8 +11,15 @@ import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import { Calendar, Crown, Heart, HelpCircle, Palette, Shield, Sparkles, Star, Zap } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function LandingPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const handleBookingClick = (planId: string) => {
|
||||
router.push(`/booking-confirmation?plan=${planId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
@@ -122,28 +129,28 @@ export default function LandingPage() {
|
||||
plans={[
|
||||
{
|
||||
id: "gel-basic", badge: "Popular", badgeIcon: Star,
|
||||
price: "$350 MXN", subtitle: "Manicura Gel Clásica", buttons: [{ text: "Pagar y Reservar", href: "#contact" }],
|
||||
price: "$350 MXN", subtitle: "Manicura Gel Clásica", buttons: [{ text: "Pagar y Reservar", onClick: () => handleBookingClick('gel-basic') }],
|
||||
features: [
|
||||
"Manicura gel de 2 semanas", "Colores a elegir del catálogo", "Aplicación profesional", "Acabado brillante", "Cita reservada automáticamente"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "design-premium", badge: "Recomendado", badgeIcon: Sparkles,
|
||||
price: "$550 MXN", subtitle: "Diseño Artístico Exclusivo", buttons: [{ text: "Pagar y Reservar", href: "#contact" }],
|
||||
price: "$550 MXN", subtitle: "Diseño Artístico Exclusivo", buttons: [{ text: "Pagar y Reservar", onClick: () => handleBookingClick('design-premium') }],
|
||||
features: [
|
||||
"Diseño personalizado", "Gel de colores premium", "Detalles especiales", "Duración 3 semanas", "Consulta de diseño incluida", "Cita reservada automáticamente"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "pedicure-luxury", badge: "Lujo", badgeIcon: Crown,
|
||||
price: "$450 MXN", subtitle: "Pedicura Deluxe Completa", buttons: [{ text: "Pagar y Reservar", href: "#contact" }],
|
||||
price: "$450 MXN", subtitle: "Pedicura Deluxe Completa", buttons: [{ text: "Pagar y Reservar", onClick: () => handleBookingClick('pedicure-luxury') }],
|
||||
features: [
|
||||
"Masaje relajante de pies", "Exfoliación premium", "Gel o esmalte profesional", "Diseño incluido", "Acabado perfecto", "Cita reservada automáticamente"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "combo-ultimate", badge: "Mejor Oferta", badgeIcon: Zap,
|
||||
price: "$799 MXN", subtitle: "Paquete Completo Beauty", buttons: [{ text: "Pagar y Reservar", href: "#contact" }],
|
||||
price: "$799 MXN", subtitle: "Paquete Completo Beauty", buttons: [{ text: "Pagar y Reservar", onClick: () => handleBookingClick('combo-ultimate') }],
|
||||
features: [
|
||||
"Manicura gel con diseño", "Pedicura con masaje", "Tratamiento regenerador", "Detalles premium", "Duración total 2 horas", "Cita reservada automáticamente"
|
||||
]
|
||||
@@ -252,4 +259,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user