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