new site
This commit is contained in:
oliver
@@ -0,0 +1,248 @@
|
||||
// EEAT (Expertise, Experience, Authoritativeness, Trustworthiness) Component
|
||||
function createEEAT(options = {}) {
|
||||
const defaults = {
|
||||
author: {
|
||||
name: "Dr. María Elena Rodríguez",
|
||||
title: "Consultora Senior en Sistemas ERP",
|
||||
experience: "15+ años de experiencia en transformación digital",
|
||||
image: "/maria-elena-rodriguez.png"
|
||||
},
|
||||
publishDate: "20 de julio de 2025",
|
||||
modifiedDate: null
|
||||
};
|
||||
|
||||
const settings = { ...defaults, ...options };
|
||||
|
||||
// Ensure image is always properly set - force global image for consistency
|
||||
if (settings.author) {
|
||||
// Always use the global María Elena Rodríguez image for consistency
|
||||
settings.author.image = "/maria-elena-rodriguez.png";
|
||||
|
||||
// If no name is provided, use default
|
||||
if (!settings.author.name) {
|
||||
settings.author.name = "Dr. María Elena Rodríguez";
|
||||
}
|
||||
|
||||
// If no title is provided, use default
|
||||
if (!settings.author.title) {
|
||||
settings.author.title = "Consultora Senior en Sistemas ERP";
|
||||
}
|
||||
|
||||
// If no experience is provided, use default
|
||||
if (!settings.author.experience) {
|
||||
settings.author.experience = "15+ años de experiencia en transformación digital";
|
||||
}
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="eeat-section">
|
||||
<div class="container">
|
||||
<div class="eeat-container">
|
||||
<div class="eeat-author-info">
|
||||
<div class="eeat-author-image">
|
||||
<div class="author-photo-container">
|
||||
<img
|
||||
src="${settings.author.image}"
|
||||
alt="${settings.author.name}"
|
||||
class="author-photo"
|
||||
onerror="this.onerror=null; this.style.display='none'; this.parentElement.classList.add('fallback');"
|
||||
/>
|
||||
<div class="author-photo-fallback">
|
||||
<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
|
||||
<circle cx="40" cy="40" r="40" fill="#2a2a2a"/>
|
||||
<path d="M40 45C47.732 45 54 38.732 54 31C54 23.268 47.732 17 40 17C32.268 17 26 23.268 26 31C26 38.732 32.268 45 40 45Z" fill="#FF6B35"/>
|
||||
<path d="M40 50C26.745 50 16 58.954 16 70V72C16 73.105 16.895 74 18 74H62C63.105 74 64 73.105 64 72V70C64 58.954 53.255 50 40 50Z" fill="#FF6B35"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eeat-author-details">
|
||||
<h3 class="eeat-author-name">${settings.author.name}</h3>
|
||||
<p class="eeat-author-title">${settings.author.title}</p>
|
||||
<p class="eeat-author-experience">${settings.author.experience}</p>
|
||||
<div class="eeat-dates">
|
||||
<span class="eeat-publish-date">
|
||||
<strong>Publicado:</strong> ${settings.publishDate}
|
||||
</span>
|
||||
${settings.modifiedDate ? `
|
||||
<span class="eeat-modified-date">
|
||||
<strong>Actualizado:</strong> ${settings.modifiedDate}
|
||||
</span>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eeat-trust-signals">
|
||||
<div class="trust-signal">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="#FF6B35">
|
||||
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
|
||||
</svg>
|
||||
<span>Experto Certificado</span>
|
||||
</div>
|
||||
<div class="trust-signal">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="#FF6B35">
|
||||
<path d="M9 11H7V13H9V11ZM13 11H11V13H13V11ZM17 11H15V13H17V11ZM19 4H18V2H16V4H8V2H6V4H5C3.89 4 3.01 4.9 3.01 6L3 20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 20H5V9H19V20Z"/>
|
||||
</svg>
|
||||
<span>${settings.author.experience}</span>
|
||||
</div>
|
||||
<div class="trust-signal">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="#FF6B35">
|
||||
<path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1ZM10 17L6 13L7.41 11.59L10 14.17L16.59 7.58L18 9L10 17Z"/>
|
||||
</svg>
|
||||
<span>Contenido Verificado</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.eeat-section {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
|
||||
border-top: 2px solid var(--primary-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
padding: 3rem 0;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.eeat-container {
|
||||
background: var(--light-bg);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
border: 1px solid rgba(255,107,53,0.2);
|
||||
box-shadow: 0 4px 20px rgba(255,107,53,0.1);
|
||||
}
|
||||
|
||||
.eeat-author-info {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.eeat-author-image {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.author-photo-container {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--primary-color);
|
||||
box-shadow: 0 4px 12px rgba(255,107,53,0.3);
|
||||
position: relative;
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.author-photo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.author-photo-fallback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.author-photo-container.fallback .author-photo-fallback {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.author-photo-container.fallback .author-photo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.eeat-author-details {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.eeat-author-name {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.eeat-author-title {
|
||||
color: var(--white);
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.eeat-author-experience {
|
||||
color: var(--text-color);
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.eeat-dates {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
color: var(--text-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.eeat-dates strong {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.eeat-trust-signals {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255,107,53,0.2);
|
||||
}
|
||||
|
||||
.trust-signal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(255,107,53,0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255,107,53,0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.trust-signal:hover {
|
||||
background: rgba(255,107,53,0.1);
|
||||
border-color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.trust-signal svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trust-signal span {
|
||||
color: var(--text-color);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.eeat-author-info {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.eeat-dates {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.eeat-trust-signals {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
}
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,79 @@
|
||||
// Footer Component - Multi-Language Support with Hreflang
|
||||
function createFooter() {
|
||||
// Get current language and labels
|
||||
const lang = typeof LanguageRouter !== 'undefined' ? LanguageRouter.detectLanguage() : 'es';
|
||||
const labels = typeof LanguageRouter !== 'undefined' ? LanguageRouter.getFooterLabels() : {
|
||||
contact: 'Contacto',
|
||||
quickLinks: 'Enlaces Rápidos',
|
||||
legal: 'Legal',
|
||||
modules: 'Módulos Odoo',
|
||||
benefits: 'Beneficios',
|
||||
community: 'Comunidad',
|
||||
legalNotice: 'Aviso Legal',
|
||||
privacy: 'Política de Privacidad',
|
||||
cookies: 'Política de Cookies',
|
||||
terms: 'Términos de Uso',
|
||||
copyright: 'Todos los derechos reservados.',
|
||||
experts: 'Expertos en soluciones Odoo ERP'
|
||||
};
|
||||
const prefix = typeof LanguageRouter !== 'undefined' ? LanguageRouter.getLinkPrefix() : '';
|
||||
|
||||
// Generate hreflang tags for SEO
|
||||
const hreflangTags = typeof LanguageRouter !== 'undefined'
|
||||
? LanguageRouter.generateHreflangTags()
|
||||
: '';
|
||||
|
||||
// Inject hreflang into head if not already done
|
||||
if (typeof LanguageRouter !== 'undefined' && !document.head.querySelector('link[hreflang]')) {
|
||||
LanguageRouter.injectHreflangTags();
|
||||
}
|
||||
|
||||
return `
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>Apex AI Research Labs LLC</h3>
|
||||
<p>1309 Coffeen Avenue STE 1200<br>
|
||||
Sheridan Wyoming 82801<br>
|
||||
${lang === 'es' ? 'Estados Unidos' : lang === 'de' ? 'Vereinigte Staaten' : lang === 'fr' ? 'États-Unis' : 'United States'}</p>
|
||||
<p>${lang === 'es' ? 'Propietaria' : lang === 'de' ? 'Inhaberin' : lang === 'fr' ? 'Propriétaire' : 'Owner'}: Olga Goertz</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>${labels.contact}</h3>
|
||||
<p>Email: <a href="mailto:info@odoo-expertos.com">info@odoo-expertos.com</a></p>
|
||||
<p>${labels.experts}</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>${labels.quickLinks}</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="${prefix}/index.html">${lang === 'es' ? 'Inicio' : lang === 'de' ? 'Startseite' : lang === 'fr' ? 'Accueil' : 'Home'}</a></li>
|
||||
<li><a href="#modules">${labels.modules}</a></li>
|
||||
<li><a href="#benefits">${labels.benefits}</a></li>
|
||||
<li><a href="#community">${labels.community}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>${labels.legal}</h3>
|
||||
<ul class="footer-links">
|
||||
<li><a href="${prefix}/legal-notice.html">${labels.legalNotice}</a></li>
|
||||
<li><a href="${prefix}/privacy-policy.html">${labels.privacy}</a></li>
|
||||
<li><a href="${prefix}/cookie-policy.html">${labels.cookies}</a></li>
|
||||
<li><a href="${prefix}/terms-of-use.html">${labels.terms}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© ${new Date().getFullYear()} Apex AI Research Labs LLC. ${labels.copyright}</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
`;
|
||||
}
|
||||
|
||||
// Inject hreflang meta tags on page load for SEO
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof LanguageRouter !== 'undefined') {
|
||||
LanguageRouter.injectHreflangTags();
|
||||
}
|
||||
});
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/* Footer Component */ function createFooter(){return `<footer class="site-footer"><div class="container"><div class="footer-content"><div class="footer-section"><h3>Apex AI Research Labs LLC</h3><p>1309 Coffeen Avenue STE 1200<br>Sheridan Wyoming 82801<br>Estados Unidos</p><p>Propietaria:Olga Goertz</p></div><div class="footer-section"><h3>Contacto</h3><p>Email:<a href="mailto:info@odoo-expertos.com">info@odoo-expertos.com</a></p><p>Expertos en soluciones Odoo ERP</p></div><div class="footer-section"><h3>Enlaces Rápidos</h3><ul class="footer-links"><li><a href="/index.html">Inicio</a></li><li><a href="#modules">Módulos Odoo</a></li><li><a href="#benefits">Beneficios</a></li><li><a href="#community">Comunidad</a></li></ul></div><div class="footer-section"><h3>Legal</h3><ul class="footer-links"><li><a href="/legal-notice.html">Aviso Legal</a></li><li><a href="/privacy-policy.html">Política de Privacidad</a></li><li><a href="/cookie-policy.html">Política de Cookies</a></li><li><a href="/terms-of-use.html">Términos de Uso</a></li></ul></div></div><div class="footer-bottom"><p>©2024 Apex AI Research Labs LLC. Todos los derechos reservados.</p></div></div></footer>`;}
|
||||
@@ -0,0 +1,70 @@
|
||||
// Header Component - Performance Optimized with Multi-Language Support
|
||||
function createHeader() {
|
||||
// Global performance optimization: Add preconnect hints for all pages
|
||||
if (!document.head.querySelector('link[href="https://d3js.org"]')) {
|
||||
const d3Preconnect = document.createElement('link');
|
||||
d3Preconnect.rel = 'preconnect';
|
||||
d3Preconnect.href = 'https://d3js.org';
|
||||
d3Preconnect.crossOrigin = 'anonymous';
|
||||
document.head.appendChild(d3Preconnect);
|
||||
|
||||
const pexelsPreconnect = document.createElement('link');
|
||||
pexelsPreconnect.rel = 'preconnect';
|
||||
pexelsPreconnect.href = 'https://images.pexels.com';
|
||||
pexelsPreconnect.crossOrigin = 'anonymous';
|
||||
document.head.appendChild(pexelsPreconnect);
|
||||
}
|
||||
|
||||
// Get current language and labels
|
||||
const lang = typeof LanguageRouter !== 'undefined' ? LanguageRouter.detectLanguage() : 'es';
|
||||
const labels = typeof LanguageRouter !== 'undefined' ? LanguageRouter.getNavLabels() : {
|
||||
home: 'Inicio', odoo: 'Odoo', odooIA: 'Odoo IA', hosting: 'Hosting Odoo'
|
||||
};
|
||||
const prefix = typeof LanguageRouter !== 'undefined' ? LanguageRouter.getLinkPrefix() : '';
|
||||
|
||||
// Get language switcher HTML
|
||||
const langSwitcher = typeof LanguageRouter !== 'undefined'
|
||||
? LanguageRouter.createLanguageSwitcher()
|
||||
: '';
|
||||
|
||||
return `
|
||||
<header class="site-header">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="nav-brand">
|
||||
<a href="${prefix}/" class="logo">
|
||||
<span class="logo-text">Odoo Expertos</span>
|
||||
</a>
|
||||
</div>
|
||||
<button class="nav-toggle" aria-label="Toggle navigation">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<div class="nav-menu">
|
||||
<ul class="nav-list">
|
||||
<li><a href="${prefix}/">${labels.home}</a></li>
|
||||
<li><a href="${prefix}/odoo/">${labels.odoo}</a></li>
|
||||
<li><a href="${prefix}/odoo-ia/">${labels.odooIA}</a></li>
|
||||
<li><a href="${prefix}/odoo-hosting/">${labels.hosting}</a></li>
|
||||
</ul>
|
||||
${langSwitcher}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
`;
|
||||
}
|
||||
|
||||
// Mobile menu toggle
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
|
||||
if (navToggle) {
|
||||
navToggle.addEventListener('click', function() {
|
||||
navMenu.classList.toggle('active');
|
||||
navToggle.classList.toggle('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/* Header Component */ function createHeader(){return `<header class="site-header"><nav class="navbar"><div class="container"><div class="nav-brand"><a href="/" class="logo"><span class="logo-text">Odoo Expertos</span></a></div><button class="nav-toggle" aria-label="Toggle navigation"><span></span><span></span><span></span></button><div class="nav-menu"><ul class="nav-list"><li><a href="/">Inicio</a></li><li><a href="/odoo/">Odoo</a></li><li><a href="/odoo-ia/">Odoo IA</a></li><li><a href="/odoo-hosting/">Hosting Odoo</a></li></ul></div></div></nav></header>`;}document.addEventListener('DOMContentLoaded',function(){const navToggle=document.querySelector('.nav-toggle');const navMenu=document.querySelector('.nav-menu');if (navToggle){navToggle.addEventListener('click',function(){navMenu.classList.toggle('active');navToggle.classList.toggle('active');});}});
|
||||
@@ -0,0 +1,693 @@
|
||||
// Animated Hosting Banner Component with D3.js
|
||||
function createAnimatedHostingBanner() {
|
||||
const bannerId = 'hosting-banner-' + Date.now();
|
||||
|
||||
const bannerHTML = `
|
||||
<div id="${bannerId}" class="animated-hosting-banner-wrapper">
|
||||
<div class="animated-hosting-banner">
|
||||
<div class="banner-background-animation">
|
||||
<svg id="banner-svg-${bannerId}" width="100%" height="100%"></svg>
|
||||
</div>
|
||||
|
||||
<div class="banner-content-container">
|
||||
<div class="banner-left-section">
|
||||
<div class="banner-icon-animated">
|
||||
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 16V8C20.9996 7.64927 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.27L13 2.27C12.696 2.09446 12.3511 2.00205 12 2.00205C11.6489 2.00205 11.304 2.09446 11 2.27L4 6.27C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64927 3 8V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.9979 12 21.9979C12.3511 21.9979 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.27 6.96L12 12.01L20.73 6.96" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 22.08V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner-center-section">
|
||||
<h3 class="banner-headline">
|
||||
<span class="banner-text-animate">Tu Odoo es Como un Ferrari con Motor de Fiat</span>
|
||||
</h3>
|
||||
<p class="banner-subheadline">
|
||||
<span class="banner-metric">7 Ubicaciones Globales</span>
|
||||
<span class="banner-separator">•</span>
|
||||
<span class="banner-metric">IA Integrada</span>
|
||||
<span class="banner-separator">•</span>
|
||||
<span class="banner-metric">60 Días Garantía</span>
|
||||
</p>
|
||||
<div class="banner-features">
|
||||
<div class="feature-badge">🚀 De Side Hustle a Imperio</div>
|
||||
<div class="feature-badge">🤖 Agentes IA Multilingües</div>
|
||||
<div class="feature-badge">🛡️ Migración Sin Drama</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner-right-section">
|
||||
<div class="banner-transformation-text">
|
||||
<span class="transformation-label">Deja de Sobrevivir</span>
|
||||
<div class="transformation-action">
|
||||
<span class="action-text">Empieza a</span>
|
||||
<span class="action-highlight">ESCALAR</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://ODOO4projects.com?utm_source=X5Y2I933&utm_medium=lph"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="banner-cta-button">
|
||||
<span class="cta-text">Desbloquea Tu Potencial</span>
|
||||
<svg class="cta-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<p class="banner-guarantee">Sin Riesgo • Sin Compromiso</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="banner-close-btn" onclick="closeAnimatedBanner('${bannerId}')" aria-label="Cerrar banner">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add styles
|
||||
const styles = `
|
||||
<style>
|
||||
.animated-hosting-banner-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 4rem 0 2rem;
|
||||
padding: 0 1rem;
|
||||
animation: bannerSlideUp 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
@keyframes bannerSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animated-hosting-banner {
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(255, 107, 53, 0.3),
|
||||
0 10px 30px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.animated-hosting-banner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 107, 53, 0.15) 0%,
|
||||
rgba(255, 138, 80, 0.1) 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 107, 53, 0.05) 75%,
|
||||
rgba(255, 138, 80, 0.15) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.banner-background-animation {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.banner-content-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 3rem;
|
||||
gap: 2rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Left Section - Icon */
|
||||
.banner-left-section {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.banner-icon-animated {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8A50 100%);
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
animation: iconPulse 3s ease-in-out infinite;
|
||||
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
|
||||
}
|
||||
|
||||
@keyframes iconPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.05) rotate(5deg);
|
||||
box-shadow: 0 15px 40px rgba(255, 107, 53, 0.6);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1) rotate(-5deg);
|
||||
box-shadow: 0 20px 50px rgba(255, 107, 53, 0.5);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.05) rotate(3deg);
|
||||
box-shadow: 0 15px 40px rgba(255, 107, 53, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
/* Center Section - Content */
|
||||
.banner-center-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.banner-headline {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: #FFFFFF;
|
||||
margin: 0 0 0.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.banner-text-animate {
|
||||
background: linear-gradient(90deg, #FFFFFF, #FF6B35, #FFFFFF);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shimmer 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-subheadline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.95rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.banner-metric {
|
||||
font-weight: 600;
|
||||
color: #FF8A50;
|
||||
animation: metricGlow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes metricGlow {
|
||||
from {
|
||||
text-shadow: 0 0 5px rgba(255, 138, 80, 0.5);
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 15px rgba(255, 138, 80, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-separator {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.banner-features {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: rgba(255, 107, 53, 0.1);
|
||||
border: 1px solid rgba(255, 107, 53, 0.3);
|
||||
border-radius: 20px;
|
||||
color: #FF8A50;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
animation: badgeFadeIn 0.5s ease-out backwards;
|
||||
}
|
||||
|
||||
.feature-badge:nth-child(1) { animation-delay: 0.2s; }
|
||||
.feature-badge:nth-child(2) { animation-delay: 0.4s; }
|
||||
.feature-badge:nth-child(3) { animation-delay: 0.6s; }
|
||||
|
||||
@keyframes badgeFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Right Section - CTA */
|
||||
.banner-right-section {
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.banner-transformation-text {
|
||||
margin-bottom: 1.5rem;
|
||||
animation: transformSlideIn 0.8s ease-out backwards;
|
||||
animation-delay: 0.3s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes transformSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px) scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.transformation-label {
|
||||
display: block;
|
||||
color: #999;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.transformation-action {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
color: #e0e0e0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.action-highlight {
|
||||
color: #FFFFFF;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
background: linear-gradient(90deg, #FF6B35, #FFD700, #FF6B35);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shimmerGold 3s linear infinite;
|
||||
text-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
|
||||
}
|
||||
|
||||
@keyframes shimmerGold {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8A50 100%);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow:
|
||||
0 10px 25px rgba(255, 107, 53, 0.3),
|
||||
0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-cta-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
.banner-cta-button:hover::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.banner-cta-button:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 15px 35px rgba(255, 107, 53, 0.4),
|
||||
0 8px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cta-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta-arrow {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: arrowMove 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes arrowMove {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-guarantee {
|
||||
margin: 0.5rem 0 0;
|
||||
color: #999;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.banner-close-btn {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.banner-close-btn:hover {
|
||||
background: rgba(255, 107, 53, 0.2);
|
||||
border-color: rgba(255, 107, 53, 0.4);
|
||||
color: #FF6B35;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 968px) {
|
||||
.banner-content-container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.banner-icon-animated {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.banner-headline {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.banner-subheadline {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-features {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-right-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-cta-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.banner-headline {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.banner-subheadline {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.banner-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.action-highlight {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.transformation-label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hidden state */
|
||||
.animated-hosting-banner-wrapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
return styles + bannerHTML;
|
||||
}
|
||||
|
||||
// Function to close the banner
|
||||
function closeAnimatedBanner(bannerId) {
|
||||
const banner = document.getElementById(bannerId);
|
||||
if (banner) {
|
||||
banner.style.animation = 'bannerSlideDown 0.5s ease-in forwards';
|
||||
setTimeout(() => {
|
||||
banner.classList.add('hidden');
|
||||
localStorage.setItem('hostingBannerClosed', 'true');
|
||||
localStorage.setItem('hostingBannerClosedDate', new Date().toISOString());
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
// Add slide down animation
|
||||
const slideDownStyle = document.createElement('style');
|
||||
slideDownStyle.textContent = `
|
||||
@keyframes bannerSlideDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(slideDownStyle);
|
||||
|
||||
// Function to initialize D3.js animations
|
||||
function initializeBannerAnimations(bannerId) {
|
||||
// Only run if D3 is available
|
||||
if (typeof d3 === 'undefined') {
|
||||
console.log('D3.js not loaded, skipping animations');
|
||||
return;
|
||||
}
|
||||
|
||||
const svg = d3.select(`#banner-svg-${bannerId}`);
|
||||
const width = 1200;
|
||||
const height = 200;
|
||||
|
||||
svg.attr('viewBox', `0 0 ${width} ${height}`)
|
||||
.attr('preserveAspectRatio', 'xMidYMid slice');
|
||||
|
||||
// Create animated particles
|
||||
const particleCount = 30;
|
||||
const particles = Array.from({length: particleCount}, (_, i) => ({
|
||||
id: i,
|
||||
x: Math.random() * width,
|
||||
y: Math.random() * height,
|
||||
r: Math.random() * 3 + 1,
|
||||
dx: (Math.random() - 0.5) * 2,
|
||||
dy: (Math.random() - 0.5) * 2,
|
||||
opacity: Math.random() * 0.5 + 0.2
|
||||
}));
|
||||
|
||||
// Add gradient definitions
|
||||
const defs = svg.append('defs');
|
||||
|
||||
const gradient = defs.append('linearGradient')
|
||||
.attr('id', `particle-gradient-${bannerId}`)
|
||||
.attr('x1', '0%')
|
||||
.attr('y1', '0%')
|
||||
.attr('x2', '100%')
|
||||
.attr('y2', '100%');
|
||||
|
||||
gradient.append('stop')
|
||||
.attr('offset', '0%')
|
||||
.style('stop-color', '#FF6B35')
|
||||
.style('stop-opacity', 0.8);
|
||||
|
||||
gradient.append('stop')
|
||||
.attr('offset', '100%')
|
||||
.style('stop-color', '#FF8A50')
|
||||
.style('stop-opacity', 0.4);
|
||||
|
||||
// Create particle elements
|
||||
const particleElements = svg.selectAll('circle')
|
||||
.data(particles)
|
||||
.enter()
|
||||
.append('circle')
|
||||
.attr('cx', d => d.x)
|
||||
.attr('cy', d => d.y)
|
||||
.attr('r', d => d.r)
|
||||
.attr('fill', `url(#particle-gradient-${bannerId})`)
|
||||
.attr('opacity', d => d.opacity);
|
||||
|
||||
// Animate particles
|
||||
function animateParticles() {
|
||||
particles.forEach(p => {
|
||||
p.x += p.dx;
|
||||
p.y += p.dy;
|
||||
|
||||
// Wrap around edges
|
||||
if (p.x < 0) p.x = width;
|
||||
if (p.x > width) p.x = 0;
|
||||
if (p.y < 0) p.y = height;
|
||||
if (p.y > height) p.y = 0;
|
||||
});
|
||||
|
||||
particleElements
|
||||
.data(particles)
|
||||
.attr('cx', d => d.x)
|
||||
.attr('cy', d => d.y);
|
||||
|
||||
requestAnimationFrame(animateParticles);
|
||||
}
|
||||
|
||||
animateParticles();
|
||||
|
||||
// Add connection lines between nearby particles
|
||||
const connectionThreshold = 100;
|
||||
|
||||
function updateConnections() {
|
||||
// Remove existing lines
|
||||
svg.selectAll('line').remove();
|
||||
|
||||
// Add new connections
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
for (let j = i + 1; j < particles.length; j++) {
|
||||
const dx = particles[i].x - particles[j].x;
|
||||
const dy = particles[i].y - particles[j].y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < connectionThreshold) {
|
||||
const opacity = (1 - distance / connectionThreshold) * 0.2;
|
||||
svg.append('line')
|
||||
.attr('x1', particles[i].x)
|
||||
.attr('y1', particles[i].y)
|
||||
.attr('x2', particles[j].x)
|
||||
.attr('y2', particles[j].y)
|
||||
.attr('stroke', '#FF6B35')
|
||||
.attr('stroke-width', 0.5)
|
||||
.attr('opacity', opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(updateConnections, 100);
|
||||
}
|
||||
|
||||
updateConnections();
|
||||
}
|
||||
|
||||
// Check if banner should be shown
|
||||
function shouldShowAnimatedBanner() {
|
||||
const currentPath = window.location.pathname;
|
||||
const isHostingPage = currentPath.includes('/odoo-hosting/');
|
||||
const bannerClosed = localStorage.getItem('hostingBannerClosed');
|
||||
const closedDate = localStorage.getItem('hostingBannerClosedDate');
|
||||
|
||||
// Reset after 24 hours
|
||||
if (closedDate) {
|
||||
const dayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
|
||||
if (new Date(closedDate) < dayAgo) {
|
||||
localStorage.removeItem('hostingBannerClosed');
|
||||
localStorage.removeItem('hostingBannerClosedDate');
|
||||
return isHostingPage;
|
||||
}
|
||||
}
|
||||
|
||||
return isHostingPage && bannerClosed !== 'true';
|
||||
}
|
||||
|
||||
// Auto-initialize when DOM is ready
|
||||
if (typeof window !== 'undefined') {
|
||||
// Wait for DOM and D3 to be ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(() => {
|
||||
const bannerId = 'hosting-banner-' + Date.now();
|
||||
if (shouldShowAnimatedBanner()) {
|
||||
initializeBannerAnimations(bannerId);
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
} else {
|
||||
// DOM is already ready
|
||||
setTimeout(() => {
|
||||
const bannerId = 'hosting-banner-' + Date.now();
|
||||
if (shouldShowAnimatedBanner()) {
|
||||
initializeBannerAnimations(bannerId);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,587 @@
|
||||
// Multiple Banner Variations with Different Marketing Angles
|
||||
function createAnimatedHostingBannerVariation(variation = 1) {
|
||||
const bannerId = 'hosting-banner-' + Date.now() + '-v' + variation;
|
||||
|
||||
// Define 5 different marketing angle variations
|
||||
const variations = {
|
||||
1: {
|
||||
// Angle: Save Money / Stop Overpaying
|
||||
headline: "¿Pagando $500+ por Hosting Mediocre?",
|
||||
subheadline: "Estás Quemando Dinero",
|
||||
metrics: ["50% Menos Costo", "3X Más Rápido", "ROI en 30 Días"],
|
||||
badges: ["💸 Ahorra Miles al Año", "⚡ Migración Gratis", "🎯 Sin Costos Ocultos"],
|
||||
transformLabel: "Hosting Premium",
|
||||
transformAction: "Mitad de",
|
||||
transformHighlight: "PRECIO",
|
||||
ctaText: "Calcula Tu Ahorro",
|
||||
guarantee: "Garantía de Precio • 60 Días"
|
||||
},
|
||||
2: {
|
||||
// Angle: Scale Your Business
|
||||
headline: "3 Clientes al Mes → 300 Clientes al Mes",
|
||||
subheadline: "El Secreto: Infraestructura que Escala",
|
||||
metrics: ["Auto-Scaling", "Multi-Region", "IA Predictiva"],
|
||||
badges: ["📈 Crece Sin Límites", "🌍 7 Data Centers", "🤖 IA que Aprende"],
|
||||
transformLabel: "Tu Negocio Puede",
|
||||
transformAction: "Crecer",
|
||||
transformHighlight: "10X",
|
||||
ctaText: "Empieza a Escalar",
|
||||
guarantee: "Escalabilidad Infinita • Sin Sorpresas"
|
||||
},
|
||||
3: {
|
||||
// Angle: Competition / Falling Behind
|
||||
headline: "Tu Competencia Ya Migró a IA",
|
||||
subheadline: "¿Y Tú Sigues con Excel?",
|
||||
metrics: ["IA Integrada", "Automatización Total", "Decisiones en Tiempo Real"],
|
||||
badges: ["🏆 Ventaja Competitiva", "🚀 Tecnología 2025", "📊 Dashboards IA"],
|
||||
transformLabel: "No Te Quedes",
|
||||
transformAction: "En el",
|
||||
transformHighlight: "PASADO",
|
||||
ctaText: "Alcanza a Tu Competencia",
|
||||
guarantee: "Implementación Express • 7 Días"
|
||||
},
|
||||
4: {
|
||||
// Angle: Pain Point / Frustration
|
||||
headline: "¿Harto de que Odoo se Caiga en el Peor Momento?",
|
||||
subheadline: "Servidor Lento = Clientes Perdidos",
|
||||
metrics: ["99.99% Uptime", "Respuesta <2seg", "Soporte Inmediato"],
|
||||
badges: ["🛡️ Nunca Más Caídas", "⚡ Velocidad Garantizada", "🔧 Fix en <1 Hora"],
|
||||
transformLabel: "Olvídate del",
|
||||
transformAction: "Dolor de",
|
||||
transformHighlight: "CABEZA",
|
||||
ctaText: "Hosting Sin Drama",
|
||||
guarantee: "SLA Empresarial • Compensación por Caídas"
|
||||
},
|
||||
5: {
|
||||
// Angle: Authority / Expertise
|
||||
headline: "El Hosting que Usan los Top 100 en Odoo",
|
||||
subheadline: "Respaldado por 10 Años de Experiencia",
|
||||
metrics: ["500+ Empresas", "15M+ Transacciones", "0 Brechas Seguridad"],
|
||||
badges: ["🏅 Certificado Odoo Gold", "🔐 ISO 27001", "⭐ 4.9/5 Rating"],
|
||||
transformLabel: "Únete a los",
|
||||
transformAction: "Líderes del",
|
||||
transformHighlight: "MERCADO",
|
||||
ctaText: "Solicita Demo Exclusiva",
|
||||
guarantee: "Trusted by Fortune 500 • Case Studies Disponibles"
|
||||
}
|
||||
};
|
||||
|
||||
const content = variations[variation] || variations[1];
|
||||
|
||||
const bannerHTML = `
|
||||
<div id="${bannerId}" class="animated-hosting-banner-wrapper variation-${variation}">
|
||||
<div class="animated-hosting-banner">
|
||||
<div class="banner-background-animation">
|
||||
<svg id="banner-svg-${bannerId}" width="100%" height="100%"></svg>
|
||||
</div>
|
||||
|
||||
<div class="banner-content-container">
|
||||
<div class="banner-left-section">
|
||||
<div class="banner-icon-animated">
|
||||
<svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 16V8C20.9996 7.64927 20.9071 7.30481 20.7315 7.00116C20.556 6.69751 20.3037 6.44536 20 6.27L13 2.27C12.696 2.09446 12.3511 2.00205 12 2.00205C11.6489 2.00205 11.304 2.09446 11 2.27L4 6.27C3.69626 6.44536 3.44398 6.69751 3.26846 7.00116C3.09294 7.30481 3.00036 7.64927 3 8V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.9979 12 21.9979C12.3511 21.9979 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.27 6.96L12 12.01L20.73 6.96" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 22.08V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner-center-section">
|
||||
<h3 class="banner-headline">
|
||||
<span class="banner-text-animate">${content.headline}</span>
|
||||
</h3>
|
||||
<p class="banner-subheadline-extra">
|
||||
${content.subheadline}
|
||||
</p>
|
||||
<p class="banner-subheadline">
|
||||
<span class="banner-metric">${content.metrics[0]}</span>
|
||||
<span class="banner-separator">•</span>
|
||||
<span class="banner-metric">${content.metrics[1]}</span>
|
||||
<span class="banner-separator">•</span>
|
||||
<span class="banner-metric">${content.metrics[2]}</span>
|
||||
</p>
|
||||
<div class="banner-features">
|
||||
${content.badges.map(badge => `<div class="feature-badge">${badge}</div>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner-right-section">
|
||||
<div class="banner-transformation-text">
|
||||
<span class="transformation-label">${content.transformLabel}</span>
|
||||
<div class="transformation-action">
|
||||
<span class="action-text">${content.transformAction}</span>
|
||||
<span class="action-highlight">${content.transformHighlight}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://ODOO4projects.com?utm_source=X5Y2I933&utm_medium=lph&utm_content=v${variation}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="banner-cta-button">
|
||||
<span class="cta-text">${content.ctaText}</span>
|
||||
<svg class="cta-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<p class="banner-guarantee">${content.guarantee}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add styles (same as original but with extra styles for variations)
|
||||
const styles = `
|
||||
<style>
|
||||
.animated-hosting-banner-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 2rem 0;
|
||||
padding: 0 1rem;
|
||||
animation: bannerSlideUp 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
@keyframes bannerSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animated-hosting-banner {
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(255, 107, 53, 0.3),
|
||||
0 10px 30px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.animated-hosting-banner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 107, 53, 0.15) 0%,
|
||||
rgba(255, 138, 80, 0.1) 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 107, 53, 0.05) 75%,
|
||||
rgba(255, 138, 80, 0.15) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.banner-background-animation {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.banner-content-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 3rem;
|
||||
gap: 2rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Left Section - Icon */
|
||||
.banner-left-section {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.banner-icon-animated {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8A50 100%);
|
||||
border-radius: 20px;
|
||||
color: white;
|
||||
animation: iconPulse 3s ease-in-out infinite;
|
||||
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
|
||||
}
|
||||
|
||||
@keyframes iconPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.05) rotate(5deg);
|
||||
box-shadow: 0 15px 40px rgba(255, 107, 53, 0.6);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1) rotate(-5deg);
|
||||
box-shadow: 0 20px 50px rgba(255, 107, 53, 0.5);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.05) rotate(3deg);
|
||||
box-shadow: 0 15px 40px rgba(255, 107, 53, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
/* Center Section - Content */
|
||||
.banner-center-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.banner-headline {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
color: #FFFFFF;
|
||||
margin: 0 0 0.3rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.banner-text-animate {
|
||||
background: linear-gradient(90deg, #FFFFFF, #FF6B35, #FFFFFF);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shimmer 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-subheadline-extra {
|
||||
color: #FFD700;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.5rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.banner-subheadline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: #e0e0e0;
|
||||
font-size: 0.95rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.banner-metric {
|
||||
font-weight: 600;
|
||||
color: #FF8A50;
|
||||
animation: metricGlow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes metricGlow {
|
||||
from {
|
||||
text-shadow: 0 0 5px rgba(255, 138, 80, 0.5);
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 15px rgba(255, 138, 80, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-separator {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.banner-features {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: rgba(255, 107, 53, 0.1);
|
||||
border: 1px solid rgba(255, 107, 53, 0.3);
|
||||
border-radius: 20px;
|
||||
color: #FF8A50;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
animation: badgeFadeIn 0.5s ease-out backwards;
|
||||
}
|
||||
|
||||
.feature-badge:nth-child(1) { animation-delay: 0.2s; }
|
||||
.feature-badge:nth-child(2) { animation-delay: 0.4s; }
|
||||
.feature-badge:nth-child(3) { animation-delay: 0.6s; }
|
||||
|
||||
@keyframes badgeFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Right Section - CTA */
|
||||
.banner-right-section {
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.banner-transformation-text {
|
||||
margin-bottom: 1.5rem;
|
||||
animation: transformSlideIn 0.8s ease-out backwards;
|
||||
animation-delay: 0.3s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes transformSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px) scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.transformation-label {
|
||||
display: block;
|
||||
color: #999;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.transformation-action {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
color: #e0e0e0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.action-highlight {
|
||||
color: #FFFFFF;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
background: linear-gradient(90deg, #FF6B35, #FFD700, #FF6B35);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shimmerGold 3s linear infinite;
|
||||
text-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
|
||||
}
|
||||
|
||||
@keyframes shimmerGold {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8A50 100%);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow:
|
||||
0 10px 25px rgba(255, 107, 53, 0.3),
|
||||
0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.banner-cta-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
.banner-cta-button:hover::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.banner-cta-button:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 15px 35px rgba(255, 107, 53, 0.4),
|
||||
0 8px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cta-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta-arrow {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: arrowMove 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes arrowMove {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-guarantee {
|
||||
margin: 0.5rem 0 0;
|
||||
color: #999;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Variation label */
|
||||
.variation-label {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: rgba(255, 107, 53, 0.9);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Variation-specific color schemes */
|
||||
.variation-1 .banner-icon-animated {
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
|
||||
}
|
||||
|
||||
.variation-2 .banner-icon-animated {
|
||||
background: linear-gradient(135deg, #2196F3 0%, #03A9F4 100%);
|
||||
}
|
||||
|
||||
.variation-3 .banner-icon-animated {
|
||||
background: linear-gradient(135deg, #F44336 0%, #FF5722 100%);
|
||||
}
|
||||
|
||||
.variation-4 .banner-icon-animated {
|
||||
background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%);
|
||||
}
|
||||
|
||||
.variation-5 .banner-icon-animated {
|
||||
background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 968px) {
|
||||
.banner-content-container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.banner-icon-animated {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.banner-headline {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.banner-subheadline {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-features {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-right-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-cta-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.banner-headline {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.banner-subheadline {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.banner-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.action-highlight {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.transformation-label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hidden state */
|
||||
.animated-hosting-banner-wrapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
return styles + bannerHTML;
|
||||
}
|
||||
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user