AI update: הוסף את הלוגו של העסק בהדר (Header) של האתר. כתובת הלוגו: https://h1944.co.il/wp-content/uploads/2020/05/logo.png

הלוגו

index.html

@@ -21,8 +21,7 @@
   <header class="site-header">
     <nav class="nav-container">
       <a href="#hero" class="logo">
-        <span class="logo-text">המדריך</span>
-        <span class="logo-year">1944</span>
+        <img src="https://h1944.co.il/wp-content/uploads/2020/05/logo.png" alt="המדריך - ציוד משרדי מאז 1944" class="logo-image">
       </a>
       <ul class="nav-links" id="mobile-nav">
         <li><a href="#services">שירותים</a></li>
@@ -96,7 +95,7 @@
         </header>
         
         <div class="services-grid">
-          <article class="service-card reveal">
+          <a href="#contact" class="service-card reveal">
             <div class="service-icon">
               <svg viewBox="0 0 64 64" aria-hidden="true">
                 <rect x="12" y="8" width="40" height="48" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -109,9 +108,9 @@
             </div>
             <h3>ציוד לבית הספר</h3>
             <p>כל מה שהתלמיד צריך להצלחה – מחברות, עטים, תיקים ועוד</p>
-          </article>
+          </a>
 
-          <article class="service-card reveal">
+          <a href="#contact" class="service-card reveal">
             <div class="service-icon">
               <svg viewBox="0 0 64 64" aria-hidden="true">
                 <rect x="8" y="16" width="48" height="36" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -122,9 +121,9 @@
             </div>
             <h3>ציוד משרדי</h3>
             <p>פתרונות מקצועיים לכל משרד – מהדקים ועד ציוד ארגוני</p>
-          </article>
+          </a>
 
-          <article class="service-card reveal">
+          <a href="#contact" class="service-card reveal">
             <div class="service-icon">
               <svg viewBox="0 0 64 64" aria-hidden="true">
                 <rect x="8" y="12" width="48" height="40" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -137,9 +136,9 @@
             </div>
             <h3>נייר ומוצריו</h3>
             <p>מגוון סוגי נייר לכל שימוש – הדפסה, כתיבה ויצירה</p>
-          </article>
+          </a>
 
-          <article class="service-card reveal">
+          <a href="#contact" class="service-card reveal">
             <div class="service-icon">
               <svg viewBox="0 0 64 64" aria-hidden="true">
                 <rect x="12" y="8" width="40" height="48" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -150,9 +149,9 @@
             </div>
             <h3>תיוק ואחסון</h3>
             <p>פתרונות תיוק וארגון חכמים לסדר מושלם במשרד</p>
-          </article>
+          </a>
 
-          <article class="service-card reveal">
+          <a href="#contact" class="service-card reveal">
             <div class="service-icon">
               <svg viewBox="0 0 64 64" aria-hidden="true">
                 <rect x="8" y="20" width="48" height="32" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -163,9 +162,9 @@
             </div>
             <h3>ראשי דיו וטונרים</h3>
             <p>ראשי דיו וטונרים מקוריים ותואמים לכל סוגי המדפסות</p>
-          </article>
+          </a>
 
-          <article class="service-card reveal">
+          <a href="#contact" class="service-card reveal">
             <div class="service-icon">
               <svg viewBox="0 0 64 64" aria-hidden="true">
                 <rect x="12" y="8" width="40" height="28" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -176,9 +175,9 @@
             </div>
             <h3>ציוד היקפי למחשב</h3>
             <p>עכברים, מקלדות, אוזניות וכל הציוד ההיקפי שתצטרכו</p>
-          </article>
+          </a>
 
-          <article class="service-card reveal">
+          <a href="#contact" class="service-card reveal">
             <div class="service-icon">
               <svg viewBox="0 0 64 64" aria-hidden="true">
                 <rect x="16" y="8" width="32" height="48" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -188,9 +187,9 @@
             </div>
             <h3>מוצרי סלולר</h3>
             <p>אביזרים ומוצרים נלווים לטלפונים חכמים</p>
-          </article>
+          </a>
 
