AI update: בדוק בדף הבית ובכל דף רלוונטי באתר את קוד הפופ-אפ/הכפתור לרכישה. אם קיימים יותר מעותק אחד של סקריפט תשלום (למשל שילוב של

This commit is contained in:
2026-08-22 12:09:39 +00:00
parent 9ee17a917a
commit c47b502b5d
2 changed files with 255 additions and 1 deletions
+95
View File
@@ -32,6 +32,7 @@
<li><a href="#about">עלינו</a></li>
<li><a href="#reviews">ביקורות</a></li>
<li><a href="#contact">צור קשר</a></li>
<li><a href="#pricing" class="nav-pricing-link">חבילות ומחירים</a></li>
</ul>
<a href="tel:0504001413" class="nav-cta" aria-label="התקשרי להזמנת תור">הזמיני תור</a>
<button class="menu-toggle" aria-label="פתיחת תפריט" aria-expanded="false" aria-controls="nav-links">
@@ -296,6 +297,100 @@
</div>
</section>
<section id="pricing" class="pricing">
<div class="container">
<header class="section-header reveal">
<span class="section-tag">חבילות מיוחדות</span>
<h2 class="section-title">בחרי את החבילה המתאימה לך</h2>
</header>
<div class="pricing-grid">
<article class="pricing-card reveal">
<div class="pricing-header">
<h3>חבילת קוד</h3>
<p class="pricing-desc">לעיצוב שיער בסיסי ומקצועי</p>
</div>
<div class="pricing-price">
<span class="price-amount">₪1,490</span>
</div>
<ul class="pricing-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6 L9 17 l-5 -5"/>
</svg>
<span>תספורת מקצועית</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6 L9 17 l-5 -5"/>
</svg>
<span>ייעוץ סטיילינג</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6 L9 17 l-5 -5"/>
</svg>
<span>עיצוב ופיניש</span>
</li>
</ul>
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il?biz=sarit-hasaprit&plan=code" class="pricing-cta" target="_blank" rel="noopener">
<span>לרכישה</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</article>
<article class="pricing-card pricing-card-featured reveal">
<div class="pricing-badge">הכי פופולרי</div>
<div class="pricing-header">
<h3>חבילה מלאה</h3>
<p class="pricing-desc">חוויה שלמה ומפנקת</p>
</div>
<div class="pricing-price">
<span class="price-amount">₪2,390</span>
</div>
<ul class="pricing-features">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6 L9 17 l-5 -5"/>
</svg>
<span>תספורת מקצועית</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6 L9 17 l-5 -5"/>
</svg>
<span>צביעה / החלקה</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6 L9 17 l-5 -5"/>
</svg>
<span>טיפול שיקום לשיער</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6 L9 17 l-5 -5"/>
</svg>
<span>עיצוב מלא ופיניש</span>
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 6 L9 17 l-5 -5"/>
</svg>
<span>ייעוץ לטיפוח ביתי</span>
</li>
</ul>
<a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il?biz=sarit-hasaprit&plan=full" class="pricing-cta pricing-cta-featured" target="_blank" rel="noopener">
<span>לרכישה</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</article>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="contact-layout">
+160 -1
View File
@@ -184,6 +184,11 @@ button {
outline-offset: 2px;
}
.nav-pricing-link {
color: var(--color-accent) !important;
font-weight: 500 !important;
}
.nav-cta {
display: none;
padding: var(--space-xs) var(--space-md);
@@ -885,6 +890,160 @@ button {
}
}
/* Pricing */
.pricing {
padding: var(--space-2xl) 0;
background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-bg) 100%);
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
max-width: 800px;
margin-inline: auto;
}
@media (min-width: 600px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.pricing-card {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-lg);
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: 0 4px 24px rgba(61, 50, 41, 0.08);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(61, 50, 41, 0.12);
}
.pricing-card-featured {
border: 2px solid var(--color-accent);
box-shadow: 0 8px 32px rgba(139, 105, 20, 0.15);
}
.pricing-card-featured:hover {
box-shadow: 0 16px 48px rgba(139, 105, 20, 0.2);
}
.pricing-badge {
position: absolute;
top: -12px;
inset-inline-start: 50%;
transform: translateX(50%);
padding: var(--space-xs) var(--space-md);
font-size: 0.8rem;
font-weight: 600;
color: var(--color-white);
background: var(--color-accent);
border-radius: var(--radius-full);
white-space: nowrap;
}
.pricing-header {
text-align: center;
margin-block-end: var(--space-md);
}
.pricing-header h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text);
margin-block-end: var(--space-xs);
}
.pricing-desc {
font-size: 0.95rem;
color: var(--color-text-light);
}
.pricing-price {
text-align: center;
margin-block-end: var(--space-lg);
padding-block: var(--space-md);
border-block: 1px solid rgba(201, 168, 124, 0.2);
}
.price-amount {
font-size: 2.5rem;
font-weight: 600;
color: var(--color-accent);
}
.pricing-features {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-block-end: var(--space-lg);
flex-grow: 1;
}
.pricing-features li {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.95rem;
color: var(--color-text);
}
.pricing-features svg {
width: 18px;
height: 18px;
color: var(--color-sage);
flex-shrink: 0;
}
.pricing-cta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md);
font-size: 1rem;
font-weight: 500;
color: var(--color-text);
background: var(--color-cream);
border-radius: var(--radius-md);
transition: background var(--transition-fast), color var(--transition-fast);
}
.pricing-cta:hover {
background: rgba(201, 168, 124, 0.3);
}
.pricing-cta:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
.pricing-cta svg {
width: 18px;
height: 18px;
transition: transform var(--transition-fast);
}
.pricing-cta:hover svg {
transform: translateX(-4px);
}
.pricing-cta-featured {
color: var(--color-white);
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-warm) 100%);
}
.pricing-cta-featured:hover {
background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-warm) 100%);
}
/* Contact */
.contact {
padding: var(--space-2xl) 0;
@@ -1084,4 +1243,4 @@ button:focus-visible {
/* Body scroll lock when popup is open */
body.popup-open {
overflow: hidden;
}
}