Initial AI-generated site
This commit is contained in:
+453
@@ -0,0 +1,453 @@
|
|||||||
|
<!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 Group | תשתיות AI ותקשורת לעסקים</title>
|
||||||
|
<meta name="description" content="קבוצת Emaillion — ספקית תשתיות AI, מייל ארגוני, תקשורת רב-ערוצית ו-SEO לעסקים בישראל. פתרונות all-in-one לצמיחה דיגיטלית.">
|
||||||
|
<meta property="og:title" content="Emaillion Group | תשתיות AI ותקשורת לעסקים">
|
||||||
|
<meta property="og:description" content="פתרונות AI, מייל ארגוני, תקשורת רב-ערוצית ו-SEO — הכל במקום אחד.">
|
||||||
|
<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='%230a0a0f' width='100' height='100' rx='20'/><text x='50' y='68' font-size='50' text-anchor='middle' fill='%23d4af37'>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=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<nav class="nav-container">
|
||||||
|
<a href="#" class="logo">
|
||||||
|
<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%" stop-color="var(--gold)"/>
|
||||||
|
<stop offset="100%" stop-color="var(--gold-light)"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#logoGrad)" width="40" height="40" rx="8"/>
|
||||||
|
<text x="20" y="28" font-size="22" text-anchor="middle" fill="var(--bg-primary)" font-weight="600">E</text>
|
||||||
|
</svg>
|
||||||
|
<span class="logo-text" lang="en">Emaillion</span>
|
||||||
|
</a>
|
||||||
|
<button class="nav-toggle" aria-label="פתח תפריט" aria-expanded="false" aria-controls="main-nav">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
<ul class="nav-links" id="main-nav">
|
||||||
|
<li><a href="#products">מוצרים</a></li>
|
||||||
|
<li><a href="#why">למה אנחנו</a></li>
|
||||||
|
<li><a href="#how">איך זה עובד</a></li>
|
||||||
|
<li><a href="#contact" class="nav-cta">צרו קשר</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main-content">
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-bg">
|
||||||
|
<div class="hero-grid"></div>
|
||||||
|
<div class="hero-glow"></div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1 class="reveal">
|
||||||
|
<span class="hero-label">קבוצת <span lang="en">Emaillion</span></span>
|
||||||
|
תשתיות AI ותקשורת לעסקים מובילים
|
||||||
|
</h1>
|
||||||
|
<p class="hero-sub reveal">
|
||||||
|
פתרון <span lang="en">all-in-one</span>: מייל ארגוני, יצירת תוכן <span lang="en">AI</span>, תקשורת רב-ערוצית ו-<span lang="en">SEO</span> חכם — הכל תחת קורת גג אחת, עם ליווי ישראלי צמוד.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions reveal">
|
||||||
|
<a href="#contact" class="btn btn-primary">קבעו פגישת היכרות</a>
|
||||||
|
<a href="#products" class="btn btn-secondary">גלו את המוצרים</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-visual reveal" aria-hidden="true">
|
||||||
|
<svg class="hero-shape" viewBox="0 0 400 400">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="shapeGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.4"/>
|
||||||
|
<stop offset="100%" stop-color="var(--gold)" stop-opacity="0.2"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="shapeGrad2" x1="100%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="var(--gold)" stop-opacity="0.6"/>
|
||||||
|
<stop offset="100%" stop-color="var(--accent)" stop-opacity="0.1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="200" cy="200" r="150" fill="none" stroke="url(#shapeGrad1)" stroke-width="1" class="rotate-slow"/>
|
||||||
|
<circle cx="200" cy="200" r="120" fill="none" stroke="url(#shapeGrad2)" stroke-width="1" class="rotate-reverse"/>
|
||||||
|
<circle cx="200" cy="200" r="80" fill="none" stroke="var(--gold)" stroke-width="0.5" stroke-dasharray="4 8" class="rotate-slow"/>
|
||||||
|
<circle cx="200" cy="80" r="6" fill="var(--gold)" class="pulse"/>
|
||||||
|
<circle cx="320" cy="200" r="4" fill="var(--accent)" class="pulse" style="animation-delay: 0.5s"/>
|
||||||
|
<circle cx="200" cy="320" r="5" fill="var(--gold-light)" class="pulse" style="animation-delay: 1s"/>
|
||||||
|
<circle cx="80" cy="200" r="4" fill="var(--accent)" class="pulse" style="animation-delay: 1.5s"/>
|
||||||
|
<line x1="200" y1="80" x2="320" y2="200" stroke="var(--gold)" stroke-width="0.5" stroke-opacity="0.3"/>
|
||||||
|
<line x1="320" y1="200" x2="200" y2="320" stroke="var(--gold)" stroke-width="0.5" stroke-opacity="0.3"/>
|
||||||
|
<line x1="200" y1="320" x2="80" y2="200" stroke="var(--gold)" stroke-width="0.5" stroke-opacity="0.3"/>
|
||||||
|
<line x1="80" y1="200" x2="200" y2="80" stroke="var(--gold)" stroke-width="0.5" stroke-opacity="0.3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="products" class="products">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header reveal">
|
||||||
|
<span class="section-label">המוצרים שלנו</span>
|
||||||
|
<h2>מותגי הקבוצה</h2>
|
||||||
|
<p>חמישה פתרונות משלימים — אקוסיסטם שלם לניהול ותקשורת עסקית</p>
|
||||||
|
</header>
|
||||||
|
<div class="products-grid">
|
||||||
|
<article class="product-card product-card--large reveal">
|
||||||
|
<div class="product-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="4" y="10" width="40" height="28" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M4 14l20 14 20-14" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 lang="en">Email Lion</h3>
|
||||||
|
<p>מערכת <span lang="en">webmail</span> וניהול תיבות דוא"ל ארגוני — ממשק חכם, אבטחה מתקדמת, תמיכה בדומיינים מרובים.</p>
|
||||||
|
<a href="#" class="product-link">למידע נוסף<span class="link-arrow" aria-hidden="true"></span></a>
|
||||||
|
</article>
|
||||||
|
<article class="product-card reveal">
|
||||||
|
<div class="product-icon accent">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<circle cx="24" cy="18" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M12 42c0-8 5-12 12-12s12 4 12 12" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M36 22l4 4-4 4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 lang="en">OwnAvatar</h3>
|
||||||
|
<p>יצירת תוכן, תמונות ווידאו באמצעות <span lang="en">AI</span> — הפקה מהירה של חומרים שיווקיים ברמה מקצועית.</p>
|
||||||
|
<a href="#" class="product-link">למידע נוסף<span class="link-arrow" aria-hidden="true"></span></a>
|
||||||
|
</article>
|
||||||
|
<article class="product-card product-card--large reveal">
|
||||||
|
<div class="product-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="6" y="6" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<rect x="28" y="6" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<rect x="6" y="28" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<rect x="28" y="28" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="24" cy="24" r="4" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 lang="en">Doali</h3>
|
||||||
|
<p>פלטפורמת תקשורת רב-ערוצית: <span lang="en">WhatsApp</span>, <span lang="en">SMS</span>, שיחות <span lang="en">AI</span>, סקרים, חנות דיגיטלית ודפי נחיתה.</p>
|
||||||
|
<a href="#" class="product-link">למידע נוסף<span class="link-arrow" aria-hidden="true"></span></a>
|
||||||
|
</article>
|
||||||
|
<article class="product-card reveal">
|
||||||
|
<div class="product-icon accent">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path d="M24 4l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 lang="en">SeoPush</h3>
|
||||||
|
<p>כלי <span lang="en">AI</span> לכתיבת תוכן ואופטימיזציית <span lang="en">SEO</span> — דירוג גבוה יותר בגוגל, תנועה אורגנית איכותית.</p>
|
||||||
|
<a href="#" class="product-link">למידע נוסף<span class="link-arrow" aria-hidden="true"></span></a>
|
||||||
|
</article>
|
||||||
|
<article class="product-card reveal">
|
||||||
|
<div class="product-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="8" y="8" width="32" height="32" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M16 20h16M16 28h10" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="34" cy="34" r="8" fill="var(--bg-secondary)" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M32 34h4M34 32v4" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 lang="en">Emilio</h3>
|
||||||
|
<p>דירקטוריון <span lang="en">AI</span> לניהול עסקי — תמונת מצב מלאה, החלטות מבוססות דאטה, אוטומציה חכמה.</p>
|
||||||
|
<a href="#" class="product-link">למידע נוסף<span class="link-arrow" aria-hidden="true"></span></a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="why" class="why">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header reveal">
|
||||||
|
<span class="section-label">למה לבחור בנו</span>
|
||||||
|
<h2>היתרון שלנו</h2>
|
||||||
|
</header>
|
||||||
|
<div class="why-grid">
|
||||||
|
<div class="why-card why-card--primary reveal">
|
||||||
|
<div class="why-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path d="M24 4L4 14v20l20 10 20-10V14L24 4z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M4 14l20 10 20-10M24 24v20" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>טכנולוגיה ישראלית</h3>
|
||||||
|
<p>פיתוח מקומי, הבנה מעמיקה של השוק הישראלי, ועברית מושלמת בכל ממשק.</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card reveal">
|
||||||
|
<div class="why-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="8" y="20" width="32" height="24" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M16 20v-6a8 8 0 0116 0v6" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="24" cy="32" r="3" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>אבטחת מידע קפדנית</h3>
|
||||||
|
<p>שרתים מאובטחים, הצפנה מקצה לקצה, ועמידה בתקני אבטחה מחמירים.</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card reveal">
|
||||||
|
<div class="why-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<circle cx="24" cy="24" r="18" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M24 12v12l8 4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>תמיכה אנושית 24/6</h3>
|
||||||
|
<p>צוות מומחים זמין כמעט תמיד — מענה מהיר בעברית, אנשי מקצוע אמיתיים.</p>
|
||||||
|
</div>
|
||||||
|
<div class="why-card why-card--primary reveal">
|
||||||
|
<div class="why-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<circle cx="24" cy="24" r="6" fill="currentColor"/>
|
||||||
|
<circle cx="10" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="38" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="10" cy="36" r="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="38" cy="36" r="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M14 14l7 7M34 14l-7 7M14 34l7-7M34 34l-7-7" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>אינטגרציות מלאות</h3>
|
||||||
|
<p>כל המוצרים מתחברים אחד לשני וליישומים חיצוניים — <span lang="en">Zapier</span>, <span lang="en">CRM</span>, ועוד.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="trust">
|
||||||
|
<div class="container">
|
||||||
|
<div class="trust-content reveal">
|
||||||
|
<div class="trust-stats">
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-number" lang="en">[X]+</span>
|
||||||
|
<span class="stat-label">עסקים פעילים</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-number" lang="en">99.9%</span>
|
||||||
|
<span class="stat-label">זמינות שרתים</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-number" lang="en">24/6</span>
|
||||||
|
<span class="stat-label">תמיכה טכנית</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<span class="stat-number" lang="en">[X]+</span>
|
||||||
|
<span class="stat-label">שנות ניסיון</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="trust-logos">
|
||||||
|
<p class="trust-label">נותנים בנו אמון</p>
|
||||||
|
<div class="logo-placeholder-grid">
|
||||||
|
<div class="logo-placeholder" aria-label="לוגו לקוח"></div>
|
||||||
|
<div class="logo-placeholder" aria-label="לוגו לקוח"></div>
|
||||||
|
<div class="logo-placeholder" aria-label="לוגו לקוח"></div>
|
||||||
|
<div class="logo-placeholder" aria-label="לוגו לקוח"></div>
|
||||||
|
<div class="logo-placeholder" aria-label="לוגו לקוח"></div>
|
||||||
|
<div class="logo-placeholder" aria-label="לוגו לקוח"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="how" class="how">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header reveal">
|
||||||
|
<span class="section-label">איך זה עובד</span>
|
||||||
|
<h2>שלושה צעדים להתחלה</h2>
|
||||||
|
</header>
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step reveal">
|
||||||
|
<div class="step-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 d="M24 14v10l7 7" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="step-number" lang="en">1</div>
|
||||||
|
<h3>פגישת היכרות</h3>
|
||||||
|
<p>נבין את הצרכים שלכם ונתאים חבילת פתרונות מדויקת.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-connector reveal" aria-hidden="true"></div>
|
||||||
|
<div class="step reveal">
|
||||||
|
<div class="step-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<rect x="8" y="8" width="32" height="32" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<path d="M16 24l6 6 10-12" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="step-number" lang="en">2</div>
|
||||||
|
<h3>הגדרה והטמעה</h3>
|
||||||
|
<p>הצוות שלנו מגדיר את המערכות, מעביר הדרכה ומלווה.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-connector reveal" aria-hidden="true"></div>
|
||||||
|
<div class="step reveal">
|
||||||
|
<div class="step-icon">
|
||||||
|
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path d="M24 4v40M4 24h40" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="24" cy="24" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="24" cy="24" r="16" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="step-number" lang="en">3</div>
|
||||||
|
<h3>צמיחה מתמשכת</h3>
|
||||||
|
<p>אתם גדלים — אנחנו כאן עם תמיכה, עדכונים ופיצ'רים חדשים.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="testimonial">
|
||||||
|
<div class="container">
|
||||||
|
<div class="testimonial-card reveal">
|
||||||
|
<svg class="quote-icon" viewBox="0 0 48 48" aria-hidden="true">
|
||||||
|
<path d="M14 28c-4 0-6-2-6-6 0-6 4-12 12-14l1 3c-5 2-7 5-7 8 0 0 1-1 3-1 3 0 5 2 5 5s-3 5-8 5zm20 0c-4 0-6-2-6-6 0-6 4-12 12-14l1 3c-5 2-7 5-7 8 0 0 1-1 3-1 3 0 5 2 5 5s-3 5-8 5z" fill="var(--gold)" opacity="0.3"/>
|
||||||
|
</svg>
|
||||||
|
<blockquote>
|
||||||
|
<p>"עברנו ל-<span lang="en">Emaillion</span> לפני שנתיים והשינוי היה דרמטי. כל התקשורת העסקית שלנו — מייל, <span lang="en">WhatsApp</span>, <span lang="en">SMS</span> — מנוהלת ממקום אחד. התמיכה מעולה והמערכת פשוט עובדת."</p>
|
||||||
|
</blockquote>
|
||||||
|
<div class="testimonial-author">
|
||||||
|
<div class="author-avatar">
|
||||||
|
<svg viewBox="0 0 40 40" aria-hidden="true">
|
||||||
|
<circle cx="20" cy="16" r="8" fill="currentColor" opacity="0.3"/>
|
||||||
|
<path d="M6 38c0-10 6-14 14-14s14 4 14 14" fill="currentColor" opacity="0.3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="author-info">
|
||||||
|
<strong>[שם הלקוח]</strong>
|
||||||
|
<span>[תפקיד, שם החברה]</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="testimonial-placeholder-note">* עדות לקוח לדוגמה — תוחלף בעדות אמיתית</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="contact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-wrapper">
|
||||||
|
<div class="contact-info reveal">
|
||||||
|
<span class="section-label">צרו קשר</span>
|
||||||
|
<h2>מוכנים להתחיל?</h2>
|
||||||
|
<p>השאירו פרטים ונחזור אליכם תוך יום עסקים אחד עם הצעה מותאמת אישית.</p>
|
||||||
|
<ul class="contact-features">
|
||||||
|
<li class="contact-feature">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M9 12l2 2 4-4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
<span>ללא התחייבות</span>
|
||||||
|
</li>
|
||||||
|
<li class="contact-feature">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M9 12l2 2 4-4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
<span>הדגמה חינם</span>
|
||||||
|
</li>
|
||||||
|
<li class="contact-feature">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M9 12l2 2 4-4" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
<span>מחירים שקופים</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<form class="contact-form reveal" action="#" method="post" novalidate>
|
||||||
|
<div class="form-status" role="status" aria-live="polite"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">שם מלא <span class="required" aria-hidden="true">*</span></label>
|
||||||
|
<input type="text" id="name" name="name" required autocomplete="name" aria-describedby="name-error">
|
||||||
|
<span class="field-error" id="name-error"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="phone">טלפון <span class="required" aria-hidden="true">*</span></label>
|
||||||
|
<input type="tel" id="phone" name="phone" required autocomplete="tel" dir="ltr" aria-describedby="phone-error">
|
||||||
|
<span class="field-error" id="phone-error"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">דוא"ל <span class="required" aria-hidden="true">*</span></label>
|
||||||
|
<input type="email" id="email" name="email" required autocomplete="email" dir="ltr" aria-describedby="email-error">
|
||||||
|
<span class="field-error" id="email-error"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="message">הודעה (אופציונלי)</label>
|
||||||
|
<textarea id="message" name="message" rows="4"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary btn-full">שלחו פנייה</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-grid">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a href="#" class="logo">
|
||||||
|
<svg class="logo-icon" viewBox="0 0 40 40" aria-hidden="true">
|
||||||
|
<rect fill="var(--gold)" width="40" height="40" rx="8"/>
|
||||||
|
<text x="20" y="28" font-size="22" text-anchor="middle" fill="var(--bg-primary)" font-weight="600">E</text>
|
||||||
|
</svg>
|
||||||
|
<span class="logo-text" lang="en">Emaillion Group</span>
|
||||||
|
</a>
|
||||||
|
<p>תשתיות <span lang="en">AI</span> ותקשורת לעסקים מובילים בישראל.</p>
|
||||||
|
</div>
|
||||||
|
<nav class="footer-nav" aria-label="מוצרים">
|
||||||
|
<h4>מוצרים</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#" lang="en">Email Lion</a></li>
|
||||||
|
<li><a href="#" lang="en">OwnAvatar</a></li>
|
||||||
|
<li><a href="#" lang="en">Doali</a></li>
|
||||||
|
<li><a href="#" lang="en">SeoPush</a></li>
|
||||||
|
<li><a href="#" lang="en">Emilio</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class="footer-nav" aria-label="החברה">
|
||||||
|
<h4>החברה</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">אודות</a></li>
|
||||||
|
<li><a href="#">קריירה</a></li>
|
||||||
|
<li><a href="#">בלוג</a></li>
|
||||||
|
<li><a href="#contact">צרו קשר</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-social">
|
||||||
|
<h4>עקבו אחרינו</h4>
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="#" aria-label="לינקדאין">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zM9 17H6.5v-7H9v7zM7.7 8.7c-.8 0-1.3-.5-1.3-1.2s.5-1.2 1.4-1.2 1.3.5 1.3 1.2-.5 1.2-1.4 1.2zM18 17h-2.5v-3.8c0-1.1-.7-1.3-1-1.3s-1.2.1-1.2 1.3V17H11v-7h2.3v1c.3-.5 1-1 2.2-1s2.5.8 2.5 3v4z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" aria-label="פייסבוק">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" aria-label="טוויטר">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© <span lang="en">2025 Emaillion Group</span>. כל הזכויות שמורות.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,223 @@
|
|||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
|
||||||
|
// Intersection Observer for reveal animations
|
||||||
|
const revealElements = document.querySelectorAll('.reveal');
|
||||||
|
|
||||||
|
if ('IntersectionObserver' in window && !prefersReducedMotion) {
|
||||||
|
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 {
|
||||||
|
revealElements.forEach(el => el.classList.add('visible'));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Header scroll effect
|
||||||
|
const header = document.querySelector('.site-header');
|
||||||
|
|
||||||
|
function handleScroll() {
|
||||||
|
const currentScroll = window.pageYOffset;
|
||||||
|
|
||||||
|
if (currentScroll > 50) {
|
||||||
|
header.classList.add('scrolled');
|
||||||
|
} else {
|
||||||
|
header.classList.remove('scrolled');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||||
|
|
||||||
|
// Mobile navigation toggle
|
||||||
|
const navToggle = document.querySelector('.nav-toggle');
|
||||||
|
const navLinks = document.querySelector('.nav-links');
|
||||||
|
|
||||||
|
if (navToggle && navLinks) {
|
||||||
|
navToggle.addEventListener('click', () => {
|
||||||
|
const isOpen = navLinks.classList.toggle('open');
|
||||||
|
navToggle.setAttribute('aria-expanded', isOpen);
|
||||||
|
|
||||||
|
const spans = navToggle.querySelectorAll('span');
|
||||||
|
if (isOpen) {
|
||||||
|
spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
|
||||||
|
spans[1].style.opacity = '0';
|
||||||
|
spans[2].style.transform = 'rotate(-45deg) translate(5px, -5px)';
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
} else {
|
||||||
|
spans[0].style.transform = '';
|
||||||
|
spans[1].style.opacity = '';
|
||||||
|
spans[2].style.transform = '';
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
navLinks.querySelectorAll('a').forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
navLinks.classList.remove('open');
|
||||||
|
navToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
const spans = navToggle.querySelectorAll('span');
|
||||||
|
spans[0].style.transform = '';
|
||||||
|
spans[1].style.opacity = '';
|
||||||
|
spans[2].style.transform = '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape' && navLinks.classList.contains('open')) {
|
||||||
|
navLinks.classList.remove('open');
|
||||||
|
navToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
navToggle.focus();
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
const spans = navToggle.querySelectorAll('span');
|
||||||
|
spans[0].style.transform = '';
|
||||||
|
spans[1].style.opacity = '';
|
||||||
|
spans[2].style.transform = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth scroll for anchor links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function(e) {
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
if (targetId === '#') return;
|
||||||
|
|
||||||
|
const target = document.querySelector(targetId);
|
||||||
|
if (target) {
|
||||||
|
e.preventDefault();
|
||||||
|
const headerHeight = header.offsetHeight;
|
||||||
|
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetPosition,
|
||||||
|
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form validation and submission
|
||||||
|
const contactForm = document.querySelector('.contact-form');
|
||||||
|
|
||||||
|
if (contactForm) {
|
||||||
|
const formStatus = contactForm.querySelector('.form-status');
|
||||||
|
const nameInput = contactForm.querySelector('#name');
|
||||||
|
const phoneInput = contactForm.querySelector('#phone');
|
||||||
|
const emailInput = contactForm.querySelector('#email');
|
||||||
|
|
||||||
|
function validateField(input, errorId, validationFn, errorMessage) {
|
||||||
|
const errorEl = document.getElementById(errorId);
|
||||||
|
const isValid = validationFn(input.value.trim());
|
||||||
|
|
||||||
|
if (!isValid && input.value.trim() !== '') {
|
||||||
|
input.classList.add('invalid');
|
||||||
|
errorEl.textContent = errorMessage;
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
input.classList.remove('invalid');
|
||||||
|
errorEl.textContent = '';
|
||||||
|
return isValid || input.value.trim() === '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateName(value) {
|
||||||
|
return value.length >= 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function validatePhone(value) {
|
||||||
|
return /^[\d\-+() ]{9,15}$/.test(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateEmail(value) {
|
||||||
|
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
nameInput.addEventListener('blur', () => {
|
||||||
|
validateField(nameInput, 'name-error', validateName, 'נא להזין שם מלא');
|
||||||
|
});
|
||||||
|
|
||||||
|
phoneInput.addEventListener('blur', () => {
|
||||||
|
validateField(phoneInput, 'phone-error', validatePhone, 'נא להזין מספר טלפון תקין');
|
||||||
|
});
|
||||||
|
|
||||||
|
emailInput.addEventListener('blur', () => {
|
||||||
|
validateField(emailInput, 'email-error', validateEmail, 'נא להזין כתובת דוא"ל תקינה');
|
||||||
|
});
|
||||||
|
|
||||||
|
contactForm.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Clear previous status
|
||||||
|
formStatus.className = 'form-status';
|
||||||
|
formStatus.textContent = '';
|
||||||
|
|
||||||
|
// Validate all fields
|
||||||
|
const isNameValid = validateField(nameInput, 'name-error', validateName, 'נא להזין שם מלא');
|
||||||
|
const isPhoneValid = validateField(phoneInput, 'phone-error', validatePhone, 'נא להזין מספר טלפון תקין');
|
||||||
|
const isEmailValid = validateField(emailInput, 'email-error', validateEmail, 'נא להזין כתובת דוא"ל תקינה');
|
||||||
|
|
||||||
|
if (!nameInput.value.trim() || !phoneInput.value.trim() || !emailInput.value.trim()) {
|
||||||
|
if (!nameInput.value.trim()) {
|
||||||
|
document.getElementById('name-error').textContent = 'שדה חובה';
|
||||||
|
nameInput.classList.add('invalid');
|
||||||
|
}
|
||||||
|
if (!phoneInput.value.trim()) {
|
||||||
|
document.getElementById('phone-error').textContent = 'שדה חובה';
|
||||||
|
phoneInput.classList.add('invalid');
|
||||||
|
}
|
||||||
|
if (!emailInput.value.trim()) {
|
||||||
|
document.getElementById('email-error').textContent = 'שדה חובה';
|
||||||
|
emailInput.classList.add('invalid');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isNameValid || !isPhoneValid || !isEmailValid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitBtn = this.querySelector('button[type="submit"]');
|
||||||
|
const originalText = submitBtn.textContent;
|
||||||
|
|
||||||
|
submitBtn.textContent = 'שולח...';
|
||||||
|
submitBtn.disabled = true;
|
||||||
|
submitBtn.setAttribute('aria-busy', 'true');
|
||||||
|
|
||||||
|
// Simulate form submission
|
||||||
|
setTimeout(() => {
|
||||||
|
formStatus.className = 'form-status success';
|
||||||
|
formStatus.textContent = 'הפנייה נשלחה בהצלחה! נחזור אליכם בהקדם.';
|
||||||
|
submitBtn.textContent = originalText;
|
||||||
|
submitBtn.disabled = false;
|
||||||
|
submitBtn.setAttribute('aria-busy', 'false');
|
||||||
|
|
||||||
|
this.reset();
|
||||||
|
|
||||||
|
// Clear error states
|
||||||
|
[nameInput, phoneInput, emailInput].forEach(input => {
|
||||||
|
input.classList.remove('invalid');
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.field-error').forEach(el => el.textContent = '');
|
||||||
|
|
||||||
|
// Hide success message after 5 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
formStatus.className = 'form-status';
|
||||||
|
formStatus.textContent = '';
|
||||||
|
}, 5000);
|
||||||
|
}, 1500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
Reference in New Issue
Block a user