390 lines
21 KiB
HTML
390 lines
21 KiB
HTML
<!doctype html>
|
|
<html lang="he" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>אבי אינסטלציה | אינסטלטור בפתח תקווה 24/7</title>
|
|
<meta name="description" content="אינסטלטור מקצועי בפתח תקווה והסביבה. שירותי תיקון צנרת דחופים, התקנות אינסטלציה, פתיחת סתימות. זמינות מלאה 24 שעות ביממה. טלפון: 052-8234567">
|
|
<meta property="og:title" content="אבי אינסטלציה | אינסטלטור בפתח תקווה 24/7">
|
|
<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='%231a365d'/><path d='M35 30h10v40h-10z M55 30h10v25h15v10h-25z' fill='%2348bb78'/></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">
|
|
</head>
|
|
<body>
|
|
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
|
|
|
<header class="site-header">
|
|
<nav class="nav-container">
|
|
<a href="#hero" class="logo" aria-label="אבי אינסטלציה - חזרה לראש העמוד">
|
|
<svg class="logo-icon" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M14 12h4v16h-4z" fill="currentColor"/>
|
|
<path d="M22 12h4v10h6v4h-10z" fill="currentColor"/>
|
|
</svg>
|
|
<span>אבי אינסטלציה</span>
|
|
</a>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="#services">שירותים</a></li>
|
|
<li><a href="#why-us">למה אנחנו</a></li>
|
|
<li><a href="#contact">יצירת קשר</a></li>
|
|
<li>
|
|
<a href="tel:052-8234567" class="nav-cta nav-phone">
|
|
<svg class="phone-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
052-8234567
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<a href="tel:052-8234567" class="mobile-phone-btn" aria-label="התקשר עכשיו">
|
|
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</a>
|
|
<button class="mobile-toggle" aria-label="פתח תפריט ניווט" aria-expanded="false" aria-controls="navLinks">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<section id="hero" class="hero">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">
|
|
<span class="badge-dot" aria-hidden="true"></span>
|
|
זמינים 24/7
|
|
</div>
|
|
<h1 class="hero-title">
|
|
<span class="title-line">בעיית</span>
|
|
<span class="title-line title-accent">אינסטלציה?</span>
|
|
<span class="title-line">אנחנו בדרך.</span>
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
שירותי אינסטלציה מקצועיים בפתח תקווה והסביבה.<br>
|
|
תגובה מהירה, עבודה נקייה, מחירים הוגנים.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a href="tel:052-8234567" class="btn btn-primary btn-large">
|
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<span>052-8234567</span>
|
|
</a>
|
|
<a href="#contact" class="btn btn-ghost">השאירו פרטים</a>
|
|
</div>
|
|
<p class="hero-area">משרתים את פתח תקווה, גבעת שמואל, כפר גנים והסביבה</p>
|
|
</div>
|
|
<div class="hero-visual">
|
|
<div class="hero-card">
|
|
<div class="hero-card-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 64 64" fill="none">
|
|
<path d="M32 8v20M32 28l16 8v20H16V36l16-8z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="32" cy="44" r="4" fill="currentColor"/>
|
|
<path d="M24 8h16" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="hero-card-content">
|
|
<span class="hero-card-label">זמן הגעה ממוצע</span>
|
|
<span class="hero-card-value">30-45 דקות</span>
|
|
</div>
|
|
</div>
|
|
<div class="hero-card">
|
|
<div class="hero-card-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 64 64" fill="none">
|
|
<circle cx="32" cy="32" r="24" stroke="currentColor" stroke-width="3"/>
|
|
<path d="M20 32l8 8 16-16" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="hero-card-content">
|
|
<span class="hero-card-label">הצעת מחיר</span>
|
|
<span class="hero-card-value">לפני תחילת העבודה</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="services" class="services">
|
|
<div class="container">
|
|
<header class="section-header">
|
|
<span class="section-tag">מה אנחנו עושים</span>
|
|
<h2 class="section-title">שירותי אינסטלציה מקיפים</h2>
|
|
</header>
|
|
<div class="services-grid">
|
|
<article class="service-card service-card-primary">
|
|
<div class="service-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 64 64" fill="none">
|
|
<circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M32 16v20l12 8" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
|
|
<circle cx="32" cy="32" r="4" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>תיקונים דחופים 24/7</h3>
|
|
<p>צינור פרץ באמצע הלילה? סתימה בשבת? זמינים בכל שעה, בכל יום — כולל חגים. הגעה מהירה לכל אזור פתח תקווה.</p>
|
|
</div>
|
|
<span class="service-badge">הכי מבוקש</span>
|
|
</article>
|
|
<article class="service-card">
|
|
<div class="service-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 64 64" fill="none">
|
|
<rect x="12" y="20" width="40" height="32" rx="4" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M20 20v-8a12 12 0 0124 0v8" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="32" cy="36" r="6" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M32 42v6" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>פתיחת סתימות</h3>
|
|
<p>סתימות בכיור, באסלה, במקלחת או בקו הראשי. ציוד מקצועי לפתיחת כל סוגי הסתימות.</p>
|
|
</div>
|
|
</article>
|
|
<article class="service-card">
|
|
<div class="service-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 64 64" fill="none">
|
|
<path d="M16 52V24l16-12 16 12v28H16z" stroke="currentColor" stroke-width="2"/>
|
|
<rect x="26" y="36" width="12" height="16" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="32" cy="28" r="4" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>התקנות חדשות</h3>
|
|
<p>התקנת כיורים, אסלות, מקלחות, ברזים, מכונות כביסה ומדיחי כלים. עבודה נקייה עם אחריות.</p>
|
|
</div>
|
|
</article>
|
|
<article class="service-card">
|
|
<div class="service-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 64 64" fill="none">
|
|
<circle cx="32" cy="32" r="20" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M32 20v24M20 32h24" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="32" cy="32" r="8" stroke="currentColor" stroke-width="2" stroke-dasharray="4 2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>איתור נזילות</h3>
|
|
<p>ציוד מתקדם לאיתור נזילות סמויות בקירות וברצפות. חוסכים נזקים וחשבונות מים מנופחים.</p>
|
|
</div>
|
|
</article>
|
|
<article class="service-card">
|
|
<div class="service-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 64 64" fill="none">
|
|
<rect x="8" y="28" width="48" height="24" rx="2" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M16 28v-8a8 8 0 018-8h16a8 8 0 018 8v8" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M24 40h16M32 36v8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-content">
|
|
<h3>תיקון והחלפת צנרת</h3>
|
|
<p>החלפה ותיקון צינורות ישנים, תיקון דליפות, שדרוג מערכות אינסטלציה בחומרים איכותיים.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="why-us" class="why-us">
|
|
<div class="container">
|
|
<div class="why-us-grid">
|
|
<div class="why-us-content">
|
|
<span class="section-tag">למה לבחור בנו</span>
|
|
<h2 class="section-title">אינסטלטור שאפשר לסמוך עליו</h2>
|
|
<ul class="benefits-list">
|
|
<li class="benefit-item">
|
|
<span class="benefit-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
<div class="benefit-text">
|
|
<strong>מגיעים מהר</strong>
|
|
<span>זמן הגעה של 30-45 דקות בפתח תקווה והסביבה</span>
|
|
</div>
|
|
</li>
|
|
<li class="benefit-item">
|
|
<span class="benefit-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 1v22M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
<div class="benefit-text">
|
|
<strong>מחיר סגור מראש</strong>
|
|
<span>הצעת מחיר לפני תחילת העבודה, בלי הפתעות</span>
|
|
</div>
|
|
</li>
|
|
<li class="benefit-item">
|
|
<span class="benefit-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<polyline points="9,22 9,12 15,12 15,22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
<div class="benefit-text">
|
|
<strong>עבודה נקייה</strong>
|
|
<span>משאירים את הבית נקי בדיוק כמו שמצאנו</span>
|
|
</div>
|
|
</li>
|
|
<li class="benefit-item">
|
|
<span class="benefit-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
<div class="benefit-text">
|
|
<strong>אחריות על העבודה</strong>
|
|
<span>אחריות מלאה על כל עבודה שאנחנו מבצעים</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="why-us-visual">
|
|
<div class="credentials-card">
|
|
<div class="credentials-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 48 48" fill="none">
|
|
<path d="M24 4l18 8v12c0 10-8 18-18 20-10-2-18-10-18-20V12l18-8z" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M16 24l6 6 10-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h3>מורשה ומבוטח</h3>
|
|
<p>בעל רישיון אינסטלטור מוסמך וביטוח מלא לכל עבודה</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact">
|
|
<div class="container">
|
|
<div class="contact-wrapper">
|
|
<div class="contact-info">
|
|
<span class="section-tag">צרו קשר</span>
|
|
<h2 class="section-title">זקוקים לאינסטלטור?</h2>
|
|
<p class="contact-desc">
|
|
למקרים דחופים — התקשרו ישירות.<br>
|
|
לתיאום ביקור — מלאו את הטופס.
|
|
</p>
|
|
<a href="tel:052-8234567" class="contact-phone-block">
|
|
<span class="contact-phone-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</span>
|
|
<span class="contact-phone-text">
|
|
<span class="contact-phone-label">חייגו עכשיו</span>
|
|
<span class="contact-phone-number">052-8234567</span>
|
|
</span>
|
|
</a>
|
|
<div class="contact-details">
|
|
<p><strong>אזורי שירות:</strong> פתח תקווה, גבעת שמואל, כפר גנים, יהוד, אור יהודה</p>
|
|
</div>
|
|
</div>
|
|
<form class="contact-form" id="contactForm" novalidate>
|
|
<div class="form-group">
|
|
<label for="name">שם מלא <span class="required" aria-hidden="true">*</span><span class="sr-only">(שדה חובה)</span></label>
|
|
<input type="text" id="name" name="name" required autocomplete="name">
|
|
<span class="form-error" id="nameError" role="alert" aria-live="polite"></span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">טלפון <span class="required" aria-hidden="true">*</span><span class="sr-only">(שדה חובה)</span></label>
|
|
<input type="tel" id="phone" name="phone" required autocomplete="tel" dir="ltr" inputmode="tel">
|
|
<span class="form-error" id="phoneError" role="alert" aria-live="polite"></span>
|
|
</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="address">כתובת (עיר ורחוב)</label>
|
|
<input type="text" id="address" name="address" autocomplete="street-address">
|
|
</div>
|
|
<div class="form-group form-group-full">
|
|
<label for="message">תיאור הבעיה</label>
|
|
<textarea id="message" name="message" rows="3" placeholder="ספרו בקצרה מה קרה..."></textarea>
|
|
</div>
|
|
<fieldset class="form-group form-group-full urgency-fieldset">
|
|
<legend class="urgency-legend">מתי תרצו שנגיע?</legend>
|
|
<div class="urgency-options">
|
|
<label class="urgency-option">
|
|
<input type="radio" name="urgency" value="urgent">
|
|
<span class="urgency-btn urgency-urgent">דחוף — עכשיו</span>
|
|
</label>
|
|
<label class="urgency-option">
|
|
<input type="radio" name="urgency" value="today" checked>
|
|
<span class="urgency-btn">היום</span>
|
|
</label>
|
|
<label class="urgency-option">
|
|
<input type="radio" name="urgency" value="week">
|
|
<span class="urgency-btn">השבוע</span>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
<button type="submit" class="btn btn-primary btn-submit">
|
|
<span>שליחת פרטים</span>
|
|
</button>
|
|
<p class="form-note">נחזור אליכם בהקדם. למקרים דחופים — עדיף להתקשר.</p>
|
|
</form>
|
|
</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 40 40" fill="none" aria-hidden="true">
|
|
<circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M14 12h4v16h-4z" fill="currentColor"/>
|
|
<path d="M22 12h4v10h6v4h-10z" fill="currentColor"/>
|
|
</svg>
|
|
<div class="footer-brand-text">
|
|
<span class="footer-name">אבי אינסטלציה</span>
|
|
<span class="footer-location">פתח תקווה והסביבה</span>
|
|
</div>
|
|
</div>
|
|
<div class="footer-contact">
|
|
<a href="tel:052-8234567" class="footer-phone">052-8234567</a>
|
|
<span class="footer-hours">זמינים 24/7</span>
|
|
</div>
|
|
</div>
|
|
<p class="footer-copy">© 2024 אבי אינסטלציה. כל הזכויות שמורות.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<div class="form-success" id="formSuccess" role="dialog" aria-modal="true" aria-labelledby="successTitle" hidden>
|
|
<div class="success-content">
|
|
<svg class="success-icon" viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
|
<circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M20 32l8 8 16-16" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<h3 id="successTitle">הפרטים נשלחו בהצלחה!</h3>
|
|
<p>נחזור אליכם בהקדם האפשרי.</p>
|
|
<p class="success-urgent">למקרים דחופים: <a href="tel:052-8234567">052-8234567</a></p>
|
|
<button class="btn btn-ghost" id="successClose">סגור</button>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="tel:052-8234567" class="floating-cta" aria-label="התקשר עכשיו: 052-8234567">
|
|
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<script src="script.js"></script>
|
|
<style>
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|