AI update: שדרוג לדף הדמו של 'Hair On Top' (מספרה/עיצוב שיער):

1) תמונות: בכל מקום שיש placeholder או חוסר תמונה — הוסף תמונות סטו
This commit is contained in:
2026-08-19 19:27:25 +00:00
parent 584bf880db
commit 0819ce8c44
3 changed files with 562 additions and 184 deletions
+121 -80
View File
@@ -41,8 +41,8 @@
<main id="main-content">
<section id="hero" class="hero">
<div class="hero-bg">
<div class="hero-pattern"></div>
<div class="hero-gradient"></div>
<img src="https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1920&q=80" alt="" class="hero-image" loading="eager">
<div class="hero-overlay"></div>
</div>
<div class="hero-content">
<p class="hero-tag">מספרה מעצבת בחולון</p>
@@ -77,54 +77,45 @@
</header>
<div class="services-grid">
<article class="service-card reveal">
<div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<circle cx="32" cy="20" r="12" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M20 52c0-8 5-14 12-14s12 6 12 14" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="44" y1="16" x2="56" y2="8" stroke="currentColor" stroke-width="2"/>
<line x1="44" y1="24" x2="56" y2="32" stroke="currentColor" stroke-width="2"/>
</svg>
<div class="service-image">
<img src="https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=600&q=80" alt="תספורת גברים מודרנית" loading="lazy">
</div>
<div class="service-content">
<h3 class="service-title">תספורות טרנדיות</h3>
<p class="service-desc">תספורות עדכניות לגברים ונשים בהתאמה אישית. אנחנו עוקבים אחרי הטרנדים העולמיים ומתאימים את הסגנון בדיוק אליכם.</p>
<span class="service-tag">גברים ונשים</span>
</div>
<h3 class="service-title">תספורות טרנדיות</h3>
<p class="service-desc">תספורות עדכניות לגברים ונשים בהתאמה אישית. אנחנו עוקבים אחרי הטרנדים העולמיים ומתאימים את הסגנון בדיוק אליכם.</p>
<span class="service-tag">גברים ונשים</span>
</article>
<article class="service-card reveal">
<div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="16" y="12" width="32" height="44" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="32" cy="32" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="32" y1="40" x2="32" y2="48" stroke="currentColor" stroke-width="2"/>
</svg>
<div class="service-image">
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=600&q=80" alt="צביעת שיער מקצועית" loading="lazy">
</div>
<div class="service-content">
<h3 class="service-title">צביעות מקצועיות</h3>
<p class="service-desc">צביעה מלאה, גוונים, אומברה ובלאיאז׳. אנחנו משתמשים בחומרים איכותיים ששומרים על בריאות השיער.</p>
<span class="service-tag">כל סוגי הצבע</span>
</div>
<h3 class="service-title">צביעות מקצועיות</h3>
<p class="service-desc">צביעה מלאה, גוונים, אומברה ובלאיאז׳. אנחנו משתמשים בחומרים איכותיים ששומרים על בריאות השיער.</p>
<span class="service-tag">כל סוגי הצבע</span>
</article>
<article class="service-card service-card-featured reveal">
<div class="service-badge">הכי מבוקש</div>
<div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<path d="M12 32 C12 16 24 8 32 8 C40 8 52 16 52 32 C52 48 40 56 32 56 C24 56 12 48 12 32" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="32" y1="16" x2="32" y2="48" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 2"/>
<circle cx="32" cy="32" r="4" fill="currentColor"/>
</svg>
<div class="service-image">
<img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=600&q=80" alt="החלקת שיער מושלמת" loading="lazy">
</div>
<div class="service-content">
<h3 class="service-title">החלקות שיער</h3>
<p class="service-desc">החלקה ברזילאית, יפנית וקראטין. תוצאות חלקות ומבריקות שנשמרות לאורך זמן.</p>
<span class="service-tag">תוצאות לטווח ארוך</span>
</div>
<h3 class="service-title">החלקות שיער</h3>
<p class="service-desc">החלקה ברזילאית, יפנית וקראטין. תוצאות חלקות ומבריקות שנשמרות לאורך זמן.</p>
<span class="service-tag">תוצאות לטווח ארוך</span>
</article>
<article class="service-card reveal">
<div class="service-icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<circle cx="32" cy="32" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M32 12 L36 28 L32 32 L28 28 Z" fill="currentColor"/>
<circle cx="32" cy="32" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
</svg>
<div class="service-image">
<img src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?w=600&q=80" alt="הבהרות שיער טבעיות" loading="lazy">
</div>
<div class="service-content">
<h3 class="service-title">הבהרות</h3>
<p class="service-desc">הבהרות מקצועיות, היילייטס ובייביליס. יוצרים עומק וממד טבעי בשיער שלכם.</p>
<span class="service-tag">מראה טבעי</span>
</div>
<h3 class="service-title">הבהרות</h3>
<p class="service-desc">הבהרות מקצועיות, היילייטס ובייביליס. יוצרים עומק וממד טבעי בשיער שלכם.</p>
<span class="service-tag">מראה טבעי</span>
</article>
</div>
</div>
@@ -138,40 +129,28 @@
</header>
<div class="gallery-grid">
<figure class="gallery-item gallery-item-tall reveal" aria-label="תספורת גברים">
<div class="gallery-visual" style="--hue: 45;">
<div class="gallery-pattern gallery-pattern-1"></div>
<span class="gallery-label">תספורת גברים</span>
</div>
<img src="https://images.unsplash.com/photo-1621605815971-fbc98d665033?w=600&q=80" alt="תספורת גברים מעוצבת" loading="lazy">
<figcaption class="gallery-label">תספורת גברים</figcaption>
</figure>
<figure class="gallery-item reveal" aria-label="צביעה אומברה">
<div class="gallery-visual" style="--hue: 35;">
<div class="gallery-pattern gallery-pattern-2"></div>
<span class="gallery-label">צביעה אומברה</span>
</div>
<img src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?w=600&q=80" alt="צביעת אומברה מרהיבה" loading="lazy">
<figcaption class="gallery-label">צביעה אומברה</figcaption>
</figure>
<figure class="gallery-item reveal" aria-label="החלקה ברזילאית">
<div class="gallery-visual" style="--hue: 50;">
<div class="gallery-pattern gallery-pattern-3"></div>
<span class="gallery-label">החלקה ברזילאית</span>
</div>
<img src="https://images.unsplash.com/photo-1522337094846-8a818192de1f?w=600&q=80" alt="שיער חלק ומבריק" loading="lazy">
<figcaption class="gallery-label">החלקה ברזילאית</figcaption>
</figure>
<figure class="gallery-item gallery-item-wide reveal" aria-label="בלאיאז׳">
<div class="gallery-visual" style="--hue: 40;">
<div class="gallery-pattern gallery-pattern-4"></div>
<span class="gallery-label">בלאיאז׳</span>
</div>
<img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?w=900&q=80" alt="בלאיאז׳ מקצועי" loading="lazy">
<figcaption class="gallery-label">בלאיאז׳</figcaption>
</figure>
<figure class="gallery-item reveal" aria-label="תספורת נשים">
<div class="gallery-visual" style="--hue: 55;">
<div class="gallery-pattern gallery-pattern-5"></div>
<span class="gallery-label">תספורת נשים</span>
</div>
<img src="https://images.unsplash.com/photo-1562322140-8baeececf3df?w=600&q=80" alt="תספורת נשים אלגנטית" loading="lazy">
<figcaption class="gallery-label">תספורת נשים</figcaption>
</figure>
<figure class="gallery-item reveal" aria-label="הבהרות">
<div class="gallery-visual" style="--hue: 42;">
<div class="gallery-pattern gallery-pattern-6"></div>
<span class="gallery-label">הבהרות</span>
</div>
<img src="https://images.unsplash.com/photo-1634449571010-02389ed0f9b0?w=600&q=80" alt="הבהרות טבעיות" loading="lazy">
<figcaption class="gallery-label">הבהרות</figcaption>
</figure>
</div>
</div>
@@ -181,15 +160,8 @@
<div class="container">
<div class="about-grid">
<div class="about-visual reveal">
<div class="about-shape-container">
<div class="about-icon-scissors">
<svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
<circle cx="25" cy="30" r="12"/>
<circle cx="25" cy="70" r="12"/>
<line x1="35" y1="35" x2="75" y2="65"/>
<line x1="35" y1="65" x2="75" y2="35"/>
</svg>
</div>
<div class="about-image-container">
<img src="https://images.unsplash.com/photo-1633681926022-84c23e8cb2d6?w=600&q=80" alt="סלון עיצוב שיער מודרני" loading="lazy">
</div>
<div class="about-badge">
<span class="about-badge-number">10+</span>
@@ -229,14 +201,19 @@
<section class="cta">
<div class="container">
<div class="cta-content reveal">
<h2 class="cta-title">מוכנים לשינוי?</h2>
<p class="cta-desc">התקשרו עכשיו ונקבע לכם תור</p>
<a href="tel:0545411291" class="btn btn-primary btn-large">
<svg class="btn-icon" 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>
054-541-1291
</a>
<div class="cta-image">
<img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?w=400&q=80" alt="מוצרי טיפוח שיער" loading="lazy">
</div>
<div class="cta-text">
<h2 class="cta-title">מוכנים לשינוי?</h2>
<p class="cta-desc">התקשרו עכשיו ונקבע לכם תור</p>
<a href="tel:0545411291" class="btn btn-primary btn-large">
<svg class="btn-icon" 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>
054-541-1291
</a>
</div>
</div>
</div>
</section>
@@ -312,6 +289,70 @@
</div>
</footer>
<!-- Sale Popup -->
<div class="popup-overlay" id="salePopup" role="dialog" aria-modal="true" aria-labelledby="popupTitle">
<div class="popup-container">
<button class="popup-close" aria-label="סגור חלון" id="popupClose">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
<div class="popup-header">
<div class="popup-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
<polyline points="9 12 11 14 15 10"/>
</svg>
</div>
<h2 class="popup-title" id="popupTitle">האתר שלך מוכן!</h2>
<p class="popup-subtitle">בחרו איך אתם רוצים אותו</p>
</div>
<div class="popup-options">
<div class="popup-option">
<div class="popup-option-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
</div>
<div class="popup-option-content">
<h3 class="popup-option-title">הורדת קוד בלבד</h3>
<p class="popup-option-desc">קבלו את כל קבצי האתר ותעלו אותם לשרת שלכם</p>
</div>
<button class="popup-option-btn popup-option-btn-secondary">הורדה</button>
</div>
<div class="popup-option popup-option-featured">
<div class="popup-option-badge">מומלץ</div>
<div class="popup-option-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
</svg>
</div>
<div class="popup-option-content">
<h3 class="popup-option-title">חבילה מלאה</h3>
<p class="popup-option-desc">אחסון + דומיין + תמיכה — האתר עולה לאוויר מיד</p>
</div>
<button class="popup-option-btn popup-option-btn-primary">לפרטים</button>
</div>
</div>
<div class="popup-warning">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="12"/>
<line x1="12" y1="16" x2="12.01" y2="16"/>
</svg>
<p>דף ההדגמה הזה יימחק אוטומטית תוך <strong>30 יום</strong> אם לא תתקבל תגובה או רכישה</p>
</div>
<div class="popup-extra">
<p>רוצים שינויים נוספים? עמודים, תמונות, התאמות — <button class="popup-link">צרו קשר לפרטים</button></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>