AI update: שדרוג ויזואלי מקיף לאתר עמוס רוזמרין - מהנדס אריזה:
## 1. תמונות אמיתיות (הוסף מ-Unsplash/Pexels CDN): ### Hero Sectio
This commit is contained in:
+134
-7
@@ -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
@@ -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 class="cloud-item cloud-medium">
|
|
||||||
<span>דגנית</span>
|
|
||||||
</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 class="cloud-item cloud-medium">
|
|
||||||
<span>יבולי הכפר</span>
|
|
||||||
</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 class="cloud-item cloud-large">
|
|
||||||
<span>חטיפי העמק</span>
|
|
||||||
</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 class="cloud-item cloud-small">
|
|
||||||
<span>שיבולים</span>
|
|
||||||
</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 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="cloud-item cloud-medium">
|
|
||||||
<span>גילרו</span>
|
|
||||||
</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
@@ -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">
|
||||||
|
|||||||
+267
-79
@@ -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,64 +61,84 @@
|
|||||||
<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-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>
|
||||||
|
<div class="card-content">
|
||||||
<div class="card-icon" aria-hidden="true">
|
<div class="card-icon" aria-hidden="true">
|
||||||
<svg viewBox="0 0 64 64" fill="none">
|
<svg viewBox="0 0 64 64" fill="none">
|
||||||
<circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2"/>
|
<circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="2"/>
|
||||||
@@ -120,8 +152,18 @@
|
|||||||
גלו את המגוון
|
גלו את המגוון
|
||||||
<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>
|
<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>
|
</a>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="expertise-card reveal-slide">
|
<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>
|
||||||
|
<div class="card-content">
|
||||||
<div class="card-icon" aria-hidden="true">
|
<div class="card-icon" aria-hidden="true">
|
||||||
<svg viewBox="0 0 64 64" fill="none">
|
<svg viewBox="0 0 64 64" fill="none">
|
||||||
<rect x="16" y="12" width="32" height="44" rx="4" stroke="currentColor" stroke-width="2"/>
|
<rect x="16" y="12" width="32" height="44" rx="4" stroke="currentColor" stroke-width="2"/>
|
||||||
@@ -136,8 +178,18 @@
|
|||||||
לפרטים נוספים
|
לפרטים נוספים
|
||||||
<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>
|
<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>
|
</a>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="expertise-card reveal-slide">
|
<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">
|
<div class="card-icon" aria-hidden="true">
|
||||||
<svg viewBox="0 0 64 64" fill="none">
|
<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="M12 52V20a4 4 0 014-4h32a4 4 0 014 4v32" stroke="currentColor" stroke-width="2"/>
|
||||||
@@ -151,8 +203,18 @@
|
|||||||
ראו דוגמאות
|
ראו דוגמאות
|
||||||
<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>
|
<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>
|
</a>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="expertise-card reveal-slide">
|
<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">
|
<div class="card-icon" aria-hidden="true">
|
||||||
<svg viewBox="0 0 64 64" fill="none">
|
<svg viewBox="0 0 64 64" fill="none">
|
||||||
<ellipse cx="32" cy="48" rx="20" ry="6" stroke="currentColor" stroke-width="2"/>
|
<ellipse cx="32" cy="48" rx="20" ry="6" stroke="currentColor" stroke-width="2"/>
|
||||||
@@ -168,71 +230,139 @@
|
|||||||
לפתרונות חקלאות
|
לפתרונות חקלאות
|
||||||
<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>
|
<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>
|
</a>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
||||||
|
|
||||||
<section class="tech-highlight" aria-labelledby="tech-heading">
|
<section class="tech-highlight" aria-labelledby="tech-heading">
|
||||||
<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">
|
||||||
|
<div class="feature-icon-wrapper">
|
||||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
<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"/>
|
<path d="M20 6L9 17l-5-5"/>
|
||||||
</svg>
|
</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">
|
||||||
|
<div class="feature-icon-wrapper">
|
||||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
<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"/>
|
<path d="M20 6L9 17l-5-5"/>
|
||||||
</svg>
|
</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">
|
||||||
|
<div class="feature-icon-wrapper">
|
||||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
<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"/>
|
<path d="M20 6L9 17l-5-5"/>
|
||||||
</svg>
|
</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">
|
||||||
|
<div class="feature-icon-wrapper">
|
||||||
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
<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"/>
|
<path d="M20 6L9 17l-5-5"/>
|
||||||
</svg>
|
</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
@@ -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">
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
// Add staggered delay for grid items
|
||||||
|
const delay = entry.target.dataset.delay || 0;
|
||||||
|
setTimeout(function() {
|
||||||
entry.target.classList.add('revealed');
|
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 = [
|
||||||
|
'.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';
|
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>
|
<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>
|
||||||
|
|||||||
Reference in New Issue
Block a user