Initial AI-generated site
This commit is contained in:
+495
@@ -0,0 +1,495 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="he" dir="rtl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="theme-color" content="#1a1f4e">
|
||||||
|
<title>Emilio | ה-CEO הדיגיטלי שלך — דירקטוריון AI עם בקרה אנושית מלאה</title>
|
||||||
|
<meta name="description" content="Emilio מ-Emaillion — סוכן Chief of Staff מבוסס AI שמנהל דירקטוריון וירטואלי של 6 סוכני AI מתמחים. אוטומציה חכמה עם אישור אנושי לפני כל פעולה רגישה.">
|
||||||
|
<meta property="og:title" content="Emilio | ה-CEO הדיגיטלי שלך">
|
||||||
|
<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='%231a1f4e' rx='20' width='100' height='100'/><text x='50' y='68' font-size='50' text-anchor='middle' fill='%23f59e0b'>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>
|
||||||
|
<!-- Skip Link -->
|
||||||
|
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container header-inner">
|
||||||
|
<a href="#" class="logo" aria-label="Emilio דף הבית">
|
||||||
|
<svg class="logo-icon" viewBox="0 0 40 40" aria-hidden="true">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#4f46e5"/>
|
||||||
|
<stop offset="100%" style="stop-color:#1a1f4e"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#logoGrad)" rx="8" width="40" height="40"/>
|
||||||
|
<text x="20" y="27" font-size="20" text-anchor="middle" fill="#f59e0b" font-family="Rubik, sans-serif" font-weight="600">E</text>
|
||||||
|
</svg>
|
||||||
|
<span class="logo-text">Emilio</span>
|
||||||
|
</a>
|
||||||
|
<nav class="main-nav" aria-label="ניווט ראשי">
|
||||||
|
<ul class="nav-list">
|
||||||
|
<li><a href="#how-it-works">איך זה עובד</a></li>
|
||||||
|
<li><a href="#benefits">יתרונות</a></li>
|
||||||
|
<li><a href="#agents">הסוכנים</a></li>
|
||||||
|
<li><a href="#trust">אבטחה</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<a href="#cta" class="btn btn-primary btn-sm header-cta">התחילו בחינם</a>
|
||||||
|
<button class="mobile-menu-toggle" aria-label="פתח תפריט" aria-expanded="false" aria-controls="mobile-nav">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<nav class="mobile-nav" id="mobile-nav" aria-label="תפריט נייד" hidden>
|
||||||
|
<ul class="mobile-nav-list">
|
||||||
|
<li><a href="#how-it-works">איך זה עובד</a></li>
|
||||||
|
<li><a href="#benefits">יתרונות</a></li>
|
||||||
|
<li><a href="#agents">הסוכנים</a></li>
|
||||||
|
<li><a href="#trust">אבטחה</a></li>
|
||||||
|
<li><a href="#cta" class="btn btn-primary">התחילו בחינם</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main-content">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-bg"></div>
|
||||||
|
<div class="container hero-content">
|
||||||
|
<div class="hero-text">
|
||||||
|
<h1 class="hero-title reveal">
|
||||||
|
בעלי עסקים בישראל,<br>
|
||||||
|
<span class="highlight">הכירו את ה-CEO הדיגיטלי</span><br>
|
||||||
|
שלא ישן
|
||||||
|
</h1>
|
||||||
|
<p class="hero-subtitle reveal reveal-delay-1">
|
||||||
|
Emilio מתאם דירקטוריון של 6+ סוכני AI מתמחים — שיווק, מכירות, תמיכה, כספים, תפעול ובניית אתרים. הוא מציע פעולות קונקרטיות, אבל <strong>אתם תמיד מאשרים</strong> לפני שמשהו קורה באמת.
|
||||||
|
</p>
|
||||||
|
<div class="hero-ctas reveal reveal-delay-2">
|
||||||
|
<a href="#cta" class="btn btn-primary btn-lg">
|
||||||
|
<span>התחילו ניסיון חינם 14 יום</span>
|
||||||
|
<span class="btn-sub">בלי כרטיס אשראי</span>
|
||||||
|
</a>
|
||||||
|
<a href="#demo" class="btn btn-secondary btn-lg">
|
||||||
|
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<polygon fill="currentColor" points="5,3 19,12 5,21"/>
|
||||||
|
</svg>
|
||||||
|
צפו בדמו קצר
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-visual reveal reveal-delay-3">
|
||||||
|
<div class="dashboard-preview">
|
||||||
|
<div class="dashboard-header">
|
||||||
|
<span class="dashboard-dot"></span>
|
||||||
|
<span class="dashboard-dot"></span>
|
||||||
|
<span class="dashboard-dot"></span>
|
||||||
|
</div>
|
||||||
|
<div class="dashboard-content">
|
||||||
|
<div class="dash-sidebar">
|
||||||
|
<div class="dash-avatar"></div>
|
||||||
|
<div class="dash-nav-item active"></div>
|
||||||
|
<div class="dash-nav-item"></div>
|
||||||
|
<div class="dash-nav-item"></div>
|
||||||
|
<div class="dash-nav-item"></div>
|
||||||
|
</div>
|
||||||
|
<div class="dash-main">
|
||||||
|
<div class="dash-card pending">
|
||||||
|
<div class="dash-card-icon">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" 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>
|
||||||
|
</div>
|
||||||
|
<div class="dash-card-text">
|
||||||
|
<span class="dash-card-title">שיווק</span>
|
||||||
|
<span class="dash-card-desc">מוכן לשליחה — ממתין לאישור</span>
|
||||||
|
</div>
|
||||||
|
<div class="dash-card-action">
|
||||||
|
<span class="approve-btn">אשר</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dash-card done">
|
||||||
|
<div class="dash-card-icon">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="dash-card-text">
|
||||||
|
<span class="dash-card-title">דוח כספי</span>
|
||||||
|
<span class="dash-card-desc">הופק ונשלח — אושר אתמול</span>
|
||||||
|
</div>
|
||||||
|
<div class="dash-card-status">✓</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-scroll-hint" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- How It Works -->
|
||||||
|
<section id="how-it-works" class="how-it-works">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header">
|
||||||
|
<h2 class="section-title reveal">איך זה עובד?</h2>
|
||||||
|
<p class="section-subtitle reveal reveal-delay-1">שלושה צעדים פשוטים מהמטרה שלכם לתוצאה בשטח</p>
|
||||||
|
</header>
|
||||||
|
<div class="steps-grid">
|
||||||
|
<article class="step-card reveal">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<div class="step-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<circle cx="24" cy="24" r="22" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path fill="currentColor" d="M24 14c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10-4.5-10-10-10zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="step-title">תארו מטרה עסקית</h3>
|
||||||
|
<p class="step-desc">ספרו ל-Emilio מה אתם רוצים להשיג — להגדיל מכירות, לשפר שירות, לייעל תפעול, או כל יעד אחר.</p>
|
||||||
|
</article>
|
||||||
|
<div class="step-connector reveal reveal-delay-1" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 40 24"><path d="M0 12h35M30 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
|
||||||
|
</div>
|
||||||
|
<article class="step-card reveal reveal-delay-1">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<div class="step-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="4" y="8" width="40" height="32" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="16" cy="20" r="4" fill="currentColor"/>
|
||||||
|
<circle cx="32" cy="20" r="4" fill="currentColor"/>
|
||||||
|
<path d="M16 32h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="step-title">Emilio מכין הצעה</h3>
|
||||||
|
<p class="step-desc">הסוכן הרלוונטי נכנס לפעולה, מנתח את המצב ומכין הצעת פעולה קונקרטית — טיוטת מייל, הצעת תקציב, דוח או משימה.</p>
|
||||||
|
</article>
|
||||||
|
<div class="step-connector reveal reveal-delay-2" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 40 24"><path d="M0 12h35M30 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
|
||||||
|
</div>
|
||||||
|
<article class="step-card reveal reveal-delay-2">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<div class="step-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path fill="currentColor" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 30l-10-10 2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="step-title">אתם מאשרים — רק אז זה קורה</h3>
|
||||||
|
<p class="step-desc">שום דבר לא יוצא לעולם בלי הלחיצה שלכם. שליטה מלאה, אפס הפתעות.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Benefits -->
|
||||||
|
<section id="benefits" class="benefits">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header">
|
||||||
|
<h2 class="section-title reveal">למה בעלי עסקים בוחרים ב-Emilio</h2>
|
||||||
|
</header>
|
||||||
|
<div class="benefits-grid">
|
||||||
|
<article class="benefit-card benefit-featured reveal">
|
||||||
|
<div class="benefit-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path fill="none" stroke="currentColor" stroke-width="2" d="M24 4v8m0 24v8M4 24h8m24 0h8"/>
|
||||||
|
<circle cx="24" cy="24" r="8" fill="currentColor"/>
|
||||||
|
<path fill="none" stroke="currentColor" stroke-width="2" d="M10.1 10.1l5.66 5.66m16.48 16.48l5.66 5.66M10.1 37.9l5.66-5.66m16.48-16.48l5.66-5.66"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="benefit-content">
|
||||||
|
<h3 class="benefit-title">אוטומציה עם בקרה אנושית מלאה</h3>
|
||||||
|
<p class="benefit-desc">AI עובד בשבילכם, אבל אתם תמיד בשליטה. כל פעולה רגישה עוברת אישור מפורש לפני ביצוע.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="benefit-card reveal reveal-delay-1">
|
||||||
|
<div class="benefit-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<circle cx="24" cy="24" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path fill="currentColor" d="M24 12v14l10 6-2 3.5-12-7.5V12h4z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="benefit-title">חיסכון של עשרות שעות בחודש</h3>
|
||||||
|
<p class="benefit-desc">משימות שלקחו ימים נעשות בדקות. פנו את הזמן שלכם לעבודה שבאמת דורשת אתכם.</p>
|
||||||
|
</article>
|
||||||
|
<article class="benefit-card reveal reveal-delay-2">
|
||||||
|
<div class="benefit-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="6" y="10" width="14" height="14" rx="2" fill="currentColor"/>
|
||||||
|
<rect x="28" y="10" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<rect x="6" y="26" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<rect x="28" y="26" width="14" height="14" rx="2" fill="currentColor"/>
|
||||||
|
<path d="M20 17h8M24 20v8M20 31h8" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="benefit-title">שילוב מובנה עם המערכות שלכם</h3>
|
||||||
|
<p class="benefit-desc">מחובר מראש ל-Email Lion, OwnAvatar, Doali ו-WHMCS/ClientsCenter — בלי הגדרות מסובכות.</p>
|
||||||
|
</article>
|
||||||
|
<article class="benefit-card reveal">
|
||||||
|
<div class="benefit-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path fill="none" stroke="currentColor" stroke-width="2" d="M8 36l8-10 6 6 10-14 8 10"/>
|
||||||
|
<circle cx="8" cy="36" r="3" fill="currentColor"/>
|
||||||
|
<circle cx="16" cy="26" r="3" fill="currentColor"/>
|
||||||
|
<circle cx="22" cy="32" r="3" fill="currentColor"/>
|
||||||
|
<circle cx="32" cy="18" r="3" fill="currentColor"/>
|
||||||
|
<circle cx="40" cy="28" r="3" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="benefit-title">מעקב KPI והכנסות בזמן אמת</h3>
|
||||||
|
<p class="benefit-desc">דאשבורד חי שמציג את המדדים החשובים — תמיד יודעים איפה העסק עומד.</p>
|
||||||
|
</article>
|
||||||
|
<article class="benefit-card reveal reveal-delay-1">
|
||||||
|
<div class="benefit-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="4" y="8" width="40" height="32" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<rect x="10" y="14" width="12" height="8" rx="2" fill="currentColor"/>
|
||||||
|
<rect x="26" y="14" width="12" height="8" rx="2" fill="currentColor" opacity="0.5"/>
|
||||||
|
<rect x="10" y="26" width="28" height="4" rx="1" fill="currentColor" opacity="0.3"/>
|
||||||
|
<rect x="10" y="32" width="20" height="4" rx="1" fill="currentColor" opacity="0.3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="benefit-title">לוח בקרה מרכזי אחד</h3>
|
||||||
|
<p class="benefit-desc">במקום עשרות כלים נפרדים — מסך אחד שמרכז את כל הפעילות העסקית והסוכנים.</p>
|
||||||
|
</article>
|
||||||
|
<article class="benefit-card reveal reveal-delay-2">
|
||||||
|
<div class="benefit-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path fill="currentColor" d="M24 6L6 14v12c0 11 7.7 21.3 18 24 10.3-2.7 18-13 18-24V14L24 6zm0 17.9h12c-1 7.3-5.6 13.8-12 16.4V24H12v-8.1l12-5.3v13.3z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="benefit-title">אבטחה והצפנה ברמה גבוהה</h3>
|
||||||
|
<p class="benefit-desc">כל המידע שלכם מוגן בהצפנה מתקדמת. פרטיות ואבטחת מידע הן בראש סדר העדיפויות.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Agents Directory -->
|
||||||
|
<section id="agents" class="agents">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header">
|
||||||
|
<h2 class="section-title reveal">הדירקטוריון הדיגיטלי שלכם</h2>
|
||||||
|
<p class="section-subtitle reveal reveal-delay-1">שישה סוכני AI מתמחים שעובדים יחד תחת פיקוח Emilio</p>
|
||||||
|
</header>
|
||||||
|
<div class="agents-grid">
|
||||||
|
<article class="agent-card agent-marketing reveal">
|
||||||
|
<div class="agent-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path fill="currentColor" d="M8 40V20l16-12 16 12v20H28v-12h-8v12H8z"/>
|
||||||
|
<circle cx="36" cy="12" r="8" fill="currentColor" opacity="0.6"/>
|
||||||
|
<path d="M34 12h4M36 10v4" stroke="#fff" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="agent-title">שיווק</h3>
|
||||||
|
<p class="agent-desc">מנהל קמפיינים, כותב תוכן שיווקי, מנתח ביצועים ומציע אופטימיזציות — עם אישורכם לפני כל פרסום.</p>
|
||||||
|
</article>
|
||||||
|
<article class="agent-card agent-sales reveal reveal-delay-1">
|
||||||
|
<div class="agent-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<circle cx="24" cy="14" r="8" fill="currentColor"/>
|
||||||
|
<path fill="currentColor" d="M12 38c0-6.63 5.37-12 12-12s12 5.37 12 12"/>
|
||||||
|
<circle cx="36" cy="30" r="6" fill="currentColor" opacity="0.6"/>
|
||||||
|
<path d="M35 30h2M36 29v2" stroke="#fff" stroke-width="1.5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="agent-title">מכירות ו-CRM</h3>
|
||||||
|
<p class="agent-desc">עוקב אחרי לידים, מתזמן פולו-אפים, מעדכן CRM ומציע פעולות מכירה — אתם מאשרים כל פנייה ללקוח.</p>
|
||||||
|
</article>
|
||||||
|
<article class="agent-card agent-support reveal reveal-delay-2">
|
||||||
|
<div class="agent-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path fill="currentColor" d="M24 4C12.95 4 4 12.95 4 24c0 3.86 1.1 7.46 3 10.5V42l7.5-3c2.95 1.27 6.2 2 9.5 2 11.05 0 20-8.95 20-20S35.05 4 24 4z"/>
|
||||||
|
<circle cx="16" cy="24" r="3" fill="#fff"/>
|
||||||
|
<circle cx="24" cy="24" r="3" fill="#fff"/>
|
||||||
|
<circle cx="32" cy="24" r="3" fill="#fff"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="agent-title">תמיכה</h3>
|
||||||
|
<p class="agent-desc">מטפל בפניות לקוחות, כותב תגובות, מסלים בעיות מורכבות — ומחכה לאישורכם לפני שליחת תשובה.</p>
|
||||||
|
</article>
|
||||||
|
<article class="agent-card agent-finance reveal">
|
||||||
|
<div class="agent-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="6" y="10" width="36" height="28" rx="4" fill="currentColor"/>
|
||||||
|
<path d="M6 18h36" stroke="#fff" stroke-width="2"/>
|
||||||
|
<rect x="12" y="26" width="24" height="6" rx="1" fill="#fff" opacity="0.4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="agent-title">כספים ודוחות</h3>
|
||||||
|
<p class="agent-desc">מפיק דוחות כספיים, עוקב אחרי הוצאות והכנסות, מזהה חריגות — שינויי תקציב רק באישורכם.</p>
|
||||||
|
</article>
|
||||||
|
<article class="agent-card agent-operations reveal reveal-delay-1">
|
||||||
|
<div class="agent-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<circle cx="24" cy="24" r="18" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="24" cy="24" r="6" fill="currentColor"/>
|
||||||
|
<path d="M24 6v6M24 36v6M6 24h6M36 24h6" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="agent-title">תפעול</h3>
|
||||||
|
<p class="agent-desc">מנהל משימות, מתאם בין צוותים, מזהה צווארי בקבוק ומציע פתרונות — הכל בשקיפות מלאה.</p>
|
||||||
|
</article>
|
||||||
|
<article class="agent-card agent-web reveal reveal-delay-2">
|
||||||
|
<div class="agent-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="4" y="8" width="40" height="28" rx="2" fill="currentColor"/>
|
||||||
|
<rect x="16" y="36" width="16" height="4" fill="currentColor"/>
|
||||||
|
<rect x="12" y="40" width="24" height="2" rx="1" fill="currentColor"/>
|
||||||
|
<path d="M12 14h24M12 20h16" stroke="#fff" stroke-width="2" opacity="0.6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="agent-title">בניית אתרים</h3>
|
||||||
|
<p class="agent-desc">יוצר ומעדכן דפים, מוסיף תוכן, מבצע שינויים — כל פרסום חיצוני עובר אישורכם לפני עלייה לאוויר.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Trust & Security -->
|
||||||
|
<section id="trust" class="trust">
|
||||||
|
<div class="container">
|
||||||
|
<div class="trust-content">
|
||||||
|
<div class="trust-visual reveal">
|
||||||
|
<div class="shield-graphic">
|
||||||
|
<svg viewBox="0 0 120 140" aria-hidden="true">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" style="stop-color:#4f46e5"/>
|
||||||
|
<stop offset="100%" style="stop-color:#1a1f4e"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path d="M60 10L10 35v35c0 33.33 21.67 63.33 50 75 28.33-11.67 50-41.67 50-75V35L60 10z" fill="url(#shieldGrad)"/>
|
||||||
|
<path d="M50 70l15 15 25-30" fill="none" stroke="#f59e0b" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
<div class="shield-pulse"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="trust-text reveal reveal-delay-1">
|
||||||
|
<h2 class="section-title">אין קופסה שחורה — רק שקיפות מלאה</h2>
|
||||||
|
<p class="trust-desc">
|
||||||
|
אנחנו מבינים שלהפקיד החלטות עסקיות ב-AI זה צעד גדול. לכן בנינו את Emilio עם עקרון אחד ברור: <strong>אין פעולה רגישה בלי אישור אנושי מפורש.</strong>
|
||||||
|
</p>
|
||||||
|
<ul class="trust-list">
|
||||||
|
<li>
|
||||||
|
<svg class="trust-check" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||||||
|
<span>שליחת מיילים, SMS או הודעות וואטסאפ — רק אחרי שאישרתם</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg class="trust-check" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||||||
|
<span>שינויי תקציב פרסום — רק אחרי שאישרתם</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg class="trust-check" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||||||
|
<span>מחיקת מידע או קבצים — רק אחרי שאישרתם</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg class="trust-check" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
||||||
|
<span>פרסום חיצוני של תוכן — רק אחרי שאישרתם</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="trust-bottom">ה-AI עובד, אתם מחליטים. פשוט.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Final CTA -->
|
||||||
|
<section id="cta" class="final-cta">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-wrapper reveal">
|
||||||
|
<div class="cta-text">
|
||||||
|
<h2 class="cta-title">מוכנים לפגוש את ה-CEO הדיגיטלי שלכם?</h2>
|
||||||
|
<p class="cta-subtitle">התחילו ניסיון חינם של 14 יום — ללא כרטיס אשראי, ללא התחייבות.</p>
|
||||||
|
</div>
|
||||||
|
<form class="cta-form" id="leadForm" novalidate>
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="form-group" id="fullNameGroup">
|
||||||
|
<label for="fullName">שם מלא</label>
|
||||||
|
<input type="text" id="fullName" name="fullName" required autocomplete="name" aria-describedby="fullNameError">
|
||||||
|
<span class="form-error" id="fullNameError">נא להזין שם מלא</span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group" id="emailGroup">
|
||||||
|
<label for="email">אימייל</label>
|
||||||
|
<input type="email" id="email" name="email" required autocomplete="email" aria-describedby="emailError">
|
||||||
|
<span class="form-error" id="emailError">נא להזין כתובת אימייל תקינה</span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group" id="phoneGroup">
|
||||||
|
<label for="phone">טלפון</label>
|
||||||
|
<input type="tel" id="phone" name="phone" required autocomplete="tel" aria-describedby="phoneError">
|
||||||
|
<span class="form-error" id="phoneError">נא להזין מספר טלפון תקין</span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group" id="businessNameGroup">
|
||||||
|
<label for="businessName">שם העסק</label>
|
||||||
|
<input type="text" id="businessName" name="businessName" required autocomplete="organization" aria-describedby="businessNameError">
|
||||||
|
<span class="form-error" id="businessNameError">נא להזין שם העסק</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg btn-submit" aria-label="התחילו ניסיון חינם 14 יום — שליחת טופס">
|
||||||
|
<span class="btn-text">התחילו ניסיון חינם 14 יום</span>
|
||||||
|
<svg class="btn-arrow" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M14.59 16.59L19.17 12l-4.58-4.59L16 6l6 6-6 6-1.41-1.41z"/><path fill="currentColor" d="M2 11h14v2H2z"/></svg>
|
||||||
|
</button>
|
||||||
|
<p class="form-note">לא נשתף את הפרטים שלכם עם אף גורם חיצוני.</p>
|
||||||
|
</form>
|
||||||
|
<div class="form-success" id="formSuccess" role="status" aria-live="polite" hidden tabindex="-1">
|
||||||
|
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||||
|
<circle cx="40" cy="40" r="36" fill="none" stroke="#10b981" stroke-width="4"/>
|
||||||
|
<path d="M25 40l10 10 20-25" fill="none" stroke="#10b981" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
<h3>תודה! קיבלנו את הפרטים</h3>
|
||||||
|
<p>נחזור אליכם בהקדם עם גישה למערכת.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-main">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a href="#" class="footer-logo" aria-label="Emaillion">
|
||||||
|
<svg class="footer-logo-icon" viewBox="0 0 140 40" aria-hidden="true">
|
||||||
|
<rect fill="#1a1f4e" rx="8" width="40" height="40"/>
|
||||||
|
<text x="20" y="27" font-size="20" text-anchor="middle" fill="#f59e0b" font-family="Rubik, sans-serif" font-weight="600">E</text>
|
||||||
|
<text x="90" y="28" font-size="22" text-anchor="middle" fill="#1a1f4e" font-family="Rubik, sans-serif" font-weight="600">Emaillion</text>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">אוטומציה חכמה עם בקרה אנושית מלאה</p>
|
||||||
|
</div>
|
||||||
|
<nav class="footer-nav" aria-label="מוצרים קשורים">
|
||||||
|
<h4 class="footer-nav-title">מוצרים נוספים</h4>
|
||||||
|
<ul class="footer-nav-list">
|
||||||
|
<li><a href="https://emaillion.com/email-lion" target="_blank" rel="noopener">Email Lion</a></li>
|
||||||
|
<li><a href="https://ownavatar.com" target="_blank" rel="noopener">OwnAvatar</a></li>
|
||||||
|
<li><a href="https://doali.com" target="_blank" rel="noopener">Doali</a></li>
|
||||||
|
<li><a href="https://clientscenter.io" target="_blank" rel="noopener">ClientsCenter</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-contact">
|
||||||
|
<h4 class="footer-nav-title">יצירת קשר</h4>
|
||||||
|
<ul class="footer-contact-list">
|
||||||
|
<li>
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" 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:hello@emaillion.com">hello@emaillion.com</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p class="copyright">© 2025 Emaillion. כל הזכויות שמורות.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,238 @@
|
|||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// ===== Mobile Menu Toggle =====
|
||||||
|
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
||||||
|
const mobileNav = document.querySelector('.mobile-nav');
|
||||||
|
|
||||||
|
if (mobileMenuToggle && mobileNav) {
|
||||||
|
mobileMenuToggle.addEventListener('click', function() {
|
||||||
|
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||||
|
this.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
mobileNav.hidden = isExpanded;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close mobile menu when clicking a link
|
||||||
|
mobileNav.querySelectorAll('a').forEach(link => {
|
||||||
|
link.addEventListener('click', function() {
|
||||||
|
mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
mobileNav.hidden = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close mobile menu on Escape key
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Escape' && !mobileNav.hidden) {
|
||||||
|
mobileMenuToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
mobileNav.hidden = true;
|
||||||
|
mobileMenuToggle.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== Reduced Motion Check =====
|
||||||
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||||
|
|
||||||
|
// ===== Scroll Reveal Animation =====
|
||||||
|
const revealElements = document.querySelectorAll('.reveal');
|
||||||
|
|
||||||
|
if ('IntersectionObserver' in window && !prefersReducedMotion.matches) {
|
||||||
|
const revealObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('visible');
|
||||||
|
revealObserver.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
});
|
||||||
|
|
||||||
|
revealElements.forEach(el => revealObserver.observe(el));
|
||||||
|
} else {
|
||||||
|
// Fallback for older browsers or reduced motion preference
|
||||||
|
revealElements.forEach(el => el.classList.add('visible'));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== Smooth Scroll for Navigation =====
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function(e) {
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
if (targetId === '#') return;
|
||||||
|
|
||||||
|
const targetElement = document.querySelector(targetId);
|
||||||
|
if (targetElement) {
|
||||||
|
e.preventDefault();
|
||||||
|
const headerHeight = document.querySelector('.site-header').offsetHeight;
|
||||||
|
const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetPosition,
|
||||||
|
behavior: prefersReducedMotion.matches ? 'auto' : 'smooth'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set focus to target for accessibility
|
||||||
|
targetElement.setAttribute('tabindex', '-1');
|
||||||
|
targetElement.focus({ preventScroll: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== Form Handling =====
|
||||||
|
const leadForm = document.getElementById('leadForm');
|
||||||
|
const formSuccess = document.getElementById('formSuccess');
|
||||||
|
|
||||||
|
if (leadForm && formSuccess) {
|
||||||
|
leadForm.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Basic validation
|
||||||
|
const inputs = this.querySelectorAll('input[required]');
|
||||||
|
let isValid = true;
|
||||||
|
|
||||||
|
inputs.forEach(input => {
|
||||||
|
input.classList.remove('error');
|
||||||
|
if (!input.value.trim()) {
|
||||||
|
isValid = false;
|
||||||
|
input.classList.add('error');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Email validation
|
||||||
|
const emailInput = document.getElementById('email');
|
||||||
|
if (emailInput && emailInput.value) {
|
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||||
|
if (!emailRegex.test(emailInput.value)) {
|
||||||
|
isValid = false;
|
||||||
|
emailInput.classList.add('error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Phone validation (basic Israeli format)
|
||||||
|
const phoneInput = document.getElementById('phone');
|
||||||
|
if (phoneInput && phoneInput.value) {
|
||||||
|
const phoneRegex = /^[\d\-\+\s\(\)]{9,}$/;
|
||||||
|
if (!phoneRegex.test(phoneInput.value)) {
|
||||||
|
isValid = false;
|
||||||
|
phoneInput.classList.add('error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isValid) {
|
||||||
|
// Simulate form submission
|
||||||
|
const submitBtn = this.querySelector('.btn-submit');
|
||||||
|
const originalText = submitBtn.innerHTML;
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
submitBtn.innerHTML = '<span>שולח...</span>';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
leadForm.hidden = true;
|
||||||
|
formSuccess.hidden = false;
|
||||||
|
// Announce to screen readers
|
||||||
|
formSuccess.focus();
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
// Focus first error field
|
||||||
|
const firstError = this.querySelector('.error');
|
||||||
|
if (firstError) {
|
||||||
|
firstError.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear error styling on input
|
||||||
|
leadForm.querySelectorAll('input').forEach(input => {
|
||||||
|
input.addEventListener('input', function() {
|
||||||
|
this.classList.remove('error');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== Header Background on Scroll =====
|
||||||
|
const header = document.querySelector('.site-header');
|
||||||
|
let lastScroll = 0;
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
function updateHeader() {
|
||||||
|
const currentScroll = window.pageYOffset;
|
||||||
|
|
||||||
|
if (currentScroll > 50) {
|
||||||
|
header.style.boxShadow = 'var(--shadow)';
|
||||||
|
} else {
|
||||||
|
header.style.boxShadow = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScroll = currentScroll;
|
||||||
|
ticking = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', function() {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(updateHeader);
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
// ===== Dashboard Card Animation =====
|
||||||
|
if (!prefersReducedMotion.matches) {
|
||||||
|
const pendingCard = document.querySelector('.dash-card.pending');
|
||||||
|
|
||||||
|
if (pendingCard) {
|
||||||
|
let pulseInterval;
|
||||||
|
|
||||||
|
const startPulse = () => {
|
||||||
|
pendingCard.style.transition = 'box-shadow 0.5s ease';
|
||||||
|
let isPulsing = true;
|
||||||
|
|
||||||
|
pulseInterval = setInterval(() => {
|
||||||
|
if (isPulsing) {
|
||||||
|
pendingCard.style.boxShadow = '0 0 0 3px rgba(217, 119, 6, 0.3)';
|
||||||
|
} else {
|
||||||
|
pendingCard.style.boxShadow = 'none';
|
||||||
|
}
|
||||||
|
isPulsing = !isPulsing;
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Start pulse animation when hero is visible
|
||||||
|
const heroObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
startPulse();
|
||||||
|
} else {
|
||||||
|
clearInterval(pulseInterval);
|
||||||
|
if (pendingCard) {
|
||||||
|
pendingCard.style.boxShadow = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const heroSection = document.querySelector('.hero');
|
||||||
|
if (heroSection) {
|
||||||
|
heroObserver.observe(heroSection);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ===== Shield Pulse Animation — only when visible =====
|
||||||
|
if (!prefersReducedMotion.matches) {
|
||||||
|
const trustVisual = document.querySelector('.trust-visual');
|
||||||
|
|
||||||
|
if (trustVisual) {
|
||||||
|
const trustObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('visible');
|
||||||
|
} else {
|
||||||
|
entry.target.classList.remove('visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.5 });
|
||||||
|
|
||||||
|
trustObserver.observe(trustVisual);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
Reference in New Issue
Block a user