new site
This commit is contained in:
oliver
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user