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

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

### Hero Sectio
This commit is contained in:
2026-10-11 16:57:28 +00:00
parent f3497f0671
commit c12e1c5dbd
8 changed files with 787 additions and 1177 deletions
+96 -168
View File
@@ -19,7 +19,7 @@
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
<!-- Floating Particles Background -->
<div class="particles-container" aria-hidden="true">
<div class="particles-bg" aria-hidden="true">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
@@ -61,23 +61,18 @@
<main id="main-content">
<section class="hero">
<div class="hero-bg" aria-hidden="true">
<img
src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1920&q=80"
alt=""
class="hero-image"
loading="eager"
>
<img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1920&q=80" alt="" class="hero-bg-image" loading="eager">
<div class="hero-overlay"></div>
<div class="hero-gradient-mesh"></div>
</div>
<div class="hero-content">
<div class="hero-badge reveal-fade">
<span class="badge-icon">✦</span>
<span class="badge-pulse"></span>
מהנדס ייצור עצמאי מאז 2006
</div>
<h1 class="hero-title reveal-fade">
<span class="title-line typewriter">פתרונות אריזה גמישה</span>
<span class="highlight gradient-text">לתעשייה הישראלית</span>
<span class="title-line">פתרונות אריזה גמישה</span>
<span class="title-line highlight gradient-text">לתעשייה הישראלית</span>
</h1>
<p class="hero-subtitle reveal-fade">ידע טכני, ניסיון של למעלה מ-18 שנה ומומחיות באריזות גמישות — הכל מתכנס למוצר אחד מדויק עבורכם.</p>
<div class="hero-actions reveal-fade">
@@ -85,12 +80,11 @@
<span>בואו נדבר</span>
<span class="btn-ripple"></span>
</a>
<a href="products.html" class="btn btn-secondary btn-glass">לכל המוצרים</a>
<a href="products.html" class="btn btn-secondary">לכל המוצרים</a>
</div>
<div class="hero-stats reveal-fade">
<div class="stat">
<span class="stat-number" data-count="18">0</span>
<span class="stat-plus">+</span>
<span class="stat-number" data-count="18">0</span><span class="stat-plus">+</span>
<span class="stat-label">שנות ניסיון</span>
</div>
<div class="stat">
@@ -107,35 +101,26 @@
<div class="mouse">
<div class="wheel"></div>
</div>
<span>גלול למטה</span>
<span>גללו למטה</span>
</div>
</section>
<div class="wave-divider" aria-hidden="true">
<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" fill="currentColor"/>
<path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" fill="currentColor"/>
<path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,googletrans172.46-45.71,248.8-84.81V0Z" fill="currentColor"/>
<svg viewBox="0 0 1440 120" preserveAspectRatio="none">
<path d="M0,60 C360,120 720,0 1080,60 C1260,90 1380,90 1440,60 L1440,120 L0,120 Z" fill="var(--color-bg-deep)"/>
</svg>
</div>
<section class="expertise" aria-labelledby="expertise-heading">
<div class="container">
<header class="section-header reveal-fade">
<span class="section-tag">
<span class="tag-icon">◈</span>
תחומי התמחות
</span>
<span class="section-tag">תחומי התמחות</span>
<h2 id="expertise-heading" class="section-title gradient-text">פתרונות אריזה לכל תעשייה</h2>
</header>
<div class="expertise-grid">
<article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80"
alt="אריזות מזון גמישות צבעוניות"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1621939514649-280e2ee25f60?auto=format&fit=crop&w=600&q=80" alt="אריזות מזון גמישות" loading="lazy">
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
@@ -156,11 +141,7 @@
</article>
<article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1583947215259-38e31be8751f?auto=format&fit=crop&w=600&q=80"
alt="מוצרי היגיינה וניקיון ארוזים"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1556227702-d1e4e7b5c232?auto=format&fit=crop&w=600&q=80" alt="מוצרי ניקיון ארוזים" loading="lazy">
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
@@ -182,11 +163,7 @@
</article>
<article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&w=600&q=80"
alt="שקיות Stand-up pouches"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80" alt="שקיות עומדות" loading="lazy">
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
@@ -207,11 +184,7 @@
</article>
<article class="expertise-card glass-card reveal-slide" data-tilt>
<div class="card-image">
<img
src="https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=600&q=80"
alt="ירקות ופירות ארוזים"
loading="lazy"
>
<img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?auto=format&fit=crop&w=600&q=80" alt="ירקות ארוזים" loading="lazy">
<div class="card-image-overlay"></div>
</div>
<div class="card-content">
@@ -239,46 +212,35 @@
<section class="about-preview" aria-labelledby="about-preview-heading">
<div class="container">
<div class="about-preview-grid">
<div class="about-image-wrapper reveal-fade">
<div class="about-image-frame">
<img
src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=600&q=80"
alt="איש מקצוע בתעשייה"
loading="lazy"
class="about-image"
>
<div class="about-image-decoration"></div>
<div class="about-preview-image reveal-fade">
<div class="profile-frame">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=500&q=80" alt="עמוס רוזמרין - מהנדס אריזה" loading="lazy">
<div class="profile-glow"></div>
</div>
<div class="about-experience-badge">
<span class="experience-number" data-count="18">0</span>
<span class="experience-plus">+</span>
<span class="experience-text">שנות<br>ניסיון</span>
<div class="experience-badge glass-card">
<span class="exp-number">18+</span>
<span class="exp-text">שנות ניסיון</span>
</div>
</div>
<div class="about-content reveal-fade">
<span class="section-tag">
<span class="tag-icon">◈</span>
אודות
</span>
<h2 id="about-preview-heading" class="section-title">עמוס רוזמרין</h2>
<p class="about-subtitle gradient-text">מהנדס אריזה מומחה</p>
<p class="about-text">שמי עמוס רוזמרין, ואני מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות.</p>
<p class="about-text">המשימה שלי היא להבטיח אריזה אמינה, יעילה וחסכונית — המשמרת את איכות המוצר, עומדת בתקנים ומותאמת לקו הייצור שלכם.</p>
<div class="about-specialties">
<div class="specialty-item">
<span class="specialty-icon">????</span>
<span>דיוק והתאמה</span>
<div class="about-preview-content">
<span class="section-tag reveal-fade">אודות</span>
<h2 id="about-preview-heading" class="section-title reveal-fade">עמוס רוזמרין</h2>
<p class="about-preview-desc reveal-fade">מהנדס ייצור עצמאי המתמחה בפיתוח, התאמה ושיפור פתרונות אריזה גמישה וקופסאות קרטון לתעשיות המזון והחקלאות, ההיגיינה, הקוסמטיקה וחומרי הניקוי.</p>
<div class="expertise-badges reveal-fade">
<div class="expertise-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span>אריזות גמישות</span>
</div>
<div class="specialty-item">
<span class="specialty-icon">????</span>
<span>ייצור מתקדם</span>
<div class="expertise-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span>קרטון מעוצב</span>
</div>
<div class="specialty-item">
<span class="specialty-icon">????</span>
<span>ידידות לסביבה</span>
<div class="expertise-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span>ייעוץ טכני</span>
</div>
</div>
<a href="about.html" class="btn btn-secondary btn-glass">קראו עוד עליי</a>
<a href="about.html" class="btn btn-primary reveal-fade">קראו עוד עליי</a>
</div>
</div>
</div>
@@ -289,32 +251,24 @@
<div class="tech-grid">
<div class="tech-visual reveal-fade" aria-hidden="true">
<div class="tech-image-wrapper">
<img
src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80"
alt="טכנולוגיית שיחול מתקדמת"
loading="lazy"
class="tech-image"
>
<img src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80" alt="טכנולוגיית שיחול מתקדמת" loading="lazy">
<div class="tech-image-overlay"></div>
</div>
<div class="layers-visual">
<div class="layer-bar" style="--delay: 0.1s;"></div>
<div class="layer-bar" style="--delay: 0.2s;"></div>
<div class="layer-bar" style="--delay: 0.3s;"></div>
<div class="layer-bar" style="--delay: 0.4s;"></div>
<div class="layer-bar" style="--delay: 0.5s;"></div>
<div class="layer-bar" style="--delay: 0.6s;"></div>
<div class="layer-bar" style="--delay: 0.7s;"></div>
<div class="layer-bar" style="--delay: 0.8s;"></div>
<div class="layer-bar" style="--delay: 0.9s;"></div>
<div class="layer-bar" style="--delay: 0"></div>
<div class="layer-bar" style="--delay: 1"></div>
<div class="layer-bar" style="--delay: 2"></div>
<div class="layer-bar" style="--delay: 3"></div>
<div class="layer-bar" style="--delay: 4"></div>
<div class="layer-bar" style="--delay: 5"></div>
<div class="layer-bar" style="--delay: 6"></div>
<div class="layer-bar" style="--delay: 7"></div>
<div class="layer-bar" style="--delay: 8"></div>
</div>
</div>
<div class="tech-content">
<span class="section-tag reveal-fade">
<span class="tag-icon">◈</span>
טכנולוגיה מתקדמת
</span>
<h2 id="tech-heading" class="section-title reveal-fade gradient-text">שיחול עד 9 שכבות</h2>
<span class="section-tag reveal-fade">טכנולוגיה מתקדמת</span>
<h2 id="tech-heading" class="section-title gradient-text reveal-fade">שיחול עד 9 שכבות</h2>
<p class="tech-desc reveal-fade">אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH, ומספקים פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה כגון בשר ומוצרי חלב.</p>
<ul class="tech-features">
<li class="reveal-fade">
@@ -324,9 +278,7 @@
</svg>
</div>
<span>הדפסה עד 10 צבעים באיכות HD</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 100%;"></div>
</div>
<div class="feature-progress" style="--progress: 100%"></div>
</li>
<li class="reveal-fade">
<div class="feature-icon-wrapper">
@@ -335,9 +287,7 @@
</svg>
</div>
<span>גלופות HD NX ללא שפכים</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 90%;"></div>
</div>
<div class="feature-progress" style="--progress: 100%"></div>
</li>
<li class="reveal-fade">
<div class="feature-icon-wrapper">
@@ -346,9 +296,7 @@
</svg>
</div>
<span>ידידותי לסביבה</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 85%;"></div>
</div>
<div class="feature-progress" style="--progress: 100%"></div>
</li>
<li class="reveal-fade">
<div class="feature-icon-wrapper">
@@ -357,9 +305,7 @@
</svg>
</div>
<span>מחירים תחרותיים</span>
<div class="feature-progress">
<div class="progress-bar" style="--width: 95%;"></div>
</div>
<div class="feature-progress" style="--progress: 100%"></div>
</li>
</ul>
<a href="technology.html" class="btn btn-primary btn-glow reveal-fade">עוד על הטכנולוגיה</a>
@@ -368,96 +314,79 @@
</div>
</section>
<div class="wave-divider wave-up" aria-hidden="true">
<svg viewBox="0 0 1440 120" preserveAspectRatio="none">
<path d="M0,60 C360,0 720,120 1080,60 C1260,30 1380,30 1440,60 L1440,0 L0,0 Z" fill="var(--color-bg-deep)"/>
</svg>
</div>
<section class="clients-preview" aria-labelledby="clients-heading">
<div class="container">
<header class="section-header reveal-fade">
<span class="section-tag">
<span class="tag-icon">◈</span>
לקוחות
</span>
<span class="section-tag">לקוחות</span>
<h2 id="clients-heading" class="section-title gradient-text">לקוחות שסומכים עלינו</h2>
<p class="section-desc">שיתופי פעולה ארוכי טווח עם מותגים מובילים בתעשיית המזון הישראלית</p>
</header>
<div class="clients-logos-grid reveal-fade">
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ב</span>
<span class="logo-name">מאפיית ברמן</span>
</div>
<div class="clients-logo-grid reveal-fade">
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ב</div>
<span class="logo-name">מאפיית ברמן</span>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ד</span>
<span class="logo-name">דגנית</span>
</div>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ד</div>
<span class="logo-name">דגנית</span>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ח</span>
<span class="logo-name">חסלט</span>
</div>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ח</div>
<span class="logo-name">חסלט</span>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">י</span>
<span class="logo-name">יבולי הכפר</span>
</div>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">י</div>
<span class="logo-name">יבולי הכפר</span>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">א</span>
<span class="logo-name">אסיף</span>
</div>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">א</div>
<span class="logo-name">אסיף</span>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ח</span>
<span class="logo-name">חטיפי העמק</span>
</div>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ח</div>
<span class="logo-name">חטיפי העמק</span>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">פ</span>
<span class="logo-name">פרג</span>
</div>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">פ</div>
<span class="logo-name">פרג</span>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ש</span>
<span class="logo-name">שיבולים</span>
</div>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ש</div>
<span class="logo-name">שיבולים</span>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">מ</span>
<span class="logo-name">מאיר בייגל</span>
</div>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">מ</div>
<span class="logo-name">מאיר בייגל</span>
</div>
<div class="client-logo-card" data-tilt>
<div class="logo-inner">
<span class="logo-letter">ג</span>
<span class="logo-name">גילרו</span>
</div>
<div class="client-logo-card glass-card" data-tilt>
<div class="logo-letter">ג</div>
<span class="logo-name">גילרו</span>
</div>
</div>
<div class="clients-cta reveal-fade">
<a href="clients.html" class="btn btn-secondary btn-glass">לכל הלקוחות</a>
<a href="clients.html" class="btn btn-secondary">לכל הלקוחות</a>
</div>
</div>
</section>
<section class="cta-section" aria-labelledby="cta-heading">
<div class="cta-bg" aria-hidden="true">
<div class="cta-gradient-orb cta-orb-1"></div>
<div class="cta-gradient-orb cta-orb-2"></div>
<div class="cta-gradient-orb"></div>
<div class="cta-gradient-orb secondary"></div>
</div>
<div class="container">
<div class="cta-content reveal-fade">
<h2 id="cta-heading" class="cta-title gradient-text">מחפשים פתרון אריזה לקו הייצור שלכם?</h2>
<h2 id="cta-heading" class="cta-title">מחפשים פתרון אריזה לקו הייצור שלכם?</h2>
<p class="cta-desc">נשמח לשמוע על הצרכים שלכם ולהציע פתרון מותאם אישית</p>
<div class="cta-actions">
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
<a href="tel:054-818-1092" class="btn btn-outline btn-large btn-glass">
<a href="tel:054-818-1092" class="btn btn-outline btn-large">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
</svg>
@@ -470,7 +399,6 @@
</main>
<footer class="site-footer">
<div class="footer-glow" aria-hidden="true"></div>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">