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

index.html

@@ -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">

style.css

@@ -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;
-}
+}