Files
est-trade/contact.html
T

199 lines
13 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>צור קשר | Est Trade</title>
<meta name="description" content="צרו קשר עם Est Trade לקבלת הצעת מחיר או כל שאלה בנושא יבוא ויצוא.">
<meta property="og:title" content="צור קשר | Est Trade">
<meta property="og:description" content="השאירו פרטים ונחזור אליכם בהקדם">
<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 32 32'><rect fill='%230a1628' width='32' height='32' rx='4'/><text x='16' y='22' font-size='18' fill='%23e8732d' text-anchor='middle' font-family='system-ui' font-weight='600'>E</text></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" data-lang-he="דלג לתוכן הראשי" data-lang-en="Skip to main content">דלג לתוכן הראשי</a>
<button class="lang-toggle" id="langToggle" aria-label="Switch language">
<span class="lang-toggle-text">EN</span>
<svg class="lang-toggle-icon" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
</button>
<header class="site-header">
<nav class="nav-container">
<a href="index.html" class="logo">
<svg class="logo-icon" viewBox="0 0 48 48" aria-hidden="true">
<rect fill="var(--accent)" width="48" height="48" rx="6"/>
<path d="M12 14h24v4H16v6h18v4H16v6h20v4H12z" fill="var(--bg-dark)"/>
</svg>
<span class="logo-text">Est Trade</span>
</a>
<button class="nav-toggle" aria-label="תפריט" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<ul class="nav-links">
<li><a href="index.html#about" data-lang-he="מי אנחנו" data-lang-en="About Us">מי אנחנו</a></li>
<li><a href="index.html#services" data-lang-he="תחומי פעילות" data-lang-en="Services">תחומי פעילות</a></li>
<li><a href="index.html#advantages" data-lang-he="יתרונות" data-lang-en="Advantages">יתרונות</a></li>
<li><a href="index.html#testimonials" data-lang-he="לקוחות ממליצים" data-lang-en="Testimonials">לקוחות ממליצים</a></li>
<li><a href="contact.html" class="nav-cta" aria-current="page" data-lang-he="צור קשר" data-lang-en="Contact Us">צור קשר</a></li>
</ul>
</nav>
</header>
<main id="main-content">
<section class="contact-hero">
<div class="contact-hero-bg">
<svg viewBox="0 0 800 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<linearGradient id="contactGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0a1628"/>
<stop offset="100%" stop-color="#1a2d4a"/>
</linearGradient>
</defs>
<rect fill="url(#contactGrad)" width="100%" height="100%"/>
<circle cx="700" cy="50" r="150" fill="rgba(232,115,45,0.05)"/>
</svg>
</div>
<div class="container">
<div class="contact-hero-content">
<span class="section-tag" data-lang-he="צור קשר" data-lang-en="Contact Us">צור קשר</span>
<h1 class="page-title" data-lang-he="נשמח לשמוע מכם" data-lang-en="We'd Love to Hear From You">נשמח לשמוע מכם</h1>
<p class="page-subtitle" data-lang-he="השאירו פרטים ונחזור אליכם בהקדם האפשרי עם הצעת מחיר מותאמת" data-lang-en="Leave your details and we'll get back to you as soon as possible with a customized quote">השאירו פרטים ונחזור אליכם בהקדם האפשרי עם הצעת מחיר מותאמת</p>
</div>
</div>
</section>
<section class="contact-main">
<div class="container">
<div class="contact-grid">
<div class="contact-form-wrapper">
<form class="contact-form" id="contactForm" novalidate>
<div class="form-group">
<label for="name"><span data-lang-he="שם מלא" data-lang-en="Full Name">שם מלא</span> <span class="required" aria-hidden="true">*</span></label>
<input type="text" id="name" name="name" required autocomplete="name" aria-required="true">
<span class="form-error" role="alert"></span>
</div>
<div class="form-group">
<label for="company" data-lang-he="שם החברה" data-lang-en="Company Name">שם החברה</label>
<input type="text" id="company" name="company" autocomplete="organization">
</div>
<div class="form-row">
<div class="form-group">
<label for="email"><span data-lang-he="אימייל" data-lang-en="Email">אימייל</span> <span class="required" aria-hidden="true">*</span></label>
<input type="email" id="email" name="email" required autocomplete="email" aria-required="true">
<span class="form-error" role="alert"></span>
</div>
<div class="form-group">
<label for="phone"><span data-lang-he="טלפון" data-lang-en="Phone">טלפון</span> <span class="required" aria-hidden="true">*</span></label>
<input type="tel" id="phone" name="phone" required autocomplete="tel" aria-required="true">
<span class="form-error" role="alert"></span>
</div>
</div>
<div class="form-group">
<label for="subject" data-lang-he="נושא הפנייה" data-lang-en="Subject">נושא הפנייה</label>
<select id="subject" name="subject">
<option value="" data-lang-he="בחרו נושא" data-lang-en="Select a subject">בחרו נושא</option>
<option value="quote" data-lang-he="בקשת הצעת מחיר" data-lang-en="Request a Quote">בקשת הצעת מחיר</option>
<option value="info" data-lang-he="מידע על מוצרים" data-lang-en="Product Information">מידע על מוצרים</option>
<option value="partnership" data-lang-he="שיתוף פעולה" data-lang-en="Partnership">שיתוף פעולה</option>
<option value="other" data-lang-he="אחר" data-lang-en="Other">אחר</option>
</select>
</div>
<div class="form-group">
<label for="message"><span data-lang-he="הודעה" data-lang-en="Message">הודעה</span> <span class="required" aria-hidden="true">*</span></label>
<textarea id="message" name="message" rows="5" required aria-required="true"></textarea>
<span class="form-error" role="alert"></span>
</div>
<button type="submit" class="btn btn-primary btn-large" data-lang-he="שליחת הפנייה" data-lang-en="Send Message">שליחת הפנייה</button>
<p class="form-note" data-lang-he="* שדות חובה" data-lang-en="* Required fields">* שדות חובה</p>
</form>
<div class="form-success" id="formSuccess" role="status" aria-live="polite" hidden>
<svg viewBox="0 0 64 64" aria-hidden="true">
<circle cx="32" cy="32" r="28" fill="var(--accent)" opacity="0.2"/>
<path d="M20 32l8 8 16-16" fill="none" stroke="var(--accent)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<h3 data-lang-he="תודה על פנייתכם!" data-lang-en="Thank You!">תודה על פנייתכם!</h3>
<p data-lang-he="נחזור אליכם בהקדם האפשרי." data-lang-en="We'll get back to you as soon as possible.">נחזור אליכם בהקדם האפשרי.</p>
</div>
</div>
<aside class="contact-info">
<div class="info-card">
<h3 data-lang-he="דרכי התקשרות" data-lang-en="Contact Information">דרכי התקשרות</h3>
<ul class="info-list">
<li>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path fill="var(--accent)" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
<a href="mailto:info@est-trade.co.il">info@est-trade.co.il</a>
</li>
<li>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path fill="var(--accent)" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
<span data-lang-he="אזור התעשייה, ישראל" data-lang-en="Industrial Zone, Israel">אזור התעשייה, ישראל</span>
</li>
</ul>
</div>
<div class="info-card">
<h3 data-lang-he="שעות פעילות" data-lang-en="Business Hours">שעות פעילות</h3>
<ul class="hours-list">
<li><span data-lang-he="ראשון - חמישי" data-lang-en="Sunday - Thursday">ראשון - חמישי</span><span>08:00 - 17:00</span></li>
<li><span data-lang-he="שישי" data-lang-en="Friday">שישי</span><span>08:00 - 13:00</span></li>
<li><span data-lang-he="שבת" data-lang-en="Saturday">שבת</span><span data-lang-he="סגור" data-lang-en="Closed">סגור</span></li>
</ul>
</div>
<div class="info-card info-card-cta">
<h3 data-lang-he="מעדיפים לדבר?" data-lang-en="Prefer to Talk?">מעדיפים לדבר?</h3>
<p data-lang-he="הצוות שלנו ישמח לענות על כל שאלה" data-lang-en="Our team would be happy to answer any question">הצוות שלנו ישמח לענות על כל שאלה</p>
<p class="cta-note" data-lang-he="השאירו מספר טלפון ונחזור אליכם" data-lang-en="Leave your phone number and we'll call you back">השאירו מספר טלפון ונחזור אליכם</p>
</div>
</aside>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="index.html" class="logo">
<svg class="logo-icon" viewBox="0 0 48 48" aria-hidden="true">
<rect fill="var(--accent)" width="48" height="48" rx="6"/>
<path d="M12 14h24v4H16v6h18v4H16v6h20v4H12z" fill="var(--bg-dark)"/>
</svg>
<span class="logo-text">Est Trade</span>
</a>
<p class="footer-tagline" data-lang-he="פתרונות יבוא ויצוא מקצועיים לעסקים" data-lang-en="Professional import & export solutions for businesses">פתרונות יבוא ויצוא מקצועיים לעסקים</p>
</div>
<nav class="footer-nav" aria-label="ניווט תחתון">
<h4 data-lang-he="ניווט מהיר" data-lang-en="Quick Navigation">ניווט מהיר</h4>
<ul>
<li><a href="index.html#about" data-lang-he="מי אנחנו" data-lang-en="About Us">מי אנחנו</a></li>
<li><a href="index.html#services" data-lang-he="תחומי פעילות" data-lang-en="Services">תחומי פעילות</a></li>
<li><a href="index.html#advantages" data-lang-he="יתרונות" data-lang-en="Advantages">יתרונות</a></li>
<li><a href="contact.html" data-lang-he="צור קשר" data-lang-en="Contact Us">צור קשר</a></li>
</ul>
</nav>
<div class="footer-contact">
<h4 data-lang-he="יצירת קשר" data-lang-en="Contact">יצירת קשר</h4>
<a href="contact.html" class="btn btn-outline" data-lang-he="השאירו פרטים" data-lang-en="Leave Details">השאירו פרטים</a>
</div>
</div>
<div class="footer-bottom">
<p data-lang-he="© 2024 Est Trade. כל הזכויות שמורות." data-lang-en="© 2024 Est Trade. All rights reserved.">© 2024 Est Trade. כל הזכויות שמורות.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>