Spaces:
Running
Running
| <html lang="he" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| <title>המרחב הטכנולוגי שלך | קורסים וסדנאות ייחודיות</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- התאמת סגנונות ל-iOS --> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <meta name="theme-color" content="#0f172a"> | |
| <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | |
| <!-- התאמת סגנונות ל-Android by sagi--> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'Rubik', sans-serif; | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| overflow-x: hidden; | |
| /* מניעת זום לא רצוי ב-iOS */ | |
| touch-action: manipulation; | |
| -webkit-text-size-adjust: 100%; | |
| /* מניעת highlight כחול ב-iOS */ | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| /* תיקון בעיות ספציפיות ל-iOS */ | |
| @supports (-webkit-touch-callout: none) { | |
| body { | |
| /* תיקון לגובה מסך ב-iPhone */ | |
| height: -webkit-fill-available; | |
| } | |
| } | |
| /* תיקון input ב-Android */ | |
| input, textarea, select { | |
| -webkit-appearance: none; | |
| border-radius: 0; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #4338ca 0%, #1e40af 50%, #1e3a8a 100%); | |
| /* תיקון רקע ב-iOS */ | |
| -webkit-background-clip: padding-box; | |
| background-clip: padding-box; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .glow { | |
| animation: glow 2s infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #3b82f6, 0 0 20px #3b82f6; | |
| } | |
| to { | |
| box-shadow: 0 0 10px #fff, 0 0 15px #2563eb, 0 0 20px #2563eb, 0 0 25px #2563eb; | |
| } | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #3b82f6; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #3b82f6; } | |
| } | |
| /* תיקון גלילה חלקה ב-iOS */ | |
| .smooth-scroll { | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| /* תיקון כפתורים ב-iOS */ | |
| button, a { | |
| cursor: pointer; | |
| /* מניעת השהיה ב-iOS */ | |
| -webkit-user-select: none; | |
| user-select: none; | |
| } | |
| /* תיקון input focus ב-iOS */ | |
| input:focus, textarea:focus, select:focus { | |
| outline: none; | |
| } | |
| /* תיקון viewport עבור iPhone Notch */ | |
| @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3), | |
| only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2), | |
| only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3), | |
| only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3), | |
| only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) { | |
| .safe-area-padding { | |
| padding-top: env(safe-area-inset-top); | |
| padding-bottom: env(safe-area-inset-bottom); | |
| padding-left: env(safe-area-inset-left); | |
| padding-right: env(safe-area-inset-right); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="safe-area-padding"> | |
| <!-- ניווט מתקדם עם התאמות למובייל --> | |
| <nav class="fixed w-full z-50 bg-opacity-90 backdrop-blur-md bg-gray-900 shadow-lg safe-area-padding"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="glow rounded-full p-1"> | |
| <div class="h-10 w-10 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-atom text-white text-xl"></i> | |
| </div> | |
| </div> | |
| <span class="mr-3 text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-200">TECHSPACE</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-4 space-x-reverse"> | |
| <a href="#about" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-gray-800">אודות</a> | |
| <a href="#courses" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-gray-800">קורסים</a> | |
| <a href="#testimonials" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-gray-800">לקוחות</a> | |
| <a href="#contact" class="text-white bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md text-sm font-medium transition duration-300 hover:shadow-lg">צור קשר</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- תפריט מובייל עם התאמות למסכים קטנים --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-900 safe-area-padding" style="padding-top: env(safe-area-inset-top);"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#about" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">אודות</a> | |
| <a href="#courses" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">קורסים</a> | |
| <a href="#testimonials" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">לקוחות</a> | |
| <a href="#contact" class="text-white bg-blue-600 hover:bg-blue-700 block px-3 py-2 rounded-md text-base font-medium">צור קשר</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section עם התאמות למובייל --> | |
| <section class="hero-gradient pt-32 pb-20 px-4 sm:px-6 lg:px-8 safe-area-padding" style="padding-top: calc(6rem + env(safe-area-inset-top));"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mt-10 md:mt-0 text-center md:text-right"> | |
| <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6"> | |
| <span class="typewriter block">העתיד מתחיל כאן</span> | |
| </h1> | |
| <p class="text-lg sm:text-xl md:text-2xl text-blue-100 mb-8 max-w-lg mx-auto md:mr-0"> | |
| קורסים וסדנאות טכנולוגיות שיעבירו אותך לשלב הבא בקריירה | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center md:justify-end space-y-4 sm:space-y-0 sm:space-x-4 sm:space-x-reverse"> | |
| <a href="#courses" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 sm:px-8 sm:py-4 rounded-lg text-base sm:text-lg font-semibold shadow-lg transition duration-300 transform hover:scale-105 active:scale-95"> | |
| גלה את הקורסים שלנו | |
| </a> | |
| <a href="#contact" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 sm:px-8 sm:py-4 rounded-lg text-base sm:text-lg font-semibold transition duration-300 transform hover:scale-105 active:scale-95"> | |
| דבר איתנו | |
| </a> | |
| </div> | |
| </div> | |
| <div class="hidden md:block md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute -top-10 -right-10 w-64 h-64 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> | |
| <div class="absolute -bottom-10 -left-10 w-64 h-64 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> | |
| <div class="relative floating"> | |
| <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tech Course" class="rounded-2xl shadow-2xl border-4 border-white transform rotate-3"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- סעיף אודות עם התאמות למובייל --> | |
| <section id="about" class="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12 sm:mb-16"> | |
| <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">מי אנחנו?</h2> | |
| <div class="w-16 sm:w-20 h-1 bg-blue-500 mx-auto mb-6"></div> | |
| <p class="text-lg sm:text-xl text-gray-300 max-w-3xl mx-auto"> | |
| אנחנו חלוצים בעולם הטכנולוגי, מביאים לך את הידע המעודכן והמתקדם ביותר בתעשייה. הקורסים שלנו מעוצבים במיוחד כדי לתת לך את הכישורים הדרושים להצלחה בעולם הדיגיטלי המשתנה במהירות. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 mt-8 sm:mt-12"> | |
| <div class="bg-gray-800 p-6 sm:p-8 rounded-xl card-hover text-center"> | |
| <div class="text-blue-400 text-4xl sm:text-5xl mb-4"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3 class="text-xl sm:text-2xl font-bold mb-3">למידה מעשית</h3> | |
| <p class="text-gray-300 text-sm sm:text-base"> | |
| לא רק תיאוריה - תרגול מעשי עם פרויקטים אמיתיים שייתנו לך ניסיון מעשי כבר במהלך הקורס. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 p-6 sm:p-8 rounded-xl card-hover text-center"> | |
| <div class="text-blue-400 text-4xl sm:text-5xl mb-4"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| <h3 class="text-xl sm:text-2xl font-bold mb-3">מרצים מובילים</h3> | |
| <p class="text-gray-300 text-sm sm:text-base"> | |
| לומדים מהטובים ביותר - צוות המרצים שלנו מגיע עם ניסיון תעשייתי עשיר והיכרות מעמיקה עם השוק. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 p-6 sm:p-8 rounded-xl card-hover text-center"> | |
| <div class="text-blue-400 text-4xl sm:text-5xl mb-4"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| <h3 class="text-xl sm:text-2xl font-bold mb-3">השמה בקריירה</h3> | |
| <p class="text-gray-300 text-sm sm:text-base"> | |
| לא מסתיים עם התעודה - אנחנו עוזרים לך למצוא את העבודה הבאה שלך עם שירותי השמה ייעודיים. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-12 sm:mt-16 grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4 text-center"> | |
| <div class="bg-gray-800 p-4 sm:p-6 rounded-lg"> | |
| <div class="text-blue-400 text-3xl sm:text-4xl font-bold mb-2"> | |
| <span class="counter" data-target="1500">0</span>+ | |
| </div> | |
| <div class="text-gray-300 text-xs sm:text-sm uppercase tracking-wider">סטודנטים</div> | |
| </div> | |
| <div class="bg-gray-800 p-4 sm:p-6 rounded-lg"> | |
| <div class="text-blue-400 text-3xl sm:text-4xl font-bold mb-2"> | |
| <span class="counter" data-target="98">0</span>% | |
| </div> | |
| <div class="text-gray-300 text-xs sm:text-sm uppercase tracking-wider">הצלחה</div> | |
| </div> | |
| <div class="bg-gray-800 p-4 sm:p-6 rounded-lg"> | |
| <div class="text-blue-400 text-3xl sm:text-4xl font-bold mb-2"> | |
| <span class="counter" data-target="25">0</span>+ | |
| </div> | |
| <div class="text-gray-300 text-xs sm:text-sm uppercase tracking-wider">קורסים</div> | |
| </div> | |
| <div class="bg-gray-800 p-4 sm:p-6 rounded-lg"> | |
| <div class="text-blue-400 text-3xl sm:text-4xl font-bold mb-2"> | |
| <span class="counter" data-target="50">0</span>+ | |
| </div> | |
| <div class="text-gray-300 text-xs sm:text-sm uppercase tracking-wider">חברות שותפות</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- סעיף הקורסים עם התאמות למובייל --> | |
| <section id="courses" class="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12 sm:mb-16"> | |
| <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">הקורסים שלנו</h2> | |
| <div class="w-16 sm:w-20 h-1 bg-blue-500 mx-auto mb-6"></div> | |
| <p class="text-lg sm:text-xl text-gray-300 max-w-3xl mx-auto"> | |
| בחר מתוך מגוון הקורסים שלנו שתוכננו בקפידה כדי לענות על הצרכים של השוק הטכנולוגי המשתנה. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8"> | |
| <!-- קורס 1 --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden shadow-lg card-hover transform transition duration-500 hover:shadow-xl"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Full Stack Development" class="w-full h-40 sm:h-48 object-cover"> | |
| <div class="absolute top-3 sm:top-4 left-3 sm:left-4 bg-blue-600 text-white text-xs font-bold px-2 sm:px-3 py-0.5 sm:py-1 rounded-full"> | |
| פופולרי | |
| </div> | |
| </div> | |
| <div class="p-4 sm:p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-lg sm:text-xl font-bold">פיתוח Full Stack</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-0.5 rounded">חדש!</span> | |
| </div> | |
| <p class="text-gray-400 text-sm sm:text-base mb-3 sm:mb-4"> | |
| קורס מקיף שיכשיר אותך להיות מפתח Full Stack עם ידע ב-React, Node.js ומסדי נתונים. | |
| </p> | |
| <div class="flex items-center text-yellow-400 mb-3 sm:mb-4"> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star-half-alt text-sm sm:text-base"></i> | |
| <span class="text-gray-400 text-xs sm:text-sm mr-2">(4.8)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-gray-400 line-through text-xs sm:text-sm">₪8,900</span> | |
| <span class="text-lg sm:text-xl font-bold text-white">₪6,900</span> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition duration-300 active:scale-95"> | |
| פרטים נוספים | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- קורס 2 --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden shadow-lg card-hover transform transition duration-500 hover:shadow-xl"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="Data Science" class="w-full h-40 sm:h-48 object-cover"> | |
| </div> | |
| <div class="p-4 sm:p-6"> | |
| <h3 class="text-lg sm:text-xl font-bold mb-2">מדע נתונים ובינה מלאכותית</h3> | |
| <p class="text-gray-400 text-sm sm:text-base mb-3 sm:mb-4"> | |
| הכשרה מעמיקה בעיבוד נתונים, למידת מכונה ובינה מלאכותית עם Python ו-TensorFlow. | |
| </p> | |
| <div class="flex items-center text-yellow-400 mb-3 sm:mb-4"> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <span class="text-gray-400 text-xs sm:text-sm mr-2">(5.0)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-lg sm:text-xl font-bold text-white">₪7,500</span> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition duration-300 active:scale-95"> | |
| פרטים נוספים | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- קורס 3 --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden shadow-lg card-hover transform transition duration-500 hover:shadow-xl"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Cyber Security" class="w-full h-40 sm:h-48 object-cover"> | |
| <div class="absolute top-3 sm:top-4 left-3 sm:left-4 bg-red-600 text-white text-xs font-bold px-2 sm:px-3 py-0.5 sm:py-1 rounded-full"> | |
| מוגבל | |
| </div> | |
| </div> | |
| <div class="p-4 sm:p-6"> | |
| <h3 class="text-lg sm:text-xl font-bold mb-2">אבטחת סייבר מתקדמת</h3> | |
| <p class="text-gray-400 text-sm sm:text-base mb-3 sm:mb-4"> | |
| קורס ייחודי המכשיר מומחי אבטחת מידע עם ידע מעשי בהגנה מפני איומי סייבר. | |
| </p> | |
| <div class="flex items-center text-yellow-400 mb-3 sm:mb-4"> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="far fa-star text-sm sm:text-base"></i> | |
| <span class="text-gray-400 text-xs sm:text-sm mr-2">(4.2)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-lg sm:text-xl font-bold text-white">₪9,900</span> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition duration-300 active:scale-95"> | |
| פרטים נוספים | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8 sm:mt-12"> | |
| <a href="#contact" class="inline-flex items-center text-blue-400 hover:text-blue-300 text-base sm:text-lg font-medium"> | |
| רוצה קורס מותאם אישית? דבר איתנו | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- סעיף המלצות עם התאמות למובייל --> | |
| <section id="testimonials" class="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12 sm:mb-16"> | |
| <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">מה אומרים עלינו?</h2> | |
| <div class="w-16 sm:w-20 h-1 bg-blue-500 mx-auto mb-6"></div> | |
| <p class="text-lg sm:text-xl text-gray-300 max-w-3xl mx-auto"> | |
| אל תסמכו רק על המילים שלנו - הנה מה שהתלמידים והלקוחות שלנו חושבים. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8"> | |
| <div class="bg-gray-800 p-6 sm:p-8 rounded-xl card-hover"> | |
| <div class="flex items-center mb-3 sm:mb-4"> | |
| <img class="w-10 sm:w-12 h-10 sm:h-12 rounded-full mr-3 sm:mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Testimonial"> | |
| <div> | |
| <h4 class="font-bold text-base sm:text-lg">שרה לוי</h4> | |
| <p class="text-blue-400 text-xs sm:text-sm">בוגרת קורס Full Stack</p> | |
| </div> | |
| </div> | |
| <div class="text-yellow-400 mb-3 sm:mb-4"> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| </div> | |
| <p class="text-gray-300 text-sm sm:text-base"> | |
| "הקורס שינה את הקריירה שלי! תוך 3 חודשים מסיום הקורס כבר התחלתי לעבוד כמפתחת Full Stack בחברת הייטק מובילה. הצוות המקצועי והליווי האישי עשו את כל ההבדל." | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 p-6 sm:p-8 rounded-xl card-hover"> | |
| <div class="flex items-center mb-3 sm:mb-4"> | |
| <img class="w-10 sm:w-12 h-10 sm:h-12 rounded-full mr-3 sm:mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial"> | |
| <div> | |
| <h4 class="font-bold text-base sm:text-lg">דוד כהן</h4> | |
| <p class="text-blue-400 text-xs sm:text-sm">בוגר קורס אבטחת סייבר</p> | |
| </div> | |
| </div> | |
| <div class="text-yellow-400 mb-3 sm:mb-4"> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star-half-alt text-sm sm:text-base"></i> | |
| </div> | |
| <p class="text-gray-300 text-sm sm:text-base"> | |
| "כמישהו ללא רקע טכנולוגי, חששתי מאוד מלהצטרף לקורס. אבל השיטה הייחודית שלהם והתרגולים המעשיים הפכו את הלמידה להרבה יותר קלה ממה שציפיתי. היום אני עובד בחברת סייבר ומודה על ההזדמנות." | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 p-6 sm:p-8 rounded-xl card-hover"> | |
| <div class="flex items-center mb-3 sm:mb-4"> | |
| <img class="w-10 sm:w-12 h-10 sm:h-12 rounded-full mr-3 sm:mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Testimonial"> | |
| <div> | |
| <h4 class="font-bold text-base sm:text-lg">נעמה אברהם</h4> | |
| <p class="text-blue-400 text-xs sm:text-sm">מנהלת משאבי אנוש, TechSolutions</p> | |
| </div> | |
| </div> | |
| <div class="text-yellow-400 mb-3 sm:mb-4"> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| <i class="fas fa-star text-sm sm:text-base"></i> | |
| </div> | |
| <p class="text-gray-300 text-sm sm:text-base"> | |
| "אנחנו מגייסים באופן קבוע בוגרים מהמכון הזה. רמת ההכשרה שהם מקבלים גבוהה בהרבה ממה שראינו במקומות אחרים. הבוגרים מגיעים מוכנים לעבודה עם כישורים מעשיים שמתאימים בדיוק לצרכים שלנו." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- סעיף הרשמה לקורס עם התאמות למובייל --> | |
| <section class="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-900 to-indigo-900"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 sm:mb-6">מוכן לקפוץ למים?</h2> | |
| <p class="text-lg sm:text-xl text-blue-200 mb-6 sm:mb-8"> | |
| השאר את הפרטים וניצור איתך קשר כדי להתאים לך את הקורס המושלם לצרכים שלך. | |
| </p> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-md rounded-xl p-6 sm:p-8 shadow-xl"> | |
| <form id="courseForm" class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6"> | |
| <div> | |
| <label for="name" class="block text-left text-blue-200 mb-1 sm:mb-2 text-sm sm:text-base">שם מלא</label> | |
| <input type="text" id="name" name="name" required class="w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg bg-white bg-opacity-20 border border-blue-300 focus:border-blue-500 focus:outline-none text-white placeholder-blue-200 text-sm sm:text-base"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-left text-blue-200 mb-1 sm:mb-2 text-sm sm:text-base">אימייל</label> | |
| <input type="email" id="email" name="email" required class="w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg bg-white bg-opacity-20 border border-blue-300 focus:border-blue-500 focus:outline-none text-white placeholder-blue-200 text-sm sm:text-base"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-left text-blue-200 mb-1 sm:mb-2 text-sm sm:text-base">טלפון</label> | |
| <input type="tel" id="phone" name="phone" required class="w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg bg-white bg-opacity-20 border border-blue-300 focus:border-blue-500 focus:outline-none text-white placeholder-blue-200 text-sm sm:text-base"> | |
| </div> | |
| <div> | |
| <label for="course" class="block text-left text-blue-200 mb-1 sm:mb-2 text-sm sm:text-base">קורס שמעניין אותך</label> | |
| <select id="course" name="course" class="w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg bg-white bg-opacity-20 border border-blue-300 focus:border-blue-500 focus:outline-none text-white text-sm sm:text-base"> | |
| <option value="" disabled selected>בחר קורס</option> | |
| <option value="fullstack">פיתוח Full Stack</option> | |
| <option value="datascience">מדע נתונים ובינה מלאכותית</option> | |
| <option value="cyber">אבטחת סייבר מתקדמת</option> | |
| <option value="other">אחר - אשמח לשיחה</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="message" class="block text-left text-blue-200 mb-1 sm:mb-2 text-sm sm:text-base">הודעה (לא חובה)</label> | |
| <textarea id="message" name="message" rows="3" class="w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg bg-white bg-opacity-20 border border-blue-300 focus:border-blue-500 focus:outline-none text-white placeholder-blue-200 text-sm sm:text-base"></textarea> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <button type="submit" class="w-full bg-white text-blue-800 hover:bg-blue-100 px-6 py-3 sm:px-8 sm:py-4 rounded-lg text-base sm:text-lg font-semibold shadow-lg transition duration-300 transform hover:scale-105 active:scale-95"> | |
| שלח פרטים | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- סעיף יצירת קשר עם התאמות למובייל --> | |
| <section id="contact" class="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12 sm:mb-16"> | |
| <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">צור קשר</h2> | |
| <div class="w-16 sm:w-20 h-1 bg-blue-500 mx-auto mb-6"></div> | |
| <p class="text-lg sm:text-xl text-gray-300 max-w-3xl mx-auto"> | |
| יש לך שאלות? רוצה לשמוע עוד? אנחנו כאן כדי לעזור. צור איתנו קשר בכל דרך שנוחה לך. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8"> | |
| <div class="bg-gray-900 p-6 sm:p-8 rounded-xl card-hover text-center"> | |
| <div class="text-blue-400 text-3xl sm:text-4xl mb-3 sm:mb-4"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <h3 class="text-lg sm:text-xl font-bold mb-1 sm:mb-2">טלפון</h3> | |
| <p class="text-gray-300 text-sm sm:text-base mb-1 sm:mb-2"> | |
| זמינים בימים א'-ה' בין 8:00-18:00 | |
| </p> | |
| <a href="tel:+972501234567" class="text-blue-400 hover:text-blue-300 text-base sm:text-lg font-medium">050-123-4567</a> | |
| </div> | |
| <div class="bg-gray-900 p-6 sm:p-8 rounded-xl card-hover text-center"> | |
| <div class="text-blue-400 text-3xl sm:text-4xl mb-3 sm:mb-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <h3 class="text-lg sm:text-xl font-bold mb-1 sm:mb-2">אימייל</h3> | |
| <p class="text-gray-300 text-sm sm:text-base mb-1 sm:mb-2"> | |
| נענה תוך 24 שעות בימים עסקיים | |
| </p> | |
| <a href="mailto:[email protected]" class="text-blue-400 hover:text-blue-300 text-base sm:text-lg font-medium">[email protected]</a> | |
| </div> | |
| <div class="bg-gray-900 p-6 sm:p-8 rounded-xl card-hover text-center"> | |
| <div class="text-blue-400 text-3xl sm:text-4xl mb-3 sm:mb-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <h3 class="text-lg sm:text-xl font-bold mb-1 sm:mb-2">מיקום</h3> | |
| <p class="text-gray-300 text-sm sm:text-base mb-1 sm:mb-2"> | |
| רחוב הטכנולוגיה 15, תל אביב | |
| </p> | |
| <a href="https://maps.google.com" target="_blank" class="text-blue-400 hover:text-blue-300 text-base sm:text-lg font-medium">פתח במפות</a> | |
| </div> | |
| </div> | |
| <div class="mt-8 sm:mt-12 bg-gray-900 rounded-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3381.998775621618!2d34.78121531516391!3d32.08588198120833!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151d4b8f3370a3a1%3A0x4b5a5c7a5b5a5c7a!2sTel%20Aviv!5e0!3m2!1sen!2sil!4v1620000000000!5m2!1sen!2sil" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" class="h-64 sm:h-80 md:h-full"></iframe> | |
| </div> | |
| <div class="md:w-1/2 p-4 sm:p-6 md:p-8"> | |
| <h3 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">שלח לנו הודעה</h3> | |
| <form class="space-y-3 sm:space-y-4"> | |
| <div> | |
| <input type="text" placeholder="שם מלא" class="w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-blue-500 focus:outline-none text-white placeholder-gray-400 text-sm sm:text-base"> | |
| </div> | |
| <div> | |
| <input type="email" placeholder="אימייל" class="w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-blue-500 focus:outline-none text-white placeholder-gray-400 text-sm sm:text-base"> | |
| </div> | |
| <div> | |
| <textarea rows="3" placeholder="ההודעה שלך" class="w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-blue-500 focus:outline-none text-white placeholder-gray-400 text-sm sm:text-base"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 sm:px-6 py-2 sm:py-3 rounded-lg text-base sm:text-lg font-medium transition duration-300 active:scale-95"> | |
| שלח הודעה | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- פוטר עם התאמות למובייל --> | |
| <footer class="bg-gray-900 py-8 sm:py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 sm:gap-8"> | |
| <div> | |
| <div class="flex items-center mb-3 sm:mb-4"> | |
| <div class="h-8 sm:h-10 w-8 sm:w-10 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-atom text-white text-lg sm:text-xl"></i> | |
| </div> | |
| <span class="mr-2 sm:mr-3 text-lg sm:text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-200">TECHSPACE</span> | |
| </div> | |
| <p class="text-gray-400 text-sm sm:text-base"> | |
| מובילים את הדור הבא של המומחים הטכנולוגיים עם הכשרות מעשיות ומקצועיות. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-base sm:text-lg font-semibold text-white mb-2 sm:mb-4">קישורים מהירים</h4> | |
| <ul class="space-y-1 sm:space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300 text-sm sm:text-base">אודות</a></li> | |
| <li><a href="#courses" class="text-gray-400 hover:text-white transition duration-300 text-sm sm:text-base">קורסים</a></li> | |
| <li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300 text-sm sm:text-base">לקוחות</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300 text-sm sm:text-base">צור קשר</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-base sm:text-lg font-semibold text-white mb-2 sm:mb-4">קורסים פופולריים</h4> | |
| <ul class="space-y-1 sm:space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm sm:text-base">Full Stack Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm sm:text-base">Data Science & AI</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm sm:text-base">Cyber Security</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm sm:text-base">Cloud Computing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-base sm:text-lg font-semibold text-white mb-2 sm:mb-4">עקבו אחרינו</h4> | |
| <div class="flex space-x-3 sm:space-x-4 space-x-reverse"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-lg sm:text-xl"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-lg sm:text-xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-lg sm:text-xl"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-lg sm:text-xl"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| <div class="mt-4 sm:mt-6"> | |
| <h5 class="text-xs sm:text-sm font-semibold text-gray-400 mb-1 sm:mb-2">הורידו את האפליקציה שלנו</h5> | |
| <div class="flex space-x-2 sm:space-x-3 space-x-reverse"> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg flex items-center"> | |
| <i class="fab fa-apple text-xs sm:text-sm mr-1 sm:mr-2"></i> | |
| <span class="text-xs sm:text-sm">App Store</span> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg flex items-center"> | |
| <i class="fab fa-google-play text-xs sm:text-sm mr-1 sm:mr-2"></i> | |
| <span class="text-xs sm:text-sm">Play Store</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 sm:mt-12 pt-6 sm:pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-xs sm:text-sm"> | |
| © 2023 TechSpace. כל הזכויות שמורות. | |
| </p> | |
| <div class="flex space-x-4 sm:space-x-6 space-x-reverse mt-3 sm:mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white text-xs sm:text-sm transition duration-300">תנאי שימוש</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xs sm:text-sm transition duration-300">מדיניות פרטיות</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xs sm:text-sm transition duration-300">עוגיות</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- כפתור חזרה למעלה עם התאמות למובייל --> | |
| <button id="backToTop" class="fixed bottom-6 sm:bottom-8 left-4 sm:left-8 bg-blue-600 text-white w-10 h-10 sm:w-12 sm:h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition duration-300 opacity-0 invisible active:scale-95"> | |
| <i class="fas fa-arrow-up text-sm sm:text-base"></i> | |
| </button> | |
| <script> | |
| // תפריט מובייל | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // סקריפט לספירת מספרים | |
| const counters = document.querySelectorAll('.counter'); | |
| const speed = 200; | |
| function animateCounters() { | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(animateCounters, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }); | |
| } | |
| // הפעלת ספירת מספרים כאשר מגיעים לסעיף | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounters(); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| const statsSection = document.querySelector('#about'); | |
| if (statsSection) { | |
| observer.observe(statsSection); | |
| } | |
| // כפתור חזרה למעלה | |
| const backToTopButton = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // שליחת טופס | |
| const courseForm = document.getElementById('courseForm'); | |
| courseForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // כאן תהיה הלוגיקה לשליחת הטופס לשרת | |
| alert('תודה על פנייתך! ניצור איתך קשר בהקדם.'); | |
| courseForm.reset(); | |
| }); | |
| // תיקון בעיות ספציפיות ל-iOS | |
| if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) { | |
| // תיקון בעיות ספציפיות ל-iOS | |
| document.querySelectorAll('input, textarea, select').forEach(el => { | |
| el.style.fontSize = '16px'; // מניעת זום אוטומטי ב-iOS | |
| }); | |
| // תיקון בעיות גלילה ב-iOS | |
| document.body.style.overflow = 'auto'; | |
| document.body.style['-webkit-overflow-scrolling'] = 'touch'; | |
| } | |
| // תיקון בעיות ספציפיות ל-Android | |
| if (navigator.userAgent.match(/Android/i)) { | |
| // תיקון בעיות input ב-Android | |
| document.querySelectorAll('input, textarea, select').forEach(el => { | |
| el.style.minHeight = '0'; // מניעת בעיות גובה | |
| }); | |
| } | |
| </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=theWitcher/sagi2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |