AI update: בצע שני שיפורים בדף הדמו של איציק בכר - אינסטלטור: 1) הוסף פופ-אפ מכירה שנפתח אוטומטית כ-5 שניות אחרי כניסת המבקר לדף, ו

2026-08-19 19:28:57 +00:00
parent e870ad7300
commit 19d81c0ca9
1 changed files with 292 additions and 0 deletions
@@ -80,6 +80,59 @@
          </div>
        </div>
      </div>
+      <div class="hero-image" aria-hidden="true">
+        <svg viewBox="0 0 400 320" class="plumber-illustration">
+          <!-- Professional plumber with tools illustration -->
+          <defs>
+            <linearGradient id="toolboxGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stop-color="#ff6b35"/>
+              <stop offset="100%" stop-color="#e55a28"/>
+            </linearGradient>
+            <linearGradient id="pipeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stop-color="#7eb8da"/>
+              <stop offset="100%" stop-color="#5a9fc4"/>
+            </linearGradient>
+          </defs>
+          <!-- Background pipes -->
+          <rect x="50" y="80" width="20" height="200" rx="4" fill="url(#pipeGrad)" opacity="0.7"/>
+          <rect x="50" y="80" width="100" height="20" rx="4" fill="url(#pipeGrad)" opacity="0.7"/>
+          <rect x="330" y="120" width="20" height="160" rx="4" fill="url(#pipeGrad)" opacity="0.7"/>
+          <rect x="250" y="120" width="100" height="20" rx="4" fill="url(#pipeGrad)" opacity="0.7"/>
+          <!-- Valve on pipe -->
+          <circle cx="60" cy="150" r="15" fill="#1e3a5f"/>
+          <rect x="52" y="135" width="16" height="8" rx="2" fill="#ff6b35"/>
+          <!-- Toolbox -->
+          <rect x="140" y="220" width="120" height="70" rx="8" fill="url(#toolboxGrad)"/>
+          <rect x="150" y="230" width="100" height="10" rx="2" fill="#faf8f5" opacity="0.3"/>
+          <rect x="185" y="210" width="30" height="15" rx="3" fill="#e55a28"/>
+          <!-- Wrench -->
+          <g transform="translate(180, 160) rotate(-30)">
+            <rect x="0" y="0" width="80" height="12" rx="3" fill="#5f6875"/>
+            <circle cx="75" cy="6" r="18" fill="none" stroke="#5f6875" stroke-width="8"/>
+            <circle cx="75" cy="6" r="10" fill="#1e3a5f"/>
+          </g>
+          <!-- Pipe wrench -->
+          <g transform="translate(260, 180) rotate(15)">
+            <rect x="0" y="0" width="70" height="10" rx="2" fill="#ff6b35"/>
+            <path d="M65 -8 L85 5 L65 18 Z" fill="#ff6b35"/>
+            <rect x="65" y="-5" width="8" height="20" fill="#e55a28"/>
+          </g>
+          <!-- Faucet -->
+          <g transform="translate(280, 60)">
+            <rect x="0" y="20" width="40" height="25" rx="5" fill="#7eb8da"/>
+            <rect x="15" y="0" width="10" height="25" rx="3" fill="#5f6875"/>
+            <ellipse cx="20" cy="55" rx="12" ry="6" fill="#7eb8da" opacity="0.5"/>
+            <!-- Water drops -->
+            <ellipse cx="20" cy="65" rx="4" ry="6" fill="#7eb8da" opacity="0.8"/>
+            <ellipse cx="20" cy="80" rx="3" ry="4" fill="#7eb8da" opacity="0.6"/>
+          </g>
+          <!-- Small tools -->
+          <rect x="155" y="250" width="40" height="8" rx="2" fill="#5f6875"/>
+          <rect x="205" y="250" width="45" height="8" rx="2" fill="#1e3a5f"/>
+          <circle cx="175" cy="270" r="8" fill="#5f6875"/>
+          <circle cx="225" cy="270" r="8" fill="#5f6875"/>
+        </svg>
+      </div>
    </section>

    <section id="services" class="services">
@@ -101,6 +154,22 @@
            </div>
            <h3>תיקוני צנרת</h3>
            <p>תיקון ושיפוץ צנרת מים וביוב, החלפת צינורות ישנים, פתיחת סתימות ותיקון דליפות בקירות וברצפות.</p>
