est-trade/contact.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">דלג לתוכן הראשי</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>