Initial AI-generated site

index.html

@@ -0,0 +1,376 @@
+<!doctype html>
+<html lang="he" dir="rtl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>מספרה בחולון – מוצרי שיער | המקום שלך ליופי ולטיפוח</title>
+  <meta name="description" content="מספרה מקצועית וחנות מוצרי שיער בחולון. מותגים מובילים, צוות מומחה, ושירות אישי. הזמינו תור עוד היום!">
+  <meta property="og:title" content="מספרה בחולון – מוצרי שיער">
+  <meta property="og:description" content="המקום שלך ליופי ולטיפוח בחולון. מותגים מובילים ושירות מקצועי.">
+  <meta property="og:type" content="website">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='%23c9a86c'/><path d='M35 30 L35 70 M45 30 L45 70 M55 25 Q70 35 70 50 Q70 65 55 75' stroke='%23fff' stroke-width='4' fill='none'/></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
+  
+  <header class="site-header">
+    <nav class="nav-container">
+      <a href="#" class="logo">
+        <svg class="logo-icon" viewBox="0 0 40 40" aria-hidden="true">
+          <circle cx="20" cy="20" r="18" fill="var(--gold)"/>
+          <path d="M14 12 L14 28 M20 12 L20 28 M26 10 Q34 15 34 20 Q34 25 26 30" stroke="var(--cream)" stroke-width="2" fill="none"/>
+        </svg>
+        <span>סטייל חולון</span>
+      </a>
+      <button class="nav-toggle" aria-label="פתח תפריט" aria-expanded="false" aria-controls="main-nav">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+      <ul class="nav-links" id="main-nav">
+        <li><a href="#about">אודות</a></li>
+        <li><a href="#products">מוצרים</a></li>
+        <li><a href="#gallery">גלריה</a></li>
+        <li><a href="#hours">שעות פתיחה</a></li>
+        <li><a href="#contact">צור קשר</a></li>
+        <li><a href="tel:0507925222" class="nav-cta">הזמנת תור</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main id="main-content">
+    <section class="hero">
+      <div class="hero-bg" aria-hidden="true">
+        <div class="hero-shape hero-shape-1"></div>
+        <div class="hero-shape hero-shape-2"></div>
+        <div class="hero-scissors">
+          <svg viewBox="0 0 80 80">
+            <circle cx="20" cy="20" r="12" fill="none" stroke="var(--gold)" stroke-width="2"/>
+            <circle cx="20" cy="60" r="12" fill="none" stroke="var(--gold)" stroke-width="2"/>
+            <path d="M28 26 L60 50 M28 54 L60 30" stroke="var(--gold)" stroke-width="3" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </div>
+      <div class="hero-content">
+        <p class="hero-tagline">מספרה וחנות מוצרי שיער</p>
+        <h1>הסגנון שלך מתחיל כאן</h1>
+        <p class="hero-desc">כבר למעלה מעשור אנחנו מעצבים את המראה של תושבי חולון. צוות מקצועי, מותגים מובילים, ואווירה שמרגישה כמו בית.</p>
+        <div class="hero-actions">
+          <a href="tel:0507925222" class="btn btn-primary">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1v3.5a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01l-2.2 2.2z"/></svg>
+            הזמנת תור: 050-792-5222
+          </a>
+          <a href="#products" class="btn btn-secondary">לקטלוג המוצרים</a>
+        </div>
+      </div>
+    </section>
+
+    <section id="about" class="about">
+      <div class="container">
+        <div class="about-grid">
+          <div class="about-text reveal">
+            <h2>למה דווקא אנחנו?</h2>
+            <p>פתחנו את הדלתות בשנת 2012 עם חזון פשוט: ליצור מקום שבו כל אחד ירגיש מיוחד. מאז, אלפי לקוחות מחולון והסביבה סומכים עלינו לתספורות, צבעים וטיפולים.</p>
+            <p>אצלנו תמצאו שילוב נדיר — מספרה מקצועית לצד חנות מוצרי שיער עם המותגים הכי טובים בשוק. קנו את המוצר שהמספרה משתמשת בו, או פשוט בואו להתפנק.</p>
+          </div>
+          <div class="about-features reveal">
+            <div class="feature">
+              <div class="feature-icon" aria-hidden="true">
+                <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="20" fill="var(--gold-light)"/><path d="M16 24l6 6 12-12" stroke="var(--gold)" stroke-width="3" fill="none"/></svg>
+              </div>
+              <div>
+                <h3>ניסיון של שנים</h3>
+                <p>צוות מספרים מוסמכים עם הכשרות מתקדמות</p>
+              </div>
+            </div>
+            <div class="feature">
+              <div class="feature-icon" aria-hidden="true">
+                <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="20" fill="var(--gold-light)"/><path d="M24 14v20M14 24h20" stroke="var(--gold)" stroke-width="3" fill="none"/></svg>
+              </div>
+              <div>
+                <h3>מוצרים מקוריים</h3>
+                <p>רק מותגים מובילים, ישירות מהיבואנים</p>
+              </div>
+            </div>
+            <div class="feature">
+              <div class="feature-icon" aria-hidden="true">
+                <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="20" fill="var(--gold-light)"/><path d="M24 8l4 12h12l-10 7 4 12-10-7-10 7 4-12-10-7h12z" stroke="var(--gold)" stroke-width="2" fill="none"/></svg>
+              </div>
+              <div>
+                <h3>יחס אישי</h3>
+                <p>כל לקוח מקבל את מלוא תשומת הלב</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="products" class="products">
+      <div class="container">
+        <div class="section-header reveal">
+          <h2>מוצרים ומותגים</h2>
+          <p>המוצרים שהמספרה עובדת איתם — עכשיו גם אצלכם בבית</p>
+        </div>
+        <div class="brands-showcase reveal">
+          <div class="brand-featured">
+            <div class="brand-logo" aria-hidden="true">
+              <span class="brand-logo-text">L'ORÉAL</span>
+            </div>
+            <h3>לוריאל פרופסיונל</h3>
+            <p>סדרות צבע, טיפוח ועיצוב מקצועיות</p>
+          </div>
+          <div class="brands-grid-small">
+            <div class="brand-card">
+              <span class="brand-name">שוורצקופף</span>
+            </div>
+            <div class="brand-card">
+              <span class="brand-name">וולה</span>
+            </div>
+            <div class="brand-card">
+              <span class="brand-name">מרוקן אויל</span>
+            </div>
+            <div class="brand-card">
+              <span class="brand-name">אולפלקס</span>
+            </div>
+            <div class="brand-card">
+              <span class="brand-name">קרסטס</span>
+            </div>
+            <div class="brand-card">
+              <span class="brand-name">ועוד...</span>
+            </div>
+          </div>
+        </div>
+        <div class="products-categories reveal">
+          <h3>מה תמצאו אצלנו</h3>
+          <ul class="category-list">
+            <li>שמפו ומרכך</li>
+            <li>מסכות וטיפולים</li>
+            <li>שמנים וסרומים</li>
+            <li>מוצרי עיצוב</li>
+            <li>צבעים לשיער</li>
+            <li>מברשות וכלים</li>
+            <li>מייבשי שיער</li>
+            <li>מחליקים ומסלסלים</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section id="gallery" class="gallery">
+      <div class="container">
+        <div class="section-header reveal">
+          <h2>מהעבודות שלנו</h2>
+          <p>כמה דוגמאות לסגנונות שיצרנו עבור לקוחותינו</p>
+        </div>
+        <div class="gallery-grid" role="list">
+          <div class="gallery-item gallery-item-lg reveal" role="listitem">
+            <div class="gallery-visual" style="--hue: 35;" aria-hidden="true">
+              <svg viewBox="0 0 200 200">
+                <defs>
+                  <radialGradient id="g1" cx="30%" cy="30%">
+                    <stop offset="0%" stop-color="hsl(35, 40%, 70%)"/>
+                    <stop offset="100%" stop-color="hsl(35, 30%, 50%)"/>
+                  </radialGradient>
+                </defs>
+                <circle cx="100" cy="100" r="80" fill="url(#g1)"/>
+                <ellipse cx="100" cy="60" rx="50" ry="40" fill="hsl(35, 25%, 35%)"/>
+                <path d="M50 70 Q30 100 50 140 Q70 180 100 180 Q130 180 150 140 Q170 100 150 70" fill="hsl(35, 25%, 35%)"/>
+              </svg>
+            </div>
+            <div class="gallery-caption">
+              <span>תספורת בוב מודרנית</span>
+            </div>
+          </div>
+          <div class="gallery-item reveal" role="listitem">
+            <div class="gallery-visual" style="--hue: 15;" aria-hidden="true">
+              <svg viewBox="0 0 200 200">
+                <defs>
+                  <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stop-color="hsl(15, 50%, 60%)"/>
+                    <stop offset="100%" stop-color="hsl(15, 40%, 40%)"/>
+                  </linearGradient>
+                </defs>
+                <circle cx="100" cy="100" r="70" fill="url(#g2)"/>
+                <path d="M40 80 Q60 20 100 30 Q140 20 160 80 Q170 120 150 160 Q100 200 50 160 Q30 120 40 80" fill="hsl(15, 35%, 30%)"/>
+              </svg>
+            </div>
+            <div class="gallery-caption">
+              <span>צבע נחושת זוהר</span>
+            </div>
+          </div>
+          <div class="gallery-item reveal" role="listitem">
+            <div class="gallery-visual" style="--hue: 200;" aria-hidden="true">
+              <svg viewBox="0 0 200 200">
+                <defs>
+                  <linearGradient id="g3" x1="0%" y1="100%" x2="100%" y2="0%">
+                    <stop offset="0%" stop-color="hsl(200, 20%, 25%)"/>
+                    <stop offset="100%" stop-color="hsl(200, 15%, 45%)"/>
+                  </linearGradient>
+                </defs>
+                <circle cx="100" cy="110" r="65" fill="hsl(200, 10%, 85%)"/>
+                <path d="M35 60 Q50 20 100 25 Q150 20 165 60 L165 90 Q165 140 100 150 Q35 140 35 90 Z" fill="url(#g3)"/>
+              </svg>
+            </div>
+            <div class="gallery-caption">
+              <span>תספורת גברים קלאסית</span>
+            </div>
+          </div>
+          <div class="gallery-item reveal" role="listitem">
+            <div class="gallery-visual" style="--hue: 50;" aria-hidden="true">
+              <svg viewBox="0 0 200 200">
+                <defs>
+                  <linearGradient id="g4" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stop-color="hsl(50, 70%, 75%)"/>
+                    <stop offset="50%" stop-color="hsl(40, 50%, 55%)"/>
+                    <stop offset="100%" stop-color="hsl(30, 40%, 40%)"/>
+                  </linearGradient>
+                </defs>
+                <circle cx="100" cy="100" r="75" fill="url(#g4)"/>
+                <path d="M30 90 Q50 30 100 40 Q150 30 170 90 Q180 150 140 180 Q100 200 60 180 Q20 150 30 90" fill="hsl(45, 60%, 65%)" opacity="0.8"/>
+              </svg>
+            </div>
+            <div class="gallery-caption">
+              <span>בלונד אומברה</span>
+            </div>
+          </div>
+          <div class="gallery-item reveal" role="listitem">
+            <div class="gallery-visual" style="--hue: 330;" aria-hidden="true">
+              <svg viewBox="0 0 200 200">
+                <defs>
+                  <linearGradient id="g5" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" stop-color="hsl(330, 30%, 25%)"/>
+                    <stop offset="100%" stop-color="hsl(330, 25%, 15%)"/>
+                  </linearGradient>
+                </defs>
+                <ellipse cx="100" cy="80" rx="60" ry="50" fill="hsl(30, 30%, 80%)"/>
+                <path d="M30 50 Q50 10 100 20 Q150 10 170 50 Q180 100 160 140 Q140 180 100 180 Q60 180 40 140 Q20 100 30 50" fill="url(#g5)"/>
+              </svg>
+            </div>
+            <div class="gallery-caption">
+              <span>שיער ארוך וחלק</span>
+            </div>
+          </div>
+          <div class="gallery-item reveal" role="listitem">
+            <div class="gallery-visual" style="--hue: 280;" aria-hidden="true">
+              <svg viewBox="0 0 200 200">
+                <defs>
+                  <radialGradient id="g6">
+                    <stop offset="0%" stop-color="hsl(280, 40%, 60%)"/>
+                    <stop offset="100%" stop-color="hsl(280, 35%, 35%)"/>
+                  </radialGradient>
+                </defs>
+                <circle cx="100" cy="100" r="70" fill="url(#g6)"/>
+                <circle cx="100" cy="75" r="35" fill="hsl(280, 30%, 85%)"/>
+                <path d="M40 60 C40 20 160 20 160 60 C170 90 160 120 100 130 C40 120 30 90 40 60" fill="hsl(280, 45%, 50%)"/>
+              </svg>
+            </div>
+            <div class="gallery-caption">
+              <span>גוונים סגולים נועזים</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="hours" class="hours">
+      <div class="container">
+        <div class="hours-grid">
+          <div class="hours-info reveal">
+            <h2>שעות פתיחה</h2>
+            <dl class="hours-table">
+              <div class="hours-row">
+                <dt class="day">ראשון – חמישי</dt>
+                <dd class="time">09:00 – 20:00</dd>
+              </div>
+              <div class="hours-row">
+                <dt class="day">שישי</dt>
+                <dd class="time">08:00 – 14:00</dd>
+              </div>
+              <div class="hours-row closed">
+                <dt class="day">שבת</dt>
+                <dd class="time">סגור</dd>
+              </div>
+            </dl>
+            <div class="hours-note">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="var(--gold)"/></svg>
+              <p>מומלץ לתאם תור מראש לשירות מהיר ואיכותי</p>
+            </div>
+          </div>
+          <div class="location-info reveal">
+            <h2>איפה אנחנו?</h2>
+            <div class="location-card">
+              <div class="location-icon" aria-hidden="true">
+                <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="var(--gold)"/></svg>
+              </div>
+              <div class="location-details">
+                <h3>חולון, מרכז העיר</h3>
+                <p>ממוקמים בלב חולון עם גישה נוחה מכל רחבי העיר ומערי גוש דן.</p>
+                <p class="location-highlight">חניה חינם ברחובות הסמוכים</p>
+              </div>
+            </div>
+            <a href="tel:0507925222" class="btn btn-primary btn-lg">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1v3.5a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01l-2.2 2.2z" fill="currentColor"/></svg>
+              התקשרו: 050-792-5222
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="contact" class="contact">
+      <div class="container">
+        <div class="contact-grid">
+          <div class="contact-info reveal">
+            <h2>צרו קשר</h2>
+            <p>יש שאלה על מוצר? רוצים לקבוע תור? השאירו פרטים ונחזור אליכם תוך יום עסקים.</p>
+            <div class="contact-methods">
+              <a href="tel:0507925222" class="contact-method">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.58.57 1 1 0 011 1v3.5a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.58 1 1 0 01-.24 1.01l-2.2 2.2z" fill="var(--gold)"/></svg>
+                <span dir="ltr">050-792-5222</span>
+              </a>
+            </div>
+          </div>
+          <form class="contact-form reveal" id="contact-form" novalidate aria-describedby="form-demo-note">
+            <div class="form-group">
+              <label for="name">שם מלא</label>
+              <input type="text" id="name" name="name" required autocomplete="name">
+            </div>
+            <div class="form-group">
+              <label for="phone">טלפון</label>
+              <input type="tel" id="phone" name="phone" required autocomplete="tel" dir="ltr">
+            </div>
+            <div class="form-group">
+              <label for="message">הודעה (אופציונלי)</label>
+              <textarea id="message" name="message" rows="4"></textarea>
+            </div>
+            <button type="submit" class="btn btn-primary btn-full">שליחה</button>
+            <p class="form-note" id="form-demo-note">* הטופס לצורכי הדגמה. להזמנת תור התקשרו ישירות.</p>
+          </form>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-brand">
+          <svg class="footer-logo" viewBox="0 0 40 40" aria-hidden="true">
+            <circle cx="20" cy="20" r="18" fill="var(--gold)"/>
+            <path d="M14 12 L14 28 M20 12 L20 28 M26 10 Q34 15 34 20 Q34 25 26 30" stroke="var(--cream)" stroke-width="2" fill="none"/>
+          </svg>
+          <span>סטייל חולון – מספרה ומוצרי שיער</span>
+        </div>
+        <p class="footer-copy">© 2024 כל הזכויות שמורות</p>
+      </div>
+    </div>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+</html>