Initial AI-generated site

index.html

@@ -0,0 +1,291 @@
+<!doctype html>
+<html lang="he" dir="rtl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#c9a067">
+  <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='40' fill='%23c9a067'/></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" aria-label="ניווט ראשי">
+      <a href="#hero" class="logo">סטודיו לירון</a>
+      <ul class="nav-links">
+        <li><a href="#services">שירותים</a></li>
+        <li><a href="#gallery">גלריה</a></li>
+        <li><a href="#contact">צרי קשר</a></li>
+      </ul>
+      <a href="tel:0723257654" class="nav-phone" aria-label="התקשרי אלינו">072-325-7654</a>
+    </nav>
+  </header>
+
+  <main id="main-content">
+    <section id="hero" class="hero">
+      <div class="hero-bg" aria-hidden="true">
+        <svg class="hero-ornament" viewBox="0 0 400 400">
+          <defs>
+            <linearGradient id="gold-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style="stop-color:#d4a574"/>
+              <stop offset="50%" style="stop-color:#c9a067"/>
+              <stop offset="100%" style="stop-color:#b8956a"/>
+            </linearGradient>
+          </defs>
+          <circle cx="200" cy="200" r="180" fill="none" stroke="url(#gold-gradient)" stroke-width="0.5" opacity="0.3"/>
+          <circle cx="200" cy="200" r="150" fill="none" stroke="url(#gold-gradient)" stroke-width="0.5" opacity="0.4"/>
+          <circle cx="200" cy="200" r="120" fill="none" stroke="url(#gold-gradient)" stroke-width="0.5" opacity="0.5"/>
+          <path d="M200 20 Q280 100 200 200 Q120 100 200 20" fill="none" stroke="url(#gold-gradient)" stroke-width="1" opacity="0.6"/>
+          <path d="M200 380 Q120 300 200 200 Q280 300 200 380" fill="none" stroke="url(#gold-gradient)" stroke-width="1" opacity="0.6"/>
+        </svg>
+      </div>
+      <div class="hero-content reveal">
+        <span class="hero-tag">עיצוב שיער לכלות בחולון</span>
+        <h1>היום המושלם<br>מתחיל בשיער מושלם</h1>
+        <p class="hero-sub">עיצוב שיער ואיפור מקצועי לכלות, בגישה אישית ומסורה</p>
+        <div class="hero-cta">
+          <a href="#contact" class="btn btn-primary">קבעי תור לייעוץ</a>
+          <a href="tel:0723257654" class="btn btn-secondary">072-325-7654</a>
+        </div>
+      </div>
+      <div class="hero-scroll" aria-hidden="true">
+        <span>גללי למטה</span>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 5v14"/>
+          <path d="M19 12l-7 7-7-7"/>
+        </svg>
+      </div>
+    </section>
+
+    <section id="services" class="services">
+      <div class="container">
+        <header class="section-header reveal">
+          <span class="section-tag">השירותים שלנו</span>
+          <h2>מגוון שירותים לכל אירוע</h2>
+        </header>
+        <div class="services-grid">
+          <article class="service-card service-card--featured reveal">
+            <div class="service-icon">
+              <svg viewBox="0 0 64 64" aria-hidden="true">
+                <circle cx="32" cy="20" r="12" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M20 36c0-6.6 5.4-12 12-12s12 5.4 12 12v20H20V36z" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M26 28l6-4 6 4" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <circle cx="32" cy="12" r="3" fill="currentColor" opacity="0.5"/>
+              </svg>
+            </div>
+            <h3>עיצוב שיער לכלות</h3>
+            <p>עיצוב שיער מותאם אישית ליום החתונה, כולל ניסיון מקדים והתאמה מושלמת לסגנון השמלה והמראה הכללי</p>
+            <span class="service-price">החל מ-₪800</span>
+          </article>
+          <article class="service-card reveal">
+            <div class="service-icon">
+              <svg viewBox="0 0 64 64" aria-hidden="true">
+                <path d="M20 44l12-32 12 32" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M24 36h16" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <circle cx="32" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M16 52h32" fill="none" stroke="currentColor" stroke-width="1.5"/>
+              </svg>
+            </div>
+            <h3>תספורות נשים</h3>
+            <p>תספורות מקצועיות בכל הסגנונות, מקלאסי ועד מודרני, בהתאמה אישית למבנה הפנים</p>
+            <span class="service-price">החל מ-₪120</span>
+          </article>
+          <article class="service-card reveal">
+            <div class="service-icon">
+              <svg viewBox="0 0 64 64" aria-hidden="true">
+                <rect x="16" y="20" width="32" height="32" rx="4" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M24 20v-6a8 8 0 1116 0v6" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <circle cx="32" cy="36" r="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M32 32v8M28 36h8" fill="none" stroke="currentColor" stroke-width="1.5"/>
+              </svg>
+            </div>
+            <h3>צביעה והבהרה</h3>
+            <p>צביעת שיער מקצועית, אומברה, בלייאז׳, גוונים והבהרות בחומרים איכותיים</p>
+            <span class="service-price">החל מ-₪250</span>
+          </article>
+          <article class="service-card reveal">
+            <div class="service-icon">
+              <svg viewBox="0 0 64 64" aria-hidden="true">
+                <ellipse cx="32" cy="28" rx="16" ry="12" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M20 32c0 8 5.4 20 12 20s12-12 12-20" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                <circle cx="26" cy="26" r="2" fill="currentColor"/>
+                <circle cx="38" cy="26" r="2" fill="currentColor"/>
+                <path d="M28 32c2 2 6 2 8 0" fill="none" stroke="currentColor" stroke-width="1.5"/>
+              </svg>
+            </div>
+            <h3>איפור מקצועי</h3>
+            <p>איפור כלות ואירועים ברמה הגבוהה ביותר, עמיד לאורך כל היום</p>
+            <span class="service-price">החל מ-₪450</span>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="divider">
+      <div class="container">
+        <blockquote class="quote reveal">
+          <p>״כל כלה ראויה להרגיש כמו מלכה ביום הגדול שלה״</p>
+          <cite>— לירון, מעצבת שיער ראשית</cite>
+        </blockquote>
+      </div>
+    </section>
+
+    <section id="gallery" class="gallery">
+      <div class="container">
+        <header class="section-header reveal">
+          <span class="section-tag">מהעבודות שלנו</span>
+          <h2>גלריית הכלות שלנו</h2>
+        </header>
+        <div class="gallery-grid">
+          <figure class="gallery-item gallery-item--large reveal" tabindex="0" aria-label="עיצוב רומנטי קלאסי לכלה">
+            <div class="gallery-visual" style="--gradient: linear-gradient(135deg, #d4a574 0%, #f5e6d3 50%, #c9a067 100%);">
+              <svg class="gallery-icon" viewBox="0 0 80 80" aria-hidden="true">
+                <circle cx="40" cy="25" r="15" fill="none" stroke="currentColor" stroke-width="1"/>
+                <path d="M25 35c0 20 10 35 15 35s15-15 15-35" fill="none" stroke="currentColor" stroke-width="1"/>
+                <path d="M30 20c5-10 15-10 20 0" fill="none" stroke="currentColor" stroke-width="1"/>
+                <circle cx="40" cy="15" r="3" fill="currentColor" opacity="0.5"/>
+              </svg>
+            </div>
+            <figcaption>עיצוב רומנטי קלאסי</figcaption>
+          </figure>
+          <figure class="gallery-item reveal" tabindex="0" aria-label="תסרוקת כלה מודרנית">
+            <div class="gallery-visual" style="--gradient: linear-gradient(145deg, #f5e6d3 0%, #e8d5c4 50%, #d4a574 100%);">
+              <svg class="gallery-icon" viewBox="0 0 80 80" aria-hidden="true">
+                <ellipse cx="40" cy="30" rx="18" ry="14" fill="none" stroke="currentColor" stroke-width="1"/>
+                <path d="M28 35l12 30 12-30" fill="none" stroke="currentColor" stroke-width="1"/>
+                <path d="M35 25h10M33 30h14" fill="none" stroke="currentColor" stroke-width="1"/>
+              </svg>
+            </div>
+            <figcaption>תסרוקת מודרנית</figcaption>
+          </figure>
+          <figure class="gallery-item reveal" tabindex="0" aria-label="צמות ושזירות">
+            <div class="gallery-visual" style="--gradient: linear-gradient(160deg, #c9a067 0%, #d4a574 50%, #f5e6d3 100%);">
+              <svg class="gallery-icon" viewBox="0 0 80 80" aria-hidden="true">
+                <path d="M30 15c5 10-5 20 5 30s-5 20 5 30" fill="none" stroke="currentColor" stroke-width="1"/>
+                <path d="M40 15c5 10-5 20 5 30s-5 20 5 30" fill="none" stroke="currentColor" stroke-width="1"/>
+                <path d="M50 15c5 10-5 20 5 30s-5 20 5 30" fill="none" stroke="currentColor" stroke-width="1"/>
+              </svg>
+            </div>
+            <figcaption>צמות ושזירות</figcaption>
+          </figure>
+          <figure class="gallery-item reveal" tabindex="0" aria-label="גלים רכים">
+            <div class="gallery-visual" style="--gradient: linear-gradient(170deg, #e8d5c4 0%, #f5e6d3 50%, #d4a574 100%);">
+              <svg class="gallery-icon" viewBox="0 0 80 80" aria-hidden="true">
+                <path d="M20 30c10-10 20 10 30 0s20 10 20 0" fill="none" stroke="currentColor" stroke-width="1"/>
+                <path d="M20 45c10-10 20 10 30 0s20 10 20 0" fill="none" stroke="currentColor" stroke-width="1"/>
+                <path d="M20 60c10-10 20 10 30 0s20 10 20 0" fill="none" stroke="currentColor" stroke-width="1"/>
+              </svg>
+            </div>
+            <figcaption>גלים רכים</figcaption>
+          </figure>
+          <figure class="gallery-item reveal" tabindex="0" aria-label="קוק אלגנטי">
+            <div class="gallery-visual" style="--gradient: linear-gradient(135deg, #b8956a 0%, #d4a574 50%, #e8d5c4 100%);">
+              <svg class="gallery-icon" viewBox="0 0 80 80" aria-hidden="true">
+                <circle cx="40" cy="35" r="18" fill="none" stroke="currentColor" stroke-width="1"/>
+                <ellipse cx="40" cy="55" rx="12" ry="8" fill="none" stroke="currentColor" stroke-width="1"/>
+                <path d="M35 20l5-8 5 8" fill="none" stroke="currentColor" stroke-width="1"/>
+              </svg>
+            </div>
+            <figcaption>קוק אלגנטי</figcaption>
+          </figure>
+          <figure class="gallery-item reveal" tabindex="0" aria-label="עיצוב עם אביזרים">
+            <div class="gallery-visual" style="--gradient: linear-gradient(150deg, #f5e6d3 0%, #c9a067 50%, #b8956a 100%);">
+              <svg class="gallery-icon" viewBox="0 0 80 80" aria-hidden="true">
+                <circle cx="40" cy="40" r="20" fill="none" stroke="currentColor" stroke-width="1"/>
+                <circle cx="40" cy="25" r="5" fill="currentColor" opacity="0.3"/>
+                <circle cx="30" cy="32" r="3" fill="currentColor" opacity="0.3"/>
+                <circle cx="50" cy="32" r="3" fill="currentColor" opacity="0.3"/>
+                <path d="M30 45c5 8 15 8 20 0" fill="none" stroke="currentColor" stroke-width="1"/>
+              </svg>
+            </div>
+            <figcaption>עיצוב עם אביזרים</figcaption>
+          </figure>
+        </div>
+      </div>
+    </section>
+
+    <section id="contact" class="contact">
+      <div class="container">
+        <div class="contact-grid">
+          <div class="contact-info reveal">
+            <header class="section-header">
+              <span class="section-tag">בואי נדבר</span>
+              <h2>קבעי תור לייעוץ חינם</h2>
+            </header>
+            <p class="contact-desc">מוזמנת להגיע לפגישת ייעוץ ללא התחייבות. נשמח להכיר, לשמוע על החזון שלך ליום הגדול, ולתכנן יחד את המראה המושלם.</p>
+            <address class="contact-details">
+              <a href="tel:0723257654" class="contact-item contact-phone">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                  <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
+                </svg>
+                <span dir="ltr">072-325-7654</span>
+              </a>
+              <div class="contact-item contact-location">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
+                  <circle cx="12" cy="10" r="3"/>
+                </svg>
+                <span>רחוב סוקולוב 42, חולון</span>
+              </div>
+            </address>
+          </div>
+          <form class="contact-form reveal" id="contactForm" aria-label="טופס יצירת קשר">
+            <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="email">אימייל</label>
+              <input type="email" id="email" name="email" autocomplete="email" dir="ltr">
+            </div>
+            <div class="form-group">
+              <label for="date">תאריך החתונה (אופציונלי)</label>
+              <input type="date" id="date" name="date" dir="ltr">
+            </div>
+            <div class="form-group form-group--full">
+              <label for="message">ספרי לנו קצת</label>
+              <textarea id="message" name="message" rows="4" placeholder="מה הסגנון שאת מחפשת? יש לך השראה מסוימת?"></textarea>
+            </div>
+            <button type="submit" class="btn btn-primary btn-submit">שלחי פרטים</button>
+          </form>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-brand">
+          <span class="footer-logo">סטודיו לירון</span>
+          <p>עיצוב שיער לכלות בחולון</p>
+        </div>
+        <nav class="footer-nav" aria-label="ניווט תחתון">
+          <a href="#services">שירותים</a>
+          <a href="#gallery">גלריה</a>
+          <a href="#contact">צרי קשר</a>
+        </nav>
+        <a href="tel:0723257654" class="footer-phone" dir="ltr">072-325-7654</a>
+      </div>
+      <div class="footer-bottom">
+        <p>© 2024 סטודיו לירון – עיצוב שיער לכלות. כל הזכויות שמורות.</p>
+      </div>
+    </div>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+</html>