642 lines
38 KiB
HTML
642 lines
38 KiB
HTML
<!doctype html>
|
|
<html lang="he" dir="rtl" class="no-js">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>איציק בכר - אינסטלטור מקצועי בפתח תקווה</title>
|
|
<meta name="description" content="איציק בכר - שירותי אינסטלציה מקצועיים בפתח תקווה והסביבה. תיקוני צנרת, איתור נזילות, התקנת ברזים ודודים. שירות מהיר ואמין.">
|
|
<meta property="og:title" content="איציק בכר - אינסטלטור מקצועי בפתח תקווה">
|
|
<meta property="og:description" content="שירותי אינסטלציה מקצועיים בפתח תקווה והסביבה. זמינות 24/7, מחירים הוגנים.">
|
|
<meta property="og:type" content="website">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='%231e3a5f'/><path d='M35 30 L35 70 L45 70 L45 55 L55 55 L55 70 L65 70 L65 30 L55 30 L55 45 L45 45 L45 30 Z' fill='%23ff6b35'/></svg>">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600&family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script>document.documentElement.classList.remove('no-js');</script>
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="header-container">
|
|
<div class="logo">
|
|
<svg class="logo-icon" viewBox="0 0 50 50" aria-hidden="true">
|
|
<circle cx="25" cy="25" r="23" fill="var(--orange)"/>
|
|
<path d="M18 15 L18 35 L23 35 L23 27 L27 27 L27 35 L32 35 L32 15 L27 15 L27 23 L23 23 L23 15 Z" fill="var(--navy)"/>
|
|
</svg>
|
|
<span class="logo-text">איציק בכר</span>
|
|
</div>
|
|
<nav class="main-nav" aria-label="ניווט ראשי">
|
|
<ul>
|
|
<li><a href="#services">שירותים</a></li>
|
|
<li><a href="#about">אודות</a></li>
|
|
<li><a href="#area">אזור שירות</a></li>
|
|
<li><a href="#contact">צור קשר</a></li>
|
|
</ul>
|
|
</nav>
|
|
<a href="tel:0528555502" class="header-cta">
|
|
<svg class="phone-icon" 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>
|
|
<span>התקשרו עכשיו</span>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<div class="hero-background">
|
|
<div class="pipe-decoration pipe-1"></div>
|
|
<div class="pipe-decoration pipe-2"></div>
|
|
<div class="pipe-decoration pipe-3"></div>
|
|
<div class="drop drop-1"></div>
|
|
<div class="drop drop-2"></div>
|
|
<div class="drop drop-3"></div>
|
|
</div>
|
|
<div class="hero-content">
|
|
<div class="hero-badge">זמינים 24/7 לקריאות חירום</div>
|
|
<h1>אינסטלטור מקצועי<br><span class="highlight">בפתח תקווה והסביבה</span></h1>
|
|
<p class="hero-subtitle">שירות אמין, מהיר ומקצועי לכל בעיה באינסטלציה. מתיקון נזילה קטנה ועד התקנת מערכות מים שלמות.</p>
|
|
<div class="hero-actions">
|
|
<a href="tel:0528555502" class="btn btn-primary btn-large">
|
|
<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>
|
|
052-855-5502
|
|
</a>
|
|
<a href="#services" class="btn btn-secondary btn-large">לשירותים שלנו</a>
|
|
</div>
|
|
<div class="hero-trust">
|
|
<div class="trust-item">
|
|
<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-3zm-1 14.59L7 12.59l1.41-1.41L11 13.76l5.59-5.59L18 9.59l-7 7z" fill="currentColor"/></svg>
|
|
<span>אמינות מוכחת</span>
|
|
</div>
|
|
<div class="trust-item">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" fill="currentColor"/></svg>
|
|
<span>הגעה מהירה</span>
|
|
</div>
|
|
<div class="trust-item">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>
|
|
<span>מחירים הוגנים</span>
|
|
</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">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>השירותים שלנו</h2>
|
|
<p>פתרונות מקצועיים לכל אתגר באינסטלציה</p>
|
|
</div>
|
|
<div class="services-grid">
|
|
<article class="service-card" data-reveal data-reveal-index="0">
|
|
<div class="service-icon">
|
|
<svg viewBox="0 0 80 80" aria-hidden="true">
|
|
<rect x="10" y="35" width="60" height="10" rx="2" fill="var(--navy)"/>
|
|
<rect x="25" y="20" width="10" height="25" rx="2" fill="var(--orange)"/>
|
|
<rect x="45" y="45" width="10" height="20" rx="2" fill="var(--orange)"/>
|
|
<circle cx="30" cy="50" r="4" fill="var(--light-blue)"/>
|
|
<circle cx="50" cy="40" r="4" fill="var(--light-blue)"/>
|
|
</svg>
|
|
</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">
|
|
<svg viewBox="0 0 80 80" aria-hidden="true">
|
|
<ellipse cx="40" cy="55" rx="25" ry="8" fill="var(--light-blue)" opacity="0.5"/>
|
|
<path d="M40 10 L35 25 Q40 35 40 45 Q40 35 45 25 Z" fill="var(--orange)"/>
|
|
<circle cx="40" cy="50" r="3" fill="var(--navy)"/>
|
|
<circle cx="35" cy="58" r="2" fill="var(--navy)"/>
|
|
<circle cx="45" cy="56" r="2" fill="var(--navy)"/>
|
|
</svg>
|
|
</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">
|
|
<svg viewBox="0 0 80 80" aria-hidden="true">
|
|
<rect x="30" y="20" width="20" height="35" rx="3" fill="var(--navy)"/>
|
|
<rect x="33" y="55" width="14" height="8" fill="var(--gray)"/>
|
|
<circle cx="40" cy="35" r="6" fill="var(--orange)"/>
|
|
<rect x="38" y="42" width="4" height="8" rx="1" fill="var(--light-blue)"/>
|
|
<path d="M26 30 Q20 35 20 42 Q20 48 26 52" stroke="var(--light-blue)" stroke-width="2" fill="none"/>
|
|
<path d="M54 30 Q60 35 60 42 Q60 48 54 52" stroke="var(--light-blue)" stroke-width="2" fill="none"/>
|
|
</svg>
|
|
</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">
|
|
<svg viewBox="0 0 80 80" aria-hidden="true">
|
|
<rect x="20" y="15" width="40" height="50" rx="5" fill="var(--cream)"/>
|
|
<rect x="25" y="20" width="30" height="25" rx="3" fill="var(--light-blue)"/>
|
|
<circle cx="40" cy="55" r="5" fill="var(--orange)"/>
|
|
<path d="M35 30 L40 25 L45 30 L45 40 L35 40 Z" fill="var(--orange)"/>
|
|
</svg>
|
|
</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">
|
|
<svg viewBox="0 0 80 80" aria-hidden="true">
|
|
<rect x="15" y="50" width="50" height="15" rx="3" fill="var(--navy)"/>
|
|
<rect x="20" y="35" width="15" height="20" rx="2" fill="var(--light-blue)"/>
|
|
<rect x="45" y="35" width="15" height="20" rx="2" fill="var(--light-blue)"/>
|
|
<circle cx="27" cy="45" r="4" fill="var(--orange)"/>
|
|
<circle cx="53" cy="45" r="4" fill="var(--orange)"/>
|
|
<rect x="35" y="55" width="10" height="8" rx="1" fill="var(--gray)"/>
|
|
</svg>
|
|
</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">
|
|
<svg viewBox="0 0 80 80" aria-hidden="true">
|
|
<rect x="10" y="25" width="60" height="35" rx="4" fill="var(--navy)"/>
|
|
<rect x="15" y="30" width="25" height="25" rx="3" fill="var(--light-blue)"/>
|
|
<rect x="45" y="30" width="20" height="12" rx="2" fill="var(--gray)"/>
|
|
<rect x="45" y="45" width="20" height="8" rx="2" fill="var(--gray)"/>
|
|
<circle cx="27" cy="42" r="8" fill="var(--cream)"/>
|
|
<circle cx="27" cy="42" r="5" fill="var(--orange)"/>
|
|
</svg>
|
|
</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>
|
|
<div class="service-icon">
|
|
<svg viewBox="0 0 80 80" aria-hidden="true">
|
|
<circle cx="40" cy="40" r="28" fill="none" stroke="white" stroke-width="4"/>
|
|
<path d="M40 20 L40 42 L55 42" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
<circle cx="40" cy="40" r="4" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-text">
|
|
<h3>קריאות שירות דחופות</h3>
|
|
<p>צוות מהיר לכל מקרה חירום — פיצוץ צינור, הצפה, או כל בעיה דחופה. אנחנו זמינים עבורכם בכל שעה, כל יום.</p>
|
|
</div>
|
|
<a href="tel:0528555502" class="emergency-cta">
|
|
<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>
|
|
חייגו עכשיו
|
|
</a>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="about">
|
|
<div class="container">
|
|
<div class="about-grid">
|
|
<div class="about-content" data-reveal>
|
|
<h2>למה לבחור באיציק בכר?</h2>
|
|
<p class="about-lead">יותר מעשור של ניסיון מקצועי בתחום האינסטלציה, עם מאות לקוחות מרוצים בפתח תקווה והסביבה.</p>
|
|
<ul class="about-features">
|
|
<li>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
|
<div>
|
|
<strong>מקצועיות ואמינות</strong>
|
|
<span>עבודה מסודרת, ניקיון באתר העבודה ותוצאות מושלמות</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
|
<div>
|
|
<strong>זמינות גבוהה</strong>
|
|
<span>מענה מהיר לכל פנייה, כולל קריאות חירום בלילות ובסופי שבוע</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
|
<div>
|
|
<strong>מחירים שקופים</strong>
|
|
<span>הצעת מחיר מראש, ללא הפתעות. תשלום רק לאחר סיום העבודה</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/></svg>
|
|
<div>
|
|
<strong>אחריות מלאה</strong>
|
|
<span>אחריות על כל עבודה שמתבצעת, לשקט נפשי מלא</span>
|
|
</div>
|
|
</li>
|
|
</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>
|
|
<span class="stat-label">שנות ניסיון</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-number">1000+</span>
|
|
<span class="stat-label">לקוחות מרוצים</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-number">24/7</span>
|
|
<span class="stat-label">זמינות</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="area" class="area">
|
|
<div class="container">
|
|
<div class="section-header section-header-light">
|
|
<h2>אזור השירות</h2>
|
|
<p>מגיעים לכל מקום בפתח תקווה והערים הסמוכות</p>
|
|
</div>
|
|
<div class="area-content" data-reveal>
|
|
<div class="area-map">
|
|
<svg viewBox="0 0 400 300" aria-label="מפת אזור השירות - פתח תקווה והסביבה">
|
|
<defs>
|
|
<radialGradient id="areaGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="var(--orange)" stop-opacity="0.3"/>
|
|
<stop offset="100%" stop-color="var(--orange)" stop-opacity="0"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<circle cx="200" cy="150" r="120" fill="url(#areaGlow)"/>
|
|
<circle cx="200" cy="150" r="80" fill="none" stroke="var(--orange)" stroke-width="2" stroke-dasharray="8 4" opacity="0.6"/>
|
|
<circle cx="200" cy="150" r="40" fill="none" stroke="var(--orange)" stroke-width="3"/>
|
|
<circle cx="200" cy="150" r="8" fill="var(--orange)"/>
|
|
<text x="200" y="180" text-anchor="middle" fill="var(--cream)" font-size="14" font-weight="600">פתח תקווה</text>
|
|
<!-- Surrounding cities -->
|
|
<g fill="var(--light-blue)" font-size="11">
|
|
<circle cx="280" cy="100" r="4"/><text x="280" y="88" text-anchor="middle">בני ברק</text>
|
|
<circle cx="320" cy="160" r="4"/><text x="320" y="148" text-anchor="middle">רמת גן</text>
|
|
<circle cx="140" cy="80" r="4"/><text x="140" y="68" text-anchor="middle">כפר סבא</text>
|
|
<circle cx="100" cy="150" r="4"/><text x="100" y="138" text-anchor="middle">ראש העין</text>
|
|
<circle cx="150" cy="220" r="4"/><text x="150" y="240" text-anchor="middle">יהוד</text>
|
|
<circle cx="260" cy="210" r="4"/><text x="260" y="230" text-anchor="middle">גבעת שמואל</text>
|
|
<circle cx="130" cy="130" r="4"/><text x="130" y="118" text-anchor="middle">הוד השרון</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="area-cities">
|
|
<h3>ערים נוספות באזור השירות:</h3>
|
|
<ul>
|
|
<li>פתח תקווה</li>
|
|
<li>בני ברק</li>
|
|
<li>רמת גן</li>
|
|
<li>גבעת שמואל</li>
|
|
<li>כפר סבא</li>
|
|
<li>ראש העין</li>
|
|
<li>הוד השרון</li>
|
|
<li>יהוד-מונוסון</li>
|
|
<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>
|
|
</section>
|
|
|
|
<section id="contact" class="contact">
|
|
<div class="container">
|
|
<div class="contact-card" data-reveal>
|
|
<div class="contact-content">
|
|
<h2>צריכים אינסטלטור?</h2>
|
|
<p>אל תחכו עד שהבעיה תחמיר. התקשרו עכשיו לייעוץ חינם או לקביעת תור.</p>
|
|
<div class="contact-phone">
|
|
<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>
|
|
<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>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<svg class="footer-logo" viewBox="0 0 50 50" aria-hidden="true">
|
|
<circle cx="25" cy="25" r="23" fill="var(--orange)"/>
|
|
<path d="M18 15 L18 35 L23 35 L23 27 L27 27 L27 35 L32 35 L32 15 L27 15 L27 23 L23 23 L23 15 Z" fill="var(--navy)"/>
|
|
</svg>
|
|
<span>איציק בכר - אינסטלטור</span>
|
|
</div>
|
|
<div class="footer-info">
|
|
<p>שירותי אינסטלציה מקצועיים בפתח תקווה והסביבה</p>
|
|
<a href="tel:0528555502">052-855-5502</a>
|
|
</div>
|
|
<div class="footer-copy">
|
|
<p>© 2025 איציק בכר. כל הזכויות שמורות.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<a href="tel:0528555502" class="floating-cta" aria-label="התקשרו עכשיו">
|
|
<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>
|
|
<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> |