393 lines
20 KiB
HTML
393 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="he" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>בניית אתרים עם AI | אימייליון</title>
|
|
<meta name="description" content="אימייליון - סטודיו לבניית אתרים מעוצבים עם בינה מלאכותית. עיצוב ייחודי, חוויות דיגיטליות מרהיבות.">
|
|
<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'><circle cx='50' cy='50' r='45' fill='%236C5CE7'/><circle cx='50' cy='50' r='20' fill='%2300F5D4'/></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;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-glow" aria-hidden="true"></div>
|
|
|
|
<header class="site-header">
|
|
<nav class="nav" aria-label="ניווט ראשי">
|
|
<a href="#" class="logo">
|
|
<svg class="logo-mark" viewBox="0 0 50 50" aria-hidden="true">
|
|
<circle cx="25" cy="25" r="22" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="25" cy="25" r="8" fill="currentColor"/>
|
|
</svg>
|
|
<span class="logo-text">אימייליון</span>
|
|
</a>
|
|
<ul class="nav-links" id="nav-links">
|
|
<li><a href="#work">עבודות</a></li>
|
|
<li><a href="#services">שירותים</a></li>
|
|
<li><a href="#about">אודות</a></li>
|
|
<li><a href="#contact" class="nav-cta">בואו נדבר</a></li>
|
|
</ul>
|
|
<button class="nav-toggle" aria-label="פתיחת תפריט ניווט" aria-expanded="false" aria-controls="nav-links">
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<div class="hero-content">
|
|
<div class="hero-badge reveal">
|
|
<span class="badge-dot" aria-hidden="true"></span>
|
|
סטודיו דיגיטלי
|
|
</div>
|
|
<h1 id="hero-title" class="hero-title">
|
|
<span class="reveal">בונים חוויות</span>
|
|
<span class="hero-highlight reveal">
|
|
<span class="highlight-text">דיגיטליות</span>
|
|
<svg class="highlight-wave" viewBox="0 0 200 20" preserveAspectRatio="none" aria-hidden="true">
|
|
<path d="M0,10 Q50,0 100,10 T200,10" fill="none" stroke="currentColor" stroke-width="3"/>
|
|
</svg>
|
|
</span>
|
|
<span class="reveal">מונעות AI</span>
|
|
</h1>
|
|
<p class="hero-sub reveal">
|
|
אנחנו משלבים עיצוב קריאטיבי עם טכנולוגיית בינה מלאכותית ליצירת אתרים שלא רק נראים מדהים — אלא גם עובדים חכם.
|
|
</p>
|
|
<div class="hero-actions reveal">
|
|
<a href="#work" class="btn btn-primary">
|
|
<span>צפו בעבודות</span>
|
|
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M5 12H19M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#contact" class="btn btn-ghost">צרו קשר</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual" aria-hidden="true">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
<div class="grid-bg"></div>
|
|
</div>
|
|
<div class="scroll-hint reveal" aria-hidden="true">
|
|
<span>גללו למטה</span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 5v14M19 12l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="marquee-section" aria-hidden="true">
|
|
<div class="marquee">
|
|
<div class="marquee-content">
|
|
<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" aria-labelledby="work-title">
|
|
<header class="section-header">
|
|
<span class="section-label reveal">תיק עבודות</span>
|
|
<h2 id="work-title" class="section-title reveal">פרויקטים נבחרים</h2>
|
|
</header>
|
|
|
|
<div class="work-grid">
|
|
<article class="work-card work-card-featured reveal" tabindex="0">
|
|
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"></div>
|
|
<div class="work-card-content">
|
|
<span class="work-category">חנות אונליין</span>
|
|
<h3 class="work-title"><span lang="en">LUXE</span> — אופנה פרימיום</h3>
|
|
<p class="work-desc">חנות דיגיטלית עם המלצות מוצרים מבוססות AI והתאמה אישית לכל לקוח</p>
|
|
</div>
|
|
<div class="work-card-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 300 200">
|
|
<rect x="20" y="20" width="120" height="160" rx="8" fill="rgba(255,255,255,0.1)"/>
|
|
<rect x="160" y="20" width="120" height="75" rx="8" fill="rgba(255,255,255,0.15)"/>
|
|
<rect x="160" y="105" width="120" height="75" rx="8" fill="rgba(255,255,255,0.08)"/>
|
|
<circle cx="80" cy="60" r="25" fill="rgba(255,255,255,0.2)"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="work-card reveal" tabindex="0">
|
|
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #2d3436 0%, #636e72 100%)"></div>
|
|
<div class="work-card-content">
|
|
<span class="work-category">אתר תדמית</span>
|
|
<h3 class="work-title">פיננסיה — פינטק</h3>
|
|
<p class="work-desc">עמוד נחיתה דינמי עם ויזואליזציה של נתונים בזמן אמת</p>
|
|
</div>
|
|
<div class="work-card-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 200 150">
|
|
<path d="M20,120 Q60,80 100,90 T180,60" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="3"/>
|
|
<circle cx="100" cy="90" r="8" fill="rgba(255,255,255,0.5)"/>
|
|
<circle cx="180" cy="60" r="8" fill="rgba(255,255,255,0.5)"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="work-card reveal" tabindex="0">
|
|
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%)"></div>
|
|
<div class="work-card-content">
|
|
<span class="work-category">פלטפורמה</span>
|
|
<h3 class="work-title"><span lang="en">DataFlow</span> — אנליטיקס</h3>
|
|
<p class="work-desc">דשבורד ניהול עם תחזיות מבוססות למידת מכונה</p>
|
|
</div>
|
|
<div class="work-card-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 200 150">
|
|
<rect x="20" y="30" width="50" height="80" rx="4" fill="rgba(255,255,255,0.15)"/>
|
|
<rect x="80" y="50" width="50" height="60" rx="4" fill="rgba(255,255,255,0.2)"/>
|
|
<rect x="140" y="20" width="50" height="90" rx="4" fill="rgba(255,255,255,0.25)"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="work-card work-card-wide reveal" tabindex="0">
|
|
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #d63031 0%, #e17055 100%)"></div>
|
|
<div class="work-card-content">
|
|
<span class="work-category">מיתוג דיגיטלי</span>
|
|
<h3 class="work-title">טעמים — רשת מסעדות</h3>
|
|
<p class="work-desc">זהות דיגיטלית מלאה כולל אפליקציית הזמנות עם צ׳אטבוט חכם</p>
|
|
</div>
|
|
<div class="work-card-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 400 150">
|
|
<circle cx="80" cy="75" r="40" fill="rgba(255,255,255,0.15)"/>
|
|
<circle cx="200" cy="75" r="50" fill="rgba(255,255,255,0.1)"/>
|
|
<circle cx="320" cy="75" r="35" fill="rgba(255,255,255,0.2)"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="work-card reveal" tabindex="0">
|
|
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #00b894 0%, #55efc4 100%)"></div>
|
|
<div class="work-card-content">
|
|
<span class="work-category">אתר קטלוג</span>
|
|
<h3 class="work-title">אומנות ישראלית</h3>
|
|
<p class="work-desc">גלריה אינטראקטיבית עם חיפוש חכם וניווט ויזואלי</p>
|
|
</div>
|
|
<div class="work-card-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 200 150">
|
|
<rect x="30" y="30" width="60" height="90" rx="4" fill="rgba(0,0,0,0.15)"/>
|
|
<rect x="110" y="40" width="60" height="70" rx="4" fill="rgba(0,0,0,0.2)"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="work-card reveal" tabindex="0">
|
|
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #6C5CE7 0%, #a29bfe 100%)"></div>
|
|
<div class="work-card-content">
|
|
<span class="work-category">אתר תוכן</span>
|
|
<h3 class="work-title"><span lang="en">TechPulse</span> — מגזין</h3>
|
|
<p class="work-desc">פלטפורמת תוכן עם המלצות קריאה מותאמות אישית</p>
|
|
</div>
|
|
<div class="work-card-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 200 150">
|
|
<rect x="20" y="20" width="160" height="20" rx="4" fill="rgba(255,255,255,0.2)"/>
|
|
<rect x="20" y="50" width="120" height="10" rx="2" fill="rgba(255,255,255,0.15)"/>
|
|
<rect x="20" y="70" width="140" height="10" rx="2" fill="rgba(255,255,255,0.15)"/>
|
|
<rect x="20" y="90" width="100" height="10" rx="2" fill="rgba(255,255,255,0.15)"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="services" class="services-section" aria-labelledby="services-title">
|
|
<div class="services-bg" aria-hidden="true">
|
|
<div class="service-orb"></div>
|
|
</div>
|
|
<header class="section-header">
|
|
<span class="section-label reveal">מה אנחנו עושים</span>
|
|
<h2 id="services-title" class="section-title reveal">שירותים</h2>
|
|
</header>
|
|
|
|
<div class="services-list">
|
|
<article class="service-item reveal">
|
|
<div class="service-number" aria-hidden="true">01</div>
|
|
<div class="service-content">
|
|
<h3 class="service-title">עיצוב ופיתוח אתרים</h3>
|
|
<p class="service-desc">
|
|
אתרים מעוצבים בקפידה עם קוד נקי, ביצועים גבוהים וחוויית משתמש מושלמת. כל פיקסל במקום.
|
|
</p>
|
|
</div>
|
|
<div class="service-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 100 100">
|
|
<rect x="10" y="10" width="80" height="80" rx="8" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="10" y1="30" x2="90" y2="30" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="25" cy="20" r="4" fill="currentColor"/>
|
|
<circle cx="40" cy="20" r="4" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="service-item service-item-highlight reveal">
|
|
<div class="service-number" aria-hidden="true">02</div>
|
|
<div class="service-content">
|
|
<h3 class="service-title">חנויות אונליין</h3>
|
|
<p class="service-desc">
|
|
פתרונות eCommerce מתקדמים עם אינטגרציית AI להמלצות מוצרים, התאמה אישית וייעול המרות.
|
|
</p>
|
|
</div>
|
|
<div class="service-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 100 100">
|
|
<path d="M20,30 L30,30 L40,70 L80,70 L85,40 L35,40" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="45" cy="82" r="6" fill="currentColor"/>
|
|
<circle cx="72" cy="82" r="6" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="service-item reveal">
|
|
<div class="service-number" aria-hidden="true">03</div>
|
|
<div class="service-content">
|
|
<h3 class="service-title">מיתוג דיגיטלי</h3>
|
|
<p class="service-desc">
|
|
בניית זהות מותגית שלמה לעולם הדיגיטלי — מלוגו ועד שפה עיצובית אחידה בכל נקודות המגע.
|
|
</p>
|
|
</div>
|
|
<div class="service-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="35" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="50" cy="50" r="5" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="service-item reveal">
|
|
<div class="service-number" aria-hidden="true">04</div>
|
|
<div class="service-content">
|
|
<h3 class="service-title">פתרונות AI מותאמים</h3>
|
|
<p class="service-desc">
|
|
צ׳אטבוטים חכמים, ניתוח התנהגות משתמשים, אוטומציה של תוכן וכלים מבוססי בינה מלאכותית.
|
|
</p>
|
|
</div>
|
|
<div class="service-visual" aria-hidden="true">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="35" r="15" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M30,90 L30,65 Q30,55 40,55 L60,55 Q70,55 70,65 L70,90" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="45" cy="32" r="3" fill="currentColor"/>
|
|
<circle cx="55" cy="32" r="3" fill="currentColor"/>
|
|
<path d="M42,40 Q50,46 58,40" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="about-section" aria-labelledby="about-title">
|
|
<div class="about-grid">
|
|
<div class="about-content reveal">
|
|
<span class="section-label">מי אנחנו</span>
|
|
<h2 id="about-title" class="about-title">סטודיו שמאמין<br>בכוח של עיצוב</h2>
|
|
<p class="about-text">
|
|
אימייליון הוקמה מתוך אמונה שעיצוב דיגיטלי צריך להיות יותר מיפה — הוא צריך לעבוד. אנחנו משלבים חשיבה אסטרטגית, עיצוב פורץ דרך וטכנולוגיית AI מתקדמת כדי ליצור חוויות שמניעות תוצאות.
|
|
</p>
|
|
<p class="about-text">
|
|
הצוות שלנו מורכב ממעצבים, מפתחים ומומחי AI שעובדים יחד כדי להפוך כל פרויקט למשהו ייחודי ובלתי נשכח.
|
|
</p>
|
|
</div>
|
|
<div class="about-visual reveal" aria-hidden="true">
|
|
<div class="visual-grid">
|
|
<div class="visual-cell"></div>
|
|
<div class="visual-cell"></div>
|
|
<div class="visual-cell"></div>
|
|
<div class="visual-cell"></div>
|
|
<div class="visual-cell accent"></div>
|
|
<div class="visual-cell"></div>
|
|
<div class="visual-cell"></div>
|
|
<div class="visual-cell"></div>
|
|
<div class="visual-cell"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact-section" aria-labelledby="contact-title">
|
|
<div class="contact-bg" aria-hidden="true">
|
|
<div class="contact-gradient"></div>
|
|
</div>
|
|
<div class="contact-content">
|
|
<header class="section-header">
|
|
<span class="section-label reveal">יצירת קשר</span>
|
|
<h2 id="contact-title" class="contact-title reveal">יש לכם פרויקט?<br>בואו נדבר</h2>
|
|
</header>
|
|
|
|
<form class="contact-form reveal" action="#" method="POST" novalidate>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="name" class="form-label">שם מלא</label>
|
|
<input type="text" id="name" name="name" class="form-input" autocomplete="name" placeholder=" " required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email" class="form-label">אימייל</label>
|
|
<input type="email" id="email" name="email" class="form-input" autocomplete="email" placeholder=" " required>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="project" class="form-label">ספרו לנו על הפרויקט</label>
|
|
<textarea id="project" name="project" class="form-input form-textarea" rows="4" placeholder=" "></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-large">
|
|
<span>שליחת הודעה</span>
|
|
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M5 12H19M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<a href="#" class="logo">
|
|
<svg class="logo-mark" viewBox="0 0 50 50" aria-hidden="true">
|
|
<circle cx="25" cy="25" r="22" fill="none" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="25" cy="25" r="8" fill="currentColor"/>
|
|
</svg>
|
|
<span class="logo-text">אימייליון</span>
|
|
</a>
|
|
<p class="footer-tagline">בונים חוויות דיגיטליות עם AI</p>
|
|
</div>
|
|
<nav class="footer-nav" aria-label="ניווט תחתון">
|
|
<a href="#work">עבודות</a>
|
|
<a href="#services">שירותים</a>
|
|
<a href="#about">אודות</a>
|
|
<a href="#contact">צור קשר</a>
|
|
</nav>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2024 אימייליון — בניית אתרים עם AI. כל הזכויות שמורות.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |