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

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

### Hero Sectio
This commit is contained in:
2026-10-11 16:52:56 +00:00
parent 443264b72a
commit f3497f0671
8 changed files with 1860 additions and 582 deletions
+134 -7
View File
@@ -14,6 +14,15 @@
<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="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<header class="site-header"> <header class="site-header">
<div class="header-container"> <div class="header-container">
<a href="index.html" class="logo"> <a href="index.html" class="logo">
@@ -45,8 +54,11 @@
<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> <span class="section-tag reveal-fade">
<h1 class="page-title reveal-fade">הסיפור שלי</h1> <span class="tag-icon">◈</span>
אודות
</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>
@@ -55,17 +67,38 @@
<div class="container"> <div class="container">
<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="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>
</div>
</div>
<div class="story-block reveal-fade"> <div class="story-block reveal-fade">
<h2>מהנדס ייצור עצמאי מאז 2006</h2> <h3>מהנדס ייצור עצמאי מאז 2006</h3>
<p>שמי עמוס רוזמרין, ואני מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות, ההיגיינה, הקוסמטיקה וחומרי הניקוי.</p> <p>שמי עמוס רוזמרין, ואני מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות, ההיגיינה, הקוסמטיקה וחומרי הניקוי.</p>
</div> </div>
<div class="story-block reveal-fade"> <div class="story-block reveal-fade">
<h2>הגישה שלי</h2> <h3>הגישה שלי</h3>
<p>המשימה שלי היא להבטיח אריזה אמינה, יעילה וחסכונית — המשמרת את איכות המוצר, עומדת בתקנים ומותאמת לקו הייצור שלכם.</p> <p>המשימה שלי היא להבטיח אריזה אמינה, יעילה וחסכונית — המשמרת את איכות המוצר, עומדת בתקנים ומותאמת לקו הייצור שלכם.</p>
<p>אני פועל בשקיפות, דיוק ושירות אישי, עם דגש על איכות תהליך, צמצום תקלות וקיצור זמני הגעה לשוק.</p> <p>אני פועל בשקיפות, דיוק ושירות אישי, עם דגש על איכות תהליך, צמצום תקלות וקיצור זמני הגעה לשוק.</p>
</div> </div>
<div class="story-block reveal-fade"> <div class="story-block reveal-fade">
<h2>שיתוף פעולה בינלאומי</h2> <h3>שיתוף פעולה בינלאומי</h3>
<p>במהלך השנים פיתחתי שיתופי פעולה הדוקים עם יצרנים טורקיים מובילים, המאפשרים לי להציע מחירים תחרותיים ואיכות גבוהה ללקוחותיי בישראל.</p> <p>במהלך השנים פיתחתי שיתופי פעולה הדוקים עם יצרנים טורקיים מובילים, המאפשרים לי להציע מחירים תחרותיים ואיכות גבוהה ללקוחותיי בישראל.</p>
</div> </div>
</div> </div>
@@ -99,23 +132,38 @@
<h3>שירות אישי</h3> <h3>שירות אישי</h3>
<p>ליווי צמוד והתאמה מדויקת לצרכים הייחודיים של כל לקוח</p> <p>ליווי צמוד והתאמה מדויקת לצרכים הייחודיים של כל לקוח</p>
</div> </div>
<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"/>
</svg>
</div>
<h3>מקצועיות</h3>
<p>ידע טכני מעמיק וניסיון רב שנים בתעשייה</p>
</div>
</aside> </aside>
</div> </div>
</div> </div>
</section> </section>
<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-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></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">בואו נדבר על הפרויקט שלכם</h2> <h2 id="about-cta-heading" class="cta-title gradient-text">בואו נדבר על הפרויקט שלכם</h2>
<p class="cta-desc">אשמח לשמוע על הצרכים שלכם ולהציע פתרון אריזה מותאם</p> <p class="cta-desc">אשמח לשמוע על הצרכים שלכם ולהציע פתרון אריזה מותאם</p>
<a href="contact.html" class="btn btn-primary btn-large">בואו נדבר</a> <a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div> </div>
</div> </div>
</section> </section>
</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">
@@ -149,5 +197,84 @@
</footer> </footer>
<script src="script.js"></script> <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 {
position: relative;
flex-shrink: 0;
}
.profile-image {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--color-accent);
box-shadow: var(--shadow-glow);
}
.profile-decoration {
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;
}
}
</style>
</body> </body>
</html> </html>
+80 -32
View File
@@ -14,6 +14,13 @@
<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="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<header class="site-header"> <header class="site-header">
<div class="header-container"> <div class="header-container">
<a href="index.html" class="logo"> <a href="index.html" class="logo">
@@ -45,8 +52,11 @@
<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> <span class="section-tag reveal-fade">
<h1 class="page-title reveal-fade">לקוחות שסומכים עלינו</h1> <span class="tag-icon">◈</span>
לקוחות
</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>
@@ -54,36 +64,66 @@
<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-cloud reveal-fade"> <div class="clients-logos-grid reveal-fade">
<div class="cloud-item cloud-large"> <div class="client-logo-card" data-tilt>
<span>מאפיית ברמן</span> <div class="logo-inner">
<span class="logo-letter">ב</span>
<span class="logo-name">מאפיית ברמן</span>
</div>
</div> </div>
<div class="cloud-item cloud-medium"> <div class="client-logo-card" data-tilt>
<span>דגנית</span> <div class="logo-inner">
<span class="logo-letter">ד</span>
<span class="logo-name">דגנית</span>
</div>
</div> </div>
<div class="cloud-item cloud-large"> <div class="client-logo-card" data-tilt>
<span>חסלט</span> <div class="logo-inner">
<span class="logo-letter">ח</span>
<span class="logo-name">חסלט</span>
</div>
</div> </div>
<div class="cloud-item cloud-medium"> <div class="client-logo-card" data-tilt>
<span>יבולי הכפר</span> <div class="logo-inner">
<span class="logo-letter">י</span>
<span class="logo-name">יבולי הכפר</span>
</div>
</div> </div>
<div class="cloud-item cloud-small"> <div class="client-logo-card" data-tilt>
<span>אסיף</span> <div class="logo-inner">
<span class="logo-letter">א</span>
<span class="logo-name">אסיף</span>
</div>
</div> </div>
<div class="cloud-item cloud-large"> <div class="client-logo-card" data-tilt>
<span>חטיפי העמק</span> <div class="logo-inner">
<span class="logo-letter">ח</span>
<span class="logo-name">חטיפי העמק</span>
</div>
</div> </div>
<div class="cloud-item cloud-medium"> <div class="client-logo-card" data-tilt>
<span>פרג</span> <div class="logo-inner">
<span class="logo-letter">פ</span>
<span class="logo-name">פרג</span>
</div>
</div> </div>
<div class="cloud-item cloud-small"> <div class="client-logo-card" data-tilt>
<span>שיבולים</span> <div class="logo-inner">
<span class="logo-letter">ש</span>
<span class="logo-name">שיבולים</span>
</div>
</div> </div>
<div class="cloud-item cloud-large"> <div class="client-logo-card" data-tilt>
<span>מאיר בייגל</span> <div class="logo-inner">
<span class="logo-letter">מ</span>
<span class="logo-name">מאיר בייגל</span>
</div>
</div> </div>
<div class="cloud-item cloud-medium"> <div class="client-logo-card" data-tilt>
<span>גילרו</span> <div class="logo-inner">
<span class="logo-letter">ג</span>
<span class="logo-name">גילרו</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -92,11 +132,14 @@
<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> <span class="section-tag">
<h2 id="industries-heading" class="section-title">אנחנו עובדים עם</h2> <span class="tag-icon">◈</span>
תעשיות
</span>
<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"> <div class="industry-card reveal-slide glass-card">
<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"/>
@@ -104,7 +147,7 @@
</svg> </svg>
<span>תעשיית המזון</span> <span>תעשיית המזון</span>
</div> </div>
<div class="industry-card reveal-slide"> <div class="industry-card reveal-slide glass-card">
<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"/>
@@ -112,7 +155,7 @@
</svg> </svg>
<span>חקלאות</span> <span>חקלאות</span>
</div> </div>
<div class="industry-card reveal-slide"> <div class="industry-card reveal-slide glass-card">
<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"/>
@@ -120,7 +163,7 @@
</svg> </svg>
<span>קוסמטיקה</span> <span>קוסמטיקה</span>
</div> </div>
<div class="industry-card reveal-slide"> <div class="industry-card reveal-slide glass-card">
<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"/>
@@ -128,7 +171,7 @@
</svg> </svg>
<span>חומרי ניקוי</span> <span>חומרי ניקוי</span>
</div> </div>
<div class="industry-card reveal-slide"> <div class="industry-card reveal-slide glass-card">
<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"/>
@@ -141,17 +184,22 @@
</section> </section>
<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-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></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">רוצים להצטרף לרשימת הלקוחות?</h2> <h2 id="clients-cta-heading" class="cta-title gradient-text">רוצים להצטרף לרשימת הלקוחות?</h2>
<p class="cta-desc">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם</p> <p class="cta-desc">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם</p>
<a href="contact.html" class="btn btn-primary btn-large">בואו נדבר</a> <a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div> </div>
</div> </div>
</section> </section>
</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">
+21 -7
View File
@@ -14,6 +14,13 @@
<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="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<header class="site-header"> <header class="site-header">
<div class="header-container"> <div class="header-container">
<a href="index.html" class="logo"> <a href="index.html" class="logo">
@@ -45,8 +52,11 @@
<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> <span class="section-tag reveal-fade">
<h1 class="page-title reveal-fade">בואו נדבר</h1> <span class="tag-icon">◈</span>
צור קשר
</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>
@@ -58,7 +68,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"> <a href="tel:054-818-1092" class="contact-card glass-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"/>
@@ -69,7 +79,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"> <a href="mailto:amos.rosemarin@gmail.com" class="contact-card glass-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"/>
@@ -81,7 +91,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"> <div class="contact-card glass-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"/>
@@ -95,7 +105,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="contact-form reveal-fade"> <div class="contact-form glass-card reveal-fade">
<h3>שלחו הודעה</h3> <h3>שלחו הודעה</h3>
<form action="#" method="POST" novalidate> <form action="#" method="POST" novalidate>
<div class="form-group"> <div class="form-group">
@@ -127,7 +137,10 @@
<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">שליחה</button> <button type="submit" class="btn btn-primary btn-large btn-glow">
<span>שליחה</span>
<span class="btn-ripple"></span>
</button>
</form> </form>
</div> </div>
</div> </div>
@@ -136,6 +149,7 @@
</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">
+332 -144
View File
@@ -18,6 +18,18 @@
<body> <body>
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a> <a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<!-- Floating Particles Background -->
<div class="particles-container" 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>
</div>
<header class="site-header"> <header class="site-header">
<div class="header-container"> <div class="header-container">
<a href="index.html" class="logo"> <a href="index.html" class="logo">
@@ -49,126 +61,225 @@
<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">
<svg class="hero-pattern" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice"> <img
<defs> src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1920&q=80"
<linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%"> alt=""
<stop offset="0%" style="stop-color:#1a1a2e"/> class="hero-image"
<stop offset="100%" style="stop-color:#16213e"/> loading="eager"
</linearGradient> >
<pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"> <div class="hero-overlay"></div>
<path d="M 60 0 L 0 0 0 60" fill="none" stroke="#0ea5e9" stroke-width="0.5" opacity="0.15"/> <div class="hero-gradient-mesh"></div>
</pattern>
</defs>
<rect fill="url(#heroGrad)" width="800" height="600"/>
<rect fill="url(#grid)" width="800" height="600"/>
<g class="hero-shapes">
<rect x="600" y="100" width="120" height="180" rx="8" fill="none" stroke="#0ea5e9" stroke-width="1" opacity="0.3"/>
<rect x="650" y="80" width="100" height="160" rx="8" fill="none" stroke="#d4af37" stroke-width="1" opacity="0.2"/>
<rect x="80" y="350" width="140" height="200" rx="8" fill="none" stroke="#0ea5e9" stroke-width="1" opacity="0.25"/>
<path d="M700 400 Q720 350 750 380 Q780 410 760 450 Q740 490 700 470 Q660 450 680 410 Z" fill="#0ea5e9" opacity="0.08"/>
</g>
</svg>
</div> </div>
<div class="hero-content"> <div class="hero-content">
<div class="hero-badge reveal-fade">מהנדס ייצור עצמאי מאז 2006</div> <div class="hero-badge reveal-fade">
<h1 class="hero-title reveal-fade">פתרונות אריזה גמישה <span class="highlight">לתעשייה הישראלית</span></h1> <span class="badge-icon">✦</span>
מהנדס ייצור עצמאי מאז 2006
</div>
<h1 class="hero-title reveal-fade">
<span class="title-line typewriter">פתרונות אריזה גמישה</span>
<span class="highlight gradient-text">לתעשייה הישראלית</span>
</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">
<a href="contact.html" class="btn btn-primary">בואו נדבר</a> <a href="contact.html" class="btn btn-primary btn-glow">
<a href="products.html" class="btn btn-secondary">לכל המוצרים</a> <span>בואו נדבר</span>
<span class="btn-ripple"></span>
</a>
<a href="products.html" class="btn btn-secondary btn-glass">לכל המוצרים</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">18+</span> <span class="stat-number" data-count="18">0</span>
<span class="stat-plus">+</span>
<span class="stat-label">שנות ניסיון</span> <span class="stat-label">שנות ניסיון</span>
</div> </div>
<div class="stat"> <div class="stat">
<span class="stat-number">9</span> <span class="stat-number" data-count="9">0</span>
<span class="stat-label">שכבות שיחול</span> <span class="stat-label">שכבות שיחול</span>
</div> </div>
<div class="stat"> <div class="stat">
<span class="stat-number">10</span> <span class="stat-number" data-count="10">0</span>
<span class="stat-label">צבעי הדפסה</span> <span class="stat-label">צבעי הדפסה</span>
</div> </div>
</div> </div>
</div> </div>
<div class="scroll-indicator" aria-hidden="true"> <div class="scroll-indicator" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <div class="mouse">
<path d="M12 5v14M5 12l7 7 7-7"/> <div class="wheel"></div>
</svg> </div>
<span>גלול למטה</span>
</div> </div>
</section> </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>
</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> <span class="section-tag">
<h2 id="expertise-heading" class="section-title">פתרונות אריזה לכל תעשייה</h2> <span class="tag-icon">◈</span>
תחומי התמחות
</span>
<h2 id="expertise-heading" class="section-title gradient-text">פתרונות אריזה לכל תעשייה</h2>
</header> </header>
<div class="expertise-grid"> <div class="expertise-grid">
<article class="expertise-card reveal-slide"> <article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-icon" aria-hidden="true"> <div class="card-image">
<svg viewBox="0 0 64 64" fill="none"> <img
<circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2"/> src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80"
<path d="M20 28c0-6.627 5.373-12 12-12s12 5.373 12 12c0 8-12 20-12 20S20 36 20 28z" stroke="currentColor" stroke-width="2"/> alt="אריזות מזון גמישות צבעוניות"
<circle cx="32" cy="28" r="4" fill="currentColor"/> loading="lazy"
</svg> >
<div class="card-image-overlay"></div>
</div> </div>
<h3 class="card-title">אריזות למזון</h3> <div class="card-content">
<p class="card-desc">חטיפים, לחמים, מאפים, קפה, חטיפי אנרגיה, קטניות, פסטה ועוד. פתרונות אריזה עם חסם גבוה לשמירה על טריות.</p> <div class="card-icon" aria-hidden="true">
<a href="products.html" class="card-link"> <svg viewBox="0 0 64 64" fill="none">
גלו את המגוון <circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2"/>
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.707 14.707a1 1 0 01-1.414-1.414L9.586 10 6.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4z"/></svg> <path d="M20 28c0-6.627 5.373-12 12-12s12 5.373 12 12c0 8-12 20-12 20S20 36 20 28z" stroke="currentColor" stroke-width="2"/>
</a> <circle cx="32" cy="28" r="4" fill="currentColor"/>
</article> </svg>
<article class="expertise-card reveal-slide"> </div>
<div class="card-icon" aria-hidden="true"> <h3 class="card-title">אריזות למזון</h3>
<svg viewBox="0 0 64 64" fill="none"> <p class="card-desc">חטיפים, לחמים, מאפים, קפה, חטיפי אנרגיה, קטניות, פסטה ועוד. פתרונות אריזה עם חסם גבוה לשמירה על טריות.</p>
<rect x="16" y="12" width="32" height="44" rx="4" stroke="currentColor" stroke-width="2"/> <a href="products.html" class="card-link">
<path d="M24 12V8a8 8 0 1116 0v4" stroke="currentColor" stroke-width="2"/> גלו את המגוון
<circle cx="32" cy="36" r="8" stroke="currentColor" stroke-width="2"/> <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.707 14.707a1 1 0 01-1.414-1.414L9.586 10 6.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4z"/></svg>
<path d="M32 32v8M28 36h8" stroke="currentColor" stroke-width="2"/> </a>
</svg>
</div> </div>
<h3 class="card-title">היגיינה וניקוי</h3>
<p class="card-desc">אריזות עמידות לחומרי ניקוי, מוצרי היגיינה וקוסמטיקה. עמידות כימית גבוהה ואיכות הדפסה מעולה.</p>
<a href="products.html" class="card-link">
לפרטים נוספים
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.707 14.707a1 1 0 01-1.414-1.414L9.586 10 6.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4z"/></svg>
</a>
</article> </article>
<article class="expertise-card reveal-slide"> <article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-icon" aria-hidden="true"> <div class="card-image">
<svg viewBox="0 0 64 64" fill="none"> <img
<path d="M12 52V20a4 4 0 014-4h32a4 4 0 014 4v32" stroke="currentColor" stroke-width="2"/> src="https://images.unsplash.com/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=600&q=80"
<path d="M8 52h48M20 16V8M44 16V8" stroke="currentColor" stroke-width="2"/> alt="מוצרי היגיינה וניקיון ארוזים"
<rect x="24" y="28" width="16" height="12" rx="2" stroke="currentColor" stroke-width="2"/> loading="lazy"
</svg> >
<div class="card-image-overlay"></div>
</div> </div>
<h3 class="card-title">שקיות מוכנות</h3> <div class="card-content">
<p class="card-desc">Stand-up pouches, Doypack ושקיות מוכנות במגוון גדלים וסגירות. פתרון אידיאלי לקו ייצור מהיר.</p> <div class="card-icon" aria-hidden="true">
<a href="products.html" class="card-link"> <svg viewBox="0 0 64 64" fill="none">
ראו דוגמאות <rect x="16" y="12" width="32" height="44" rx="4" stroke="currentColor" stroke-width="2"/>
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.707 14.707a1 1 0 01-1.414-1.414L9.586 10 6.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4z"/></svg> <path d="M24 12V8a8 8 0 1116 0v4" stroke="currentColor" stroke-width="2"/>
</a> <circle cx="32" cy="36" r="8" stroke="currentColor" stroke-width="2"/>
</article> <path d="M32 32v8M28 36h8" stroke="currentColor" stroke-width="2"/>
<article class="expertise-card reveal-slide"> </svg>
<div class="card-icon" aria-hidden="true"> </div>
<svg viewBox="0 0 64 64" fill="none"> <h3 class="card-title">היגיינה וניקוי</h3>
<ellipse cx="32" cy="48" rx="20" ry="6" stroke="currentColor" stroke-width="2"/> <p class="card-desc">אריזות עמידות לחומרי ניקוי, מוצרי היגיינה וקוסמטיקה. עמידות כימית גבוהה ואיכות הדפסה מעולה.</p>
<path d="M12 48V28c0-8.837 8.954-16 20-16s20 7.163 20 16v20" stroke="currentColor" stroke-width="2"/> <a href="products.html" class="card-link">
<circle cx="24" cy="32" r="3" fill="currentColor"/> לפרטים נוספים
<circle cx="40" cy="28" r="3" fill="currentColor"/> <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.707 14.707a1 1 0 01-1.414-1.414L9.586 10 6.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4z"/></svg>
<circle cx="32" cy="38" r="2" fill="currentColor"/> </a>
</svg>
</div> </div>
<h3 class="card-title">פירות וירקות</h3>
<p class="card-desc">אריזות ייעודיות לתוצרת חקלאית טרייה. מיקרו-ניקוב מבוקר, שקיפות גבוהה ועמידות בתנאי קירור.</p>
<a href="products.html" class="card-link">
לפתרונות חקלאות
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.707 14.707a1 1 0 01-1.414-1.414L9.586 10 6.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4z"/></svg>
</a>
</article> </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"
>
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
<div class="card-icon" aria-hidden="true">
<svg viewBox="0 0 64 64" fill="none">
<path d="M12 52V20a4 4 0 014-4h32a4 4 0 014 4v32" stroke="currentColor" stroke-width="2"/>
<path d="M8 52h48M20 16V8M44 16V8" stroke="currentColor" stroke-width="2"/>
<rect x="24" y="28" width="16" height="12" rx="2" stroke="currentColor" stroke-width="2"/>
</svg>
</div>
<h3 class="card-title">שקיות מוכנות</h3>
<p class="card-desc">Stand-up pouches, Doypack ושקיות מוכנות במגוון גדלים וסגירות. פתרון אידיאלי לקו ייצור מהיר.</p>
<a href="products.html" class="card-link">
ראו דוגמאות
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.707 14.707a1 1 0 01-1.414-1.414L9.586 10 6.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4z"/></svg>
</a>
</div>
</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"
>
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
<div class="card-icon" aria-hidden="true">
<svg viewBox="0 0 64 64" fill="none">
<ellipse cx="32" cy="48" rx="20" ry="6" stroke="currentColor" stroke-width="2"/>
<path d="M12 48V28c0-8.837 8.954-16 20-16s20 7.163 20 16v20" stroke="currentColor" stroke-width="2"/>
<circle cx="24" cy="32" r="3" fill="currentColor"/>
<circle cx="40" cy="28" r="3" fill="currentColor"/>
<circle cx="32" cy="38" r="2" fill="currentColor"/>
</svg>
</div>
<h3 class="card-title">פירות וירקות</h3>
<p class="card-desc">אריזות ייעודיות לתוצרת חקלאית טרייה. מיקרו-ניקוב מבוקר, שקיפות גבוהה ועמידות בתנאי קירור.</p>
<a href="products.html" class="card-link">
לפתרונות חקלאות
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.707 14.707a1 1 0 01-1.414-1.414L9.586 10 6.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4z"/></svg>
</a>
</div>
</article>
</div>
</div>
</section>
<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>
<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>
</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>
<div class="specialty-item">
<span class="specialty-icon">????</span>
<span>ייצור מתקדם</span>
</div>
<div class="specialty-item">
<span class="specialty-icon">????</span>
<span>ידידות לסביבה</span>
</div>
</div>
<a href="about.html" class="btn btn-secondary btn-glass">קראו עוד עליי</a>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -177,62 +288,81 @@
<div class="container"> <div class="container">
<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">
<svg class="tech-diagram" viewBox="0 0 400 400" fill="none"> <div class="tech-image-wrapper">
<defs> <img
<linearGradient id="layerGrad1" x1="0%" y1="0%" x2="100%" y2="0%"> src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80"
<stop offset="0%" style="stop-color:#0ea5e9;stop-opacity:0.8"/> alt="טכנולוגיית שיחול מתקדמת"
<stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:0.3"/> loading="lazy"
</linearGradient> class="tech-image"
<linearGradient id="layerGrad2" x1="0%" y1="0%" x2="100%" y2="0%"> >
<stop offset="0%" style="stop-color:#d4af37;stop-opacity:0.6"/> <div class="tech-image-overlay"></div>
<stop offset="100%" style="stop-color:#d4af37;stop-opacity:0.2"/> </div>
</linearGradient> <div class="layers-visual">
</defs> <div class="layer-bar" style="--delay: 0.1s;"></div>
<g class="layers-animation"> <div class="layer-bar" style="--delay: 0.2s;"></div>
<rect x="50" y="60" width="300" height="20" rx="4" fill="url(#layerGrad1)" class="layer layer-1"/> <div class="layer-bar" style="--delay: 0.3s;"></div>
<rect x="50" y="90" width="300" height="20" rx="4" fill="url(#layerGrad2)" class="layer layer-2"/> <div class="layer-bar" style="--delay: 0.4s;"></div>
<rect x="50" y="120" width="300" height="20" rx="4" fill="url(#layerGrad1)" class="layer layer-3"/> <div class="layer-bar" style="--delay: 0.5s;"></div>
<rect x="50" y="150" width="300" height="20" rx="4" fill="url(#layerGrad2)" class="layer layer-4"/> <div class="layer-bar" style="--delay: 0.6s;"></div>
<rect x="50" y="180" width="300" height="20" rx="4" fill="url(#layerGrad1)" class="layer layer-5"/> <div class="layer-bar" style="--delay: 0.7s;"></div>
<rect x="50" y="210" width="300" height="20" rx="4" fill="url(#layerGrad2)" class="layer layer-6"/> <div class="layer-bar" style="--delay: 0.8s;"></div>
<rect x="50" y="240" width="300" height="20" rx="4" fill="url(#layerGrad1)" class="layer layer-7"/> <div class="layer-bar" style="--delay: 0.9s;"></div>
<rect x="50" y="270" width="300" height="20" rx="4" fill="url(#layerGrad2)" class="layer layer-8"/> </div>
<rect x="50" y="300" width="300" height="20" rx="4" fill="url(#layerGrad1)" class="layer layer-9"/>
</g>
<text x="200" y="370" text-anchor="middle" fill="#fff" font-size="14" opacity="0.7">PE • PP • PET • PA • AL • EVOH • PLA</text>
</svg>
</div> </div>
<div class="tech-content"> <div class="tech-content">
<span class="section-tag reveal-fade">טכנולוגיה מתקדמת</span> <span class="section-tag reveal-fade">
<h2 id="tech-heading" class="section-title reveal-fade">שיחול עד 9 שכבות</h2> <span class="tag-icon">◈</span>
טכנולוגיה מתקדמת
</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">
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <div class="feature-icon-wrapper">
<path d="M20 6L9 17l-5-5"/> <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
</svg> <path d="M20 6L9 17l-5-5"/>
</svg>
</div>
<span>הדפסה עד 10 צבעים באיכות HD</span> <span>הדפסה עד 10 צבעים באיכות HD</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 100%;"></div>
</div>
</li> </li>
<li class="reveal-fade"> <li class="reveal-fade">
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <div class="feature-icon-wrapper">
<path d="M20 6L9 17l-5-5"/> <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
</svg> <path d="M20 6L9 17l-5-5"/>
</svg>
</div>
<span>גלופות HD NX ללא שפכים</span> <span>גלופות HD NX ללא שפכים</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 90%;"></div>
</div>
</li> </li>
<li class="reveal-fade"> <li class="reveal-fade">
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <div class="feature-icon-wrapper">
<path d="M20 6L9 17l-5-5"/> <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
</svg> <path d="M20 6L9 17l-5-5"/>
</svg>
</div>
<span>ידידותי לסביבה</span> <span>ידידותי לסביבה</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 85%;"></div>
</div>
</li> </li>
<li class="reveal-fade"> <li class="reveal-fade">
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <div class="feature-icon-wrapper">
<path d="M20 6L9 17l-5-5"/> <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
</svg> <path d="M20 6L9 17l-5-5"/>
</svg>
</div>
<span>מחירים תחרותיים</span> <span>מחירים תחרותיים</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 95%;"></div>
</div>
</li> </li>
</ul> </ul>
<a href="technology.html" class="btn btn-primary reveal-fade">עוד על הטכנולוגיה</a> <a href="technology.html" class="btn btn-primary btn-glow reveal-fade">עוד על הטכנולוגיה</a>
</div> </div>
</div> </div>
</div> </div>
@@ -241,36 +371,93 @@
<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> <span class="section-tag">
<h2 id="clients-heading" class="section-title">לקוחות שסומכים עלינו</h2> <span class="tag-icon">◈</span>
לקוחות
</span>
<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-grid reveal-fade"> <div class="clients-logos-grid reveal-fade">
<div class="client-logo">מאפיית ברמן</div> <div class="client-logo-card" data-tilt>
<div class="client-logo">דגנית</div> <div class="logo-inner">
<div class="client-logo">חסלט</div> <span class="logo-letter">ב</span>
<div class="client-logo">יבולי הכפר</div> <span class="logo-name">מאפיית ברמן</span>
<div class="client-logo">אסיף</div> </div>
<div class="client-logo">חטיפי העמק</div> </div>
<div class="client-logo">פרג</div> <div class="client-logo-card" data-tilt>
<div class="client-logo">שיבולים</div> <div class="logo-inner">
<div class="client-logo">מאיר בייגל</div> <span class="logo-letter">ד</span>
<div class="client-logo">גילרו</div> <span class="logo-name">דגנית</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ח</span>
<span class="logo-name">חסלט</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">י</span>
<span class="logo-name">יבולי הכפר</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">א</span>
<span class="logo-name">אסיף</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ח</span>
<span class="logo-name">חטיפי העמק</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">פ</span>
<span class="logo-name">פרג</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ש</span>
<span class="logo-name">שיבולים</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">מ</span>
<span class="logo-name">מאיר בייגל</span>
</div>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ג</span>
<span class="logo-name">גילרו</span>
</div>
</div>
</div> </div>
<div class="clients-cta reveal-fade"> <div class="clients-cta reveal-fade">
<a href="clients.html" class="btn btn-secondary">לכל הלקוחות</a> <a href="clients.html" class="btn btn-secondary btn-glass">לכל הלקוחות</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-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></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">מחפשים פתרון אריזה לקו הייצור שלכם?</h2> <h2 id="cta-heading" class="cta-title gradient-text">מחפשים פתרון אריזה לקו הייצור שלכם?</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">בואו נדבר</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"> <a href="tel:054-818-1092" class="btn btn-outline btn-large btn-glass">
<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>
@@ -283,6 +470,7 @@
</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">
+55 -50
View File
@@ -14,6 +14,13 @@
<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="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<header class="site-header"> <header class="site-header">
<div class="header-container"> <div class="header-container">
<a href="index.html" class="logo"> <a href="index.html" class="logo">
@@ -45,8 +52,11 @@
<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> <span class="section-tag reveal-fade">
<h1 class="page-title reveal-fade">פתרונות אריזה</h1> <span class="tag-icon">◈</span>
מוצרים
</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>
@@ -55,18 +65,16 @@
<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"> <article class="product-card product-featured reveal-slide glass-card" data-tilt>
<div class="product-visual" aria-hidden="true"> <div class="product-visual">
<svg viewBox="0 0 300 200" fill="none"> <img
<rect width="300" height="200" fill="#16213e"/> src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80"
<rect x="80" y="30" width="140" height="140" rx="8" fill="none" stroke="#0ea5e9" stroke-width="2"/> alt="אריזות מזון גמישות"
<path d="M100 50h100M100 70h80M100 90h60" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/> loading="lazy"
<circle cx="150" cy="130" r="20" fill="#0ea5e9" opacity="0.3"/> >
<path d="M140 130l8 8 16-16" stroke="#0ea5e9" stroke-width="2"/>
</svg>
</div> </div>
<div class="product-content"> <div class="product-content">
<h3 class="product-title">אריזות למזון</h3> <h3 class="product-title gradient-text">אריזות למזון</h3>
<p class="product-desc">פתרונות אריזה מתקדמים לתעשיית המזון עם חסם גבוה לשמירה על טריות ואיכות המוצר.</p> <p class="product-desc">פתרונות אריזה מתקדמים לתעשיית המזון עם חסם גבוה לשמירה על טריות ואיכות המוצר.</p>
<ul class="product-list"> <ul class="product-list">
<li>חטיפים ואגוזים</li> <li>חטיפים ואגוזים</li>
@@ -81,14 +89,13 @@
</div> </div>
</article> </article>
<article class="product-card reveal-slide"> <article class="product-card reveal-slide glass-card" data-tilt>
<div class="product-visual" aria-hidden="true"> <div class="product-visual">
<svg viewBox="0 0 300 200" fill="none"> <img
<rect width="300" height="200" fill="#16213e"/> src="https://images.unsplash.com/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=600&q=80"
<rect x="110" y="40" width="80" height="120" rx="4" fill="none" stroke="#d4af37" stroke-width="2"/> alt="מוצרי היגיינה וניקיון"
<ellipse cx="150" cy="50" rx="30" ry="10" stroke="#d4af37" stroke-width="2"/> loading="lazy"
<path d="M120 80h60M120 100h40M120 120h50" stroke="#d4af37" stroke-width="1" opacity="0.5"/> >
</svg>
</div> </div>
<div class="product-content"> <div class="product-content">
<h3 class="product-title">היגיינה וחומרי ניקוי</h3> <h3 class="product-title">היגיינה וחומרי ניקוי</h3>
@@ -102,15 +109,13 @@
</div> </div>
</article> </article>
<article class="product-card reveal-slide"> <article class="product-card reveal-slide glass-card" data-tilt>
<div class="product-visual" aria-hidden="true"> <div class="product-visual">
<svg viewBox="0 0 300 200" fill="none"> <img
<rect width="300" height="200" fill="#16213e"/> src="https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&w=600&q=80"
<path d="M110 160 L110 60 Q110 40 130 40 L170 40 Q190 40 190 60 L190 160" fill="none" stroke="#0ea5e9" stroke-width="2"/> alt="שקיות Stand-up pouches"
<path d="M100 160 L200 160" stroke="#0ea5e9" stroke-width="2"/> loading="lazy"
<ellipse cx="150" cy="50" rx="25" ry="8" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/> >
<path d="M130 80h40M130 100h30M130 120h35" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/>
</svg>
</div> </div>
<div class="product-content"> <div class="product-content">
<h3 class="product-title">שקיות מוכנות</h3> <h3 class="product-title">שקיות מוכנות</h3>
@@ -124,16 +129,13 @@
</div> </div>
</article> </article>
<article class="product-card reveal-slide"> <article class="product-card reveal-slide glass-card" data-tilt>
<div class="product-visual" aria-hidden="true"> <div class="product-visual">
<svg viewBox="0 0 300 200" fill="none"> <img
<rect width="300" height="200" fill="#16213e"/> src="https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=600&q=80"
<ellipse cx="150" cy="100" rx="60" ry="50" fill="none" stroke="#d4af37" stroke-width="2"/> alt="ירקות ופירות ארוזים"
<circle cx="130" cy="85" r="8" fill="#d4af37" opacity="0.4"/> loading="lazy"
<circle cx="160" cy="95" r="10" fill="#d4af37" opacity="0.3"/> >
<circle cx="145" cy="115" r="6" fill="#d4af37" opacity="0.5"/>
<path d="M90 100h120" stroke="#d4af37" stroke-width="1" stroke-dasharray="4 4" opacity="0.3"/>
</svg>
</div> </div>
<div class="product-content"> <div class="product-content">
<h3 class="product-title">פירות וירקות</h3> <h3 class="product-title">פירות וירקות</h3>
@@ -147,15 +149,13 @@
</div> </div>
</article> </article>
<article class="product-card reveal-slide"> <article class="product-card reveal-slide glass-card" data-tilt>
<div class="product-visual" aria-hidden="true"> <div class="product-visual">
<svg viewBox="0 0 300 200" fill="none"> <img
<rect width="300" height="200" fill="#16213e"/> src="https://images.unsplash.com/photo-1607166452427-7e4477079cb9?auto=format&fit=crop&w=600&q=80"
<path d="M80 50 L220 50 L220 150 L80 150 Z" fill="none" stroke="#0ea5e9" stroke-width="2"/> alt="קופסאות קרטון מעוצבות"
<path d="M80 50 L100 30 L240 30 L240 130 L220 150" fill="none" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/> loading="lazy"
<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="#0ea5e9" stroke-width="1" opacity="0.5"/>
</svg>
</div> </div>
<div class="product-content"> <div class="product-content">
<h3 class="product-title">קופסאות קרטון</h3> <h3 class="product-title">קופסאות קרטון</h3>
@@ -173,17 +173,22 @@
</section> </section>
<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-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></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">מחפשים פתרון אריזה מותאם?</h2> <h2 id="products-cta-heading" class="cta-title gradient-text">מחפשים פתרון אריזה מותאם?</h2>
<p class="cta-desc">ספרו לנו על הצרכים שלכם ונציע את הפתרון המושלם</p> <p class="cta-desc">ספרו לנו על הצרכים שלכם ונציע את הפתרון המושלם</p>
<a href="contact.html" class="btn btn-primary btn-large">בואו נדבר</a> <a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div> </div>
</div> </div>
</section> </section>
</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">
+212 -37
View File
@@ -13,7 +13,6 @@
document.body.style.overflow = isOpen ? 'hidden' : ''; document.body.style.overflow = isOpen ? 'hidden' : '';
}); });
// Close menu when clicking a link
mainNav.querySelectorAll('.nav-link').forEach(function(link) { mainNav.querySelectorAll('.nav-link').forEach(function(link) {
link.addEventListener('click', function() { link.addEventListener('click', function() {
mainNav.classList.remove('open'); mainNav.classList.remove('open');
@@ -23,7 +22,6 @@
}); });
}); });
// Close menu when clicking outside
document.addEventListener('click', function(e) { document.addEventListener('click', function(e) {
if (mainNav.classList.contains('open') && if (mainNav.classList.contains('open') &&
!mainNav.contains(e.target) && !mainNav.contains(e.target) &&
@@ -35,7 +33,6 @@
} }
}); });
// Close menu on Escape key
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && mainNav.classList.contains('open')) { if (e.key === 'Escape' && mainNav.classList.contains('open')) {
mainNav.classList.remove('open'); mainNav.classList.remove('open');
@@ -50,78 +47,213 @@
// 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 // Scroll Reveal Animation with staggered delays
const observerOptions = { const observerOptions = {
root: null, root: null,
rootMargin: '0px 0px -50px 0px', rootMargin: '0px 0px -80px 0px',
threshold: 0.1 threshold: 0.1
}; };
const revealObserver = new IntersectionObserver(function(entries) { const revealObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) { entries.forEach(function(entry, index) {
if (entry.isIntersecting) { if (entry.isIntersecting) {
entry.target.classList.add('revealed'); // 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); revealObserver.unobserve(entry.target);
} }
}); });
}, observerOptions); }, observerOptions);
if (!prefersReducedMotion) { if (!prefersReducedMotion) {
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) { 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;
}
revealObserver.observe(el); revealObserver.observe(el);
}); });
} else { } else {
// If reduced motion is preferred, show all elements immediately
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) { document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) {
el.classList.add('revealed'); el.classList.add('revealed');
}); });
} }
// Layer animation observer for tech diagram // 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 {
element.textContent = target;
}
}
requestAnimationFrame(update);
}
// Observer for counter animation
const counterObserver = 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);
}
});
counterObserver.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
const statsSection = document.querySelector('.hero-stats');
if (statsSection) {
counterObserver.observe(statsSection);
}
const experienceBadge = document.querySelector('.about-experience-badge');
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) {
const layers = entry.target.querySelectorAll('.layer'); entry.target.classList.add('animate');
layers.forEach(function(layer) {
layer.classList.add('animate');
});
layerObserver.unobserve(entry.target); layerObserver.unobserve(entry.target);
} }
}); });
}, { threshold: 0.3 }); }, { threshold: 0.3 });
const techDiagram = document.querySelector('.tech-diagram'); const layersVisual = document.querySelector('.layers-visual');
if (techDiagram && !prefersReducedMotion) { if (layersVisual && !prefersReducedMotion) {
layerObserver.observe(techDiagram); layerObserver.observe(layersVisual);
} else if (techDiagram) {
techDiagram.querySelectorAll('.layer').forEach(function(layer) {
layer.style.opacity = '1';
});
} }
// 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;
function updateHeader() { function updateHeader() {
const currentScrollY = window.scrollY; const currentScrollY = window.scrollY;
if (currentScrollY > 100) { if (currentScrollY > 50) {
header.style.background = 'rgba(26, 26, 46, 0.98)'; header.classList.add('scrolled');
} else { } else {
header.style.background = 'rgba(26, 26, 46, 0.9)'; header.classList.remove('scrolled');
} }
lastScrollY = currentScrollY;
} }
window.addEventListener('scroll', updateHeader, { passive: true }); window.addEventListener('scroll', updateHeader, { passive: true });
// Form handling (basic validation feedback) // 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
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;
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
});
card.addEventListener('mouseleave', function() {
card.style.transform = '';
});
});
}
// 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';
setTimeout(function() {
ripple.style.transform = 'scale(2)';
ripple.style.opacity = '1';
}, 10);
setTimeout(function() {
ripple.style.transform = 'scale(0)';
ripple.style.opacity = '0';
}, 500);
}
});
});
// Form handling
const contactForm = document.querySelector('.contact-form form'); const contactForm = document.querySelector('.contact-form form');
if (contactForm) { if (contactForm) {
contactForm.addEventListener('submit', function(e) { contactForm.addEventListener('submit', function(e) {
e.preventDefault(); e.preventDefault();
// Basic validation
const requiredFields = this.querySelectorAll('[required]'); const requiredFields = this.querySelectorAll('[required]');
let isValid = true; let isValid = true;
@@ -129,8 +261,10 @@
if (!field.value.trim()) { if (!field.value.trim()) {
isValid = false; isValid = false;
field.style.borderColor = '#ef4444'; field.style.borderColor = '#ef4444';
field.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.15)';
} else { } else {
field.style.borderColor = ''; field.style.borderColor = '';
field.style.boxShadow = '';
} }
}); });
@@ -141,28 +275,34 @@
const submitBtn = this.querySelector('button[type="submit"]'); const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent; const originalText = submitBtn.textContent;
// Simple visual feedback
submitBtn.textContent = 'שולח...'; submitBtn.textContent = 'שולח...';
submitBtn.disabled = true; submitBtn.disabled = true;
// Simulate form submission (replace with actual form handling)
setTimeout(function() { setTimeout(function() {
submitBtn.textContent = 'נשלח בהצלחה!'; submitBtn.textContent = 'נשלח בהצלחה! ✓';
submitBtn.style.background = '#22c55e'; submitBtn.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)';
setTimeout(function() { setTimeout(function() {
submitBtn.textContent = originalText; submitBtn.textContent = originalText;
submitBtn.style.background = ''; submitBtn.style.background = '';
submitBtn.disabled = false; submitBtn.disabled = false;
contactForm.reset(); contactForm.reset();
}, 2000); }, 2500);
}, 1000); }, 1500);
}); });
// Clear error state on input
contactForm.querySelectorAll('input, textarea, select').forEach(function(field) { contactForm.querySelectorAll('input, textarea, select').forEach(function(field) {
field.addEventListener('input', function() { field.addEventListener('input', function() {
this.style.borderColor = ''; this.style.borderColor = '';
this.style.boxShadow = '';
});
field.addEventListener('focus', function() {
this.parentElement.classList.add('focused');
});
field.addEventListener('blur', function() {
this.parentElement.classList.remove('focused');
}); });
}); });
} }
@@ -179,18 +319,53 @@
targetElement.scrollIntoView({ targetElement.scrollIntoView({
behavior: prefersReducedMotion ? 'auto' : 'smooth' behavior: prefersReducedMotion ? 'auto' : 'smooth'
}); });
// Set focus for accessibility
targetElement.setAttribute('tabindex', '-1'); targetElement.setAttribute('tabindex', '-1');
targetElement.focus(); targetElement.focus();
} }
}); });
}); });
// Add staggered animation delay to grid items // Staggered animation for grid items
if (!prefersReducedMotion) { if (!prefersReducedMotion) {
document.querySelectorAll('.expertise-grid .expertise-card, .products-grid .product-card, .advantages-grid .advantage-item, .industries-grid .industry-card').forEach(function(card, index) { const grids = [
card.style.transitionDelay = (index * 0.1) + 's'; '.expertise-grid .expertise-card',
'.products-grid .product-card',
'.advantages-grid .advantage-item',
'.industries-grid .industry-card',
'.clients-logos-grid .client-logo-card'
];
grids.forEach(function(selector) {
document.querySelectorAll(selector).forEach(function(card, index) {
card.style.transitionDelay = (index * 0.1) + 's';
});
}); });
} }
// 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');
});
})(); })();
+876 -242
View File
File diff suppressed because it is too large Load Diff
+150 -63
View File
@@ -14,6 +14,13 @@
<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="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<header class="site-header"> <header class="site-header">
<div class="header-container"> <div class="header-container">
<a href="index.html" class="logo"> <a href="index.html" class="logo">
@@ -45,8 +52,11 @@
<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> <span class="section-tag reveal-fade">
<h1 class="page-title reveal-fade">טכנולוגיה מתקדמת</h1> <span class="tag-icon">◈</span>
טכנולוגיה
</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>
@@ -55,32 +65,30 @@
<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" aria-hidden="true"> <div class="tech-feature-visual">
<svg viewBox="0 0 400 300" fill="none"> <div class="tech-image-wrapper">
<defs> <img
<linearGradient id="techGrad1" x1="0%" y1="0%" x2="100%" y2="0%"> src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=600&q=80"
<stop offset="0%" style="stop-color:#0ea5e9;stop-opacity:0.9"/> alt="טכנולוגיית שיחול מתקדמת"
<stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:0.4"/> loading="lazy"
</linearGradient> class="tech-image"
<linearGradient id="techGrad2" x1="0%" y1="0%" x2="100%" y2="0%"> >
<stop offset="0%" style="stop-color:#d4af37;stop-opacity:0.7"/> <div class="tech-image-overlay"></div>
<stop offset="100%" style="stop-color:#d4af37;stop-opacity:0.3"/> </div>
</linearGradient> <div class="layers-visual">
</defs> <div class="layer-bar" style="--delay: 0.1s;"></div>
<rect x="40" y="30" width="320" height="24" rx="4" fill="url(#techGrad1)"/> <div class="layer-bar" style="--delay: 0.2s;"></div>
<rect x="40" y="60" width="320" height="24" rx="4" fill="url(#techGrad2)"/> <div class="layer-bar" style="--delay: 0.3s;"></div>
<rect x="40" y="90" width="320" height="24" rx="4" fill="url(#techGrad1)"/> <div class="layer-bar" style="--delay: 0.4s;"></div>
<rect x="40" y="120" width="320" height="24" rx="4" fill="url(#techGrad2)"/> <div class="layer-bar" style="--delay: 0.5s;"></div>
<rect x="40" y="150" width="320" height="24" rx="4" fill="url(#techGrad1)"/> <div class="layer-bar" style="--delay: 0.6s;"></div>
<rect x="40" y="180" width="320" height="24" rx="4" fill="url(#techGrad2)"/> <div class="layer-bar" style="--delay: 0.7s;"></div>
<rect x="40" y="210" width="320" height="24" rx="4" fill="url(#techGrad1)"/> <div class="layer-bar" style="--delay: 0.8s;"></div>
<rect x="40" y="240" width="320" height="24" rx="4" fill="url(#techGrad2)"/> <div class="layer-bar" style="--delay: 0.9s;"></div>
<rect x="40" y="270" width="320" height="24" rx="4" fill="url(#techGrad1)"/> </div>
<text x="200" y="20" text-anchor="middle" fill="#fff" font-size="12" opacity="0.6">9 שכבות</text>
</svg>
</div> </div>
<div class="tech-feature-content"> <div class="tech-feature-content">
<h3>שיחול עד 9 שכבות</h3> <h3 class="gradient-text">שיחול עד 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>
@@ -95,26 +103,31 @@
</div> </div>
<div class="tech-feature reverse reveal-fade"> <div class="tech-feature reverse reveal-fade">
<div class="tech-feature-visual" aria-hidden="true"> <div class="tech-feature-visual">
<svg viewBox="0 0 400 300" fill="none"> <div class="tech-image-wrapper">
<g class="print-colors"> <img
<circle cx="80" cy="80" r="30" fill="#FF6B6B" opacity="0.8"/> src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80"
<circle cx="120" cy="90" r="30" fill="#4ECDC4" opacity="0.8"/> alt="הדפסה צבעונית באיכות גבוהה"
<circle cx="160" cy="80" r="30" fill="#45B7D1" opacity="0.8"/> loading="lazy"
<circle cx="200" cy="90" r="30" fill="#96CEB4" opacity="0.8"/> class="tech-image"
<circle cx="240" cy="80" r="30" fill="#FFEAA7" opacity="0.8"/> >
<circle cx="280" cy="90" r="30" fill="#DDA0DD" opacity="0.8"/> <div class="tech-image-overlay"></div>
<circle cx="320" cy="80" r="30" fill="#98D8C8" opacity="0.8"/> </div>
<circle cx="100" cy="150" r="30" fill="#F7DC6F" opacity="0.8"/> <div class="color-dots" aria-hidden="true">
<circle cx="140" cy="160" r="30" fill="#BB8FCE" opacity="0.8"/> <span class="color-dot" style="background: #FF6B6B;"></span>
<circle cx="180" cy="150" r="30" fill="#85C1E9" opacity="0.8"/> <span class="color-dot" style="background: #4ECDC4;"></span>
</g> <span class="color-dot" style="background: #45B7D1;"></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: #96CEB4;"></span>
<text x="200" y="238" text-anchor="middle" fill="#fff" font-size="16">10 צבעים באיכות HD</text> <span class="color-dot" style="background: #FFEAA7;"></span>
</svg> <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> </div>
<div class="tech-feature-content"> <div class="tech-feature-content">
<h3>הדפסה עד 10 צבעים</h3> <h3 class="gradient-text">הדפסה עד 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>
@@ -125,19 +138,19 @@
</div> </div>
<div class="tech-feature reveal-fade"> <div class="tech-feature reveal-fade">
<div class="tech-feature-visual" aria-hidden="true"> <div class="tech-feature-visual">
<svg viewBox="0 0 400 300" fill="none"> <div class="tech-image-wrapper">
<circle cx="200" cy="150" r="100" fill="none" stroke="#0ea5e9" stroke-width="2"/> <img
<circle cx="200" cy="150" r="70" fill="none" stroke="#d4af37" stroke-width="2"/> src="https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?auto=format&fit=crop&w=600&q=80"
<circle cx="200" cy="150" r="40" fill="#0ea5e9" opacity="0.2"/> alt="טכנולוגיה ירוקה וידידותית לסביבה"
<path d="M200 50v40M200 210v40M100 150h40M260 150h40" stroke="#0ea5e9" stroke-width="2" opacity="0.5"/> loading="lazy"
<path d="M130 80l25 25M270 220l-25-25M270 80l-25 25M130 220l25-25" stroke="#d4af37" stroke-width="1" opacity="0.5"/> class="tech-image"
<circle cx="200" cy="150" r="15" fill="#0ea5e9"/> >
<path d="M190 150l7 7 13-14" stroke="#1a1a2e" stroke-width="2"/> <div class="tech-image-overlay"></div>
</svg> </div>
</div> </div>
<div class="tech-feature-content"> <div class="tech-feature-content">
<h3>גלופות HD NX</h3> <h3 class="gradient-text">גלופות 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">
@@ -154,26 +167,29 @@
<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> <span class="section-tag">
<h2 id="advantages-heading" class="section-title">למה לעבוד איתנו?</h2> <span class="tag-icon">◈</span>
יתרונות
</span>
<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"> <div class="advantage-item reveal-slide glass-card">
<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"> <div class="advantage-item reveal-slide glass-card">
<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"> <div class="advantage-item reveal-slide glass-card">
<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"> <div class="advantage-item reveal-slide glass-card">
<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>
@@ -183,17 +199,22 @@
</section> </section>
<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-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></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">רוצים לשמוע עוד?</h2> <h2 id="tech-cta-heading" class="cta-title gradient-text">רוצים לשמוע עוד?</h2>
<p class="cta-desc">נשמח להסביר על הטכנולוגיות שלנו ולהתאים פתרון לצרכים שלכם</p> <p class="cta-desc">נשמח להסביר על הטכנולוגיות שלנו ולהתאים פתרון לצרכים שלכם</p>
<a href="contact.html" class="btn btn-primary btn-large">בואו נדבר</a> <a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
</div> </div>
</div> </div>
</section> </section>
</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">
@@ -227,5 +248,71 @@
</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>