/
home
/
simp499cl
/
public_html
/
reservaSimple
/
/home/simp499cl/public_html/reservaSimple
mkdir
upload
Name
Size
Mode
Actions
css2-1.css
117465
0644
edit
dl
rm
css2.css
11840
0644
edit
dl
rm
favicon.png
1145
0644
edit
dl
rm
Gestion_Financiera.jpg
58083
0644
edit
dl
rm
index.html
65515
0644
edit
dl
rm
index.pricing.updated.html
47959
0644
edit
dl
rm
index.pricing.updated2.html
49155
0644
edit
dl
rm
index.updated.html
45161
0644
edit
dl
rm
KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkaHkaWzU.woff2
22440
0644
edit
dl
rm
KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkAnkaWzU.woff2
25464
0644
edit
dl
rm
KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkBnka.woff2
47208
0644
edit
dl
rm
KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkBXkaWzU.woff2
18780
0644
edit
dl
rm
KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkC3kaWzU.woff2
40480
0644
edit
dl
rm
KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkCHkaWzU.woff2
31820
0644
edit
dl
rm
KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkCnkaWzU.woff2
4452
0644
edit
dl
rm
KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkCXkaWzU.woff2
15344
0644
edit
dl
rm
KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkenkaWzU.woff2
45184
0644
edit
dl
rm
KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2
17624
0644
edit
dl
rm
KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2
4348
0644
edit
dl
rm
KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2
36652
0644
edit
dl
rm
KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2
23664
0644
edit
dl
rm
KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2
29392
0644
edit
dl
rm
KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2
14340
0644
edit
dl
rm
KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2
43136
0644
edit
dl
rm
KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2
41348
0644
edit
dl
rm
KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2
20556
0644
edit
dl
rm
main.css
92479
0644
edit
dl
rm
photo-1554224155-8d04cb21cd6c.jpg
240273
0644
edit
dl
rm
photo-1556761175-5973dc0f32e7.jpg
556679
0644
edit
dl
rm
photo-1517245386807-bb43f82c33c4.jpg
291557
0644
edit
dl
rm
Edit:
/home/simp499cl/public_html/reservaSimple/index.updated.html
(45161B)
<!DOCTYPE html> <html data-scrapbook-create="20260220222400087" data-scrapbook-source="https://caa76caa-fa05-4789-b25e-adc2e55ea26c-00-268td890o84jr.worf.replit.dev/" lang="en"> <head> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport"/> <link href="favicon.png" rel="icon" type="image/png"/> <link href="css2-1.css" rel="stylesheet"/> <link href="main.css" rel="stylesheet"/> <style> .viewport{overflow:hidden;} </style></head> <body style="padding-top: 0px"> <div id="root"> <div aria-label="Notifications (F8)" role="region" style="pointer-events: none" tabindex="-1"> <ol class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]" tabindex="-1"></ol> </div> <div class="min-h-screen bg-background font-sans selection:bg-primary/20 selection:text-primary"> <nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-background/80 backdrop-blur-md shadow-sm border-b border-border/50 py-3"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between"> <a class="flex items-center gap-2 group" href=""> <div class="bg-primary/10 p-2 rounded-xl group-hover:bg-primary/20 transition-colors"> <svg class="lucide lucide-calendar-check w-6 h-6 text-primary" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2v4"></path> <path d="M16 2v4"></path> <rect height="18" rx="2" width="18" x="3" y="4"></rect> <path d="M3 10h18"></path> <path d="m9 16 2 2 4-4"></path> </svg> </div> <span class="text-xl font-bold font-display tracking-tight text-foreground">Agenda<span class="text-primary">Pro</span></span> </a> <div class="hidden md:flex items-center gap-8"> <a class="text-sm font-medium text-muted-foreground hover:text-primary transition-colors" href="#home">Inicio</a><a class="text-sm font-medium text-muted-foreground hover:text-primary transition-colors" href="#how-it-works">Cómo Funciona</a><a class="text-sm font-medium text-muted-foreground hover:text-primary transition-colors" href="#pricing">Planes</a><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 border border-primary-border min-h-9 py-2 bg-primary hover:bg-primary/90 text-white font-semibold shadow-lg shadow-primary/25 rounded-full px-6"> Empezar Gratis </button> </div> <button class="md:hidden p-2 text-foreground"> <svg class="lucide lucide-menu" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <line x1="4" x2="20" y1="12" y2="12"></line> <line x1="4" x2="20" y1="6" y2="6"></line> <line x1="4" x2="20" y1="18" y2="18"></line> </svg> </button> </div> </div> </nav> <main> <div class="relative overflow-hidden bg-background pt-20" id="home"> <div class="viewport"> <div class="flex touch-pan-y transition-transform duration-1000 ease-in-out" id="heroTrack"> <div class="flex-[0_0_100%] min-w-0 relative h-[85vh] min-h-[600px]" style="transform: translate3d(0px, 0px, 0px)"> <div class="absolute inset-0 z-0"> <img alt="Asegura tus ingresos" class="w-full h-full object-cover" src="Gestion_Financiera.jpg"/> <div class="absolute inset-0 bg-gradient-to-r from-background/95 via-background/80 to-transparent sm:from-background/90 sm:via-background/60"></div> <div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div> </div> <div class="container relative z-10 h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8"> <div class="max-w-2xl" style="opacity: 1; transform: none"> <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary border border-primary/20 mb-6"> <svg class="lucide lucide-shield-check w-4 h-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path> <path d="m9 12 2 2 4-4"></path> </svg> <span class="text-sm font-medium">Reduce pérdidas por inasistencias</span> </div> <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold font-display text-foreground leading-[1.1] mb-6 tracking-tight"> Asegura tus ingresos </h1> <p class="text-lg md:text-xl text-muted-foreground mb-8 leading-relaxed max-w-lg"> Cobra antes de atender y garantiza tu tiempo con nuestro sistema de pagos integrado. </p> <div class="flex flex-col sm:flex-row gap-4"> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 bg-primary text-primary-foreground border border-primary-border min-h-10 rounded-full text-base font-semibold px-8 h-12 shadow-xl shadow-primary/20 hover:scale-105 transition-all"> Empezar Gratis</button> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 [border-color:var(--button-outline)] shadow-xs active:shadow-none min-h-10 rounded-full text-base font-semibold px-8 h-12 border-2 hover:bg-background/50"> Ver Demo <svg class="lucide lucide-chevron-right w-4 h-4 ml-2" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 18 6-6-6-6"></path> </svg> </button> </div> </div> </div> </div> <div class="flex-[0_0_100%] min-w-0 relative h-[85vh] min-h-[600px]"> <div class="absolute inset-0 z-0"> <img alt="Tu agenda llena, siempre" class="w-full h-full object-cover" src="photo-1554224155-8d04cb21cd6c.jpg"/> <div class="absolute inset-0 bg-gradient-to-r from-background/95 via-background/80 to-transparent sm:from-background/90 sm:via-background/60"></div> <div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div> </div> <div class="container relative z-10 h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8"> <div class="max-w-2xl" style="opacity: 1; transform: none"> <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary border border-primary/20 mb-6"> <svg class="lucide lucide-trending-up w-4 h-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline> <polyline points="16 7 22 7 22 13"></polyline> </svg> <span class="text-sm font-medium">Recibe reservas 24/7</span> </div> <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold font-display text-foreground leading-[1.1] mb-6 tracking-tight"> Tu agenda llena, siempre </h1> <p class="text-lg md:text-xl text-muted-foreground mb-8 leading-relaxed max-w-lg"> Permite que tus clientes agenden incluso mientras duermes. Tu negocio nunca se detiene. </p> <div class="flex flex-col sm:flex-row gap-4"> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 bg-primary text-primary-foreground border border-primary-border min-h-10 rounded-full text-base font-semibold px-8 h-12 shadow-xl shadow-primary/20 hover:scale-105 transition-all"> Empezar Gratis</button> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 [border-color:var(--button-outline)] shadow-xs active:shadow-none min-h-10 rounded-full text-base font-semibold px-8 h-12 border-2 hover:bg-background/50"> Ver Demo <svg class="lucide lucide-chevron-right w-4 h-4 ml-2" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 18 6-6-6-6"></path> </svg> </button> </div> </div> </div> </div> <div class="flex-[0_0_100%] min-w-0 relative h-[85vh] min-h-[600px]"> <div class="absolute inset-0 z-0"> <img alt="Optimiza tu tiempo" class="w-full h-full object-cover" src="photo-1517245386807-bb43f82c33c4.jpg"/> <div class="absolute inset-0 bg-gradient-to-r from-background/95 via-background/80 to-transparent sm:from-background/90 sm:via-background/60"></div> <div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent"></div> </div> <div class="container relative z-10 h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8"> <div class="max-w-2xl" style="opacity: 1; transform: none"> <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary border border-primary/20 mb-6"> <svg class="lucide lucide-clock w-4 h-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> <span class="text-sm font-medium">Reduce hasta 70% las inasistencias</span> </div> <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold font-display text-foreground leading-[1.1] mb-6 tracking-tight"> Optimiza tu tiempo </h1> <p class="text-lg md:text-xl text-muted-foreground mb-8 leading-relaxed max-w-lg"> Recordatorios automáticos y gestión inteligente para que te enfoques en lo que importa. </p> <div class="flex flex-col sm:flex-row gap-4"> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 bg-primary text-primary-foreground border border-primary-border min-h-10 rounded-full text-base font-semibold px-8 h-12 shadow-xl shadow-primary/20 hover:scale-105 transition-all"> Empezar Gratis</button> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 [border-color:var(--button-outline)] shadow-xs active:shadow-none min-h-10 rounded-full text-base font-semibold px-8 h-12 border-2 hover:bg-background/50"> Ver Demo <svg class="lucide lucide-chevron-right w-4 h-4 ml-2" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="m9 18 6-6-6-6"></path> </svg> </button> </div> </div> </div> </div> </div> </div> <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3 z-20"> <button aria-label="Go to slide 1" class="w-3 h-3 rounded-full transition-all duration-300 bg-muted-foreground/30 hover:bg-muted-foreground/50"></button><button aria-label="Go to slide 2" class="w-3 h-3 rounded-full transition-all duration-300 bg-muted-foreground/30 hover:bg-muted-foreground/50"></button><button aria-label="Go to slide 3" class="w-3 h-3 rounded-full transition-all duration-300 bg-primary w-8"></button> </div> </div> <section class="py-20 bg-background border-b border-border/50"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="flex flex-col items-center text-center p-6 rounded-2xl bg-muted/30 hover:bg-muted/50 transition-colors"> <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4"> <svg class="lucide lucide-shield w-6 h-6" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path> </svg> </div> <h3 class="text-lg font-bold mb-2"> Pagos Seguros </h3> <p class="text-muted-foreground text-sm"> Integración nativa con Webpay Plus para asegurar cada reserva. </p> </div> <div class="flex flex-col items-center text-center p-6 rounded-2xl bg-muted/30 hover:bg-muted/50 transition-colors"> <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4"> <svg class="lucide lucide-users w-6 h-6" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> </div> <h3 class="text-lg font-bold mb-2"> Gestión de Equipo </h3> <p class="text-muted-foreground text-sm"> Coordina horarios de múltiples profesionales sin conflictos. </p> </div> <div class="flex flex-col items-center text-center p-6 rounded-2xl bg-muted/30 hover:bg-muted/50 transition-colors"> <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4"> <svg class="lucide lucide-building2 w-6 h-6" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path> <path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path> <path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path> <path d="M10 6h4"></path> <path d="M10 10h4"></path> <path d="M10 14h4"></path> <path d="M10 18h4"></path> </svg> </div> <h3 class="text-lg font-bold mb-2"> Multi-Sucursal </h3> <p class="text-muted-foreground text-sm"> Administra todas tus ubicaciones desde un panel centralizado. </p> </div> </div> </div> </section> <section class="py-24 bg-muted/30 relative overflow-hidden" id="how-it-works"> <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-border to-transparent"></div> <div class="absolute top-1/2 left-0 w-64 h-64 bg-primary/5 rounded-full blur-[100px] -translate-x-1/2"></div> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center max-w-3xl mx-auto mb-16"> <h2 class="text-3xl md:text-5xl font-bold font-display text-foreground mb-6"> Configuración simple, <span class="text-primary">resultados inmediatos</span> </h2> <p class="text-lg text-muted-foreground"> Te ayudamos en cada paso del proceso. Migramos tu agenda actual sin costo adicional y te enseñamos a sacar el máximo provecho. </p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative"> <div class="hidden md:block absolute top-12 left-[16%] right-[16%] h-0.5 bg-gradient-to-r from-border via-primary/30 to-border -z-10"></div> <div class="relative flex flex-col items-center text-center" style="opacity: 1; transform: none"> <div class="w-24 h-24 rounded-3xl bg-blue-500 bg-opacity-10 flex items-center justify-center mb-6 shadow-xl shadow-black/5 backdrop-blur-sm border border-white/50 relative group"> <div class="absolute inset-0 bg-blue-500 opacity-20 blur-xl rounded-full group-hover:opacity-40 transition-opacity"></div> <svg class="lucide lucide-mouse-pointer-click w-10 h-10 text-blue-500" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M14 4.1 12 6"></path> <path d="m5.1 8-2.9-.8"></path> <path d="m6 12-1.9 2"></path> <path d="M7.2 2.2 8 5.1"></path> <path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"></path> </svg> <div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-background border border-border flex items-center justify-center font-bold text-sm shadow-sm"> 1 </div> </div> <h3 class="text-xl font-bold text-foreground mb-3"> Elige tu plan </h3> <p class="text-muted-foreground leading-relaxed max-w-xs"> Selecciona el plan que mejor se adapte al tamaño de tu negocio y equipo. </p> </div> <div class="relative flex flex-col items-center text-center" style="opacity: 1; transform: none"> <div class="w-24 h-24 rounded-3xl bg-teal-500 bg-opacity-10 flex items-center justify-center mb-6 shadow-xl shadow-black/5 backdrop-blur-sm border border-white/50 relative group"> <div class="absolute inset-0 bg-teal-500 opacity-20 blur-xl rounded-full group-hover:opacity-40 transition-opacity"></div> <svg class="lucide lucide-settings w-10 h-10 text-teal-500" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path> <circle cx="12" cy="12" r="3"></circle> </svg> <div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-background border border-border flex items-center justify-center font-bold text-sm shadow-sm"> 2 </div> </div> <h3 class="text-xl font-bold text-foreground mb-3"> Configura servicios </h3> <p class="text-muted-foreground leading-relaxed max-w-xs"> Define tus horarios, profesionales y el valor de tus servicios en minutos. </p> </div> <div class="relative flex flex-col items-center text-center" style="opacity: 1; transform: none"> <div class="w-24 h-24 rounded-3xl bg-indigo-500 bg-opacity-10 flex items-center justify-center mb-6 shadow-xl shadow-black/5 backdrop-blur-sm border border-white/50 relative group"> <div class="absolute inset-0 bg-indigo-500 opacity-20 blur-xl rounded-full group-hover:opacity-40 transition-opacity"></div> <svg class="lucide lucide-credit-card w-10 h-10 text-indigo-500" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <rect height="14" rx="2" width="20" x="2" y="5"></rect> <line x1="2" x2="22" y1="10" y2="10"></line> </svg> <div class="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-background border border-border flex items-center justify-center font-bold text-sm shadow-sm"> 3 </div> </div> <h3 class="text-xl font-bold text-foreground mb-3"> Integra Pagos </h3> <p class="text-muted-foreground leading-relaxed max-w-xs"> Conecta Transbank y asegura el pago de tus reservas automáticamente. </p> <div class="mt-6 flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow-sm border border-border"> <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> <span class="text-xs font-medium text-slate-600">Simulación Transbank Activa</span> </div> </div> </div> </div> </section> <section class="py-24 relative" id="pricing"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center max-w-3xl mx-auto mb-12"> <h2 class="text-3xl md:text-5xl font-bold font-display text-foreground mb-6"> Planes transparentes <br/><span class="text-primary">sin comisiones ocultas</span> </h2> <p class="text-lg text-muted-foreground mb-8"> Elige la potencia que tu negocio necesita. Puedes cambiar de plan en cualquier momento. </p> <div class="flex items-center justify-center gap-4 mb-8"> <span class="text-sm font-medium text-foreground">Mensual</span> <div class="flex items-center gap-2"> <button aria-checked="false" class="peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input" data-state="unchecked" role="switch" type="button" value="on"> <span class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" data-state="unchecked"></span> </button> </div> <span class="text-sm font-medium text-muted-foreground">Anual <span class="text-primary text-xs bg-primary/10 px-2 py-0.5 rounded-full ml-1 font-bold">-20% OFF</span></span> </div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto items-center"> <div class="relative flex flex-col p-8 rounded-3xl transition-all duration-300 bg-card text-card-foreground border border-border shadow-lg hover:shadow-xl hover:-translate-y-1"> <div class="mb-6"> <h3 class="text-xl font-bold font-display text-foreground"> Básico </h3> <p class="text-sm mt-2 text-muted-foreground"> Ideal para profesionales independientes </p> </div> <div class="mb-6"> <div class="flex items-baseline"> <span class="text-4xl font-bold font-display">$14.990</span><span class="ml-2 text-sm text-muted-foreground">/mes</span> </div> </div> <ul class="space-y-4 mb-8 flex-1"> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">1 Sucursal</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">1 Profesional</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">Pagos por Transbank</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">Recordatorios 2hrs antes</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">Agenda Online 24/7</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">Soporte por email</span> </li> </ul> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 border border-primary-border min-h-9 px-4 w-full rounded-xl py-6 font-semibold transition-all bg-primary text-white hover:bg-primary/90 shadow-md shadow-primary/20"> Empezar Básico </button> </div> <div class="relative flex flex-col p-8 rounded-3xl transition-all duration-300 bg-primary text-primary-foreground shadow-2xl shadow-primary/30 scale-105 z-10 ring-4 ring-primary/10"> <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2"> <span class="bg-secondary text-secondary-foreground text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider shadow-md">Más Popular</span> </div> <div class="mb-6"> <h3 class="text-xl font-bold font-display text-white"> Standard </h3> <p class="text-sm mt-2 text-primary-foreground/80"> Para pequeños centros y estéticas </p> </div> <div class="mb-6"> <div class="flex items-baseline"> <span class="text-4xl font-bold font-display">$22.990</span><span class="ml-2 text-sm text-primary-foreground/80">/mes</span> </div> </div> <ul class="space-y-4 mb-8 flex-1"> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-white/20 text-white"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-primary-foreground/90">1 Sucursal</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-white/20 text-white"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-primary-foreground/90">Hasta 5 Profesionales</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-white/20 text-white"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-primary-foreground/90">Pagos por Transbank</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-white/20 text-white"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-primary-foreground/90">Recordatorios WhatsApp</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-white/20 text-white"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-primary-foreground/90">Confirmación automática</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-white/20 text-white"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-primary-foreground/90">Reportes de gestión</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-white/20 text-white"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-primary-foreground/90">Soporte prioritario</span> </li> </ul> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 border border-primary-border min-h-9 px-4 w-full rounded-xl py-6 font-semibold transition-all bg-white text-primary hover:bg-white/90 shadow-lg"> Empezar Standard </button> </div> <div class="relative flex flex-col p-8 rounded-3xl transition-all duration-300 bg-card text-card-foreground border border-border shadow-lg hover:shadow-xl hover:-translate-y-1"> <div class="mb-6"> <h3 class="text-xl font-bold font-display text-foreground"> Premium </h3> <p class="text-sm mt-2 text-muted-foreground"> Gestión total para grandes empresas </p> </div> <div class="mb-6"> <div class="flex items-baseline"> <span class="text-4xl font-bold font-display">$59.000</span><span class="ml-2 text-sm text-muted-foreground">/mes</span> </div> </div> <ul class="space-y-4 mb-8 flex-1"> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">Múltiples Sucursales</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">Profesionales Ilimitados</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">Pagos por Transbank</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">API Personalizada</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">App marca blanca</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">Gerente de cuenta</span> </li> <li class="flex items-start gap-3 text-sm"> <div class="p-0.5 rounded-full mt-0.5 bg-primary/10 text-primary"> <svg class="lucide lucide-check w-3 h-3" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M20 6 9 17l-5-5"></path> </svg> </div> <span class="text-muted-foreground">Migración gratuita</span> </li> </ul> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 border border-primary-border min-h-9 px-4 w-full rounded-xl py-6 font-semibold transition-all bg-primary text-white hover:bg-primary/90 shadow-md shadow-primary/20"> Contactar Ventas </button> </div> </div> </div> </section> <section class="py-24 bg-primary text-primary-foreground relative overflow-hidden"> <div class="absolute inset-0 opacity-10"> <div class="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-[100px] -translate-x-1/2 -translate-y-1/2"></div> <div class="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-[100px] translate-x-1/2 translate-y-1/2"></div> </div> <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center"> <h2 class="text-3xl md:text-5xl font-bold font-display mb-8 max-w-4xl mx-auto"> ¿Listo para modernizar tu negocio? </h2> <p class="text-xl md:text-2xl opacity-90 mb-12 max-w-2xl mx-auto font-light"> Únete a más de 500 empresas que ya automatizaron su agenda. Te ayudamos a migrar tus datos hoy mismo. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center"> <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 bg-secondary text-secondary-foreground border border-secondary-border min-h-10 text-lg px-8 h-14 rounded-full font-bold shadow-xl hover:scale-105 transition-transform"> Agendar Demostración</button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2 min-h-10 bg-white/10 text-white hover:bg-white/20 text-lg px-8 h-14 rounded-full backdrop-blur-sm border border-white/20"> Contactar por WhatsApp </button> </div> <p class="mt-8 text-sm opacity-70 flex items-center justify-center gap-2"> <svg class="lucide lucide-circle-check-big w-4 h-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M21.801 10A10 10 0 1 1 17 3.335"></path> <path d="m9 11 3 3L22 4"></path> </svg> Sin tarjeta de crédito requerida para demo </p> </div> </section> </main> <footer class="bg-muted/50 border-t border-border pt-16 pb-8"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"> <div class="col-span-1 md:col-span-1"> <div class="flex items-center gap-2 mb-4"> <div class="bg-primary/10 p-2 rounded-lg"> <span class="text-xl font-bold text-primary">AP</span> </div> <span class="text-xl font-bold font-display">AgendaPro</span> </div> <p class="text-muted-foreground text-sm leading-relaxed"> La solución completa para la gestión de reservas y pagos en línea. Automatiza tu negocio hoy. </p> </div> <div> <h4 class="font-bold mb-4"> Producto </h4> <ul class="space-y-2 text-sm text-muted-foreground"> <li> <a class="hover:text-primary" href="#">Funcionalidades</a> </li> <li> <a class="hover:text-primary" href="#">Integraciones</a> </li> <li> <a class="hover:text-primary" href="#">Planes y Precios</a> </li> <li> <a class="hover:text-primary" href="#">API para desarrolladores</a> </li> </ul> </div> <div> <h4 class="font-bold mb-4"> Recursos </h4> <ul class="space-y-2 text-sm text-muted-foreground"> <li> <a class="hover:text-primary" href="#">Blog</a> </li> <li> <a class="hover:text-primary" href="#">Centro de Ayuda</a> </li> <li> <a class="hover:text-primary" href="#">Casos de Éxito</a> </li> <li> <a class="hover:text-primary" href="#">Webinars</a> </li> </ul> </div> <div> <h4 class="font-bold mb-4"> Legal </h4> <ul class="space-y-2 text-sm text-muted-foreground"> <li> <a class="hover:text-primary" href="#">Términos de Servicio</a> </li> <li> <a class="hover:text-primary" href="#">Política de Privacidad</a> </li> <li> <a class="hover:text-primary" href="#">Cookies</a> </li> </ul> </div> </div> <div class="border-t border-border pt-8 flex flex-col md:flex-row justify-between items-center gap-4"> <p class="text-sm text-muted-foreground"> © 2024 AgendaPro. Todos los derechos reservados. </p> <div class="flex items-center gap-4"> <div class="w-8 h-8 rounded-full bg-muted flex items-center justify-center hover:bg-primary/10 hover:text-primary transition-colors cursor-pointer"> <span class="sr-only">Facebook</span> <svg class="w-4 h-4" fill="currentColor" viewbox="0 0 24 24"> <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path> </svg> </div> <div class="w-8 h-8 rounded-full bg-muted flex items-center justify-center hover:bg-primary/10 hover:text-primary transition-colors cursor-pointer"> <span class="sr-only">Twitter</span> <svg class="w-4 h-4" fill="currentColor" viewbox="0 0 24 24"> <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path> </svg> </div> </div> </div> </div> </footer> </div> </div> <script> (function () { const track = document.getElementById("heroTrack"); if (!track) return; const slides = Array.from(track.children).filter(el => el.classList && el.classList.contains("flex-[0_0_100%]") ); const dotsContainer = track.parentElement?.parentElement?.querySelector( '.absolute.bottom-8.left-1\\/2' ); const dots = dotsContainer ? Array.from(dotsContainer.querySelectorAll("button")) : []; let index = 0; let timer = null; function setActiveDot(i) { dots.forEach((b, idx) => { b.classList.remove("bg-primary", "w-8"); b.classList.add("bg-muted-foreground/30"); if (idx === i) { b.classList.remove("bg-muted-foreground/30"); b.classList.add("bg-primary", "w-8"); } }); } function goTo(i) { if (!slides.length) return; index = (i + slides.length) % slides.length; track.style.transform = `translate3d(${-index * 100}%, 0, 0)`; setActiveDot(index); } function start() { stop(); timer = setInterval(() => goTo(index + 1), 6000); } function stop() { if (timer) clearInterval(timer); timer = null; } dots.forEach((btn, idx) => { btn.addEventListener("click", () => { goTo(idx); start(); }); }); const viewport = track.parentElement; if (viewport) { viewport.addEventListener("mouseenter", stop); viewport.addEventListener("mouseleave", start); viewport.addEventListener("touchstart", stop, { passive: true }); viewport.addEventListener("touchend", start); } goTo(0); start(); })(); </script></body> </html>
Save
cmd:
run
