AI update: עדכן את טופס יצירת הקשר (Contact Form) כך שכתובת המייל שאליה נשלחות הפניות תהיה: support@emilion.co.il

אם יש כתובת מייל

index.html

@@ -200,7 +200,7 @@
             <div class="work-info">
               <span class="work-category">אפליקציית מובייל</span>
               <h3 class="work-title">בריאלי</h3>
-              <p class="work-desc">אפליקציה לניהול בריאות אישית עם מעקב יומי ותובנות מותאמות.</p>
+              <p class="work-desc">אפליקציה לניהול בריאות אישית עם מעקב יומי ותובנות מותאמות אישית.</p>
             </div>
           </div>
         </article>
@@ -319,7 +319,7 @@
   <section class="stats-section" aria-label="נתונים ומספרים">
     <div class="container">
       <div class="stats-grid">
-        <div class="stat stat-featured reveal">
+        <div class="stat reveal">
           <span class="stat-number" data-count="150">0</span>
           <span class="stat-plus">+</span>
           <span class="stat-label">פרויקטים הושלמו</span>
@@ -435,7 +435,7 @@
       <div class="process-timeline">
         <div class="process-line" aria-hidden="true"></div>
         
-        <div class="process-step reveal" data-delay="0">
+        <div class="process-step reveal">
           <div class="process-number" aria-hidden="true">01</div>
           <div class="process-content">
             <h3>גילוי והבנה</h3>
@@ -443,7 +443,7 @@
           </div>
         </div>
 
-        <div class="process-step reveal" data-delay="100">
+        <div class="process-step reveal">
           <div class="process-number" aria-hidden="true">02</div>
           <div class="process-content">
             <h3>אסטרטגיה ותכנון</h3>
@@ -451,7 +451,7 @@
           </div>
         </div>
 
-        <div class="process-step reveal" data-delay="200">
+        <div class="process-step reveal">
           <div class="process-number" aria-hidden="true">03</div>
           <div class="process-content">
             <h3>עיצוב ויצירה</h3>
@@ -459,7 +459,7 @@
           </div>
         </div>
 
-        <div class="process-step reveal" data-delay="300">
+        <div class="process-step reveal">
           <div class="process-number" aria-hidden="true">04</div>
           <div class="process-content">
             <h3>פיתוח והטמעה</h3>
@@ -467,7 +467,7 @@
           </div>
         </div>
 
-        <div class="process-step reveal" data-delay="400">
+        <div class="process-step reveal">
           <div class="process-number" aria-hidden="true">05</div>
           <div class="process-content">
             <h3>השקה וליווי</h3>
@@ -542,7 +542,7 @@
                   <path d="M22 6L12 13L2 6"/>
                 </svg>
               </span>
-              <span>צרו קשר דרך הטופס</span>
+              <a href="mailto:support@emilion.co.il" class="contact-email-link">support@emilion.co.il</a>
             </div>
             <div class="contact-detail">
               <span class="contact-detail-icon" aria-hidden="true">
@@ -561,7 +561,12 @@
           </div>
         </div>
 
-        <form class="contact-form reveal" id="contactForm" novalidate>
+        <form class="contact-form reveal" id="contactForm" action="https://formsubmit.co/support@emilion.co.il" method="POST" novalidate>
+          <input type="hidden" name="_subject" value="פנייה חדשה מאתר אימייליון">
+          <input type="hidden" name="_captcha" value="false">
+          <input type="hidden" name="_template" value="table">
+          <input type="text" name="_honey" style="display:none">
+          
           <div class="form-group">
             <label for="name">שם מלא <span class="required">*</span></label>
             <input type="text" id="name" name="name" required autocomplete="name">

script.js

@@ -51,29 +51,41 @@ window.addEventListener('scroll', () => {
   }
 });
 
