AI update: שדרוג ויזואלי מקיף לאתר עמוס רוזמרין - מהנדס אריזה:

## 1. תמונות אמיתיות (הוסף מ-Unsplash/Pexels CDN):

### Hero Sectio
This commit is contained in:
2026-10-11 16:57:28 +00:00
parent f3497f0671
commit c12e1c5dbd
8 changed files with 787 additions and 1177 deletions
+36 -103
View File
@@ -14,9 +14,7 @@
<body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<div class="particles-container" aria-hidden="true">
<div class="particle"></div>
<div class="particle"></div>
<div class="particles-bg" aria-hidden="true">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
@@ -54,11 +52,8 @@
<main id="main-content">
<section class="page-hero">
<div class="container">
<span class="section-tag reveal-fade">
<span class="tag-icon">◈</span>
אודות
</span>
<h1 class="page-title reveal-fade gradient-text">הסיפור שלי</h1>
<span class="section-tag reveal-fade">אודות</span>
<h1 class="page-title gradient-text reveal-fade">הסיפור שלי</h1>
<p class="page-subtitle reveal-fade">למעלה מ-18 שנות ניסיון בפיתוח פתרונות אריזה לתעשייה הישראלית</p>
</div>
</section>
@@ -68,37 +63,22 @@
<div class="about-grid">
<div class="about-story">
<div class="about-profile-section reveal-fade">
<div class="profile-image-wrapper">
<img
src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80"
alt="תמונת פרופיל מקצועית"
class="profile-image"
loading="lazy"
>
<div class="profile-decoration"></div>
</div>
<div class="profile-info">
<h2 class="gradient-text">עמוס רוזמרין</h2>
<p class="profile-title">מהנדס ייצור | מומחה אריזות</p>
<div class="profile-badges">
<span class="profile-badge">???? 18+ שנות ניסיון</span>
<span class="profile-badge">???? מומחה אריזה גמישה</span>
<span class="profile-badge">???? שותפויות בינלאומיות</span>
<div class="profile-image-large">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=600&q=80" alt="עמוס רוזמרין - מהנדס אריזה" loading="lazy">
<div class="profile-overlay"></div>
</div>
</div>
</div>
<div class="story-block reveal-fade">
<h3>מהנדס ייצור עצמאי מאז 2006</h3>
<h2>מהנדס ייצור עצמאי מאז 2006</h2>
<p>שמי עמוס רוזמרין, ואני מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות, ההיגיינה, הקוסמטיקה וחומרי הניקוי.</p>
</div>
<div class="story-block reveal-fade">
<h3>הגישה שלי</h3>
<h2>הגישה שלי</h2>
<p>המשימה שלי היא להבטיח אריזה אמינה, יעילה וחסכונית — המשמרת את איכות המוצר, עומדת בתקנים ומותאמת לקו הייצור שלכם.</p>
<p>אני פועל בשקיפות, דיוק ושירות אישי, עם דגש על איכות תהליך, צמצום תקלות וקיצור זמני הגעה לשוק.</p>
</div>
<div class="story-block reveal-fade">
<h3>שיתוף פעולה בינלאומי</h3>
<h2>שיתוף פעולה בינלאומי</h2>
<p>במהלך השנים פיתחתי שיתופי פעולה הדוקים עם יצרנים טורקיים מובילים, המאפשרים לי להציע מחירים תחרותיים ואיכות גבוהה ללקוחותיי בישראל.</p>
</div>
</div>
@@ -135,12 +115,13 @@
<div class="value-card reveal-slide">
<div class="value-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="24" cy="24" r="20"/>
<path d="M16 24l6 6 10-12"/>
<path d="M12 24c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12"/>
<path d="M24 36v8M20 40h8"/>
<path d="M24 4v4"/>
</svg>
</div>
<h3>מקצועיות</h3>
<p>ידע טכני מעמיק וניסיון רב שנים בתעשייה</p>
<h3>חדשנות</h3>
<p>מעקב אחר טכנולוגיות מתקדמות והטמעתן לטובת הלקוחות</p>
</div>
</aside>
</div>
@@ -149,12 +130,12 @@
<section class="cta-section" aria-labelledby="about-cta-heading">
<div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></div>
<div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb secondary"></div>
</div>
<div class="container">
<div class="cta-content reveal-fade">
<h2 id="about-cta-heading" class="cta-title gradient-text">בואו נדבר על הפרויקט שלכם</h2>
<h2 id="about-cta-heading" class="cta-title">בואו נדבר על הפרויקט שלכם</h2>
<p class="cta-desc">אשמח לשמוע על הצרכים שלכם ולהציע פתרון אריזה מותאם</p>
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div>
@@ -163,7 +144,6 @@
</main>
<footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
@@ -199,81 +179,34 @@
<script src="script.js"></script>
<style>
.about-profile-section {
display: flex;
gap: var(--space-lg);
align-items: center;
margin-block-end: var(--space-xl);
padding: var(--space-lg);
background: var(--color-glass);
backdrop-filter: blur(10px);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-xl);
}
.profile-image-wrapper {
.profile-image-large {
position: relative;
flex-shrink: 0;
width: 100%;
max-width: 400px;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.profile-image {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--color-accent);
box-shadow: var(--shadow-glow);
.profile-image-large img {
width: 100%;
height: auto;
display: block;
filter: grayscale(20%);
transition: filter var(--transition-medium);
}
.profile-decoration {
.profile-image-large:hover img {
filter: grayscale(0%);
}
.profile-overlay {
position: absolute;
inset: -10px;
border: 2px dashed var(--color-gold);
border-radius: 50%;
opacity: 0.5;
animation: spin 20s linear infinite;
}
.profile-info h2 {
font-size: 1.75rem;
font-weight: 600;
margin-block-end: var(--space-xs);
}
.profile-title {
color: var(--color-text-muted);
margin-block-end: var(--space-md);
}
.profile-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.profile-badge {
background: rgba(14, 165, 233, 0.15);
color: var(--color-accent);
padding: var(--space-xs) var(--space-sm);
border-radius: 50px;
font-size: 0.875rem;
}
.story-block h3 {
font-size: 1.25rem;
font-weight: 500;
margin-block-end: var(--space-sm);
color: var(--color-accent);
}
@media (max-width: 768px) {
.about-profile-section {
flex-direction: column;
text-align: center;
}
.profile-badges {
justify-content: center;
}
inset: 0;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
}
</style>
</body>
+33 -60
View File
@@ -14,7 +14,7 @@
<body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<div class="particles-container" aria-hidden="true">
<div class="particles-bg" aria-hidden="true">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
@@ -52,11 +52,8 @@
<main id="main-content">
<section class="page-hero">
<div class="container">
<span class="section-tag reveal-fade">
<span class="tag-icon">◈</span>
לקוחות
</span>
<h1 class="page-title reveal-fade gradient-text">לקוחות שסומכים עלינו</h1>
<span class="section-tag reveal-fade">לקוחות</span>
<h1 class="page-title gradient-text reveal-fade">לקוחות שסומכים עלינו</h1>
<p class="page-subtitle reveal-fade">שיתופי פעולה ארוכי טווח עם מותגים מובילים בתעשייה הישראלית</p>
</div>
</section>
@@ -64,82 +61,59 @@
<section class="clients-showcase" aria-labelledby="clients-list-heading">
<h2 id="clients-list-heading" class="visually-hidden">רשימת לקוחות</h2>
<div class="container">
<div class="clients-logos-grid reveal-fade">
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ב</span>
<div class="clients-logo-grid reveal-fade">
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ב</div>
<span class="logo-name">מאפיית ברמן</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ד</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ד</div>
<span class="logo-name">דגנית</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ח</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ח</div>
<span class="logo-name">חסלט</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">י</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">י</div>
<span class="logo-name">יבולי הכפר</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">א</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">א</div>
<span class="logo-name">אסיף</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ח</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ח</div>
<span class="logo-name">חטיפי העמק</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">פ</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">פ</div>
<span class="logo-name">פרג</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ש</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ש</div>
<span class="logo-name">שיבולים</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">מ</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">מ</div>
<span class="logo-name">מאיר בייגל</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ג</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ג</div>
<span class="logo-name">גילרו</span>
</div>
</div>
</div>
</div>
</section>
<section class="industries" aria-labelledby="industries-heading">
<div class="container">
<header class="section-header reveal-fade">
<span class="section-tag">
<span class="tag-icon">◈</span>
תעשיות
</span>
<span class="section-tag">תעשיות</span>
<h2 id="industries-heading" class="section-title gradient-text">אנחנו עובדים עם</h2>
</header>
<div class="industries-grid">
<div class="industry-card reveal-slide glass-card">
<div class="industry-card reveal-slide">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="24" cy="20" r="12"/>
<path d="M12 44c0-6.627 5.373-12 12-12s12 5.373 12 12"/>
@@ -147,7 +121,7 @@
</svg>
<span>תעשיית המזון</span>
</div>
<div class="industry-card reveal-slide glass-card">
<div class="industry-card reveal-slide">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<ellipse cx="24" cy="38" rx="16" ry="6"/>
<path d="M8 38V20c0-8 7.2-16 16-16s16 8 16 16v18"/>
@@ -155,7 +129,7 @@
</svg>
<span>חקלאות</span>
</div>
<div class="industry-card reveal-slide glass-card">
<div class="industry-card reveal-slide">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect x="12" y="8" width="24" height="36" rx="4"/>
<circle cx="24" cy="28" r="8"/>
@@ -163,7 +137,7 @@
</svg>
<span>קוסמטיקה</span>
</div>
<div class="industry-card reveal-slide glass-card">
<div class="industry-card reveal-slide">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect x="8" y="16" width="32" height="24" rx="4"/>
<path d="M16 16V12a8 8 0 1116 0v4"/>
@@ -171,7 +145,7 @@
</svg>
<span>חומרי ניקוי</span>
</div>
<div class="industry-card reveal-slide glass-card">
<div class="industry-card reveal-slide">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M8 40V16l16-8 16 8v24"/>
<rect x="18" y="28" width="12" height="12"/>
@@ -185,12 +159,12 @@
<section class="cta-section" aria-labelledby="clients-cta-heading">
<div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></div>
<div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb secondary"></div>
</div>
<div class="container">
<div class="cta-content reveal-fade">
<h2 id="clients-cta-heading" class="cta-title gradient-text">רוצים להצטרף לרשימת הלקוחות?</h2>
<h2 id="clients-cta-heading" class="cta-title">רוצים להצטרף לרשימת הלקוחות?</h2>
<p class="cta-desc">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם</p>
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div>
@@ -199,7 +173,6 @@
</main>
<footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
+8 -15
View File
@@ -14,7 +14,7 @@
<body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<div class="particles-container" aria-hidden="true">
<div class="particles-bg" aria-hidden="true">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
@@ -52,11 +52,8 @@
<main id="main-content">
<section class="page-hero">
<div class="container">
<span class="section-tag reveal-fade">
<span class="tag-icon">◈</span>
צור קשר
</span>
<h1 class="page-title reveal-fade gradient-text">בואו נדבר</h1>
<span class="section-tag reveal-fade">צור קשר</span>
<h1 class="page-title gradient-text reveal-fade">בואו נדבר</h1>
<p class="page-subtitle reveal-fade">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם</p>
</div>
</section>
@@ -68,7 +65,7 @@
<div class="contact-info reveal-fade">
<h3>פרטי התקשרות</h3>
<div class="contact-cards">
<a href="tel:054-818-1092" class="contact-card glass-card">
<a href="tel:054-818-1092" class="contact-card">
<div class="contact-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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"/>
@@ -79,7 +76,7 @@
<span class="contact-value">054-818-1092</span>
</div>
</a>
<a href="mailto:amos.rosemarin@gmail.com" class="contact-card glass-card">
<a href="mailto:amos.rosemarin@gmail.com" class="contact-card">
<div class="contact-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
@@ -91,7 +88,7 @@
<span class="contact-value" lang="en">amos.rosemarin@gmail.com</span>
</div>
</a>
<div class="contact-card glass-card">
<div class="contact-card">
<div class="contact-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
@@ -105,7 +102,7 @@
</div>
</div>
</div>
<div class="contact-form glass-card reveal-fade">
<div class="contact-form reveal-fade">
<h3>שלחו הודעה</h3>
<form action="#" method="POST" novalidate>
<div class="form-group">
@@ -137,10 +134,7 @@
<label for="message">הודעה <span aria-hidden="true">*</span></label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-large btn-glow">
<span>שליחה</span>
<span class="btn-ripple"></span>
</button>
<button type="submit" class="btn btn-primary btn-large btn-glow">שליחה</button>
</form>
</div>
</div>
@@ -149,7 +143,6 @@
</main>
<footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
+86 -158
View File
@@ -19,7 +19,7 @@
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<!-- Floating Particles Background -->
<div class="particles-container" aria-hidden="true">
<div class="particles-bg" aria-hidden="true">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
@@ -61,23 +61,18 @@
<main id="main-content">
<section class="hero">
<div class="hero-bg" aria-hidden="true">
<img
src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1920&q=80"
alt=""
class="hero-image"
loading="eager"
>
<img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1920&q=80" alt="" class="hero-bg-image" loading="eager">
<div class="hero-overlay"></div>
<div class="hero-gradient-mesh"></div>
</div>
<div class="hero-content">
<div class="hero-badge reveal-fade">
<span class="badge-icon">✦</span>
<span class="badge-pulse"></span>
מהנדס ייצור עצמאי מאז 2006
</div>
<h1 class="hero-title reveal-fade">
<span class="title-line typewriter">פתרונות אריזה גמישה</span>
<span class="highlight gradient-text">לתעשייה הישראלית</span>
<span class="title-line">פתרונות אריזה גמישה</span>
<span class="title-line highlight gradient-text">לתעשייה הישראלית</span>
</h1>
<p class="hero-subtitle reveal-fade">ידע טכני, ניסיון של למעלה מ-18 שנה ומומחיות באריזות גמישות — הכל מתכנס למוצר אחד מדויק עבורכם.</p>
<div class="hero-actions reveal-fade">
@@ -85,12 +80,11 @@
<span>בואו נדבר</span>
<span class="btn-ripple"></span>
</a>
<a href="products.html" class="btn btn-secondary btn-glass">לכל המוצרים</a>
<a href="products.html" class="btn btn-secondary">לכל המוצרים</a>
</div>
<div class="hero-stats reveal-fade">
<div class="stat">
<span class="stat-number" data-count="18">0</span>
<span class="stat-plus">+</span>
<span class="stat-number" data-count="18">0</span><span class="stat-plus">+</span>
<span class="stat-label">שנות ניסיון</span>
</div>
<div class="stat">
@@ -107,35 +101,26 @@
<div class="mouse">
<div class="wheel"></div>
</div>
<span>גלול למטה</span>
<span>גללו למטה</span>
</div>
</section>
<div class="wave-divider" aria-hidden="true">
<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="currentColor"/>
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="currentColor"/>
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,googletrans172.46-45.71,248.8-84.81V0Z" fill="currentColor"/>
<svg viewBox="0 0 1440 120" preserveAspectRatio="none">
<path d="M0,60 C360,120 720,0 1080,60 C1260,90 1380,90 1440,60 L1440,120 L0,120 Z" fill="var(--color-bg-deep)"/>
</svg>
</div>
<section class="expertise" aria-labelledby="expertise-heading">
<div class="container">
<header class="section-header reveal-fade">
<span class="section-tag">
<span class="tag-icon">◈</span>
תחומי התמחות
</span>
<span class="section-tag">תחומי התמחות</span>
<h2 id="expertise-heading" class="section-title gradient-text">פתרונות אריזה לכל תעשייה</h2>
</header>
<div class="expertise-grid">
<article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80"
alt="אריזות מזון גמישות צבעוניות"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80" alt="אריזות מזון גמישות" loading="lazy">
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
@@ -156,11 +141,7 @@
</article>
<article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=600&q=80"
alt="מוצרי היגיינה וניקיון ארוזים"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1556227702-d1e4e7b5c232?auto=format&fit=crop&w=600&q=80" alt="מוצרי ניקיון ארוזים" loading="lazy">
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
@@ -182,11 +163,7 @@
</article>
<article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&w=600&q=80"
alt="שקיות Stand-up pouches"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80" alt="שקיות עומדות" loading="lazy">
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
@@ -207,11 +184,7 @@
</article>
<article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=600&q=80"
alt="ירקות ופירות ארוזים"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?auto=format&fit=crop&w=600&q=80" alt="ירקות ארוזים" loading="lazy">
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
@@ -239,46 +212,35 @@
<section class="about-preview" aria-labelledby="about-preview-heading">
<div class="container">
<div class="about-preview-grid">
<div class="about-image-wrapper reveal-fade">
<div class="about-image-frame">
<img
src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=600&q=80"
alt="איש מקצוע בתעשייה"
loading="lazy"
class="about-image"
>
<div class="about-image-decoration"></div>
<div class="about-preview-image reveal-fade">
<div class="profile-frame">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=500&q=80" alt="עמוס רוזמרין - מהנדס אריזה" loading="lazy">
<div class="profile-glow"></div>
</div>
<div class="about-experience-badge">
<span class="experience-number" data-count="18">0</span>
<span class="experience-plus">+</span>
<span class="experience-text">שנות<br>ניסיון</span>
<div class="experience-badge glass-card">
<span class="exp-number">18+</span>
<span class="exp-text">שנות ניסיון</span>
</div>
</div>
<div class="about-content reveal-fade">
<span class="section-tag">
<span class="tag-icon">◈</span>
אודות
</span>
<h2 id="about-preview-heading" class="section-title">עמוס רוזמרין</h2>
<p class="about-subtitle gradient-text">מהנדס אריזה מומחה</p>
<p class="about-text">שמי עמוס רוזמרין, ואני מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות.</p>
<p class="about-text">המשימה שלי היא להבטיח אריזה אמינה, יעילה וחסכונית — המשמרת את איכות המוצר, עומדת בתקנים ומותאמת לקו הייצור שלכם.</p>
<div class="about-specialties">
<div class="specialty-item">
<span class="specialty-icon">????</span>
<span>דיוק והתאמה</span>
<div class="about-preview-content">
<span class="section-tag reveal-fade">אודות</span>
<h2 id="about-preview-heading" class="section-title reveal-fade">עמוס רוזמרין</h2>
<p class="about-preview-desc reveal-fade">מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות, ההיגיינה, הקוסמטיקה וחומרי הניקוי.</p>
<div class="expertise-badges reveal-fade">
<div class="expertise-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span>אריזות גמישות</span>
</div>
<div class="specialty-item">
<span class="specialty-icon">????</span>
<span>ייצור מתקדם</span>
<div class="expertise-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span>קרטון מעוצב</span>
</div>
<div class="specialty-item">
<span class="specialty-icon">????</span>
<span>ידידות לסביבה</span>
<div class="expertise-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span>ייעוץ טכני</span>
</div>
</div>
<a href="about.html" class="btn btn-secondary btn-glass">קראו עוד עליי</a>
<a href="about.html" class="btn btn-primary reveal-fade">קראו עוד עליי</a>
</div>
</div>
</div>
@@ -289,32 +251,24 @@
<div class="tech-grid">
<div class="tech-visual reveal-fade" aria-hidden="true">
<div class="tech-image-wrapper">
<img
src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80"
alt="טכנולוגיית שיחול מתקדמת"
loading="lazy"
class="tech-image"
>
<img src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80" alt="טכנולוגיית שיחול מתקדמת" loading="lazy">
<div class="tech-image-overlay"></div>
</div>
<div class="layers-visual">
<div class="layer-bar" style="--delay: 0.1s;"></div>
<div class="layer-bar" style="--delay: 0.2s;"></div>
<div class="layer-bar" style="--delay: 0.3s;"></div>
<div class="layer-bar" style="--delay: 0.4s;"></div>
<div class="layer-bar" style="--delay: 0.5s;"></div>
<div class="layer-bar" style="--delay: 0.6s;"></div>
<div class="layer-bar" style="--delay: 0.7s;"></div>
<div class="layer-bar" style="--delay: 0.8s;"></div>
<div class="layer-bar" style="--delay: 0.9s;"></div>
<div class="layer-bar" style="--delay: 0"></div>
<div class="layer-bar" style="--delay: 1"></div>
<div class="layer-bar" style="--delay: 2"></div>
<div class="layer-bar" style="--delay: 3"></div>
<div class="layer-bar" style="--delay: 4"></div>
<div class="layer-bar" style="--delay: 5"></div>
<div class="layer-bar" style="--delay: 6"></div>
<div class="layer-bar" style="--delay: 7"></div>
<div class="layer-bar" style="--delay: 8"></div>
</div>
</div>
<div class="tech-content">
<span class="section-tag reveal-fade">
<span class="tag-icon">◈</span>
טכנולוגיה מתקדמת
</span>
<h2 id="tech-heading" class="section-title reveal-fade gradient-text">שיחול עד 9 שכבות</h2>
<span class="section-tag reveal-fade">טכנולוגיה מתקדמת</span>
<h2 id="tech-heading" class="section-title gradient-text reveal-fade">שיחול עד 9 שכבות</h2>
<p class="tech-desc reveal-fade">אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH, ומספקים פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה כגון בשר ומוצרי חלב.</p>
<ul class="tech-features">
<li class="reveal-fade">
@@ -324,9 +278,7 @@
</svg>
</div>
<span>הדפסה עד 10 צבעים באיכות HD</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 100%;"></div>
</div>
<div class="feature-progress" style="--progress: 100%"></div>
</li>
<li class="reveal-fade">
<div class="feature-icon-wrapper">
@@ -335,9 +287,7 @@
</svg>
</div>
<span>גלופות HD NX ללא שפכים</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 90%;"></div>
</div>
<div class="feature-progress" style="--progress: 100%"></div>
</li>
<li class="reveal-fade">
<div class="feature-icon-wrapper">
@@ -346,9 +296,7 @@
</svg>
</div>
<span>ידידותי לסביבה</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 85%;"></div>
</div>
<div class="feature-progress" style="--progress: 100%"></div>
</li>
<li class="reveal-fade">
<div class="feature-icon-wrapper">
@@ -357,9 +305,7 @@
</svg>
</div>
<span>מחירים תחרותיים</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 95%;"></div>
</div>
<div class="feature-progress" style="--progress: 100%"></div>
</li>
</ul>
<a href="technology.html" class="btn btn-primary btn-glow reveal-fade">עוד על הטכנולוגיה</a>
@@ -368,96 +314,79 @@
</div>
</section>
<div class="wave-divider wave-up" aria-hidden="true">
<svg viewBox="0 0 1440 120" preserveAspectRatio="none">
<path d="M0,60 C360,0 720,120 1080,60 C1260,30 1380,30 1440,60 L1440,0 L0,0 Z" fill="var(--color-bg-deep)"/>
</svg>
</div>
<section class="clients-preview" aria-labelledby="clients-heading">
<div class="container">
<header class="section-header reveal-fade">
<span class="section-tag">
<span class="tag-icon">◈</span>
לקוחות
</span>
<span class="section-tag">לקוחות</span>
<h2 id="clients-heading" class="section-title gradient-text">לקוחות שסומכים עלינו</h2>
<p class="section-desc">שיתופי פעולה ארוכי טווח עם מותגים מובילים בתעשיית המזון הישראלית</p>
</header>
<div class="clients-logos-grid reveal-fade">
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ב</span>
<div class="clients-logo-grid reveal-fade">
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ב</div>
<span class="logo-name">מאפיית ברמן</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ד</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ד</div>
<span class="logo-name">דגנית</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ח</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ח</div>
<span class="logo-name">חסלט</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">י</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">י</div>
<span class="logo-name">יבולי הכפר</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">א</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">א</div>
<span class="logo-name">אסיף</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ח</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ח</div>
<span class="logo-name">חטיפי העמק</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">פ</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">פ</div>
<span class="logo-name">פרג</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ש</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ש</div>
<span class="logo-name">שיבולים</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">מ</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">מ</div>
<span class="logo-name">מאיר בייגל</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ג</span>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ג</div>
<span class="logo-name">גילרו</span>
</div>
</div>
</div>
<div class="clients-cta reveal-fade">
<a href="clients.html" class="btn btn-secondary btn-glass">לכל הלקוחות</a>
<a href="clients.html" class="btn btn-secondary">לכל הלקוחות</a>
</div>
</div>
</section>
<section class="cta-section" aria-labelledby="cta-heading">
<div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></div>
<div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb secondary"></div>
</div>
<div class="container">
<div class="cta-content reveal-fade">
<h2 id="cta-heading" class="cta-title gradient-text">מחפשים פתרון אריזה לקו הייצור שלכם?</h2>
<h2 id="cta-heading" class="cta-title">מחפשים פתרון אריזה לקו הייצור שלכם?</h2>
<p class="cta-desc">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם אישית</p>
<div class="cta-actions">
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
<a href="tel:054-818-1092" class="btn btn-outline btn-large btn-glass">
<a href="tel:054-818-1092" class="btn btn-outline btn-large">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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"/>
</svg>
@@ -470,7 +399,6 @@
</main>
<footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
+24 -41
View File
@@ -14,7 +14,7 @@
<body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<div class="particles-container" aria-hidden="true">
<div class="particles-bg" aria-hidden="true">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
@@ -52,11 +52,8 @@
<main id="main-content">
<section class="page-hero">
<div class="container">
<span class="section-tag reveal-fade">
<span class="tag-icon">◈</span>
מוצרים
</span>
<h1 class="page-title reveal-fade gradient-text">פתרונות אריזה</h1>
<span class="section-tag reveal-fade">מוצרים</span>
<h1 class="page-title gradient-text reveal-fade">פתרונות אריזה</h1>
<p class="page-subtitle reveal-fade">מגוון רחב של פתרונות אריזה גמישה לכל תעשייה</p>
</div>
</section>
@@ -65,16 +62,12 @@
<h2 id="products-heading" class="visually-hidden">קטגוריות מוצרים</h2>
<div class="container">
<div class="products-grid">
<article class="product-card product-featured reveal-slide glass-card" data-tilt>
<article class="product-card product-featured reveal-slide" data-tilt>
<div class="product-visual">
<img
src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80"
alt="אריזות מזון גמישות"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=800&q=80" alt="אריזות מזון גמישות" loading="lazy">
</div>
<div class="product-content">
<h3 class="product-title gradient-text">אריזות למזון</h3>
<h3 class="product-title">אריזות למזון</h3>
<p class="product-desc">פתרונות אריזה מתקדמים לתעשיית המזון עם חסם גבוה לשמירה על טריות ואיכות המוצר.</p>
<ul class="product-list">
<li>חטיפים ואגוזים</li>
@@ -89,13 +82,9 @@
</div>
</article>
<article class="product-card reveal-slide glass-card" data-tilt>
<article class="product-card reveal-slide" data-tilt>
<div class="product-visual">
<img
src="https://images.unsplash.com/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=600&q=80"
alt="מוצרי היגיינה וניקיון"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1556227702-d1e4e7b5c232?auto=format&fit=crop&w=600&q=80" alt="מוצרי ניקיון ארוזים" loading="lazy">
</div>
<div class="product-content">
<h3 class="product-title">היגיינה וחומרי ניקוי</h3>
@@ -109,13 +98,9 @@
</div>
</article>
<article class="product-card reveal-slide glass-card" data-tilt>
<article class="product-card reveal-slide" data-tilt>
<div class="product-visual">
<img
src="https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&w=600&q=80"
alt="שקיות Stand-up pouches"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80" alt="שקיות עומדות" loading="lazy">
</div>
<div class="product-content">
<h3 class="product-title">שקיות מוכנות</h3>
@@ -129,13 +114,9 @@
</div>
</article>
<article class="product-card reveal-slide glass-card" data-tilt>
<article class="product-card reveal-slide" data-tilt>
<div class="product-visual">
<img
src="https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=600&q=80"
alt="ירקות ופירות ארוזים"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?auto=format&fit=crop&w=600&q=80" alt="ירקות ארוזים" loading="lazy">
</div>
<div class="product-content">
<h3 class="product-title">פירות וירקות</h3>
@@ -149,13 +130,16 @@
</div>
</article>
<article class="product-card reveal-slide glass-card" data-tilt>
<article class="product-card reveal-slide" data-tilt>
<div class="product-visual">
<img
src="https://images.unsplash.com/photo-1607166452427-7e4477079cb9?auto=format&fit=crop&w=600&q=80"
alt="קופסאות קרטון מעוצבות"
loading="lazy"
>
<svg viewBox="0 0 300 200" fill="none">
<rect width="300" height="200" fill="#16213e"/>
<path d="M80 50 L220 50 L220 150 L80 150 Z" fill="none" stroke="#0ea5e9" stroke-width="2"/>
<path d="M80 50 L100 30 L240 30 L240 130 L220 150" fill="none" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/>
<path d="M220 50 L240 30" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/>
<rect x="100" y="70" width="80" height="60" fill="none" stroke="#d4af37" stroke-width="1" opacity="0.5"/>
<text x="150" y="105" text-anchor="middle" fill="#d4af37" font-size="12" opacity="0.8">לוגו</text>
</svg>
</div>
<div class="product-content">
<h3 class="product-title">קופסאות קרטון</h3>
@@ -174,12 +158,12 @@
<section class="cta-section" aria-labelledby="products-cta-heading">
<div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></div>
<div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb secondary"></div>
</div>
<div class="container">
<div class="cta-content reveal-fade">
<h2 id="products-cta-heading" class="cta-title gradient-text">מחפשים פתרון אריזה מותאם?</h2>
<h2 id="products-cta-heading" class="cta-title">מחפשים פתרון אריזה מותאם?</h2>
<p class="cta-desc">ספרו לנו על הצרכים שלכם ונציע את הפתרון המושלם</p>
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div>
@@ -188,7 +172,6 @@
</main>
<footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
+80 -153
View File
@@ -47,7 +47,7 @@
// Check for reduced motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Scroll Reveal Animation with staggered delays
// Scroll Reveal Animation
const observerOptions = {
root: null,
rootMargin: '0px 0px -80px 0px',
@@ -55,29 +55,16 @@
};
const revealObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry, index) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// Add staggered delay for grid items
const delay = entry.target.dataset.delay || 0;
setTimeout(function() {
entry.target.classList.add('revealed');
}, delay * 100);
revealObserver.unobserve(entry.target);
}
});
}, observerOptions);
if (!prefersReducedMotion) {
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el, index) {
// Add stagger delay to grid children
const parent = el.parentElement;
if (parent && (parent.classList.contains('expertise-grid') ||
parent.classList.contains('products-grid') ||
parent.classList.contains('advantages-grid') ||
parent.classList.contains('industries-grid') ||
parent.classList.contains('clients-logos-grid'))) {
el.dataset.delay = index;
}
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) {
revealObserver.observe(el);
});
} else {
@@ -86,60 +73,45 @@
});
}
// Counter Animation
function animateCounter(element) {
const target = parseInt(element.dataset.count, 10);
const duration = 2000;
const start = 0;
const startTime = performance.now();
function update(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// Easing function for smooth animation
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
const current = Math.floor(start + (target - start) * easeOutQuart);
element.textContent = current;
if (progress < 1) {
requestAnimationFrame(update);
} else {
// Count Up Animation for Stats
function countUp(element, target, duration) {
if (prefersReducedMotion) {
element.textContent = target;
}
return;
}
requestAnimationFrame(update);
let start = 0;
const increment = target / (duration / 16);
const timer = setInterval(function() {
start += increment;
if (start >= target) {
element.textContent = target;
clearInterval(timer);
} else {
element.textContent = Math.floor(start);
}
}, 16);
}
// Observer for counter animation
const counterObserver = new IntersectionObserver(function(entries) {
const statsObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting && !prefersReducedMotion) {
const counters = entry.target.querySelectorAll('[data-count]');
counters.forEach(function(counter) {
if (!counter.classList.contains('counted')) {
counter.classList.add('counted');
animateCounter(counter);
}
if (entry.isIntersecting) {
const statNumbers = entry.target.querySelectorAll('.stat-number[data-count]');
statNumbers.forEach(function(stat) {
const target = parseInt(stat.getAttribute('data-count'), 10);
countUp(stat, target, 2000);
});
counterObserver.unobserve(entry.target);
statsObserver.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
const statsSection = document.querySelector('.hero-stats');
if (statsSection) {
counterObserver.observe(statsSection);
const heroStats = document.querySelector('.hero-stats');
if (heroStats) {
statsObserver.observe(heroStats);
}
const experienceBadge = document.querySelector('.about-experience-badge');
if (experienceBadge) {
counterObserver.observe(experienceBadge);
}
// Layer animation observer for tech section
// Layer animation observer
const layerObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
@@ -154,24 +126,6 @@
layerObserver.observe(layersVisual);
}
// Progress bar animation
const progressObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
progressObserver.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.tech-features li').forEach(function(li) {
if (!prefersReducedMotion) {
progressObserver.observe(li);
} else {
li.classList.add('revealed');
}
});
// Header scroll effect
const header = document.querySelector('.site-header');
let lastScrollY = 0;
@@ -190,30 +144,15 @@
window.addEventListener('scroll', updateHeader, { passive: true });
// Parallax effect for particles
if (!prefersReducedMotion) {
window.addEventListener('scroll', function() {
const scrollY = window.scrollY;
const particles = document.querySelectorAll('.particle');
particles.forEach(function(particle, index) {
const speed = 0.1 + (index * 0.02);
particle.style.transform = `translateY(${scrollY * speed}px)`;
});
}, { passive: true });
}
// 3D Tilt effect for cards
// 3D Tilt Effect for Cards
if (!prefersReducedMotion) {
document.querySelectorAll('[data-tilt]').forEach(function(card) {
card.addEventListener('mousemove', function(e) {
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;
@@ -221,30 +160,35 @@
});
card.addEventListener('mouseleave', function() {
card.style.transform = '';
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
});
});
}
// Ripple effect for buttons
document.querySelectorAll('.btn-glow').forEach(function(btn) {
btn.addEventListener('click', function(e) {
const ripple = btn.querySelector('.btn-ripple');
if (ripple) {
ripple.style.transform = 'scale(0)';
ripple.style.opacity = '0';
// Parallax effect for particles
if (!prefersReducedMotion) {
window.addEventListener('scroll', function() {
const particles = document.querySelectorAll('.particle');
const scrollY = window.scrollY;
setTimeout(function() {
ripple.style.transform = 'scale(2)';
ripple.style.opacity = '1';
}, 10);
particles.forEach(function(particle, index) {
const speed = 0.05 + (index * 0.02);
particle.style.transform = `translateY(${scrollY * speed}px)`;
});
}, { passive: true });
}
setTimeout(function() {
ripple.style.transform = 'scale(0)';
ripple.style.opacity = '0';
}, 500);
// Feature progress bars animation
const featureObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
}
});
}, { threshold: 0.5 });
document.querySelectorAll('.tech-features li').forEach(function(li) {
featureObserver.observe(li);
});
// Form handling
@@ -277,10 +221,12 @@
submitBtn.textContent = 'שולח...';
submitBtn.disabled = true;
submitBtn.style.opacity = '0.7';
setTimeout(function() {
submitBtn.textContent = 'נשלח בהצלחה! ✓';
submitBtn.textContent = 'נשלח בהצלחה!';
submitBtn.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)';
submitBtn.style.opacity = '1';
setTimeout(function() {
submitBtn.textContent = originalText;
@@ -296,14 +242,6 @@
this.style.borderColor = '';
this.style.boxShadow = '';
});
field.addEventListener('focus', function() {
this.parentElement.classList.add('focused');
});
field.addEventListener('blur', function() {
this.parentElement.classList.remove('focused');
});
});
}
@@ -325,47 +263,36 @@
});
});
// Staggered animation for grid items
if (!prefersReducedMotion) {
const grids = [
'.expertise-grid .expertise-card',
'.products-grid .product-card',
'.advantages-grid .advantage-item',
'.industries-grid .industry-card',
'.clients-logos-grid .client-logo-card'
];
// Ripple effect on buttons
document.querySelectorAll('.btn-glow').forEach(function(btn) {
btn.addEventListener('click', function(e) {
const ripple = this.querySelector('.btn-ripple');
if (ripple) {
ripple.style.transform = 'scale(0)';
ripple.style.opacity = '0';
setTimeout(function() {
ripple.style.transform = '';
ripple.style.opacity = '';
}, 10);
}
});
});
grids.forEach(function(selector) {
document.querySelectorAll(selector).forEach(function(card, index) {
// Add staggered animation delay to grid items
if (!prefersReducedMotion) {
document.querySelectorAll('.expertise-grid .expertise-card, .products-grid .product-card, .advantages-grid .advantage-item, .industries-grid .industry-card').forEach(function(card, index) {
card.style.transitionDelay = (index * 0.1) + 's';
});
}
// Logo cards hover glow effect
document.querySelectorAll('.client-logo-card').forEach(function(card) {
card.addEventListener('mouseenter', function() {
this.style.filter = 'brightness(1.1)';
});
card.addEventListener('mouseleave', function() {
this.style.filter = '';
});
}
// Typewriter effect for hero title (optional enhancement)
const typewriterElement = document.querySelector('.typewriter');
if (typewriterElement && !prefersReducedMotion) {
const text = typewriterElement.textContent;
typewriterElement.textContent = '';
typewriterElement.style.opacity = '1';
let i = 0;
function typeWriter() {
if (i < text.length) {
typewriterElement.textContent += text.charAt(i);
i++;
setTimeout(typeWriter, 50);
}
}
// Start typewriter after page load
setTimeout(typeWriter, 800);
}
// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', function() {
// Add loaded class to body for CSS animations
document.body.classList.add('loaded');
});
})();
+451 -483
View File
File diff suppressed because it is too large Load Diff
+45 -140
View File
@@ -14,7 +14,7 @@
<body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<div class="particles-container" aria-hidden="true">
<div class="particles-bg" aria-hidden="true">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
@@ -52,11 +52,8 @@
<main id="main-content">
<section class="page-hero">
<div class="container">
<span class="section-tag reveal-fade">
<span class="tag-icon">◈</span>
טכנולוגיה
</span>
<h1 class="page-title reveal-fade gradient-text">טכנולוגיה מתקדמת</h1>
<span class="section-tag reveal-fade">טכנולוגיה</span>
<h1 class="page-title gradient-text reveal-fade">טכנולוגיה מתקדמת</h1>
<p class="page-subtitle reveal-fade">חדשנות וטכנולוגיה מתקדמת לתוצאות מעולות</p>
</div>
</section>
@@ -65,30 +62,11 @@
<h2 id="tech-details-heading" class="visually-hidden">פרטי טכנולוגיה</h2>
<div class="container">
<div class="tech-feature reveal-fade">
<div class="tech-feature-visual">
<div class="tech-image-wrapper">
<img
src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=600&q=80"
alt="טכנולוגיית שיחול מתקדמת"
loading="lazy"
class="tech-image"
>
<div class="tech-image-overlay"></div>
</div>
<div class="layers-visual">
<div class="layer-bar" style="--delay: 0.1s;"></div>
<div class="layer-bar" style="--delay: 0.2s;"></div>
<div class="layer-bar" style="--delay: 0.3s;"></div>
<div class="layer-bar" style="--delay: 0.4s;"></div>
<div class="layer-bar" style="--delay: 0.5s;"></div>
<div class="layer-bar" style="--delay: 0.6s;"></div>
<div class="layer-bar" style="--delay: 0.7s;"></div>
<div class="layer-bar" style="--delay: 0.8s;"></div>
<div class="layer-bar" style="--delay: 0.9s;"></div>
</div>
<div class="tech-feature-visual" aria-hidden="true">
<img src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80" alt="טכנולוגיית שיחול מתקדמת" loading="lazy">
</div>
<div class="tech-feature-content">
<h3 class="gradient-text">שיחול עד 9 שכבות</h3>
<h3>שיחול עד 9 שכבות</h3>
<p>אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH. טכנולוגיה זו מאפשרת לנו לספק פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה, כגון בשר ומוצרי חלב.</p>
<div class="materials-list">
<span class="material">PE</span>
@@ -103,31 +81,27 @@
</div>
<div class="tech-feature reverse reveal-fade">
<div class="tech-feature-visual">
<div class="tech-image-wrapper">
<img
src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80"
alt="הדפסה צבעונית באיכות גבוהה"
loading="lazy"
class="tech-image"
>
<div class="tech-image-overlay"></div>
</div>
<div class="color-dots" aria-hidden="true">
<span class="color-dot" style="background: #FF6B6B;"></span>
<span class="color-dot" style="background: #4ECDC4;"></span>
<span class="color-dot" style="background: #45B7D1;"></span>
<span class="color-dot" style="background: #96CEB4;"></span>
<span class="color-dot" style="background: #FFEAA7;"></span>
<span class="color-dot" style="background: #DDA0DD;"></span>
<span class="color-dot" style="background: #98D8C8;"></span>
<span class="color-dot" style="background: #F7DC6F;"></span>
<span class="color-dot" style="background: #BB8FCE;"></span>
<span class="color-dot" style="background: #85C1E9;"></span>
</div>
<div class="tech-feature-visual" aria-hidden="true">
<svg viewBox="0 0 400 300" fill="none">
<rect width="400" height="300" fill="#16213e"/>
<g class="print-colors">
<circle cx="80" cy="80" r="30" fill="#FF6B6B" opacity="0.8"/>
<circle cx="120" cy="90" r="30" fill="#4ECDC4" opacity="0.8"/>
<circle cx="160" cy="80" r="30" fill="#45B7D1" opacity="0.8"/>
<circle cx="200" cy="90" r="30" fill="#96CEB4" opacity="0.8"/>
<circle cx="240" cy="80" r="30" fill="#FFEAA7" opacity="0.8"/>
<circle cx="280" cy="90" r="30" fill="#DDA0DD" opacity="0.8"/>
<circle cx="320" cy="80" r="30" fill="#98D8C8" opacity="0.8"/>
<circle cx="100" cy="150" r="30" fill="#F7DC6F" opacity="0.8"/>
<circle cx="140" cy="160" r="30" fill="#BB8FCE" opacity="0.8"/>
<circle cx="180" cy="150" r="30" fill="#85C1E9" opacity="0.8"/>
</g>
<rect x="60" y="200" width="280" height="60" rx="8" fill="none" stroke="#0ea5e9" stroke-width="2"/>
<text x="200" y="238" text-anchor="middle" fill="#fff" font-size="16">10 צבעים באיכות HD</text>
</svg>
</div>
<div class="tech-feature-content">
<h3 class="gradient-text">הדפסה עד 10 צבעים</h3>
<h3>הדפסה עד 10 צבעים</h3>
<p>אנו מציעים טכנולוגיית דפוס חדישה עם ארבע מכונות המסוגלות להדפיס עד 10 צבעים באמצעות גלופות HD NX. איכות דפוס גבוהה במיוחד עם רוחב יריעה של 1,450 מ"מ ופסיעה של 1,250 מ"מ.</p>
<ul class="tech-specs">
<li><strong>רוחב יריעה:</strong> 1,450 מ"מ</li>
@@ -138,19 +112,20 @@
</div>
<div class="tech-feature reveal-fade">
<div class="tech-feature-visual">
<div class="tech-image-wrapper">
<img
src="https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?auto=format&fit=crop&w=600&q=80"
alt="טכנולוגיה ירוקה וידידותית לסביבה"
loading="lazy"
class="tech-image"
>
<div class="tech-image-overlay"></div>
</div>
<div class="tech-feature-visual" aria-hidden="true">
<svg viewBox="0 0 400 300" fill="none">
<rect width="400" height="300" fill="#16213e"/>
<circle cx="200" cy="150" r="100" fill="none" stroke="#0ea5e9" stroke-width="2"/>
<circle cx="200" cy="150" r="70" fill="none" stroke="#d4af37" stroke-width="2"/>
<circle cx="200" cy="150" r="40" fill="#0ea5e9" opacity="0.2"/>
<path d="M200 50v40M200 210v40M100 150h40M260 150h40" stroke="#0ea5e9" stroke-width="2" opacity="0.5"/>
<path d="M130 80l25 25M270 220l-25-25M270 80l-25 25M130 220l25-25" stroke="#d4af37" stroke-width="1" opacity="0.5"/>
<circle cx="200" cy="150" r="15" fill="#0ea5e9"/>
<path d="M190 150l7 7 13-14" stroke="#1a1a2e" stroke-width="2"/>
</svg>
</div>
<div class="tech-feature-content">
<h3 class="gradient-text">גלופות HD NX</h3>
<h3>גלופות HD NX</h3>
<p>אנו מספקים יתרונות ייחודיים ללקוחותינו בכך שיש בבעלותנו אמצעי ייצור גלופות. אנו עושים שימוש בטכנולוגיית HD NX המשדרגת את איכות הדפסת הפלקסו לרמה גבוהה במיוחד.</p>
<div class="eco-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -167,29 +142,26 @@
<section class="advantages" aria-labelledby="advantages-heading">
<div class="container">
<header class="section-header reveal-fade">
<span class="section-tag">
<span class="tag-icon">◈</span>
יתרונות
</span>
<span class="section-tag">יתרונות</span>
<h2 id="advantages-heading" class="section-title gradient-text">למה לעבוד איתנו?</h2>
</header>
<div class="advantages-grid">
<div class="advantage-item reveal-slide glass-card">
<div class="advantage-item reveal-slide">
<div class="advantage-number" aria-hidden="true">01</div>
<h3>מחירים תחרותיים</h3>
<p>עבודה ישירה עם יצרנים טורקיים מובילים מאפשרת לנו להציע מחירים תחרותיים במיוחד.</p>
</div>
<div class="advantage-item reveal-slide glass-card">
<div class="advantage-item reveal-slide">
<div class="advantage-number" aria-hidden="true">02</div>
<h3>איכות גבוהה</h3>
<p>טכנולוגיות מתקדמות וחומרים איכותיים לתוצאות מעולות בכל פרויקט.</p>
</div>
<div class="advantage-item reveal-slide glass-card">
<div class="advantage-item reveal-slide">
<div class="advantage-number" aria-hidden="true">03</div>
<h3>שירות אישי</h3>
<p>ליווי צמוד מהייעוץ הראשוני ועד האספקה הסופית.</p>
</div>
<div class="advantage-item reveal-slide glass-card">
<div class="advantage-item reveal-slide">
<div class="advantage-number" aria-hidden="true">04</div>
<h3>ידידות לסביבה</h3>
<p>טכנולוגיות ירוקות ללא שפכים ועם צמצום השפעה סביבתית.</p>
@@ -200,12 +172,12 @@
<section class="cta-section" aria-labelledby="tech-cta-heading">
<div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></div>
<div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb secondary"></div>
</div>
<div class="container">
<div class="cta-content reveal-fade">
<h2 id="tech-cta-heading" class="cta-title gradient-text">רוצים לשמוע עוד?</h2>
<h2 id="tech-cta-heading" class="cta-title">רוצים לשמוע עוד?</h2>
<p class="cta-desc">נשמח להסביר על הטכנולוגיות שלנו ולהתאים פתרון לצרכים שלכם</p>
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div>
@@ -214,7 +186,6 @@
</main>
<footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
@@ -248,71 +219,5 @@
</footer>
<script src="script.js"></script>
<style>
.color-dots {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.color-dot {
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
animation: colorPop 0.5s ease forwards;
opacity: 0;
transform: scale(0);
}
.color-dot:nth-child(1) { animation-delay: 0.1s; }
.color-dot:nth-child(2) { animation-delay: 0.15s; }
.color-dot:nth-child(3) { animation-delay: 0.2s; }
.color-dot:nth-child(4) { animation-delay: 0.25s; }
.color-dot:nth-child(5) { animation-delay: 0.3s; }
.color-dot:nth-child(6) { animation-delay: 0.35s; }
.color-dot:nth-child(7) { animation-delay: 0.4s; }
.color-dot:nth-child(8) { animation-delay: 0.45s; }
.color-dot:nth-child(9) { animation-delay: 0.5s; }
.color-dot:nth-child(10) { animation-delay: 0.55s; }
@keyframes colorPop {
to {
opacity: 1;
transform: scale(1);
}
}
.color-dot:hover {
transform: scale(1.3);
}
.tech-feature-visual {
position: relative;
}
.tech-image-wrapper {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.tech-image {
width: 100%;
height: 350px;
object-fit: cover;
transition: transform var(--transition-slow);
}
.tech-image-wrapper:hover .tech-image {
transform: scale(1.05);
}
</style>
</body>
</html>