AI update: בדוק בדף הבית ובכל דף רלוונטי באתר את קוד הפופ-אפ/הכפתור לרכישה. אם קיימים יותר מעותק אחד של סקריפט תשלום (למשל שילוב של
This commit is contained in:
+95
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user