968 lines
46 KiB
HTML
968 lines
46 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>
|
|
|
|
<!-- Want a site like this FAB + Modal -->
|
|
<button class="want-site-fab" id="wantSiteFab" aria-label="רוצים אתר כזה?">
|
|
<span class="want-site-fab-text">רוצים אתר כזה? לחצו כאן ????</span>
|
|
</button>
|
|
|
|
<div class="package-modal-overlay" id="packageModalOverlay" aria-hidden="true">
|
|
<div class="package-modal" role="dialog" aria-labelledby="packageModalTitle" aria-modal="true">
|
|
<button class="package-modal-close" id="packageModalClose" 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>
|
|
|
|
<h2 id="packageModalTitle" class="package-modal-title">בחרו את החבילה המתאימה לכם</h2>
|
|
|
|
<div class="package-cards">
|
|
<div class="package-card">
|
|
<div class="package-card-header">
|
|
<h3>קוד האתר בלבד</h3>
|
|
<div class="package-price">₪1,490</div>
|
|
</div>
|
|
<ul class="package-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>
|
|
קבצי האתר המלאים (HTML, CSS, JS)
|
|
</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>
|
|
עיצוב מותאם אישית לעסק שלכם
|
|
</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>
|
|
ללא אחסון — תעלו בעצמכם
|
|
</li>
|
|
</ul>
|
|
<button type="button" class="package-btn package-btn-secondary" data-plan="code">
|
|
המשך לתשלום
|
|
<svg 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>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="package-card package-card-featured">
|
|
<div class="package-badge">מומלץ</div>
|
|
<div class="package-card-header">
|
|
<h3>חבילה מלאה</h3>
|
|
<div class="package-price">₪2,390</div>
|
|
</div>
|
|
<ul class="package-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>
|
|
קוד האתר + אחסון לשנה
|
|
</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>
|
|
דומיין בהתאמה אישית
|
|
</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>
|
|
תיבת מייל עסקית
|
|
</li>
|
|
</ul>
|
|
<button type="button" class="package-btn package-btn-primary" data-plan="full">
|
|
המשך לתשלום
|
|
<svg 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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Want a site like this - FAB */
|
|
.want-site-fab {
|
|
position: fixed;
|
|
inset-block-end: calc(var(--space-md) + 60px);
|
|
inset-inline-start: var(--space-md);
|
|
z-index: 95;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
|
|
color: var(--cream);
|
|
font-family: var(--font-display);
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
border: 2px solid var(--orange);
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-lg);
|
|
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
|
|
}
|
|
|
|
.want-site-fab:hover,
|
|
.want-site-fab:focus {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 53, 0.4);
|
|
background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 100%);
|
|
}
|
|
|
|
.want-site-fab-text {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.want-site-fab {
|
|
inset-inline-start: var(--space-sm);
|
|
inset-block-end: calc(var(--space-sm) + 55px);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
/* Package Modal Overlay */
|
|
.package-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 200;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-md);
|
|
background: rgba(21, 42, 69, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s, visibility 0.3s;
|
|
}
|
|
|
|
.package-modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Package Modal */
|
|
.package-modal {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 700px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
padding: var(--space-xl);
|
|
background: var(--cream);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
transform: scale(0.9) translateY(20px);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.package-modal-overlay.active .package-modal {
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
|
|
.package-modal-close {
|
|
position: absolute;
|
|
inset-block-start: var(--space-md);
|
|
inset-inline-end: var(--space-md);
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--gray-light);
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: background 0.2s, transform 0.2s;
|
|
}
|
|
|
|
.package-modal-close svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--navy);
|
|
}
|
|
|
|
.package-modal-close:hover,
|
|
.package-modal-close:focus {
|
|
background: var(--navy);
|
|
}
|
|
|
|
.package-modal-close:hover svg,
|
|
.package-modal-close:focus svg {
|
|
color: var(--cream);
|
|
}
|
|
|
|
.package-modal-title {
|
|
text-align: center;
|
|
font-size: clamp(1.25rem, 4vw, 1.75rem);
|
|
color: var(--navy);
|
|
margin-block-end: var(--space-lg);
|
|
}
|
|
|
|
/* Package Cards */
|
|
.package-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.package-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.package-modal {
|
|
padding: var(--space-lg) var(--space-md);
|
|
}
|
|
}
|
|
|
|
.package-card {
|
|
position: relative;
|
|
padding: var(--space-lg);
|
|
background: white;
|
|
border: 2px solid var(--gray-light);
|
|
border-radius: var(--radius-lg);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.package-card:hover {
|
|
border-color: var(--light-blue);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.package-card-featured {
|
|
border-color: var(--orange);
|
|
background: linear-gradient(180deg, rgba(255, 107, 53, 0.05) 0%, white 100%);
|
|
}
|
|
|
|
.package-card-featured:hover {
|
|
border-color: var(--orange);
|
|
box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 107, 53, 0.15);
|
|
}
|
|
|
|
.package-badge {
|
|
position: absolute;
|
|
inset-block-start: -12px;
|
|
inset-inline-start: 50%;
|
|
transform: translateX(50%);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
background: var(--orange);
|
|
color: white;
|
|
font-family: var(--font-display);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
border-radius: 50px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.package-card-header {
|
|
text-align: center;
|
|
margin-block-end: var(--space-md);
|
|
padding-block-end: var(--space-md);
|
|
border-block-end: 1px solid var(--gray-light);
|
|
}
|
|
|
|
.package-card-header h3 {
|
|
font-size: 1.125rem;
|
|
color: var(--navy);
|
|
margin-block-end: var(--space-xs);
|
|
}
|
|
|
|
.package-price {
|
|
font-family: var(--font-display);
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: var(--orange);
|
|
}
|
|
|
|
.package-features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
margin-block-end: var(--space-lg);
|
|
}
|
|
|
|
.package-features li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-xs);
|
|
font-size: 0.9rem;
|
|
color: var(--gray);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.package-features svg {
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-block-start: 2px;
|
|
color: var(--orange);
|
|
}
|
|
|
|
.package-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-xs);
|
|
width: 100%;
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-family: var(--font-display);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
border-radius: var(--radius-md);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-align: center;
|
|
}
|
|
|
|
.package-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.package-btn:hover svg {
|
|
transform: translateX(-4px);
|
|
}
|
|
|
|
.package-btn-secondary {
|
|
background: var(--navy);
|
|
color: white;
|
|
}
|
|
|
|
.package-btn-secondary:hover,
|
|
.package-btn-secondary:focus {
|
|
background: var(--navy-light);
|
|
}
|
|
|
|
.package-btn-primary {
|
|
background: var(--orange);
|
|
color: white;
|
|
}
|
|
|
|
.package-btn-primary:hover,
|
|
.package-btn-primary:focus {
|
|
background: var(--orange-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-glow);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.package-modal-overlay,
|
|
.package-modal,
|
|
.want-site-fab {
|
|
transition: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
var fab = document.getElementById('wantSiteFab');
|
|
var overlay = document.getElementById('packageModalOverlay');
|
|
var closeBtn = document.getElementById('packageModalClose');
|
|
|
|
function openModal() {
|
|
overlay.classList.add('active');
|
|
overlay.setAttribute('aria-hidden', 'false');
|
|
closeBtn.focus();
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeModal() {
|
|
overlay.classList.remove('active');
|
|
overlay.setAttribute('aria-hidden', 'true');
|
|
document.body.style.overflow = '';
|
|
fab.focus();
|
|
}
|
|
|
|
fab.addEventListener('click', openModal);
|
|
closeBtn.addEventListener('click', closeModal);
|
|
|
|
overlay.addEventListener('click', function(e) {
|
|
if (e.target === overlay) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && overlay.classList.contains('active')) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// Handle package button clicks - navigate top-level to payment page
|
|
var PAYMENT_BASE_URL = 'https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il';
|
|
var BIZ_ID = 'cmt03c1jj0021pa017yj9m8qe';
|
|
var BIZ_NAME = 'איציק בכר - אינסטלטור';
|
|
|
|
document.querySelectorAll('.package-btn[data-plan]').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var plan = this.getAttribute('data-plan');
|
|
var url = PAYMENT_BASE_URL + '?biz=' + encodeURIComponent(BIZ_ID) + '&name=' + encodeURIComponent(BIZ_NAME) + '&plan=' + encodeURIComponent(plan);
|
|
window.top.location.href = url;
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|