AI update: שדרוג ויזואלי מקיף לאתר עמוס רוזמרין - מהנדס אריזה:
## 1. תמונות אמיתיות (הוסף מ-Unsplash/Pexels CDN): ### Hero Sectio
This commit is contained in:
+134
-7
@@ -14,6 +14,15 @@
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
|
||||
<div class="particles-container" aria-hidden="true">
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-container">
|
||||
<a href="index.html" class="logo">
|
||||
@@ -45,8 +54,11 @@
|
||||
<main id="main-content">
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<span class="section-tag reveal-fade">אודות</span>
|
||||
<h1 class="page-title reveal-fade">הסיפור שלי</h1>
|
||||
<span class="section-tag reveal-fade">
|
||||
<span class="tag-icon">◈</span>
|
||||
אודות
|
||||
</span>
|
||||
<h1 class="page-title reveal-fade gradient-text">הסיפור שלי</h1>
|
||||
<p class="page-subtitle reveal-fade">למעלה מ-18 שנות ניסיון בפיתוח פתרונות אריזה לתעשייה הישראלית</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -55,17 +67,38 @@
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-story">
|
||||
<div class="about-profile-section reveal-fade">
|
||||
<div class="profile-image-wrapper">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80"
|
||||
alt="תמונת פרופיל מקצועית"
|
||||
class="profile-image"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="profile-decoration"></div>
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<h2 class="gradient-text">עמוס רוזמרין</h2>
|
||||
<p class="profile-title">מהנדס ייצור | מומחה אריזות</p>
|
||||
<div class="profile-badges">
|
||||
<span class="profile-badge">???? 18+ שנות ניסיון</span>
|
||||
<span class="profile-badge">???? מומחה אריזה גמישה</span>
|
||||
<span class="profile-badge">???? שותפויות בינלאומיות</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="story-block reveal-fade">
|
||||
<h2>מהנדס ייצור עצמאי מאז 2006</h2>
|
||||
<h3>מהנדס ייצור עצמאי מאז 2006</h3>
|
||||
<p>שמי עמוס רוזמרין, ואני מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות, ההיגיינה, הקוסמטיקה וחומרי הניקוי.</p>
|
||||
</div>
|
||||
<div class="story-block reveal-fade">
|
||||
<h2>הגישה שלי</h2>
|
||||
<h3>הגישה שלי</h3>
|
||||
<p>המשימה שלי היא להבטיח אריזה אמינה, יעילה וחסכונית — המשמרת את איכות המוצר, עומדת בתקנים ומותאמת לקו הייצור שלכם.</p>
|
||||
<p>אני פועל בשקיפות, דיוק ושירות אישי, עם דגש על איכות תהליך, צמצום תקלות וקיצור זמני הגעה לשוק.</p>
|
||||
</div>
|
||||
<div class="story-block reveal-fade">
|
||||
<h2>שיתוף פעולה בינלאומי</h2>
|
||||
<h3>שיתוף פעולה בינלאומי</h3>
|
||||
<p>במהלך השנים פיתחתי שיתופי פעולה הדוקים עם יצרנים טורקיים מובילים, המאפשרים לי להציע מחירים תחרותיים ואיכות גבוהה ללקוחותיי בישראל.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,23 +132,38 @@
|
||||
<h3>שירות אישי</h3>
|
||||
<p>ליווי צמוד והתאמה מדויקת לצרכים הייחודיים של כל לקוח</p>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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="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>
|
||||
<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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-glow" aria-hidden="true"></div>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
@@ -149,5 +197,84 @@
|
||||
</footer>
|
||||
|
||||
<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>
|
||||
</html>
|
||||
|
||||
+80
-32
@@ -14,6 +14,13 @@
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
|
||||
<div class="particles-container" aria-hidden="true">
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-container">
|
||||
<a href="index.html" class="logo">
|
||||
@@ -45,8 +52,11 @@
|
||||
<main id="main-content">
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<span class="section-tag reveal-fade">לקוחות</span>
|
||||
<h1 class="page-title reveal-fade">לקוחות שסומכים עלינו</h1>
|
||||
<span class="section-tag reveal-fade">
|
||||
<span class="tag-icon">◈</span>
|
||||
לקוחות
|
||||
</span>
|
||||
<h1 class="page-title reveal-fade gradient-text">לקוחות שסומכים עלינו</h1>
|
||||
<p class="page-subtitle reveal-fade">שיתופי פעולה ארוכי טווח עם מותגים מובילים בתעשייה הישראלית</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -54,36 +64,66 @@
|
||||
<section class="clients-showcase" aria-labelledby="clients-list-heading">
|
||||
<h2 id="clients-list-heading" class="visually-hidden">רשימת לקוחות</h2>
|
||||
<div class="container">
|
||||
<div class="clients-cloud reveal-fade">
|
||||
<div class="cloud-item cloud-large">
|
||||
<span>מאפיית ברמן</span>
|
||||
<div class="clients-logos-grid reveal-fade">
|
||||
<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="cloud-item cloud-medium">
|
||||
<span>דגנית</span>
|
||||
<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="cloud-item cloud-large">
|
||||
<span>חסלט</span>
|
||||
<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="cloud-item cloud-medium">
|
||||
<span>יבולי הכפר</span>
|
||||
<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="cloud-item cloud-small">
|
||||
<span>אסיף</span>
|
||||
<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="cloud-item cloud-large">
|
||||
<span>חטיפי העמק</span>
|
||||
<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="cloud-item cloud-medium">
|
||||
<span>פרג</span>
|
||||
<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="cloud-item cloud-small">
|
||||
<span>שיבולים</span>
|
||||
<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="cloud-item cloud-large">
|
||||
<span>מאיר בייגל</span>
|
||||
<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="cloud-item cloud-medium">
|
||||
<span>גילרו</span>
|
||||
<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>
|
||||
@@ -92,11 +132,14 @@
|
||||
<section class="industries" aria-labelledby="industries-heading">
|
||||
<div class="container">
|
||||
<header class="section-header reveal-fade">
|
||||
<span class="section-tag">תעשיות</span>
|
||||
<h2 id="industries-heading" class="section-title">אנחנו עובדים עם</h2>
|
||||
<span class="section-tag">
|
||||
<span class="tag-icon">◈</span>
|
||||
תעשיות
|
||||
</span>
|
||||
<h2 id="industries-heading" class="section-title gradient-text">אנחנו עובדים עם</h2>
|
||||
</header>
|
||||
<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">
|
||||
<circle cx="24" cy="20" r="12"/>
|
||||
<path d="M12 44c0-6.627 5.373-12 12-12s12 5.373 12 12"/>
|
||||
@@ -104,7 +147,7 @@
|
||||
</svg>
|
||||
<span>תעשיית המזון</span>
|
||||
</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">
|
||||
<ellipse cx="24" cy="38" rx="16" ry="6"/>
|
||||
<path d="M8 38V20c0-8 7.2-16 16-16s16 8 16 16v18"/>
|
||||
@@ -112,7 +155,7 @@
|
||||
</svg>
|
||||
<span>חקלאות</span>
|
||||
</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">
|
||||
<rect x="12" y="8" width="24" height="36" rx="4"/>
|
||||
<circle cx="24" cy="28" r="8"/>
|
||||
@@ -120,7 +163,7 @@
|
||||
</svg>
|
||||
<span>קוסמטיקה</span>
|
||||
</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">
|
||||
<rect x="8" y="16" width="32" height="24" rx="4"/>
|
||||
<path d="M16 16V12a8 8 0 1116 0v4"/>
|
||||
@@ -128,7 +171,7 @@
|
||||
</svg>
|
||||
<span>חומרי ניקוי</span>
|
||||
</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">
|
||||
<path d="M8 40V16l16-8 16 8v24"/>
|
||||
<rect x="18" y="28" width="12" height="12"/>
|
||||
@@ -141,17 +184,22 @@
|
||||
</section>
|
||||
|
||||
<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="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>
|
||||
<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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-glow" aria-hidden="true"></div>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
||||
+21
-7
@@ -14,6 +14,13 @@
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
|
||||
<div class="particles-container" aria-hidden="true">
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-container">
|
||||
<a href="index.html" class="logo">
|
||||
@@ -45,8 +52,11 @@
|
||||
<main id="main-content">
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<span class="section-tag reveal-fade">צור קשר</span>
|
||||
<h1 class="page-title reveal-fade">בואו נדבר</h1>
|
||||
<span class="section-tag reveal-fade">
|
||||
<span class="tag-icon">◈</span>
|
||||
צור קשר
|
||||
</span>
|
||||
<h1 class="page-title reveal-fade gradient-text">בואו נדבר</h1>
|
||||
<p class="page-subtitle reveal-fade">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -58,7 +68,7 @@
|
||||
<div class="contact-info reveal-fade">
|
||||
<h3>פרטי התקשרות</h3>
|
||||
<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">
|
||||
<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"/>
|
||||
@@ -69,7 +79,7 @@
|
||||
<span class="contact-value">054-818-1092</span>
|
||||
</div>
|
||||
</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">
|
||||
<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"/>
|
||||
@@ -81,7 +91,7 @@
|
||||
<span class="contact-value" lang="en">amos.rosemarin@gmail.com</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="contact-card">
|
||||
<div class="contact-card glass-card">
|
||||
<div class="contact-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
|
||||
@@ -95,7 +105,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-form reveal-fade">
|
||||
<div class="contact-form glass-card reveal-fade">
|
||||
<h3>שלחו הודעה</h3>
|
||||
<form action="#" method="POST" novalidate>
|
||||
<div class="form-group">
|
||||
@@ -127,7 +137,10 @@
|
||||
<label for="message">הודעה <span aria-hidden="true">*</span></label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-large">שליחה</button>
|
||||
<button type="submit" class="btn btn-primary btn-large btn-glow">
|
||||
<span>שליחה</span>
|
||||
<span class="btn-ripple"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -136,6 +149,7 @@
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-glow" aria-hidden="true"></div>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
||||
+332
-144
@@ -18,6 +18,18 @@
|
||||
<body>
|
||||
<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">
|
||||
<div class="header-container">
|
||||
<a href="index.html" class="logo">
|
||||
@@ -49,126 +61,225 @@
|
||||
<main id="main-content">
|
||||
<section class="hero">
|
||||
<div class="hero-bg" aria-hidden="true">
|
||||
<svg class="hero-pattern" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1a1a2e"/>
|
||||
<stop offset="100%" style="stop-color:#16213e"/>
|
||||
</linearGradient>
|
||||
<pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
|
||||
<path d="M 60 0 L 0 0 0 60" fill="none" stroke="#0ea5e9" stroke-width="0.5" opacity="0.15"/>
|
||||
</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>
|
||||
<img
|
||||
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-gradient-mesh"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge reveal-fade">מהנדס ייצור עצמאי מאז 2006</div>
|
||||
<h1 class="hero-title reveal-fade">פתרונות אריזה גמישה <span class="highlight">לתעשייה הישראלית</span></h1>
|
||||
<div class="hero-badge reveal-fade">
|
||||
<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>
|
||||
<div class="hero-actions reveal-fade">
|
||||
<a href="contact.html" class="btn btn-primary">בואו נדבר</a>
|
||||
<a href="products.html" class="btn btn-secondary">לכל המוצרים</a>
|
||||
<a href="contact.html" class="btn btn-primary btn-glow">
|
||||
<span>בואו נדבר</span>
|
||||
<span class="btn-ripple"></span>
|
||||
</a>
|
||||
<a href="products.html" class="btn btn-secondary btn-glass">לכל המוצרים</a>
|
||||
</div>
|
||||
<div class="hero-stats reveal-fade">
|
||||
<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>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">9</span>
|
||||
<span class="stat-number" data-count="9">0</span>
|
||||
<span class="stat-label">שכבות שיחול</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">10</span>
|
||||
<span class="stat-number" data-count="10">0</span>
|
||||
<span class="stat-label">צבעי הדפסה</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-indicator" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 5v14M5 12l7 7 7-7"/>
|
||||
</svg>
|
||||
<div class="mouse">
|
||||
<div class="wheel"></div>
|
||||
</div>
|
||||
<span>גלול למטה</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="wave-divider" aria-hidden="true">
|
||||
<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
|
||||
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="currentColor"/>
|
||||
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="currentColor"/>
|
||||
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,googletrans172.46-45.71,248.8-84.81V0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<section class="expertise" aria-labelledby="expertise-heading">
|
||||
<div class="container">
|
||||
<header class="section-header reveal-fade">
|
||||
<span class="section-tag">תחומי התמחות</span>
|
||||
<h2 id="expertise-heading" class="section-title">פתרונות אריזה לכל תעשייה</h2>
|
||||
<span class="section-tag">
|
||||
<span class="tag-icon">◈</span>
|
||||
תחומי התמחות
|
||||
</span>
|
||||
<h2 id="expertise-heading" class="section-title gradient-text">פתרונות אריזה לכל תעשייה</h2>
|
||||
</header>
|
||||
<div class="expertise-grid">
|
||||
<article class="expertise-card reveal-slide">
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 64 64" fill="none">
|
||||
<circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2"/>
|
||||
<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"/>
|
||||
<circle cx="32" cy="28" r="4" fill="currentColor"/>
|
||||
</svg>
|
||||
<article class="expertise-card glass-card reveal-slide" data-tilt>
|
||||
<div class="card-image">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80"
|
||||
alt="אריזות מזון גמישות צבעוניות"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="card-image-overlay"></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 class="expertise-card reveal-slide">
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 64 64" fill="none">
|
||||
<rect x="16" y="12" width="32" height="44" rx="4" stroke="currentColor" stroke-width="2"/>
|
||||
<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"/>
|
||||
<path d="M32 32v8M28 36h8" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
<div class="card-content">
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 64 64" fill="none">
|
||||
<circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2"/>
|
||||
<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"/>
|
||||
<circle cx="32" cy="28" r="4" 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>
|
||||
<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 class="expertise-card reveal-slide">
|
||||
<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>
|
||||
<article class="expertise-card glass-card reveal-slide" data-tilt>
|
||||
<div class="card-image">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=600&q=80"
|
||||
alt="מוצרי היגיינה וניקיון ארוזים"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="card-image-overlay"></div>
|
||||
</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>
|
||||
</article>
|
||||
<article class="expertise-card reveal-slide">
|
||||
<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 class="card-content">
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 64 64" fill="none">
|
||||
<rect x="16" y="12" width="32" height="44" rx="4" stroke="currentColor" stroke-width="2"/>
|
||||
<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"/>
|
||||
<path d="M32 32v8M28 36h8" stroke="currentColor" stroke-width="2"/>
|
||||
</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>
|
||||
<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 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>
|
||||
</section>
|
||||
@@ -177,62 +288,81 @@
|
||||
<div class="container">
|
||||
<div class="tech-grid">
|
||||
<div class="tech-visual reveal-fade" aria-hidden="true">
|
||||
<svg class="tech-diagram" viewBox="0 0 400 400" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="layerGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#0ea5e9;stop-opacity:0.8"/>
|
||||
<stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="layerGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#d4af37;stop-opacity:0.6"/>
|
||||
<stop offset="100%" style="stop-color:#d4af37;stop-opacity:0.2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g class="layers-animation">
|
||||
<rect x="50" y="60" width="300" height="20" rx="4" fill="url(#layerGrad1)" class="layer layer-1"/>
|
||||
<rect x="50" y="90" width="300" height="20" rx="4" fill="url(#layerGrad2)" class="layer layer-2"/>
|
||||
<rect x="50" y="120" width="300" height="20" rx="4" fill="url(#layerGrad1)" class="layer layer-3"/>
|
||||
<rect x="50" y="150" width="300" height="20" rx="4" fill="url(#layerGrad2)" class="layer layer-4"/>
|
||||
<rect x="50" y="180" width="300" height="20" rx="4" fill="url(#layerGrad1)" class="layer layer-5"/>
|
||||
<rect x="50" y="210" width="300" height="20" rx="4" fill="url(#layerGrad2)" class="layer layer-6"/>
|
||||
<rect x="50" y="240" width="300" height="20" rx="4" fill="url(#layerGrad1)" class="layer layer-7"/>
|
||||
<rect x="50" y="270" width="300" height="20" rx="4" fill="url(#layerGrad2)" class="layer layer-8"/>
|
||||
<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 class="tech-image-wrapper">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80"
|
||||
alt="טכנולוגיית שיחול מתקדמת"
|
||||
loading="lazy"
|
||||
class="tech-image"
|
||||
>
|
||||
<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 class="tech-content">
|
||||
<span class="section-tag reveal-fade">טכנולוגיה מתקדמת</span>
|
||||
<h2 id="tech-heading" class="section-title reveal-fade">שיחול עד 9 שכבות</h2>
|
||||
<span class="section-tag reveal-fade">
|
||||
<span class="tag-icon">◈</span>
|
||||
טכנולוגיה מתקדמת
|
||||
</span>
|
||||
<h2 id="tech-heading" class="section-title reveal-fade gradient-text">שיחול עד 9 שכבות</h2>
|
||||
<p class="tech-desc reveal-fade">אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH, ומספקים פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה כגון בשר ומוצרי חלב.</p>
|
||||
<ul class="tech-features">
|
||||
<li class="reveal-fade">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
<div class="feature-icon-wrapper">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>הדפסה עד 10 צבעים באיכות HD</span>
|
||||
<div class="feature-progress">
|
||||
<div class="progress-bar" style="--width: 100%;"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="reveal-fade">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
<div class="feature-icon-wrapper">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>גלופות HD NX ללא שפכים</span>
|
||||
<div class="feature-progress">
|
||||
<div class="progress-bar" style="--width: 90%;"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="reveal-fade">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
<div class="feature-icon-wrapper">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>ידידותי לסביבה</span>
|
||||
<div class="feature-progress">
|
||||
<div class="progress-bar" style="--width: 85%;"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="reveal-fade">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
<div class="feature-icon-wrapper">
|
||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>מחירים תחרותיים</span>
|
||||
<div class="feature-progress">
|
||||
<div class="progress-bar" style="--width: 95%;"></div>
|
||||
</div>
|
||||
</li>
|
||||
</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>
|
||||
@@ -241,36 +371,93 @@
|
||||
<section class="clients-preview" aria-labelledby="clients-heading">
|
||||
<div class="container">
|
||||
<header class="section-header reveal-fade">
|
||||
<span class="section-tag">לקוחות</span>
|
||||
<h2 id="clients-heading" class="section-title">לקוחות שסומכים עלינו</h2>
|
||||
<span class="section-tag">
|
||||
<span class="tag-icon">◈</span>
|
||||
לקוחות
|
||||
</span>
|
||||
<h2 id="clients-heading" class="section-title gradient-text">לקוחות שסומכים עלינו</h2>
|
||||
<p class="section-desc">שיתופי פעולה ארוכי טווח עם מותגים מובילים בתעשיית המזון הישראלית</p>
|
||||
</header>
|
||||
<div class="clients-grid reveal-fade">
|
||||
<div class="client-logo">מאפיית ברמן</div>
|
||||
<div class="client-logo">דגנית</div>
|
||||
<div class="client-logo">חסלט</div>
|
||||
<div class="client-logo">יבולי הכפר</div>
|
||||
<div class="client-logo">אסיף</div>
|
||||
<div class="client-logo">חטיפי העמק</div>
|
||||
<div class="client-logo">פרג</div>
|
||||
<div class="client-logo">שיבולים</div>
|
||||
<div class="client-logo">מאיר בייגל</div>
|
||||
<div class="client-logo">גילרו</div>
|
||||
<div class="clients-logos-grid reveal-fade">
|
||||
<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 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 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>
|
||||
</section>
|
||||
|
||||
<section class="cta-section" aria-labelledby="cta-heading">
|
||||
<div class="cta-bg" aria-hidden="true">
|
||||
<div class="cta-gradient-orb cta-orb-1"></div>
|
||||
<div class="cta-gradient-orb cta-orb-2"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<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>
|
||||
<div class="cta-actions">
|
||||
<a href="contact.html" class="btn btn-primary btn-large">בואו נדבר</a>
|
||||
<a href="tel:054-818-1092" class="btn btn-outline btn-large">
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
|
||||
</svg>
|
||||
@@ -283,6 +470,7 @@
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-glow" aria-hidden="true"></div>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
||||
+55
-50
@@ -14,6 +14,13 @@
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
|
||||
<div class="particles-container" aria-hidden="true">
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-container">
|
||||
<a href="index.html" class="logo">
|
||||
@@ -45,8 +52,11 @@
|
||||
<main id="main-content">
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<span class="section-tag reveal-fade">מוצרים</span>
|
||||
<h1 class="page-title reveal-fade">פתרונות אריזה</h1>
|
||||
<span class="section-tag reveal-fade">
|
||||
<span class="tag-icon">◈</span>
|
||||
מוצרים
|
||||
</span>
|
||||
<h1 class="page-title reveal-fade gradient-text">פתרונות אריזה</h1>
|
||||
<p class="page-subtitle reveal-fade">מגוון רחב של פתרונות אריזה גמישה לכל תעשייה</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -55,18 +65,16 @@
|
||||
<h2 id="products-heading" class="visually-hidden">קטגוריות מוצרים</h2>
|
||||
<div class="container">
|
||||
<div class="products-grid">
|
||||
<article class="product-card product-featured reveal-slide">
|
||||
<div class="product-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 300 200" fill="none">
|
||||
<rect width="300" height="200" fill="#16213e"/>
|
||||
<rect x="80" y="30" width="140" height="140" rx="8" fill="none" stroke="#0ea5e9" stroke-width="2"/>
|
||||
<path d="M100 50h100M100 70h80M100 90h60" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/>
|
||||
<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>
|
||||
<article class="product-card product-featured reveal-slide glass-card" data-tilt>
|
||||
<div class="product-visual">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80"
|
||||
alt="אריזות מזון גמישות"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3 class="product-title">אריזות למזון</h3>
|
||||
<h3 class="product-title gradient-text">אריזות למזון</h3>
|
||||
<p class="product-desc">פתרונות אריזה מתקדמים לתעשיית המזון עם חסם גבוה לשמירה על טריות ואיכות המוצר.</p>
|
||||
<ul class="product-list">
|
||||
<li>חטיפים ואגוזים</li>
|
||||
@@ -81,14 +89,13 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal-slide">
|
||||
<div class="product-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 300 200" fill="none">
|
||||
<rect width="300" height="200" fill="#16213e"/>
|
||||
<rect x="110" y="40" width="80" height="120" rx="4" fill="none" stroke="#d4af37" stroke-width="2"/>
|
||||
<ellipse cx="150" cy="50" rx="30" ry="10" stroke="#d4af37" stroke-width="2"/>
|
||||
<path d="M120 80h60M120 100h40M120 120h50" stroke="#d4af37" stroke-width="1" opacity="0.5"/>
|
||||
</svg>
|
||||
<article class="product-card reveal-slide glass-card" data-tilt>
|
||||
<div class="product-visual">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=600&q=80"
|
||||
alt="מוצרי היגיינה וניקיון"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3 class="product-title">היגיינה וחומרי ניקוי</h3>
|
||||
@@ -102,15 +109,13 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal-slide">
|
||||
<div class="product-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 300 200" fill="none">
|
||||
<rect width="300" height="200" fill="#16213e"/>
|
||||
<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"/>
|
||||
<path d="M100 160 L200 160" stroke="#0ea5e9" stroke-width="2"/>
|
||||
<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>
|
||||
<article class="product-card reveal-slide glass-card" data-tilt>
|
||||
<div class="product-visual">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&w=600&q=80"
|
||||
alt="שקיות Stand-up pouches"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3 class="product-title">שקיות מוכנות</h3>
|
||||
@@ -124,16 +129,13 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal-slide">
|
||||
<div class="product-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 300 200" fill="none">
|
||||
<rect width="300" height="200" fill="#16213e"/>
|
||||
<ellipse cx="150" cy="100" rx="60" ry="50" fill="none" stroke="#d4af37" stroke-width="2"/>
|
||||
<circle cx="130" cy="85" r="8" fill="#d4af37" opacity="0.4"/>
|
||||
<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>
|
||||
<article class="product-card reveal-slide glass-card" data-tilt>
|
||||
<div class="product-visual">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=600&q=80"
|
||||
alt="ירקות ופירות ארוזים"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3 class="product-title">פירות וירקות</h3>
|
||||
@@ -147,15 +149,13 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal-slide">
|
||||
<div class="product-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 300 200" fill="none">
|
||||
<rect width="300" height="200" fill="#16213e"/>
|
||||
<path d="M80 50 L220 50 L220 150 L80 150 Z" fill="none" stroke="#0ea5e9" stroke-width="2"/>
|
||||
<path d="M80 50 L100 30 L240 30 L240 130 L220 150" fill="none" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M220 50 L240 30" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/>
|
||||
<rect x="100" y="70" width="80" height="60" fill="none" stroke="#0ea5e9" stroke-width="1" opacity="0.5"/>
|
||||
</svg>
|
||||
<article class="product-card reveal-slide glass-card" data-tilt>
|
||||
<div class="product-visual">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1607166452427-7e4477079cb9?auto=format&fit=crop&w=600&q=80"
|
||||
alt="קופסאות קרטון מעוצבות"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<h3 class="product-title">קופסאות קרטון</h3>
|
||||
@@ -173,17 +173,22 @@
|
||||
</section>
|
||||
|
||||
<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="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>
|
||||
<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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-glow" aria-hidden="true"></div>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
document.body.style.overflow = isOpen ? 'hidden' : '';
|
||||
});
|
||||
|
||||
// Close menu when clicking a link
|
||||
mainNav.querySelectorAll('.nav-link').forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
mainNav.classList.remove('open');
|
||||
@@ -23,7 +22,6 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (mainNav.classList.contains('open') &&
|
||||
!mainNav.contains(e.target) &&
|
||||
@@ -35,7 +33,6 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu on Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && mainNav.classList.contains('open')) {
|
||||
mainNav.classList.remove('open');
|
||||
@@ -50,78 +47,213 @@
|
||||
// Check for reduced motion preference
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Scroll Reveal Animation
|
||||
// Scroll Reveal Animation with staggered delays
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
rootMargin: '0px 0px -80px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const revealObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
entries.forEach(function(entry, index) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
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);
|
||||
});
|
||||
} else {
|
||||
// If reduced motion is preferred, show all elements immediately
|
||||
document.querySelectorAll('.reveal-fade, .reveal-slide').forEach(function(el) {
|
||||
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) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
const layers = entry.target.querySelectorAll('.layer');
|
||||
layers.forEach(function(layer) {
|
||||
layer.classList.add('animate');
|
||||
});
|
||||
entry.target.classList.add('animate');
|
||||
layerObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
|
||||
const techDiagram = document.querySelector('.tech-diagram');
|
||||
if (techDiagram && !prefersReducedMotion) {
|
||||
layerObserver.observe(techDiagram);
|
||||
} else if (techDiagram) {
|
||||
techDiagram.querySelectorAll('.layer').forEach(function(layer) {
|
||||
layer.style.opacity = '1';
|
||||
});
|
||||
const layersVisual = document.querySelector('.layers-visual');
|
||||
if (layersVisual && !prefersReducedMotion) {
|
||||
layerObserver.observe(layersVisual);
|
||||
}
|
||||
|
||||
// Progress bar animation
|
||||
const progressObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('revealed');
|
||||
progressObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
|
||||
document.querySelectorAll('.tech-features li').forEach(function(li) {
|
||||
if (!prefersReducedMotion) {
|
||||
progressObserver.observe(li);
|
||||
} else {
|
||||
li.classList.add('revealed');
|
||||
}
|
||||
});
|
||||
|
||||
// Header scroll effect
|
||||
const header = document.querySelector('.site-header');
|
||||
let lastScrollY = 0;
|
||||
|
||||
function updateHeader() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 100) {
|
||||
header.style.background = 'rgba(26, 26, 46, 0.98)';
|
||||
if (currentScrollY > 50) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.style.background = 'rgba(26, 26, 46, 0.9)';
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
|
||||
lastScrollY = currentScrollY;
|
||||
}
|
||||
|
||||
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');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Basic validation
|
||||
const requiredFields = this.querySelectorAll('[required]');
|
||||
let isValid = true;
|
||||
|
||||
@@ -129,8 +261,10 @@
|
||||
if (!field.value.trim()) {
|
||||
isValid = false;
|
||||
field.style.borderColor = '#ef4444';
|
||||
field.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.15)';
|
||||
} else {
|
||||
field.style.borderColor = '';
|
||||
field.style.boxShadow = '';
|
||||
}
|
||||
});
|
||||
|
||||
@@ -141,28 +275,34 @@
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
|
||||
// Simple visual feedback
|
||||
submitBtn.textContent = 'שולח...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Simulate form submission (replace with actual form handling)
|
||||
setTimeout(function() {
|
||||
submitBtn.textContent = 'נשלח בהצלחה!';
|
||||
submitBtn.style.background = '#22c55e';
|
||||
submitBtn.textContent = 'נשלח בהצלחה! ✓';
|
||||
submitBtn.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)';
|
||||
|
||||
setTimeout(function() {
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.style.background = '';
|
||||
submitBtn.disabled = false;
|
||||
contactForm.reset();
|
||||
}, 2000);
|
||||
}, 1000);
|
||||
}, 2500);
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
// Clear error state on input
|
||||
contactForm.querySelectorAll('input, textarea, select').forEach(function(field) {
|
||||
field.addEventListener('input', function() {
|
||||
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({
|
||||
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
||||
});
|
||||
// Set focus for accessibility
|
||||
targetElement.setAttribute('tabindex', '-1');
|
||||
targetElement.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add staggered animation delay to grid items
|
||||
// Staggered animation for grid items
|
||||
if (!prefersReducedMotion) {
|
||||
document.querySelectorAll('.expertise-grid .expertise-card, .products-grid .product-card, .advantages-grid .advantage-item, .industries-grid .industry-card').forEach(function(card, index) {
|
||||
card.style.transitionDelay = (index * 0.1) + 's';
|
||||
const grids = [
|
||||
'.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');
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
+150
-63
@@ -14,6 +14,13 @@
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
|
||||
<div class="particles-container" aria-hidden="true">
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-container">
|
||||
<a href="index.html" class="logo">
|
||||
@@ -45,8 +52,11 @@
|
||||
<main id="main-content">
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<span class="section-tag reveal-fade">טכנולוגיה</span>
|
||||
<h1 class="page-title reveal-fade">טכנולוגיה מתקדמת</h1>
|
||||
<span class="section-tag reveal-fade">
|
||||
<span class="tag-icon">◈</span>
|
||||
טכנולוגיה
|
||||
</span>
|
||||
<h1 class="page-title reveal-fade gradient-text">טכנולוגיה מתקדמת</h1>
|
||||
<p class="page-subtitle reveal-fade">חדשנות וטכנולוגיה מתקדמת לתוצאות מעולות</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -55,32 +65,30 @@
|
||||
<h2 id="tech-details-heading" class="visually-hidden">פרטי טכנולוגיה</h2>
|
||||
<div class="container">
|
||||
<div class="tech-feature reveal-fade">
|
||||
<div class="tech-feature-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 400 300" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="techGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#0ea5e9;stop-opacity:0.9"/>
|
||||
<stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:0.4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="techGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#d4af37;stop-opacity:0.7"/>
|
||||
<stop offset="100%" style="stop-color:#d4af37;stop-opacity:0.3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="40" y="30" width="320" height="24" rx="4" fill="url(#techGrad1)"/>
|
||||
<rect x="40" y="60" width="320" height="24" rx="4" fill="url(#techGrad2)"/>
|
||||
<rect x="40" y="90" width="320" height="24" rx="4" fill="url(#techGrad1)"/>
|
||||
<rect x="40" y="120" width="320" height="24" rx="4" fill="url(#techGrad2)"/>
|
||||
<rect x="40" y="150" width="320" height="24" rx="4" fill="url(#techGrad1)"/>
|
||||
<rect x="40" y="180" width="320" height="24" rx="4" fill="url(#techGrad2)"/>
|
||||
<rect x="40" y="210" width="320" height="24" rx="4" fill="url(#techGrad1)"/>
|
||||
<rect x="40" y="240" width="320" height="24" rx="4" fill="url(#techGrad2)"/>
|
||||
<rect x="40" y="270" width="320" height="24" rx="4" fill="url(#techGrad1)"/>
|
||||
<text x="200" y="20" text-anchor="middle" fill="#fff" font-size="12" opacity="0.6">9 שכבות</text>
|
||||
</svg>
|
||||
<div class="tech-feature-visual">
|
||||
<div class="tech-image-wrapper">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=600&q=80"
|
||||
alt="טכנולוגיית שיחול מתקדמת"
|
||||
loading="lazy"
|
||||
class="tech-image"
|
||||
>
|
||||
<div class="tech-image-overlay"></div>
|
||||
</div>
|
||||
<div class="layers-visual">
|
||||
<div class="layer-bar" style="--delay: 0.1s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.2s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.3s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.4s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.5s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.6s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.7s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.8s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.9s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-feature-content">
|
||||
<h3>שיחול עד 9 שכבות</h3>
|
||||
<h3 class="gradient-text">שיחול עד 9 שכבות</h3>
|
||||
<p>אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH. טכנולוגיה זו מאפשרת לנו לספק פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה, כגון בשר ומוצרי חלב.</p>
|
||||
<div class="materials-list">
|
||||
<span class="material">PE</span>
|
||||
@@ -95,26 +103,31 @@
|
||||
</div>
|
||||
|
||||
<div class="tech-feature reverse reveal-fade">
|
||||
<div class="tech-feature-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 400 300" fill="none">
|
||||
<g class="print-colors">
|
||||
<circle cx="80" cy="80" r="30" fill="#FF6B6B" opacity="0.8"/>
|
||||
<circle cx="120" cy="90" r="30" fill="#4ECDC4" opacity="0.8"/>
|
||||
<circle cx="160" cy="80" r="30" fill="#45B7D1" opacity="0.8"/>
|
||||
<circle cx="200" cy="90" r="30" fill="#96CEB4" opacity="0.8"/>
|
||||
<circle cx="240" cy="80" r="30" fill="#FFEAA7" opacity="0.8"/>
|
||||
<circle cx="280" cy="90" r="30" fill="#DDA0DD" opacity="0.8"/>
|
||||
<circle cx="320" cy="80" r="30" fill="#98D8C8" opacity="0.8"/>
|
||||
<circle cx="100" cy="150" r="30" fill="#F7DC6F" opacity="0.8"/>
|
||||
<circle cx="140" cy="160" r="30" fill="#BB8FCE" opacity="0.8"/>
|
||||
<circle cx="180" cy="150" r="30" fill="#85C1E9" opacity="0.8"/>
|
||||
</g>
|
||||
<rect x="60" y="200" width="280" height="60" rx="8" fill="none" stroke="#0ea5e9" stroke-width="2"/>
|
||||
<text x="200" y="238" text-anchor="middle" fill="#fff" font-size="16">10 צבעים באיכות HD</text>
|
||||
</svg>
|
||||
<div class="tech-feature-visual">
|
||||
<div class="tech-image-wrapper">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80"
|
||||
alt="הדפסה צבעונית באיכות גבוהה"
|
||||
loading="lazy"
|
||||
class="tech-image"
|
||||
>
|
||||
<div class="tech-image-overlay"></div>
|
||||
</div>
|
||||
<div class="color-dots" aria-hidden="true">
|
||||
<span class="color-dot" style="background: #FF6B6B;"></span>
|
||||
<span class="color-dot" style="background: #4ECDC4;"></span>
|
||||
<span class="color-dot" style="background: #45B7D1;"></span>
|
||||
<span class="color-dot" style="background: #96CEB4;"></span>
|
||||
<span class="color-dot" style="background: #FFEAA7;"></span>
|
||||
<span class="color-dot" style="background: #DDA0DD;"></span>
|
||||
<span class="color-dot" style="background: #98D8C8;"></span>
|
||||
<span class="color-dot" style="background: #F7DC6F;"></span>
|
||||
<span class="color-dot" style="background: #BB8FCE;"></span>
|
||||
<span class="color-dot" style="background: #85C1E9;"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-feature-content">
|
||||
<h3>הדפסה עד 10 צבעים</h3>
|
||||
<h3 class="gradient-text">הדפסה עד 10 צבעים</h3>
|
||||
<p>אנו מציעים טכנולוגיית דפוס חדישה עם ארבע מכונות המסוגלות להדפיס עד 10 צבעים באמצעות גלופות HD NX. איכות דפוס גבוהה במיוחד עם רוחב יריעה של 1,450 מ"מ ופסיעה של 1,250 מ"מ.</p>
|
||||
<ul class="tech-specs">
|
||||
<li><strong>רוחב יריעה:</strong> 1,450 מ"מ</li>
|
||||
@@ -125,19 +138,19 @@
|
||||
</div>
|
||||
|
||||
<div class="tech-feature reveal-fade">
|
||||
<div class="tech-feature-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 400 300" fill="none">
|
||||
<circle cx="200" cy="150" r="100" fill="none" stroke="#0ea5e9" stroke-width="2"/>
|
||||
<circle cx="200" cy="150" r="70" fill="none" stroke="#d4af37" stroke-width="2"/>
|
||||
<circle cx="200" cy="150" r="40" fill="#0ea5e9" opacity="0.2"/>
|
||||
<path d="M200 50v40M200 210v40M100 150h40M260 150h40" stroke="#0ea5e9" stroke-width="2" opacity="0.5"/>
|
||||
<path d="M130 80l25 25M270 220l-25-25M270 80l-25 25M130 220l25-25" stroke="#d4af37" stroke-width="1" opacity="0.5"/>
|
||||
<circle cx="200" cy="150" r="15" fill="#0ea5e9"/>
|
||||
<path d="M190 150l7 7 13-14" stroke="#1a1a2e" stroke-width="2"/>
|
||||
</svg>
|
||||
<div class="tech-feature-visual">
|
||||
<div class="tech-image-wrapper">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?auto=format&fit=crop&w=600&q=80"
|
||||
alt="טכנולוגיה ירוקה וידידותית לסביבה"
|
||||
loading="lazy"
|
||||
class="tech-image"
|
||||
>
|
||||
<div class="tech-image-overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-feature-content">
|
||||
<h3>גלופות HD NX</h3>
|
||||
<h3 class="gradient-text">גלופות HD NX</h3>
|
||||
<p>אנו מספקים יתרונות ייחודיים ללקוחותינו בכך שיש בבעלותנו אמצעי ייצור גלופות. אנו עושים שימוש בטכנולוגיית HD NX המשדרגת את איכות הדפסת הפלקסו לרמה גבוהה במיוחד.</p>
|
||||
<div class="eco-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
@@ -154,26 +167,29 @@
|
||||
<section class="advantages" aria-labelledby="advantages-heading">
|
||||
<div class="container">
|
||||
<header class="section-header reveal-fade">
|
||||
<span class="section-tag">יתרונות</span>
|
||||
<h2 id="advantages-heading" class="section-title">למה לעבוד איתנו?</h2>
|
||||
<span class="section-tag">
|
||||
<span class="tag-icon">◈</span>
|
||||
יתרונות
|
||||
</span>
|
||||
<h2 id="advantages-heading" class="section-title gradient-text">למה לעבוד איתנו?</h2>
|
||||
</header>
|
||||
<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>
|
||||
<h3>מחירים תחרותיים</h3>
|
||||
<p>עבודה ישירה עם יצרנים טורקיים מובילים מאפשרת לנו להציע מחירים תחרותיים במיוחד.</p>
|
||||
</div>
|
||||
<div class="advantage-item reveal-slide">
|
||||
<div class="advantage-item reveal-slide glass-card">
|
||||
<div class="advantage-number" aria-hidden="true">02</div>
|
||||
<h3>איכות גבוהה</h3>
|
||||
<p>טכנולוגיות מתקדמות וחומרים איכותיים לתוצאות מעולות בכל פרויקט.</p>
|
||||
</div>
|
||||
<div class="advantage-item reveal-slide">
|
||||
<div class="advantage-item reveal-slide glass-card">
|
||||
<div class="advantage-number" aria-hidden="true">03</div>
|
||||
<h3>שירות אישי</h3>
|
||||
<p>ליווי צמוד מהייעוץ הראשוני ועד האספקה הסופית.</p>
|
||||
</div>
|
||||
<div class="advantage-item reveal-slide">
|
||||
<div class="advantage-item reveal-slide glass-card">
|
||||
<div class="advantage-number" aria-hidden="true">04</div>
|
||||
<h3>ידידות לסביבה</h3>
|
||||
<p>טכנולוגיות ירוקות ללא שפכים ועם צמצום השפעה סביבתית.</p>
|
||||
@@ -183,17 +199,22 @@
|
||||
</section>
|
||||
|
||||
<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="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>
|
||||
<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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-glow" aria-hidden="true"></div>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
@@ -227,5 +248,71 @@
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<style>
|
||||
.color-dots {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s ease;
|
||||
animation: colorPop 0.5s ease forwards;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.color-dot:nth-child(1) { animation-delay: 0.1s; }
|
||||
.color-dot:nth-child(2) { animation-delay: 0.15s; }
|
||||
.color-dot:nth-child(3) { animation-delay: 0.2s; }
|
||||
.color-dot:nth-child(4) { animation-delay: 0.25s; }
|
||||
.color-dot:nth-child(5) { animation-delay: 0.3s; }
|
||||
.color-dot:nth-child(6) { animation-delay: 0.35s; }
|
||||
.color-dot:nth-child(7) { animation-delay: 0.4s; }
|
||||
.color-dot:nth-child(8) { animation-delay: 0.45s; }
|
||||
.color-dot:nth-child(9) { animation-delay: 0.5s; }
|
||||
.color-dot:nth-child(10) { animation-delay: 0.55s; }
|
||||
|
||||
@keyframes colorPop {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.color-dot:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.tech-feature-visual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tech-image-wrapper {
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.tech-image {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-slow);
|
||||
}
|
||||
|
||||
.tech-image-wrapper:hover .tech-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user