Redesigns hero section for maximum conversions with clean layout, high readability, and clear CTAs
Size
19.9 KB
Version
2.0.1
Created
Dec 30, 2025
Updated
about 1 month ago
1// ==UserScript==
2// @name Titan Painting Hero Conversion Optimizer
3// @description Redesigns hero section for maximum conversions with clean layout, high readability, and clear CTAs
4// @version 2.0.1
5// @match https://*.dtestapp.com/*
6// ==/UserScript==
7(function() {
8 'use strict';
9
10 console.log('Titan Painting Hero Conversion Optimizer: Starting...');
11
12 function optimizeHero() {
13 console.log('Optimizing hero section...');
14
15 // ============================================
16 // STEP 1: DECLUTTER - Remove/Hide Elements
17 // ============================================
18
19 // Hide the Google and Yelp icons container from hero (will move to trust bar below)
20 const iconsContainer = document.querySelector('[data-id="2a61df4"]');
21 if (iconsContainer) {
22 iconsContainer.style.display = 'none';
23 console.log('Hidden icons container for decluttering');
24 }
25
26 // Hide the second headline (redundant)
27 const secondHeadline = document.querySelector('[data-id="578eb31"]');
28 if (secondHeadline) {
29 secondHeadline.style.display = 'none';
30 console.log('Hidden redundant second headline');
31 }
32
33 // Hide "Our Services" button (secondary CTA not needed in hero)
34 const servicesButton = document.querySelector('[data-id="a9a0775"]');
35 if (servicesButton) {
36 servicesButton.style.display = 'none';
37 console.log('Hidden secondary CTA button');
38 }
39
40 // ============================================
41 // STEP 2: ENHANCE BACKGROUND OVERLAY
42 // ============================================
43
44 const heroSection = document.querySelector('[data-id="88c8d8b"]');
45 const overlay = heroSection?.querySelector('.elementor-background-overlay');
46
47 if (overlay) {
48 // Create stronger gradient overlay for better text readability
49 overlay.style.background = 'linear-gradient(135deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.3) 100%)';
50 overlay.style.opacity = '1';
51 console.log('Enhanced background overlay for readability');
52 }
53
54 // ============================================
55 // STEP 3: OPTIMIZE LEFT COLUMN - CONTENT
56 // ============================================
57
58 const leftColumn = document.querySelector('[data-id="bfcc52c"]');
59 if (leftColumn) {
60 leftColumn.style.paddingRight = '40px';
61 leftColumn.style.paddingTop = '60px';
62 leftColumn.style.paddingBottom = '60px';
63 }
64
65 // Main Headline - Make it conversion-focused
66 const mainHeadline = document.querySelector('[data-id="616f0aa"] .elementor-heading-title');
67 if (mainHeadline) {
68 mainHeadline.textContent = 'Transform Your Space With Expert Painting';
69 mainHeadline.style.fontSize = '52px';
70 mainHeadline.style.fontWeight = '700';
71 mainHeadline.style.lineHeight = '1.2';
72 mainHeadline.style.color = '#ffffff';
73 mainHeadline.style.textShadow = '2px 2px 4px rgba(0,0,0,0.3)';
74 mainHeadline.style.marginBottom = '20px';
75 console.log('Optimized main headline');
76 }
77
78 // Supporting line (slogan)
79 const supportingLine = document.querySelector('[data-id="bdb4dd1"] .elementor-heading-title');
80 if (supportingLine) {
81 supportingLine.textContent = 'From ordinary walls to extraordinary statements, we can bring your vision to life.';
82 supportingLine.style.fontSize = '20px';
83 supportingLine.style.fontWeight = '400';
84 supportingLine.style.lineHeight = '1.5';
85 supportingLine.style.color = '#ffffff';
86 supportingLine.style.textShadow = '1px 1px 3px rgba(0,0,0,0.4)';
87 supportingLine.style.marginBottom = '30px';
88 supportingLine.style.maxWidth = '90%';
89 console.log('Optimized supporting line');
90 }
91
92 // Optimize bullets - Keep only 3
93 const bulletList = document.querySelector('[data-id="8ccb76c"]');
94 if (bulletList) {
95 const bulletItems = bulletList.querySelectorAll('.elementor-icon-list-item');
96
97 // Keep only first 3 bullets
98 bulletItems.forEach((item, index) => {
99 if (index >= 3) {
100 item.style.display = 'none';
101 } else {
102 // Style visible bullets
103 const text = item.querySelector('.elementor-icon-list-text');
104 if (text) {
105 text.style.fontSize = '18px';
106 text.style.fontWeight = '500';
107 text.style.color = '#ffffff';
108 text.style.textShadow = '1px 1px 2px rgba(0,0,0,0.3)';
109 }
110
111 const icon = item.querySelector('i');
112 if (icon) {
113 icon.style.color = '#FFD700';
114 icon.style.fontSize = '20px';
115 }
116 }
117 });
118
119 bulletList.style.marginBottom = '35px';
120 console.log('Optimized bullet list');
121 }
122
123 // Primary CTA Button
124 const primaryCTA = document.querySelector('[data-id="c8482a4"]');
125 if (primaryCTA) {
126 const button = primaryCTA.querySelector('.elementor-button');
127 if (button) {
128 button.textContent = 'Schedule A Free Estimate';
129 button.style.backgroundColor = '#FF6B35';
130 button.style.color = '#ffffff';
131 button.style.fontSize = '18px';
132 button.style.fontWeight = '700';
133 button.style.padding = '18px 40px';
134 button.style.borderRadius = '8px';
135 button.style.border = 'none';
136 button.style.boxShadow = '0 4px 12px rgba(255, 107, 53, 0.4)';
137 button.style.transition = 'all 0.3s ease';
138 button.style.cursor = 'pointer';
139
140 // Hover effect
141 button.addEventListener('mouseenter', function() {
142 this.style.backgroundColor = '#E55A2B';
143 this.style.transform = 'translateY(-2px)';
144 this.style.boxShadow = '0 6px 16px rgba(255, 107, 53, 0.5)';
145 });
146
147 button.addEventListener('mouseleave', function() {
148 this.style.backgroundColor = '#FF6B35';
149 this.style.transform = 'translateY(0)';
150 this.style.boxShadow = '0 4px 12px rgba(255, 107, 53, 0.4)';
151 });
152 }
153
154 primaryCTA.style.marginBottom = '25px';
155 console.log('Optimized primary CTA button');
156 }
157
158 // Add phone number below CTA
159 const ctaContainer = document.querySelector('[data-id="11289e4"]');
160 if (ctaContainer) {
161 // Check if phone already exists
162 let phoneElement = ctaContainer.querySelector('.hero-phone-cta');
163
164 if (!phoneElement) {
165 phoneElement = document.createElement('div');
166 phoneElement.className = 'hero-phone-cta';
167 phoneElement.innerHTML = `
168 <a href="tel:+16305551234" style="
169 display: inline-flex;
170 align-items: center;
171 gap: 10px;
172 color: #ffffff;
173 font-size: 20px;
174 font-weight: 600;
175 text-decoration: none;
176 text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
177 transition: all 0.3s ease;
178 ">
179 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
180 <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z" fill="#FFD700"/>
181 </svg>
182 <span>Call: (630) 555-1234</span>
183 </a>
184 `;
185
186 ctaContainer.appendChild(phoneElement);
187 console.log('Added phone number CTA');
188 }
189 }
190
191 // ============================================
192 // STEP 4: OPTIMIZE RIGHT COLUMN - FORM CARD
193 // ============================================
194
195 const rightColumn = document.querySelector('[data-id="756f582"]');
196 if (rightColumn) {
197 rightColumn.style.paddingLeft = '20px';
198 rightColumn.style.paddingTop = '40px';
199 rightColumn.style.paddingBottom = '40px';
200 }
201
202 // Form Card Container
203 const formWidget = document.querySelector('[data-id="dc543a0"]');
204 const formContainer = formWidget?.closest('.elementor-widget-wrap');
205
206 if (formContainer) {
207 formContainer.style.backgroundColor = '#ffffff';
208 formContainer.style.borderRadius = '16px';
209 formContainer.style.padding = '32px';
210 formContainer.style.boxShadow = '0 10px 40px rgba(0, 0, 0, 0.25)';
211 console.log('Styled form card container');
212 }
213
214 // Form Title
215 const formTitle = document.querySelector('[data-id="30bbfa1"] .elementor-heading-title');
216 if (formTitle) {
217 formTitle.textContent = 'Get Your Free Estimate';
218 formTitle.style.fontSize = '32px';
219 formTitle.style.fontWeight = '700';
220 formTitle.style.color = '#1a1a1a';
221 formTitle.style.marginBottom = '8px';
222 formTitle.style.textAlign = 'center';
223 console.log('Optimized form title');
224 }
225
226 // Add subtitle to form
227 const formTitleWidget = document.querySelector('[data-id="30bbfa1"]');
228 if (formTitleWidget) {
229 let subtitle = formTitleWidget.querySelector('.form-subtitle');
230
231 if (!subtitle) {
232 subtitle = document.createElement('p');
233 subtitle.className = 'form-subtitle';
234 subtitle.textContent = 'Fast response. No pressure.';
235 subtitle.style.fontSize = '16px';
236 subtitle.style.fontWeight = '400';
237 subtitle.style.color = '#666666';
238 subtitle.style.textAlign = 'center';
239 subtitle.style.marginTop = '0';
240 subtitle.style.marginBottom = '24px';
241
242 formTitleWidget.querySelector('.elementor-widget-container').appendChild(subtitle);
243 console.log('Added form subtitle');
244 }
245 }
246
247 // Form Fields Styling
248 const form = document.querySelector('[data-id="dc543a0"] form');
249 if (form) {
250 // Style all labels
251 const labels = form.querySelectorAll('.elementor-field-label');
252 labels.forEach(label => {
253 label.style.fontSize = '14px';
254 label.style.fontWeight = '600';
255 label.style.color = '#333333';
256 label.style.marginBottom = '8px';
257 });
258
259 // Style all input fields
260 const inputs = form.querySelectorAll('input, select, textarea');
261 inputs.forEach(input => {
262 input.style.backgroundColor = '#f8f9fa';
263 input.style.border = '2px solid #e0e0e0';
264 input.style.borderRadius = '8px';
265 input.style.padding = '14px 16px';
266 input.style.fontSize = '15px';
267 input.style.color = '#1a1a1a';
268 input.style.transition = 'all 0.3s ease';
269
270 // Focus state
271 input.addEventListener('focus', function() {
272 this.style.backgroundColor = '#ffffff';
273 this.style.borderColor = '#FF6B35';
274 this.style.outline = 'none';
275 this.style.boxShadow = '0 0 0 3px rgba(255, 107, 53, 0.1)';
276 });
277
278 input.addEventListener('blur', function() {
279 this.style.backgroundColor = '#f8f9fa';
280 this.style.borderColor = '#e0e0e0';
281 this.style.boxShadow = 'none';
282 });
283 });
284
285 // Style submit button
286 const submitButton = form.querySelector('button[type="submit"]');
287 if (submitButton) {
288 submitButton.textContent = 'Get My Free Estimate';
289 submitButton.style.backgroundColor = '#FF6B35';
290 submitButton.style.color = '#ffffff';
291 submitButton.style.fontSize = '18px';
292 submitButton.style.fontWeight = '700';
293 submitButton.style.padding = '16px 32px';
294 submitButton.style.borderRadius = '8px';
295 submitButton.style.border = 'none';
296 submitButton.style.width = '100%';
297 submitButton.style.cursor = 'pointer';
298 submitButton.style.transition = 'all 0.3s ease';
299 submitButton.style.boxShadow = '0 4px 12px rgba(255, 107, 53, 0.3)';
300
301 submitButton.addEventListener('mouseenter', function() {
302 this.style.backgroundColor = '#E55A2B';
303 this.style.transform = 'translateY(-2px)';
304 this.style.boxShadow = '0 6px 16px rgba(255, 107, 53, 0.4)';
305 });
306
307 submitButton.addEventListener('mouseleave', function() {
308 this.style.backgroundColor = '#FF6B35';
309 this.style.transform = 'translateY(0)';
310 this.style.boxShadow = '0 4px 12px rgba(255, 107, 53, 0.3)';
311 });
312 }
313
314 console.log('Optimized form fields and submit button');
315 }
316
317 // ============================================
318 // STEP 5: CREATE TRUST BAR BELOW HERO
319 // ============================================
320
321 // Check if trust bar already exists
322 let trustBar = document.querySelector('.hero-trust-bar');
323
324 if (!trustBar && heroSection) {
325 trustBar = document.createElement('div');
326 trustBar.className = 'hero-trust-bar';
327 trustBar.style.cssText = `
328 background: #f8f9fa;
329 padding: 20px 0;
330 border-top: 1px solid #e0e0e0;
331 margin-top: 0;
332 `;
333
334 trustBar.innerHTML = `
335 <div style="
336 max-width: 1200px;
337 margin: 0 auto;
338 display: flex;
339 align-items: center;
340 justify-content: center;
341 gap: 40px;
342 flex-wrap: wrap;
343 padding: 0 20px;
344 ">
345 <div style="display: flex; align-items: center; gap: 15px;">
346 <img src="https://dtestapp.com/wp-content/uploads/2025/12/Google_Logo_0.png"
347 alt="Google Reviews"
348 style="height: 40px; width: auto; object-fit: contain;">
349 <span style="font-size: 16px; font-weight: 600; color: #333;">5.0 Rating</span>
350 </div>
351 <div style="display: flex; align-items: center; gap: 15px;">
352 <img src="https://dtestapp.com/wp-content/uploads/2025/12/yelp-logo-png-round-8-copy-150x150.webp"
353 alt="Yelp Reviews"
354 style="height: 40px; width: auto; object-fit: contain;">
355 <span style="font-size: 16px; font-weight: 600; color: #333;">Top Rated</span>
356 </div>
357 <div style="display: flex; align-items: center; gap: 10px;">
358 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
359 <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" fill="#FFD700"/>
360 </svg>
361 <span style="font-size: 16px; font-weight: 600; color: #333;">35+ Years Experience</span>
362 </div>
363 </div>
364 `;
365
366 // Insert trust bar after hero section
367 heroSection.parentNode.insertBefore(trustBar, heroSection.nextSibling);
368 console.log('Created trust bar below hero');
369 }
370
371 // ============================================
372 // STEP 6: MOBILE RESPONSIVENESS
373 // ============================================
374
375 const style = document.createElement('style');
376 style.textContent = `
377 @media (max-width: 768px) {
378 [data-id="bfcc52c"] {
379 padding: 40px 20px !important;
380 }
381
382 [data-id="756f582"] {
383 padding: 20px !important;
384 }
385
386 [data-id="616f0aa"] .elementor-heading-title {
387 font-size: 36px !important;
388 }
389
390 [data-id="bdb4dd1"] .elementor-heading-title {
391 font-size: 18px !important;
392 }
393
394 [data-id="8ccb76c"] .elementor-icon-list-text {
395 font-size: 16px !important;
396 }
397
398 .hero-phone-cta a {
399 font-size: 18px !important;
400 }
401
402 [data-id="30bbfa1"] .elementor-heading-title {
403 font-size: 26px !important;
404 }
405
406 .hero-trust-bar > div {
407 gap: 20px !important;
408 }
409
410 .hero-trust-bar img {
411 height: 32px !important;
412 }
413
414 .hero-trust-bar span {
415 font-size: 14px !important;
416 }
417 }
418
419 @media (max-width: 480px) {
420 [data-id="616f0aa"] .elementor-heading-title {
421 font-size: 28px !important;
422 }
423
424 [data-id="bdb4dd1"] .elementor-heading-title {
425 font-size: 16px !important;
426 }
427
428 [data-id="30bbfa1"] .elementor-heading-title {
429 font-size: 24px !important;
430 }
431 }
432 `;
433
434 document.head.appendChild(style);
435 console.log('Added mobile responsive styles');
436
437 console.log('✅ Hero optimization complete!');
438 }
439
440 // Run optimization
441 function init() {
442 if (document.readyState === 'loading') {
443 document.addEventListener('DOMContentLoaded', optimizeHero);
444 } else {
445 optimizeHero();
446 }
447
448 // Re-run on dynamic content changes
449 const observer = new MutationObserver(function() {
450 const heroSection = document.querySelector('[data-id="88c8d8b"]');
451 if (heroSection && !heroSection.classList.contains('hero-optimized')) {
452 heroSection.classList.add('hero-optimized');
453 optimizeHero();
454 }
455 });
456
457 if (document.body) {
458 observer.observe(document.body, {
459 childList: true,
460 subtree: true
461 });
462 }
463 }
464
465 init();
466
467})();