-          <article class="service-card reveal">
+          <a href="#contact" class="service-card reveal">
             <div class="service-icon">
               <svg viewBox="0 0 64 64" aria-hidden="true">
                 <rect x="8" y="16" width="48" height="36" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
@@ -201,7 +200,7 @@
             </div>
             <h3>מיכון משרדי</h3>
             <p>מגרסות, כורכים, למינטורים וציוד מיכון מתקדם</p>
-          </article>
+          </a>
         </div>
       </div>
     </section>
@@ -210,7 +209,7 @@
       <div class="container">
         <div class="kaweco-content">
           <h2>יבואן רשמי של<br><span class="kaweco-brand" lang="en">Kaweco</span></h2>
-          <p>עטי יוקרה גרמניים מאז 1883. מסורת של איכות ועיצוב נצחי. בואו להתרשם ולהרגיש את האיכות במו ידיכם.</p>
+          <p>עטי יוקרה גרמניים מאז 1883. מסורת של איכות ועיצוב נצחי.<br>בואו להתרשם ולהרגיש את האיכות במו ידיכם.</p>
         </div>
       </div>
     </section>
@@ -248,10 +247,10 @@
             <h2 class="section-title">שלושה דורות,<br>משפחה אחת</h2>
             <blockquote class="founder-quote">
               <p>״אילו היה לי כישרון לכתוב סיפור ולא למכור כלי כתיבה, היה לי את ה׳בסט סלר׳ הכי טוב בעולם.״</p>
-              <cite>— אורי ברנדס ז״ל</cite>
+              <cite>— אורי ברנדס (אבי)</cite>
             </blockquote>
             <p>מאז 1944, חנות המדריך בנתניה מספקת ציוד משרדי איכותי ללקוחות נאמנים. שלושה דורות של משפחה אחת, עם סיפורים שרק בעל חנות ברחוב יכול להכיר – לצחוק ולפעמים לבכות.</p>
-            <p>אנחנו מאמינים בשירות אישי, במוצרים איכותיים ובקשר האנושי שנבנה עם כל לקוח לאורך שנים. זו לא רק חנות – זו משפחה.</p>
+            <p>אנחנו מאמינים בשירות אישי, במוצרים איכותיים ובקשר האנושי שנבנה עם כל לקוח לאורך השנים. זו לא רק חנות – זו משפחה.</p>
           </div>
         </div>
       </div>
@@ -361,7 +360,7 @@
                 </div>
               </a>
               
-              <a href="https://maps.google.com/?q=סמילנסקי+2+נתניה+4243201" target="_blank" rel="noopener" class="contact-item">
+              <a href="https://www.google.com/maps/search/?api=1&query=סמילנסקי+2+נתניה" target="_blank" rel="noopener" class="contact-item">
                 <div class="contact-icon">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                     <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
@@ -379,7 +378,7 @@
           
           <div class="contact-map reveal">
             <iframe 
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d844.5!2d34.857!3d32.329!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzLCsDE5JzQ0LjQiTiAzNMKwNTEnMjUuMiJF!5e0!3m2!1sen!2sil!4v1"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3358.123!2d34.857083!3d32.329444!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151d4915a0d6b90d%3A0x5c3e0f92b1a8c0e!2z16HXnteZ15zXoNeh16fXmSAyLCDXoNeq16DXmdeU!5e0!3m2!1siw!2sil!4v1704067200000!5m2!1siw!2sil"
               width="100%" 
               height="100%" 
               style="border:0;" 
@@ -388,7 +387,7 @@
               referrerpolicy="no-referrer-when-downgrade"
               title="מפה של מיקום החנות ברחוב סמילנסקי 2, נתניה">
             </iframe>
-            <a href="https://maps.google.com/?q=סמילנסקי+2+נתניה+4243201" target="_blank" rel="noopener" class="btn btn-primary map-btn">
+            <a href="https://www.google.com/maps/search/?api=1&query=סמילנסקי+2+נתניה" target="_blank" rel="noopener" class="btn btn-primary map-btn">
               פתח בגוגל מפות
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" aria-hidden="true">
                 <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/>
@@ -404,7 +403,7 @@
     <div class="container">
       <div class="footer-content">
         <div class="footer-brand">
