Files
2026-09-07 14:00:08 +00:00

898 lines
41 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'><text y='.9em' font-size='90'>????</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&family=Assistant:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Announcement Bar -->
<div class="announcement-bar">
<p>משלוח חינם בהזמנות מעל ₪200 | שירות לקוחות זמין בטלפון ובוואטסאפ</p>
</div>
<!-- Header -->
<header class="header">
<div class="header-inner">
<button class="menu-toggle" aria-label="תפריט" aria-expanded="false">
<span class="hamburger"></span>
</button>
<a href="/" class="logo">המדריך ציוד משרדי</a>
<nav class="main-nav" aria-label="תפריט ראשי">
<ul class="nav-list">
<li class="nav-item has-dropdown">
<a href="#" class="nav-link">משרד</a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<div class="dropdown-column">
<h3 class="dropdown-title">חדש במשרד</h3>
<ul>
<li><a href="#">יומנים 2025</a></li>
<li><a href="#">חזרה ללימודים</a></li>
<li><a href="#">חזרה לעבודה</a></li>
<li><a href="#">מותגים מובילים</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">יומנים ולוחות שנה</h3>
<ul>
<li><a href="#">יומנים יומיים</a></li>
<li><a href="#">יומנים שבועיים</a></li>
<li><a href="#">יומנים חודשיים</a></li>
<li><a href="#">לוחות שנה</a></li>
<li><a href="#">מילויים ליומנים</a></li>
<li><a href="#">פלנרים ללא תאריך</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">מחברות</h3>
<ul>
<li><a href="#">כל המחברות</a></li>
<li><a href="#">מחברות חלקות</a></li>
<li><a href="#">מחברות שורות</a></li>
<li><a href="#">מחברות משבצות</a></li>
<li><a href="#">מחברות נקודות</a></li>
<li><a href="#">יומני מסע</a></li>
<li><a href="#">מחברות ספירלה</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">כלי כתיבה</h3>
<ul>
<li><a href="#">כל כלי הכתיבה</a></li>
<li><a href="#">עטים כדוריים</a></li>
<li><a href="#">עטי נובע</a></li>
<li><a href="#">עטי רולר</a></li>
<li><a href="#">עטי ג׳ל</a></li>
<li><a href="#">עפרונות עץ</a></li>
<li><a href="#">עפרונות מכניים</a></li>
<li><a href="#">טושים ומרקרים</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item has-dropdown">
<a href="#" class="nav-link">ציוד שולחני</a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<div class="dropdown-column">
<h3 class="dropdown-title">כלי שולחן</h3>
<ul>
<li><a href="#">אטבים</a></li>
<li><a href="#">חותכנים</a></li>
<li><a href="#">מחקים</a></li>
<li><a href="#">דבקים</a></li>
<li><a href="#">מגנטים</a></li>
<li><a href="#">סרטי הדבקה</a></li>
<li><a href="#">מחדדים</a></li>
<li><a href="#">סרגלים</a></li>
<li><a href="#">מספריים</a></li>
<li><a href="#">חותמות</a></li>
<li><a href="#">שדכנים</a></li>
<li><a href="#">מדבקות</a></li>
<li><a href="#">פתקיות דביקות</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">ארגון</h3>
<ul>
<li><a href="#">תיקיות וקלסרים</a></li>
<li><a href="#">מארגני ניירות</a></li>
<li><a href="#">משקולות נייר</a></li>
<li><a href="#">קלמרים</a></li>
<li><a href="#">כוסות עטים</a></li>
<li><a href="#">נרתיקים</a></li>
<li><a href="#">קופסאות אחסון</a></li>
<li><a href="#">מגשים</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item has-dropdown">
<a href="#" class="nav-link">מחשבים וטכנולוגיה</a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<div class="dropdown-column">
<h3 class="dropdown-title">מחשבים</h3>
<ul>
<li><a href="#">מחשבים נייחים</a></li>
<li><a href="#">מחשבים ניידים</a></li>
<li><a href="#">מסכים</a></li>
<li><a href="#">מקלדות</a></li>
<li><a href="#">עכברים</a></li>
<li><a href="#">אביזרי מחשב</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">הדפסה</h3>
<ul>
<li><a href="#">מדפסות</a></li>
<li><a href="#">סורקים</a></li>
<li><a href="#">טונרים ודיו</a></li>
<li><a href="#">נייר הדפסה</a></li>
<li><a href="#">מדפסות תלת מימד</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">אחסון</h3>
<ul>
<li><a href="#">כונני USB</a></li>
<li><a href="#">כוננים חיצוניים</a></li>
<li><a href="#">כרטיסי זיכרון</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item has-dropdown">
<a href="#" class="nav-link">ריהוט משרדי</a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<div class="dropdown-column">
<h3 class="dropdown-title">ישיבה</h3>
<ul>
<li><a href="#">כיסאות משרדיים</a></li>
<li><a href="#">כיסאות מנהלים</a></li>
<li><a href="#">כיסאות אורחים</a></li>
<li><a href="#">הדומים</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">שולחנות</h3>
<ul>
<li><a href="#">שולחנות עבודה</a></li>
<li><a href="#">שולחנות מנהלים</a></li>
<li><a href="#">שולחנות ישיבות</a></li>
<li><a href="#">שולחנות עמידה</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">אחסון</h3>
<ul>
<li><a href="#">ארונות</a></li>
<li><a href="#">כוננויות</a></li>
<li><a href="#">מדפים</a></li>
<li><a href="#">עגלות</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item has-dropdown">
<a href="#" class="nav-link">מתנות</a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<div class="dropdown-column">
<h3 class="dropdown-title">רעיונות למתנות</h3>
<ul>
<li><a href="#">פריטים לשמור או לתת</a></li>
<li><a href="#">מתנות למשרד</a></li>
<li><a href="#">מתנות לבית</a></li>
<li><a href="#">מתנות לילדים</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">לפי מחיר</h3>
<ul>
<li><a href="#">מתנות עד ₪50</a></li>
<li><a href="#">מתנות עד ₪100</a></li>
<li><a href="#">מתנות עד ₪200</a></li>
<li><a href="#">מתנות עד ₪500</a></li>
<li><a href="#">מתנות מעל ₪500</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">לפי צבע</h3>
<ul>
<li><a href="#">מתנות שחורות</a></li>
<li><a href="#">מתנות כחולות</a></li>
<li><a href="#">מתנות ירוקות</a></li>
<li><a href="#">מתנות לבנות</a></li>
</ul>
</div>
<div class="dropdown-column">
<h3 class="dropdown-title">כרטיסי מתנה</h3>
<ul>
<li><a href="#">כרטיס מתנה</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item has-dropdown">
<a href="#" class="nav-link">מותגים</a>
<div class="dropdown-menu dropdown-menu-brands">
<div class="dropdown-inner">
<div class="dropdown-column">
<ul>
<li><a href="#">Pilot</a></li>
<li><a href="#">Pentel</a></li>
<li><a href="#">Stabilo</a></li>
<li><a href="#">Faber-Castell</a></li>
<li><a href="#">Schneider</a></li>
<li><a href="#">Zebra</a></li>
<li><a href="#">Uni-ball</a></li>
<li><a href="#">Bic</a></li>
</ul>
</div>
<div class="dropdown-column">
<ul>
<li><a href="#">HP</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">Epson</a></li>
<li><a href="#">Brother</a></li>
<li><a href="#">Xerox</a></li>
<li><a href="#">Samsung</a></li>
<li><a href="#">Logitech</a></li>
<li><a href="#">Microsoft</a></li>
</ul>
</div>
<div class="dropdown-column">
<ul>
<li><a href="#">Kores</a></li>
<li><a href="#">Scotch</a></li>
<li><a href="#">Post-it</a></li>
<li><a href="#">Leitz</a></li>
<li><a href="#">Esselte</a></li>
<li><a href="#">Fellowes</a></li>
<li><a href="#">Rexel</a></li>
<li><a href="#">כל המותגים</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
<div class="header-actions">
<button class="search-toggle" aria-label="חיפוש">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
</svg>
</button>
<a href="#" class="account-link" aria-label="חשבון">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</a>
<button class="cart-toggle" aria-label="עגלת קניות">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
<span class="cart-count">0</span>
</button>
</div>
</div>
</header>
<!-- Search Overlay -->
<div class="search-overlay" aria-hidden="true">
<div class="search-container">
<form class="search-form" role="search">
<label for="search-input" class="visually-hidden">חיפוש</label>
<input type="search" id="search-input" placeholder="חיפוש מוצרים..." autocomplete="off">
<button type="submit" aria-label="חפש">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
</svg>
</button>
</form>
<button class="search-close" aria-label="סגור חיפוש">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div class="mobile-menu" aria-hidden="true">
<div class="mobile-menu-header">
<span class="mobile-menu-title">תפריט</span>
<button class="mobile-menu-close" aria-label="סגור תפריט">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
<nav class="mobile-nav">
<ul class="mobile-nav-list">
<li class="mobile-nav-item">
<button class="mobile-nav-link" aria-expanded="false">
משרד
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</button>
<ul class="mobile-submenu">
<li><a href="#">יומנים 2025</a></li>
<li><a href="#">חזרה ללימודים</a></li>
<li><a href="#">חזרה לעבודה</a></li>
<li><a href="#">כל המחברות</a></li>
<li><a href="#">כל כלי הכתיבה</a></li>
</ul>
</li>
<li class="mobile-nav-item">
<button class="mobile-nav-link" aria-expanded="false">
ציוד שולחני
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</button>
<ul class="mobile-submenu">
<li><a href="#">אטבים</a></li>
<li><a href="#">מספריים</a></li>
<li><a href="#">שדכנים</a></li>
<li><a href="#">תיקיות וקלסרים</a></li>
</ul>
</li>
<li class="mobile-nav-item">
<button class="mobile-nav-link" aria-expanded="false">
מחשבים וטכנולוגיה
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</button>
<ul class="mobile-submenu">
<li><a href="#">מחשבים נייחים</a></li>
<li><a href="#">מחשבים ניידים</a></li>
<li><a href="#">מדפסות</a></li>
<li><a href="#">טונרים ודיו</a></li>
</ul>
</li>
<li class="mobile-nav-item">
<button class="mobile-nav-link" aria-expanded="false">
ריהוט משרדי
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
</button>
<ul class="mobile-submenu">
<li><a href="#">כיסאות משרדיים</a></li>
<li><a href="#">שולחנות עבודה</a></li>
<li><a href="#">ארונות</a></li>
</ul>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">מתנות</a>
</li>
<li class="mobile-nav-item">
<a href="#" class="mobile-nav-link">מותגים</a>
</li>
</ul>
</nav>
<div class="mobile-menu-footer">
<a href="#">התחברות</a>
<a href="#">יצירת חשבון</a>
</div>
</div>
<!-- Cart Drawer -->
<div class="cart-drawer" aria-hidden="true">
<div class="cart-drawer-header">
<h2>העגלה שלך</h2>
<button class="cart-drawer-close" aria-label="סגור עגלה">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
<div class="cart-drawer-content">
<div class="cart-empty">
<p>העגלה שלך ריקה</p>
<a href="#" class="btn btn-primary">המשך בקניות</a>
</div>
</div>
<div class="cart-drawer-footer">
<div class="cart-notes">
<label for="cart-notes">הערות להזמנה</label>
<textarea id="cart-notes" placeholder="הוסף הערה להזמנה שלך"></textarea>
</div>
<div class="cart-subtotal">
<span>סה״כ ביניים</span>
<span>₪0.00</span>
</div>
<p class="cart-shipping-note">מיסים ומשלוח יחושבו בקופה.</p>
<button class="btn btn-primary btn-full" disabled>לתשלום</button>
</div>
</div>
<div class="cart-overlay"></div>
<main>
<!-- Hero Section -->
<section class="hero">
<div class="hero-slide active">
<div class="hero-bg hero-bg-1"></div>
<div class="hero-content">
<span class="hero-label">חדש בחנות</span>
<h1>יומנים 2025</h1>
<p>קולקציית היומנים והפלנרים החדשה הגיעה. מגוון סגנונות, גדלים ופורמטים לתכנון השנה החדשה.</p>
<a href="#" class="btn btn-primary">לצפייה בקולקציה</a>
</div>
</div>
<div class="hero-slide">
<div class="hero-bg hero-bg-2"></div>
<div class="hero-content">
<span class="hero-label">מבצע מיוחד</span>
<h1>חזרה לעבודה</h1>
<p>כל מה שצריך להתחלה טובה של השנה. ציוד משרדי איכותי במחירים מיוחדים.</p>
<a href="#" class="btn btn-primary">לקניות</a>
</div>
</div>
<div class="hero-slide">
<div class="hero-bg hero-bg-3"></div>
<div class="hero-content">
<span class="hero-label">קולקציה חדשה</span>
<h1>ריהוט משרדי</h1>
<p>כיסאות ארגונומיים, שולחנות עבודה ופתרונות אחסון לסביבת עבודה מושלמת.</p>
<a href="#" class="btn btn-primary">גלו עוד</a>
</div>
</div>
<div class="hero-nav">
<button class="hero-nav-btn active" aria-label="שקופית 1"></button>
<button class="hero-nav-btn" aria-label="שקופית 2"></button>
<button class="hero-nav-btn" aria-label="שקופית 3"></button>
</div>
</section>
<!-- Featured Categories -->
<section class="featured-categories">
<div class="container">
<div class="section-header">
<h2>קטגוריות מובילות</h2>
</div>
<div class="categories-grid">
<a href="#" class="category-card category-card-large">
<div class="category-bg category-bg-office"></div>
<div class="category-content">
<h3>ציוד משרדי</h3>
<span class="category-link">צפייה בכל המוצרים</span>
</div>
</a>
<a href="#" class="category-card">
<div class="category-bg category-bg-writing"></div>
<div class="category-content">
<h3>כלי כתיבה</h3>
<span class="category-link">לקניות</span>
</div>
</a>
<a href="#" class="category-card">
<div class="category-bg category-bg-computers"></div>
<div class="category-content">
<h3>מחשבים</h3>
<span class="category-link">לקניות</span>
</div>
</a>
<a href="#" class="category-card">
<div class="category-bg category-bg-furniture"></div>
<div class="category-content">
<h3>ריהוט</h3>
<span class="category-link">לקניות</span>
</div>
</a>
<a href="#" class="category-card">
<div class="category-bg category-bg-printers"></div>
<div class="category-content">
<h3>מדפסות</h3>
<span class="category-link">לקניות</span>
</div>
</a>
</div>
</div>
</section>
<!-- New Arrivals -->
<section class="products-section">
<div class="container">
<div class="section-header">
<h2>חדש בחנות</h2>
<a href="#" class="section-link">צפייה בכל</a>
</div>
<div class="products-grid">
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image">
<div class="product-image-placeholder product-placeholder-1"></div>
<span class="product-badge">חדש</span>
</div>
<div class="product-info">
<h3 class="product-title">יומן שבועי 2025 - A5</h3>
<p class="product-brand">לויכטורם</p>
<p class="product-price">₪89.00</p>
</div>
</a>
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</article>
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image">
<div class="product-image-placeholder product-placeholder-2"></div>
</div>
<div class="product-info">
<h3 class="product-title">עט כדורי פיילוט G2 - שחור</h3>
<p class="product-brand">פיילוט</p>
<p class="product-price">₪12.00</p>
</div>
</a>
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</article>
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image">
<div class="product-image-placeholder product-placeholder-3"></div>
</div>
<div class="product-info">
<h3 class="product-title">מחברת משבצות A4 - 100 דף</h3>
<p class="product-brand">מידורי</p>
<p class="product-price">₪45.00</p>
</div>
</a>
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</article>
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image">
<div class="product-image-placeholder product-placeholder-4"></div>
<span class="product-badge badge-sale">מבצע</span>
</div>
<div class="product-info">
<h3 class="product-title">סט מרקרים 6 צבעים</h3>
<p class="product-brand">סטבילו</p>
<p class="product-price">
<span class="price-sale">₪35.00</span>
<span class="price-original">₪45.00</span>
</p>
</div>
</a>
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</article>
</div>
</div>
</section>
<!-- Banner -->
<section class="promo-banner">
<div class="promo-bg"></div>
<div class="promo-content">
<span class="promo-label">השראה</span>
<h2>פריטים לשמור או לתת</h2>
<p>מבחר מתנות מיוחדות לעמיתים, לקוחות וחברים. כי מתנה טובה היא לא רק מתנה - היא חוויה.</p>
<a href="#" class="btn btn-secondary">לגלות מתנות</a>
</div>
</section>
<!-- Best Sellers -->
<section class="products-section">
<div class="container">
<div class="section-header">
<h2>רבי מכר</h2>
<a href="#" class="section-link">צפייה בכל</a>
</div>
<div class="products-grid">
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image">
<div class="product-image-placeholder product-placeholder-5"></div>
</div>
<div class="product-info">
<h3 class="product-title">כיסא משרדי ארגונומי</h3>
<p class="product-brand">ארגופלקס</p>
<p class="product-price">₪890.00</p>
</div>
</a>
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</article>
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image">
<div class="product-image-placeholder product-placeholder-6"></div>
</div>
<div class="product-info">
<h3 class="product-title">מדפסת לייזר HP</h3>
<p class="product-brand">HP</p>
<p class="product-price">₪450.00</p>
</div>
</a>
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</article>
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image">
<div class="product-image-placeholder product-placeholder-7"></div>
</div>
<div class="product-info">
<h3 class="product-title">שולחן עבודה 140 ס״מ</h3>
<p class="product-brand">המדריך</p>
<p class="product-price">₪650.00</p>
</div>
</a>
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</article>
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image">
<div class="product-image-placeholder product-placeholder-8"></div>
</div>
<div class="product-info">
<h3 class="product-title">חבילת נייר A4 - 500 דף</h3>
<p class="product-brand">המדריך</p>
<p class="product-price">₪25.00</p>
</div>
</a>
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</button>
</article>
</div>
</div>
</section>
<!-- Collections Grid -->
<section class="collections-section">
<div class="container">
<div class="section-header">
<h2>קולקציות נבחרות</h2>
</div>
<div class="collections-grid">
<a href="#" class="collection-card">
<div class="collection-bg collection-bg-1"></div>
<div class="collection-content">
<h3>חזרה ללימודים</h3>
<p>כל מה שצריך לשנת הלימודים</p>
</div>
</a>
<a href="#" class="collection-card">
<div class="collection-bg collection-bg-2"></div>
<div class="collection-content">
<h3>חזרה לעבודה</h3>
<p>ציוד איכותי לסביבת העבודה</p>
</div>
</a>
<a href="#" class="collection-card">
<div class="collection-bg collection-bg-3"></div>
<div class="collection-content">
<h3>מותגים מובילים</h3>
<p>הכירו את המותגים האהובים עלינו</p>
</div>
</a>
</div>
</div>
</section>
<!-- Features -->
<section class="features-section">
<div class="container">
<div class="features-grid">
<div class="feature">
<div class="feature-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="1" y="3" width="15" height="13"/>
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
<circle cx="5.5" cy="18.5" r="2.5"/>
<circle cx="18.5" cy="18.5" r="2.5"/>
</svg>
</div>
<h3>משלוח מהיר</h3>
<p>משלוחים לכל הארץ תוך 2-5 ימי עסקים</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<h3>איכות מובטחת</h3>
<p>מוצרים מהמותגים המובילים בעולם</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
</div>
<h3>שירות לקוחות</h3>
<p>צוות מקצועי זמין לכל שאלה</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
<polyline points="17 6 23 6 23 12"/>
</svg>
</div>
<h3>מחירים תחרותיים</h3>
<p>הצעות מחיר מיוחדות לעסקים וארגונים</p>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="newsletter-section">
<div class="container">
<div class="newsletter-content">
<h2>הישארו מעודכנים</h2>
<p>הירשמו לניוזלטר שלנו וקבלו עדכונים על מוצרים חדשים, מבצעים והשראה למשרד.</p>
<form class="newsletter-form">
<label for="newsletter-email" class="visually-hidden">כתובת אימייל</label>
<input type="email" id="newsletter-email" placeholder="כתובת אימייל" required>
<button type="submit" class="btn btn-primary">הרשמה</button>
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<h4>קניות</h4>
<ul>
<li><a href="#">ציוד משרדי</a></li>
<li><a href="#">כלי כתיבה</a></li>
<li><a href="#">מחשבים וטכנולוגיה</a></li>
<li><a href="#">ריהוט משרדי</a></li>
<li><a href="#">מדפסות וסורקים</a></li>
<li><a href="#">מתנות</a></li>
</ul>
</div>
<div class="footer-column">
<h4>מידע</h4>
<ul>
<li><a href="#">אודות</a></li>
<li><a href="#">משלוחים והחזרות</a></li>
<li><a href="#">שאלות נפוצות</a></li>
<li><a href="#">תנאי שימוש</a></li>
<li><a href="#">מדיניות פרטיות</a></li>
</ul>
</div>
<div class="footer-column">
<h4>צרו קשר</h4>
<ul class="contact-list">
<li>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
ישראל
</li>
<li>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
<a href="mailto:info@h1944.co.il">info@h1944.co.il</a>
</li>
</ul>
</div>
<div class="footer-column">
<h4>עקבו אחרינו</h4>
<div class="social-links">
<a href="#" aria-label="פייסבוק">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
</svg>
</a>
<a href="#" aria-label="אינסטגרם">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
</svg>
</a>
<a href="#" aria-label="וואטסאפ">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
</svg>
</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 המדריך ציוד משרדי. כל הזכויות שמורות.</p>
<div class="payment-methods">
<span class="payment-icon">
<svg viewBox="0 0 38 24" width="38" height="24" role="img" aria-label="ויזה">
<rect width="38" height="24" rx="3" fill="#1434CB"/>
<path d="M15.5 16.5h-2.2l1.4-8.5h2.2l-1.4 8.5zm7.3-8.3c-.4-.2-1.1-.3-2-.3-2.2 0-3.7 1.2-3.7 2.8 0 1.2 1.1 1.9 2 2.3.9.4 1.2.7 1.2 1.1 0 .6-.7.9-1.4.9-.9 0-1.4-.1-2.2-.5l-.3-.1-.3 2c.5.2 1.5.4 2.5.4 2.3 0 3.8-1.2 3.8-2.9 0-1-.6-1.7-1.8-2.3-.8-.4-1.2-.6-1.2-1 0-.3.4-.7 1.2-.7.7 0 1.2.1 1.6.3l.2.1.4-2z" fill="#fff"/>
</svg>
</span>
<span class="payment-icon">
<svg viewBox="0 0 38 24" width="38" height="24" role="img" aria-label="מאסטרקארד">
<rect width="38" height="24" rx="3" fill="#000"/>
<circle cx="15" cy="12" r="7" fill="#EB001B"/>
<circle cx="23" cy="12" r="7" fill="#F79E1B"/>
<path d="M19 6.3a7 7 0 0 0 0 11.4 7 7 0 0 0 0-11.4z" fill="#FF5F00"/>
</svg>
</span>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>