AI update: עדכן את טופס צור קשר כך שכל ההודעות יישלחו לכתובת המייל: yossi.em@gmail.com

וודא שזו הכתובת המוגדרת בכל מקום שיש אפשרות

index.html

@@ -304,7 +304,7 @@
       <div class="about-grid">
         <div class="about-content reveal">
           <span class="section-label">מי אנחנו</span>
-          <h2 id="about-title" class="about-title">סטודיו שמאמין<br>בכוח של עיצוב</h2>
+          <h2 id="about-title" class="about-title">סטודיו שמאמין בכוח&nbsp;של&nbsp;עיצוב</h2>
           <p class="about-text">
             אימייליון הוקמה מתוך אמונה שעיצוב דיגיטלי צריך להיות יותר מיפה — הוא צריך לעבוד. אנחנו משלבים חשיבה אסטרטגית, עיצוב פורץ דרך וטכנולוגיית AI מתקדמת כדי ליצור חוויות שמניעות תוצאות.
           </p>
@@ -338,20 +338,34 @@
           <h2 id="contact-title" class="contact-title reveal">יש לכם פרויקט?<br>בואו נדבר</h2>
         </header>
         
-        <form class="contact-form reveal" action="#" method="POST" novalidate>
+        <div class="contact-email-cta reveal">
+          <p class="contact-email-text">מעדיפים אימייל? שלחו לנו הודעה ישירות:</p>
+          <a href="mailto:yossi.em@gmail.com" class="contact-email-link">
+            <svg class="email-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <rect x="2" y="4" width="20" height="16" rx="2"/>
+              <path d="M22 6L12 13 2 6"/>
+            </svg>
+            <span>yossi.em@gmail.com</span>
+          </a>
+        </div>
+        
+        <form class="contact-form reveal" id="contact-form" action="https://formsubmit.co/yossi.em@gmail.com" method="POST">
+          <input type="hidden" name="_subject" value="הודעה חדשה מהאתר - אימייליון">
+          <input type="hidden" name="_captcha" value="false">
+          <input type="hidden" name="_template" value="table">
           <div class="form-row">
             <div class="form-group">
               <label for="name" class="form-label">שם מלא</label>
-              <input type="text" id="name" name="name" class="form-input" autocomplete="name" placeholder=" " required>
+              <input type="text" id="name" name="name" class="form-input" autocomplete="name" required>
             </div>
             <div class="form-group">
               <label for="email" class="form-label">אימייל</label>
-              <input type="email" id="email" name="email" class="form-input" autocomplete="email" placeholder=" " required>
+              <input type="email" id="email" name="email" class="form-input" autocomplete="email" required>
             </div>
           </div>
           <div class="form-group">
             <label for="project" class="form-label">ספרו לנו על הפרויקט</label>
-            <textarea id="project" name="project" class="form-input form-textarea" rows="4" placeholder=" "></textarea>
+            <textarea id="project" name="project" class="form-input form-textarea" rows="4"></textarea>
           </div>
           <button type="submit" class="btn btn-primary btn-large">
             <span>שליחת הודעה</span>
@@ -359,6 +373,7 @@
               <path d="M5 12H19M12 5l7 7-7 7"/>
             </svg>
           </button>
+          <div class="form-status" id="form-status" role="status" aria-live="polite"></div>
         </form>
       </div>
     </section>
@@ -381,6 +396,7 @@
         <a href="#services">שירותים</a>
         <a href="#about">אודות</a>
         <a href="#contact">צור קשר</a>
+        <a href="mailto:yossi.em@gmail.com">yossi.em@gmail.com</a>
       </nav>
     </div>
     <div class="footer-bottom">

script.js

@@ -119,44 +119,6 @@
     revealElements.forEach(el => el.classList.add('visible'));
   }
 
