Initial AI-generated site
This commit is contained in:
+392
@@ -0,0 +1,392 @@
|
||||
<!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="#0d9488">
|
||||
<title>עמותה 360 | מערכת ניהול מקיפה לעמותות</title>
|
||||
<meta name="description" content="עמותה 360 - פלטפורמה טכנולוגית מתקדמת לניהול עמותות וארגונים ללא מטרות רווח בישראל. ניהול תורמים, מתנדבים, פרויקטים ודיווחים במקום אחד.">
|
||||
<meta property="og:title" content="עמותה 360 | מערכת ניהול מקיפה לעמותות">
|
||||
<meta property="og:description" content="פלטפורמה טכנולוגית מתקדמת לניהול עמותות וארגונים ללא מטרות רווח בישראל">
|
||||
<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'><circle cx='50' cy='50' r='45' fill='%231e3a5f'/><text x='50' y='65' text-anchor='middle' font-size='40' fill='white'>360</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@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="index.html" class="logo">
|
||||
<svg class="logo-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<circle cx="24" cy="24" r="22" stroke="currentColor" stroke-width="2.5" fill="none"/>
|
||||
<path d="M24 6 C32 6 40 14 40 24 C40 34 32 42 24 42" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none"/>
|
||||
<circle cx="24" cy="24" r="8" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="logo-text">עמותה 360</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="פתח תפריט" aria-expanded="false" aria-controls="nav-menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul class="nav-menu" id="nav-menu">
|
||||
<li><a href="index.html" class="active" aria-current="page">בית</a></li>
|
||||
<li><a href="features.html">תכונות</a></li>
|
||||
<li><a href="pricing.html">מחירון</a></li>
|
||||
<li><a href="clients.html">לקוחות</a></li>
|
||||
<li><a href="blog.html">מדריכים</a></li>
|
||||
<li><a href="about.html">אודות</a></li>
|
||||
<li><a href="contact.html">צור קשר</a></li>
|
||||
</ul>
|
||||
<a href="contact.html#demo" class="nav-cta">בקשו הדגמה</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<p class="hero-badge">הפלטפורמה המובילה לניהול עמותות בישראל</p>
|
||||
<h1>נהלו את העמותה בביטחון. <span class="highlight">התמקדו במשימה.</span></h1>
|
||||
<p class="hero-subtitle">עמותה 360 מאחדת ניהול תורמים, מתנדבים, פרויקטים ודיווחי רגולציה — מערכת אחת שמפשטת את היומיום ומשחררת אתכם לעשות את מה שאתם עושים הכי טוב.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="contact.html#demo" class="btn btn-primary">בקשו הדגמה חינם</a>
|
||||
<a href="features.html" class="btn btn-secondary">גלו את היכולות</a>
|
||||
</div>
|
||||
<div class="hero-trust">
|
||||
<span class="hero-trust-label">מהימנים על ידי מאות עמותות</span>
|
||||
<div class="hero-trust-logos">
|
||||
<div class="trust-logo-placeholder" aria-label="לוגו עמותה"></div>
|
||||
<div class="trust-logo-placeholder" aria-label="לוגו עמותה"></div>
|
||||
<div class="trust-logo-placeholder" aria-label="לוגו עמותה"></div>
|
||||
<div class="trust-logo-placeholder" aria-label="לוגו עמותה"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="dashboard-mockup">
|
||||
<div class="mockup-header">
|
||||
<div class="mockup-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="mockup-title">עמותה 360 — לוח בקרה</span>
|
||||
</div>
|
||||
<div class="mockup-body">
|
||||
<div class="mockup-sidebar">
|
||||
<div class="sidebar-item active" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1" fill="currentColor"/><rect x="14" y="3" width="7" height="7" rx="1" fill="currentColor" opacity="0.5"/><rect x="3" y="14" width="7" height="7" rx="1" fill="currentColor" opacity="0.5"/><rect x="14" y="14" width="7" height="7" rx="1" fill="currentColor" opacity="0.5"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-item" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="2"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-item" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="sidebar-item" aria-hidden="true">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/><path d="M3 10h18" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup-content">
|
||||
<div class="mockup-stats">
|
||||
<div class="mockup-stat">
|
||||
<span class="stat-value">1,247</span>
|
||||
<span class="stat-label">תורמים פעילים</span>
|
||||
<span class="stat-trend positive">+12%</span>
|
||||
</div>
|
||||
<div class="mockup-stat">
|
||||
<span class="stat-value">₪847K</span>
|
||||
<span class="stat-label">תרומות החודש</span>
|
||||
<span class="stat-trend positive">+8%</span>
|
||||
</div>
|
||||
<div class="mockup-stat">
|
||||
<span class="stat-value">384</span>
|
||||
<span class="stat-label">מתנדבים</span>
|
||||
<span class="stat-trend neutral">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup-chart">
|
||||
<div class="chart-header">מגמת תרומות — 6 חודשים אחרונים</div>
|
||||
<div class="chart-bars">
|
||||
<div class="chart-bar" style="--height: 45%"><span>ינו׳</span></div>
|
||||
<div class="chart-bar" style="--height: 62%"><span>פבר׳</span></div>
|
||||
<div class="chart-bar" style="--height: 58%"><span>מרץ</span></div>
|
||||
<div class="chart-bar" style="--height: 75%"><span>אפר׳</span></div>
|
||||
<div class="chart-bar" style="--height: 68%"><span>מאי</span></div>
|
||||
<div class="chart-bar active" style="--height: 85%"><span>יוני</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mockup-tasks">
|
||||
<div class="task-header">משימות להיום</div>
|
||||
<div class="task-item done">
|
||||
<span class="task-check">✓</span>
|
||||
<span>שליחת תודה לתורמים חדשים</span>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<span class="task-check"></span>
|
||||
<span>הכנת דוח רבעוני</span>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<span class="task-check"></span>
|
||||
<span>תיאום משמרת מתנדבים</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="social-proof" aria-label="נתונים מרכזיים">
|
||||
<div class="proof-container">
|
||||
<div class="proof-item">
|
||||
<span class="proof-number">+500</span>
|
||||
<span class="proof-label">עמותות משתמשות</span>
|
||||
</div>
|
||||
<div class="proof-divider" aria-hidden="true"></div>
|
||||
<div class="proof-item">
|
||||
<span class="proof-number">98%</span>
|
||||
<span class="proof-label">שביעות רצון</span>
|
||||
</div>
|
||||
<div class="proof-divider" aria-hidden="true"></div>
|
||||
<div class="proof-item">
|
||||
<span class="proof-number">24/7</span>
|
||||
<span class="proof-label">תמיכה טכנית</span>
|
||||
</div>
|
||||
<div class="proof-divider" aria-hidden="true"></div>
|
||||
<div class="proof-item">
|
||||
<span class="proof-number">10+</span>
|
||||
<span class="proof-label">שנות פעילות</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features-preview">
|
||||
<header class="section-header" data-reveal>
|
||||
<p class="section-label">היכולות שלנו</p>
|
||||
<h2>כלי ניהול שנבנו עבור עמותות</h2>
|
||||
<p>לא עוד התאמות של מערכות עסקיות — עמותה 360 נבנתה מהיסוד עבור המגזר השלישי</p>
|
||||
</header>
|
||||
<div class="features-bento">
|
||||
<article class="bento-card bento-large" data-reveal>
|
||||
<div class="bento-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<circle cx="24" cy="16" r="8" stroke="currentColor" stroke-width="2.5"/>
|
||||
<path d="M8 40c0-8.837 7.163-16 16-16s16 7.163 16 16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="36" cy="36" r="8" fill="var(--color-primary-light)" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M33 36h6M36 33v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>ניהול תורמים ותרומות</h3>
|
||||
<p>פרופיל מלא לכל תורם, היסטוריית תרומות, הפקת קבלות מס אוטומטית לפי סעיף 46, ותזכורות חכמות לחידוש תרומות.</p>
|
||||
<a href="features.html#donors" class="bento-link">
|
||||
למידע נוסף
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
<article class="bento-card" data-reveal>
|
||||
<div class="bento-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<circle cx="16" cy="16" r="6" stroke="currentColor" stroke-width="2.5"/>
|
||||
<circle cx="32" cy="16" r="6" stroke="currentColor" stroke-width="2.5"/>
|
||||
<circle cx="24" cy="32" r="6" stroke="currentColor" stroke-width="2.5"/>
|
||||
<path d="M20 20l4 8M28 20l-4 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>ניהול מתנדבים</h3>
|
||||
<p>רישום מתנדבים, תיאום משמרות אוטומטי, מעקב שעות והנפקת אישורים.</p>
|
||||
<a href="features.html#volunteers" class="bento-link">
|
||||
למידע נוסף
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
<article class="bento-card" data-reveal>
|
||||
<div class="bento-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<rect x="6" y="10" width="36" height="28" rx="4" stroke="currentColor" stroke-width="2.5"/>
|
||||
<path d="M6 18h36" stroke="currentColor" stroke-width="2.5"/>
|
||||
<rect x="12" y="24" width="8" height="8" rx="2" fill="var(--color-success-light)" stroke="currentColor" stroke-width="1.5"/>
|
||||
<rect x="24" y="24" width="8" height="8" rx="2" fill="var(--color-primary-light)" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>ניהול פרויקטים</h3>
|
||||
<p>תכנון, ביצוע, אבני דרך ודיווח התקדמות בזמן אמת לכל פרויקט.</p>
|
||||
<a href="features.html#projects" class="bento-link">
|
||||
למידע נוסף
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
<article class="bento-card" data-reveal>
|
||||
<div class="bento-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M8 12h32v28a4 4 0 01-4 4H12a4 4 0 01-4-4V12z" stroke="currentColor" stroke-width="2.5"/>
|
||||
<path d="M16 12V8a4 4 0 014-4h8a4 4 0 014 4v4" stroke="currentColor" stroke-width="2.5"/>
|
||||
<path d="M16 24l4 4 8-8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>דיווחים לרשויות</h3>
|
||||
<p>דוחות מוכנים לרשם העמותות, מס הכנסה וניהול תקין — בלחיצה אחת.</p>
|
||||
<a href="features.html#compliance" class="bento-link">
|
||||
למידע נוסף
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
<article class="bento-card bento-wide" data-reveal>
|
||||
<div class="bento-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<rect x="6" y="6" width="36" height="36" rx="4" stroke="currentColor" stroke-width="2.5"/>
|
||||
<path d="M14 30l6-8 6 4 8-12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="34" cy="14" r="4" fill="var(--color-primary-light)" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>דוחות ואנליטיקה</h3>
|
||||
<p>דשבורדים אינטראקטיביים בזמן אמת, ניתוח מגמות, ויצוא לאקסל ו-PDF — כל המידע שההנהלה צריכה, במרחק קליק.</p>
|
||||
<a href="features.html#reports" class="bento-link">
|
||||
למידע נוסף
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
<article class="bento-card" data-reveal>
|
||||
<div class="bento-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<circle cx="24" cy="24" r="18" stroke="currentColor" stroke-width="2.5"/>
|
||||
<path d="M24 14v10l7 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="24" cy="24" r="3" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>אוטומציות</h3>
|
||||
<p>תזכורות חכמות, מיילים מתוזמנים ו-workflows — המערכת עובדת בשבילכם.</p>
|
||||
<a href="features.html#automation" class="bento-link">
|
||||
למידע נוסף
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div class="features-cta" data-reveal>
|
||||
<a href="features.html" class="btn btn-outline">כל היכולות במקום אחד</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="testimonials">
|
||||
<header class="section-header" data-reveal>
|
||||
<p class="section-label">מה אומרים עלינו</p>
|
||||
<h2>עמותות שעברו לעמותה 360</h2>
|
||||
<p>הצטרפו לקהילה של מנהלים שמשקיעים פחות זמן בניהול ויותר בהשפעה</p>
|
||||
</header>
|
||||
<div class="testimonials-grid">
|
||||
<blockquote class="testimonial-card featured" data-reveal>
|
||||
<div class="testimonial-content">
|
||||
<p>״המערכת שינתה לנו את הדרך שבה אנחנו עובדים. במקום 5 אקסלים ו-3 מערכות שונות — הכל במקום אחד. חסכנו לפחות 10 שעות שבועיות של עבודה אדמיניסטרטיבית.״</p>
|
||||
</div>
|
||||
<footer class="testimonial-author">
|
||||
<div class="author-avatar">ר״ח</div>
|
||||
<div class="author-info">
|
||||
<cite>רונית חן-מזרחי</cite>
|
||||
<span>מנכ״לית, עמותת ״שער להזדמנות״</span>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<blockquote class="testimonial-card" data-reveal>
|
||||
<div class="testimonial-content">
|
||||
<p>״הדוחות האוטומטיים לרשם העמותות חסכו לנו עשרות שעות בשנה. המערכת יודעת בדיוק מה נדרש ומפיקה הכל בלחיצת כפתור.״</p>
|
||||
</div>
|
||||
<footer class="testimonial-author">
|
||||
<div class="author-avatar" style="background: var(--color-teal);">ד״ל</div>
|
||||
<div class="author-info">
|
||||
<cite>דוד לוינסון</cite>
|
||||
<span>גזבר, עמותת ״אופק חדש״</span>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<blockquote class="testimonial-card" data-reveal>
|
||||
<div class="testimonial-content">
|
||||
<p>״ניהול 200 מתנדבים היה כאוס לפני עמותה 360. היום התיאומים אוטומטיים, המתנדבים מקבלים תזכורות, וכל שעה מתועדת.״</p>
|
||||
</div>
|
||||
<footer class="testimonial-author">
|
||||
<div class="author-avatar" style="background: var(--color-accent);">מ״כ</div>
|
||||
<div class="author-info">
|
||||
<cite>מיכל כהן-דוד</cite>
|
||||
<span>מנהלת מתנדבים, ״יד עוזרת״</span>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="testimonials-cta" data-reveal>
|
||||
<a href="clients.html" class="btn btn-outline">לכל סיפורי ההצלחה</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="cta-content" data-reveal>
|
||||
<p class="cta-label">מוכנים להתחיל?</p>
|
||||
<h2>הצטרפו לעמותות שכבר עברו לעבוד חכם</h2>
|
||||
<p>קבלו הדגמה אישית בחינם וגלו איך עמותה 360 יכולה לפשט את הניהול היומיומי שלכם.</p>
|
||||
<div class="cta-actions">
|
||||
<a href="contact.html#demo" class="btn btn-cta-primary">קבעו הדגמה חינם</a>
|
||||
<a href="contact.html" class="btn btn-cta-secondary">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="2"/></svg>
|
||||
צרו קשר
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-main">
|
||||
<div class="footer-brand">
|
||||
<a href="index.html" class="logo">
|
||||
<svg class="logo-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<circle cx="24" cy="24" r="22" stroke="currentColor" stroke-width="2.5" fill="none"/>
|
||||
<path d="M24 6 C32 6 40 14 40 24 C40 34 32 42 24 42" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none"/>
|
||||
<circle cx="24" cy="24" r="8" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="logo-text">עמותה 360</span>
|
||||
</a>
|
||||
<p>פלטפורמה טכנולוגית מתקדמת לניהול עמותות וארגונים ללא מטרות רווח בישראל.</p>
|
||||
</div>
|
||||
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||
<div class="footer-nav-group">
|
||||
<h4>המוצר</h4>
|
||||
<ul>
|
||||
<li><a href="features.html">תכונות</a></li>
|
||||
<li><a href="pricing.html">מחירון</a></li>
|
||||
<li><a href="clients.html">לקוחות</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-nav-group">
|
||||
<h4>משאבים</h4>
|
||||
<ul>
|
||||
<li><a href="blog.html">מדריכים</a></li>
|
||||
<li><a href="blog.html#webinars">וובינרים</a></li>
|
||||
<li><a href="blog.html#templates">תבניות</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-nav-group">
|
||||
<h4>החברה</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">אודות</a></li>
|
||||
<li><a href="contact.html">צור קשר</a></li>
|
||||
<li><a href="contact.html#careers">קריירה</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 עמותה 360. כל הזכויות שמורות.</p>
|
||||
<div class="footer-legal">
|
||||
<a href="#">תנאי שימוש</a>
|
||||
<a href="#">מדיניות פרטיות</a>
|
||||
<a href="#">נגישות</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,226 @@
|
||||
// Navigation Toggle
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
|
||||
if (navToggle && navMenu) {
|
||||
navToggle.addEventListener('click', () => {
|
||||
const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
|
||||
navToggle.setAttribute('aria-expanded', !isExpanded);
|
||||
navMenu.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!navToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navMenu.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && navMenu.classList.contains('active')) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navMenu.classList.remove('active');
|
||||
navToggle.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Reveal on Scroll
|
||||
const revealElements = document.querySelectorAll('[data-reveal]');
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
// Stagger the reveal animation
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add('revealed');
|
||||
}, index * 100);
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
// Check for reduced motion preference
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
if (!prefersReducedMotion) {
|
||||
revealElements.forEach(el => revealObserver.observe(el));
|
||||
} else {
|
||||
// If user prefers reduced motion, reveal everything immediately
|
||||
revealElements.forEach(el => el.classList.add('revealed'));
|
||||
}
|
||||
|
||||
// Animated Counter
|
||||
const counters = document.querySelectorAll('[data-count]');
|
||||
|
||||
const counterObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const counter = entry.target;
|
||||
const target = parseInt(counter.getAttribute('data-count'));
|
||||
const duration = 2000;
|
||||
const step = target / (duration / 16);
|
||||
let current = 0;
|
||||
|
||||
const updateCounter = () => {
|
||||
current += step;
|
||||
if (current < target) {
|
||||
counter.textContent = Math.floor(current).toLocaleString('he-IL');
|
||||
requestAnimationFrame(updateCounter);
|
||||
} else {
|
||||
counter.textContent = target.toLocaleString('he-IL');
|
||||
}
|
||||
};
|
||||
|
||||
if (!prefersReducedMotion) {
|
||||
updateCounter();
|
||||
} else {
|
||||
counter.textContent = target.toLocaleString('he-IL');
|
||||
}
|
||||
|
||||
counterObserver.unobserve(counter);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.5
|
||||
});
|
||||
|
||||
counters.forEach(counter => counterObserver.observe(counter));
|
||||
|
||||
// Pricing Toggle
|
||||
const pricingToggle = document.querySelector('.toggle-switch');
|
||||
const monthlyLabel = document.querySelector('[data-pricing="monthly"]');
|
||||
const annualLabel = document.querySelector('[data-pricing="annual"]');
|
||||
const prices = document.querySelectorAll('[data-price-monthly]');
|
||||
|
||||
if (pricingToggle && prices.length > 0) {
|
||||
pricingToggle.addEventListener('click', () => {
|
||||
pricingToggle.classList.toggle('active');
|
||||
const isAnnual = pricingToggle.classList.contains('active');
|
||||
|
||||
if (monthlyLabel) monthlyLabel.classList.toggle('active', !isAnnual);
|
||||
if (annualLabel) annualLabel.classList.toggle('active', isAnnual);
|
||||
|
||||
prices.forEach(price => {
|
||||
const monthly = price.getAttribute('data-price-monthly');
|
||||
const annual = price.getAttribute('data-price-annual');
|
||||
price.innerHTML = isAnnual ? annual : monthly;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Form Validation and Submission
|
||||
const contactForm = document.querySelector('.contact-form');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Basic validation
|
||||
const required = contactForm.querySelectorAll('[required]');
|
||||
let isValid = true;
|
||||
|
||||
required.forEach(field => {
|
||||
if (!field.value.trim()) {
|
||||
isValid = false;
|
||||
field.classList.add('error');
|
||||
} else {
|
||||
field.classList.remove('error');
|
||||
}
|
||||
});
|
||||
|
||||
// Email validation
|
||||
const email = contactForm.querySelector('[type="email"]');
|
||||
if (email && email.value) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email.value)) {
|
||||
isValid = false;
|
||||
email.classList.add('error');
|
||||
}
|
||||
}
|
||||
|
||||
if (isValid) {
|
||||
// Simulate form submission
|
||||
const submitBtn = contactForm.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = 'שולח...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
submitBtn.textContent = 'נשלח בהצלחה!';
|
||||
submitBtn.classList.add('success');
|
||||
|
||||
setTimeout(() => {
|
||||
contactForm.reset();
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.classList.remove('success');
|
||||
}, 3000);
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Newsletter Form
|
||||
const newsletterForm = document.querySelector('.newsletter-form');
|
||||
|
||||
if (newsletterForm) {
|
||||
newsletterForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const email = newsletterForm.querySelector('input[type="email"]');
|
||||
const submitBtn = newsletterForm.querySelector('button');
|
||||
|
||||
if (email && email.value) {
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = 'נרשמת!';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
email.value = '';
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 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();
|
||||
target.scrollIntoView({
|
||||
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Header scroll effect
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
if (header) {
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 100) {
|
||||
header.style.boxShadow = 'var(--shadow-md)';
|
||||
} else {
|
||||
header.style.boxShadow = 'none';
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
}, { passive: true });
|
||||
}
|
||||
Reference in New Issue
Block a user