-menuToggle.addEventListener('click', () => {
+function toggleMobileMenu() {
+  const isOpen = mobileMenu.classList.contains('active');
+  
   menuToggle.classList.toggle('active');
   mobileMenu.classList.toggle('active');
-  document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
-});
   
-mobileLinks.forEach(link => {
+  // Update ARIA attributes
-  link.addEventListener('click', () => {
+  menuToggle.setAttribute('aria-expanded', !isOpen);
+  mobileMenu.setAttribute('aria-hidden', isOpen);
+  
+  document.body.style.overflow = !isOpen ? 'hidden' : '';
+}
+
+function closeMobileMenu() {
   menuToggle.classList.remove('active');
   mobileMenu.classList.remove('active');
+  menuToggle.setAttribute('aria-expanded', 'false');
+  mobileMenu.setAttribute('aria-hidden', 'true');
   document.body.style.overflow = '';
-  });
+}
+
+menuToggle.addEventListener('click', toggleMobileMenu);
+
+mobileLinks.forEach(link => {
+  link.addEventListener('click', closeMobileMenu);
 });
 
 // Reveal on Scroll
 const reveals = document.querySelectorAll('.reveal');
 
 const revealObserver = new IntersectionObserver((entries) => {
-  entries.forEach((entry, index) => {
+  entries.forEach((entry) => {
     if (entry.isIntersecting) {
-      setTimeout(() => {
       entry.target.classList.add('visible');
-      }, index * 100);
+      revealObserver.unobserve(entry.target);
     }
   });
 }, {
@@ -116,38 +128,80 @@ if (statsSection) {
   statsObserver.observe(statsSection);
 }
 
-// Form Handling
+// Form Handling with actual submission
 const contactForm = document.getElementById('contactForm');
 
 if (contactForm) {
+  const submitBtn = contactForm.querySelector('button[type="submit"]');
+  const originalBtnHTML = submitBtn.innerHTML;
+  
+  // Client-side validation
+  function validateForm() {
+    let isValid = true;
+    const requiredFields = contactForm.querySelectorAll('[required]');
+    
+    requiredFields.forEach(field => {
+      const errorSpan = field.parentElement.querySelector('.form-error');
+      field.classList.remove('error');
+      if (errorSpan) errorSpan.textContent = '';
+      
+      if (!field.value.trim()) {
+        isValid = false;
+        field.classList.add('error');
+        if (errorSpan) errorSpan.textContent = 'שדה חובה';
+      } else if (field.type === 'email' && !isValidEmail(field.value)) {
+        isValid = false;
+        field.classList.add('error');
+        if (errorSpan) errorSpan.textContent = 'כתובת אימייל לא תקינה';
+      }
+    });
+    
+    return isValid;
+  }
+  
+  function isValidEmail(email) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  }
+  
   contactForm.addEventListener('submit', (e) => {
+    if (!validateForm()) {
       e.preventDefault();
+      return;
+    }
     
-    const btn = contactForm.querySelector('button[type="submit"]');
+    // Show loading state but let the form submit naturally
-    const originalText = btn.innerHTML;
+    submitBtn.innerHTML = '<span>שולח...</span>';
+    submitBtn.disabled = true;
+  });
   
-    btn.innerHTML = '<span>שולח...</span>';
+  // Real-time validation on blur
-    btn.disabled = true;
+  contactForm.querySelectorAll('input, textarea').forEach(field => {
+    field.addEventListener('blur', () => {
+      if (field.hasAttribute('required')) {
+        const errorSpan = field.parentElement.querySelector('.form-error');
+        field.classList.remove('error');
+        if (errorSpan) errorSpan.textContent = '';
         
-    setTimeout(() => {
+        if (!field.value.trim()) {
-      btn.innerHTML = '<span>נשלח בהצלחה! ✓</span>';
+          field.classList.add('error');
-      btn.style.background = 'var(--color-success)';
+          if (errorSpan) errorSpan.textContent = 'שדה חובה';
-      
+        } else if (field.type === 'email' && !isValidEmail(field.value)) {
-      setTimeout(() => {
+          field.classList.add('error');
-        btn.innerHTML = originalText;
+          if (errorSpan) errorSpan.textContent = 'כתובת אימייל לא תקינה';
-        btn.style.background = '';
+        }
-        btn.disabled = false;
+      }
-        contactForm.reset();
+    });
-      }, 3000);
-    }, 1500);
   });
 }
 
 // Smooth Scroll for Navigation Links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
   anchor.addEventListener('click', function (e) {
+    const href = this.getAttribute('href');
+    if (href === '#') return;
+    
     e.preventDefault();
-    const target = document.querySelector(this.getAttribute('href'));
+    const target = document.querySelector(href);
     if (target) {
       const navHeight = nav.offsetHeight;
       const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
@@ -160,7 +214,7 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 });
 
 // Parallax effect on hero orbs
-const orbs = document.querySelectorAll('.gradient-orb');
+const orbs = document.querySelectorAll('.hero-bg .gradient-orb');
 
 if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
   window.addEventListener('scroll', () => {

style.css

@@ -2,7 +2,7 @@
   --color-bg: #0a0a0f;
   --color-bg-alt: #12121a;
   --color-text: #f0f0f5;
-  --color-text-muted: #b0b0c5;
+  --color-text-muted: #9ca3b0;
   --color-primary: #6366f1;
   --color-secondary: #ec4899;
   --color-accent: #f59e0b;
@@ -448,7 +448,7 @@ button, input, textarea {
 .hero-title {
   font-size: clamp(2.25rem, 7vw, 4.5rem);
   font-weight: 900;
-  line-height: 1.1;
+  line-height: 1.2;
   margin-bottom: var(--space-md);
 }
 
@@ -514,6 +514,12 @@ button, input, textarea {
   outline-offset: 3px;
 }
 
+.btn-primary:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
 .btn-ghost {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.2);
@@ -535,7 +541,7 @@ button, input, textarea {
   position: absolute;
   bottom: var(--space-md);
   inset-inline-start: 50%;
-  transform: translateX(-50%);
+  transform: translateX(50%);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -544,8 +550,8 @@ button, input, textarea {
   font-size: 0.8rem;
 }
 
-[dir="rtl"] .scroll-indicator {
+[dir="ltr"] .scroll-indicator {
-  transform: translateX(50%);
+  transform: translateX(-50%);
 }
 
 .scroll-line {
@@ -689,7 +695,6 @@ button, input, textarea {
 
 .work-card:hover,
 .work-card:focus-within {
-  transform: translateY(-5px);
   border-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -920,7 +925,6 @@ button, input, textarea {
   color: var(--color-text-muted);
   font-size: 0.95rem;
   margin-bottom: var(--space-sm);
-  max-width: 45ch;
 }
 
 .work-tags {
@@ -1343,7 +1347,7 @@ button, input, textarea {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
-  margin-bottom: var(--space-lg);
+  margin-bottom: var(--space-md);
 }
 
 .contact-detail {
@@ -1366,6 +1370,33 @@ button, input, textarea {
   height: 100%;
 }
 
+.contact-email-link {
+  color: var(--color-text);
+  transition: var(--transition);
+  position: relative;
+}
+
+.contact-email-link::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  inset-inline-start: 0;
+  width: 0;
+  height: 1px;
+  background: var(--color-primary);
+  transition: var(--transition);
+}
+
+.contact-email-link:hover,
+.contact-email-link:focus {
+  color: var(--color-primary);
+}
+
+.contact-email-link:hover::after,
+.contact-email-link:focus::after {
+  width: 100%;
+}
+
 .contact-cta {
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -1401,7 +1432,7 @@ button, input, textarea {
   font-size: 0.9rem;
   font-weight: 500;
   margin-bottom: var(--space-xs);
-  color: var(--color-text-muted);
+  color: var(--color-text);
 }
 
 .form-group .required {