vamos a hacer ahora el codigo html de la herramienta Pictory AI Esta es la imagen: https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1024,h=570,fit=crop/YBg7XNxJaacRBpWE/captura-de-pantalla-2024-09-24-134705-1536x851-mP435OZzlbhbX8b0.png r Tambien te adjunto el codigo html actual de los botones para que extraigas la información que necesites de ellos: <!-- Vincular fuente Montserrat --> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet"> <!-- Contenedor de botones --> <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; font-family: 'Montserrat', sans-serif;"> <!-- Botón Ver Ficha --> <a href="https://www.firstwin.es/herramientas/pictory" style="background-color: #000; color: #fff; padding: 12px 18px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 14px;"> Ver ficha completa </a> <!-- Botón WhatsApp personalizado --> <a href="https://wa.me/34614697501?text=Hola%2C%20estoy%20interesado%2Fa%20en%20la%20herramienta%20Pictory.AI%20y%20quiero%20asesoramiento." target="_blank" style="display: inline-flex; align-items: center; background-color: #25D366; color: white; padding: 12px 18px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 14px;"> <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" style="width: 18px; height: 18px; margin-right: 8px;"> Info personalizada </a> <!-- Botón Afiliado con enlace definitivo --> <a href="https://pictory.ai/?el=2000b&htrafficsource=pictoryblog" target="_blank" style="background-color: #FFD700; color: #000; padding: 12px 18px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 14px;"> Adquirir herramienta </a> </div> El codigo base que debes utilizar readptando toda la información de la herramienta Pictory AI es este: <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> <style> :root{ --yellow:#FFD500; --black:#000000; --whatsapp:#25D366; --text:#ffffff; } html,body{margin:0;padding:0;background:transparent;color:var(--text);font-family:'Montserrat',sans-serif;} .tool-card{ display:grid; grid-template-columns:500px 1fr; gap:2.5rem; align-items:flex-start; padding:40px 0; } /* ---------- Imagen con zoom sin recortes ---------- / .tool-image{ border-radius:12px; } .tool-image .img-inner{ border-radius:inherit; overflow:hidden; transform:translateZ(0); } .tool-image img{ width:100%;height:auto;display:block; transform-origin:center center; transition:transform .45s ease; will-change:transform; } .tool-image:hover .img-inner img{ transform:scale(1.05); } @media (prefers-reduced-motion:reduce){ .tool-image img{transition:none;} .tool-image:hover .img-inner img{transform:none;} } .tool-subtitle{ margin-top:12px; font-size:18px; line-height:1.4; font-weight:700; color:var(--text); } .tool-subtitle .brand{ color:var(--yellow); font-weight:700; font-size:28px; / HubSpot bajo la imagen a 28 / } .tool-content h3{ font-size:2rem; margin:0 0 1rem; color:var(--yellow); font-weight:700; } .tool-content p{ margin:0 0 .8rem; font-size:16px; line-height:1.6; font-weight:400; } .tool-content p strong{font-weight:700;font-size:16px;} / ---------- Botones + animación ---------- / .tool-buttons{ margin-top:1.8rem; display:flex; gap:14px; flex-wrap:nowrap; } .tool-buttons a{ padding:14px 28px; border-radius:6px; text-decoration:none; font-weight:700; font-size:15px; text-align:center; min-width:180px; display:inline-flex;align-items:center;justify-content:center; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; will-change:transform; } .tool-buttons a:hover, .tool-buttons a:focus-visible{ transform:translateY(-2px) scale(1.02); box-shadow:0 10px 18px rgba(0,0,0,.25); filter:brightness(1.04); outline:none; } .tool-buttons a:active{ transform:translateY(0) scale(1.0); box-shadow:0 6px 12px rgba(0,0,0,.2); } .btn-black{background:var(--black);color:#fff;} .btn-green{background:var(--whatsapp);color:#fff;} .btn-yellow{background:var(--yellow);color:#000;} .btn-green img{width:18px;height:18px;margin-right:8px;} / ---------- Texto extra + animación ---------- / .tool-extra{ margin-top:1.5rem; display:flex; gap:1rem; flex-wrap:wrap; font-size:14px; color:var(--yellow); font-weight:400; } .tool-extra p{ flex:1; margin:0; transition:transform .3s ease, color .3s ease; will-change:transform; } .tool-extra p:hover{ transform:translateY(-3px) scale(1.03); color:#fff; } .mobile-subtitle{display:none;} @media (max-width:768px){ .tool-card{grid-template-columns:1fr;text-align:center;} .tool-subtitle{display:none;} / ocultamos la de desktop */ .mobile-subtitle{ display:block; font-size:19px !important; font-weight:700 !important; line-height:1.4; color:var(--text); margin:.25rem 0 1.2rem; font-family:'Montserrat', sans-serif !important; } .tool-content h3{font-size:28px;margin-bottom:.4rem;} .tool-buttons{flex-direction:column;align-items:center;} .tool-buttons a{width:100%;} .tool-extra{flex-direction:column;text-align:center;} } </style> </head> <body> <div class="tool-card"> <div class="tool-image"> <div class="img-inner"> <img src="https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1024,h=570,fit=crop/YBg7XNxJaacRBpWE/hubspotmeta-2-AVLxLpeBo2ix96qG.jpg" alt="HubSpot"> </div> <p class="tool-subtitle"><span class="brand">HubSpot</span><br>Automatiza tu proceso comercial y dispara tus ventas desde hoy</p> </div> <div class="tool-content"> <h3>HubSpot</h3> <!-- Subtítulo MÓVIL --> <p class="mobile-subtitle">Automatiza tu proceso comercial y dispara tus ventas desde hoy</p> <p>✅ <strong>Todo lo que necesitas para vender más en un solo sitio.</strong><br> Automatiza tareas, gestiona tus contactos y crea embudos de venta realmente efectivos.</p> <p>🔎 <strong>¿Quieres saber si es lo que necesitas?</strong><br> Consulta nuestra ficha completa o pídenos una recomendación personalizada.</p> <p>🎯 <strong>¿Ya lo tienes claro?</strong><br> Accede desde aquí al sitio oficial con todas las garantías y empieza gratis.</p> <div class="tool-buttons"> <a class="btn-black" href="https://www.hubspot.es/products/get-started?hubs_content=www.hubspot.es%2Fpricing%2Fmarketing%2Fenterprise&hubs_content-cta=homepage-nav#" target="_blank" rel="noopener">Solicitar demo</a> <a class="btn-green" href="https://wa.me/34614697501?text=Hola%21%20Estoy%20interesado%2Fa%20en%20HubSpot%20y%20quiero%20asesoramiento.%20%F0%9F%93%8A" target="_blank" rel="noopener"> <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="" aria-hidden="true">Info personalizada </a> <a class="btn-yellow" href="https://www.hubspot.es/pricing/marketing/enterprise?hubs_content=www.hubspot.es%2F&hubs_content-cta=nav-pricing¤cyCode=EUR&term=annual" target="_blank" rel="noopener">Adquirir herramienta</a> </div> <div class="tool-extra"> <p>👉 Accede a una demo gratuita y descubre cómo funciona HubSpot en tu negocio.</p> <p>👉 ¿No sabes si es la herramienta ideal para tu negocio? Escríbenos y te lo resolvemos por WhatsApp.</p> <p>👉 Accede directamente a la web oficial desde nuestro enlace seguro y empieza gratis.</p> </div> </div> </div> </body> </html>
