Initial AI-generated site
This commit is contained in:
+641
@@ -0,0 +1,641 @@
|
||||
<!doctype html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>אימייליון | בניית אתרים עם AI</title>
|
||||
<meta name="description" content="אימייליון - סטודיו לבניית אתרים מעוצבים בטכנולוגיית AI. עיצוב ייחודי, חוויה דיגיטלית מרהיבה.">
|
||||
<meta property="og:title" content="אימייליון | בניית אתרים עם AI">
|
||||
<meta property="og:description" content="סטודיו לבניית אתרים מעוצבים בטכנולוגיית AI">
|
||||
<meta property="og:type" content="website">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%236366f1' rx='20' width='100' height='100'/><path d='M30 70L50 30L70 70' stroke='white' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' fill='none'/><circle cx='50' cy='58' r='6' fill='white'/></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;700;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
|
||||
<div class="cursor"></div>
|
||||
<div class="cursor-follower"></div>
|
||||
|
||||
<nav class="nav" role="navigation" aria-label="ניווט ראשי">
|
||||
<div class="nav-inner">
|
||||
<a href="#" class="logo" aria-label="אימייליון - דף הבית">
|
||||
<span class="logo-icon">
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<rect width="40" height="40" rx="10" fill="url(#logo-grad)"/>
|
||||
<path d="M12 28L20 12L28 28" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="20" cy="22" r="3" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="logo-grad" x1="0" y1="0" x2="40" y2="40">
|
||||
<stop stop-color="#6366f1"/>
|
||||
<stop offset="1" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="logo-text">אימייליון</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="#work" class="nav-link">עבודות</a>
|
||||
<a href="#services" class="nav-link">שירותים</a>
|
||||
<a href="#about" class="nav-link">אודות</a>
|
||||
<a href="#contact" class="nav-link nav-cta">בואו נדבר</a>
|
||||
</div>
|
||||
<button class="menu-toggle" aria-label="פתיחת תפריט" aria-expanded="false" aria-controls="mobileMenu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="mobile-menu" id="mobileMenu" aria-hidden="true">
|
||||
<div class="mobile-menu-inner">
|
||||
<a href="#work" class="mobile-link">עבודות</a>
|
||||
<a href="#services" class="mobile-link">שירותים</a>
|
||||
<a href="#about" class="mobile-link">אודות</a>
|
||||
<a href="#contact" class="mobile-link">בואו נדבר</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header class="hero" id="main-content">
|
||||
<div class="hero-bg" aria-hidden="true">
|
||||
<div class="gradient-orb orb-1"></div>
|
||||
<div class="gradient-orb orb-2"></div>
|
||||
<div class="gradient-orb orb-3"></div>
|
||||
<div class="grid-overlay"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-tag reveal">
|
||||
<span class="pulse" aria-hidden="true"></span>
|
||||
סטודיו דיגיטלי מונע AI
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line reveal">אנחנו יוצרים</span>
|
||||
<span class="title-line reveal">חוויות דיגיטליות</span>
|
||||
<span class="title-line title-accent reveal">שלא נשכחות</span>
|
||||
</h1>
|
||||
<p class="hero-desc reveal">
|
||||
משלבים בינה מלאכותית עם עיצוב קריאייטיבי כדי לבנות אתרים שמרגישים אחרת. כל פרויקט הוא יצירה ייחודית.
|
||||
</p>
|
||||
<div class="hero-actions reveal">
|
||||
<a href="#work" class="btn btn-primary">
|
||||
<span>צפו בעבודות</span>
|
||||
</a>
|
||||
<a href="#contact" class="btn btn-ghost">התחילו פרויקט</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-indicator" aria-hidden="true">
|
||||
<span>גללו למטה</span>
|
||||
<div class="scroll-line"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="marquee-section" aria-hidden="true">
|
||||
<div class="marquee">
|
||||
<div class="marquee-track">
|
||||
<span>עיצוב אתרים</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
<span>חוויית משתמש</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
<span>בינה מלאכותית</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
<span>פיתוח מתקדם</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
<span>מיתוג דיגיטלי</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
<span>עיצוב אתרים</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
<span>חוויית משתמש</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
<span>בינה מלאכותית</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
<span>פיתוח מתקדם</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
<span>מיתוג דיגיטלי</span>
|
||||
<span class="marquee-dot">✦</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="work" class="work-section">
|
||||
<div class="container">
|
||||
<div class="section-header reveal">
|
||||
<span class="section-tag">תיק עבודות</span>
|
||||
<h2 class="section-title">פרויקטים נבחרים</h2>
|
||||
</div>
|
||||
|
||||
<div class="work-grid">
|
||||
<article class="work-card work-card-large reveal">
|
||||
<div class="work-card-inner">
|
||||
<div class="work-visual">
|
||||
<div class="work-visual-bg" style="--accent: #6366f1;">
|
||||
<svg class="work-pattern" viewBox="0 0 200 200" aria-hidden="true">
|
||||
<defs>
|
||||
<pattern id="pattern1" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<circle cx="20" cy="20" r="2" fill="currentColor" opacity="0.3"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect fill="url(#pattern1)" width="200" height="200"/>
|
||||
<circle cx="100" cy="100" r="60" fill="none" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
||||
<circle cx="100" cy="100" r="40" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||||
</svg>
|
||||
<div class="work-mockup">
|
||||
<div class="mockup-browser">
|
||||
<div class="mockup-header">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="mockup-content">
|
||||
<div class="mockup-nav"></div>
|
||||
<div class="mockup-hero"></div>
|
||||
<div class="mockup-grid">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-info">
|
||||
<span class="work-category">אתר תדמית</span>
|
||||
<h3 class="work-title">נובה טכנולוגיות</h3>
|
||||
<p class="work-desc">פלטפורמה דיגיטלית לחברת סטארטאפ בתחום הפינטק. עיצוב מינימליסטי עם אנימציות מורכבות.</p>
|
||||
<div class="work-tags">
|
||||
<span>UI/UX</span>
|
||||
<span>פיתוח</span>
|
||||
<span>אנימציה</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card reveal">
|
||||
<div class="work-card-inner">
|
||||
<div class="work-visual">
|
||||
<div class="work-visual-bg" style="--accent: #ec4899;">
|
||||
<svg class="work-pattern" viewBox="0 0 200 200" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="currentColor" stop-opacity="0.2"/>
|
||||
<stop offset="100%" stop-color="currentColor" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="url(#grad2)" width="200" height="200"/>
|
||||
<path d="M0 100 Q50 50 100 100 T200 100" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3"/>
|
||||
<path d="M0 120 Q50 70 100 120 T200 120" fill="none" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
||||
</svg>
|
||||
<div class="work-mockup">
|
||||
<div class="mockup-phone">
|
||||
<div class="mockup-phone-screen">
|
||||
<div class="phone-header"></div>
|
||||
<div class="phone-card"></div>
|
||||
<div class="phone-card"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-info">
|
||||
<span class="work-category">אפליקציית מובייל</span>
|
||||
<h3 class="work-title">בריאלי</h3>
|
||||
<p class="work-desc">אפליקציה לניהול בריאות אישית עם מעקב יומי ותובנות מותאמות.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card reveal">
|
||||
<div class="work-card-inner">
|
||||
<div class="work-visual">
|
||||
<div class="work-visual-bg" style="--accent: #10b981;">
|
||||
<svg class="work-pattern" viewBox="0 0 200 200" aria-hidden="true">
|
||||
<rect x="40" y="40" width="30" height="30" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="85" y="40" width="30" height="30" fill="currentColor" opacity="0.3"/>
|
||||
<rect x="130" y="40" width="30" height="30" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="40" y="85" width="30" height="30" fill="currentColor" opacity="0.3"/>
|
||||
<rect x="85" y="85" width="30" height="30" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="130" y="85" width="30" height="30" fill="currentColor" opacity="0.3"/>
|
||||
<rect x="40" y="130" width="30" height="30" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="85" y="130" width="30" height="30" fill="currentColor" opacity="0.3"/>
|
||||
<rect x="130" y="130" width="30" height="30" fill="currentColor" opacity="0.2"/>
|
||||
</svg>
|
||||
<div class="work-mockup">
|
||||
<div class="mockup-dashboard">
|
||||
<div class="dash-sidebar"></div>
|
||||
<div class="dash-main">
|
||||
<div class="dash-chart"></div>
|
||||
<div class="dash-stats">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-info">
|
||||
<span class="work-category">מערכת ניהול</span>
|
||||
<h3 class="work-title">דאטה פלוס</h3>
|
||||
<p class="work-desc">דשבורד אנליטיקס מתקדם עם ויזואליזציות נתונים אינטראקטיביות.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card work-card-wide reveal">
|
||||
<div class="work-card-inner">
|
||||
<div class="work-visual">
|
||||
<div class="work-visual-bg" style="--accent: #f59e0b;">
|
||||
<svg class="work-pattern" viewBox="0 0 400 200" aria-hidden="true">
|
||||
<circle cx="100" cy="100" r="80" fill="none" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
||||
<circle cx="300" cy="100" r="80" fill="none" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
||||
<circle cx="200" cy="100" r="50" fill="currentColor" opacity="0.1"/>
|
||||
<line x1="50" y1="100" x2="350" y2="100" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||||
</svg>
|
||||
<div class="work-mockup mockup-ecom">
|
||||
<div class="ecom-grid">
|
||||
<div class="ecom-product"></div>
|
||||
<div class="ecom-product"></div>
|
||||
<div class="ecom-product"></div>
|
||||
<div class="ecom-product"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-info">
|
||||
<span class="work-category">חנות אונליין</span>
|
||||
<h3 class="work-title">לוקס ליבינג</h3>
|
||||
<p class="work-desc">פלטפורמת מסחר אלקטרוני לריהוט יוקרה עם חוויית קנייה פרימיום ומערכת התאמה אישית.</p>
|
||||
<div class="work-tags">
|
||||
<span>E-commerce</span>
|
||||
<span>UX</span>
|
||||
<span>התאמה אישית</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card reveal">
|
||||
<div class="work-card-inner">
|
||||
<div class="work-visual">
|
||||
<div class="work-visual-bg" style="--accent: #8b5cf6;">
|
||||
<svg class="work-pattern" viewBox="0 0 200 200" aria-hidden="true">
|
||||
<polygon points="100,20 180,180 20,180" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||||
<polygon points="100,50 150,150 50,150" fill="currentColor" opacity="0.1"/>
|
||||
<circle cx="100" cy="110" r="20" fill="currentColor" opacity="0.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-info">
|
||||
<span class="work-category">מיתוג דיגיטלי</span>
|
||||
<h3 class="work-title">ספייס קריאייטיב</h3>
|
||||
<p class="work-desc">זהות מותג מלאה לסטודיו עיצוב עם נוכחות דיגיטלית מרשימה.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card reveal">
|
||||
<div class="work-card-inner">
|
||||
<div class="work-visual">
|
||||
<div class="work-visual-bg" style="--accent: #06b6d4;">
|
||||
<svg class="work-pattern" viewBox="0 0 200 200" aria-hidden="true">
|
||||
<path d="M20 100 C20 50, 80 20, 100 20 S180 50, 180 100 S120 180, 100 180 S20 150, 20 100" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="60" cy="80" r="15" fill="currentColor" opacity="0.2"/>
|
||||
<circle cx="140" cy="80" r="15" fill="currentColor" opacity="0.2"/>
|
||||
<circle cx="100" cy="130" r="20" fill="currentColor" opacity="0.15"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="work-info">
|
||||
<span class="work-category">אתר תוכן</span>
|
||||
<h3 class="work-title">אינסייט מגזין</h3>
|
||||
<p class="work-desc">פלטפורמת תוכן דיגיטלית עם עיצוב עריכתי ייחודי וטיפוגרפיה מדויקת.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats-section" aria-label="נתונים ומספרים">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat stat-featured reveal">
|
||||
<span class="stat-number" data-count="150">0</span>
|
||||
<span class="stat-plus">+</span>
|
||||
<span class="stat-label">פרויקטים הושלמו</span>
|
||||
</div>
|
||||
<div class="stat reveal">
|
||||
<span class="stat-number" data-count="98">0</span>
|
||||
<span class="stat-suffix">%</span>
|
||||
<span class="stat-label">שביעות רצון לקוחות</span>
|
||||
</div>
|
||||
<div class="stat reveal">
|
||||
<span class="stat-number" data-count="5">0</span>
|
||||
<span class="stat-suffix">+</span>
|
||||
<span class="stat-label">שנות ניסיון</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="services-section">
|
||||
<div class="container">
|
||||
<div class="section-header reveal">
|
||||
<span class="section-tag">מה אנחנו עושים</span>
|
||||
<h2 class="section-title">השירותים שלנו</h2>
|
||||
</div>
|
||||
|
||||
<div class="services-grid">
|
||||
<div class="service-card reveal">
|
||||
<div class="service-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48" fill="none">
|
||||
<rect x="6" y="6" width="36" height="36" rx="4" stroke="currentColor" stroke-width="2"/>
|
||||
<rect x="12" y="12" width="10" height="10" fill="currentColor" opacity="0.3"/>
|
||||
<rect x="26" y="12" width="10" height="6" fill="currentColor" opacity="0.3"/>
|
||||
<rect x="12" y="26" width="24" height="8" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-title">עיצוב אתרים</h3>
|
||||
<p class="service-desc">עיצוב ממשק משתמש ייחודי ומותאם אישית, עם דגש על חוויית משתמש מושלמת ואסתטיקה מרשימה.</p>
|
||||
<ul class="service-list">
|
||||
<li>עיצוב UI/UX</li>
|
||||
<li>עיצוב רספונסיבי</li>
|
||||
<li>פרוטוטייפים אינטראקטיביים</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="service-card service-card-featured reveal">
|
||||
<div class="service-badge">הכי מבוקש</div>
|
||||
<div class="service-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48" fill="none">
|
||||
<path d="M8 14L24 6L40 14V34L24 42L8 34V14Z" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M24 6V42" stroke="currentColor" stroke-width="2" opacity="0.5"/>
|
||||
<path d="M8 14L24 22L40 14" stroke="currentColor" stroke-width="2" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-title">פיתוח מתקדם</h3>
|
||||
<p class="service-desc">פיתוח front-end ו-back-end בטכנולוגיות החדשניות ביותר, עם ביצועים מעולים ואבטחה מקסימלית.</p>
|
||||
<ul class="service-list">
|
||||
<li>פיתוח Full-Stack</li>
|
||||
<li>אופטימיזציה לביצועים</li>
|
||||
<li>אינטגרציות API</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="service-card reveal">
|
||||
<div class="service-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48" fill="none">
|
||||
<circle cx="24" cy="24" r="18" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="24" cy="24" r="8" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="24" cy="6" r="3" fill="currentColor"/>
|
||||
<circle cx="42" cy="24" r="3" fill="currentColor"/>
|
||||
<circle cx="24" cy="42" r="3" fill="currentColor"/>
|
||||
<circle cx="6" cy="24" r="3" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-title">בינה מלאכותית</h3>
|
||||
<p class="service-desc">שילוב יכולות AI מתקדמות באתר — מצ׳אטבוטים חכמים ועד המלצות מותאמות אישית.</p>
|
||||
<ul class="service-list">
|
||||
<li>צ׳אטבוטים AI</li>
|
||||
<li>אוטומציה חכמה</li>
|
||||
<li>ניתוח נתונים</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="service-card reveal">
|
||||
<div class="service-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48" fill="none">
|
||||
<rect x="4" y="8" width="40" height="28" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M4 16H44" stroke="currentColor" stroke-width="2"/>
|
||||
<rect x="8" y="12" width="2" height="2" fill="currentColor"/>
|
||||
<rect x="12" y="12" width="2" height="2" fill="currentColor"/>
|
||||
<rect x="16" y="12" width="2" height="2" fill="currentColor"/>
|
||||
<path d="M16 40L24 36L32 40" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-title">מיתוג דיגיטלי</h3>
|
||||
<p class="service-desc">בניית זהות מותג דיגיטלית שלמה — מלוגו ועד שפה עיצובית אחידה בכל הפלטפורמות.</p>
|
||||
<ul class="service-list">
|
||||
<li>עיצוב לוגו</li>
|
||||
<li>ספר מותג</li>
|
||||
<li>נכסים דיגיטליים</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<div class="section-header reveal">
|
||||
<span class="section-tag">איך אנחנו עובדים</span>
|
||||
<h2 class="section-title">התהליך שלנו</h2>
|
||||
</div>
|
||||
|
||||
<div class="process-timeline">
|
||||
<div class="process-line" aria-hidden="true"></div>
|
||||
|
||||
<div class="process-step reveal" data-delay="0">
|
||||
<div class="process-number" aria-hidden="true">01</div>
|
||||
<div class="process-content">
|
||||
<h3>גילוי והבנה</h3>
|
||||
<p>נפגשים, מקשיבים ומבינים לעומק את העסק, הקהל והיעדים שלכם. מחקר מתחרים וניתוח שוק.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-step reveal" data-delay="100">
|
||||
<div class="process-number" aria-hidden="true">02</div>
|
||||
<div class="process-content">
|
||||
<h3>אסטרטגיה ותכנון</h3>
|
||||
<p>מגדירים את מבנה האתר, חוויית המשתמש והפתרונות הטכנולוגיים המתאימים ביותר.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-step reveal" data-delay="200">
|
||||
<div class="process-number" aria-hidden="true">03</div>
|
||||
<div class="process-content">
|
||||
<h3>עיצוב ויצירה</h3>
|
||||
<p>מעצבים ממשק ייחודי שמשלב אסתטיקה מרהיבה עם חוויית משתמש אינטואיטיבית.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-step reveal" data-delay="300">
|
||||
<div class="process-number" aria-hidden="true">04</div>
|
||||
<div class="process-content">
|
||||
<h3>פיתוח והטמעה</h3>
|
||||
<p>מפתחים את האתר בקוד נקי ויעיל, עם בדיקות קפדניות ואופטימיזציה לביצועים.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-step reveal" data-delay="400">
|
||||
<div class="process-number" aria-hidden="true">05</div>
|
||||
<div class="process-content">
|
||||
<h3>השקה וליווי</h3>
|
||||
<p>משיקים את האתר ומלווים אתכם בצמיחה עם תמיכה שוטפת ועדכונים מתמשכים.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about-section">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-visual reveal" aria-hidden="true">
|
||||
<div class="about-shape">
|
||||
<svg viewBox="0 0 400 400" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="about-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#6366f1"/>
|
||||
<stop offset="50%" stop-color="#ec4899"/>
|
||||
<stop offset="100%" stop-color="#f59e0b"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="200" cy="200" r="150" stroke="url(#about-grad)" stroke-width="2" fill="none" class="rotate-slow"/>
|
||||
<circle cx="200" cy="200" r="100" stroke="url(#about-grad)" stroke-width="1" fill="none" opacity="0.5" class="rotate-slow-reverse"/>
|
||||
<circle cx="200" cy="200" r="50" fill="url(#about-grad)" opacity="0.2"/>
|
||||
<text x="200" y="210" text-anchor="middle" font-size="40" fill="url(#about-grad)" font-weight="bold">AI</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<span class="section-tag reveal">אודות אימייליון</span>
|
||||
<h2 class="section-title reveal">אנחנו לא סתם בונים אתרים</h2>
|
||||
<p class="about-text reveal">
|
||||
אנחנו יוצרים חוויות דיגיטליות שמחברות בין מותגים לאנשים. בעידן שבו כולם נראים אותו דבר, אנחנו מאמינים שלכל עסק מגיע נוכחות דיגיטלית ייחודית ובלתי נשכחת.
|
||||
</p>
|
||||
<p class="about-text reveal">
|
||||
השילוב שלנו בין עיצוב קריאייטיבי לטכנולוגיות AI מתקדמות מאפשר לנו ליצור אתרים שלא רק נראים מדהים — אלא גם עובדים בצורה חכמה יותר, ממירים טוב יותר ומספקים חוויה אישית לכל משתמש.
|
||||
</p>
|
||||
<div class="about-features reveal">
|
||||
<div class="about-feature">
|
||||
<span class="feature-icon" aria-hidden="true">✦</span>
|
||||
<span>חדשנות טכנולוגית</span>
|
||||
</div>
|
||||
<div class="about-feature">
|
||||
<span class="feature-icon" aria-hidden="true">✦</span>
|
||||
<span>עיצוב ללא פשרות</span>
|
||||
</div>
|
||||
<div class="about-feature">
|
||||
<span class="feature-icon" aria-hidden="true">✦</span>
|
||||
<span>תוצאות מוכחות</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact-section">
|
||||
<div class="container">
|
||||
<div class="contact-wrapper">
|
||||
<div class="contact-info reveal">
|
||||
<span class="section-tag">בואו נדבר</span>
|
||||
<h2 class="section-title">יש לכם פרויקט בראש?</h2>
|
||||
<p class="contact-text">אנחנו תמיד שמחים לשמוע על רעיונות חדשים ולעזור לעסקים להגשים את החזון הדיגיטלי שלהם. ספרו לנו על הפרויקט שלכם.</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<div class="contact-detail">
|
||||
<span class="contact-detail-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="4" width="20" height="16" rx="2"/>
|
||||
<path d="M22 6L12 13L2 6"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>צרו קשר דרך הטופס</span>
|
||||
</div>
|
||||
<div class="contact-detail">
|
||||
<span class="contact-detail-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M12 6v6l4 2"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>זמן תגובה: עד 24 שעות</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-cta">
|
||||
<div class="contact-cta-text">מוכנים להתחיל?</div>
|
||||
<div class="contact-cta-sub">השאירו פרטים ונחזור אליכם במהירות</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contact-form reveal" id="contactForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="name">שם מלא <span class="required">*</span></label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name">
|
||||
<span class="form-line" aria-hidden="true"></span>
|
||||
<span class="form-error" aria-live="polite"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">אימייל <span class="required">*</span></label>
|
||||
<input type="email" id="email" name="email" required autocomplete="email">
|
||||
<span class="form-line" aria-hidden="true"></span>
|
||||
<span class="form-error" aria-live="polite"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">טלפון</label>
|
||||
<input type="tel" id="phone" name="phone" autocomplete="tel">
|
||||
<span class="form-line" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="project">ספרו לנו על הפרויקט <span class="required">*</span></label>
|
||||
<textarea id="project" name="project" rows="4" required></textarea>
|
||||
<span class="form-line" aria-hidden="true"></span>
|
||||
<span class="form-error" aria-live="polite"></span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-full">
|
||||
<span>שלחו הודעה</span>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-bg" aria-hidden="true">
|
||||
<div class="gradient-orb orb-contact-1"></div>
|
||||
<div class="gradient-orb orb-contact-2"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-main">
|
||||
<div class="footer-brand">
|
||||
<a href="#" class="logo" aria-label="אימייליון - דף הבית">
|
||||
<span class="logo-icon">
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<rect width="40" height="40" rx="10" fill="url(#footer-logo-grad)"/>
|
||||
<path d="M12 28L20 12L28 28" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="20" cy="22" r="3" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="footer-logo-grad" x1="0" y1="0" x2="40" y2="40">
|
||||
<stop stop-color="#6366f1"/>
|
||||
<stop offset="1" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="logo-text">אימייליון</span>
|
||||
</a>
|
||||
<p class="footer-tagline">בניית אתרים מעוצבים בטכנולוגיית AI</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="#work">עבודות</a>
|
||||
<a href="#services">שירותים</a>
|
||||
<a href="#about">אודות</a>
|
||||
<a href="#contact">צור קשר</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 אימייליון. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,209 @@
|
||||
// Custom Cursor
|
||||
const cursor = document.querySelector('.cursor');
|
||||
const cursorFollower = document.querySelector('.cursor-follower');
|
||||
|
||||
if (cursor && cursorFollower) {
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let followerX = 0;
|
||||
let followerY = 0;
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
cursor.style.left = mouseX + 'px';
|
||||
cursor.style.top = mouseY + 'px';
|
||||
});
|
||||
|
||||
function animateFollower() {
|
||||
followerX += (mouseX - followerX) * 0.15;
|
||||
followerY += (mouseY - followerY) * 0.15;
|
||||
cursorFollower.style.left = followerX + 'px';
|
||||
cursorFollower.style.top = followerY + 'px';
|
||||
requestAnimationFrame(animateFollower);
|
||||
}
|
||||
animateFollower();
|
||||
|
||||
const hoverElements = document.querySelectorAll('a, button, .work-card');
|
||||
hoverElements.forEach(el => {
|
||||
el.addEventListener('mouseenter', () => {
|
||||
cursor.classList.add('hover');
|
||||
cursorFollower.classList.add('hover');
|
||||
});
|
||||
el.addEventListener('mouseleave', () => {
|
||||
cursor.classList.remove('hover');
|
||||
cursorFollower.classList.remove('hover');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Navigation
|
||||
const nav = document.querySelector('.nav');
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const mobileMenu = document.querySelector('.mobile-menu');
|
||||
const mobileLinks = document.querySelectorAll('.mobile-link');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
nav.classList.add('scrolled');
|
||||
} else {
|
||||
nav.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
menuToggle.classList.toggle('active');
|
||||
mobileMenu.classList.toggle('active');
|
||||
document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
|
||||
});
|
||||
|
||||
mobileLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
menuToggle.classList.remove('active');
|
||||
mobileMenu.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Reveal on Scroll
|
||||
const reveals = document.querySelectorAll('.reveal');
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add('visible');
|
||||
}, index * 100);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
reveals.forEach(reveal => {
|
||||
revealObserver.observe(reveal);
|
||||
});
|
||||
|
||||
// Stats Counter
|
||||
const stats = document.querySelectorAll('.stat-number');
|
||||
let statsAnimated = false;
|
||||
|
||||
const statsObserver = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !statsAnimated) {
|
||||
statsAnimated = true;
|
||||
stats.forEach(stat => {
|
||||
const target = parseInt(stat.dataset.count);
|
||||
let current = 0;
|
||||
const duration = 2000;
|
||||
const increment = target / (duration / 16);
|
||||
|
||||
const counter = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= target) {
|
||||
stat.textContent = target;
|
||||
clearInterval(counter);
|
||||
} else {
|
||||
stat.textContent = Math.floor(current);
|
||||
}
|
||||
}, 16);
|
||||
});
|
||||
}
|
||||
}, { threshold: 0.5 });
|
||||
|
||||
const statsSection = document.querySelector('.stats-section');
|
||||
if (statsSection) {
|
||||
statsObserver.observe(statsSection);
|
||||
}
|
||||
|
||||
// Form Handling
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const btn = contactForm.querySelector('button[type="submit"]');
|
||||
const originalText = btn.innerHTML;
|
||||
|
||||
btn.innerHTML = '<span>שולח...</span>';
|
||||
btn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = '<span>נשלח בהצלחה! ✓</span>';
|
||||
btn.style.background = 'var(--color-success)';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalText;
|
||||
btn.style.background = '';
|
||||
btn.disabled = false;
|
||||
contactForm.reset();
|
||||
}, 3000);
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth Scroll for Navigation Links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
const navHeight = nav.offsetHeight;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Parallax effect on hero orbs
|
||||
const orbs = document.querySelectorAll('.gradient-orb');
|
||||
|
||||
if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
orbs.forEach((orb, index) => {
|
||||
const speed = (index + 1) * 0.1;
|
||||
orb.style.transform = `translateY(${scrollY * speed}px)`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Work card hover effect
|
||||
const workCards = document.querySelectorAll('.work-card');
|
||||
|
||||
workCards.forEach(card => {
|
||||
card.addEventListener('mousemove', (e) => {
|
||||
if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
const rotateX = (y - centerY) / 20;
|
||||
const rotateY = (centerX - x) / 20;
|
||||
|
||||
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
|
||||
}
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Marquee pause on hover
|
||||
const marquee = document.querySelector('.marquee');
|
||||
|
||||
if (marquee) {
|
||||
marquee.addEventListener('mouseenter', () => {
|
||||
marquee.querySelector('.marquee-track').style.animationPlayState = 'paused';
|
||||
});
|
||||
|
||||
marquee.addEventListener('mouseleave', () => {
|
||||
marquee.querySelector('.marquee-track').style.animationPlayState = 'running';
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user