+            <div class="service-image" aria-hidden="true">
+              <svg viewBox="0 0 200 100">
+                <rect x="20" y="30" width="160" height="15" rx="4" fill="var(--light-blue)" opacity="0.6"/>
+                <rect x="20" y="30" width="15" height="50" rx="4" fill="var(--light-blue)" opacity="0.6"/>
+                <rect x="165" y="30" width="15" height="50" rx="4" fill="var(--light-blue)" opacity="0.6"/>
+                <circle cx="27" cy="55" r="8" fill="var(--navy)"/>
+                <rect x="23" y="48" width="8" height="5" rx="1" fill="var(--orange)"/>
+                <circle cx="172" cy="55" r="8" fill="var(--navy)"/>
+                <rect x="168" y="48" width="8" height="5" rx="1" fill="var(--orange)"/>
+                <!-- Wrench on pipe -->
+                <g transform="translate(80, 25) rotate(-20)">
+                  <rect x="0" y="0" width="50" height="8" rx="2" fill="var(--gray)"/>
+                  <circle cx="48" cy="4" r="12" fill="none" stroke="var(--gray)" stroke-width="5"/>
+                </g>
+              </svg>
+            </div>
          </article>
          <article class="service-card" data-reveal data-reveal-index="1">
            <div class="service-icon">
@@ -114,6 +183,21 @@
            </div>
            <h3>איתור נזילות</h3>
            <p>איתור נזילות סמויות בשיטות מתקדמות ללא הרס. זיהוי מדויק של מקור הנזילה וחיסכון בעלויות תיקון.</p>
+            <div class="service-image" aria-hidden="true">
+              <svg viewBox="0 0 200 100">
+                <!-- Detection device -->
+                <rect x="60" y="20" width="80" height="50" rx="8" fill="var(--navy)"/>
+                <rect x="70" y="30" width="40" height="30" rx="4" fill="var(--light-blue)" opacity="0.3"/>
+                <circle cx="90" cy="45" r="12" fill="var(--orange)" opacity="0.8"/>
+                <circle cx="90" cy="45" r="6" fill="var(--cream)"/>
+                <!-- Signal waves -->
+                <path d="M125 35 Q135 45 125 55" stroke="var(--orange)" stroke-width="3" fill="none" opacity="0.7"/>
+                <path d="M135 30 Q150 45 135 60" stroke="var(--orange)" stroke-width="3" fill="none" opacity="0.5"/>
+                <!-- Water drops below -->
+                <ellipse cx="90" cy="85" rx="20" ry="6" fill="var(--light-blue)" opacity="0.4"/>
+                <path d="M90 70 L87 78 Q90 82 90 85 Q90 82 93 78 Z" fill="var(--light-blue)" opacity="0.8"/>
+              </svg>
+            </div>
          </article>
          <article class="service-card" data-reveal data-reveal-index="2">
            <div class="service-icon">
@@ -128,6 +212,19 @@
            </div>
            <h3>התקנת ברזים</h3>
            <p>התקנת ברזים חדשים לכל סוגי הכיורים והאמבטיות. עבודה נקייה ומקצועית עם אחריות מלאה.</p>
+            <div class="service-image" aria-hidden="true">
+              <svg viewBox="0 0 200 100">
+                <!-- Modern faucet -->
+                <rect x="85" y="15" width="30" height="45" rx="6" fill="var(--gray)"/>
+                <rect x="75" y="55" width="50" height="12" rx="4" fill="var(--navy)"/>
+                <path d="M115 35 Q140 35 140 50 L140 70" stroke="var(--gray)" stroke-width="10" fill="none" stroke-linecap="round"/>
+                <ellipse cx="140" cy="78" rx="8" ry="4" fill="var(--light-blue)" opacity="0.5"/>
+                <!-- Handle -->
+                <rect x="90" y="5" width="20" height="15" rx="4" fill="var(--orange)"/>
+                <!-- Water stream -->
+                <rect x="137" y="72" width="6" height="20" rx="2" fill="var(--light-blue)" opacity="0.6"/>
+              </svg>
+            </div>
          </article>
          <article class="service-card service-card-featured" data-reveal data-reveal-index="3">
            <div class="service-icon">
@@ -140,6 +237,20 @@
            </div>
            <h3>התקנת דודים</h3>
            <p>התקנת דודי שמש ודודים חשמליים מכל הסוגים. ייעוץ מקצועי לבחירת הדוד המתאים לצרכי הבית.</p>
