AI update: הוסף לאתר כפתור צף (floating toggle) בפינת המסך שמאפשר החלפה בין עברית לאנגלית. צור תרגום מלא לאנגלית של כל תוכן האתר הק

This commit is contained in:
2026-09-03 14:41:55 +00:00
parent 0c65b5e2d1
commit 30881b1f3a
4 changed files with 286 additions and 149 deletions
+50 -42
View File
@@ -15,7 +15,15 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<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">
@@ -30,11 +38,11 @@
<span></span><span></span><span></span>
</button>
<ul class="nav-links">
<li><a href="index.html#about">מי אנחנו</a></li>
<li><a href="index.html#services">תחומי פעילות</a></li>
<li><a href="index.html#advantages">יתרונות</a></li>
<li><a href="index.html#testimonials">לקוחות ממליצים</a></li>
<li><a href="contact.html" class="nav-cta" aria-current="page">צור קשר</a></li>
<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>
@@ -55,9 +63,9 @@
</div>
<div class="container">
<div class="contact-hero-content">
<span class="section-tag">צור קשר</span>
<h1 class="page-title">נשמח לשמוע מכם</h1>
<p class="page-subtitle">השאירו פרטים ונחזור אליכם בהקדם האפשרי עם הצעת מחיר מותאמת</p>
<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>
@@ -68,56 +76,56 @@
<div class="contact-form-wrapper">
<form class="contact-form" id="contactForm" novalidate>
<div class="form-group">
<label for="name">שם מלא <span class="required" aria-hidden="true">*</span></label>
<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">שם החברה</label>
<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 class="required" aria-hidden="true">*</span></label>
<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 class="required" aria-hidden="true">*</span></label>
<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">נושא הפנייה</label>
<label for="subject" data-lang-he="נושא הפנייה" data-lang-en="Subject">נושא הפנייה</label>
<select id="subject" name="subject">
<option value="">בחרו נושא</option>
<option value="quote">בקשת הצעת מחיר</option>
<option value="info">מידע על מוצרים</option>
<option value="partnership">שיתוף פעולה</option>
<option value="other">אחר</option>
<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 class="required" aria-hidden="true">*</span></label>
<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">שליחת הפנייה</button>
<p class="form-note">* שדות חובה</p>
<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>תודה על פנייתכם!</h3>
<p>נחזור אליכם בהקדם האפשרי.</p>
<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>דרכי התקשרות</h3>
<h3 data-lang-he="דרכי התקשרות" data-lang-en="Contact Information">דרכי התקשרות</h3>
<ul class="info-list">
<li>
<svg viewBox="0 0 24 24" aria-hidden="true">
@@ -129,22 +137,22 @@
<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>אזור התעשייה, ישראל</span>
<span data-lang-he="אזור התעשייה, ישראל" data-lang-en="Industrial Zone, Israel">אזור התעשייה, ישראל</span>
</li>
</ul>
</div>
<div class="info-card">
<h3>שעות פעילות</h3>
<h3 data-lang-he="שעות פעילות" data-lang-en="Business Hours">שעות פעילות</h3>
<ul class="hours-list">
<li><span>ראשון - חמישי</span><span>08:00 - 17:00</span></li>
<li><span>שישי</span><span>08:00 - 13:00</span></li>
<li><span>שבת</span><span>סגור</span></li>
<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>מעדיפים לדבר?</h3>
<p>הצוות שלנו ישמח לענות על כל שאלה</p>
<p class="cta-note">השאירו מספר טלפון ונחזור אליכם</p>
<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>
@@ -163,24 +171,24 @@
</svg>
<span class="logo-text">Est Trade</span>
</a>
<p class="footer-tagline">פתרונות יבוא ויצוא מקצועיים לעסקים</p>
<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>ניווט מהיר</h4>
<h4 data-lang-he="ניווט מהיר" data-lang-en="Quick Navigation">ניווט מהיר</h4>
<ul>
<li><a href="index.html#about">מי אנחנו</a></li>
<li><a href="index.html#services">תחומי פעילות</a></li>
<li><a href="index.html#advantages">יתרונות</a></li>
<li><a href="contact.html">צור קשר</a></li>
<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>יצירת קשר</h4>
<a href="contact.html" class="btn btn-outline">השאירו פרטים</a>
<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>© 2024 Est Trade. כל הזכויות שמורות.</p>
<p data-lang-he="© 2024 Est Trade. כל הזכויות שמורות." data-lang-en="© 2024 Est Trade. All rights reserved.">© 2024 Est Trade. כל הזכויות שמורות.</p>
</div>
</div>
</footer>
+84 -76
View File
@@ -15,7 +15,15 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<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">
@@ -30,11 +38,11 @@
<span></span><span></span><span></span>
</button>
<ul class="nav-links">
<li><a href="#about">מי אנחנו</a></li>
<li><a href="#services">תחומי פעילות</a></li>
<li><a href="#advantages">יתרונות</a></li>
<li><a href="#testimonials">לקוחות ממליצים</a></li>
<li><a href="contact.html" class="nav-cta">צור קשר</a></li>
<li><a href="#about" data-lang-he="מי אנחנו" data-lang-en="About Us">מי אנחנו</a></li>
<li><a href="#services" data-lang-he="תחומי פעילות" data-lang-en="Services">תחומי פעילות</a></li>
<li><a href="#advantages" data-lang-he="יתרונות" data-lang-en="Advantages">יתרונות</a></li>
<li><a href="#testimonials" data-lang-he="לקוחות ממליצים" data-lang-en="Testimonials">לקוחות ממליצים</a></li>
<li><a href="contact.html" class="nav-cta" data-lang-he="צור קשר" data-lang-en="Contact Us">צור קשר</a></li>
</ul>
</nav>
</header>
@@ -60,27 +68,27 @@
</div>
<div class="hero-content">
<h1 class="hero-title">
<span class="hero-title-line">פתרונות</span>
<span class="hero-title-line hero-title-accent">יבוא ויצוא</span>
<span class="hero-title-line">לעסקים</span>
<span class="hero-title-line" data-lang-he="פתרונות" data-lang-en="Professional">פתרונות</span>
<span class="hero-title-line hero-title-accent" data-lang-he="יבוא ויצוא" data-lang-en="Import & Export">יבוא ויצוא</span>
<span class="hero-title-line" data-lang-he="לעסקים" data-lang-en="Solutions">לעסקים</span>
</h1>
<p class="hero-subtitle">למעלה מ-20 שנות ניסיון בסחר בינלאומי, מלאי עשיר, לוגיסטיקה יעילה ושירות מקצועי שמבין את הצרכים שלכם.</p>
<p class="hero-subtitle" data-lang-he="למעלה מ-20 שנות ניסיון בסחר בינלאומי, מלאי עשיר, לוגיסטיקה יעילה ושירות מקצועי שמבין את הצרכים שלכם." data-lang-en="Over 20 years of international trade experience, extensive inventory, efficient logistics, and professional service that understands your needs.">למעלה מ-20 שנות ניסיון בסחר בינלאומי, מלאי עשיר, לוגיסטיקה יעילה ושירות מקצועי שמבין את הצרכים שלכם.</p>
<div class="hero-actions">
<a href="contact.html" class="btn btn-primary">בקשת הצעת מחיר</a>
<a href="#about" class="btn btn-secondary">למידע נוסף</a>
<a href="contact.html" class="btn btn-primary" data-lang-he="בקשת הצעת מחיר" data-lang-en="Request a Quote">בקשת הצעת מחיר</a>
<a href="#about" class="btn btn-secondary" data-lang-he="למידע נוסף" data-lang-en="Learn More">למידע נוסף</a>
</div>
<div class="hero-stats">
<div class="stat-item">
<span class="stat-number">20+</span>
<span class="stat-label">שנות ניסיון</span>
<span class="stat-label" data-lang-he="שנות ניסיון" data-lang-en="Years Experience">שנות ניסיון</span>
</div>
<div class="stat-item">
<span class="stat-number">500+</span>
<span class="stat-label">לקוחות פעילים</span>
<span class="stat-label" data-lang-he="לקוחות פעילים" data-lang-en="Active Clients">לקוחות פעילים</span>
</div>
<div class="stat-item">
<span class="stat-number">15K+</span>
<span class="stat-label">פריטים במלאי</span>
<span class="stat-label" data-lang-he="פריטים במלאי" data-lang-en="Items in Stock">פריטים במלאי</span>
</div>
</div>
</div>
@@ -90,22 +98,22 @@
<div class="container">
<div class="about-grid">
<div class="about-content">
<span class="section-tag">מי אנחנו</span>
<h2 class="section-title">ניסיון וותק בענף היבוא והיצוא</h2>
<p class="about-text">Est Trade הוקמה לפני למעלה משני עשורים מתוך חזון להפוך את עולם הסחר הבינלאומי לנגיש ויעיל עבור עסקים בישראל. מאז, בנינו רשת קשרים בינלאומית רחבה עם יצרנים וספקים מובילים מרחבי העולם.</p>
<p class="about-text">הצוות המקצועי שלנו מלווה כל לקוח באופן אישי, מאיתור המוצר המתאים ועד להגעתו לפתח העסק. אנחנו גאים באמינות שלנו, בשירות האישי ובמחויבות לעמידה בלוחות זמנים.</p>
<span class="section-tag" data-lang-he="מי אנחנו" data-lang-en="About Us">מי אנחנו</span>
<h2 class="section-title" data-lang-he="ניסיון וותק בענף היבוא והיצוא" data-lang-en="Experience and Expertise in Import & Export">ניסיון וותק בענף היבוא והיצוא</h2>
<p class="about-text" data-lang-he="Est Trade הוקמה לפני למעלה משני עשורים מתוך חזון להפוך את עולם הסחר הבינלאומי לנגיש ויעיל עבור עסקים בישראל. מאז, בנינו רשת קשרים בינלאומית רחבה עם יצרנים וספקים מובילים מרחבי העולם." data-lang-en="Est Trade was founded over two decades ago with a vision to make international trade accessible and efficient for businesses in Israel. Since then, we have built an extensive international network with leading manufacturers and suppliers from around the world.">Est Trade הוקמה לפני למעלה משני עשורים מתוך חזון להפוך את עולם הסחר הבינלאומי לנגיש ויעיל עבור עסקים בישראל. מאז, בנינו רשת קשרים בינלאומית רחבה עם יצרנים וספקים מובילים מרחבי העולם.</p>
<p class="about-text" data-lang-he="הצוות המקצועי שלנו מלווה כל לקוח באופן אישי, מאיתור המוצר המתאים ועד להגעתו לפתח העסק. אנחנו גאים באמינות שלנו, בשירות האישי ובמחויבות לעמידה בלוחות זמנים." data-lang-en="Our professional team personally accompanies each client, from finding the right product to its delivery to your business doorstep. We take pride in our reliability, personal service, and commitment to meeting deadlines.">הצוות המקצועי שלנו מלווה כל לקוח באופן אישי, מאיתור המוצר המתאים ועד להגעתו לפתח העסק. אנחנו גאים באמינות שלנו, בשירות האישי ובמחויבות לעמידה בלוחות זמנים.</p>
<ul class="about-list">
<li>
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="var(--accent)" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
קשרים ישירים עם יצרנים מובילים
<span data-lang-he="קשרים ישירים עם יצרנים מובילים" data-lang-en="Direct connections with leading manufacturers">קשרים ישירים עם יצרנים מובילים</span>
</li>
<li>
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="var(--accent)" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
מחסנים מרכזיים עם זמינות גבוהה
<span data-lang-he="מחסנים מרכזיים עם זמינות גבוהה" data-lang-en="Central warehouses with high availability">מחסנים מרכזיים עם זמינות גבוהה</span>
</li>
<li>
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="var(--accent)" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
ליווי מקצועי לאורך כל התהליך
<span data-lang-he="ליווי מקצועי לאורך כל התהליך" data-lang-en="Professional guidance throughout the process">ליווי מקצועי לאורך כל התהליך</span>
</li>
</ul>
</div>
@@ -132,9 +140,9 @@
<section id="services" class="services">
<div class="container">
<div class="section-header">
<span class="section-tag">תחומי פעילות</span>
<h2 class="section-title">קטגוריות מוצרים</h2>
<p class="section-desc">מגוון רחב של מוצרים ופתרונות לכל תעשייה</p>
<span class="section-tag" data-lang-he="תחומי פעילות" data-lang-en="Services">תחומי פעילות</span>
<h2 class="section-title" data-lang-he="קטגוריות מוצרים" data-lang-en="Product Categories">קטגוריות מוצרים</h2>
<p class="section-desc" data-lang-he="מגוון רחב של מוצרים ופתרונות לכל תעשייה" data-lang-en="A wide range of products and solutions for every industry">מגוון רחב של מוצרים ופתרונות לכל תעשייה</p>
</div>
<div class="services-grid">
<article class="service-card">
@@ -145,8 +153,8 @@
<circle cx="32" cy="32" r="8" fill="var(--accent)" opacity="0.3"/>
</svg>
</div>
<h3 class="service-title">ציוד תעשייתי</h3>
<p class="service-desc">מכונות, כלי עבודה וציוד לקווי ייצור מהמותגים המובילים בעולם.</p>
<h3 class="service-title" data-lang-he="ציוד תעשייתי" data-lang-en="Industrial Equipment">ציוד תעשייתי</h3>
<p class="service-desc" data-lang-he="מכונות, כלי עבודה וציוד לקווי ייצור מהמותגים המובילים בעולם." data-lang-en="Machines, tools, and production line equipment from the world's leading brands.">מכונות, כלי עבודה וציוד לקווי ייצור מהמותגים המובילים בעולם.</p>
</article>
<article class="service-card">
<div class="service-icon">
@@ -156,8 +164,8 @@
<circle cx="32" cy="14" r="6" fill="var(--accent)" opacity="0.3"/>
</svg>
</div>
<h3 class="service-title">חומרי גלם</h3>
<p class="service-desc">מתכות, פלסטיקה, רכיבים כימיים וחומרי בסיס לתעשייה.</p>
<h3 class="service-title" data-lang-he="חומרי גלם" data-lang-en="Raw Materials">חומרי גלם</h3>
<p class="service-desc" data-lang-he="מתכות, פלסטיקה, רכיבים כימיים וחומרי בסיס לתעשייה." data-lang-en="Metals, plastics, chemical components, and base materials for industry.">מתכות, פלסטיקה, רכיבים כימיים וחומרי בסיס לתעשייה.</p>
</article>
<article class="service-card">
<div class="service-icon">
@@ -167,8 +175,8 @@
<path d="M20 24h24" stroke="var(--accent)" stroke-width="2"/>
</svg>
</div>
<h3 class="service-title">ציוד בנייה</h3>
<p class="service-desc">חומרי בניין, כלים וציוד לקבלנים ולפרויקטים גדולים.</p>
<h3 class="service-title" data-lang-he="ציוד בנייה" data-lang-en="Construction Equipment">ציוד בנייה</h3>
<p class="service-desc" data-lang-he="חומרי בניין, כלים וציוד לקבלנים ולפרויקטים גדולים." data-lang-en="Building materials, tools, and equipment for contractors and large projects.">חומרי בניין, כלים וציוד לקבלנים ולפרויקטים גדולים.</p>
</article>
<article class="service-card">
<div class="service-icon">
@@ -178,8 +186,8 @@
<ellipse cx="32" cy="16" rx="24" ry="12" fill="var(--accent)" opacity="0.2"/>
</svg>
</div>
<h3 class="service-title">אלקטרוניקה</h3>
<p class="service-desc">רכיבים אלקטרוניים, מעגלים ופתרונות טכנולוגיים.</p>
<h3 class="service-title" data-lang-he="אלקטרוניקה" data-lang-en="Electronics">אלקטרוניקה</h3>
<p class="service-desc" data-lang-he="רכיבים אלקטרוניים, מעגלים ופתרונות טכנולוגיים." data-lang-en="Electronic components, circuits, and technological solutions.">רכיבים אלקטרוניים, מעגלים ופתרונות טכנולוגיים.</p>
</article>
<article class="service-card">
<div class="service-icon">
@@ -187,14 +195,14 @@
<path d="M32 8v48M16 20l16 12-16 12M48 20l-16 12 16 12" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="service-title">לוגיסטיקה</h3>
<p class="service-desc">שירותי שילוח, אחסון והפצה לכל יעד בארץ ובעולם.</p>
<h3 class="service-title" data-lang-he="לוגיסטיקה" data-lang-en="Logistics">לוגיסטיקה</h3>
<p class="service-desc" data-lang-he="שירותי שילוח, אחסון והפצה לכל יעד בארץ ובעולם." data-lang-en="Shipping, storage, and distribution services to any destination worldwide.">שירותי שילוח, אחסון והפצה לכל יעד בארץ ובעולם.</p>
</article>
<article class="service-card service-card-cta">
<div class="service-cta-content">
<h3 class="service-title">לא מצאתם?</h3>
<p class="service-desc">נשמח לעזור לכם למצוא את המוצר המתאים</p>
<a href="contact.html" class="btn btn-accent">דברו איתנו</a>
<h3 class="service-title" data-lang-he="לא מצאתם?" data-lang-en="Can't find it?">לא מצאתם?</h3>
<p class="service-desc" data-lang-he="נשמח לעזור לכם למצוא את המוצר המתאים" data-lang-en="We'd be happy to help you find the right product">נשמח לעזור לכם למצוא את המוצר המתאים</p>
<a href="contact.html" class="btn btn-accent" data-lang-he="דברו איתנו" data-lang-en="Talk to Us">דברו איתנו</a>
</div>
</article>
</div>
@@ -204,36 +212,36 @@
<section id="advantages" class="advantages">
<div class="container">
<div class="section-header">
<span class="section-tag">למה Est Trade</span>
<h2 class="section-title">היתרונות שלנו</h2>
<span class="section-tag" data-lang-he="למה Est Trade" data-lang-en="Why Est Trade">למה Est Trade</span>
<h2 class="section-title" data-lang-he="היתרונות שלנו" data-lang-en="Our Advantages">היתרונות שלנו</h2>
</div>
<div class="advantages-grid">
<div class="advantage-item">
<div class="advantage-number" aria-hidden="true">01</div>
<div class="advantage-content">
<h3>אמינות ושקיפות</h3>
<p>עבודה בשקיפות מלאה, עמידה בהתחייבויות ובניית יחסי אמון ארוכי טווח עם כל לקוח.</p>
<h3 data-lang-he="אמינות ושקיפות" data-lang-en="Reliability & Transparency">אמינות ושקיפות</h3>
<p data-lang-he="עבודה בשקיפות מלאה, עמידה בהתחייבויות ובניית יחסי אמון ארוכי טווח עם כל לקוח." data-lang-en="Working with full transparency, meeting commitments, and building long-term trust with every client.">עבודה בשקיפות מלאה, עמידה בהתחייבויות ובניית יחסי אמון ארוכי טווח עם כל לקוח.</p>
</div>
</div>
<div class="advantage-item">
<div class="advantage-number" aria-hidden="true">02</div>
<div class="advantage-content">
<h3>שירות אישי</h3>
<p>מנהל לקוח צמוד שמכיר את העסק שלכם ומלווה אתכם בכל שלב.</p>
<h3 data-lang-he="שירות אישי" data-lang-en="Personal Service">שירות אישי</h3>
<p data-lang-he="מנהל לקוח צמוד שמכיר את העסק שלכם ומלווה אתכם בכל שלב." data-lang-en="A dedicated account manager who knows your business and guides you every step of the way.">מנהל לקוח צמוד שמכיר את העסק שלכם ומלווה אתכם בכל שלב.</p>
</div>
</div>
<div class="advantage-item">
<div class="advantage-number" aria-hidden="true">03</div>
<div class="advantage-content">
<h3>מלאי זמין</h3>
<p>מחסנים מרכזיים עם אלפי פריטים במלאי לאספקה מיידית.</p>
<h3 data-lang-he="מלאי זמין" data-lang-en="Available Inventory">מלאי זמין</h3>
<p data-lang-he="מחסנים מרכזיים עם אלפי פריטים במלאי לאספקה מיידית." data-lang-en="Central warehouses with thousands of items in stock for immediate supply.">מחסנים מרכזיים עם אלפי פריטים במלאי לאספקה מיידית.</p>
</div>
</div>
<div class="advantage-item">
<div class="advantage-number" aria-hidden="true">04</div>
<div class="advantage-content">
<h3>לוגיסטיקה יעילה</h3>
<p>מערך הפצה ארצי עם זמני אספקה קצרים ומעקב בזמן אמת.</p>
<h3 data-lang-he="לוגיסטיקה יעילה" data-lang-en="Efficient Logistics">לוגיסטיקה יעילה</h3>
<p data-lang-he="מערך הפצה ארצי עם זמני אספקה קצרים ומעקב בזמן אמת." data-lang-en="Nationwide distribution network with short delivery times and real-time tracking.">מערך הפצה ארצי עם זמני אספקה קצרים ומעקב בזמן אמת.</p>
</div>
</div>
</div>
@@ -243,8 +251,8 @@
<section class="partners">
<div class="container">
<div class="section-header section-header-center">
<span class="section-tag">שותפים וספקים</span>
<h2 class="section-title">עובדים עם המובילים</h2>
<span class="section-tag" data-lang-he="שותפים וספקים" data-lang-en="Partners & Suppliers">שותפים וספקים</span>
<h2 class="section-title" data-lang-he="עובדים עם המובילים" data-lang-en="Working with Industry Leaders">עובדים עם המובילים</h2>
</div>
<div class="partners-grid">
<div class="partner-logo">
@@ -298,8 +306,8 @@
<section id="testimonials" class="testimonials">
<div class="container">
<div class="section-header">
<span class="section-tag">לקוחות ממליצים</span>
<h2 class="section-title">מה אומרים עלינו</h2>
<span class="section-tag" data-lang-he="לקוחות ממליצים" data-lang-en="Testimonials">לקוחות ממליצים</span>
<h2 class="section-title" data-lang-he="מה אומרים עלינו" data-lang-en="What Our Clients Say">מה אומרים עלינו</h2>
</div>
<div class="testimonials-grid">
<blockquote class="testimonial-card testimonial-featured">
@@ -307,13 +315,13 @@
<svg class="quote-icon" viewBox="0 0 32 32" aria-hidden="true">
<path fill="var(--accent)" opacity="0.4" d="M6 18h6l-2 8h4l4-8V6H6zm14 0h6l-2 8h4l4-8V6H20z"/>
</svg>
<p>עובדים עם Est Trade כבר 8 שנים. האמינות והזמינות שלהם יוצאות דופן. תמיד יודעים שאפשר לסמוך עליהם.</p>
<p data-lang-he="עובדים עם Est Trade כבר 8 שנים. האמינות והזמינות שלהם יוצאות דופן. תמיד יודעים שאפשר לסמוך עליהם." data-lang-en="We've been working with Est Trade for 8 years. Their reliability and availability are exceptional. We always know we can count on them.">עובדים עם Est Trade כבר 8 שנים. האמינות והזמינות שלהם יוצאות דופן. תמיד יודעים שאפשר לסמוך עליהם.</p>
</div>
<footer class="testimonial-author">
<div class="author-avatar">מ.כ</div>
<div class="author-avatar" data-lang-he="מ.כ" data-lang-en="M.C">מ.כ</div>
<div class="author-info">
<cite>משה כהן</cite>
<span>מנכ"ל, תעשיות הצפון</span>
<cite data-lang-he="משה כהן" data-lang-en="Moshe Cohen">משה כהן</cite>
<span data-lang-he="מנכ״ל, תעשיות הצפון" data-lang-en="CEO, Northern Industries">מנכ"ל, תעשיות הצפון</span>
</div>
</footer>
</blockquote>
@@ -322,13 +330,13 @@
<svg class="quote-icon" viewBox="0 0 32 32" aria-hidden="true">
<path fill="var(--accent)" opacity="0.3" d="M6 18h6l-2 8h4l4-8V6H6zm14 0h6l-2 8h4l4-8V6H20z"/>
</svg>
<p>השירות האישי הוא מה שמבדיל אותם מכולם. מנהל הלקוח שלנו מכיר כל פריט שאנחנו צריכים.</p>
<p data-lang-he="השירות האישי הוא מה שמבדיל אותם מכולם. מנהל הלקוח שלנו מכיר כל פריט שאנחנו צריכים." data-lang-en="The personal service is what sets them apart. Our account manager knows every item we need.">השירות האישי הוא מה שמבדיל אותם מכולם. מנהל הלקוח שלנו מכיר כל פריט שאנחנו צריכים.</p>
</div>
<footer class="testimonial-author">
<div class="author-avatar">ש.ל</div>
<div class="author-avatar" data-lang-he="ש.ל" data-lang-en="S.L">ש.ל</div>
<div class="author-info">
<cite>שרה לוי</cite>
<span>רכשת ראשית, אלקטרו-מק</span>
<cite data-lang-he="שרה לוי" data-lang-en="Sarah Levy">שרה לוי</cite>
<span data-lang-he="רכשת ראשית, אלקטרו-מק" data-lang-en="Chief Procurement, Electro-Mac">רכשת ראשית, אלקטרו-מק</span>
</div>
</footer>
</blockquote>
@@ -337,13 +345,13 @@
<svg class="quote-icon" viewBox="0 0 32 32" aria-hidden="true">
<path fill="var(--accent)" opacity="0.3" d="M6 18h6l-2 8h4l4-8V6H6zm14 0h6l-2 8h4l4-8V6H20z"/>
</svg>
<p>המחירים תחרותיים, האיכות גבוהה, והכי חשוב – תמיד עונים לטלפון. שותפות עסקית אמיתית.</p>
<p data-lang-he="המחירים תחרותיים, האיכות גבוהה, והכי חשוב – תמיד עונים לטלפון. שותפות עסקית אמיתית." data-lang-en="Competitive prices, high quality, and most importantly – they always answer the phone. A true business partnership.">המחירים תחרותיים, האיכות גבוהה, והכי חשוב – תמיד עונים לטלפון. שותפות עסקית אמיתית.</p>
</div>
<footer class="testimonial-author">
<div class="author-avatar">י.ב</div>
<div class="author-avatar" data-lang-he="י.ב" data-lang-en="Y.B">י.ב</div>
<div class="author-info">
<cite>יוסי ברק</cite>
<span>בעלים, ברק מתכות</span>
<cite data-lang-he="יוסי ברק" data-lang-en="Yossi Barak">יוסי ברק</cite>
<span data-lang-he="בעלים, ברק מתכות" data-lang-en="Owner, Barak Metals">בעלים, ברק מתכות</span>
</div>
</footer>
</blockquote>
@@ -354,9 +362,9 @@
<section class="cta-section">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">מוכנים להתחיל?</h2>
<p class="cta-text">השאירו פרטים ונחזור אליכם עם הצעת מחיר מותאמת אישית</p>
<a href="contact.html" class="btn btn-primary btn-large">בקשת הצעת מחיר</a>
<h2 class="cta-title" data-lang-he="מוכנים להתחיל?" data-lang-en="Ready to Get Started?">מוכנים להתחיל?</h2>
<p class="cta-text" data-lang-he="השאירו פרטים ונחזור אליכם עם הצעת מחיר מותאמת אישית" data-lang-en="Leave your details and we'll get back to you with a customized quote">השאירו פרטים ונחזור אליכם עם הצעת מחיר מותאמת אישית</p>
<a href="contact.html" class="btn btn-primary btn-large" data-lang-he="בקשת הצעת מחיר" data-lang-en="Request a Quote">בקשת הצעת מחיר</a>
</div>
</div>
</section>
@@ -373,24 +381,24 @@
</svg>
<span class="logo-text">Est Trade</span>
</a>
<p class="footer-tagline">פתרונות יבוא ויצוא מקצועיים לעסקים</p>
<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>ניווט מהיר</h4>
<h4 data-lang-he="ניווט מהיר" data-lang-en="Quick Navigation">ניווט מהיר</h4>
<ul>
<li><a href="#about">מי אנחנו</a></li>
<li><a href="#services">תחומי פעילות</a></li>
<li><a href="#advantages">יתרונות</a></li>
<li><a href="contact.html">צור קשר</a></li>
<li><a href="#about" data-lang-he="מי אנחנו" data-lang-en="About Us">מי אנחנו</a></li>
<li><a href="#services" data-lang-he="תחומי פעילות" data-lang-en="Services">תחומי פעילות</a></li>
<li><a href="#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>יצירת קשר</h4>
<a href="contact.html" class="btn btn-outline">השאירו פרטים</a>
<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>© 2024 Est Trade. כל הזכויות שמורות.</p>
<p data-lang-he="© 2024 Est Trade. כל הזכויות שמורות." data-lang-en="© 2024 Est Trade. All rights reserved.">© 2024 Est Trade. כל הזכויות שמורות.</p>
</div>
</div>
</footer>
+93 -31
View File
@@ -1,13 +1,69 @@
(function() {
'use strict';
// Language Toggle Functionality
var currentLang = localStorage.getItem('est-trade-lang') || 'he';
var langToggle = document.getElementById('langToggle');
var langToggleText = langToggle ? langToggle.querySelector('.lang-toggle-text') : null;
function setLanguage(lang) {
currentLang = lang;
localStorage.setItem('est-trade-lang', lang);
var htmlEl = document.documentElement;
if (lang === 'en') {
htmlEl.setAttribute('lang', 'en');
htmlEl.setAttribute('dir', 'ltr');
if (langToggleText) langToggleText.textContent = 'עב';
} else {
htmlEl.setAttribute('lang', 'he');
htmlEl.setAttribute('dir', 'rtl');
if (langToggleText) langToggleText.textContent = 'EN';
}
var translatableElements = document.querySelectorAll('[data-lang-he][data-lang-en]');
translatableElements.forEach(function(el) {
var heText = el.getAttribute('data-lang-he');
var enText = el.getAttribute('data-lang-en');
el.textContent = lang === 'en' ? enText : heText;
});
updatePageTitle(lang);
}
function updatePageTitle(lang) {
var titleEl = document.querySelector('title');
if (!titleEl) return;
var currentTitle = titleEl.textContent;
if (window.location.pathname.includes('contact')) {
titleEl.textContent = lang === 'en' ? 'Contact Us | Est Trade' : 'צור קשר | Est Trade';
} else {
titleEl.textContent = lang === 'en' ? 'Est Trade | Professional Import & Export' : 'Est Trade | יבוא ויצוא מקצועי לעסקים';
}
}
if (langToggle) {
langToggle.addEventListener('click', function() {
var newLang = currentLang === 'he' ? 'en' : 'he';
setLanguage(newLang);
});
}
// Initialize language on page load
if (currentLang) {
setLanguage(currentLang);
}
// Mobile Navigation Toggle
const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelector('.nav-links');
var navToggle = document.querySelector('.nav-toggle');
var navLinks = document.querySelector('.nav-links');
if (navToggle && navLinks) {
navToggle.addEventListener('click', function() {
const isExpanded = this.getAttribute('aria-expanded') === 'true';
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
navLinks.classList.toggle('is-open');
});
@@ -30,10 +86,10 @@
}
// Scroll Reveal Animation
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!prefersReducedMotion) {
const revealElements = document.querySelectorAll(
var revealElements = document.querySelectorAll(
'.about-content, .about-visual, .service-card, .advantage-item, ' +
'.testimonial-card, .partner-logo, .section-header, .hero-content, ' +
'.hero-stats, .info-card, .contact-form'
@@ -43,13 +99,13 @@
el.classList.add('reveal');
});
const observerOptions = {
var observerOptions = {
root: null,
rootMargin: '0px 0px -50px 0px',
threshold: 0.1
};
const revealObserver = new IntersectionObserver(function(entries) {
var revealObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
@@ -64,39 +120,45 @@
}
// Contact Form Handling with Validation
const contactForm = document.getElementById('contactForm');
const formSuccess = document.getElementById('formSuccess');
var contactForm = document.getElementById('contactForm');
var formSuccess = document.getElementById('formSuccess');
if (contactForm && formSuccess) {
const validators = {
var validators = {
name: {
validate: function(value) { return value.trim().length >= 2; },
message: 'נא להזין שם מלא'
messageHe: 'נא להזין שם מלא',
messageEn: 'Please enter your full name'
},
email: {
validate: function(value) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value); },
message: 'נא להזין כתובת אימייל תקינה'
messageHe: 'נא להזין כתובת אימייל תקינה',
messageEn: 'Please enter a valid email address'
},
phone: {
validate: function(value) { return /^[\d\-\+\s]{9,}$/.test(value); },
message: 'נא להזין מספר טלפון תקין'
messageHe: 'נא להזין מספר טלפון תקין',
messageEn: 'Please enter a valid phone number'
},
message: {
validate: function(value) { return value.trim().length >= 10; },
message: 'נא להזין הודעה (לפחות 10 תווים)'
messageHe: 'נא להזין הודעה (לפחות 10 תווים)',
messageEn: 'Please enter a message (at least 10 characters)'
}
};
function validateField(field) {
const validator = validators[field.name];
var validator = validators[field.name];
if (!validator) return true;
const errorEl = field.parentElement.querySelector('.form-error');
const isValid = validator.validate(field.value);
var errorEl = field.parentElement.querySelector('.form-error');
var isValid = validator.validate(field.value);
if (!isValid) {
field.classList.add('is-invalid');
if (errorEl) errorEl.textContent = validator.message;
if (errorEl) {
errorEl.textContent = currentLang === 'en' ? validator.messageEn : validator.messageHe;
}
} else {
field.classList.remove('is-invalid');
if (errorEl) errorEl.textContent = '';
@@ -107,7 +169,7 @@
// Real-time validation on blur
Object.keys(validators).forEach(function(fieldName) {
const field = contactForm.querySelector('[name="' + fieldName + '"]');
var field = contactForm.querySelector('[name="' + fieldName + '"]');
if (field) {
field.addEventListener('blur', function() {
validateField(this);
@@ -123,24 +185,24 @@
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
let isFormValid = true;
var isFormValid = true;
Object.keys(validators).forEach(function(fieldName) {
const field = contactForm.querySelector('[name="' + fieldName + '"]');
var field = contactForm.querySelector('[name="' + fieldName + '"]');
if (field && !validateField(field)) {
isFormValid = false;
}
});
if (!isFormValid) {
const firstInvalid = contactForm.querySelector('.is-invalid');
var firstInvalid = contactForm.querySelector('.is-invalid');
if (firstInvalid) firstInvalid.focus();
return;
}
const submitBtn = contactForm.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
submitBtn.textContent = 'שולח...';
var submitBtn = contactForm.querySelector('button[type="submit"]');
var originalText = submitBtn.textContent;
submitBtn.textContent = currentLang === 'en' ? 'Sending...' : 'שולח...';
submitBtn.disabled = true;
setTimeout(function() {
@@ -153,14 +215,14 @@
// Smooth scroll for anchor links with header offset
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
var targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
var targetElement = document.querySelector(targetId);
if (targetElement) {
e.preventDefault();
const headerHeight = document.querySelector('.site-header').offsetHeight;
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;
var headerHeight = document.querySelector('.site-header').offsetHeight;
var targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;
window.scrollTo({
top: targetPosition,
@@ -171,11 +233,11 @@
});
// Header background enhancement on scroll
const header = document.querySelector('.site-header');
var header = document.querySelector('.site-header');
if (header) {
window.addEventListener('scroll', function() {
const currentScroll = window.pageYOffset;
var currentScroll = window.pageYOffset;
if (currentScroll > 100) {
header.style.background = 'rgba(10, 22, 40, 0.98)';
+59
View File
@@ -123,6 +123,65 @@ button, input, select, textarea {
}
}
/* ========================
LANGUAGE TOGGLE
======================== */
.lang-toggle {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 1001;
display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: var(--accent);
color: var(--text-light);
border: none;
border-radius: 100px;
cursor: pointer;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
box-shadow: var(--shadow-lg);
transition: var(--transition-base);
}
.lang-toggle:hover {
background: var(--accent-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.lang-toggle:focus {
outline: 3px solid var(--accent-light);
outline-offset: 2px;
}
.lang-toggle:focus:not(:focus-visible) {
outline: none;
}
.lang-toggle:focus-visible {
outline: 3px solid var(--accent-light);
outline-offset: 2px;
}
.lang-toggle-icon {
width: 20px;
height: 20px;
}
.lang-toggle-text {
letter-spacing: 0.5px;
}
[dir="ltr"] .lang-toggle {
left: auto;
right: 24px;
}
/* ========================
SKIP LINK
======================== */