Initial AI-generated site
This commit is contained in:
+190
@@ -0,0 +1,190 @@
|
||||
<!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">דלג לתוכן הראשי</a>
|
||||
|
||||
<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">מי אנחנו</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>
|
||||
</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">צור קשר</span>
|
||||
<h1 class="page-title">נשמח לשמוע מכם</h1>
|
||||
<p class="page-subtitle">השאירו פרטים ונחזור אליכם בהקדם האפשרי עם הצעת מחיר מותאמת</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 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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<select id="subject" name="subject">
|
||||
<option value="">בחרו נושא</option>
|
||||
<option value="quote">בקשת הצעת מחיר</option>
|
||||
<option value="info">מידע על מוצרים</option>
|
||||
<option value="partnership">שיתוף פעולה</option>
|
||||
<option value="other">אחר</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">הודעה <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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="contact-info">
|
||||
<div class="info-card">
|
||||
<h3>דרכי התקשרות</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>אזור התעשייה, ישראל</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<h3>שעות פעילות</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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="info-card info-card-cta">
|
||||
<h3>מעדיפים לדבר?</h3>
|
||||
<p>הצוות שלנו ישמח לענות על כל שאלה</p>
|
||||
<p class="cta-note">השאירו מספר טלפון ונחזור אליכם</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">פתרונות יבוא ויצוא מקצועיים לעסקים</p>
|
||||
</div>
|
||||
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||
<h4>ניווט מהיר</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>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-contact">
|
||||
<h4>יצירת קשר</h4>
|
||||
<a href="contact.html" class="btn btn-outline">השאירו פרטים</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 Est Trade. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+400
@@ -0,0 +1,400 @@
|
||||
<!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 – חברת יבוא ויצוא מובילה עם ניסיון של למעלה מ-20 שנה. פתרונות מסחר בינלאומי, מלאי עשיר ושירות אמין.">
|
||||
<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">דלג לתוכן הראשי</a>
|
||||
|
||||
<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="#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>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="hero">
|
||||
<div class="hero-bg">
|
||||
<svg class="hero-pattern" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0a1628"/>
|
||||
<stop offset="100%" stop-color="#1a2d4a"/>
|
||||
</linearGradient>
|
||||
<pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
|
||||
<path d="M60 0v60H0" fill="none" stroke="rgba(232,115,45,0.08)" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#heroGrad)" width="100%" height="100%"/>
|
||||
<rect fill="url(#grid)" width="100%" height="100%"/>
|
||||
<circle cx="650" cy="100" r="200" fill="rgba(232,115,45,0.05)"/>
|
||||
<circle cx="100" cy="500" r="150" fill="rgba(232,115,45,0.03)"/>
|
||||
</svg>
|
||||
</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>
|
||||
</h1>
|
||||
<p class="hero-subtitle">למעלה מ-20 שנות ניסיון בסחר בינלאומי, מלאי עשיר, לוגיסטיקה יעילה ושירות מקצועי שמבין את הצרכים שלכם.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="contact.html" class="btn btn-primary">בקשת הצעת מחיר</a>
|
||||
<a href="#about" class="btn btn-secondary">למידע נוסף</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">20+</span>
|
||||
<span class="stat-label">שנות ניסיון</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">500+</span>
|
||||
<span class="stat-label">לקוחות פעילים</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">15K+</span>
|
||||
<span class="stat-label">פריטים במלאי</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about">
|
||||
<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>
|
||||
<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>
|
||||
קשרים ישירים עם יצרנים מובילים
|
||||
</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>
|
||||
מחסנים מרכזיים עם זמינות גבוהה
|
||||
</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>
|
||||
ליווי מקצועי לאורך כל התהליך
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about-visual">
|
||||
<svg class="about-illustration" viewBox="0 0 400 400" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="boxGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="var(--accent)"/>
|
||||
<stop offset="100%" stop-color="var(--accent-dark)"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="50" y="180" width="120" height="120" fill="var(--primary)" rx="8" opacity="0.8"/>
|
||||
<rect x="100" y="130" width="120" height="120" fill="var(--primary-light)" rx="8" opacity="0.6"/>
|
||||
<rect x="150" y="80" width="120" height="120" fill="url(#boxGrad)" rx="8"/>
|
||||
<path d="M210 110v70M175 145h70" stroke="var(--bg-dark)" stroke-width="6" stroke-linecap="round"/>
|
||||
<circle cx="320" cy="320" r="60" fill="none" stroke="var(--accent)" stroke-width="3" stroke-dasharray="8 8"/>
|
||||
<path d="M280 320h80M320 280v80" stroke="var(--accent)" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="services-grid">
|
||||
<article class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<circle cx="32" cy="32" r="28" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<path d="M20 32h24M32 20v24" stroke="var(--accent)" stroke-width="3" stroke-linecap="round"/>
|
||||
<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>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<rect x="12" y="20" width="40" height="28" rx="4" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<path d="M12 30h40M24 30v18M40 30v18" stroke="var(--accent)" stroke-width="2"/>
|
||||
<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>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<path d="M16 48V24l16-12 16 12v24z" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<rect x="26" y="34" width="12" height="14" fill="var(--accent)" opacity="0.3"/>
|
||||
<path d="M20 24h24" stroke="var(--accent)" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-title">ציוד בנייה</h3>
|
||||
<p class="service-desc">חומרי בניין, כלים וציוד לקבלנים ולפרויקטים גדולים.</p>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<ellipse cx="32" cy="32" rx="24" ry="12" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<ellipse cx="32" cy="24" rx="24" ry="12" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<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>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="advantages" class="advantages">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">למה Est Trade</span>
|
||||
<h2 class="section-title">היתרונות שלנו</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-number" aria-hidden="true">02</div>
|
||||
<div class="advantage-content">
|
||||
<h3>שירות אישי</h3>
|
||||
<p>מנהל לקוח צמוד שמכיר את העסק שלכם ומלווה אתכם בכל שלב.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-number" aria-hidden="true">03</div>
|
||||
<div class="advantage-content">
|
||||
<h3>מלאי זמין</h3>
|
||||
<p>מחסנים מרכזיים עם אלפי פריטים במלאי לאספקה מיידית.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="advantage-item">
|
||||
<div class="advantage-number" aria-hidden="true">04</div>
|
||||
<div class="advantage-content">
|
||||
<h3>לוגיסטיקה יעילה</h3>
|
||||
<p>מערך הפצה ארצי עם זמני אספקה קצרים ומעקב בזמן אמת.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="partners">
|
||||
<div class="container">
|
||||
<div class="section-header section-header-center">
|
||||
<span class="section-tag">שותפים וספקים</span>
|
||||
<h2 class="section-title">עובדים עם המובילים</h2>
|
||||
</div>
|
||||
<div class="partners-grid">
|
||||
<div class="partner-logo">
|
||||
<svg viewBox="0 0 120 60" role="img" aria-label="GlobalTech Industries">
|
||||
<rect x="10" y="18" width="44" height="24" rx="2" fill="var(--gray-500)"/>
|
||||
<rect x="58" y="24" width="52" height="5" rx="2" fill="var(--gray-500)"/>
|
||||
<rect x="58" y="33" width="36" height="4" rx="2" fill="var(--gray-400)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<svg viewBox="0 0 120 60" role="img" aria-label="MetalWorks Pro">
|
||||
<circle cx="30" cy="30" r="18" fill="none" stroke="var(--gray-500)" stroke-width="3"/>
|
||||
<path d="M22 30h16M30 22v16" stroke="var(--gray-500)" stroke-width="2"/>
|
||||
<rect x="56" y="22" width="54" height="6" rx="2" fill="var(--gray-500)"/>
|
||||
<rect x="56" y="32" width="40" height="5" rx="2" fill="var(--gray-400)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<svg viewBox="0 0 120 60" role="img" aria-label="Apex Supply Chain">
|
||||
<polygon points="30,12 50,48 10,48" fill="var(--gray-500)"/>
|
||||
<polygon points="30,22 42,44 18,44" fill="var(--bg-light)"/>
|
||||
<rect x="58" y="26" width="52" height="6" rx="2" fill="var(--gray-500)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<svg viewBox="0 0 120 60" role="img" aria-label="EuroTrade GmbH">
|
||||
<rect x="12" y="16" width="28" height="28" rx="4" fill="var(--gray-500)"/>
|
||||
<path d="M20 30h12M26 24v12" stroke="var(--bg-light)" stroke-width="2"/>
|
||||
<rect x="48" y="22" width="60" height="6" rx="2" fill="var(--gray-500)"/>
|
||||
<rect x="48" y="32" width="44" height="5" rx="2" fill="var(--gray-400)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<svg viewBox="0 0 120 60" role="img" aria-label="Pacific Components">
|
||||
<ellipse cx="30" cy="30" rx="22" ry="16" fill="none" stroke="var(--gray-500)" stroke-width="2.5"/>
|
||||
<ellipse cx="30" cy="30" rx="10" ry="7" fill="var(--gray-500)"/>
|
||||
<rect x="60" y="24" width="50" height="5" rx="2" fill="var(--gray-500)"/>
|
||||
<rect x="60" y="33" width="34" height="4" rx="2" fill="var(--gray-400)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<svg viewBox="0 0 120 60" role="img" aria-label="Industrial Solutions">
|
||||
<path d="M10 44 L24 16 L38 44 L52 16 L66 44" fill="none" stroke="var(--gray-500)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="74" y="26" width="36" height="6" rx="2" fill="var(--gray-500)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="testimonials" class="testimonials">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">לקוחות ממליצים</span>
|
||||
<h2 class="section-title">מה אומרים עלינו</h2>
|
||||
</div>
|
||||
<div class="testimonials-grid">
|
||||
<blockquote class="testimonial-card testimonial-featured">
|
||||
<div class="testimonial-content">
|
||||
<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>
|
||||
</div>
|
||||
<footer class="testimonial-author">
|
||||
<div class="author-avatar">מ.כ</div>
|
||||
<div class="author-info">
|
||||
<cite>משה כהן</cite>
|
||||
<span>מנכ"ל, תעשיות הצפון</span>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<blockquote class="testimonial-card">
|
||||
<div class="testimonial-content">
|
||||
<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>
|
||||
</div>
|
||||
<footer class="testimonial-author">
|
||||
<div class="author-avatar">ש.ל</div>
|
||||
<div class="author-info">
|
||||
<cite>שרה לוי</cite>
|
||||
<span>רכשת ראשית, אלקטרו-מק</span>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<blockquote class="testimonial-card">
|
||||
<div class="testimonial-content">
|
||||
<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>
|
||||
</div>
|
||||
<footer class="testimonial-author">
|
||||
<div class="author-avatar">י.ב</div>
|
||||
<div class="author-info">
|
||||
<cite>יוסי ברק</cite>
|
||||
<span>בעלים, ברק מתכות</span>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
</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">פתרונות יבוא ויצוא מקצועיים לעסקים</p>
|
||||
</div>
|
||||
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||
<h4>ניווט מהיר</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>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-contact">
|
||||
<h4>יצירת קשר</h4>
|
||||
<a href="contact.html" class="btn btn-outline">השאירו פרטים</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 Est Trade. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Mobile Navigation Toggle
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
if (navToggle && navLinks) {
|
||||
navToggle.addEventListener('click', function() {
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
this.setAttribute('aria-expanded', !isExpanded);
|
||||
navLinks.classList.toggle('is-open');
|
||||
});
|
||||
|
||||
// Close menu when clicking a link
|
||||
navLinks.querySelectorAll('a').forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('is-open');
|
||||
});
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!navToggle.contains(e.target) && !navLinks.contains(e.target)) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('is-open');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll Reveal Animation
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
if (!prefersReducedMotion) {
|
||||
const 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'
|
||||
);
|
||||
|
||||
revealElements.forEach(function(el) {
|
||||
el.classList.add('reveal');
|
||||
});
|
||||
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const revealObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
revealElements.forEach(function(el) {
|
||||
revealObserver.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// Contact Form Handling with Validation
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
const formSuccess = document.getElementById('formSuccess');
|
||||
|
||||
if (contactForm && formSuccess) {
|
||||
const validators = {
|
||||
name: {
|
||||
validate: function(value) { return value.trim().length >= 2; },
|
||||
message: 'נא להזין שם מלא'
|
||||
},
|
||||
email: {
|
||||
validate: function(value) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value); },
|
||||
message: 'נא להזין כתובת אימייל תקינה'
|
||||
},
|
||||
phone: {
|
||||
validate: function(value) { return /^[\d\-\+\s]{9,}$/.test(value); },
|
||||
message: 'נא להזין מספר טלפון תקין'
|
||||
},
|
||||
message: {
|
||||
validate: function(value) { return value.trim().length >= 10; },
|
||||
message: 'נא להזין הודעה (לפחות 10 תווים)'
|
||||
}
|
||||
};
|
||||
|
||||
function validateField(field) {
|
||||
const validator = validators[field.name];
|
||||
if (!validator) return true;
|
||||
|
||||
const errorEl = field.parentElement.querySelector('.form-error');
|
||||
const isValid = validator.validate(field.value);
|
||||
|
||||
if (!isValid) {
|
||||
field.classList.add('is-invalid');
|
||||
if (errorEl) errorEl.textContent = validator.message;
|
||||
} else {
|
||||
field.classList.remove('is-invalid');
|
||||
if (errorEl) errorEl.textContent = '';
|
||||
}
|
||||
|
||||
return isValid;
|
||||
}
|
||||
|
||||
// Real-time validation on blur
|
||||
Object.keys(validators).forEach(function(fieldName) {
|
||||
const field = contactForm.querySelector('[name="' + fieldName + '"]');
|
||||
if (field) {
|
||||
field.addEventListener('blur', function() {
|
||||
validateField(this);
|
||||
});
|
||||
field.addEventListener('input', function() {
|
||||
if (this.classList.contains('is-invalid')) {
|
||||
validateField(this);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let isFormValid = true;
|
||||
|
||||
Object.keys(validators).forEach(function(fieldName) {
|
||||
const field = contactForm.querySelector('[name="' + fieldName + '"]');
|
||||
if (field && !validateField(field)) {
|
||||
isFormValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (!isFormValid) {
|
||||
const firstInvalid = contactForm.querySelector('.is-invalid');
|
||||
if (firstInvalid) firstInvalid.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const submitBtn = contactForm.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = 'שולח...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
setTimeout(function() {
|
||||
contactForm.hidden = true;
|
||||
formSuccess.hidden = false;
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
// 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');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
e.preventDefault();
|
||||
const headerHeight = document.querySelector('.site-header').offsetHeight;
|
||||
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Header background enhancement on scroll
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
if (header) {
|
||||
window.addEventListener('scroll', function() {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 100) {
|
||||
header.style.background = 'rgba(10, 22, 40, 0.98)';
|
||||
} else {
|
||||
header.style.background = 'rgba(10, 22, 40, 0.95)';
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user