+            <div class="service-image service-image-light" aria-hidden="true">
+              <svg viewBox="0 0 200 100">
+                <!-- Water heater -->
+                <rect x="70" y="10" width="60" height="80" rx="8" fill="var(--cream)"/>
+                <rect x="80" y="20" width="40" height="35" rx="4" fill="var(--light-blue)" opacity="0.4"/>
+                <circle cx="100" cy="70" r="8" fill="var(--orange)"/>
+                <!-- Temperature indicator -->
+                <rect x="95" y="25" width="10" height="25" rx="3" fill="var(--cream)"/>
+                <rect x="97" y="35" width="6" height="13" rx="2" fill="var(--orange)"/>
+                <!-- Pipes -->
+                <rect x="85" y="0" width="8" height="15" rx="2" fill="var(--gray)"/>
+                <rect x="107" y="0" width="8" height="15" rx="2" fill="var(--gray)"/>
+              </svg>
+            </div>
          </article>
          <article class="service-card" data-reveal data-reveal-index="4">
            <div class="service-icon">
@@ -154,6 +265,18 @@
            </div>
            <h3>תיקון שירותים</h3>
            <p>תיקון והחלפת אסלות, ניאגרות ומנגנוני הדחה. פתרון מהיר לכל תקלה בשירותים.</p>
+            <div class="service-image" aria-hidden="true">
+              <svg viewBox="0 0 200 100">
+                <!-- Toilet illustration -->
+                <ellipse cx="100" cy="85" rx="35" ry="10" fill="var(--gray)" opacity="0.3"/>
+                <rect x="75" y="30" width="50" height="50" rx="8" fill="var(--cream)"/>
+                <rect x="80" y="35" width="40" height="25" rx="5" fill="var(--light-blue)" opacity="0.3"/>
+                <rect x="70" y="15" width="60" height="20" rx="5" fill="var(--cream)"/>
+                <!-- Flush button -->
+                <circle cx="100" cy="25" r="6" fill="var(--navy)"/>
+                <circle cx="100" cy="25" r="3" fill="var(--orange)"/>
+              </svg>
+            </div>
          </article>
          <article class="service-card" data-reveal data-reveal-index="5">
            <div class="service-icon">
@@ -168,6 +291,22 @@
            </div>
            <h3>מכונות כביסה</h3>
            <p>חיבור והתקנת מכונות כביסה ומדיחי כלים. התאמת צנרת וברזים לציוד החדש.</p>
+            <div class="service-image" aria-hidden="true">
+              <svg viewBox="0 0 200 100">
+                <!-- Washing machine -->
+                <rect x="60" y="10" width="80" height="80" rx="8" fill="var(--navy)"/>
+                <circle cx="100" cy="50" r="28" fill="var(--cream)"/>
+                <circle cx="100" cy="50" r="22" fill="var(--light-blue)" opacity="0.4"/>
+                <circle cx="100" cy="50" r="8" fill="var(--navy)"/>
+                <!-- Control panel -->
+                <rect x="70" y="15" width="60" height="12" rx="3" fill="var(--gray)"/>
+                <circle cx="80" cy="21" r="4" fill="var(--orange)"/>
+                <rect x="90" y="18" width="30" height="6" rx="2" fill="var(--cream)" opacity="0.5"/>
+                <!-- Water hoses -->
+                <path d="M145 30 Q160 30 160 50 L160 70" stroke="var(--light-blue)" stroke-width="6" fill="none"/>
+                <path d="M145 40 Q170 40 170 60 L170 80" stroke="var(--gray)" stroke-width="6" fill="none"/>
+              </svg>
+            </div>
          </article>
          <article class="service-card service-card-emergency" data-reveal data-reveal-index="6">
            <div class="emergency-badge">24/7</div>
@@ -229,6 +368,50 @@
            </ul>
          </div>
          <div class="about-visual" data-reveal>
