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> <body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a> <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> <div class="particle"></div>
<div class="particle"></div> <div class="particle"></div>
<div class="particle"></div> <div class="particle"></div>
@@ -54,11 +52,8 @@
<main id="main-content"> <main id="main-content">
<section class="page-hero"> <section class="page-hero">
<div class="container"> <div class="container">
<span class="section-tag reveal-fade"> <span class="section-tag reveal-fade">אודות</span>
<span class="tag-icon">◈</span> <h1 class="page-title gradient-text reveal-fade">הסיפור שלי</h1>
אודות
</span>
<h1 class="page-title reveal-fade gradient-text">הסיפור שלי</h1>
<p class="page-subtitle reveal-fade">למעלה מ-18 שנות ניסיון בפיתוח פתרונות אריזה לתעשייה הישראלית</p> <p class="page-subtitle reveal-fade">למעלה מ-18 שנות ניסיון בפיתוח פתרונות אריזה לתעשייה הישראלית</p>
</div> </div>
</section> </section>
@@ -68,37 +63,22 @@
<div class="about-grid"> <div class="about-grid">
<div class="about-story"> <div class="about-story">
<div class="about-profile-section reveal-fade"> <div class="about-profile-section reveal-fade">
<div class="profile-image-wrapper"> <div class="profile-image-large">
<img <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=600&q=80" alt="עמוס רוזמרין - מהנדס אריזה" loading="lazy">
src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80" <div class="profile-overlay"></div>
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>
</div> </div>
</div> </div>
<div class="story-block reveal-fade"> <div class="story-block reveal-fade">
<h3>מהנדס ייצור עצמאי מאז 2006</h3> <h2>מהנדס ייצור עצמאי מאז 2006</h2>
<p>שמי עמוס רוזמרין, ואני מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות, ההיגיינה, הקוסמטיקה וחומרי הניקוי.</p> <p>שמי עמוס רוזמרין, ואני מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות, ההיגיינה, הקוסמטיקה וחומרי הניקוי.</p>
</div> </div>
<div class="story-block reveal-fade"> <div class="story-block reveal-fade">
<h3>הגישה שלי</h3> <h2>הגישה שלי</h2>
<p>המשימה שלי היא להבטיח אריזה אמינה, יעילה וחסכונית — המשמרת את איכות המוצר, עומדת בתקנים ומותאמת לקו הייצור שלכם.</p> <p>המשימה שלי היא להבטיח אריזה אמינה, יעילה וחסכונית — המשמרת את איכות המוצר, עומדת בתקנים ומותאמת לקו הייצור שלכם.</p>
<p>אני פועל בשקיפות, דיוק ושירות אישי, עם דגש על איכות תהליך, צמצום תקלות וקיצור זמני הגעה לשוק.</p> <p>אני פועל בשקיפות, דיוק ושירות אישי, עם דגש על איכות תהליך, צמצום תקלות וקיצור זמני הגעה לשוק.</p>
</div> </div>
<div class="story-block reveal-fade"> <div class="story-block reveal-fade">
<h3>שיתוף פעולה בינלאומי</h3> <h2>שיתוף פעולה בינלאומי</h2>
<p>במהלך השנים פיתחתי שיתופי פעולה הדוקים עם יצרנים טורקיים מובילים, המאפשרים לי להציע מחירים תחרותיים ואיכות גבוהה ללקוחותיי בישראל.</p> <p>במהלך השנים פיתחתי שיתופי פעולה הדוקים עם יצרנים טורקיים מובילים, המאפשרים לי להציע מחירים תחרותיים ואיכות גבוהה ללקוחותיי בישראל.</p>
</div> </div>
</div> </div>
@@ -135,12 +115,13 @@
<div class="value-card reveal-slide"> <div class="value-card reveal-slide">
<div class="value-icon" aria-hidden="true"> <div class="value-icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2"> <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="24" cy="24" r="20"/> <path d="M12 24c0-6.627 5.373-12 12-12s12 5.373 12 12-5.373 12-12 12"/>
<path d="M16 24l6 6 10-12"/> <path d="M24 36v8M20 40h8"/>
<path d="M24 4v4"/>
</svg> </svg>
</div> </div>
<h3>מקצועיות</h3> <h3>חדשנות</h3>
<p>ידע טכני מעמיק וניסיון רב שנים בתעשייה</p> <p>מעקב אחר טכנולוגיות מתקדמות והטמעתן לטובת הלקוחות</p>
</div> </div>
</aside> </aside>
</div> </div>
@@ -149,12 +130,12 @@
<section class="cta-section" aria-labelledby="about-cta-heading"> <section class="cta-section" aria-labelledby="about-cta-heading">
<div class="cta-bg" aria-hidden="true"> <div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div> <div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb cta-orb-2"></div> <div class="cta-gradient-orb secondary"></div>
</div> </div>
<div class="container"> <div class="container">
<div class="cta-content reveal-fade"> <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> <p class="cta-desc">אשמח לשמוע על הצרכים שלכם ולהציע פתרון אריזה מותאם</p>
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a> <a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div> </div>
@@ -163,7 +144,6 @@
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container"> <div class="container">
<div class="footer-grid"> <div class="footer-grid">
<div class="footer-brand"> <div class="footer-brand">
@@ -199,81 +179,34 @@
<script src="script.js"></script> <script src="script.js"></script>
<style> <style>
.about-profile-section { .about-profile-section {
display: flex;
gap: var(--space-lg);
align-items: center;
margin-block-end: var(--space-xl); 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; 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 { .profile-image-large img {
width: 150px; width: 100%;
height: 150px; height: auto;
border-radius: 50%; display: block;
object-fit: cover; filter: grayscale(20%);
border: 3px solid var(--color-accent); transition: filter var(--transition-medium);
box-shadow: var(--shadow-glow);
} }
.profile-decoration { .profile-image-large:hover img {
filter: grayscale(0%);
}
.profile-overlay {
position: absolute; position: absolute;
inset: -10px; inset: 0;
border: 2px dashed var(--color-gold); background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
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;
}
} }
</style> </style>
</body> </body>
+43 -70
View File
@@ -14,7 +14,7 @@
<body> <body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a> <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> <div class="particle"></div>
<div class="particle"></div> <div class="particle"></div>
@@ -52,11 +52,8 @@
<main id="main-content"> <main id="main-content">
<section class="page-hero"> <section class="page-hero">
<div class="container"> <div class="container">
<span class="section-tag reveal-fade"> <span class="section-tag reveal-fade">לקוחות</span>
<span class="tag-icon">◈</span> <h1 class="page-title gradient-text reveal-fade">לקוחות שסומכים עלינו</h1>
לקוחות
</span>
<h1 class="page-title reveal-fade gradient-text">לקוחות שסומכים עלינו</h1>
<p class="page-subtitle reveal-fade">שיתופי פעולה ארוכי טווח עם מותגים מובילים בתעשייה הישראלית</p> <p class="page-subtitle reveal-fade">שיתופי פעולה ארוכי טווח עם מותגים מובילים בתעשייה הישראלית</p>
</div> </div>
</section> </section>
@@ -64,66 +61,46 @@
<section class="clients-showcase" aria-labelledby="clients-list-heading"> <section class="clients-showcase" aria-labelledby="clients-list-heading">
<h2 id="clients-list-heading" class="visually-hidden">רשימת לקוחות</h2> <h2 id="clients-list-heading" class="visually-hidden">רשימת לקוחות</h2>
<div class="container"> <div class="container">
<div class="clients-logos-grid reveal-fade"> <div class="clients-logo-grid reveal-fade">
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ב</div>
<span class="logo-letter">ב</span> <span class="logo-name">מאפיית ברמן</span>
<span class="logo-name">מאפיית ברמן</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ד</div>
<span class="logo-letter">ד</span> <span class="logo-name">דגנית</span>
<span class="logo-name">דגנית</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ח</div>
<span class="logo-letter">ח</span> <span class="logo-name">חסלט</span>
<span class="logo-name">חסלט</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">י</div>
<span class="logo-letter">י</span> <span class="logo-name">יבולי הכפר</span>
<span class="logo-name">יבולי הכפר</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">א</div>
<span class="logo-letter">א</span> <span class="logo-name">אסיף</span>
<span class="logo-name">אסיף</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ח</div>
<span class="logo-letter">ח</span> <span class="logo-name">חטיפי העמק</span>
<span class="logo-name">חטיפי העמק</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">פ</div>
<span class="logo-letter">פ</span> <span class="logo-name">פרג</span>
<span class="logo-name">פרג</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ש</div>
<span class="logo-letter">ש</span> <span class="logo-name">שיבולים</span>
<span class="logo-name">שיבולים</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">מ</div>
<span class="logo-letter">מ</span> <span class="logo-name">מאיר בייגל</span>
<span class="logo-name">מאיר בייגל</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ג</div>
<span class="logo-letter">ג</span> <span class="logo-name">גילרו</span>
<span class="logo-name">גילרו</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -132,14 +109,11 @@
<section class="industries" aria-labelledby="industries-heading"> <section class="industries" aria-labelledby="industries-heading">
<div class="container"> <div class="container">
<header class="section-header reveal-fade"> <header class="section-header reveal-fade">
<span class="section-tag"> <span class="section-tag">תעשיות</span>
<span class="tag-icon">◈</span>
תעשיות
</span>
<h2 id="industries-heading" class="section-title gradient-text">אנחנו עובדים עם</h2> <h2 id="industries-heading" class="section-title gradient-text">אנחנו עובדים עם</h2>
</header> </header>
<div class="industries-grid"> <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"> <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="24" cy="20" r="12"/> <circle cx="24" cy="20" r="12"/>
<path d="M12 44c0-6.627 5.373-12 12-12s12 5.373 12 12"/> <path d="M12 44c0-6.627 5.373-12 12-12s12 5.373 12 12"/>
@@ -147,7 +121,7 @@
</svg> </svg>
<span>תעשיית המזון</span> <span>תעשיית המזון</span>
</div> </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"> <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"/> <ellipse cx="24" cy="38" rx="16" ry="6"/>
<path d="M8 38V20c0-8 7.2-16 16-16s16 8 16 16v18"/> <path d="M8 38V20c0-8 7.2-16 16-16s16 8 16 16v18"/>
@@ -155,7 +129,7 @@
</svg> </svg>
<span>חקלאות</span> <span>חקלאות</span>
</div> </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"> <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"/> <rect x="12" y="8" width="24" height="36" rx="4"/>
<circle cx="24" cy="28" r="8"/> <circle cx="24" cy="28" r="8"/>
@@ -163,7 +137,7 @@
</svg> </svg>
<span>קוסמטיקה</span> <span>קוסמטיקה</span>
</div> </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"> <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"/> <rect x="8" y="16" width="32" height="24" rx="4"/>
<path d="M16 16V12a8 8 0 1116 0v4"/> <path d="M16 16V12a8 8 0 1116 0v4"/>
@@ -171,7 +145,7 @@
</svg> </svg>
<span>חומרי ניקוי</span> <span>חומרי ניקוי</span>
</div> </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"> <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M8 40V16l16-8 16 8v24"/> <path d="M8 40V16l16-8 16 8v24"/>
<rect x="18" y="28" width="12" height="12"/> <rect x="18" y="28" width="12" height="12"/>
@@ -185,12 +159,12 @@
<section class="cta-section" aria-labelledby="clients-cta-heading"> <section class="cta-section" aria-labelledby="clients-cta-heading">
<div class="cta-bg" aria-hidden="true"> <div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div> <div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb cta-orb-2"></div> <div class="cta-gradient-orb secondary"></div>
</div> </div>
<div class="container"> <div class="container">
<div class="cta-content reveal-fade"> <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> <p class="cta-desc">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם</p>
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a> <a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div> </div>
@@ -199,7 +173,6 @@
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container"> <div class="container">
<div class="footer-grid"> <div class="footer-grid">
<div class="footer-brand"> <div class="footer-brand">
+8 -15
View File
@@ -14,7 +14,7 @@
<body> <body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a> <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> <div class="particle"></div>
<div class="particle"></div> <div class="particle"></div>
@@ -52,11 +52,8 @@
<main id="main-content"> <main id="main-content">
<section class="page-hero"> <section class="page-hero">
<div class="container"> <div class="container">
<span class="section-tag reveal-fade"> <span class="section-tag reveal-fade">צור קשר</span>
<span class="tag-icon">◈</span> <h1 class="page-title gradient-text reveal-fade">בואו נדבר</h1>
צור קשר
</span>
<h1 class="page-title reveal-fade gradient-text">בואו נדבר</h1>
<p class="page-subtitle reveal-fade">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם</p> <p class="page-subtitle reveal-fade">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם</p>
</div> </div>
</section> </section>
@@ -68,7 +65,7 @@
<div class="contact-info reveal-fade"> <div class="contact-info reveal-fade">
<h3>פרטי התקשרות</h3> <h3>פרטי התקשרות</h3>
<div class="contact-cards"> <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"> <div class="contact-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <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"/> <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> <span class="contact-value">054-818-1092</span>
</div> </div>
</a> </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"> <div class="contact-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <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"/> <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> <span class="contact-value" lang="en">amos.rosemarin@gmail.com</span>
</div> </div>
</a> </a>
<div class="contact-card glass-card"> <div class="contact-card">
<div class="contact-icon" aria-hidden="true"> <div class="contact-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <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"/> <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>
</div> </div>
<div class="contact-form glass-card reveal-fade"> <div class="contact-form reveal-fade">
<h3>שלחו הודעה</h3> <h3>שלחו הודעה</h3>
<form action="#" method="POST" novalidate> <form action="#" method="POST" novalidate>
<div class="form-group"> <div class="form-group">
@@ -137,10 +134,7 @@
<label for="message">הודעה <span aria-hidden="true">*</span></label> <label for="message">הודעה <span aria-hidden="true">*</span></label>
<textarea id="message" name="message" rows="5" required></textarea> <textarea id="message" name="message" rows="5" required></textarea>
</div> </div>
<button type="submit" class="btn btn-primary btn-large btn-glow"> <button type="submit" class="btn btn-primary btn-large btn-glow">שליחה</button>
<span>שליחה</span>
<span class="btn-ripple"></span>
</button>
</form> </form>
</div> </div>
</div> </div>
@@ -149,7 +143,6 @@
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container"> <div class="container">
<div class="footer-grid"> <div class="footer-grid">
<div class="footer-brand"> <div class="footer-brand">
+96 -168
View File
@@ -19,7 +19,7 @@
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a> <a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<!-- Floating Particles Background --> <!-- 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> <div class="particle"></div>
<div class="particle"></div> <div class="particle"></div>
@@ -61,23 +61,18 @@
<main id="main-content"> <main id="main-content">
<section class="hero"> <section class="hero">
<div class="hero-bg" aria-hidden="true"> <div class="hero-bg" aria-hidden="true">
<img <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1920&q=80" alt="" class="hero-bg-image" loading="eager">
src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1920&q=80"
alt=""
class="hero-image"
loading="eager"
>
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
<div class="hero-gradient-mesh"></div> <div class="hero-gradient-mesh"></div>
</div> </div>
<div class="hero-content"> <div class="hero-content">
<div class="hero-badge reveal-fade"> <div class="hero-badge reveal-fade">
<span class="badge-icon">✦</span> <span class="badge-pulse"></span>
מהנדס ייצור עצמאי מאז 2006 מהנדס ייצור עצמאי מאז 2006
</div> </div>
<h1 class="hero-title reveal-fade"> <h1 class="hero-title reveal-fade">
<span class="title-line typewriter">פתרונות אריזה גמישה</span> <span class="title-line">פתרונות אריזה גמישה</span>
<span class="highlight gradient-text">לתעשייה הישראלית</span> <span class="title-line highlight gradient-text">לתעשייה הישראלית</span>
</h1> </h1>
<p class="hero-subtitle reveal-fade">ידע טכני, ניסיון של למעלה מ-18 שנה ומומחיות באריזות גמישות — הכל מתכנס למוצר אחד מדויק עבורכם.</p> <p class="hero-subtitle reveal-fade">ידע טכני, ניסיון של למעלה מ-18 שנה ומומחיות באריזות גמישות — הכל מתכנס למוצר אחד מדויק עבורכם.</p>
<div class="hero-actions reveal-fade"> <div class="hero-actions reveal-fade">
@@ -85,12 +80,11 @@
<span>בואו נדבר</span> <span>בואו נדבר</span>
<span class="btn-ripple"></span> <span class="btn-ripple"></span>
</a> </a>
<a href="products.html" class="btn btn-secondary btn-glass">לכל המוצרים</a> <a href="products.html" class="btn btn-secondary">לכל המוצרים</a>
</div> </div>
<div class="hero-stats reveal-fade"> <div class="hero-stats reveal-fade">
<div class="stat"> <div class="stat">
<span class="stat-number" data-count="18">0</span> <span class="stat-number" data-count="18">0</span><span class="stat-plus">+</span>
<span class="stat-plus">+</span>
<span class="stat-label">שנות ניסיון</span> <span class="stat-label">שנות ניסיון</span>
</div> </div>
<div class="stat"> <div class="stat">
@@ -107,35 +101,26 @@
<div class="mouse"> <div class="mouse">
<div class="wheel"></div> <div class="wheel"></div>
</div> </div>
<span>גלול למטה</span> <span>גללו למטה</span>
</div> </div>
</section> </section>
<div class="wave-divider" aria-hidden="true"> <div class="wave-divider" aria-hidden="true">
<svg viewBox="0 0 1200 120" preserveAspectRatio="none"> <svg viewBox="0 0 1440 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,60 C360,120 720,0 1080,60 C1260,90 1380,90 1440,60 L1440,120 L0,120 Z" fill="var(--color-bg-deep)"/>
<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> </svg>
</div> </div>
<section class="expertise" aria-labelledby="expertise-heading"> <section class="expertise" aria-labelledby="expertise-heading">
<div class="container"> <div class="container">
<header class="section-header reveal-fade"> <header class="section-header reveal-fade">
<span class="section-tag"> <span class="section-tag">תחומי התמחות</span>
<span class="tag-icon">◈</span>
תחומי התמחות
</span>
<h2 id="expertise-heading" class="section-title gradient-text">פתרונות אריזה לכל תעשייה</h2> <h2 id="expertise-heading" class="section-title gradient-text">פתרונות אריזה לכל תעשייה</h2>
</header> </header>
<div class="expertise-grid"> <div class="expertise-grid">
<article class="expertise-card glass-card reveal-slide" data-tilt> <article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image"> <div class="card-image">
<img <img src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80" alt="אריזות מזון גמישות" loading="lazy">
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 class="card-image-overlay"></div>
</div> </div>
<div class="card-content"> <div class="card-content">
@@ -156,11 +141,7 @@
</article> </article>
<article class="expertise-card glass-card reveal-slide" data-tilt> <article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image"> <div class="card-image">
<img <img src="https://images.unsplash.com/photo-1556227702-d1e4e7b5c232?auto=format&fit=crop&w=600&q=80" alt="מוצרי ניקיון ארוזים" loading="lazy">
src="https://images.unsplash.com/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=600&q=80"
alt="מוצרי היגיינה וניקיון ארוזים"
loading="lazy"
>
<div class="card-image-overlay"></div> <div class="card-image-overlay"></div>
</div> </div>
<div class="card-content"> <div class="card-content">
@@ -182,11 +163,7 @@
</article> </article>
<article class="expertise-card glass-card reveal-slide" data-tilt> <article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image"> <div class="card-image">
<img <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80" alt="שקיות עומדות" loading="lazy">
src="https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&w=600&q=80"
alt="שקיות Stand-up pouches"
loading="lazy"
>
<div class="card-image-overlay"></div> <div class="card-image-overlay"></div>
</div> </div>
<div class="card-content"> <div class="card-content">
@@ -207,11 +184,7 @@
</article> </article>
<article class="expertise-card glass-card reveal-slide" data-tilt> <article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image"> <div class="card-image">
<img <img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?auto=format&fit=crop&w=600&q=80" alt="ירקות ארוזים" loading="lazy">
src="https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=600&q=80"
alt="ירקות ופירות ארוזים"
loading="lazy"
>
<div class="card-image-overlay"></div> <div class="card-image-overlay"></div>
</div> </div>
<div class="card-content"> <div class="card-content">
@@ -239,46 +212,35 @@
<section class="about-preview" aria-labelledby="about-preview-heading"> <section class="about-preview" aria-labelledby="about-preview-heading">
<div class="container"> <div class="container">
<div class="about-preview-grid"> <div class="about-preview-grid">
<div class="about-image-wrapper reveal-fade"> <div class="about-preview-image reveal-fade">
<div class="about-image-frame"> <div class="profile-frame">
<img <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=500&q=80" alt="עמוס רוזמרין - מהנדס אריזה" loading="lazy">
src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=600&q=80" <div class="profile-glow"></div>
alt="איש מקצוע בתעשייה"
loading="lazy"
class="about-image"
>
<div class="about-image-decoration"></div>
</div> </div>
<div class="about-experience-badge"> <div class="experience-badge glass-card">
<span class="experience-number" data-count="18">0</span> <span class="exp-number">18+</span>
<span class="experience-plus">+</span> <span class="exp-text">שנות ניסיון</span>
<span class="experience-text">שנות<br>ניסיון</span>
</div> </div>
</div> </div>
<div class="about-content reveal-fade"> <div class="about-preview-content">
<span class="section-tag"> <span class="section-tag reveal-fade">אודות</span>
<span class="tag-icon">◈</span> <h2 id="about-preview-heading" class="section-title reveal-fade">עמוס רוזמרין</h2>
אודות <p class="about-preview-desc reveal-fade">מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות, ההיגיינה, הקוסמטיקה וחומרי הניקוי.</p>
</span> <div class="expertise-badges reveal-fade">
<h2 id="about-preview-heading" class="section-title">עמוס רוזמרין</h2> <div class="expertise-badge">
<p class="about-subtitle gradient-text">מהנדס אריזה מומחה</p> <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>
<p class="about-text">שמי עמוס רוזמרין, ואני מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות.</p> <span>אריזות גמישות</span>
<p class="about-text">המשימה שלי היא להבטיח אריזה אמינה, יעילה וחסכונית — המשמרת את איכות המוצר, עומדת בתקנים ומותאמת לקו הייצור שלכם.</p>
<div class="about-specialties">
<div class="specialty-item">
<span class="specialty-icon">????</span>
<span>דיוק והתאמה</span>
</div> </div>
<div class="specialty-item"> <div class="expertise-badge">
<span class="specialty-icon">????</span> <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> <span>קרטון מעוצב</span>
</div> </div>
<div class="specialty-item"> <div class="expertise-badge">
<span class="specialty-icon">????</span> <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> <span>ייעוץ טכני</span>
</div> </div>
</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> </div>
</div> </div>
@@ -289,32 +251,24 @@
<div class="tech-grid"> <div class="tech-grid">
<div class="tech-visual reveal-fade" aria-hidden="true"> <div class="tech-visual reveal-fade" aria-hidden="true">
<div class="tech-image-wrapper"> <div class="tech-image-wrapper">
<img <img src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80" alt="טכנולוגיית שיחול מתקדמת" loading="lazy">
src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80"
alt="טכנולוגיית שיחול מתקדמת"
loading="lazy"
class="tech-image"
>
<div class="tech-image-overlay"></div> <div class="tech-image-overlay"></div>
</div> </div>
<div class="layers-visual"> <div class="layers-visual">
<div class="layer-bar" style="--delay: 0.1s;"></div> <div class="layer-bar" style="--delay: 0"></div>
<div class="layer-bar" style="--delay: 0.2s;"></div> <div class="layer-bar" style="--delay: 1"></div>
<div class="layer-bar" style="--delay: 0.3s;"></div> <div class="layer-bar" style="--delay: 2"></div>
<div class="layer-bar" style="--delay: 0.4s;"></div> <div class="layer-bar" style="--delay: 3"></div>
<div class="layer-bar" style="--delay: 0.5s;"></div> <div class="layer-bar" style="--delay: 4"></div>
<div class="layer-bar" style="--delay: 0.6s;"></div> <div class="layer-bar" style="--delay: 5"></div>
<div class="layer-bar" style="--delay: 0.7s;"></div> <div class="layer-bar" style="--delay: 6"></div>
<div class="layer-bar" style="--delay: 0.8s;"></div> <div class="layer-bar" style="--delay: 7"></div>
<div class="layer-bar" style="--delay: 0.9s;"></div> <div class="layer-bar" style="--delay: 8"></div>
</div> </div>
</div> </div>
<div class="tech-content"> <div class="tech-content">
<span class="section-tag reveal-fade"> <span class="section-tag reveal-fade">טכנולוגיה מתקדמת</span>
<span class="tag-icon">◈</span> <h2 id="tech-heading" class="section-title gradient-text reveal-fade">שיחול עד 9 שכבות</h2>
טכנולוגיה מתקדמת
</span>
<h2 id="tech-heading" class="section-title reveal-fade gradient-text">שיחול עד 9 שכבות</h2>
<p class="tech-desc reveal-fade">אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH, ומספקים פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה כגון בשר ומוצרי חלב.</p> <p class="tech-desc reveal-fade">אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH, ומספקים פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה כגון בשר ומוצרי חלב.</p>
<ul class="tech-features"> <ul class="tech-features">
<li class="reveal-fade"> <li class="reveal-fade">
@@ -324,9 +278,7 @@
</svg> </svg>
</div> </div>
<span>הדפסה עד 10 צבעים באיכות HD</span> <span>הדפסה עד 10 צבעים באיכות HD</span>
<div class="feature-progress"> <div class="feature-progress" style="--progress: 100%"></div>
<div class="progress-bar" style="--width: 100%;"></div>
</div>
</li> </li>
<li class="reveal-fade"> <li class="reveal-fade">
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
@@ -335,9 +287,7 @@
</svg> </svg>
</div> </div>
<span>גלופות HD NX ללא שפכים</span> <span>גלופות HD NX ללא שפכים</span>
<div class="feature-progress"> <div class="feature-progress" style="--progress: 100%"></div>
<div class="progress-bar" style="--width: 90%;"></div>
</div>
</li> </li>
<li class="reveal-fade"> <li class="reveal-fade">
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
@@ -346,9 +296,7 @@
</svg> </svg>
</div> </div>
<span>ידידותי לסביבה</span> <span>ידידותי לסביבה</span>
<div class="feature-progress"> <div class="feature-progress" style="--progress: 100%"></div>
<div class="progress-bar" style="--width: 85%;"></div>
</div>
</li> </li>
<li class="reveal-fade"> <li class="reveal-fade">
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
@@ -357,9 +305,7 @@
</svg> </svg>
</div> </div>
<span>מחירים תחרותיים</span> <span>מחירים תחרותיים</span>
<div class="feature-progress"> <div class="feature-progress" style="--progress: 100%"></div>
<div class="progress-bar" style="--width: 95%;"></div>
</div>
</li> </li>
</ul> </ul>
<a href="technology.html" class="btn btn-primary btn-glow reveal-fade">עוד על הטכנולוגיה</a> <a href="technology.html" class="btn btn-primary btn-glow reveal-fade">עוד על הטכנולוגיה</a>
@@ -368,96 +314,79 @@
</div> </div>
</section> </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"> <section class="clients-preview" aria-labelledby="clients-heading">
<div class="container"> <div class="container">
<header class="section-header reveal-fade"> <header class="section-header reveal-fade">
<span class="section-tag"> <span class="section-tag">לקוחות</span>
<span class="tag-icon">◈</span>
לקוחות
</span>
<h2 id="clients-heading" class="section-title gradient-text">לקוחות שסומכים עלינו</h2> <h2 id="clients-heading" class="section-title gradient-text">לקוחות שסומכים עלינו</h2>
<p class="section-desc">שיתופי פעולה ארוכי טווח עם מותגים מובילים בתעשיית המזון הישראלית</p> <p class="section-desc">שיתופי פעולה ארוכי טווח עם מותגים מובילים בתעשיית המזון הישראלית</p>
</header> </header>
<div class="clients-logos-grid reveal-fade"> <div class="clients-logo-grid reveal-fade">
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ב</div>
<span class="logo-letter">ב</span> <span class="logo-name">מאפיית ברמן</span>
<span class="logo-name">מאפיית ברמן</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ד</div>
<span class="logo-letter">ד</span> <span class="logo-name">דגנית</span>
<span class="logo-name">דגנית</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ח</div>
<span class="logo-letter">ח</span> <span class="logo-name">חסלט</span>
<span class="logo-name">חסלט</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">י</div>
<span class="logo-letter">י</span> <span class="logo-name">יבולי הכפר</span>
<span class="logo-name">יבולי הכפר</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">א</div>
<span class="logo-letter">א</span> <span class="logo-name">אסיף</span>
<span class="logo-name">אסיף</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ח</div>
<span class="logo-letter">ח</span> <span class="logo-name">חטיפי העמק</span>
<span class="logo-name">חטיפי העמק</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">פ</div>
<span class="logo-letter">פ</span> <span class="logo-name">פרג</span>
<span class="logo-name">פרג</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ש</div>
<span class="logo-letter">ש</span> <span class="logo-name">שיבולים</span>
<span class="logo-name">שיבולים</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">מ</div>
<span class="logo-letter">מ</span> <span class="logo-name">מאיר בייגל</span>
<span class="logo-name">מאיר בייגל</span>
</div>
</div> </div>
<div class="client-logo-card" data-tilt> <div class="client-logo-card glass-card" data-tilt>
<div class="logo-inner"> <div class="logo-letter">ג</div>
<span class="logo-letter">ג</span> <span class="logo-name">גילרו</span>
<span class="logo-name">גילרו</span>
</div>
</div> </div>
</div> </div>
<div class="clients-cta reveal-fade"> <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>
</div> </div>
</section> </section>
<section class="cta-section" aria-labelledby="cta-heading"> <section class="cta-section" aria-labelledby="cta-heading">
<div class="cta-bg" aria-hidden="true"> <div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div> <div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb cta-orb-2"></div> <div class="cta-gradient-orb secondary"></div>
</div> </div>
<div class="container"> <div class="container">
<div class="cta-content reveal-fade"> <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> <p class="cta-desc">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם אישית</p>
<div class="cta-actions"> <div class="cta-actions">
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a> <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"> <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"/> <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> </svg>
@@ -470,7 +399,6 @@
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container"> <div class="container">
<div class="footer-grid"> <div class="footer-grid">
<div class="footer-brand"> <div class="footer-brand">
+24 -41
View File
@@ -14,7 +14,7 @@
<body> <body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a> <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> <div class="particle"></div>
<div class="particle"></div> <div class="particle"></div>
@@ -52,11 +52,8 @@
<main id="main-content"> <main id="main-content">
<section class="page-hero"> <section class="page-hero">
<div class="container"> <div class="container">
<span class="section-tag reveal-fade"> <span class="section-tag reveal-fade">מוצרים</span>
<span class="tag-icon">◈</span> <h1 class="page-title gradient-text reveal-fade">פתרונות אריזה</h1>
מוצרים
</span>
<h1 class="page-title reveal-fade gradient-text">פתרונות אריזה</h1>
<p class="page-subtitle reveal-fade">מגוון רחב של פתרונות אריזה גמישה לכל תעשייה</p> <p class="page-subtitle reveal-fade">מגוון רחב של פתרונות אריזה גמישה לכל תעשייה</p>
</div> </div>
</section> </section>
@@ -65,16 +62,12 @@
<h2 id="products-heading" class="visually-hidden">קטגוריות מוצרים</h2> <h2 id="products-heading" class="visually-hidden">קטגוריות מוצרים</h2>
<div class="container"> <div class="container">
<div class="products-grid"> <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"> <div class="product-visual">
<img <img src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=800&q=80" alt="אריזות מזון גמישות" loading="lazy">
src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80"
alt="אריזות מזון גמישות"
loading="lazy"
>
</div> </div>
<div class="product-content"> <div class="product-content">
<h3 class="product-title gradient-text">אריזות למזון</h3> <h3 class="product-title">אריזות למזון</h3>
<p class="product-desc">פתרונות אריזה מתקדמים לתעשיית המזון עם חסם גבוה לשמירה על טריות ואיכות המוצר.</p> <p class="product-desc">פתרונות אריזה מתקדמים לתעשיית המזון עם חסם גבוה לשמירה על טריות ואיכות המוצר.</p>
<ul class="product-list"> <ul class="product-list">
<li>חטיפים ואגוזים</li> <li>חטיפים ואגוזים</li>
@@ -89,13 +82,9 @@
</div> </div>
</article> </article>
<article class="product-card reveal-slide glass-card" data-tilt> <article class="product-card reveal-slide" data-tilt>
<div class="product-visual"> <div class="product-visual">
<img <img src="https://images.unsplash.com/photo-1556227702-d1e4e7b5c232?auto=format&fit=crop&w=600&q=80" alt="מוצרי ניקיון ארוזים" loading="lazy">
src="https://images.unsplash.com/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=600&q=80"
alt="מוצרי היגיינה וניקיון"
loading="lazy"
>
</div> </div>
<div class="product-content"> <div class="product-content">
<h3 class="product-title">היגיינה וחומרי ניקוי</h3> <h3 class="product-title">היגיינה וחומרי ניקוי</h3>
@@ -109,13 +98,9 @@
</div> </div>
</article> </article>
<article class="product-card reveal-slide glass-card" data-tilt> <article class="product-card reveal-slide" data-tilt>
<div class="product-visual"> <div class="product-visual">
<img <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80" alt="שקיות עומדות" loading="lazy">
src="https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&w=600&q=80"
alt="שקיות Stand-up pouches"
loading="lazy"
>
</div> </div>
<div class="product-content"> <div class="product-content">
<h3 class="product-title">שקיות מוכנות</h3> <h3 class="product-title">שקיות מוכנות</h3>
@@ -129,13 +114,9 @@
</div> </div>
</article> </article>
<article class="product-card reveal-slide glass-card" data-tilt> <article class="product-card reveal-slide" data-tilt>
<div class="product-visual"> <div class="product-visual">
<img <img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?auto=format&fit=crop&w=600&q=80" alt="ירקות ארוזים" loading="lazy">
src="https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=600&q=80"
alt="ירקות ופירות ארוזים"
loading="lazy"
>
</div> </div>
<div class="product-content"> <div class="product-content">
<h3 class="product-title">פירות וירקות</h3> <h3 class="product-title">פירות וירקות</h3>
@@ -149,13 +130,16 @@
</div> </div>
</article> </article>
<article class="product-card reveal-slide glass-card" data-tilt> <article class="product-card reveal-slide" data-tilt>
<div class="product-visual"> <div class="product-visual">
<img <svg viewBox="0 0 300 200" fill="none">
src="https://images.unsplash.com/photo-1607166452427-7e4477079cb9?auto=format&fit=crop&w=600&q=80" <rect width="300" height="200" fill="#16213e"/>
alt="קופסאות קרטון מעוצבות" <path d="M80 50 L220 50 L220 150 L80 150 Z" fill="none" stroke="#0ea5e9" stroke-width="2"/>
loading="lazy" <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>
<div class="product-content"> <div class="product-content">
<h3 class="product-title">קופסאות קרטון</h3> <h3 class="product-title">קופסאות קרטון</h3>
@@ -174,12 +158,12 @@
<section class="cta-section" aria-labelledby="products-cta-heading"> <section class="cta-section" aria-labelledby="products-cta-heading">
<div class="cta-bg" aria-hidden="true"> <div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div> <div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb cta-orb-2"></div> <div class="cta-gradient-orb secondary"></div>
</div> </div>
<div class="container"> <div class="container">
<div class="cta-content reveal-fade"> <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> <p class="cta-desc">ספרו לנו על הצרכים שלכם ונציע את הפתרון המושלם</p>
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a> <a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div> </div>
@@ -188,7 +172,6 @@
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container"> <div class="container">
<div class="footer-grid"> <div class="footer-grid">
<div class="footer-brand"> <div class="footer-brand">
+82 -155
View File
@@ -47,7 +47,7 @@
// Check for reduced motion preference // Check for reduced motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Scroll Reveal Animation with staggered delays // Scroll Reveal Animation
const observerOptions = { const observerOptions = {
root: null, root: null,
rootMargin: '0px 0px -80px 0px', rootMargin: '0px 0px -80px 0px',
@@ -55,29 +55,16 @@
}; };
const revealObserver = new IntersectionObserver(function(entries) { const revealObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry, index) { entries.forEach(function(entry) {
if (entry.isIntersecting) { if (entry.isIntersecting) {
// Add staggered delay for grid items entry.target.classList.add('revealed');
const delay = entry.target.dataset.delay || 0;
setTimeout(function() {
entry.target.classList.add('revealed');
}, delay * 100);
revealObserver.unobserve(entry.target); revealObserver.unobserve(entry.target);
} }
}); });
}, observerOptions); }, observerOptions);
if (!prefersReducedMotion) { if (!prefersReducedMotion) {
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el, index) { document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) {
// 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;
}
revealObserver.observe(el); revealObserver.observe(el);
}); });
} else { } else {
@@ -86,60 +73,45 @@
}); });
} }
// Counter Animation // Count Up Animation for Stats
function animateCounter(element) { function countUp(element, target, duration) {
const target = parseInt(element.dataset.count, 10); if (prefersReducedMotion) {
const duration = 2000; element.textContent = target;
const start = 0; return;
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 {
element.textContent = target;
}
} }
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 statsObserver = new IntersectionObserver(function(entries) {
const counterObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) { entries.forEach(function(entry) {
if (entry.isIntersecting && !prefersReducedMotion) { if (entry.isIntersecting) {
const counters = entry.target.querySelectorAll('[data-count]'); const statNumbers = entry.target.querySelectorAll('.stat-number[data-count]');
counters.forEach(function(counter) { statNumbers.forEach(function(stat) {
if (!counter.classList.contains('counted')) { const target = parseInt(stat.getAttribute('data-count'), 10);
counter.classList.add('counted'); countUp(stat, target, 2000);
animateCounter(counter);
}
}); });
counterObserver.unobserve(entry.target); statsObserver.unobserve(entry.target);
} }
}); });
}, { threshold: 0.5 }); }, { threshold: 0.5 });
const statsSection = document.querySelector('.hero-stats'); const heroStats = document.querySelector('.hero-stats');
if (statsSection) { if (heroStats) {
counterObserver.observe(statsSection); statsObserver.observe(heroStats);
} }
const experienceBadge = document.querySelector('.about-experience-badge'); // Layer animation observer
if (experienceBadge) {
counterObserver.observe(experienceBadge);
}
// Layer animation observer for tech section
const layerObserver = new IntersectionObserver(function(entries) { const layerObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) { entries.forEach(function(entry) {
if (entry.isIntersecting) { if (entry.isIntersecting) {
@@ -154,24 +126,6 @@
layerObserver.observe(layersVisual); 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 // Header scroll effect
const header = document.querySelector('.site-header'); const header = document.querySelector('.site-header');
let lastScrollY = 0; let lastScrollY = 0;
@@ -190,30 +144,15 @@
window.addEventListener('scroll', updateHeader, { passive: true }); window.addEventListener('scroll', updateHeader, { passive: true });
// Parallax effect for particles // 3D Tilt Effect for Cards
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
if (!prefersReducedMotion) { if (!prefersReducedMotion) {
document.querySelectorAll('[data-tilt]').forEach(function(card) { document.querySelectorAll('[data-tilt]').forEach(function(card) {
card.addEventListener('mousemove', function(e) { card.addEventListener('mousemove', function(e) {
const rect = card.getBoundingClientRect(); const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left; const x = e.clientX - rect.left;
const y = e.clientY - rect.top; const y = e.clientY - rect.top;
const centerX = rect.width / 2; const centerX = rect.width / 2;
const centerY = rect.height / 2; const centerY = rect.height / 2;
const rotateX = (y - centerY) / 20; const rotateX = (y - centerY) / 20;
const rotateY = (centerX - x) / 20; const rotateY = (centerX - x) / 20;
@@ -221,30 +160,35 @@
}); });
card.addEventListener('mouseleave', function() { card.addEventListener('mouseleave', function() {
card.style.transform = ''; card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
}); });
}); });
} }
// Ripple effect for buttons // Parallax effect for particles
document.querySelectorAll('.btn-glow').forEach(function(btn) { if (!prefersReducedMotion) {
btn.addEventListener('click', function(e) { window.addEventListener('scroll', function() {
const ripple = btn.querySelector('.btn-ripple'); const particles = document.querySelectorAll('.particle');
if (ripple) { const scrollY = window.scrollY;
ripple.style.transform = 'scale(0)';
ripple.style.opacity = '0';
setTimeout(function() { particles.forEach(function(particle, index) {
ripple.style.transform = 'scale(2)'; const speed = 0.05 + (index * 0.02);
ripple.style.opacity = '1'; particle.style.transform = `translateY(${scrollY * speed}px)`;
}, 10); });
}, { passive: true });
}
setTimeout(function() { // Feature progress bars animation
ripple.style.transform = 'scale(0)'; const featureObserver = new IntersectionObserver(function(entries) {
ripple.style.opacity = '0'; entries.forEach(function(entry) {
}, 500); if (entry.isIntersecting) {
entry.target.classList.add('revealed');
} }
}); });
}, { threshold: 0.5 });
document.querySelectorAll('.tech-features li').forEach(function(li) {
featureObserver.observe(li);
}); });
// Form handling // Form handling
@@ -277,10 +221,12 @@
submitBtn.textContent = 'שולח...'; submitBtn.textContent = 'שולח...';
submitBtn.disabled = true; submitBtn.disabled = true;
submitBtn.style.opacity = '0.7';
setTimeout(function() { setTimeout(function() {
submitBtn.textContent = 'נשלח בהצלחה! ✓'; submitBtn.textContent = 'נשלח בהצלחה!';
submitBtn.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)'; submitBtn.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)';
submitBtn.style.opacity = '1';
setTimeout(function() { setTimeout(function() {
submitBtn.textContent = originalText; submitBtn.textContent = originalText;
@@ -296,14 +242,6 @@
this.style.borderColor = ''; this.style.borderColor = '';
this.style.boxShadow = ''; 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 // Ripple effect on buttons
if (!prefersReducedMotion) { document.querySelectorAll('.btn-glow').forEach(function(btn) {
const grids = [ btn.addEventListener('click', function(e) {
'.expertise-grid .expertise-card', const ripple = this.querySelector('.btn-ripple');
'.products-grid .product-card', if (ripple) {
'.advantages-grid .advantage-item', ripple.style.transform = 'scale(0)';
'.industries-grid .industry-card', ripple.style.opacity = '0';
'.clients-logos-grid .client-logo-card' setTimeout(function() {
]; ripple.style.transform = '';
ripple.style.opacity = '';
}, 10);
}
});
});
grids.forEach(function(selector) { // Add staggered animation delay to grid items
document.querySelectorAll(selector).forEach(function(card, index) { if (!prefersReducedMotion) {
card.style.transitionDelay = (index * 0.1) + 's'; 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';
}); });
} }
// Typewriter effect for hero title (optional enhancement) // Logo cards hover glow effect
const typewriterElement = document.querySelector('.typewriter'); document.querySelectorAll('.client-logo-card').forEach(function(card) {
if (typewriterElement && !prefersReducedMotion) { card.addEventListener('mouseenter', function() {
const text = typewriterElement.textContent; this.style.filter = 'brightness(1.1)';
typewriterElement.textContent = ''; });
typewriterElement.style.opacity = '1'; card.addEventListener('mouseleave', function() {
this.style.filter = '';
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> <body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a> <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> <div class="particle"></div>
<div class="particle"></div> <div class="particle"></div>
@@ -52,11 +52,8 @@
<main id="main-content"> <main id="main-content">
<section class="page-hero"> <section class="page-hero">
<div class="container"> <div class="container">
<span class="section-tag reveal-fade"> <span class="section-tag reveal-fade">טכנולוגיה</span>
<span class="tag-icon">◈</span> <h1 class="page-title gradient-text reveal-fade">טכנולוגיה מתקדמת</h1>
טכנולוגיה
</span>
<h1 class="page-title reveal-fade gradient-text">טכנולוגיה מתקדמת</h1>
<p class="page-subtitle reveal-fade">חדשנות וטכנולוגיה מתקדמת לתוצאות מעולות</p> <p class="page-subtitle reveal-fade">חדשנות וטכנולוגיה מתקדמת לתוצאות מעולות</p>
</div> </div>
</section> </section>
@@ -65,30 +62,11 @@
<h2 id="tech-details-heading" class="visually-hidden">פרטי טכנולוגיה</h2> <h2 id="tech-details-heading" class="visually-hidden">פרטי טכנולוגיה</h2>
<div class="container"> <div class="container">
<div class="tech-feature reveal-fade"> <div class="tech-feature reveal-fade">
<div class="tech-feature-visual"> <div class="tech-feature-visual" 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">
<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> </div>
<div class="tech-feature-content"> <div class="tech-feature-content">
<h3 class="gradient-text">שיחול עד 9 שכבות</h3> <h3>שיחול עד 9 שכבות</h3>
<p>אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH. טכנולוגיה זו מאפשרת לנו לספק פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה, כגון בשר ומוצרי חלב.</p> <p>אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH. טכנולוגיה זו מאפשרת לנו לספק פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה, כגון בשר ומוצרי חלב.</p>
<div class="materials-list"> <div class="materials-list">
<span class="material">PE</span> <span class="material">PE</span>
@@ -103,31 +81,27 @@
</div> </div>
<div class="tech-feature reverse reveal-fade"> <div class="tech-feature reverse reveal-fade">
<div class="tech-feature-visual"> <div class="tech-feature-visual" aria-hidden="true">
<div class="tech-image-wrapper"> <svg viewBox="0 0 400 300" fill="none">
<img <rect width="400" height="300" fill="#16213e"/>
src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80" <g class="print-colors">
alt="הדפסה צבעונית באיכות גבוהה" <circle cx="80" cy="80" r="30" fill="#FF6B6B" opacity="0.8"/>
loading="lazy" <circle cx="120" cy="90" r="30" fill="#4ECDC4" opacity="0.8"/>
class="tech-image" <circle cx="160" cy="80" r="30" fill="#45B7D1" opacity="0.8"/>
> <circle cx="200" cy="90" r="30" fill="#96CEB4" opacity="0.8"/>
<div class="tech-image-overlay"></div> <circle cx="240" cy="80" r="30" fill="#FFEAA7" opacity="0.8"/>
</div> <circle cx="280" cy="90" r="30" fill="#DDA0DD" opacity="0.8"/>
<div class="color-dots" aria-hidden="true"> <circle cx="320" cy="80" r="30" fill="#98D8C8" opacity="0.8"/>
<span class="color-dot" style="background: #FF6B6B;"></span> <circle cx="100" cy="150" r="30" fill="#F7DC6F" opacity="0.8"/>
<span class="color-dot" style="background: #4ECDC4;"></span> <circle cx="140" cy="160" r="30" fill="#BB8FCE" opacity="0.8"/>
<span class="color-dot" style="background: #45B7D1;"></span> <circle cx="180" cy="150" r="30" fill="#85C1E9" opacity="0.8"/>
<span class="color-dot" style="background: #96CEB4;"></span> </g>
<span class="color-dot" style="background: #FFEAA7;"></span> <rect x="60" y="200" width="280" height="60" rx="8" fill="none" stroke="#0ea5e9" stroke-width="2"/>
<span class="color-dot" style="background: #DDA0DD;"></span> <text x="200" y="238" text-anchor="middle" fill="#fff" font-size="16">10 צבעים באיכות HD</text>
<span class="color-dot" style="background: #98D8C8;"></span> </svg>
<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> </div>
<div class="tech-feature-content"> <div class="tech-feature-content">
<h3 class="gradient-text">הדפסה עד 10 צבעים</h3> <h3>הדפסה עד 10 צבעים</h3>
<p>אנו מציעים טכנולוגיית דפוס חדישה עם ארבע מכונות המסוגלות להדפיס עד 10 צבעים באמצעות גלופות HD NX. איכות דפוס גבוהה במיוחד עם רוחב יריעה של 1,450 מ"מ ופסיעה של 1,250 מ"מ.</p> <p>אנו מציעים טכנולוגיית דפוס חדישה עם ארבע מכונות המסוגלות להדפיס עד 10 צבעים באמצעות גלופות HD NX. איכות דפוס גבוהה במיוחד עם רוחב יריעה של 1,450 מ"מ ופסיעה של 1,250 מ"מ.</p>
<ul class="tech-specs"> <ul class="tech-specs">
<li><strong>רוחב יריעה:</strong> 1,450 מ"מ</li> <li><strong>רוחב יריעה:</strong> 1,450 מ"מ</li>
@@ -138,19 +112,20 @@
</div> </div>
<div class="tech-feature reveal-fade"> <div class="tech-feature reveal-fade">
<div class="tech-feature-visual"> <div class="tech-feature-visual" aria-hidden="true">
<div class="tech-image-wrapper"> <svg viewBox="0 0 400 300" fill="none">
<img <rect width="400" height="300" fill="#16213e"/>
src="https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?auto=format&fit=crop&w=600&q=80" <circle cx="200" cy="150" r="100" fill="none" stroke="#0ea5e9" stroke-width="2"/>
alt="טכנולוגיה ירוקה וידידותית לסביבה" <circle cx="200" cy="150" r="70" fill="none" stroke="#d4af37" stroke-width="2"/>
loading="lazy" <circle cx="200" cy="150" r="40" fill="#0ea5e9" opacity="0.2"/>
class="tech-image" <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"/>
<div class="tech-image-overlay"></div> <circle cx="200" cy="150" r="15" fill="#0ea5e9"/>
</div> <path d="M190 150l7 7 13-14" stroke="#1a1a2e" stroke-width="2"/>
</svg>
</div> </div>
<div class="tech-feature-content"> <div class="tech-feature-content">
<h3 class="gradient-text">גלופות HD NX</h3> <h3>גלופות HD NX</h3>
<p>אנו מספקים יתרונות ייחודיים ללקוחותינו בכך שיש בבעלותנו אמצעי ייצור גלופות. אנו עושים שימוש בטכנולוגיית HD NX המשדרגת את איכות הדפסת הפלקסו לרמה גבוהה במיוחד.</p> <p>אנו מספקים יתרונות ייחודיים ללקוחותינו בכך שיש בבעלותנו אמצעי ייצור גלופות. אנו עושים שימוש בטכנולוגיית HD NX המשדרגת את איכות הדפסת הפלקסו לרמה גבוהה במיוחד.</p>
<div class="eco-badge"> <div class="eco-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <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"> <section class="advantages" aria-labelledby="advantages-heading">
<div class="container"> <div class="container">
<header class="section-header reveal-fade"> <header class="section-header reveal-fade">
<span class="section-tag"> <span class="section-tag">יתרונות</span>
<span class="tag-icon">◈</span>
יתרונות
</span>
<h2 id="advantages-heading" class="section-title gradient-text">למה לעבוד איתנו?</h2> <h2 id="advantages-heading" class="section-title gradient-text">למה לעבוד איתנו?</h2>
</header> </header>
<div class="advantages-grid"> <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> <div class="advantage-number" aria-hidden="true">01</div>
<h3>מחירים תחרותיים</h3> <h3>מחירים תחרותיים</h3>
<p>עבודה ישירה עם יצרנים טורקיים מובילים מאפשרת לנו להציע מחירים תחרותיים במיוחד.</p> <p>עבודה ישירה עם יצרנים טורקיים מובילים מאפשרת לנו להציע מחירים תחרותיים במיוחד.</p>
</div> </div>
<div class="advantage-item reveal-slide glass-card"> <div class="advantage-item reveal-slide">
<div class="advantage-number" aria-hidden="true">02</div> <div class="advantage-number" aria-hidden="true">02</div>
<h3>איכות גבוהה</h3> <h3>איכות גבוהה</h3>
<p>טכנולוגיות מתקדמות וחומרים איכותיים לתוצאות מעולות בכל פרויקט.</p> <p>טכנולוגיות מתקדמות וחומרים איכותיים לתוצאות מעולות בכל פרויקט.</p>
</div> </div>
<div class="advantage-item reveal-slide glass-card"> <div class="advantage-item reveal-slide">
<div class="advantage-number" aria-hidden="true">03</div> <div class="advantage-number" aria-hidden="true">03</div>
<h3>שירות אישי</h3> <h3>שירות אישי</h3>
<p>ליווי צמוד מהייעוץ הראשוני ועד האספקה הסופית.</p> <p>ליווי צמוד מהייעוץ הראשוני ועד האספקה הסופית.</p>
</div> </div>
<div class="advantage-item reveal-slide glass-card"> <div class="advantage-item reveal-slide">
<div class="advantage-number" aria-hidden="true">04</div> <div class="advantage-number" aria-hidden="true">04</div>
<h3>ידידות לסביבה</h3> <h3>ידידות לסביבה</h3>
<p>טכנולוגיות ירוקות ללא שפכים ועם צמצום השפעה סביבתית.</p> <p>טכנולוגיות ירוקות ללא שפכים ועם צמצום השפעה סביבתית.</p>
@@ -200,12 +172,12 @@
<section class="cta-section" aria-labelledby="tech-cta-heading"> <section class="cta-section" aria-labelledby="tech-cta-heading">
<div class="cta-bg" aria-hidden="true"> <div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div> <div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb cta-orb-2"></div> <div class="cta-gradient-orb secondary"></div>
</div> </div>
<div class="container"> <div class="container">
<div class="cta-content reveal-fade"> <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> <p class="cta-desc">נשמח להסביר על הטכנולוגיות שלנו ולהתאים פתרון לצרכים שלכם</p>
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a> <a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div> </div>
@@ -214,7 +186,6 @@
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container"> <div class="container">
<div class="footer-grid"> <div class="footer-grid">
<div class="footer-brand"> <div class="footer-brand">
@@ -248,71 +219,5 @@
</footer> </footer>
<script src="script.js"></script> <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> </body>
</html> </html>