Initial AI-generated site
This commit is contained in:
+481
@@ -0,0 +1,481 @@
|
||||
<!doctype html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>אמיליו – הדירקטוריון הדיגיטלי לעסק שלך | Emaillion</title>
|
||||
<meta name="description" content="אמיליו הוא הדירקטוריון הדיגיטלי שמנהל לך את העסק – ואתה מחליט מה קורה. סוכני AI מומחים לשיווק, מכירות, כספים, תפעול ועוד. אפס פעולות בלי אישור אנושי.">
|
||||
<meta property="og:title" content="אמיליו – הדירקטוריון הדיגיטלי לעסק שלך">
|
||||
<meta property="og:description" content="סוכני AI מומחים שעובדים בשבילך – ואתה תמיד בשליטה. קבעו הדגמה חינם.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:locale" content="he_IL">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%230a0f1c' width='100' height='100' rx='20'/><circle cx='50' cy='50' r='30' fill='none' stroke='%2300d4aa' stroke-width='4'/><circle cx='50' cy='50' r='8' fill='%2300d4aa'/></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=Space+Grotesk:wght@500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="nav" role="navigation" aria-label="ניווט ראשי">
|
||||
<div class="nav-container">
|
||||
<a href="#" class="logo" aria-label="אמיליו - דף הבית">
|
||||
<svg class="logo-icon" viewBox="0 0 40 40" aria-hidden="true">
|
||||
<circle cx="20" cy="20" r="18" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<circle cx="20" cy="20" r="6" fill="var(--accent)"/>
|
||||
<path d="M20 2 L20 8 M20 32 L20 38 M2 20 L8 20 M32 20 L38 20" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="logo-text" lang="en">Emilio</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="#solution" class="nav-link">הפתרון</a>
|
||||
<a href="#how-it-works" class="nav-link">איך זה עובד</a>
|
||||
<a href="#integrations" class="nav-link">אינטגרציות</a>
|
||||
<a href="#contact" class="nav-cta">הדגמה חינם</a>
|
||||
</div>
|
||||
<button class="mobile-menu-btn" aria-label="תפריט" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div class="mobile-menu" aria-hidden="true">
|
||||
<a href="#solution" class="mobile-link">הפתרון</a>
|
||||
<a href="#how-it-works" class="mobile-link">איך זה עובד</a>
|
||||
<a href="#integrations" class="mobile-link">אינטגרציות</a>
|
||||
<a href="#contact" class="mobile-link cta">הדגמה חינם</a>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-bg">
|
||||
<div class="hero-gradient"></div>
|
||||
<div class="hero-grid"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-content reveal">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-dot"></span>
|
||||
<span>מבית <span lang="en">Emaillion</span></span>
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
הדירקטוריון הדיגיטלי
|
||||
<span class="hero-title-accent">שעובד בשבילך</span>
|
||||
</h1>
|
||||
<p class="hero-lead">ואתה מחליט מה קורה.</p>
|
||||
<p class="hero-subtitle">
|
||||
צוות סוכני AI מומחים שמנתח נתונים אמיתיים, מציע פעולות חכמות, ומחכה לאישור שלך. כל פעולה רגישה דורשת אור ירוק ממך — אף פעם לא לבד בשקט.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#contact" class="btn btn-primary">
|
||||
<span>קבעו הדגמה חינם</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||||
</a>
|
||||
<a href="#how-it-works" class="btn btn-secondary">
|
||||
<span>איך זה עובד?</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="hero-trust" aria-label="יתרונות מרכזיים">
|
||||
<li class="trust-item">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="var(--accent)"/></svg>
|
||||
אינטגרציות אמיתיות
|
||||
</li>
|
||||
<li class="trust-item">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="var(--accent)"/></svg>
|
||||
נתונים חיים
|
||||
</li>
|
||||
<li class="trust-item">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="var(--accent)"/></svg>
|
||||
שליטה מלאה
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Problem Section -->
|
||||
<section class="problem" id="problem">
|
||||
<div class="container">
|
||||
<div class="problem-content reveal">
|
||||
<span class="section-label">הבעיה</span>
|
||||
<h2 class="section-title">מנהל עסק? כנראה שאתה מכיר את זה.</h2>
|
||||
</div>
|
||||
<div class="problem-grid">
|
||||
<article class="problem-card reveal">
|
||||
<div class="problem-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="20" fill="none" stroke="var(--border)" stroke-width="2" stroke-dasharray="4 4"/>
|
||||
<path d="M16 24H32M24 16V32" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>עשרות כלים, אפס תיאום</h3>
|
||||
<p>CRM במקום אחד, אנליטיקס בשני, חשבוניות בשלישי. מבזבז שעות על העתקה ידנית בין מערכות.</p>
|
||||
</article>
|
||||
<article class="problem-card reveal">
|
||||
<div class="problem-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<rect x="8" y="8" width="32" height="32" rx="4" fill="none" stroke="var(--border)" stroke-width="2"/>
|
||||
<path d="M16 24L22 30L34 18" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>החלטות על בסיס תחושה</h3>
|
||||
<p>אין זמן לדוחות. אין זמן לנתח. אז מנחשים — ומקווים לטוב.</p>
|
||||
</article>
|
||||
<article class="problem-card reveal">
|
||||
<div class="problem-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="20" fill="none" stroke="var(--border)" stroke-width="2"/>
|
||||
<path d="M24 14V26L32 30" stroke="var(--danger)" stroke-width="2.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>כל היום בכיבוי שריפות</h3>
|
||||
<p>הכל דחוף, שום דבר לא באמת מתקדם. האסטרטגיה נדחית שוב למחר.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Solution Section -->
|
||||
<section class="solution" id="solution">
|
||||
<div class="container">
|
||||
<header class="section-header reveal">
|
||||
<span class="section-label">הפתרון</span>
|
||||
<h2 class="section-title">הכירו את הדירקטוריון</h2>
|
||||
<p class="section-subtitle">צוות סוכני AI, כל אחד מומחה בתחומו. אמיליו מתאם ביניהם — ואתה מקבל תמונה שלמה.</p>
|
||||
</header>
|
||||
|
||||
<div class="board-wrapper">
|
||||
<div class="board-leader reveal">
|
||||
<div class="leader-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 80 80">
|
||||
<circle cx="40" cy="40" r="36" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="3"/>
|
||||
<circle cx="40" cy="32" r="12" stroke="var(--accent)" stroke-width="2.5" fill="none"/>
|
||||
<path d="M22 58c0-10 8-16 18-16s18 6 18 16" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" fill="none"/>
|
||||
<circle cx="40" cy="40" r="36" fill="none" stroke="var(--primary)" stroke-width="1" stroke-dasharray="4 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="leader-text">
|
||||
<h3>אמיליו</h3>
|
||||
<p>ראש הצוות. מקבל את הבקשה שלך, מפנה לסוכן הנכון, ומרכז הכל חזרה אליך.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="board-grid">
|
||||
<article class="board-member reveal">
|
||||
<div class="member-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 56 56">
|
||||
<circle cx="28" cy="28" r="24" fill="var(--card-bg)" stroke="var(--primary)" stroke-width="1.5"/>
|
||||
<path d="M20 38V32c0-2.5 2.5-5 6-5h4c3.5 0 6 2.5 6 5v6" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" fill="none"/>
|
||||
<circle cx="28" cy="22" r="6" stroke="var(--accent)" stroke-width="2" fill="none"/>
|
||||
<path d="M38 24l4-4m0 0l-4-4m4 4h-6" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>שיווק</h3>
|
||||
<p>מנתח קמפיינים, מזהה הזדמנויות, ממליץ על תקציבים.</p>
|
||||
</article>
|
||||
|
||||
<article class="board-member reveal">
|
||||
<div class="member-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 56 56">
|
||||
<circle cx="28" cy="28" r="24" fill="var(--card-bg)" stroke="var(--primary)" stroke-width="1.5"/>
|
||||
<path d="M20 36l8-8 8 8M20 28l8-8 8 8" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>מכירות / CRM</h3>
|
||||
<p>עוקב אחר לידים, מתעדף הזדמנויות, מכין תזכורות מעקב.</p>
|
||||
</article>
|
||||
|
||||
<article class="board-member reveal">
|
||||
<div class="member-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 56 56">
|
||||
<circle cx="28" cy="28" r="24" fill="var(--card-bg)" stroke="var(--primary)" stroke-width="1.5"/>
|
||||
<rect x="18" y="22" width="20" height="14" rx="2" stroke="var(--accent)" stroke-width="2" fill="none"/>
|
||||
<path d="M18 27h20" stroke="var(--accent)" stroke-width="1.5"/>
|
||||
<circle cx="23" cy="32" r="1.5" fill="var(--primary)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>כספים ודוחות</h3>
|
||||
<p>מרכז נתונים, מפיק דוחות, מתריע על חריגות בזמן אמת.</p>
|
||||
</article>
|
||||
|
||||
<article class="board-member reveal">
|
||||
<div class="member-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 56 56">
|
||||
<circle cx="28" cy="28" r="24" fill="var(--card-bg)" stroke="var(--primary)" stroke-width="1.5"/>
|
||||
<circle cx="28" cy="26" r="7" stroke="var(--accent)" stroke-width="2" fill="none"/>
|
||||
<path d="M22 26h-4m18 0h4M28 33v5m-3-2h6" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>תפעול</h3>
|
||||
<p>מנהל משימות, מזהה צווארי בקבוק, מייעל תהליכים חוזרים.</p>
|
||||
</article>
|
||||
|
||||
<article class="board-member reveal">
|
||||
<div class="member-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 56 56">
|
||||
<circle cx="28" cy="28" r="24" fill="var(--card-bg)" stroke="var(--primary)" stroke-width="1.5"/>
|
||||
<path d="M22 24s3-3 6-3 6 3 6 3" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="24" cy="29" r="2.5" fill="var(--accent)"/>
|
||||
<circle cx="32" cy="29" r="2.5" fill="var(--accent)"/>
|
||||
<path d="M24 36s2 3 4 3 4-3 4-3" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>תמיכה</h3>
|
||||
<p>טיוטות תשובות לפניות, פותח טיקטים, מעדכן סטטוסים.</p>
|
||||
</article>
|
||||
|
||||
<article class="board-member reveal">
|
||||
<div class="member-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 56 56">
|
||||
<circle cx="28" cy="28" r="24" fill="var(--card-bg)" stroke="var(--primary)" stroke-width="1.5"/>
|
||||
<rect x="16" y="18" width="24" height="20" rx="2" stroke="var(--accent)" stroke-width="2" fill="none"/>
|
||||
<path d="M16 24h24M24 24v14" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<rect x="28" y="28" width="8" height="3" rx="0.5" fill="var(--accent)" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>בניית אתרים</h3>
|
||||
<p><span lang="en">WP AI</span> — יוצר דפי נחיתה, מעדכן תכנים, מציג תצוגה מקדימה.</p>
|
||||
</article>
|
||||
|
||||
<article class="board-member reveal">
|
||||
<div class="member-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 56 56">
|
||||
<circle cx="28" cy="28" r="24" fill="var(--card-bg)" stroke="var(--primary)" stroke-width="1.5"/>
|
||||
<path d="M18 36V26c0-1.5 1.5-3 3-3h14c1.5 0 3 1.5 3 3v10c0 1.5-1.5 3-3 3H21c-1.5 0-3-1.5-3-3z" stroke="var(--accent)" stroke-width="2" fill="none"/>
|
||||
<path d="M18 26l10 7 10-7" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>תקשורת</h3>
|
||||
<p>וואטסאפ, אימייל, SMS — טיוטה מוכנה, אתה מאשר, היא יוצאת.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<section class="how-it-works" id="how-it-works">
|
||||
<div class="container">
|
||||
<header class="section-header reveal">
|
||||
<span class="section-label">התהליך</span>
|
||||
<h2 class="section-title">שלושה צעדים. שליטה מלאה.</h2>
|
||||
</header>
|
||||
|
||||
<ol class="steps">
|
||||
<li class="step reveal">
|
||||
<div class="step-marker">
|
||||
<span class="step-number">1</span>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<h3>אתה שואל או מגדיר יעד</h3>
|
||||
<p>"כמה הוצאתי על קמפיינים החודש?" / "תעדכן תקציב ל-500 ש״ח ליום" / "תשלח תזכורת ללקוחות שלא שילמו"</p>
|
||||
<div class="step-demo" role="img" aria-label="דוגמה לשאלת משתמש">
|
||||
<div class="chat-bubble chat-user">
|
||||
תראה לי את הקמפיינים הכי רווחיים השבוע
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="step reveal">
|
||||
<div class="step-marker">
|
||||
<span class="step-number">2</span>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<h3>הסוכן מנתח ומציע</h3>
|
||||
<p>אמיליו שולף נתונים אמיתיים מהמערכות שלך, מנתח, ומציג המלצה מנומקת עם מקורות.</p>
|
||||
<div class="step-demo" role="img" aria-label="דוגמה לתשובת אמיליו עם ניתוח והמלצה">
|
||||
<div class="chat-bubble chat-ai">
|
||||
<span>נתחתי את הקמפיינים ב-<span lang="en">Google Ads</span>. הקמפיין "לידים חמים" הניב <span lang="en">ROI</span> של 340%. ממליץ להעביר 30% מתקציב "מודעות כלליות" אליו.</span>
|
||||
<div class="chat-sources">
|
||||
<span class="source-tag" lang="en">Google Ads</span>
|
||||
<span class="source-tag" lang="en">SmartPay</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="step reveal">
|
||||
<div class="step-marker">
|
||||
<span class="step-number">3</span>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<h3>אתה מאשר, אמיליו מבצע</h3>
|
||||
<p>לחיצה אחת — והפעולה מתבצעת בפועל: שליחת מייל, עדכון תקציב, פתיחת טיקט, יצירת דף נחיתה.</p>
|
||||
<div class="step-demo" role="img" aria-label="דוגמה לכרטיס אישור פעולה">
|
||||
<div class="approval-card">
|
||||
<div class="approval-header">
|
||||
<svg class="approval-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path d="M8 12l3 3 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||||
<span>ממתין לאישור</span>
|
||||
</div>
|
||||
<p class="approval-action">העברת 150 ש״ח/יום מ"מודעות כלליות" ל"לידים חמים"</p>
|
||||
<div class="approval-buttons">
|
||||
<button type="button" class="approve-btn" aria-live="polite">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 10l4 4 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||||
<span class="approve-btn-text">אשר ובצע</span>
|
||||
</button>
|
||||
<button type="button" class="reject-btn" aria-live="polite">
|
||||
<span class="reject-btn-text">דחה</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Integrations Section -->
|
||||
<section class="integrations" id="integrations">
|
||||
<div class="container">
|
||||
<header class="section-header reveal">
|
||||
<span class="section-label">אינטגרציות</span>
|
||||
<h2 class="section-title">מחובר למערכות שכבר יש לך</h2>
|
||||
<p class="section-subtitle">לא הדגמות — נתונים חיים, סנכרון אמיתי.</p>
|
||||
</header>
|
||||
<ul class="integrations-list reveal" role="list">
|
||||
<li class="integration-item">
|
||||
<span class="integration-name" lang="en">WHMCS / ClientsCenter</span>
|
||||
<span class="integration-type">ניהול לקוחות</span>
|
||||
</li>
|
||||
<li class="integration-item">
|
||||
<span class="integration-name" lang="en">Doali</span>
|
||||
<span class="integration-type">ניהול משימות</span>
|
||||
</li>
|
||||
<li class="integration-item">
|
||||
<span class="integration-name" lang="en">OwnAvatar</span>
|
||||
<span class="integration-type">אוואטרים</span>
|
||||
</li>
|
||||
<li class="integration-item">
|
||||
<span class="integration-name" lang="en">Google Ads</span>
|
||||
<span class="integration-type">פרסום</span>
|
||||
</li>
|
||||
<li class="integration-item">
|
||||
<span class="integration-name" lang="en">SmartPay</span>
|
||||
<span class="integration-type">תשלומים</span>
|
||||
</li>
|
||||
<li class="integration-item">
|
||||
<span class="integration-name" lang="en">Email Lion</span>
|
||||
<span class="integration-type">אימייל מרקטינג</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trust Section -->
|
||||
<section class="trust-section" id="trust">
|
||||
<div class="container">
|
||||
<div class="trust-content reveal">
|
||||
<div class="trust-badge">
|
||||
<svg class="shield-icon" viewBox="0 0 64 80" aria-hidden="true">
|
||||
<path d="M32 4L58 16v24c0 20-16 32-26 36C22 72 6 60 6 40V16L32 4z" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="2.5"/>
|
||||
<path d="M24 42l6 6 12-14" stroke="var(--accent)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="trust-text">
|
||||
<span class="section-label">אמון ובטיחות</span>
|
||||
<h2 class="section-title">שום דבר לא קורה בלי האישור שלך</h2>
|
||||
<ul class="trust-list">
|
||||
<li>
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="var(--accent)"/></svg>
|
||||
<span><em class="trust-emphasis">שליטה מלאה</em> — כל פעולה רגישה דורשת אור ירוק ממך</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="var(--accent)"/></svg>
|
||||
<span><em class="trust-emphasis">יומן ביקורת מלא</em> — מי עשה מה, מתי, ולמה</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="var(--accent)"/></svg>
|
||||
<span><em class="trust-emphasis">מגבלות תקציב</em> — אתה קובע תקרות, אמיליו לא חורג</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" fill="var(--accent)"/></svg>
|
||||
<span><em class="trust-emphasis">שקיפות מלאה</em> — כל המלצה מגיעה עם נימוקים ומקורות</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section" id="contact">
|
||||
<div class="container">
|
||||
<div class="cta-content reveal">
|
||||
<h2 class="cta-title">מוכנים לדירקטוריון AI שעובד בשבילכם?</h2>
|
||||
<p class="cta-subtitle">השאירו פרטים — נחזור לתיאום הדגמה חינם, בלי התחייבות.</p>
|
||||
|
||||
<form class="cta-form" id="contact-form" novalidate>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<input type="text" id="name" name="name" required autocomplete="name" placeholder=" ">
|
||||
<label for="name">שם מלא</label>
|
||||
<span class="form-error" aria-live="polite"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="contact" name="contact" required placeholder=" ">
|
||||
<label for="contact">אימייל או טלפון</label>
|
||||
<span class="form-error" aria-live="polite"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="business" name="business" autocomplete="organization" placeholder=" ">
|
||||
<label for="business">שם העסק</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-full">
|
||||
<span>רוצה דירקטוריון AI לעסק שלי</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||||
</button>
|
||||
<div class="form-success" role="status" aria-live="polite" hidden>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path d="M8 12l3 3 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||||
<span>תודה! נחזור אליך בהקדם.</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="cta-alt">
|
||||
מעדיפים לדבר? <a href="https://wa.me/972544990028" class="whatsapp-link" target="_blank" rel="noopener noreferrer">שלחו הודעה בוואטסאפ</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<a href="#" class="logo" aria-label="אמיליו - דף הבית">
|
||||
<svg class="logo-icon" viewBox="0 0 40 40" aria-hidden="true">
|
||||
<circle cx="20" cy="20" r="18" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<circle cx="20" cy="20" r="6" fill="var(--accent)"/>
|
||||
<path d="M20 2 L20 8 M20 32 L20 38 M2 20 L8 20 M32 20 L38 20" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="logo-text" lang="en">Emilio</span>
|
||||
</a>
|
||||
<p class="footer-tagline" lang="en">For The Love Of Code</p>
|
||||
</div>
|
||||
<div class="footer-family">
|
||||
<span class="family-label">מוצרים נוספים של <span lang="en">Emaillion</span>:</span>
|
||||
<nav class="family-links" aria-label="מוצרי החברה">
|
||||
<a href="https://emaillion.com" target="_blank" rel="noopener" lang="en">Email Lion</a>
|
||||
<a href="https://ownavatar.com" target="_blank" rel="noopener" lang="en">OwnAvatar</a>
|
||||
<a href="https://doali.com" target="_blank" rel="noopener" lang="en">Doali</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© <span id="year">2025</span> <span lang="en">Emaillion Ltd.</span> כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,222 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Navigation scroll effect
|
||||
const nav = document.querySelector('.nav');
|
||||
|
||||
function handleScroll() {
|
||||
if (window.scrollY > 40) {
|
||||
nav.classList.add('scrolled');
|
||||
} else {
|
||||
nav.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
handleScroll();
|
||||
|
||||
// Mobile menu toggle
|
||||
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
||||
const mobileMenu = document.querySelector('.mobile-menu');
|
||||
const mobileLinks = document.querySelectorAll('.mobile-link');
|
||||
|
||||
if (mobileMenuBtn && mobileMenu) {
|
||||
mobileMenuBtn.addEventListener('click', function() {
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
this.setAttribute('aria-expanded', String(!isExpanded));
|
||||
mobileMenu.setAttribute('aria-hidden', String(isExpanded));
|
||||
});
|
||||
|
||||
mobileLinks.forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
mobileMenuBtn.setAttribute('aria-expanded', 'false');
|
||||
mobileMenu.setAttribute('aria-hidden', 'true');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll reveal
|
||||
if (!prefersReducedMotion) {
|
||||
const revealElements = document.querySelectorAll('.reveal');
|
||||
|
||||
const revealObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.15,
|
||||
rootMargin: '0px 0px -40px 0px'
|
||||
});
|
||||
|
||||
revealElements.forEach(function(el) {
|
||||
revealObserver.observe(el);
|
||||
});
|
||||
} else {
|
||||
document.querySelectorAll('.reveal').forEach(function(el) {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
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 navHeight = nav ? nav.offsetHeight : 0;
|
||||
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight - 16;
|
||||
|
||||
if (prefersReducedMotion) {
|
||||
window.scrollTo(0, targetPosition);
|
||||
} else {
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Form handling
|
||||
const form = document.getElementById('contact-form');
|
||||
const formSuccess = document.querySelector('.form-success');
|
||||
|
||||
if (form) {
|
||||
const nameInput = document.getElementById('name');
|
||||
const contactInput = document.getElementById('contact');
|
||||
const nameError = nameInput.parentElement.querySelector('.form-error');
|
||||
const contactError = contactInput.parentElement.querySelector('.form-error');
|
||||
|
||||
function validateField(input, errorEl, message) {
|
||||
if (!input.value.trim()) {
|
||||
input.classList.add('error');
|
||||
errorEl.textContent = message;
|
||||
return false;
|
||||
}
|
||||
input.classList.remove('error');
|
||||
errorEl.textContent = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const nameValid = validateField(nameInput, nameError, 'נא להזין שם');
|
||||
const contactValid = validateField(contactInput, contactError, 'נא להזין אימייל או טלפון');
|
||||
|
||||
if (!nameValid || !contactValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span>שולח...</span>';
|
||||
|
||||
// Simulate submission
|
||||
setTimeout(function() {
|
||||
form.querySelectorAll('.form-group, .form-row, button[type="submit"]').forEach(function(el) {
|
||||
el.style.display = 'none';
|
||||
});
|
||||
|
||||
formSuccess.hidden = false;
|
||||
|
||||
console.log('Form submitted:', {
|
||||
name: nameInput.value.trim(),
|
||||
contact: contactInput.value.trim(),
|
||||
business: document.getElementById('business').value.trim()
|
||||
});
|
||||
}, 800);
|
||||
});
|
||||
|
||||
// Clear errors on input
|
||||
[nameInput, contactInput].forEach(function(input) {
|
||||
input.addEventListener('input', function() {
|
||||
if (this.classList.contains('error')) {
|
||||
this.classList.remove('error');
|
||||
this.parentElement.querySelector('.form-error').textContent = '';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Demo: Approval buttons
|
||||
const approveBtn = document.querySelector('.approve-btn');
|
||||
const rejectBtn = document.querySelector('.reject-btn');
|
||||
const approvalCard = document.querySelector('.approval-card');
|
||||
|
||||
if (approveBtn && approvalCard) {
|
||||
approveBtn.addEventListener('click', function() {
|
||||
const textSpan = this.querySelector('.approve-btn-text');
|
||||
if (textSpan) {
|
||||
textSpan.textContent = 'בוצע!';
|
||||
}
|
||||
this.classList.add('approved');
|
||||
approvalCard.style.borderColor = '#10b981';
|
||||
|
||||
setTimeout(function() {
|
||||
if (textSpan) {
|
||||
textSpan.textContent = 'אשר ובצע';
|
||||
}
|
||||
approveBtn.classList.remove('approved');
|
||||
approvalCard.style.borderColor = '';
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
if (rejectBtn && approvalCard) {
|
||||
rejectBtn.addEventListener('click', function() {
|
||||
const textSpan = this.querySelector('.reject-btn-text');
|
||||
const originalText = textSpan ? textSpan.textContent : 'דחה';
|
||||
|
||||
approvalCard.style.opacity = '0.5';
|
||||
this.classList.add('rejected');
|
||||
if (textSpan) {
|
||||
textSpan.textContent = 'נדחה';
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
approvalCard.style.opacity = '';
|
||||
rejectBtn.classList.remove('rejected');
|
||||
if (textSpan) {
|
||||
textSpan.textContent = originalText;
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard: close mobile menu on Escape
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && mobileMenuBtn && mobileMenu) {
|
||||
mobileMenuBtn.setAttribute('aria-expanded', 'false');
|
||||
mobileMenu.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
// Mouse vs keyboard focus
|
||||
document.addEventListener('mousedown', function() {
|
||||
document.body.classList.add('using-mouse');
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Tab') {
|
||||
document.body.classList.remove('using-mouse');
|
||||
}
|
||||
});
|
||||
|
||||
// Dynamic year
|
||||
const yearSpan = document.getElementById('year');
|
||||
if (yearSpan) {
|
||||
yearSpan.textContent = new Date().getFullYear();
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user