641 lines
31 KiB
HTML
641 lines
31 KiB
HTML
<!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> |