diff --git a/index.html b/index.html index 7f4cdbe..77d5928 100644 --- a/index.html +++ b/index.html @@ -304,7 +304,7 @@
מי אנחנו -

סטודיו שמאמין
בכוח של עיצוב

+

סטודיו שמאמין בכוח של עיצוב

אימייליון הוקמה מתוך אמונה שעיצוב דיגיטלי צריך להיות יותר מיפה — הוא צריך לעבוד. אנחנו משלבים חשיבה אסטרטגית, עיצוב פורץ דרך וטכנולוגיית AI מתקדמת כדי ליצור חוויות שמניעות תוצאות.

@@ -338,20 +338,34 @@

יש לכם פרויקט?
בואו נדבר

-
+
+

מעדיפים אימייל? שלחו לנו הודעה ישירות:

+ + + yossi.em@gmail.com + +
+ + + + +
- +
- +
- +
+
@@ -381,6 +396,7 @@ שירותים אודות צור קשר + yossi.em@gmail.com
diff --git a/script.js b/script.js index ff42144..6a580f3 100644 --- a/script.js +++ b/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; + }); + }); + } + })(); \ No newline at end of file diff --git a/style.css b/style.css index ee8cd31..9b468be 100644 --- a/style.css +++ b/style.css @@ -353,9 +353,9 @@ ul { transform: scaleX(-1); } -.btn:hover .btn-arrow, -.btn:focus .btn-arrow { - transform: translateX(-4px); +[dir="rtl"] .btn:hover .btn-arrow, +[dir="rtl"] .btn:focus .btn-arrow { + 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);