+            <div class="about-illustration" aria-hidden="true">
+              <svg viewBox="0 0 300 250">
+                <!-- Professional tools arrangement -->
+                <defs>
+                  <linearGradient id="aboutToolGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stop-color="var(--orange)"/>
+                    <stop offset="100%" stop-color="var(--orange-dark)"/>
+                  </linearGradient>
+                </defs>
+                <!-- Tool belt -->
+                <rect x="40" y="100" width="220" height="60" rx="10" fill="var(--navy)"/>
+                <rect x="50" y="110" width="40" height="40" rx="5" fill="var(--navy-light)"/>
+                <rect x="100" y="110" width="40" height="40" rx="5" fill="var(--navy-light)"/>
+                <rect x="150" y="110" width="40" height="40" rx="5" fill="var(--navy-light)"/>
+                <rect x="200" y="110" width="50" height="40" rx="5" fill="var(--navy-light)"/>
+                <!-- Tools in belt -->
+                <rect x="58" y="95" width="8" height="40" rx="2" fill="var(--gray)"/>
+                <rect x="72" y="100" width="8" height="35" rx="2" fill="url(#aboutToolGrad)"/>
+                <rect x="108" y="90" width="10" height="45" rx="3" fill="var(--gray)"/>
+                <rect x="122" y="95" width="8" height="40" rx="2" fill="var(--orange)"/>
+                <!-- Wrench -->
+                <g transform="translate(158, 85)">
+                  <rect x="0" y="15" width="25" height="6" rx="2" fill="var(--gray)"/>
+                  <path d="M22 10 L35 18 L22 26 Z" fill="var(--gray)"/>
+                </g>
+                <!-- Pliers -->
+                <g transform="translate(205, 85)">
+                  <rect x="5" y="0" width="6" height="30" rx="2" fill="var(--orange)"/>
+                  <rect x="20" y="0" width="6" height="30" rx="2" fill="var(--orange)"/>
+                  <ellipse cx="15" cy="30" rx="12" ry="8" fill="var(--gray)"/>
+                </g>
+                <!-- Pipes above -->
+                <rect x="80" y="40" width="140" height="12" rx="4" fill="var(--light-blue)" opacity="0.7"/>
+                <rect x="80" y="40" width="12" height="50" rx="4" fill="var(--light-blue)" opacity="0.7"/>
+                <rect x="208" y="40" width="12" height="50" rx="4" fill="var(--light-blue)" opacity="0.7"/>
+                <!-- Connector joints -->
+                <circle cx="86" cy="46" r="8" fill="var(--navy)"/>
+                <circle cx="214" cy="46" r="8" fill="var(--navy)"/>
+                <!-- Certificate/badge -->
+                <circle cx="150" cy="200" r="35" fill="url(#aboutToolGrad)"/>
+                <circle cx="150" cy="200" r="28" fill="none" stroke="white" stroke-width="2"/>
+                <path d="M135 200 L145 210 L170 185" stroke="white" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
            <div class="stats-card">
              <div class="stat">
                <span class="stat-number">10+</span>
@@ -294,6 +477,24 @@
              <li>קריית אונו</li>
              <li>אור יהודה</li>
            </ul>
+            <div class="area-van" aria-hidden="true">
+              <svg viewBox="0 0 200 80">
+                <!-- Service van illustration -->
+                <rect x="20" y="25" width="130" height="45" rx="5" fill="var(--cream)"/>
+                <rect x="150" y="35" width="35" height="35" rx="5" fill="var(--cream)"/>
+                <rect x="155" y="40" width="25" height="20" rx="3" fill="var(--light-blue)" opacity="0.5"/>
+                <!-- Logo on van -->
+                <circle cx="80" cy="47" r="15" fill="var(--orange)"/>
+                <path d="M73 40 L73 54 L77 54 L77 48 L83 48 L83 54 L87 54 L87 40 L83 40 L83 46 L77 46 L77 40 Z" fill="var(--navy)"/>
+                <!-- Wheels -->
+                <circle cx="55" cy="70" r="12" fill="var(--navy)"/>
+                <circle cx="55" cy="70" r="6" fill="var(--gray)"/>
+                <circle cx="160" cy="70" r="12" fill="var(--navy)"/>
+                <circle cx="160" cy="70" r="6" fill="var(--gray)"/>
+                <!-- Text on van -->
+                <text x="80" y="37" text-anchor="middle" fill="var(--navy)" font-size="6" font-weight="600">אינסטלציה</text>
+              </svg>
+            </div>
          </div>
        </div>
      </div>
@@ -310,6 +511,20 @@
              <a href="tel:0528555502">052-855-5502</a>
            </div>
          </div>
