AI update: שדרוג ויזואלי מקיף לאתר עמוס רוזמרין - מהנדס אריזה:
## 1. תמונות אמיתיות (הוסף מ-Unsplash/Pexels CDN): ### Hero Sectio
This commit is contained in:
+45
-140
@@ -14,7 +14,7 @@
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
|
||||
<div class="particles-container" aria-hidden="true">
|
||||
<div class="particles-bg" aria-hidden="true">
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
<div class="particle"></div>
|
||||
@@ -52,11 +52,8 @@
|
||||
<main id="main-content">
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<span class="section-tag reveal-fade">
|
||||
<span class="tag-icon">◈</span>
|
||||
טכנולוגיה
|
||||
</span>
|
||||
<h1 class="page-title reveal-fade gradient-text">טכנולוגיה מתקדמת</h1>
|
||||
<span class="section-tag reveal-fade">טכנולוגיה</span>
|
||||
<h1 class="page-title gradient-text reveal-fade">טכנולוגיה מתקדמת</h1>
|
||||
<p class="page-subtitle reveal-fade">חדשנות וטכנולוגיה מתקדמת לתוצאות מעולות</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -65,30 +62,11 @@
|
||||
<h2 id="tech-details-heading" class="visually-hidden">פרטי טכנולוגיה</h2>
|
||||
<div class="container">
|
||||
<div class="tech-feature reveal-fade">
|
||||
<div class="tech-feature-visual">
|
||||
<div class="tech-image-wrapper">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=600&q=80"
|
||||
alt="טכנולוגיית שיחול מתקדמת"
|
||||
loading="lazy"
|
||||
class="tech-image"
|
||||
>
|
||||
<div class="tech-image-overlay"></div>
|
||||
</div>
|
||||
<div class="layers-visual">
|
||||
<div class="layer-bar" style="--delay: 0.1s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.2s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.3s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.4s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.5s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.6s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.7s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.8s;"></div>
|
||||
<div class="layer-bar" style="--delay: 0.9s;"></div>
|
||||
</div>
|
||||
<div class="tech-feature-visual" aria-hidden="true">
|
||||
<img src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=800&q=80" alt="טכנולוגיית שיחול מתקדמת" loading="lazy">
|
||||
</div>
|
||||
<div class="tech-feature-content">
|
||||
<h3 class="gradient-text">שיחול עד 9 שכבות</h3>
|
||||
<h3>שיחול עד 9 שכבות</h3>
|
||||
<p>אנו מייצרים יריעות בנות 9 שכבות בעלות חסם גבוה על בסיס PA ו-EVOH. טכנולוגיה זו מאפשרת לנו לספק פתרונות אריזה מלאים למוצרים הדורשים חסם גבוה, כגון בשר ומוצרי חלב.</p>
|
||||
<div class="materials-list">
|
||||
<span class="material">PE</span>
|
||||
@@ -103,31 +81,27 @@
|
||||
</div>
|
||||
|
||||
<div class="tech-feature reverse reveal-fade">
|
||||
<div class="tech-feature-visual">
|
||||
<div class="tech-image-wrapper">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?auto=format&fit=crop&w=600&q=80"
|
||||
alt="הדפסה צבעונית באיכות גבוהה"
|
||||
loading="lazy"
|
||||
class="tech-image"
|
||||
>
|
||||
<div class="tech-image-overlay"></div>
|
||||
</div>
|
||||
<div class="color-dots" aria-hidden="true">
|
||||
<span class="color-dot" style="background: #FF6B6B;"></span>
|
||||
<span class="color-dot" style="background: #4ECDC4;"></span>
|
||||
<span class="color-dot" style="background: #45B7D1;"></span>
|
||||
<span class="color-dot" style="background: #96CEB4;"></span>
|
||||
<span class="color-dot" style="background: #FFEAA7;"></span>
|
||||
<span class="color-dot" style="background: #DDA0DD;"></span>
|
||||
<span class="color-dot" style="background: #98D8C8;"></span>
|
||||
<span class="color-dot" style="background: #F7DC6F;"></span>
|
||||
<span class="color-dot" style="background: #BB8FCE;"></span>
|
||||
<span class="color-dot" style="background: #85C1E9;"></span>
|
||||
</div>
|
||||
<div class="tech-feature-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 400 300" fill="none">
|
||||
<rect width="400" height="300" fill="#16213e"/>
|
||||
<g class="print-colors">
|
||||
<circle cx="80" cy="80" r="30" fill="#FF6B6B" opacity="0.8"/>
|
||||
<circle cx="120" cy="90" r="30" fill="#4ECDC4" opacity="0.8"/>
|
||||
<circle cx="160" cy="80" r="30" fill="#45B7D1" opacity="0.8"/>
|
||||
<circle cx="200" cy="90" r="30" fill="#96CEB4" opacity="0.8"/>
|
||||
<circle cx="240" cy="80" r="30" fill="#FFEAA7" opacity="0.8"/>
|
||||
<circle cx="280" cy="90" r="30" fill="#DDA0DD" opacity="0.8"/>
|
||||
<circle cx="320" cy="80" r="30" fill="#98D8C8" opacity="0.8"/>
|
||||
<circle cx="100" cy="150" r="30" fill="#F7DC6F" opacity="0.8"/>
|
||||
<circle cx="140" cy="160" r="30" fill="#BB8FCE" opacity="0.8"/>
|
||||
<circle cx="180" cy="150" r="30" fill="#85C1E9" opacity="0.8"/>
|
||||
</g>
|
||||
<rect x="60" y="200" width="280" height="60" rx="8" fill="none" stroke="#0ea5e9" stroke-width="2"/>
|
||||
<text x="200" y="238" text-anchor="middle" fill="#fff" font-size="16">10 צבעים באיכות HD</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tech-feature-content">
|
||||
<h3 class="gradient-text">הדפסה עד 10 צבעים</h3>
|
||||
<h3>הדפסה עד 10 צבעים</h3>
|
||||
<p>אנו מציעים טכנולוגיית דפוס חדישה עם ארבע מכונות המסוגלות להדפיס עד 10 צבעים באמצעות גלופות HD NX. איכות דפוס גבוהה במיוחד עם רוחב יריעה של 1,450 מ"מ ופסיעה של 1,250 מ"מ.</p>
|
||||
<ul class="tech-specs">
|
||||
<li><strong>רוחב יריעה:</strong> 1,450 מ"מ</li>
|
||||
@@ -138,19 +112,20 @@
|
||||
</div>
|
||||
|
||||
<div class="tech-feature reveal-fade">
|
||||
<div class="tech-feature-visual">
|
||||
<div class="tech-image-wrapper">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?auto=format&fit=crop&w=600&q=80"
|
||||
alt="טכנולוגיה ירוקה וידידותית לסביבה"
|
||||
loading="lazy"
|
||||
class="tech-image"
|
||||
>
|
||||
<div class="tech-image-overlay"></div>
|
||||
</div>
|
||||
<div class="tech-feature-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 400 300" fill="none">
|
||||
<rect width="400" height="300" fill="#16213e"/>
|
||||
<circle cx="200" cy="150" r="100" fill="none" stroke="#0ea5e9" stroke-width="2"/>
|
||||
<circle cx="200" cy="150" r="70" fill="none" stroke="#d4af37" stroke-width="2"/>
|
||||
<circle cx="200" cy="150" r="40" fill="#0ea5e9" opacity="0.2"/>
|
||||
<path d="M200 50v40M200 210v40M100 150h40M260 150h40" stroke="#0ea5e9" stroke-width="2" opacity="0.5"/>
|
||||
<path d="M130 80l25 25M270 220l-25-25M270 80l-25 25M130 220l25-25" stroke="#d4af37" stroke-width="1" opacity="0.5"/>
|
||||
<circle cx="200" cy="150" r="15" fill="#0ea5e9"/>
|
||||
<path d="M190 150l7 7 13-14" stroke="#1a1a2e" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tech-feature-content">
|
||||
<h3 class="gradient-text">גלופות HD NX</h3>
|
||||
<h3>גלופות HD NX</h3>
|
||||
<p>אנו מספקים יתרונות ייחודיים ללקוחותינו בכך שיש בבעלותנו אמצעי ייצור גלופות. אנו עושים שימוש בטכנולוגיית HD NX המשדרגת את איכות הדפסת הפלקסו לרמה גבוהה במיוחד.</p>
|
||||
<div class="eco-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
@@ -167,29 +142,26 @@
|
||||
<section class="advantages" aria-labelledby="advantages-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="advantages-heading" class="section-title gradient-text">למה לעבוד איתנו?</h2>
|
||||
</header>
|
||||
<div class="advantages-grid">
|
||||
<div class="advantage-item reveal-slide glass-card">
|
||||
<div class="advantage-item reveal-slide">
|
||||
<div class="advantage-number" aria-hidden="true">01</div>
|
||||
<h3>מחירים תחרותיים</h3>
|
||||
<p>עבודה ישירה עם יצרנים טורקיים מובילים מאפשרת לנו להציע מחירים תחרותיים במיוחד.</p>
|
||||
</div>
|
||||
<div class="advantage-item reveal-slide glass-card">
|
||||
<div class="advantage-item reveal-slide">
|
||||
<div class="advantage-number" aria-hidden="true">02</div>
|
||||
<h3>איכות גבוהה</h3>
|
||||
<p>טכנולוגיות מתקדמות וחומרים איכותיים לתוצאות מעולות בכל פרויקט.</p>
|
||||
</div>
|
||||
<div class="advantage-item reveal-slide glass-card">
|
||||
<div class="advantage-item reveal-slide">
|
||||
<div class="advantage-number" aria-hidden="true">03</div>
|
||||
<h3>שירות אישי</h3>
|
||||
<p>ליווי צמוד מהייעוץ הראשוני ועד האספקה הסופית.</p>
|
||||
</div>
|
||||
<div class="advantage-item reveal-slide glass-card">
|
||||
<div class="advantage-item reveal-slide">
|
||||
<div class="advantage-number" aria-hidden="true">04</div>
|
||||
<h3>ידידות לסביבה</h3>
|
||||
<p>טכנולוגיות ירוקות ללא שפכים ועם צמצום השפעה סביבתית.</p>
|
||||
@@ -200,12 +172,12 @@
|
||||
|
||||
<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 class="cta-gradient-orb"></div>
|
||||
<div class="cta-gradient-orb secondary"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="cta-content reveal-fade">
|
||||
<h2 id="tech-cta-heading" class="cta-title gradient-text">רוצים לשמוע עוד?</h2>
|
||||
<h2 id="tech-cta-heading" class="cta-title">רוצים לשמוע עוד?</h2>
|
||||
<p class="cta-desc">נשמח להסביר על הטכנולוגיות שלנו ולהתאים פתרון לצרכים שלכם</p>
|
||||
<a href="contact.html" class="btn btn-primary btn-large btn-glow">בואו נדבר</a>
|
||||
</div>
|
||||
@@ -214,7 +186,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">
|
||||
@@ -248,71 +219,5 @@
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<style>
|
||||
.color-dots {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s ease;
|
||||
animation: colorPop 0.5s ease forwards;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.color-dot:nth-child(1) { animation-delay: 0.1s; }
|
||||
.color-dot:nth-child(2) { animation-delay: 0.15s; }
|
||||
.color-dot:nth-child(3) { animation-delay: 0.2s; }
|
||||
.color-dot:nth-child(4) { animation-delay: 0.25s; }
|
||||
.color-dot:nth-child(5) { animation-delay: 0.3s; }
|
||||
.color-dot:nth-child(6) { animation-delay: 0.35s; }
|
||||
.color-dot:nth-child(7) { animation-delay: 0.4s; }
|
||||
.color-dot:nth-child(8) { animation-delay: 0.45s; }
|
||||
.color-dot:nth-child(9) { animation-delay: 0.5s; }
|
||||
.color-dot:nth-child(10) { animation-delay: 0.55s; }
|
||||
|
||||
@keyframes colorPop {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.color-dot:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.tech-feature-visual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tech-image-wrapper {
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.tech-image {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-slow);
|
||||
}
|
||||
|
||||
.tech-image-wrapper:hover .tech-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user