Spaces:

shaike123
/

win-gate

Running

App Files Files Community

win-gate / index.html

shaike123

Add 3 files

ade13d1 verified 11 months ago

raw

history blame contribute delete

97.9 kB

	<!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>
	<script src="https://cdn.tailwindcss.com"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#1e40af',
	primarylight: '#3b82f6',
	secondary: '#f59e0b',
	dark: '#111827',
	light: '#f3f4f6',
	},
	fontFamily: {
	hebrew: ['Rubik', 'sans-serif'],
	},
	}
	}
	}
	</script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
	<style>
	body {
	font-family: 'Rubik', sans-serif;
	background-color: #f8f9fa;
	}

	/* Smooth scroll */
	html {
	scroll-behavior: smooth;
	}

	/* Language switcher */
	.language-switcher:hover .language-dropdown {
	display: block;
	animation: fadeIn 0.3s ease-in-out;
	}

	/* Dropdown menus */
	.dropdown:hover .dropdown-menu {
	display: block;
	animation: fadeIn 0.3s ease-in-out;
	}

	/* Page transitions */
	.page-section {
	display: none;
	animation: fadeIn 0.5s ease-in-out;
	}

	.page-section.active {
	display: block;
	}

	/* Card hover effects */
	.service-card, .testimonial-card, .blog-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.service-card:hover, .testimonial-card:hover, .blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.15);
	}

	/* Gradient backgrounds */
	.hero-gradient {
	background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
	}

	.cta-gradient {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	}

	/* Calculator styling */
	.mortgage-calculator {
	background: linear-gradient(135deg, #f5f7fa 0%, #e5e9f2 100%);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	}

	/* Accordion animation */
	.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
	}

	.accordion-header.active + .accordion-content {
	max-height: 500px;
	}

	/* Input range styling */
	input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: #1e40af;
	cursor: pointer;
	border-radius: 50%;
	border: 3px solid white;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: #1e40af;
	cursor: pointer;
	border-radius: 50%;
	border: 3px solid white;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}

	input[type="range"] {
	-webkit-appearance: none;
	height: 8px;
	background: #d1d5db;
	border-radius: 4px;
	background-image: linear-gradient(#1e40af, #1e40af);
	background-size: 50% 100%;
	background-repeat: no-repeat;
	}

	/* Animations */
	@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	@keyframes slideInUp {
	from {
	transform: translateY(20px);
	opacity: 0;
	}
	to {
	transform: translateY(0);
	opacity: 1;
	}
	}

	.animate-slide-up {
	animation: slideInUp 0.6s ease-out forwards;
	}

	/* Pulse animation for CTA */
	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
	}

	.pulse-animate {
	animation: pulse 2s infinite;
	}

	/* Loading spinner */
	.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color: #1e40af;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	}

	@keyframes spin {
	to { transform: rotate(360deg); }
	}

	/* Form validation */
	.form-input.error {
	border-color: #ef4444;
	}

	.error-message {
	color: #ef4444;
	font-size: 0.875rem;
	}

	/* Sticky header on scroll */
	header.sticky {
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	background-color: rgba(30, 64, 175, 0.98);
	backdrop-filter: blur(10px);
	}

	/* Floating action button */
	.floating-btn {
	box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
	}

	/* Statistics counter animation */
	.counter {
	transition: all 1s ease-out;
	}
	</style>
	</head>
	<body class="font-hebrew">
	<!-- Floating WhatsApp Button -->
	<div class="fixed bottom-6 left-6 z-50">
	<a href="https://wa.me/972501234567" class="floating-btn bg-green-500 hover:bg-green-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl shadow-lg transition-all duration-300 transform hover:scale-110">
	<i class="fab fa-whatsapp"></i>
	</a>
	</div>

	<!-- Loading overlay -->
	<div id="loading-overlay" class="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50 transition-opacity duration-300">
	<div class="text-center">
	<div class="spinner mb-4 mx-auto"></div>
	<p class="text-xl font-medium text-primary">טוען...</p>
	</div>
	</div>

	<!-- Header -->
	<header id="main-header" class="bg-primary text-white shadow-lg sticky top-0 z-40 transition-all duration-300">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center space-x-4 space-x-reverse">
	<a href="#" data-page="home" class="flex items-center space-x-4 space-x-reverse">
	<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center transform hover:rotate-12 transition-transform duration-300">
	<i class="fas fa-door-open text-primary text-2xl"></i>
	</div>
	<div>
	<h1 class="text-2xl font-bold">שער הניצחון</h1>
	<p class="text-xs hidden md:block opacity-80">ליווי פיננסי אישי למשכנתא ופיננסים</p>
	</div>
	</a>
	</div>

	<div class="flex items-center space-x-6 space-x-reverse">
	<!-- Mobile menu button -->
	<button id="mobile-menu-button" class="md:hidden text-white focus:outline-none transform transition-transform hover:scale-110">
	<i class="fas fa-bars text-2xl"></i>
	</button>

	<!-- Desktop Navigation -->
	<nav class="hidden md:flex space-x-6 space-x-reverse">
	<a href="#" class="nav-link relative group" data-page="home">
	בית
	<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300 group-hover:w-full"></span>
	</a>

	<div class="dropdown relative">
	<button class="nav-link flex items-center relative group" data-page="mortgage">
	משכנתא
	<i class="fas fa-chevron-down mr-2 text-xs transform transition-transform duration-200 group-hover:rotate-180"></i>
	<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300 group-hover:w-full"></span>
	</button>
	<div class="dropdown-menu absolute hidden bg-white text-gray-800 rounded-lg shadow-xl mt-2 py-2 w-48 right-0">
	<a href="#" class="block px-4 py-3 hover:bg-blue-50 transition-colors" data-page="first-mortgage">משכנתא ראשונה</a>
	<a href="#" class="block px-4 py-3 hover:bg-blue-50 transition-colors" data-page="mortgage-refinance">מיחזור משכנתא</a>
	<a href="#" class="block px-4 py-3 hover:bg-blue-50 transition-colors" data-page="construction-loan">בנייה עצמית</a>
	<a href="#" class="block px-4 py-3 hover:bg-blue-50 border-t border-gray-100 mt-2" data-page="mortgage-comparison">השוואת מסלולים</a>
	</div>
	</div>

	<a href="#" class="nav-link relative group" data-page="investment">
	השקעות נדל"ן
	<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300 group-hover:w-full"></span>
	</a>
	<a href="#" class="nav-link relative group" data-page="retirement">
	תכנון פרישה
	<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300 group-hover:w-full"></span>
	</a>
	<a href="#" class="nav-link relative group" data-page="about">
	אודות
	<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300 group-hover:w-full"></span>
	</a>
	<a href="#" class="nav-link relative group" data-page="contact">
	צור קשר
	<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300 group-hover:w-full"></span>
	</a>
	</nav>

	<div class="hidden md:flex items-center space-x-2 space-x-reverse">
	<div class="language-switcher relative">
	<button class="flex items-center text-white bg-primarylight hover:bg-blue-700 py-2 px-3 rounded-lg transition-colors">
	<span class="mr-1">עברית</span>
	<i class="fas fa-globe"></i>
	</button>
	<div class="language-dropdown absolute hidden bg-white text-gray-800 rounded-lg shadow-xl mt-2 py-2 w-24 right-0">
	<a href="#" class="block px-4 py-2 hover:bg-blue-50 transition-colors">English</a>
	<a href="#" class="block px-4 py-2 hover:bg-blue-50 transition-colors">Русский</a>
	</div>
	</div>

	<a href="#" data-page="contact" class="cta-button bg-secondary hover:bg-yellow-600 text-gray-900 font-bold py-2 px-4 rounded-lg transition-all transform hover:scale-105 hidden lg:flex items-center">
	<i class="fas fa-phone-alt mr-2"></i> דברו איתנו
	</a>
	</div>
	</div>
	</div>

	<!-- Mobile Menu (hidden by default) -->
	<div id="mobile-menu" class="hidden md:hidden bg-blue-800 px-4 py-3">
	<div class="flex flex-col space-y-3">
	<a href="#" class="nav-link-mobile py-3 px-4 rounded-lg transition-colors active" data-page="home">בית</a>
	<div class="border-t border-blue-700 pt-2">
	<a href="#" class="block py-3 px-4 rounded-lg transition-colors font-medium" data-page="mortgage">משכנתא</a>
	<div class="pl-6 space-y-2 mt-2">
	<a href="#" class="block py-2 px-4 rounded-lg transition-colors bg-blue-900 bg-opacity-50" data-page="first-mortgage">משכנתא ראשונה</a>
	<a href="#" class="block py-2 px-4 rounded-lg transition-colors bg-blue-900 bg-opacity-50" data-page="mortgage-refinance">מיחזור משכנתא</a>
	<a href="#" class="block py-2 px-4 rounded-lg transition-colors bg-blue-900 bg-opacity-50" data-page="construction-loan">בנייה עצמית</a>
	<a href="#" class="block py-2 px-4 rounded-lg transition-colors bg-blue-900 bg-opacity-50" data-page="mortgage-comparison">השוואת מסלולים</a>
	</div>
	</div>
	<a href="#" class="nav-link-mobile py-3 px-4 rounded-lg transition-colors" data-page="investment">השקעות נדל"ן</a>
	<a href="#" class="nav-link-mobile py-3 px-4 rounded-lg transition-colors" data-page="retirement">תכנון פרישה</a>
	<a href="#" class="nav-link-mobile py-3 px-4 rounded-lg transition-colors" data-page="about">אודות</a>
	<a href="#" class="nav-link-mobile py-3 px-4 rounded-lg transition-colors" data-page="contact">צור קשר</a>

	<div class="flex justify-center space-x-4 space-x-reverse pt-3 border-t border-blue-700">
	<a href="#" class="text-white hover:text-secondary transition-colors"><i class="fab fa-facebook-f text-xl"></i></a>
	<a href="#" class="text-white hover:text-secondary transition-colors"><i class="fab fa-linkedin-in text-xl"></i></a>
	<a href="#" class="text-white hover:text-secondary transition-colors"><i class="fab fa-whatsapp text-xl"></i></a>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content Area - Pages will be loaded here -->
	<main>
	<!-- Home Page -->
	<section id="home" class="page-section active">
	<!-- Hero Section -->
	<div class="relative hero-gradient text-white overflow-hidden">
	<div class="absolute inset-0 bg-black opacity-10"></div>
	<div class="container mx-auto px-4 py-28 md:py-36 relative z-10">
	<div class="max-w-4xl mx-auto text-center animate-slide-up">
	<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">הבית של החיים שלכם מתחיל בייעוץ נכון</h1>
	<p class="text-xl md:text-2xl mb-8 opacity-90">שער הניצחון מעניק ליווי פיננסי אישי לכל צורכי המשכנתא והפיננסים שלכם. אנו פועלים למענכם בלבד - ללא ניגודי עניינים!</p>
	<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6 sm:space-x-reverse">
	<a href="#" data-page="contact" class="cta-main bg-secondary hover:bg-yellow-600 text-dark font-bold py-4 px-8 rounded-lg transition-all transform hover:scale-105 flex items-center justify-center shadow-lg pulse-animate">
	<i class="fas fa-phone-alt mr-3"></i> דברו עם יועץ משכנתאות
	</a>
	<a href="#mortgage-calculator" class="bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-semibold py-4 px-8 border border-white border-opacity-30 rounded-lg transition-all flex items-center justify-center">
	<i class="fas fa-calculator mr-3"></i> מחשבון משכנתא
	</a>
	</div>
	</div>
	</div>

	<div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-light to-transparent z-10"></div>

	<!-- Statistics Bar -->
	<div class="relative z-20">
	<div class="container mx-auto px-4">
	<div class="bg-white rounded-xl shadow-xl -mb-10 p-6 grid grid-cols-2 md:grid-cols-4 gap-6">
	<div class="text-center">
	<div class="text-primary font-bold text-3xl md:text-4xl counter" data-count="1250">0</div>
	<div class="text-gray-600 mt-1">לקוחות מרוצים</div>
	</div>
	<div class="text-center">
	<div class="text-primary font-bold text-3xl md:text-4xl counter" data-count="280">0</div>
	<div class="text-gray-600 mt-1">מיליון שקל חיסכון</div>
	</div>
	<div class="text-center">
	<div class="text-primary font-bold text-3xl md:text-4xl counter" data-count="98">0</div>
	<div class="text-gray-600 mt-1">אחוזי הצלחה</div>
	</div>
	<div class="text-center">
	<div class="text-primary font-bold text-3xl md:text-4xl counter" data-count="15">0</div>
	<div class="text-gray-600 mt-1">שנות ניסיון</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Why Choose Us Section -->
	<section class="py-20 bg-light">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<span class="text-secondary font-bold uppercase tracking-wider">מדוע לבחור בנו?</span>
	<h2 class="text-3xl md:text-4xl font-bold text-dark mt-3 mb-4">הפתרון למשכנתא שלך מתחיל כאן</h2>
	<div class="w-20 h-1 bg-primary mx-auto"></div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
	<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all transform hover:-translate-y-2 text-center">
	<div class="w-20 h-20 bg-primarylight bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6 text-primary">
	<i class="fas fa-user-shield text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">ייעוץ עצמאי בלעדי</h3>
	<p class="text-gray-600 mb-4">אנו מייצגים רק אתכם - לא את הבנקים! הייעוץ שלנו הוא אובייקטיבי, מקצועי וללא ניגודי עניינים.</p>
	<a href="#" data-page="about" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center justify-center">
	עוד על הגישה שלנו <i class="fas fa-arrow-left ml-2"></i>
	</a>
	</div>

	<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all transform hover:-translate-y-2 text-center">
	<div class="w-20 h-20 bg-primarylight bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6 text-primary">
	<i class="fas fa-hand-holding-usd text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">חיסכון מובטח</h3>
	<p class="text-gray-600 mb-4">לקוחותינו חוסכים בממוצע 120,000 ש"ח על חיוב המשכנתא לאורך השנים. אנחנו מציעים אחריות לחיסכון או החזר כספי.</p>
	<a href="#" data-page="mortgage" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center justify-center">
	איך זה עובד? <i class="fas fa-arrow-left ml-2"></i>
	</a>
	</div>

	<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all transform hover:-translate-y-2 text-center">
	<div class="w-20 h-20 bg-primarylight bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6 text-primary">
	<i class="fas fa-chart-line text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">התאמה מיטבית</h3>
	<p class="text-gray-600 mb-4">בודקים את כל האפשרויות ומתאימים לכם את תוכנית המשכנתא הטובה ביותר למצבכם הפיננסי ולציפיותיכם לעתיד.</p>
	<a href="#mortgage-calculator" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center justify-center">
	בדקו את האפשרויות <i class="fas fa-arrow-left ml-2"></i>
	</a>
	</div>
	</div>
	</div>
	</section>

	<!-- Video Section -->
	<section class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<div class="flex flex-col lg:flex-row items-center">
	<div class="lg:w-1/2 lg:pr-12 mb-10 lg:mb-0">
	<div class="bg-gray-800 rounded-xl overflow-hidden shadow-xl relative">
	<img src="https://images.unsplash.com/photo-1586449480533-b653a5981f45?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Video Placeholder" class="w-full">
	<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
	<button class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center text-2xl transform hover:scale-110 transition-transform shadow-lg">
	<i class="fas fa-play"></i>
	</button>
	</div>
	</div>
	</div>

	<div class="lg:w-1/2 lg:pl-12">
	<span class="text-secondary font-bold uppercase tracking-wider">איך אנחנו עובדים</span>
	<h2 class="text-3xl md:text-4xl font-bold text-dark mt-3 mb-6">ייעוץ משכנתאות עם ראייה עתידית</h2>
	<p class="text-gray-600 mb-6">בשוק המשכנתאות המשתנה תדיר, חשוב לקבל החלטות עם ראייה לטווח ארוך. אנו בשער הניצחון מנתחים את המצב הנוכחי שלך יחד עם הציפיות והתוכניות העתידיות, כדי להתאים את הפתרון האופטימלי.</p>

	<ul class="space-y-4 mb-8">
	<li class="flex items-start">
	<div class="flex-shrink-0 bg-primarylight bg-opacity-10 rounded-full w-10 h-10 flex items-center justify-center mr-6 text-primary">
	<i class="fas fa-check"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">ניתוח פיננסי מעמיק</h4>
	<p class="text-gray-600 text-sm">נבחן את כל המקורות הכספיים שלך ונציע את מסלולי המשכנתא המתאימים ביותר.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="flex-shrink-0 bg-primarylight bg-opacity-10 rounded-full w-10 h-10 flex items-center justify-center mr-6 text-primary">
	<i class="fas fa-check"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">התאמה לצרכים עתידיים</h4>
	<p class="text-gray-600 text-sm">ניקח בחשבון תוכניות כמו הרחבת משפחה, החלפת עבודה או יציאה לפנסיה.</p>
	</div>
	</li>
	<li class="flex items-start">
	<div class="flex-shrink-0 bg-primarylight bg-opacity-10 rounded-full w-10 h-10 flex items-center justify-center mr-6 text-primary">
	<i class="fas fa-check"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">גמישות בהתנהלות</h4>
	<p class="text-gray-600 text-sm">נספק לך כלים לניהול המשכנתא גם שנים אחרי קבלתה, עם אפשרויות לשינויים עתידיים.</p>
	</div>
	</li>
	</ul>

	<a href="#" data-page="contact" class="inline-flex items-center bg-primary hover:bg-primarylight text-white font-bold py-3 px-6 rounded-lg transition-colors">
	<i class="fas fa-user-tie mr-2"></i> קבלו יעוץ ראשוני בחינם
	</a>
	</div>
	</div>
	</div>
	</section>

	<!-- Mortgage Calculator -->
	<section id="mortgage-calculator" class="py-20 bg-light">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<span class="text-secondary font-bold uppercase tracking-wider">חישוב משכנתא</span>
	<h2 class="text-3xl md:text-4xl font-bold text-dark mt-3 mb-4">מחשבון משכנתא מתקדם</h2>
	<div class="w-20 h-1 bg-primary mx-auto"></div>
	</div>

	<div class="flex flex-col lg:flex-row">
	<div class="lg:w-1/2 lg:pr-12 mb-10 lg:mb-0">
	<div class="mortgage-calculator p-8">
	<h3 class="text-2xl font-bold mb-6 text-primary">הזינו את פרטיכם</h3>

	<div class="mb-8">
	<div class="flex justify-between mb-2">
	<label class="block text-gray-700 font-medium" for="property-value">שווי הנכס (ש"ח)</label>
	<span class="text-primary font-bold" id="property-value-display">1,500,000</span>
	</div>
	<input type="range" id="property-value" min="500000" max="5000000" step="100000" value="1500000" class="w-full">
	<div class="flex justify-between text-xs text-gray-500 mt-1">
	<span>500,000</span>
	<span>5,000,000</span>
	</div>
	</div>

	<div class="mb-8">
	<div class="flex justify-between mb-2">
	<label class="block text-gray-700 font-medium" for="equity">הון עצמי (ש"ח)</label>
	<span class="text-primary font-bold" id="equity-display">300,000</span>
	</div>
	<input type="range" id="equity" min="0" max="2500000" step="50000" value="300000" class="w-full">
	<div class="flex justify-between text-xs text-gray-500 mt-1">
	<span>0</span>
	<span>2,500,000</span>
	</div>
	</div>

	<div class="mb-8">
	<div class="flex justify-between mb-2">
	<label class="block text-gray-700 font-medium" for="years">משך המשכנתא (שנים)</label>
	<span class="text-primary font-bold" id="years-display">25</span>
	</div>
	<input type="range" id="years" min="5" max="30" step="1" value="25" class="w-full">
	<div class="flex justify-between text-xs text-gray-500 mt-1">
	<span>5</span>
	<span>30</span>
	</div>
	</div>

	<div class="mb-8">
	<div class="flex justify-between mb-2">
	<label class="block text-gray-700 font-medium" for="rate">ריבית ממוצעת (%)</label>
	<span class="text-primary font-bold" id="rate-display">3.5%</span>
	</div>
	<input type="range" id="rate" min="1" max="10" step="0.1" value="3.5" class="w-full">
	<div class="flex justify-between text-xs text-gray-500 mt-1">
	<span>1%</span>
	<span>10%</span>
	</div>
	</div>

	<button id="save-scenario" class="w-full bg-primarylight hover:bg-primary text-white font-bold py-3 px-6 rounded-lg transition-colors flex items-center justify-center">
	<i class="fas fa-save mr-3"></i> שמור תרחיש זה להשוואה
	</button>
	</div>
	</div>

	<div class="lg:w-1/2 lg:pl-12">
	<div class="bg-primary text-white p-8 rounded-xl shadow-xl h-full">
	<h3 class="text-2xl font-bold mb-8">תוצאות החישוב</h3>

	<div class="bg-white bg-opacity-10 rounded-lg p-6 mb-8">
	<div class="flex justify-between items-center mb-4 pb-4 border-b border-white border-opacity-20">
	<span class="font-medium">סכום משכנתא מוערך:</span>
	<span id="mortgage-amount" class="font-bold text-xl">1,200,000 ₪</span>
	</div>
	<div class="flex justify-between items-center mb-4 pb-4 border-b border-white border-opacity-20">
	<span class="font-medium">החזר חודשי משוער:</span>
	<span id="monthly-payment" class="font-bold text-xl">5,980 ₪</span>
	</div>
	<div class="flex justify-between items-center mb-4 pb-4 border-b border-white border-opacity-20">
	<span class="font-medium">סה"כ תשלום לאורך השנים:</span>
	<span id="total-payment" class="font-bold text-xl">1,794,120 ₪</span>
	</div>
	<div class="flex justify-between items-center">
	<span class="font-medium">סה"כ ריבית שתשלמו:</span>
	<span id="total-interest" class="font-bold text-xl">594,120 ₪</span>
	</div>
	</div>

	<div class="border-t border-blue-700 pt-6 mb-6">
	<h4 class="text-lg font-semibold mb-4 flex items-center">
	<i class="fas fa-lightbulb mr-3 text-secondary"></i> איך ניתן לחסוך עוד?
	</h4>
	<p class="mb-6 opacity-90">על ידי בחירת מסלולים נכונים ושילוב אופטימלי בין מסלולים קבועים ומשתנים, ניתן לחסוך עשרות ואף מאות אלפי שקלים! מומחה המשכנתאות שלנו ישמח לבדוק עבורך את כל האופציות.</p>
	<a href="#" data-page="contact" class="bg-secondary hover:bg-yellow-600 text-dark font-bold py-3 px-6 rounded-lg transition-colors flex items-center justify-center shadow-md">
	<i class="fas fa-user-tie mr-3"></i> לקבלת ייעוץ מקצועי
	</a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Mortgage Types Comparison -->
	<section class="py-20 bg-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<span class="text-secondary font-bold uppercase tracking-wider">השוואת מסלולים</span>
	<h2 class="text-3xl md:text-4xl font-bold text-dark mt-3 mb-4">איזה מסלול משכנתא מתאים לך?</h2>
	<div class="w-20 h-1 bg-primary mx-auto"></div>
	</div>

	<div class="overflow-x-auto">
	<table class="w-full border-collapse">
	<thead>
	<tr class="bg-primary text-white">
	<th class="p-4 text-right">סוג המסלול</th>
	<th class="p-4">ריבית קבועה לא צמודה</th>
	<th class="p-4">ריבית משתנה צמודה</th>
	<th class="p-4">ריבית פריים</th>
	<th class="p-4">מסלול משולב</th>
	</tr>
	</thead>
	<tbody>
	<tr class="border-b border-gray-200">
	<td class="p-4 font-bold">יתרונות</td>
	<td class="p-4">קביעות בתשלומים, הגנה מעליית ריביות</td>
	<td class="p-4">ריבית התחלתית נמוכה, גמישות</td>
	<td class="p-4">גמישות בהחזרים, אפשרות פחת ריבית</td>
	<td class="p-4">פיזור סיכונים, התאמה אישית</td>
	</tr>
	<tr class="border-b border-gray-200">
	<td class="p-4 font-bold">חסרונות</td>
	<td class="p-4">ריבית גבוהה יותר, קנסות לפירעון מוקדם</td>
	<td class="p-4">חשיפה לסיכון ריבית, אי-ודאות</td>
	<td class="p-4">חשיפה גדולה לסיכון ריבית, דורש ניהול פעיל</td>
	<td class="p-4">ניהול מורכב יותר</td>
	</tr>
	<tr class="border-b border-gray-200">
	<td class="p-4 font-bold">למי מתאים</td>
	<td class="p-4">מי שמעוניין בודאות ואינו מתכנן שינויים</td>
	<td class="p-4">מי שצופה ירידת ריבית או בעל מרווח ביטחון</td>
	<td class="p-4">מי שיש לו גמישות תזרימית גבוהה</td>
	<td class="p-4">רוב הלווים המעוניינים באיזון בין סיכון לודאות</td>
	</tr>
	<tr>
	<td class="p-4 font-bold">דוגמאות לריביות</td>
	<td class="p-4">3.5%-4.5%</td>
	<td class="p-4">1.2% + מדד (ל-5 שנים)</td>
	<td class="p-4">1.5% + פריים</td>
	<td class="p-4">שילוב לפי צרכי הלקוח</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="mt-12 text-center">
	<p class="text-gray-600 mb-6">לא בטוחים איזה מסלול מתאים לכם? מומחה המשכנתאות שלנו ישמח לנתח עבורכם את כל האפשרויות.</p>
	<a href="#" data-page="mortgage-comparison" class="inline-flex items-center bg-primary hover:bg-primarylight text-white font-bold py-3 px-6 rounded-lg transition-colors">
	<i class="fas fa-exchange-alt mr-2"></i> השוו מסלולים נוספים
	</a>
	</div>
	</div>
	</section>

	<!-- Services Section -->
	<section class="py-20 bg-light">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<span class="text-secondary font-bold uppercase tracking-wider">שירותים מיוחדים</span>
	<h2 class="text-3xl md:text-4xl font-bold text-dark mt-3 mb-4">השירותים שלנו</h2>
	<div class="w-20 h-1 bg-primary mx-auto"></div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
	<div class="h-48 bg-primarylight flex items-center justify-center text-white text-4xl">
	<i class="fas fa-home"></i>
	</div>
	<div class="p-8">
	<h3 class="text-xl font-bold mb-3">משכנתא ראשונה</h3>
	<p class="text-gray-600 mb-4">ליווי אישי בדרך לדירה הראשונה. נלווה אתכם משלב התכנון הראשוני, דרך מציאת הנכס ועד לחתימה על המשכנתא.</p>
	<a href="#" data-page="first-mortgage" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center group">
	<span class="group-hover:underline">למידע נוסף</span>
	<i class="fas fa-arrow-left ml-2 transform group-hover:-translate-x-1 transition-transform"></i>
	</a>
	</div>
	</div>

	<div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
	<div class="h-48 bg-primarylight flex items-center justify-center text-white text-4xl">
	<i class="fas fa-sync-alt"></i>
	</div>
	<div class="p-8">
	<h3 class="text-xl font-bold mb-3">מיחזור משכנתא</h3>
	<p class="text-gray-600 mb-4">האם אתם משלמים יותר מדי? נבדוק האם כדאי למחזר את המשכנתא הקיימת שלכם ולחסוך עשרות אלפי שקלים.</p>
	<a href="#" data-page="mortgage-refinance" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center group">
	<span class="group-hover:underline">למידע נוסף</span>
	<i class="fas fa-arrow-left ml-2 transform group-hover:-translate-x-1 transition-transform"></i>
	</a>
	</div>
	</div>

	<div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
	<div class="h-48 bg-primarylight flex items-center justify-center text-white text-4xl">
	<i class="fas fa-tools"></i>
	</div>
	<div class="p-8">
	<h3 class="text-xl font-bold mb-3">בנייה עצמית</h3>
	<p class="text-gray-600 mb-4">ייעוץ ומימון לבניית הבית הפרטי שלכם. נלווה אתכם בכל שלבי הבנייה ונעזור לכם לנהל את המימון בצורה הטובה ביותר.</p>
	<a href="#" data-page="construction-loan" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center group">
	<span class="group-hover:underline">למידע נוסף</span>
	<i class="fas fa-arrow-left ml-2 transform group-hover:-translate-x-1 transition-transform"></i>
	</a>
	</div>
	</div>

	<div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
	<div class="h-48 bg-primarylight flex items-center justify-center text-white text-4xl">
	<i class="fas fa-building"></i>
	</div>
	<div class="p-8">
	<h3 class="text-xl font-bold mb-3">השקעות נדל"ן</h3>
	<p class="text-gray-600 mb-4">השקעה בנדל"ן היא מהרווחיות ביותר אך דורשת ידע וניסיון. נעזור לכם למצוא הזדמנויות ולהשיג מימון מיטבי.</p>
	<a href="#" data-page="investment" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center group">
	<span class="group-hover:underline">למידע נוסף</span>
	<i class="fas fa-arrow-left ml-2 transform group-hover:-translate-x-1 transition-transform"></i>
	</a>
	</div>
	</div>

	<div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
	<div class="h-48 bg-primarylight flex items-center justify-center text-white text-4xl">
	<i class="fas fa-piggy-bank"></i>
	</div>
	<div class="p-8">
	<h3 class="text-xl font-bold mb-3">פירעון מוקדם</h3>
	<p class="text-gray-600 mb-4">קיבלתם ירושה? זכיתם בפיס? התייעצו איתנו לפני פירעון המשכנתא - אולי תוכלו לנצל את הכסף באופן יעיל יותר!</p>
	<a href="#" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center group">
	<span class="group-hover:underline">למידע נוסף</span>
	<i class="fas fa-arrow-left ml-2 transform group-hover:-translate-x-1 transition-transform"></i>
	</a>
	</div>
	</div>

	<div class="service-card bg-white rounded-xl shadow-md overflow-hidden">
	<div class="h-48 bg-primarylight flex items-center justify-center text-white text-4xl">
	<i class="fas fa-umbrella-beach"></i>
	</div>
	<div class="p-8">
	<h3 class="text-xl font-bold mb-3">תכנון פרישה</h3>
	<p class="text-gray-600 mb-4">תכנון פיננסי לגיל הפרישה הכולל התאמת המשכנתא ליכולות החדשות, הטבות מס ופתרונות מימון חכמים.</p>
	<a href="#" data-page="retirement" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center group">
	<span class="group-hover:underline">למידע נוסף</span>
	<i class="fas fa-arrow-left ml-2 transform group-hover:-translate-x-1 transition-transform"></i>
	</a>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Testimonials -->
	<section class="py-20 bg-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<span class="text-secondary font-bold uppercase tracking-wider">ממליצים עלינו</span>
	<h2 class="text-3xl md:text-4xl font-bold text-dark mt-3 mb-4">מה אומרים הלקוחות שלנו</h2>
	<div class="w-20 h-1 bg-primary mx-auto"></div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<div class="testimonial-card bg-light p-8 rounded-xl">
	<div class="flex items-center mb-6">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="דניאל לוי" class="w-14 h-14 rounded-full object-cover border-2 border-secondary">
	<div class="mr-4">
	<h4 class="font-bold">דניאל לוי</h4>
	<div class="flex text-yellow-400 text-xs mt-1">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>
	</div>
	<p class="text-gray-600 italic mb-4">"שער הניצחון חסכו לנו יותר מ-150,000 ש"ח על המשכנתא! היועץ היה מקצועי, הסביר לנו כל שלב ועזר לנו לקבל את ההחלטות הטובות ביותר למצב שלנו. ממליץ בחום!"</p>
	<div class="text-primarylight font-medium text-sm">משכנתא ראשונה, תל אביב</div>
	</div>

	<div class="testimonial-card bg-light p-8 rounded-xl">
	<div class="flex items-center mb-6">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="מיכל כהן" class="w-14 h-14 rounded-full object-cover border-2 border-secondary">
	<div class="mr-4">
	<h4 class="font-bold">מיכל כהן</h4>
	<div class="flex text-yellow-400 text-xs mt-1">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star-half-alt"></i>
	</div>
	</div>
	</div>
	<p class="text-gray-600 italic mb-4">"כזוג צעיר שקונה דירה ראשונה, היינו אבודים. הייעוץ שקיבלנו היה מקיף ומפורט. קיבלנו הסבר על כל האופציות, חישבנו ביחד מה מתאים לנו והתוצאה - משכנתא מותאמת אישית שמאפשרת לנו לחיות בנוחות."</p>
	<div class="text-primarylight font-medium text-sm">זוג צעיר, ראשון לציון</div>
	</div>

	<div class="testimonial-card bg-light p-8 rounded-xl">
	<div class="flex items-center mb-6">
	<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="איציק מורד" class="w-14 h-14 rounded-full object-cover border-2 border-secondary">
	<div class="mr-4">
	<h4 class="font-bold">איציק מורד</h4>
	<div class="flex text-yellow-400 text-xs mt-1">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	</div>
	</div>
	<p class="text-gray-600 italic mb-4">"מיחזרנו משכנתא אחרי 10 שנים וחסכנו 80,000 ש"ח! לא ידעתי שזה אפשרי עד שפניתי לשער הניצחון. השירות היה אדיב ומקצועי, כל המלצותיהם התקיימו במלואן."</p>
	<div class="text-primarylight font-medium text-sm">מיחזור משכנתא, פתח תקווה</div>
	</div>
	</div>

	<div class="text-center mt-12">
	<a href="#" class="inline-flex items-center bg-white hover:bg-gray-100 text-dark font-bold py-3 px-6 rounded-lg border border-gray-200 shadow-sm transition-colors">
	<i class="fas fa-star mr-2 text-yellow-400"></i> קראו עוד המלצות
	</a>
	</div>
	</div>
	</section>

	<!-- Blog Section -->
	<section class="py-20 bg-light">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<span class="text-secondary font-bold uppercase tracking-wider">טיפים ומדריכים</span>
	<h2 class="text-3xl md:text-4xl font-bold text-dark mt-3 mb-4">המדריך השלם למשכנתא</h2>
	<div class="w-20 h-1 bg-primary mx-auto"></div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
	<div class="blog-card bg-white rounded-xl shadow-md overflow-hidden">
	<div class="h-48 bg-gradient-to-r from-primary to-primarylight flex items-center justify-center text-white text-4xl">
	<i class="fas fa-file-signature"></i>
	</div>
	<div class="p-6">
	<div class="flex items-center text-sm text-gray-500 mb-3">
	<span><i class="far fa-calendar mr-1"></i> 15 במאי 2023</span>
	<span class="mx-2">•</span>
	<span><i class="far fa-clock mr-1"></i> 8 דק' קריאה</span>
	</div>
	<h3 class="text-xl font-bold mb-3">10 טעויות נפוצות בחתימה על משכנתא</h3>
	<p class="text-gray-600 mb-4">אילו טעויות אנשים עושים כשניגשים למשכנתא ואיך אפשר להימנע מהן? המדריך המלא שיחסוך לכם כסף רב.</p>
	<a href="#" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center group">
	<span class="group-hover:underline">קראו עוד</span>
	<i class="fas fa-arrow-left ml-2 transform group-hover:-translate-x-1 transition-transform"></i>
	</a>
	</div>
	</div>

	<div class="blog-card bg-white rounded-xl shadow-md overflow-hidden">
	<div class="h-48 bg-gradient-to-r from-primary to-primarylight flex items-center justify-center text-white text-4xl">
	<i class="fas fa-sync-alt"></i>
	</div>
	<div class="p-6">
	<div class="flex items-center text-sm text-gray-500 mb-3">
	<span><i class="far fa-calendar mr-1"></i> 2 במאי 2023</span>
	<span class="mx-2">•</span>
	<span><i class="far fa-clock mr-1"></i> 6 דק' קריאה</span>
	</div>
	<h3 class="text-xl font-bold mb-3">מתי כדאי למחזר משכנתא?</h3>
	<p class="text-gray-600 mb-4">3 סימנים שמצביעים על כך שכדאי לכם לשקול מיחזור משכנתא כבר עכשיו כדי לחסוך אלפי שקלים.</p>
	<a href="#" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center group">
	<span class="group-hover:underline">קראו עוד</span>
	<i class="fas fa-arrow-left ml-2 transform group-hover:-translate-x-1 transition-transform"></i>
	</a>
	</div>
	</div>

	<div class="blog-card bg-white rounded-xl shadow-md overflow-hidden">
	<div class="h-48 bg-gradient-to-r from-primary to-primarylight flex items-center justify-center text-white text-4xl">
	<i class="fas fa-hand-holding-usd"></i>
	</div>
	<div class="p-6">
	<div class="flex items-center text-sm text-gray-500 mb-3">
	<span><i class="far fa-calendar mr-1"></i> 20 באפריל 2023</span>
	<span class="mx-2">•</span>
	<span><i class="far fa-clock mr-1"></i> 10 דק' קריאה</span>
	</div>
	<h3 class="text-xl font-bold mb-3">כמה משכנתא באמת אפשר לקבל?</h3>
	<p class="text-gray-600 mb-4">הכללים החדשים של הבנקים לקביעת יכולת ההחזר ומה אפשר לעשות כדי להגדיל את הסכום המאושר.</p>
	<a href="#" class="text-primary font-semibold hover:text-primarylight transition-colors flex items-center group">
	<span class="group-hover:underline">קראו עוד</span>
	<i class="fas fa-arrow-left ml-2 transform group-hover:-translate-x-1 transition-transform"></i>
	</a>
	</div>
	</div>
	</div>

	<div class="text-center">
	<a href="#" class="inline-flex items-center bg-primary hover:bg-primarylight text-white font-bold py-3 px-6 rounded-lg transition-colors">
	<i class="fas fa-book-open mr-2"></i> לכל המאמרים והמדריכים
	</a>
	</div>
	</div>
	</section>

	<!-- FAQ Section -->
	<section class="py-20 bg-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<span class="text-secondary font-bold uppercase tracking-wider">שאלות ותשובות</span>
	<h2 class="text-3xl md:text-4xl font-bold text-dark mt-3 mb-4">שאלות נפוצות על משכנתאות</h2>
	<div class="w-20 h-1 bg-primary mx-auto"></div>
	</div>

	<div class="max-w-3xl mx-auto">
	<div class="mb-4 border border-gray-100 rounded-xl shadow-sm overflow-hidden">
	<button class="accordion-header flex justify-between items-center w-full p-6 text-left font-semibold text-dark hover:text-primary transition-colors">
	<span>האם כדאי לקחת משכנתא בריבית משתנה או קבועה?</span>
	<i class="fas fa-chevron-down transform transition-transform duration-300"></i>
	</button>
	<div class="accordion-content">
	<div class="pb-6 px-6">
	<p class="text-gray-700 mb-3">התשובה תלויה במצבכם הפיננסי הנוכחי, סובלנותכם לסיכון והציפיות שלכם לשינויי ריבית בעתיד. באופן כללי, מומלץ לבחור שילוב של מסלולים שונים כדי לנצל את היתרונות של כל מסלול ולפזר סיכונים.</p>
	<p class="text-gray-700">בשער הניצחון אנו מציעים ייעוץ אישי שבו ננתח את המצב האישי שלך, נבחן את כל הגורמים הרלוונטיים, ונתאים לך את השילוב האופטימלי בין מסלולים קבועים ומשתנים שמתאים בדיוק לצרכים ולמטרות שלך.</p>
	</div>
	</div>
	</div>

	<div class="mb-4 border border-gray-100 rounded-xl shadow-sm overflow-hidden">
	<button class="accordion-header flex justify-between items-center w-full p-6 text-left font-semibold text-dark hover:text-primary transition-colors">
	<span>כמה זמן לוקח לקבל אישור משכנתא ואיך אפשר להאיץ את התהליך?</span>
	<i class="fas fa-chevron-down transform transition-transform duration-300"></i>
	</button>
	<div class="accordion-content">
	<div class="pb-6 px-6">
	<p class="text-gray-700">משך הזמן לקבלת אישור משכנתא ראשוני (אישור עקרוני) עומד על 2-5 ימי עבודה בממוצע. עבור אישור מלא, התהליך תלוי בבנק ולעתים יכול להימשך מספר שבועות.</p>
	<p class="text-gray-700 mt-3">כדי להאיץ את התהליך:</p>
	<ul class="list-disc pl-6 text-gray-700 mt-2 space-y-1">
	<li>הכינו מראש את כל המסמכים הנדרשים (תלושי משכורת, דוחות בנק וכו')</li>
	<li>חשבו מראש כמה אתם רוצים ללוות ומה ההחזר החודשי המתאים לכם</li>
	<li>השתמשו בשירותי ייעוץ מקצועי כמו שלנו שיכולים להאיץ את התהליך משמעותית</li>
	</ul>
	<p class="text-gray-700 mt-3">באמצעות שער הניצחון אנו יכולים להאיץ תהליכים אלו משמעותית הודות לקשרים שלנו עם הבנקים וניסיוננו הרב. פעמים רבות אנו מצליחים להשיג תשובה תוך 24-48 שעות עבודה.</p>
	</div>
	</div>
	</div>

	<div class="mb-4 border border-gray-100 rounded-xl shadow-sm overflow-hidden">
	<button class="accordion-header flex justify-between items-center w-full p-6 text-left font-semibold text-dark hover:text-primary transition-colors">
	<span>מה ההבדל בין יועץ משכנתאות בבנק לבין יועץ עצמאי?</span>
	<i class="fas fa-chevron-down transform transition-transform duration-300"></i>
	</button>
	<div class="accordion-content">
	<div class="pb-6 px-6">
	<p class="text-gray-700">יועץ משכנתאות בבנק מייצג את האינטרסים של הבנק הספציפי בו הוא עובד. הוא בדרך כלל יציע לך רק את המוצרים של הבנק שלו, גם אם יש פתרונות טובים יותר בבנקים אחרים.</p>
	<p class="text-gray-700 mt-3">יועץ עצמאי כמו אלו בשער הניצחון מייצג רק את האינטרסים שלך - הלקוח. היתרונות העיקריים:</p>
	<ul class="list-disc pl-6 text-gray-700 mt-2 space-y-1">
	<li>גישה לכל הבנקים והחברות בשוק (ולא רק לבנק אחד)</li>
	<li>יכולת להשוות בין כל האופציות הקיימות בשוק</li>
	<li>ייעוץ אובייקטיבי ללא ניגוד עניינים</li>
	<li>נסיון רב יותר בסוגים שונים של משכנתאות ופתרונות מימון</li>
	<li>ליווי אישי עד לחתימה ולאחריה</li>
	</ul>
	</div>
	</div>
	</div>

	<div class="mb-4 border border-gray-100 rounded-xl shadow-sm overflow-hidden">
	<button class="accordion-header flex justify-between items-center w-full p-6 text-left font-semibold text-dark hover:text-primary transition-colors">
	<span>מתי כדאי לשקול מיחזור משכנתא ואיך זה עובד?</span>
	<i class="fas fa-chevron-down transform transition-transform duration-300"></i>
	</button>
	<div class="accordion-content">
	<div class="pb-6 px-6">
	<p class="text-gray-700">מיחזור משכנתא עשוי להיות כדאי במספר מצבים:</p>
	<ul class="list-disc pl-6 text-gray-700 mt-2 space-y-1">
	<li>כאשר ריביות השוק ירדו משמעותית מאז נטלתם את המשכנתא המקורית</li>
	<li>כאשר המצב הפיננסי שלכם השתפר (הכנסות גבוהות יותר, צברתם נכסים נוספים) ואתם יכולים לקבל תנאים טובים יותר</li>
	<li>כאשר אתם מעוניינים לשנות את הרכב מסלולי המשכנתא שלכם (למשל, להחליף מסלולים משתנים לקבועים או להפך)</li>
	<li>כאשר אתם רוצים לקצר או להאריך את תקופת ההחזר</li>
	<li>כאשר אתם מעוניינים לצרף הלוואה נוספת למשכנתא הקיימת</li>
	</ul>
	<p class="text-gray-700 mt-3">תהליך המיחזור כולל בדיקה של כל האפשרויות הקיימות בשוק, בחינת כדאיות כלכלית (התחשבות בעמלות וקנסות אפשריים), הגשת בקשה לבנקים רלוונטיים וסגירת ההלוואה הישנה עם פתיחת החדשה.</p>
	<p class="text-gray-700 mt-3">מומלץ לבחון את כדאיות מיחזור המשכנתא פעם בשנה לפחות. אנחנו בשער הניצחון מציעים בדיקה שנתית ללא תשלום ללקוחותינו.</p>
	</div>
	</div>
	</div>

	<div class="border border-gray-100 rounded-xl shadow-sm overflow-hidden">
	<button class="accordion-header flex justify-between items-center w-full p-6 text-left font-semibold text-dark hover:text-primary transition-colors">
	<span>איך בוחרים מסלול משכנתא לזוגות צעירים?</span>
	<i class="fas fa-chevron-down transform transition-transform duration-300"></i>
	</button>
	<div class="accordion-content">
	<div class="pb-6 px-6">
	<p class="text-gray-700">בחירת מסלול משכנתא לזוגות צעירים מחייבת התחשבות במספר פרמטרים חשובים:</p>
	<ul class="list-disc pl-6 text-gray-700 mt-2 space-y-1">
	<li><strong>פוטנציאל עלייה בהכנסות</strong> - אם צפויה עלייה משמעותית בהכנסות בשנים הקרובות (קידום בעבודה, סיום לימודים), ניתן לשקול מסלולים משתנים.</li>
	<li><strong>אופק זמן</strong> - זוגות צעירים יכולים לרוב להרשות לעצמם ללוות לתקופות ארוכות יותר ולפרוס את ההחזר.</li>
	<li><strong>תוכניות עתידיות</strong> - צריך לקחת בחשבון תוכניות כמו חופשת לידה, מעבר דירה או שינוי קריירה.</li>
	<li><strong>סבילות לסיכון</strong> - זוגות עם ילדים קטנים עשויים להעדיף מסלולים קבועים לוודאות בתשלומים.</li>
	</ul>
	<p class="text-gray-700 mt-3">המלצתנו לזוגות צעירים היא ליצור תוכנית גמישה שתכלול בדרך כלל שילוב של מסלולים שונים, עם אפשרות לשינויים עתידיים בהתאם לצרכים המשתנים.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Banks Partners -->
	<section class="py-16 bg-light">
	<div class="container mx-auto px-4">
	<div class="text-center mb-12">
	<h3 class="text-xl text-gray-600 mb-2">שותפים אסטרטגיים</h3>
	<h2 class="text-3xl font-bold text-dark">הבנקים המובילים איתם אנו עובדים</h2>
	</div>

	<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
	<div class="flex items-center justify-center p-4 bg-white rounded-xl shadow-sm">
	<img src="https://via.placeholder.com/150x60?text=Bank+Hapoalim" alt="בנק הפועלים" class="h-10">
	</div>
	<div class="flex items-center justify-center p-4 bg-white rounded-xl shadow-sm">
	<img src="https://via.placeholder.com/150x60?text=Bank+Leumi" alt="בנק לאומי" class="h-10">
	</div>
	<div class="flex items-center justify-center p-4 bg-white rounded-xl shadow-sm">
	<img src="https://via.placeholder.com/150x60?text=Mizrahi-Tefahot" alt="מזרחי טפחות" class="h-10">
	</div>
	<div class="flex items-center justify-center p-4 bg-white rounded-xl shadow-sm">
	<img src="https://via.placeholder.com/150x60?text=Discount+Bank" alt="בנק דיסקונט" class="h-10">
	</div>
	<div class="flex items-center justify-center p-4 bg-white rounded-xl shadow-sm">
	<img src="https://via.placeholder.com/150x60?text=Mercantile" alt="בנק מרכנתיל" class="h-10">
	</div>
	<div class="flex items-center justify-center p-4 bg-white rounded-xl shadow-sm">
	<img src="https://via.placeholder.com/150x60?text=Bank+Jerusalem" alt="בנק ירושלים" class="h-10">
	</div>
	</div>
	</div>
	</section>

	<!-- CTA Section -->
	<section class="py-20 cta-gradient text-dark">
	<div class="container mx-auto px-4 text-center">
	<h2 class="text-3xl md:text-4xl font-bold mb-6">הגיע הזמן להבין את המשכנתא שלך</h2>
	<p class="text-xl mb-8 max-w-2xl mx-auto">ייעוץ ראשוני ללא עלות וללא התחייבות - השאירו פרטים ומומחה מטעמנו יחזור אליכם תוך שעה</p>

	<div class="max-w-md mx-auto bg-white rounded-xl shadow-xl p-8">
	<form id="contact-form" class="space-y-4">
	<div>
	<input type="text" id="fullname" placeholder="שם מלא" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent form-input">
	<div id="fullname-error" class="error-message text-left mt-1 hidden">שדה זה הוא חובה</div>
	</div>
	<div>
	<input type="tel" id="phone" placeholder="טלפון" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent form-input">
	<div id="phone-error" class="error-message text-left mt-1 hidden">נא למלא מספר טלפון תקין</div>
	</div>
	<div>
	<select id="service" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent form-input">
	<option value="" disabled selected>במה נוכל לעזור?</option>
	<option value="first-mortgage">משכנתא ראשונה</option>
	<option value="refinance">מיחזור משכנתא</option>
	<option value="construction">בנייה עצמית</option>
	<option value="investment">השקעות נדל"ן</option>
	<option value="retirement">תכנון פרישה</option>
	<option value="other">נושא אחר</option>
	</select>
	<div id="service-error" class="error-message text-left mt-1 hidden">אנא בחרו נושא</div>
	</div>
	<div>
	<textarea id="message" placeholder="פרטים נוספים (לא חובה)" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent form-input"></textarea>
	</div>
	<button type="submit" class="w-full bg-primary hover:bg-primarylight text-white font-bold py-4 px-6 rounded-lg transition-colors shadow-lg flex items-center justify-center">
	<span id="submit-text">שלחו בקשת ייעוץ</span>
	<div id="submit-spinner" class="hidden ml-3">
	<div class="spinner-small w-5 h-5 border-2 border-white border-t-transparent rounded-full"></div>
	</div>
	</button>
	</form>
	</div>

	<div class="mt-8 flex items-center justify-center space-x-4 space-x-reverse text-dark">
	<div class="flex items-center">
	<i class="fas fa-shield-alt mr-2"></i>
	<span>אבטחת מידע</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-lock mr-2"></i>
	<span>פרטיות מובטחת</span>
	</div>
	</div>
	</div>
	</section>
	</section>

	<!-- Other pages templates... (mortgage, first-mortgage, mortgage-refinance, etc.) -->
	<!-- Each would follow a similar structure with specialized content -->

	</main>

	<!-- Footer -->
	<footer class="bg-dark text-white pt-16 pb-8">
	<div class="container mx-auto px-4">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-xl font-bold mb-4">שער הניצחון</h3>
	<p class="mb-4 text-gray-300">ייעוץ משכנתאות ופיננסי עצמאי מאז 2008. אנו פועלים למען הלקוח בלבד, ללא ניגודי עניינים.</p>
	<div class="flex space-x-4 space-x-reverse">
	<a href="#" class="text-gray-300 hover:text-white transition-colors"><i class="fab fa-facebook-f"></i></a>
	<a href="#" class="text-gray-300 hover:text-white transition-colors"><i class="fab fa-linkedin-in"></i></a>
	<a href="#" class="text-gray-300 hover:text-white transition-colors"><i class="fab fa-whatsapp"></i></a>
	<a href="#" class="text-gray-300 hover:text-white transition-colors"><i class="fab fa-youtube"></i></a>
	</div>
	</div>

	<div>
	<h3 class="text-xl font-bold mb-4">שירותים</h3>
	<ul class="space-y-3">
	<li><a href="#" data-page="first-mortgage" class="text-gray-300 hover:text-white transition-colors">משכנתא ראשונה</a></li>
	<li><a href="#" data-page="mortgage-refinance" class="text-gray-300 hover:text-white transition-colors">מיחזור משכנתא</a></li>
	<li><a href="#" data-page="construction-loan" class="text-gray-300 hover:text-white transition-colors">משכנתא לבנייה עצמית</a></li>
	<li><a href="#" data-page="investment" class="text-gray-300 hover:text-white transition-colors">השקעות נדל"ן</a></li>
	<li><a href="#" data-page="retirement" class="text-gray-300 hover:text-white transition-colors">תכנון פרישה</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-xl font-bold mb-4">קישורים שימושיים</h3>
	<ul class="space-y-3">
	<li><a href="#" class="text-gray-300 hover:text-white transition-colors">מחשבון משכנתא</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white transition-colors">מדריכים וטיפים</a></li>
	<li><a href="#" class="text-gray-300 hover:text-white transition-colors">שאלות נפוצות</a></li>
	<li><a href="#" data-page="about" class="text-gray-300 hover:text-white transition-colors">אודותינו</a></li>
	<li><a href="#" data-page="contact" class="text-gray-300 hover:text-white transition-colors">צור קשר</a></li>
	</ul>
	</div>

	<div>
	<h3 class="text-xl font-bold mb-4">יצירת קשר</h3>
	<ul class="space-y-4">
	<li class="flex items-start">
	<i class="fas fa-map-marker-alt mt-1 mr-3 text-primarylight"></i>
	<span class="text-gray-300">קיבוץ גלויות 15, תל אביב</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-phone-alt mr-3 text-primarylight"></i>
	<span class="text-gray-300">03-1234567</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-mobile-alt mr-3 text-primarylight"></i>
	<span class="text-gray-300">050-1234567</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-envelope mr-3 text-primarylight"></i>
	<span class="text-gray-300">info@shaarnitzachon.co.il</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-clock mr-3 text-primarylight"></i>
	<span class="text-gray-300">א'-ה' 09:00-19:00</span>
	</li>
	</ul>
	</div>
	</div>

	<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<p>© 2023 שער הניצחון - ליווי פיננסי אישי. כל הזכויות שמורות.</p>
	<div class="mt-4 md:mt-0">
	<a href="#" class="text-gray-400 hover:text-white transition-colors mx-2">תנאי שימוש</a>
	<a href="#" class="text-gray-400 hover:text-white transition-colors mx-2">מדיניות פרטיות</a>
	<a href="#" class="text-gray-400 hover:text-white transition-colors mx-2">צור קשר</a>
	</div>
	</div>
	</div>
	</div>
	</footer>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// Loading overlay
	setTimeout(() => {
	document.getElementById('loading-overlay').style.opacity = '0';
	setTimeout(() => {
	document.getElementById('loading-overlay').style.display = 'none';
	}, 300);
	}, 800);

	// Sticky header
	const header = document.getElementById('main-header');
	window.addEventListener('scroll', () => {
	if (window.scrollY > 100) {
	header.classList.add('sticky');
	} else {
	header.classList.remove('sticky');
	}
	});

	// Navigation between pages
	document.querySelectorAll('.nav-link, .nav-link-mobile').forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();

	// Remove active class from all links
	document.querySelectorAll('.nav-link, .nav-link-mobile').forEach(el => {
	el.classList.remove('active');
	});

	// Add active class to clicked link
	this.classList.add('active');

	// Get the page to show
	const pageId = this.getAttribute('data-page');

	// Hide all pages
	document.querySelectorAll('.page-section').forEach(page => {
	page.classList.remove('active');
	});

	// Show the selected page
	document.getElementById(pageId).classList.add('active');

	// If mobile menu is open, close it
	document.getElementById('mobile-menu').classList.add('hidden');

	// Scroll to top with smooth behavior
	window.scrollTo({
	top: 0,
	behavior: 'smooth'
	});
	});
	});

	// Mobile menu toggle
	document.getElementById('mobile-menu-button').addEventListener('click', function() {
	document.getElementById('mobile-menu').classList.toggle('hidden');
	});

	// Language switcher
	document.querySelector('.language-switcher button').addEventListener('click', function(e) {
	e.stopPropagation();
	document.querySelector('.language-dropdown').classList.toggle('hidden');
	});

	// Close dropdowns when clicking outside
	document.addEventListener('click', function(e) {
	if (!e.target.closest('.dropdown')) {
	document.querySelectorAll('.dropdown-menu').forEach(menu => {
	menu.classList.add('hidden');
	});
	}

	if (!e.target.closest('.language-switcher')) {
	document.querySelector('.language-dropdown').classList.add('hidden');
	}
	});

	// Accordion functionality
	document.querySelectorAll('.accordion-header').forEach(header => {
	header.addEventListener('click', function() {
	const content = this.nextElementSibling;
	const icon = this.querySelector('i');

	this.classList.toggle('active');

	if (this.classList.contains('active')) {
	icon.classList.remove('fa-chevron-down');
	icon.classList.add('fa-chevron-up');
	} else {
	icon.classList.remove('fa-chevron-up');
	icon.classList.add('fa-chevron-down');
	}
	});
	});

	// Mortgage calculator functionality
	const propertyValue = document.getElementById('property-value');
	const equity = document.getElementById('equity');
	const years = document.getElementById('years');
	const rate = document.getElementById('rate');

	const propertyValueDisplay = document.getElementById('property-value-display');
	const equityDisplay = document.getElementById('equity-display');
	const yearsDisplay = document.getElementById('years-display');
	const rateDisplay = document.getElementById('rate-display');

	const mortgageAmount = document.getElementById('mortgage-amount');
	const monthlyPayment = document.getElementById('monthly-payment');
	const totalPayment = document.getElementById('total-payment');
	const totalInterest = document.getElementById('total-interest');

	function formatNumber(num) {
	return new Intl.NumberFormat('he-IL').format(num);
	}

	function calculateMortgage() {
	const propVal = parseInt(propertyValue.value);
	const eq = parseInt(equity.value);
	const y = parseInt(years.value);
	const r = parseFloat(rate.value) / 100 / 12;
	const n = y * 12;

	const mortgage = propVal - eq;

	// Monthly payment calculation (P = L[c(1 + c)^n]/[(1 + c)^n - 1])
	let monthly = 0;
	if (r > 0) {
	monthly = mortgage * r * Math.pow(1 + r, n) / (Math.pow(1 + r, n) - 1);
	} else {
	monthly = mortgage / n;
	}

	const total = monthly * n;
	const interest = total - mortgage;

	// Update displays
	mortgageAmount.textContent = formatNumber(mortgage) + ' ₪';
	monthlyPayment.textContent = formatNumber(Math.round(monthly)) + ' ₪';
	totalPayment.textContent = formatNumber(Math.round(total)) + ' ₪';
	totalInterest.textContent = formatNumber(Math.round(interest)) + ' ₪';
	}

	propertyValue.addEventListener('input', function() {
	propertyValueDisplay.textContent = formatNumber(this.value);
	calculateMortgage();
	});

	equity.addEventListener('input', function() {
	equityDisplay.textContent = formatNumber(this.value);
	calculateMortgage();
	});

	years.addEventListener('input', function() {
	yearsDisplay.textContent = this.value;
	calculateMortgage();
	});

	rate.addEventListener('input', function() {
	rateDisplay.textContent = this.value + '%';
	calculateMortgage();
	});

	// Save scenario button
	document.getElementById('save-scenario').addEventListener('click', function(e) {
	e.preventDefault();
	this.innerHTML = '<i class="fas fa-check mr-2"></i> התרחיש נשמר';
	this.classList.remove('bg-primarylight', 'hover:bg-primary');
	this.classList.add('bg-green-500', 'hover:bg-green-600');

	setTimeout(() => {
	this.innerHTML = '<i class="fas fa-save mr-2"></i> שמור תרחיש זה להשוואה';
	this.classList.remove('bg-green-500', 'hover:bg-green-600');
	this.classList.add('bg-primarylight', 'hover:bg-primary');
	}, 3000);
	});

	// Form validation
	const contactForm = document.getElementById('contact-form');
	const submitText = document.getElementById('submit-text');
	const submitSpinner = document.getElementById('submit-spinner');

	contactForm.addEventListener('submit', function(e) {
	e.preventDefault();

	// Reset errors
	document.querySelectorAll('.form-input').forEach(input => {
	input.classList.remove('error');
	});
	document.querySelectorAll('.error-message').forEach(error => {
	error.classList.add('hidden');
	});

	let isValid = true;

	// Validate full name
	const fullname = document.getElementById('fullname');
	if (!fullname.value.trim()) {
	fullname.classList.add('error');
	document.getElementById('fullname-error').classList.remove('hidden');
	isValid = false;
	}

	// Validate phone
	const phone = document.getElementById('phone');
	const phoneRegex = /^0[2-9]\d{7,8}$/;
	if (!phoneRegex.test(phone.value.trim())) {
	phone.classList.add('error');
	document.getElementById('phone-error').classList.remove('hidden');
	isValid = false;
	}

	// Validate service
	const service = document.getElementById('service');
	if (!service.value) {
	service.classList.add('error');
	document.getElementById('service-error').classList.remove('hidden');
	isValid = false;
	}

	if (isValid) {
	// Show loading state
	submitText.textContent = 'שולח...';
	submitSpinner.classList.remove('hidden');

	// Simulate form submission
	setTimeout(() => {
	submitText.textContent = 'נשלח בהצלחה!';
	submitSpinner.classList.add('hidden');

	// Reset form
	setTimeout(() => {
	contactForm.reset();
	submitText.textContent = 'שלחו בקשת ייעוץ';

	// Show success message
	const successDiv = document.createElement('div');
	successDiv.className = 'mt-4 p-4 bg-green-100 text-green-800 rounded-lg text-center';
	successDiv.innerHTML = '<i class="fas fa-check-circle mr-2"></i> פרטיך נקלטו בהצלחה! נציגנו יחזרו אליך בהקדם';
	contactForm.appendChild(successDiv);

	setTimeout(() => {
	successDiv.remove();
	}, 5000);
	}, 1500);
	}, 2000);
	}
	});

	// Animate counter numbers
	const counters = document.querySelectorAll('.counter');
	const speed = 200;

	function animateCounters() {
	counters.forEach(counter => {
	const target = +counter.getAttribute('data-count');
	const count = +counter.innerText;
	const increment = target / speed;

	if (count < target) {
	counter.innerText = Math.floor(count + increment);
	setTimeout(animateCounters, 1);
	} else {
	counter.innerText = formatNumber(target);
	}
	});
	}

	// Start counter animation when section is in view
	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	animateCounters();
	observer.unobserve(entry.target);
	}
	});
	}, { threshold: 0.5 });

	observer.observe(document.querySelector('.hero-gradient'));

	// Smooth scroll for anchor links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();

	const targetId = this.getAttribute('href');
	if (targetId === '#') return;

	const targetElement = document.querySelector(targetId);
	if (targetElement) {
	window.scrollTo({
	top: targetElement.offsetTop - 100,
	behavior: 'smooth'
	});
	}
	});
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shaike123/win-gate" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>