|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Calculadora Editorial - LibrosFamosos.com</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#1a365d', |
|
|
secondary: '#2b6cb0', |
|
|
accent: '#e53e3e', |
|
|
light: '#ebf8ff', |
|
|
dark: '#2d3748', |
|
|
gold: '#d69e2e' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Open+Sans:wght@300;400;600&display=swap"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Open Sans', sans-serif; |
|
|
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4, h5 { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.logo-wrapper { |
|
|
position: relative; |
|
|
text-align: center; |
|
|
padding-bottom: 1.5rem; |
|
|
margin-bottom: 2rem; |
|
|
border-bottom: 1px solid rgba(203, 213, 224, 0.5); |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-weight: 800; |
|
|
font-size: 2.5rem; |
|
|
color: #1a365d; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.gold-text { |
|
|
color: #d69e2e; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.gold-text:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 3px; |
|
|
background: linear-gradient(90deg, transparent, #d69e2e, transparent); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
background-color: rgba(43, 108, 176, 0.1); |
|
|
width: 54px; |
|
|
height: 54px; |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 16px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
.service-card:hover .feature-icon { |
|
|
transform: rotate(5deg) scale(1.1); |
|
|
} |
|
|
|
|
|
.service-badge { |
|
|
position: absolute; |
|
|
top: -8px; |
|
|
right: 20px; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.form-section { |
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); |
|
|
border-radius: 18px; |
|
|
} |
|
|
|
|
|
.counter-btn { |
|
|
width: 38px; |
|
|
height: 38px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 50%; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.floating-total { |
|
|
animation: pulse 2.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
transform: translateY(0); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
100% { |
|
|
transform: translateY(0); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
} |
|
|
|
|
|
.service-tag { |
|
|
display: inline-block; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 20px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.book-texture { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.book-texture:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20V8H0V6h20V4H0V2h20H0v20h20v-1.5zm0 0V16h20v-2H20v-2h20V8H20V6h20v20H20v-1.5z' fill='%232b6cb0' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); |
|
|
opacity: 0.8; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.flex-col-mobile { |
|
|
flex-direction: column !important; |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-size: 1.75rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.service-card:hover .page-flip { |
|
|
animation: pageFlip 1.5s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes pageFlip { |
|
|
0% { transform: rotateY(0); } |
|
|
25% { transform: rotateY(-15deg); } |
|
|
50% { transform: rotateY(0); } |
|
|
75% { transform: rotateY(15deg); } |
|
|
100% { transform: rotateY(0); } |
|
|
} |
|
|
|
|
|
|
|
|
.dropdown-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.dropdown-open { |
|
|
max-height: 500px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<header class="bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 py-6"> |
|
|
<div class="logo-wrapper"> |
|
|
<div class="flex items-center justify-center"> |
|
|
<i class="fas fa-book-open text-3xl text-gold mr-3"></i> |
|
|
<a href="https://librosfamosos.com/" class="logo-text"> |
|
|
libros<span class="gold-text">famosos</span>.com |
|
|
</a> |
|
|
</div> |
|
|
<p class="text-gray-600 mt-2">Editorial de excelencia para líderes y autores</p> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 py-8"> |
|
|
|
|
|
<div class="text-center mb-16"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-primary mb-4"> |
|
|
<i class="fas fa-calculator text-secondary mr-3"></i>Calculadora Editorial |
|
|
</h1> |
|
|
<p class="text-xl text-gray-700 max-w-3xl mx-auto"> |
|
|
Descubre y personaliza tu paquete editorial ideal para crear un legado literario perdurable |
|
|
</p> |
|
|
<div class="mt-6"> |
|
|
<span class="service-tag bg-blue-100 text-blue-800">VIP</span> |
|
|
<span class="service-tag bg-yellow-100 text-yellow-800 mx-2">Premium</span> |
|
|
<span class="service-tag bg-green-100 text-green-800">Estándar</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-8"> |
|
|
|
|
|
<div class="lg:w-2/3 space-y-10"> |
|
|
|
|
|
<div class="service-card bg-white shadow-lg relative book-texture"> |
|
|
<div class="service-badge"> |
|
|
<span class="px-4 py-2 bg-gradient-to-r from-gold to-yellow-600 text-white font-bold text-sm rounded-full shadow-lg flex items-center"> |
|
|
<i class="fas fa-crown mr-2"></i> RECOMENDADO |
|
|
</span> |
|
|
</div> |
|
|
|
|
|
<div class="p-7 bg-gradient-to-r from-primary to-blue-900 text-white"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold flex items-center"> |
|
|
<i class="fas fa-gem text-gold mr-3 page-flip"></i>Combo 1 VIP |
|
|
</h2> |
|
|
<p class="text-blue-100 mt-2">Para Fundadores y CEO’s que desean crear un legado literario</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="text-3xl font-bold text-white">16300€</span> |
|
|
<div class="text-sm text-blue-200">Precio base</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 bg-blue-50"> |
|
|
<h3 class="font-bold text-lg text-primary mb-4 flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-600 mr-3"></i> Servicios Incluidos |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-user-edit text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Escritora + Editor + Publicar</div> |
|
|
<div class="text-sm text-gray-600">Proceso editorial completo</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-file-alt text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">500 páginas maquetadas</div> |
|
|
<div class="text-sm text-gray-600">Diseño profesional de contenido</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-book text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Edición Ebook, Papel & PDF</div> |
|
|
<div class="text-sm text-gray-600">Tapa blanda incluida</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-list-ol text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Índice Interactivo</div> |
|
|
<div class="text-sm text-gray-600">Navegación optimizada</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-user-tie text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Sinopsis y Biografía de Autor</div> |
|
|
<div class="text-sm text-gray-600">Perfil profesional</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-globe-americas text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Publicación Global</div> |
|
|
<div class="text-sm text-gray-600">Amazon, Google, Apple</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-share-alt text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Pack 90 Publicaciones</div> |
|
|
<div class="text-sm text-gray-600">Imágenes y Videos promocionales</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-laptop-code text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Web de Autor + Tienda Online</div> |
|
|
<div class="text-sm text-gray-600">Presencia digital profesional</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-film text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Booktrailer (3 min.)</div> |
|
|
<div class="text-sm text-gray-600">Video promocional</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-bullhorn text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">3 Campañas de Publicidad</div> |
|
|
<div class="text-sm text-gray-600">Estrategia de lanzamiento</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3"> |
|
|
<i class="fas fa-headset text-blue-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">Soporte Medio: 90 días</div> |
|
|
<div class="text-sm text-gray-600">Asesoramiento post-publicación</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6 border-t"> |
|
|
<div class="flex justify-between items-center cursor-pointer" id="vip-extras-header"> |
|
|
<h3 class="font-bold text-lg text-primary"> |
|
|
<i class="fas fa-star text-gold mr-2"></i> Servicios Adicionales |
|
|
</h3> |
|
|
<i class="fas fa-chevron-down text-gray-500 transition-all duration-300" id="vip-extras-icon"></i> |
|
|
</div> |
|
|
|
|
|
<div class="dropdown-content" id="vip-extras-content"> |
|
|
<div class="space-y-4 mt-4"> |
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="h-5 w-5 text-secondary rounded" id="pack90"> |
|
|
<label for="pack90" class="ml-3 font-medium">Pack 90 Publicaciones</label> |
|
|
</div> |
|
|
<span class="font-bold text-accent">+800€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="h-5 w-5 text-secondary rounded" id="webDesign"> |
|
|
<label for="webDesign" class="ml-3 font-medium">Diseño Web de Autor</label> |
|
|
</div> |
|
|
<span class="font-bold text-accent">+1200€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="h-5 w-5 text-secondary rounded" id="booktrailer"> |
|
|
<label for="booktrailer" class="ml-3 font-medium">Booktrailer adicional</label> |
|
|
</div> |
|
|
<span class="font-bold text-accent">+700€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="h-5 w-5 text-secondary rounded" id="campaign"> |
|
|
<label for="campaign" class="ml-3 font-medium">Campaña Publicitaria adicional</label> |
|
|
</div> |
|
|
<span class="font-bold text-accent">+400€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center py-2"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="h-5 w-5 text-secondary rounded" id="support"> |
|
|
<label for="support" class="ml-3 font-medium">Soporte extendido (+30 días)</label> |
|
|
</div> |
|
|
<span class="font-bold text-accent">+200€</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white shadow-lg relative"> |
|
|
<div class="p-6 bg-gradient-to-r from-teal-600 to-teal-700 text-white"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold flex items-center"> |
|
|
<i class="fas fa-user-pen text-teal-300 mr-3"></i>Combo Humano |
|
|
</h2> |
|
|
<p class="text-teal-100 mt-2">Para escritores que desean una edición clásica del manuscrito</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="text-3xl font-bold text-white">1300€</span> |
|
|
<div class="text-sm text-teal-200">Precio base</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-6 bg-teal-50"> |
|
|
<h3 class="font-bold text-lg text-teal-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-600 mr-3"></i> Servicios Incluidos |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fas fa-user-edit text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">Editor Copywriter</div> |
|
|
<div class="text-sm text-teal-600">+ Escritora Fantasma</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fas fa-file-alt text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">50 páginas maquetadas</div> |
|
|
<div class="text-sm text-teal-600">Diseño profesional</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fas fa-book-open text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">Edición Completa Manual</div> |
|
|
<div class="text-sm text-teal-600">Revisión profesional</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fas fa-palette text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">Portada y Contraportada</div> |
|
|
<div class="text-sm text-teal-600">Diseño de cubierta</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fas fa-image text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">5 imágenes o ilustraciones</div> |
|
|
<div class="text-sm text-teal-600">Material gráfico</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fas fa-file-pdf text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">Formatos eBook, PDF</div> |
|
|
<div class="text-sm text-teal-600">Versatilidad de formatos</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fas fa-sitemap text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">Índice Interactivo</div> |
|
|
<div class="text-sm text-teal-600">Navegación mejorada</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fas fa-user text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">Sinopsis y Biografía</div> |
|
|
<div class="text-sm text-teal-600">Presentación del autor</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fab fa-amazon text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">Publicar en Amazon KDP</div> |
|
|
<div class="text-sm text-teal-600">Plataforma líder</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="feature-icon mr-3 bg-teal-100"> |
|
|
<i class="fas fa-share-square text-teal-700 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium text-teal-900">Publicación online</div> |
|
|
<div class="text-sm text-teal-600">Web y redes sociales</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6 border-t"> |
|
|
<h3 class="font-bold text-lg text-teal-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-star text-gold mr-3"></i> Servicios Adicionales |
|
|
</h3> |
|
|
<div class="space-y-5"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-medium">Ampliación por página extra:</span> |
|
|
<span class="font-bold text-accent">+15€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-medium">Ilustración adicional:</span> |
|
|
<span class="font-bold text-accent">+50€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-medium">Tapa dura adicional:</span> |
|
|
<span class="font-bold text-accent">+100€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="font-medium">Publicación en más plataformas:</span> |
|
|
<span class="font-bold text-accent">+150€</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow-xl rounded-xl p-7 border border-blue-100"> |
|
|
<h2 class="text-2xl font-bold text-primary mb-7 flex items-center"> |
|
|
<i class="fas fa-sliders-h text-secondary mr-4"></i>Personalización Avanzada |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
|
|
<div class="bg-blue-50 p-5 rounded-xl"> |
|
|
<div class="flex justify-between mb-3"> |
|
|
<label class="font-medium text-blue-900">Número de Páginas Maquetadas (base: 50)</label> |
|
|
<span class="text-secondary font-bold text-xl" id="pages-value">50</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="counter-btn bg-blue-600 hover:bg-blue-700 text-white shadow" id="decrease-pages"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<div class="w-full bg-blue-100 rounded-full h-4"> |
|
|
<div class="bg-gradient-to-r from-blue-500 to-blue-700 h-4 rounded-full" id="pages-bar" style="width: 50%"></div> |
|
|
</div> |
|
|
<button class="counter-btn bg-blue-600 hover:bg-blue-700 text-white shadow" id="increase-pages"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-teal-50 p-5 rounded-xl"> |
|
|
<div class="flex justify-between mb-3"> |
|
|
<label class="font-medium text-teal-900">Imágenes o Ilustraciones (base: 5)</label> |
|
|
<span class="text-teal-700 font-bold text-xl" id="images-value">5</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="counter-btn bg-teal-600 hover:bg-teal-700 text-white shadow" id="decrease-images"> |
|
|
<i class="fas fa-minus"></i> |
|
|
</button> |
|
|
<div class="w-full bg-teal-100 rounded-full h-4"> |
|
|
<div class="bg-gradient-to-r from-teal-500 to-teal-700 h-4 rounded-full" id="images-bar" style="width: 50%"></div> |
|
|
</div> |
|
|
<button class="counter-btn bg-teal-600 hover:bg-teal-700 text-white shadow" id="increase-images"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-white border border-gray-200 p-4 rounded-xl flex items-center shadow-sm"> |
|
|
<input type="checkbox" class="h-5 w-5 text-secondary rounded" id="hardcover"> |
|
|
<label for="hardcover" class="ml-3 font-medium">Tapa dura adicional</label> |
|
|
</div> |
|
|
<div class="bg-white border border-gray-200 p-4 rounded-xl flex items-center shadow-sm"> |
|
|
<input type="checkbox" class="h-5 w-5 text-secondary rounded" id="more-platforms"> |
|
|
<label for="more-platforms" class="ml-3 font-medium">Publicación en más plataformas</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-1/3 space-y-8"> |
|
|
|
|
|
<div class="bg-gradient-to-br from-primary to-blue-900 rounded-2xl shadow-2xl text-white p-7 floating-total"> |
|
|
<div class="text-center mb-6"> |
|
|
<div class="feature-icon inline-flex bg-white bg-opacity-20"> |
|
|
<i class="fas fa-file-invoice-dollar text-white text-2xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold mt-4">Resumen del Presupuesto</h2> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 rounded-xl p-5 mb-6"> |
|
|
<div class="flex justify-between mb-3"> |
|
|
<span>Combo 1 VIP:</span> |
|
|
<span class="font-bold">16300€</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-3"> |
|
|
<span>Combo Humano:</span> |
|
|
<span class="font-bold">1300€</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-3"> |
|
|
<span>Páginas extra:</span> |
|
|
<span class="font-bold">0€</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-3"> |
|
|
<span>Imágenes extra:</span> |
|
|
<span class="font-bold">0€</span> |
|
|
</div> |
|
|
<div class="flex justify-between mt-4 pt-4 border-t border-white border-opacity-20"> |
|
|
<span class="font-medium">Extras seleccionados:</span> |
|
|
<span class="font-bold">0€</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-white border-opacity-30 pt-6 text-center"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-xl font-medium">Total Presupuesto:</span> |
|
|
<span class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 to-gold">17600€</span> |
|
|
</div> |
|
|
<div class="mt-3 text-blue-200 text-sm"> |
|
|
Incluye todos los servicios personalizados |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<div class="inline-flex items-center bg-white bg-opacity-20 px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> |
|
|
<span>Total actualizado en tiempo real</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="form-section shadow-xl rounded-2xl p-7 border border-gray-200"> |
|
|
<div class="text-center mb-6"> |
|
|
<div class="feature-icon inline-flex"> |
|
|
<i class="fas fa-calendar-check text-secondary text-2xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl font-bold text-primary mt-4">Reserva tu servicio</h2> |
|
|
<p class="text-gray-600 mt-2">Garantiza tu paquete preferido</p> |
|
|
</div> |
|
|
|
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="nombre" class="block mb-2 font-medium">Nombre completo:</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3"> |
|
|
<i class="fas fa-user text-gray-400"></i> |
|
|
</div> |
|
|
<input |
|
|
type="text" |
|
|
id="nombre" |
|
|
class="w-full pl-11 p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-secondary focus:border-transparent transition-all duration-300" |
|
|
placeholder="Tu nombre"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block mb-2 font-medium">Email:</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3"> |
|
|
<i class="fas fa-envelope text-gray-400"></i> |
|
|
</div> |
|
|
<input |
|
|
type="email" |
|
|
id="email" |
|
|
class="w-full pl-11 p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-secondary focus:border-transparent transition-all duration-300" |
|
|
placeholder="[email protected]"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="proyecto" class="block mb-2 font-medium">¿Sobre qué proyecto?</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 flex items-start pt-3 pl-3"> |
|
|
<i class="fas fa-book text-gray-400"></i> |
|
|
</div> |
|
|
<textarea |
|
|
id="proyecto" |
|
|
rows="4" |
|
|
class="w-full pl-11 p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-secondary focus:border-transparent transition-all duration-300" |
|
|
placeholder="Describe brevemente tu proyecto"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button |
|
|
type="submit" |
|
|
class="w-full bg-gradient-to-r from-secondary to-primary hover:from-blue-700 hover:to-blue-900 text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-[1.02] flex items-center justify-center shadow-lg hover:shadow-xl"> |
|
|
<i class="fas fa-lock mr-3"></i> |
|
|
Reservar ahora |
|
|
</button> |
|
|
|
|
|
<div class="text-center mt-4 text-sm text-gray-600"> |
|
|
<i class="fas fa-shield-alt mr-2"></i> |
|
|
Tus datos están seguros con nosotros |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow-xl rounded-2xl p-6 border border-blue-100"> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
<div class="feature-icon mb-4 bg-blue-100"> |
|
|
<i class="fas fa-headset text-blue-700 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-primary mb-3">¿Necesitas ayuda?</h3> |
|
|
<p class="text-gray-600 mb-5">Nuestros especialistas editoriales están listos para asesorarte y responder todas tus preguntas.</p> |
|
|
<a href="https://librosfamosos.com/contacto" class="bg-gradient-to-r from-primary to-blue-900 text-white font-medium py-3 px-6 rounded-xl flex items-center hover:shadow-lg transition-all"> |
|
|
<i class="fas fa-comments mr-3"></i> Contactar Soporte |
|
|
</a> |
|
|
<div class="mt-4 text-sm text-gray-600 flex items-center"> |
|
|
<i class="fas fa-phone-volume mr-2"></i> |
|
|
<span>+34 123 456 789</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-20 pt-12 border-t border-gray-200"> |
|
|
<div class="text-center mb-8"> |
|
|
<a href="https://librosfamosos.com/" class="logo-text text-3xl"> |
|
|
libros<span class="gold-text">famosos</span>.com |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg mb-3">Servicios</h4> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li><a href="https://librosfamosos.com/servicios" class="hover:text-primary">Edición Profesional</a></li> |
|
|
<li><a href="https://librosfamosos.com/diseno" class="hover:text-primary">Diseño Editorial</a></li> |
|
|
<li><a href="https://librosfamosos.com/publicacion" class="hover:text-primary">Publicación Global</a></li> |
|
|
<li><a href="https://librosfamosos.com/promocion" class="hover:text-primary">Promoción Literaria</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg mb-3">Legal</h4> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li><a href="https://librosfamosos.com/privacidad" class="hover:text-primary">Política de Privacidad</a></li> |
|
|
<li><a href="https://librosfamosos.com/terminos" class="hover:text-primary">Términos y Condiciones</a></li> |
|
|
<li><a href="https://librosfamosos.com/cookies" class="hover:text-primary">Política de Cookies</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-lg mb-3">Contacto</h4> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-map-marker-alt mr-2"></i> |
|
|
<span>Madrid, España</span> |
|
|
</li> |
|
|
<li class="flex items-center justify-center"> |
|
|
<i class="fas fa-envelope mr-2"></i> |
|
|
<a href="mailto:[email protected]" class="hover:text-primary">[email protected]</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-gray-600 pt-8 border-t border-gray-200"> |
|
|
<p class="mb-2">© 2024 LibrosFamosos.com. Todos los derechos reservados.</p> |
|
|
<p>Transformando ideas en legados literarios desde 2010.</p> |
|
|
<div class="mt-6 flex justify-center space-x-4"> |
|
|
<a href="https://facebook.com/librosfamosos" class="text-gray-600 hover:text-primary text-xl"> |
|
|
<i class="fab fa-facebook"></i> |
|
|
</a> |
|
|
<a href="https://instagram.com/librofamoso" class="text-gray-600 hover:text-primary text-xl"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="https://x.com/libros_famosos" class="text-gray-600 hover:text-primary text-xl"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="https://linkedin.com/company/librosfamosos" class="text-gray-600 hover:text-primary text-xl"> |
|
|
<i class="fab fa-linkedin"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const pagesValue = document.getElementById('pages-value'); |
|
|
const decreasePages = document.getElementById('decrease-pages'); |
|
|
const increasePages = document.getElementById('increase-pages'); |
|
|
const pagesBar = document.getElementById('pages-bar'); |
|
|
let pagesCount = 50; |
|
|
|
|
|
decreasePages.addEventListener('click', () => { |
|
|
if (pagesCount > 50) { |
|
|
pagesCount--; |
|
|
pagesValue.textContent = pagesCount; |
|
|
updateProgressBar(pagesBar, pagesCount, 50, 0.5); |
|
|
} |
|
|
}); |
|
|
|
|
|
increasePages.addEventListener('click', () => { |
|
|
pagesCount++; |
|
|
pagesValue.textContent = pagesCount; |
|
|
updateProgressBar(pagesBar, pagesCount, 50, 0.5); |
|
|
}); |
|
|
|
|
|
|
|
|
const imagesValue = document.getElementById('images-value'); |
|
|
const decreaseImages = document.getElementById('decrease-images'); |
|
|
const increaseImages = document.getElementById('increase-images'); |
|
|
const imagesBar = document.getElementById('images-bar'); |
|
|
let imagesCount = 5; |
|
|
|
|
|
decreaseImages.addEventListener('click', () => { |
|
|
if (imagesCount > 5) { |
|
|
imagesCount--; |
|
|
imagesValue.textContent = imagesCount; |
|
|
updateProgressBar(imagesBar, imagesCount, 5, 10); |
|
|
} |
|
|
}); |
|
|
|
|
|
increaseImages.addEventListener('click', () => { |
|
|
imagesCount++; |
|
|
imagesValue.textContent = imagesCount; |
|
|
updateProgressBar(imagesBar, imagesCount, 5, 10); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateProgressBar(bar, current, base, factor) { |
|
|
let extra = Math.max(0, current - base); |
|
|
let percentage = 50 + Math.min(50, extra * factor); |
|
|
bar.style.width = `${percentage}%`; |
|
|
} |
|
|
|
|
|
|
|
|
const vipExtrasHeader = document.getElementById('vip-extras-header'); |
|
|
const vipExtrasContent = document.getElementById('vip-extras-content'); |
|
|
const vipExtrasIcon = document.getElementById('vip-extras-icon'); |
|
|
|
|
|
vipExtrasHeader.addEventListener('click', () => { |
|
|
vipExtrasContent.classList.toggle('dropdown-open'); |
|
|
vipExtrasIcon.classList.toggle('fa-chevron-down'); |
|
|
vipExtrasIcon.classList.toggle('fa-chevron-up'); |
|
|
}); |
|
|
|
|
|
|
|
|
const floatingElements = document.querySelectorAll('.floating-total'); |
|
|
floatingElements.forEach(el => { |
|
|
setTimeout(() => { |
|
|
el.classList.add('floating-total'); |
|
|
}, 300); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GhostwriterBusiness/calculadora-editorial-de-libros-famosos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
