Files

461 lines
26 KiB
HTML

<!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='%23c9a87c'/><text x='50' y='65' text-anchor='middle' font-size='40' fill='%231a1a1a'>כ</text></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>
<nav class="nav" role="navigation" aria-label="ניווט ראשי">
<div class="nav__inner">
<a href="#hero" class="nav__logo" aria-label="מספרת כפיר דור - לעמוד הבית">
<svg class="nav__logo-icon" viewBox="0 0 60 60" aria-hidden="true">
<circle cx="30" cy="30" r="28" fill="none" stroke="currentColor" stroke-width="2"/>
<text x="30" y="38" text-anchor="middle" font-size="22" fill="currentColor" font-family="Heebo, sans-serif">כד</text>
</svg>
<span>כפיר דור</span>
</a>
<button class="nav__toggle" aria-label="תפריט" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav__menu">
<li><a href="#services">שירותים</a></li>
<li><a href="#gallery">גלריה</a></li>
<li><a href="#about">אודות</a></li>
<li><a href="#booking" class="nav__cta">קביעת תור</a></li>
</ul>
</div>
</nav>
<main>
<header class="hero" id="hero">
<div class="hero__bg" aria-hidden="true">
<div class="hero__gradient"></div>
<div class="hero__shapes">
<svg class="hero__shape hero__shape--1" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" fill="none" stroke="rgba(201,168,124,0.08)" stroke-width="1"/>
</svg>
<svg class="hero__shape hero__shape--2" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="60" fill="none" stroke="rgba(201,168,124,0.06)" stroke-width="1"/>
</svg>
</div>
</div>
<div class="hero__content">
<p class="hero__eyebrow reveal">פתח תקווה</p>
<h1 class="hero__title reveal">
<span class="hero__title-line">מספרת</span>
<span class="hero__title-line hero__title-line--accent">כפיר&nbsp;דור</span>
</h1>
<p class="hero__subtitle reveal">המקום שבו סגנון פוגש&nbsp;מקצועיות</p>
<div class="hero__actions reveal">
<a href="#booking" class="btn btn--primary">קביעת תור</a>
<a href="#services" class="btn btn--ghost">גלו עוד</a>
</div>
</div>
<a href="#services" class="hero__scroll" aria-label="גלול למטה">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 5v14M5 12l7 7 7-7"/>
</svg>
</a>
</header>
<section class="services" id="services">
<div class="container">
<header class="section-header reveal">
<h2 class="section-title">השירותים שלנו</h2>
<p class="section-subtitle">מגוון שירותים מקצועיים לעיצוב שיער מושלם</p>
</header>
<div class="services__grid">
<article class="service-card service-card--featured reveal">
<div class="service-card__badge">הכי מבוקש</div>
<div class="service-card__icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<circle cx="32" cy="20" r="12" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M20 32 Q32 50 44 32" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="26" cy="42" r="4" fill="currentColor" opacity="0.3"/>
<circle cx="38" cy="45" r="3" fill="currentColor" opacity="0.3"/>
<circle cx="32" cy="52" r="5" fill="currentColor" opacity="0.3"/>
</svg>
</div>
<h3 class="service-card__title">צביעה מקצועית</h3>
<p class="service-card__desc">צביעת שיער מקצועית, גוונים, הבהרות, אומברה ובלאייז׳ עם חומרים איכותיים מהמותגים המובילים בעולם.</p>
<span class="service-card__price">החל מ-200 ₪</span>
</article>
<article class="service-card reveal">
<div class="service-card__icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<circle cx="20" cy="20" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="20" cy="44" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M30 20 L50 32 L30 44" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="service-card__title">תספורות</h3>
<p class="service-card__desc">תספורות מעוצבות לנשים, גברים וילדים. התאמה אישית לסגנון ולמבנה הפנים.</p>
<span class="service-card__price">החל מ-80 ₪</span>
</article>
<article class="service-card reveal">
<div class="service-card__icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<path d="M32 8 L32 56" stroke="currentColor" stroke-width="2" stroke-dasharray="4 4"/>
<circle cx="32" cy="20" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="32" cy="44" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M24 28 Q32 36 40 28" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
</div>
<h3 class="service-card__title">החלקות</h3>
<p class="service-card__desc">החלקה יפנית, ברזילאית וטיפולי קראטין להחלקה ושיקום השיער.</p>
<span class="service-card__price">החל מ-400 ₪</span>
</article>
<article class="service-card reveal">
<div class="service-card__icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<ellipse cx="32" cy="32" rx="20" ry="12" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M16 32 Q32 20 48 32" fill="none" stroke="currentColor" stroke-width="2"/>
<circle cx="32" cy="28" r="4" fill="currentColor" opacity="0.4"/>
</svg>
</div>
<h3 class="service-card__title">טיפולים</h3>
<p class="service-card__desc">טיפולי שיקום, הזנה ולחות לשיער פגום או יבש. מותגים מובילים.</p>
<span class="service-card__price">החל מ-150 ₪</span>
</article>
<article class="service-card reveal">
<div class="service-card__icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<path d="M20 44 Q32 20 44 44" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M16 44 L48 44" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<circle cx="24" cy="36" r="2" fill="currentColor"/>
<circle cx="32" cy="28" r="2" fill="currentColor"/>
<circle cx="40" cy="36" r="2" fill="currentColor"/>
</svg>
</div>
<h3 class="service-card__title">עיצוב כלות</h3>
<p class="service-card__desc">עיצוב שיער מרהיב ליום המיוחד שלך, כולל ניסיון מקדים.</p>
<span class="service-card__price">החל מ-500 ₪</span>
</article>
<article class="service-card reveal">
<div class="service-card__icon">
<svg viewBox="0 0 64 64" aria-hidden="true">
<rect x="20" y="16" width="24" height="32" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="26" y1="24" x2="38" y2="24" stroke="currentColor" stroke-width="2"/>
<line x1="26" y1="32" x2="38" y2="32" stroke="currentColor" stroke-width="2"/>
<line x1="26" y1="40" x2="34" y2="40" stroke="currentColor" stroke-width="2"/>
</svg>
</div>
<h3 class="service-card__title">ייעוץ אישי</h3>
<p class="service-card__desc">ייעוץ מקצועי לבחירת הסגנון, הצבע והטיפול המתאימים ביותר עבורך.</p>
<span class="service-card__price">חינם</span>
</article>
</div>
</div>
</section>
<section class="gallery" id="gallery">
<div class="container">
<header class="section-header reveal">
<h2 class="section-title">גלריית עבודות</h2>
<p class="section-subtitle">הצצה לעבודות האחרונות שלנו</p>
</header>
<div class="gallery__grid">
<figure class="gallery__item gallery__item--wide reveal" tabindex="0" role="img" aria-label="אומברה בגווני זהב - צביעה">
<div class="gallery__visual gallery__visual--1">
<svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<linearGradient id="hair1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#2c1810"/>
<stop offset="50%" stop-color="#6b4423"/>
<stop offset="100%" stop-color="#c9a87c"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="#1a1a1a"/>
<ellipse cx="200" cy="80" rx="60" ry="50" fill="#e8d5c4"/>
<path d="M120 60 Q200 -20 280 60 Q300 200 260 300 L140 300 Q100 200 120 60" fill="url(#hair1)"/>
<ellipse cx="200" cy="100" rx="35" ry="40" fill="#e8d5c4"/>
</svg>
</div>
<figcaption class="gallery__overlay">
<span class="gallery__tag">צביעה</span>
<span class="gallery__label">אומברה בגווני זהב</span>
</figcaption>
</figure>
<figure class="gallery__item reveal" tabindex="0" role="img" aria-label="פייד מודרני - תספורת">
<div class="gallery__visual gallery__visual--2">
<svg viewBox="0 0 200 300" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="100%" height="100%" fill="#1a1a1a"/>
<ellipse cx="100" cy="120" rx="50" ry="55" fill="#e8d5c4"/>
<path d="M50 90 Q100 30 150 90 Q140 120 100 130 Q60 120 50 90" fill="#1a1a1a"/>
<path d="M55 95 Q100 50 145 95" fill="none" stroke="#2c2c2c" stroke-width="3"/>
</svg>
</div>
<figcaption class="gallery__overlay">
<span class="gallery__tag">תספורת</span>
<span class="gallery__label">פייד מודרני</span>
</figcaption>
</figure>
<figure class="gallery__item reveal" tabindex="0" role="img" aria-label="עיצוב רומנטי - כלות">
<div class="gallery__visual gallery__visual--3">
<svg viewBox="0 0 200 300" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="100%" height="100%" fill="#1a1a1a"/>
<ellipse cx="100" cy="100" rx="45" ry="50" fill="#e8d5c4"/>
<path d="M40 70 Q100 0 160 70 Q170 150 140 200 Q100 220 60 200 Q30 150 40 70" fill="#4a3728"/>
<circle cx="80" cy="60" r="8" fill="#c9a87c" opacity="0.6"/>
<circle cx="120" cy="55" r="6" fill="#c9a87c" opacity="0.6"/>
<circle cx="140" cy="80" r="7" fill="#c9a87c" opacity="0.6"/>
<ellipse cx="100" cy="110" rx="30" ry="35" fill="#e8d5c4"/>
</svg>
</div>
<figcaption class="gallery__overlay">
<span class="gallery__tag">כלות</span>
<span class="gallery__label">עיצוב רומנטי</span>
</figcaption>
</figure>
<figure class="gallery__item reveal" tabindex="0" role="img" aria-label="בלאייז׳ טבעי - צביעה">
<div class="gallery__visual gallery__visual--4">
<svg viewBox="0 0 200 300" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<linearGradient id="hair4" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1a1a1a"/>
<stop offset="30%" stop-color="#c9a87c"/>
<stop offset="60%" stop-color="#1a1a1a"/>
<stop offset="100%" stop-color="#c9a87c"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="#1a1a1a"/>
<ellipse cx="100" cy="90" rx="45" ry="50" fill="#e8d5c4"/>
<path d="M40 60 Q100 -10 160 60 L170 300 L30 300 Z" fill="url(#hair4)"/>
<ellipse cx="100" cy="100" rx="32" ry="38" fill="#e8d5c4"/>
</svg>
</div>
<figcaption class="gallery__overlay">
<span class="gallery__tag">צביעה</span>
<span class="gallery__label">בלאייז׳ טבעי</span>
</figcaption>
</figure>
<figure class="gallery__item gallery__item--tall reveal" tabindex="0" role="img" aria-label="החלקה יפנית - החלקה">
<div class="gallery__visual gallery__visual--5">
<svg viewBox="0 0 200 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="100%" height="100%" fill="#1a1a1a"/>
<ellipse cx="100" cy="80" rx="40" ry="45" fill="#e8d5c4"/>
<path d="M50 50 Q100 10 150 50 L160 400 L40 400 Z" fill="#2c1810"/>
<line x1="60" y1="100" x2="55" y2="400" stroke="#3d2817" stroke-width="2"/>
<line x1="80" y1="90" x2="75" y2="400" stroke="#3d2817" stroke-width="2"/>
<line x1="100" y1="85" x2="100" y2="400" stroke="#3d2817" stroke-width="2"/>
<line x1="120" y1="90" x2="125" y2="400" stroke="#3d2817" stroke-width="2"/>
<line x1="140" y1="100" x2="145" y2="400" stroke="#3d2817" stroke-width="2"/>
<ellipse cx="100" cy="90" rx="28" ry="32" fill="#e8d5c4"/>
</svg>
</div>
<figcaption class="gallery__overlay">
<span class="gallery__tag">החלקה</span>
<span class="gallery__label">החלקה יפנית</span>
</figcaption>
</figure>
<figure class="gallery__item reveal" tabindex="0" role="img" aria-label="קארה מודרני - תספורת">
<div class="gallery__visual gallery__visual--6">
<svg viewBox="0 0 200 300" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="100%" height="100%" fill="#1a1a1a"/>
<ellipse cx="100" cy="110" rx="50" ry="55" fill="#e8d5c4"/>
<path d="M45 80 Q100 20 155 80 Q160 130 130 150 Q100 160 70 150 Q40 130 45 80" fill="#8b4513"/>
<ellipse cx="100" cy="120" rx="35" ry="40" fill="#e8d5c4"/>
</svg>
</div>
<figcaption class="gallery__overlay">
<span class="gallery__tag">תספורת</span>
<span class="gallery__label">קארה מודרני</span>
</figcaption>
</figure>
</div>
</div>
</section>
<section class="about" id="about">
<div class="container">
<div class="about__grid">
<div class="about__visual reveal">
<div class="about__portrait">
<svg viewBox="0 0 300 400" aria-hidden="true">
<defs>
<clipPath id="portrait-clip">
<path d="M30 50 Q150 0 270 50 Q300 200 270 350 Q150 400 30 350 Q0 200 30 50"/>
</clipPath>
</defs>
<rect width="100%" height="100%" fill="#c9a87c" clip-path="url(#portrait-clip)"/>
<ellipse cx="150" cy="150" rx="60" ry="70" fill="#e8d5c4" clip-path="url(#portrait-clip)"/>
<path d="M80 100 Q150 40 220 100 Q230 160 200 180 Q150 200 100 180 Q70 160 80 100" fill="#2c1810" clip-path="url(#portrait-clip)"/>
<ellipse cx="150" cy="160" rx="45" ry="50" fill="#e8d5c4" clip-path="url(#portrait-clip)"/>
<rect x="120" y="230" width="60" height="170" fill="#1a1a1a" clip-path="url(#portrait-clip)"/>
</svg>
</div>
</div>
<div class="about__content reveal">
<h2 class="about__title">על המספרה</h2>
<p class="about__lead">מספרת כפיר דור היא מספרה בוטיק בלב פתח תקווה, שנוסדה מתוך אהבה אמיתית לעולם עיצוב&nbsp;השיער.</p>
<p class="about__text">עם ניסיון של שנים בתעשייה והכשרות מהארץ ומהעולם, אנחנו מביאים את הטרנדים העדכניים ביותר לקהל הלקוחות שלנו. כל לקוח מקבל יחס אישי וייעוץ מקצועי לבחירת הסגנון המושלם&nbsp;עבורו.</p>
<p class="about__text">אנחנו עובדים רק עם מוצרים איכותיים ומותגים מובילים, כי השיער שלכם ראוי לטוב&nbsp;ביותר.</p>
<div class="about__stats">
<div class="stat">
<span class="stat__number" dir="ltr">12+</span>
<span class="stat__label">שנות ניסיון</span>
</div>
<div class="stat">
<span class="stat__number" dir="ltr">5,000+</span>
<span class="stat__label">לקוחות מרוצים</span>
</div>
<div class="stat">
<span class="stat__number" dir="ltr">100%</span>
<span class="stat__label">מחויבות</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="booking" id="booking">
<div class="container">
<div class="booking__grid">
<div class="booking__info reveal">
<h2 class="booking__title">קבעו תור עכשיו</h2>
<p class="booking__subtitle">מלאו את הטופס ונחזור אליכם בהקדם לאישור&nbsp;התור</p>
<div class="booking__hours">
<h3>שעות פעילות</h3>
<ul>
<li><span>ראשון - חמישי</span><span dir="ltr">09:00 - 20:00</span></li>
<li><span>שישי</span><span dir="ltr">08:00 - 14:00</span></li>
<li><span>שבת</span><span>סגור</span></li>
</ul>
</div>
<div class="booking__contact">
<h3>צרו קשר</h3>
<p><a href="tel:+972501234567" dir="ltr">050-123-4567</a></p>
<p>רחוב הרצל 50, פתח תקווה</p>
<p class="booking__note">* יש לעדכן את מספר הטלפון בפועל</p>
</div>
</div>
<form class="booking__form reveal" action="#" method="post">
<div class="form-group">
<label for="name">שם מלא <span aria-hidden="true">*</span></label>
<input type="text" id="name" name="name" required autocomplete="name" aria-required="true">
</div>
<div class="form-group">
<label for="phone">טלפון <span aria-hidden="true">*</span></label>
<input type="tel" id="phone" name="phone" required autocomplete="tel" dir="ltr" aria-required="true">
</div>
<div class="form-group">
<label for="service">סוג שירות <span aria-hidden="true">*</span></label>
<select id="service" name="service" required aria-required="true">
<option value="">בחרו שירות</option>
<option value="haircut">תספורת</option>
<option value="color">צביעה</option>
<option value="straightening">החלקה</option>
<option value="treatment">טיפול</option>
<option value="bridal">עיצוב כלות</option>
<option value="consultation">ייעוץ</option>
</select>
</div>
<div class="form-row">
<div class="form-group">
<label for="date">תאריך מבוקש <span aria-hidden="true">*</span></label>
<input type="date" id="date" name="date" required aria-required="true">
</div>
<div class="form-group">
<label for="time">שעה מועדפת <span aria-hidden="true">*</span></label>
<select id="time" name="time" required aria-required="true">
<option value="">בחרו שעה</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option>
</select>
</div>
</div>
<div class="form-group">
<label for="notes">הערות נוספות</label>
<textarea id="notes" name="notes" rows="3"></textarea>
</div>
<button type="submit" class="btn btn--primary btn--full">שליחת בקשה</button>
</form>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="contact__grid">
<div class="contact__item reveal">
<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"/>
<circle cx="12" cy="10" r="3"/>
</svg>
</div>
<h3>מיקום</h3>
<p>רחוב הרצל 50<br>פתח תקווה</p>
</div>
<div class="contact__item reveal">
<div class="contact__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
</div>
<h3>טלפון</h3>
<p><a href="tel:+972501234567" dir="ltr">050-123-4567</a></p>
</div>
<div class="contact__item reveal">
<div class="contact__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"/>
<path d="M12 6v6l4 2"/>
</svg>
</div>
<h3>שעות פעילות</h3>
<p>א׳-ה׳ <span dir="ltr">09:00-20:00</span><br>ו׳ <span dir="ltr">08:00-14:00</span></p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer__inner">
<div class="footer__brand">
<svg class="footer__logo" viewBox="0 0 60 60" aria-hidden="true">
<circle cx="30" cy="30" r="28" fill="none" stroke="currentColor" stroke-width="2"/>
<text x="30" y="38" text-anchor="middle" font-size="22" fill="currentColor" font-family="Heebo, sans-serif">כד</text>
</svg>
<span>מספרת כפיר דור</span>
</div>
<nav class="footer__nav" aria-label="ניווט תחתון">
<a href="#services">שירותים</a>
<a href="#gallery">גלריה</a>
<a href="#about">אודות</a>
<a href="#booking">קביעת תור</a>
</nav>
<p class="footer__copy">© <span id="current-year">2024</span> מספרת כפיר דור. כל הזכויות שמורות.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
<script src="https://emilio.clientscenter.co.il/pay/popup.js" data-src="cmt03carh002fpa01oqpctxhx" data-name="מספרת כפיר דור" data-origin="https://emilio.clientscenter.co.il"></script>
</body>
</html>