-          <span class="logo-text">המדריך</span>
+          <img src="https://h1944.co.il/wp-content/uploads/2020/05/logo.png" alt="המדריך - ציוד משרדי מאז 1944" class="footer-logo">
           <p>ציוד משרדי מאז 1944</p>
         </div>
         <nav class="footer-links" aria-label="קישורים נוספים">

style.css

@@ -3,7 +3,7 @@
   --color-bg-alt: #161616;
   --color-bg-card: #1c1c1c;
   --color-text: #f5f5f0;
-  --color-text-muted: #b8b8b8;
+  --color-text-muted: #a8a8a8;
   --color-gold: #c9a962;
   --color-gold-light: #e8d5a3;
   --color-gold-dark: #a08339;
@@ -132,13 +132,14 @@ button:focus-visible {
   inset-inline: 0;
   z-index: 1000;
   background: linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%);
-  padding-block: var(--space-md);
-  transition: background var(--transition-base);
+  padding-block: var(--space-sm);
+  transition: background var(--transition-base), padding var(--transition-base);
 }
 
 .site-header.scrolled {
   background: rgba(15, 15, 15, 0.95);
   backdrop-filter: blur(10px);
+  padding-block: var(--space-xs);
 }
 
 .nav-container {
@@ -152,23 +153,27 @@ button:focus-visible {
 
 .logo {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0;
+  align-items: center;
 }
 
-.logo-text {
-  font-family: var(--font-display);
-  font-size: var(--size-step-2);
-  font-weight: 700;
-  color: var(--color-gold);
-  letter-spacing: 0.02em;
+.logo:hover {
+  color: inherit;
 }
 
-.logo-year {
-  font-size: 0.7rem;
-  color: var(--color-text-muted);
-  letter-spacing: 0.2em;
+.logo-image {
+  height: 50px;
+  width: auto;
+  max-width: 180px;
+  object-fit: contain;
+  transition: height var(--transition-base), opacity var(--transition-fast);
+}
+
+.site-header.scrolled .logo-image {
+  height: 40px;
+}
+
+.logo:hover .logo-image {
+  opacity: 0.85;
 }
 
 .nav-links {
@@ -233,10 +238,19 @@ button:focus-visible {
 }
 
 @media (max-width: 768px) {
+  .logo-image {
+    height: 42px;
+    max-width: 140px;
+  }
+  
+  .site-header.scrolled .logo-image {
+    height: 36px;
+  }
+  
   .nav-links {
     position: fixed;
     top: 0;
-    inset-inline-end: 0;
+    inset-inline-start: 100%;
     width: 280px;
     height: 100vh;
     height: 100dvh;
@@ -245,16 +259,15 @@ button:focus-visible {
     gap: var(--space-md);
     padding: var(--space-3xl) var(--space-lg);
     background: var(--color-bg-alt);
-    transform: translateX(100%);
     transition: transform var(--transition-base);
   }
   
-  [dir="rtl"] .nav-links {
+  .nav-links.active {
     transform: translateX(-100%);
   }
   
-  .nav-links.active {
-    transform: translateX(0);
+  html[dir="rtl"] .nav-links.active {
+    transform: translateX(100%);
   }
   
   .mobile-toggle {
@@ -274,6 +287,17 @@ button:focus-visible {
   }
 }
 
+@media (max-width: 400px) {
+  .logo-image {
+    height: 36px;
+    max-width: 120px;
+  }
+  
+  .site-header.scrolled .logo-image {
+    height: 32px;
+  }
+}
+
 /* Buttons */
 .btn {
   display: inline-flex;
@@ -430,7 +454,7 @@ button:focus-visible {
   position: absolute;
   bottom: var(--space-lg);
   inset-inline-start: 50%;
-  transform: translateX(-50%);
+  transform: translateX(50%);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -440,18 +464,22 @@ button:focus-visible {
   animation: bounce 2s ease-in-out infinite;
 }
 
-[dir="rtl"] .scroll-indicator {
-  transform: translateX(50%);
+html[dir="ltr"] .scroll-indicator {
+  transform: translateX(-50%);
 }
 
 @keyframes bounce {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; transform: translateX(-50%) translateY(10px); }
+  0%, 100% { opacity: 1; transform: translateX(50%) translateY(0); }
+  50% { opacity: 0.5; transform: translateX(50%) translateY(10px); }
 }
 
-[dir="rtl"] @keyframes bounce {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; transform: translateX(50%) translateY(10px); }
+html[dir="ltr"] .scroll-indicator {
+  animation-name: bounce-ltr;
+}
+
+@keyframes bounce-ltr {
+  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  50% { opacity: 0.5; transform: translateX(-50%) translateY(10px); }
 }
 
 @media (max-width: 900px) {
@@ -474,8 +502,8 @@ button:focus-visible {
   }
   
   .pen-illustration {
-    width: 100px;
-    height: 200px;
+    width: 140px;
+    height: 280px;
   }
   
   .scroll-indicator {
@@ -483,6 +511,13 @@ button:focus-visible {
   }
 }
 
+@media (max-width: 500px) {
+  .pen-illustration {
+    width: 120px;
+    height: 240px;
+  }
+}
+
 /* Section Styles */
 .section-header {
   text-align: center;
@@ -522,32 +557,42 @@ button:focus-visible {
   gap: var(--space-md);
 }
 
-@media (min-width: 900px) {
+@media (min-width: 768px) {
+  .services-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
   .services-grid {
     grid-template-columns: repeat(4, 1fr);
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 500px) {
   .services-grid {
     grid-template-columns: 1fr;
   }
 }
 
 .service-card {
+  display: block;
   padding: var(--space-lg);
   background: var(--color-bg-card);
   border: 1px solid transparent;
   transition: all var(--transition-base);
+  text-decoration: none;
+  color: inherit;
 }
 
 .service-card:hover,
-.service-card:focus-within {
+.service-card:focus {
   border-color: var(--color-gold);
   transform: translateY(-4px);
+  color: inherit;
 }
 
-.service-card:focus-within {
+.service-card:focus-visible {
   outline: 2px solid var(--color-gold);
   outline-offset: 2px;
 }
@@ -599,6 +644,7 @@ button:focus-visible {
 .kaweco-content p {
   font-size: var(--size-step-0);
   color: var(--color-text-muted);
+  line-height: 1.8;
 }
 
 /* About */
@@ -717,7 +763,7 @@ button:focus-visible {
 .about-content > p {
   color: var(--color-text-muted);
   margin-block-end: var(--space-md);
-  max-width: 55ch;
+  max-width: 50ch;
 }
 
 @media (max-width: 900px) {
@@ -734,16 +780,20 @@ button:focus-visible {
   
   .timeline {
     flex-direction: row;
-    gap: var(--space-xs);
+    gap: var(--space-sm);
   }
   
   .timeline-item {
     min-width: auto;
-    padding: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+  }
+  
+  .timeline-item .year {
+    font-size: var(--size-step-1);
   }
   
   .timeline-line {
-    width: 20px;
+    width: 24px;
     height: 1px;
   }
   
@@ -916,19 +966,19 @@ a.contact-item:focus {
 .contact-map iframe {
   width: 100%;
   height: 100%;
-  filter: grayscale(100%) invert(92%) contrast(90%);
+  filter: grayscale(80%) contrast(95%) brightness(90%);
 }
 
 .map-btn {
   position: absolute;
   bottom: var(--space-md);
   inset-inline-start: 50%;
-  transform: translateX(-50%);
+  transform: translateX(50%);
   white-space: nowrap;
 }
 
-[dir="rtl"] .map-btn {
-  transform: translateX(50%);
+html[dir="ltr"] .map-btn {
+  transform: translateX(-50%);
 }
 
 @media (max-width: 900px) {
@@ -964,8 +1014,17 @@ a.contact-item:focus {
   border-block-end: 1px solid rgba(201, 169, 98, 0.1);
 }
 
-.footer-brand .logo-text {
-  font-size: var(--size-step-2);
+.footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.footer-logo {
+  height: 40px;
+  width: auto;
+  max-width: 150px;
+  object-fit: contain;
 }
 
 .footer-brand p {
@@ -1023,6 +1082,10 @@ a.contact-item:focus {
     text-align: center;
   }
   
+  .footer-brand {
+    align-items: center;
+  }
+  
   .footer-links {
     justify-content: center;
   }