-  // Form submission
-  const contactForm = document.querySelector('.contact-form');
-  
-  if (contactForm) {
-    contactForm.addEventListener('submit', (e) => {
-      e.preventDefault();
-      
-      const btn = contactForm.querySelector('.btn');
-      const btnText = btn.querySelector('span');
-      const originalText = btnText.textContent;
-      
-      // Basic validation
-      const name = contactForm.querySelector('#name');
-      const email = contactForm.querySelector('#email');
-      
-      if (!name.value.trim() || !email.value.trim()) {
-        return;
-      }
-      
-      // Disable button
-      btn.disabled = true;
-      btnText.textContent = 'שולח...';
-      
-      // Simulate send (replace with actual form handling)
-      setTimeout(() => {
-        btnText.textContent = 'נשלח בהצלחה! ✓';
-        btn.style.background = 'linear-gradient(135deg, #00b894 0%, #55efc4 100%)';
-        
-        setTimeout(() => {
-          btnText.textContent = originalText;
-          btn.style.background = '';
-          btn.disabled = false;
-          contactForm.reset();
-        }, 3000);
-      }, 1000);
-    });
-  }
-
   // Smooth scroll for anchor links
   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', (e) => {
@@ -177,4 +139,52 @@
     });
   });
 
+  // Form submission handling with feedback
+  const contactForm = document.getElementById('contact-form');
+  const formStatus = document.getElementById('form-status');
+  
+  if (contactForm && formStatus) {
+    contactForm.addEventListener('submit', function(e) {
+      const submitBtn = contactForm.querySelector('button[type="submit"]');
+      const originalText = submitBtn.querySelector('span').textContent;
+      
+      // Show loading state
+      submitBtn.disabled = true;
+      submitBtn.querySelector('span').textContent = 'שולח...';
+      
+      // FormSubmit handles the actual submission
+      // We add a listener for successful redirect or show error after timeout
+      
+      // Since FormSubmit redirects by default, we'll use fetch for better UX
+      e.preventDefault();
+      
+      const formData = new FormData(contactForm);
+      
+      fetch(contactForm.action, {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'Accept': 'application/json'
+        }
+      })
+      .then(response => {
+        if (response.ok) {
+          formStatus.textContent = 'ההודעה נשלחה בהצלחה! נחזור אליכם בהקדם.';
+          formStatus.className = 'form-status success';
+          contactForm.reset();
+        } else {
+          throw new Error('Network response was not ok');
+        }
+      })
+      .catch(error => {
+        formStatus.textContent = 'אירעה שגיאה בשליחת ההודעה. אנא נסו שוב או צרו קשר במייל.';
+        formStatus.className = 'form-status error';
+      })
+      .finally(() => {
+        submitBtn.disabled = false;
+        submitBtn.querySelector('span').textContent = originalText;
+      });
+    });
+  }
+
 })();

style.css

@@ -353,9 +353,9 @@ ul {
   transform: scaleX(-1);
 }
 