+          <div class="contact-illustration" aria-hidden="true">
+            <svg viewBox="0 0 150 120">
+              <!-- Phone with water drop -->
+              <rect x="45" y="10" width="60" height="100" rx="10" fill="var(--navy)"/>
+              <rect x="50" y="20" width="50" height="70" rx="5" fill="var(--light-blue)" opacity="0.2"/>
+              <!-- Phone icon on screen -->
+              <circle cx="75" cy="55" r="18" fill="var(--orange)"/>
+              <path d="M68 50 c2 4 5 7 9 9 l3-3 c0.4-0.4 1-0.5 1.4-0.3 1.5 0.5 3.2 0.8 4.9 0.8 0.8 0 1.4 0.6 1.4 1.4 v4.8 c0 0.8-0.6 1.4-1.4 1.4 c-13 0-23.5-10.5-23.5-23.5 c0-0.8 0.6-1.4 1.4-1.4 h4.8 c0.8 0 1.4 0.6 1.4 1.4 c0 1.7 0.3 3.4 0.8 4.9 c0.2 0.5 0 1-0.3 1.4 l-3 3 z" fill="white" transform="translate(60, 40) scale(0.7)"/>
+              <!-- Water drops around -->
+              <ellipse cx="25" cy="50" rx="8" ry="12" fill="var(--light-blue)" opacity="0.6"/>
+              <ellipse cx="125" cy="70" rx="6" ry="9" fill="var(--light-blue)" opacity="0.6"/>
+              <ellipse cx="30" cy="90" rx="5" ry="7" fill="var(--light-blue)" opacity="0.4"/>
+            </svg>
+          </div>
          <a href="tel:0528555502" class="contact-cta">
            <span>התקשרו עכשיו</span>
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="currentColor"/></svg>
@@ -345,6 +560,83 @@
    <span>052-855-5502</span>
  </a>

+  <!-- Floating offer button -->
+  <button class="floating-offer-btn" id="openOfferBtn" aria-label="הצעה מיוחדת">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm3.5 12.09l-1.41 1.41L12 13.41 9.91 15.5 8.5 14.09 10.59 12 8.5 9.91 9.91 8.5 12 10.59l2.09-2.09 1.41 1.41L13.41 12l2.09 2.09z" fill="currentColor"/>
+    </svg>
+    <span>הצעה</span>
+  </button>
+
+  <!-- Sales Popup -->
+  <div class="popup-overlay" id="popupOverlay" aria-hidden="true">
+    <div class="popup-modal" role="dialog" aria-labelledby="popupTitle" aria-modal="true">
+      <button class="popup-close" id="closePopupBtn" aria-label="סגור">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
+        </svg>
+      </button>
+      
+      <div class="popup-header">
+        <div class="popup-icon">
+          <svg viewBox="0 0 60 60" aria-hidden="true">
+            <circle cx="30" cy="30" r="28" fill="var(--orange)"/>
+            <path d="M22 18 L22 42 L28 42 L28 32 L32 32 L32 42 L38 42 L38 18 L32 18 L32 28 L28 28 L28 18 Z" fill="white"/>
+          </svg>
+        </div>
+        <h2 id="popupTitle">האתר שלך מוכן ומחכה לך</h2>
+      </div>
+
+      <div class="popup-content">
+        <p class="popup-intro">בחרו את האפשרות המתאימה לכם:</p>
+        
+        <div class="popup-options">
+          <a href="#" class="popup-option popup-option-basic">
+            <div class="option-icon">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="option-text">
+              <strong>הורדת קוד המקור</strong>
+              <span>קבלו את כל קבצי האתר להתקנה עצמאית</span>
+            </div>
+            <svg class="option-arrow" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/>
+            </svg>
+          </a>
+          
+          <a href="#" class="popup-option popup-option-premium">
+            <div class="option-badge">מומלץ</div>
+            <div class="option-icon">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="option-text">
+              <strong>אחסון מלא + קוד</strong>
+              <span>כולל דומיין, אחסון וניהול מלא</span>
+            </div>
+            <svg class="option-arrow" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/>
+            </svg>
+          </a>
+        </div>
+
+        <div class="popup-warning">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"/>
+          </svg>
+          <p><strong>שימו לב:</strong> אתר הדגמה זה יימחק תוך 30 יום אם לא תתקבל רכישה או פנייה מצדכם.</p>
+        </div>
+
+        <div class="popup-extras">
+          <p>רוצים שינויים בעיצוב, עמודים נוספים או תמונות מותאמות אישית? זו אפשרות בתשלום נפרד. <a href="#contact" class="popup-link" id="popupContactLink">צרו קשר</a> ונתאים לכם הצעה.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
  <script src="script.js"></script>
 </body>
 </html>