-.btn:hover .btn-arrow,
+[dir="rtl"] .btn:hover .btn-arrow,
-.btn:focus .btn-arrow {
+[dir="rtl"] .btn:focus .btn-arrow {
-  transform: translateX(-4px);
+  transform: scaleX(-1) translateX(-4px);
 }
 
 [dir="ltr"] .btn:hover .btn-arrow,
@@ -434,7 +434,7 @@ ul {
 .hero-sub {
   font-size: clamp(1rem, 2vw, 1.25rem);
   color: var(--color-text-muted);
-  max-width: 520px;
+  max-width: 460px;
   margin-bottom: var(--space-xl);
   line-height: 1.7;
 }
@@ -516,11 +516,12 @@ ul {
   gap: var(--space-xs);
   font-size: 0.875rem;
   color: var(--color-text-muted);
-  animation: bounce 2s ease-in-out infinite;
+  animation: bounce-rtl 2s ease-in-out infinite;
 }
 
 [dir="ltr"] .scroll-hint {
   transform: translateX(-50%);
+  animation-name: bounce-ltr;
 }
 
 .scroll-hint svg {
@@ -528,15 +529,11 @@ ul {
   height: 24px;
 }
 
-@keyframes bounce {
+@keyframes bounce-rtl {
   0%, 100% { transform: translateX(50%) translateY(0); }
   50% { transform: translateX(50%) translateY(10px); }
 }
 
-[dir="ltr"] .scroll-hint {
-  animation-name: bounce-ltr;
-}
-
 @keyframes bounce-ltr {
   0%, 100% { transform: translateX(-50%) translateY(0); }
   50% { transform: translateX(-50%) translateY(10px); }
@@ -584,7 +581,6 @@ ul {
   font-weight: 600;
   color: var(--color-primary);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
   margin-bottom: var(--space-sm);
 }
 
@@ -682,7 +678,6 @@ ul {
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.1em;
   color: var(--color-secondary);
   margin-bottom: var(--space-xs);
 }
@@ -695,7 +690,7 @@ ul {
 
 .work-desc {
   font-size: 0.9rem;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 255, 255, 0.9);
   opacity: 0;
   transform: translateY(10px);
   transition: all var(--transition-smooth);
@@ -818,7 +813,7 @@ ul {
 .service-desc {
   font-size: 1rem;
   color: var(--color-text-muted);
-  max-width: 500px;
+  max-width: 440px;
 }
 
 .service-visual {
@@ -878,7 +873,7 @@ ul {
   color: var(--color-text-muted);
   margin-bottom: var(--space-md);
   font-size: 1.05rem;
-  max-width: 480px;
+  max-width: 420px;
 }
 
 .about-visual {
@@ -954,7 +949,51 @@ ul {
   font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 900;
   line-height: 1.1;
+  margin-bottom: var(--space-lg);
+}
+
+/* Contact Email CTA */
+.contact-email-cta {
   margin-bottom: var(--space-xl);
+  padding: var(--space-lg);
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.contact-email-text {
+  font-size: 0.95rem;
+  color: var(--color-text-muted);
+  margin-bottom: var(--space-sm);
+}
+
+.contact-email-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--color-secondary);
+  transition: all var(--transition-fast);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+}
+
+.contact-email-link:hover,
+.contact-email-link:focus {
+  color: var(--color-text);
+  background: rgba(0, 245, 212, 0.1);
+}
+
+.contact-email-link:focus {
+  outline: 2px solid var(--color-secondary);
+  outline-offset: 2px;
+}
+
+.email-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
 }
 
 .contact-form {
@@ -1031,6 +1070,30 @@ ul {
   cursor: not-allowed;
 }
 
+/* Form Status Messages */
+.form-status {
+  padding: var(--space-md);
+  border-radius: var(--radius-md);
+  margin-top: var(--space-md);
+  text-align: center;
+  font-weight: 600;
+  display: none;
+}
+
+.form-status.success {
+  display: block;
+  background: rgba(0, 245, 212, 0.15);
+  color: var(--color-secondary);
+  border: 1px solid var(--color-secondary);
+}
+
+.form-status.error {
+  display: block;
+  background: rgba(231, 76, 60, 0.15);
+  color: #e74c3c;
+  border: 1px solid #e74c3c;
+}
+
 /* Footer */
 .site-footer {
   padding: var(--space-2xl) var(--space-lg) var(--space-lg);
@@ -1056,6 +1119,7 @@ ul {
 .footer-nav {
   display: flex;
   gap: var(--space-lg);
+  flex-wrap: wrap;
 }
 
 .footer-nav a {
@@ -1074,6 +1138,15 @@ ul {
   outline-offset: 4px;
 }
 
+.footer-nav a[href^="mailto"] {
+  color: var(--color-secondary);
+}
+
+.footer-nav a[href^="mailto"]:hover,
+.footer-nav a[href^="mailto"]:focus {
+  color: var(--color-text);
+}
+
 .footer-bottom {
   text-align: center;
   padding-top: var(--space-lg);