File size: 44,889 Bytes
2732d26 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 | <!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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&family=Assistant:wght@300;400;700&display=swap');
body {
font-family: 'Assistant', sans-serif;
}
.hero-bg {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.language-badge {
transition: all 0.3s ease;
}
.language-badge:hover {
transform: scale(1.1);
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.rtl {
direction: rtl;
}
.ltr {
direction: ltr;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-xl font-bold text-blue-600">讗诇讚讬谉</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4 space-x-reverse">
<a href="#home" class="text-blue-600 hover:text-blue-800 px-3 py-2 rounded-md text-sm font-medium">讘讬转</a>
<a href="#about" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">讗讜讚讜转</a>
<a href="#services" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">砖讬专讜转讬诐</a>
<a href="#testimonials" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">讛诪诇诇爪讜转</a>
<a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">讬爪讬专转 拽砖专</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">砖讬注讜专 谞讬住讬讜谉</a>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" class="bg-gray-100 inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-gray-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="hidden md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 rtl">
<a href="#home" class="text-blue-600 block px-3 py-2 rounded-md text-base font-medium">讘讬转</a>
<a href="#about" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">讗讜讚讜转</a>
<a href="#services" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">砖讬专讜转讬诐</a>
<a href="#testimonials" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">讛诪诇诇爪讜转</a>
<a href="#contact" class="text-gray-700 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">讬爪讬专转 拽砖专</a>
<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white block px-3 py-2 rounded-md text-base font-medium text-center">砖讬注讜专 谞讬住讬讜谉</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-bg text-white py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 rtl">
<h1 class="text-4xl md:text-5xl font-bold mb-4">砖讬注讜专讬诐 驻专 驻专讟讬讬诐 讘诪转诪讟讬拽讛 讜 讜驻讬讝讬拽讛</h1>
<p class="text-xl mb-8">注诐 讛诪讜专讛 讗诇讚讬谉 - 诪讜 诪讜诪讞讛 诇讛讜专讗转 诪转诪讟讬拽讛 讜驻讬讝讬拽讛 讘专诪讜转 砖讜谞讜转</p>
<div class="flex flex-wrap gap-3 mb-8">
<span class="language-badge bg-white text-blue-600 px-4 py-1 rounded-full font-medium">注讘专讬转</span>
<span class="language-badge bg-white text-blue-600 px-4 py-1 rounded-full font-medium">Espa帽ol</span>
<span class="language-badge bg-white text-blue-600 px-4 py-1 rounded-full font-medium">English</span>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#contact" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold text-center transition duration-300">讛讛转讞诇 诇诇 诇诇诪讜讚</a>
<a href="#services" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-bold text-center transition duration-300">诇诪讬讚注 谞讜住 谞讜住祝</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative w-64 h-64 md:w-80 md:h-80">
<div class="absolute inset-0 bg-white bg-opacity-20 rounded-full"></div>
<div class="absolute inset-4 bg-white bg-opacity-20 rounded-full"></div>
<div class="absolute inset-8 bg-white bg-opacity-20 rounded-full"></div>
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Teacher Aldin" class="absolute inset-0 w-full h-full object-cover rounded-full border-4 border-white floating">
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 rtl">
<h2 class="text-3xl font-bold text-gray-900 mb-4">诪讬 讗谞讬?</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">诪讜专讛 诪谞讜住讛 讜诪住讜专 注诐 转 转砖讜拽讛 诇讛讜专讗转 诪转诪讟讬拽讛 讜驻讬讝讬拽讛. 讗谞讬 诪讗诪讬谉 砖诇 砖诇讻诇 转诇诪讬讚 讬砖 讗转 讛讬讻讜诇转 诇讛讘讬谉 讜诇讛 讜诇讛爪诇讬讞 讘诪讚注讬诐 诪讚讜讬拽讬诐.</p>
</div>
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="md:w-1/2">
<img src="https://images.unsplash.com/photo-1606326608606-aa0b62935f2b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Teaching" class="rounded-lg shadow-xl w-full h-auto">
</div>
<div class="md:w-1/2 rtl">
<h3 class="text-2xl font-bold text-gray-900 mb-6">讛讛谞讬住讬讜谉 讜讛 讜讛讛砖讻诇讛 砖诇讬</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-graduation-cap text-blue-600"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">转讜讗专 砖谞讬 讘驻讬讝讬拽讛</h4>
<p class="text-gray-600">讗讜谞讬讘专住讬讟转 转诇 讗讘讬讘, 讛转 讛转诪讞讜转 讘驻讬讝讬拽讛 转讬讗讜专讟讬转</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-chalkboard-teacher text-blue-600"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">10+ 砖 砖谞讜转 谞讬住讬讜谉 讘讛讜专讗讛</h4>
<p class="text-gray-600">讛讜专讗转 诪转诪讟讬拽讛 讜驻讬讝讬拽讛 讘 讘讘转讬 住驻专 转讬讻讜谞讬讬诐 讜讘 讜讘诪住讙专讜转 驻专讟讬讜转</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-globe-americas text-blue-600"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">砖讬注讜专讬诐 讘砖诇讜砖 砖 砖驻讜转</h4>
<p class="text-gray-600">注讘专讬转, 住 住驻专讚讬转 讜讗 讜讗谞讙诇讬转 讘专诪转 砖驻转 讗诐</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-users text-blue-600"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">讙讬砖讛 讗讬砖讬转</h4>
<p class="text-gray-600">讛讛转讗诪转 砖讬讟转 讛讛讜专讗讛 诇爪专讻讬讜 讜诇讬讻讜诇讜转讬讜 砖诇 讻诇 转诇诪讬讚</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-50">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 rtl">
<h2 class="text-3xl font-bold text-gray-900 mb-4">讛讛砖讬专讜转讬诐 砖诇讬</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">讗讗谞讬 诪爪讬注 诪讙讜讜谉 砖讬专讜转讬诐 讛 讛诪讜转讗讗诪讬诐 诇爪专讻讬诐 砖讜谞讬诐 砖诇 转诇诪讬讚讬诐 讘讻诇 讛专诪讜转</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300 rtl">
<div class="text-blue-600 mb-4">
<i class="fas fa-calculator text-4xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">砖讬注讜专讬 诪转诪讟讬拽讛</h3>
<p class="text-gray-600 mb-6">砖讬注讜专讬诐 驻专讟讬讬诐 讘诪 讘诪转诪讟讬拽讛 诇讻诇 讛专诪讜转 - 诪 诪讞讟讬讘转 讘讬谞讬讬诐 讜注讚 讛讻 讛讻谞讛 诇讘 诇讘讙专讜转 5 讬讞讬讚讜转. 讟讬驻讜诇 讘 讘驻注专讬诐, 砖讬驻讜专 爪讬讜谞讬诐 讜讛 讜讛讻谞讛 诇诪讘讞谞讬诐.</p>
<ul class="space-y-2 text-gray-600 mb-6">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
讗诇讙讘专讛
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
讙讬讗讜诪讟专讬讛
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
讞讚讜"讗
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
讛住转讘专讜转
</li>
</ul>
</div>
<!-- Service 2 -->
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300 rtl">
<div class="text-blue-600 mb-4">
<i class="fas fa-atom text-4xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">砖讬注讜专讬 驻讬讝讬拽讛</h3>
<p class="text-gray-600 mb-6">讛讜专讗讛 诪讜转讗讗诪转 讗讬砖讬转 讘驻讬讝讬拽讛 - 诪 诪讻谞讬拽讛, 讞 讞砖诪诇, 诪讙谞讟讬讜转, 讗讜驻讜驻讟讬拽讛 讜转讜专转 讛拽讜讜谞讜谞讟讬诐. 讛讻谞讛 诇讘讙专讜转 讜讛讻谞讛 诇诇讬诪讜讚讬诐 讗 讗拽讚诪讬讬诐.</p>
<ul class="space-y-2 text-gray-600 mb-6">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
诪 诪讻谞讬拽讛 拽诇讗住讬转
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
讗诇 讗诇拽讟专讜诪讙谞讟讬讜转
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
转专专诪讜讚讬谞讬谞诪讬拽讛
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
驻讬讝讬拽讛 诪讜讚专谞讬转
</li>
</ul>
</div>
<!-- Service 3 -->
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300 rtl">
<div class="text-blue-600 mb-4">
<i class="fas fa-laptop-code text-4xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">砖讬注讜专讬诐 诪拽讜讜谞讬诐</h3>
<p class="text-gray-600 mb-6">砖讬注讜专讬诐 讗讜谞诇讬讬谉 讗讬谞讟专讗拽讟讬讘讬讬诐 讘讗诪爪注讜转 驻诇讟驻讜专诪讜转 诪转 诪转拽讚诪讜转. 讙诪讬砖讜转 诪诇 诪诇讗讛 诪讘 诪讘讞讬谞转 诪讬拽讜诐 讜砖 讜砖注讜转, 注诐 讻诇 讛讬转专讜谞讜转 砖诇 砖讬注讜专 驻专讜谞讟诇讬.</p>
<ul class="space-y-2 text-gray-600 mb-6">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
诇讜讞 讚讬讙讬讟诇讬 诪砖讜转祝
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
讛拽诇讟转 讛砖讬注讜专讬诐
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
讞讜诪专讬 诇讬诪讜讚 讚讬讙讬讟诇讬讬诐
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
讙讬砖讛 诪 诪讻诇 诪 诪讻砖讬专
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 rtl">
<h2 class="text-3xl font-bold text-gray-900 mb-4">诪讛 讗讜诪专讬诐 讛转诇诪讬讚讬诐 砖诇讬?</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">讛诪诇诇爪讜转 诪转诇诪讬讚讬诐 砖诇 砖诇诪讚讜 讗讬转讬 讘诪 讘诪讛诇讱 讛砖 讛砖谞讬诐</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-md rtl">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-900">谞讜注讛 讻 讻讛谉</h4>
<p class="text-gray-600 text-sm">转诇诪讬讚转 驻讬讝讬拽讛, 5 讬讞"诇</p>
</div>
</div>
<div class="text-gray-700 mb-4">
<i class="fas fa-quote-left text-blue-200 mr-2"></i>
讗诇讚讬谉 讛爪讬诇 诇讬 讗转 讛讘 讛讘讙专讜转 讘驻讬讝讬拽讛! 讗讞专讬 砖谞 砖谞讻砖诇转讬 讘 讘诪讜讜注讚 讗', 讛讜讗 诇讬诪讚 讗讜转讬 讘砖讬讟讛 讻诇 讻讱 讘专讜专讛 讜讛 讜讛讙注转讬 诇 诇诪讜注讚 讘' 注诐 92. 讛讛 讛讛住讘专讬诐 砖诇讜 诪讚讛讬诪讬诐 讜讛讜讗 讬讜讚注 诇讛转 诇讛转讗讬诐 讗转 注爪诪讜 讘 讘讚讬讜拽 诇专专诪讛 砖诇 砖诇讱.
</div>
<div class="flex text-yellow-400">
<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>
<!-- Testimonial 2 -->
<div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-md rtl">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-900">讚谞讬讗诇 讙讜谞讜谞讝诇住</h4>
<p class="text-gray-600 text-sm">住讟讜讚谞谞讟 诇讛 诇讛谞讚住讛</p>
</div>
</div>
<div class="text-gray-700 mb-4">
<i class="fas fa-quote-left text-blue-200 mr-2"></i>
Como estudiante internacional, tuve dificultades con las matem谩ticas en la universidad. Aldin me dio clases en espa帽ol y me ayud贸 a entender conceptos complejos de una manera simple. 隆Gracias a 茅l aprob茅 c谩lculo con una nota excelente!
</div>
<div class="flex text-yellow-400">
<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>
<!-- Testimonial 3 -->
<div class="testimonial-card bg-gray-50 p-6 rounded-lg shadow-md rtl">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-900">砖专讛 诇讜讬</h4>
<p class="text-gray-600 text-sm">讗讗诪讗 砖诇 讚讜讚, 讻讬转讛 讟'</p>
</div>
</div>
<div class="text-gray-700 mb-4">
<i class="fas fa-quote-left text-blue-200 mr-2"></i>
讛讘 讛讘谉 砖诇讬 讛讬讛 诪讗讘讚 诪讜 诪讜讟讬讘讬讘爪讬讛 讘诪转诪讟讬拽讛 注讚 砖讛转讞讬诇 诇诇诪讜讚 注诐 讗诇讚讬谉. 转讜讱 讞讜讚砖讬讬诐 讛讜讗 诇讗 专拽 讛砖讬讙 讗转 讛驻注专讬诐 讗诇讗 讙诐 讛讞诇 诇讗讛讜讘 讗转 讛诪 讛诪拽爪讜注! 讗诇讚讬谉 讬讜讚注 诇讬爪讜专 拽砖专 诪爪讜讬谉 注诐 转诇诪讬讚讬诐 爪注讬专讬诐 讜诇讛 讜诇讛驻讜讱 讗转 讛诇诪讬讚讛 诇讞讜讜讬讛 讞讬讜讘讬转.
</div>
<div class="flex text-yellow-400">
<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>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-50">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 rtl">
<h2 class="text-3xl font-bold text-gray-900 mb-4">爪讜专 拽砖专</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">诪讜讝诪诪谞讬诐 诇讬爪讜专 讗讬转讬 拽砖专 诇讻诇 砖讗诇讛 讗讜 诇拽讘讬注转 砖讬注讜专 谞讬住讬讜谉 诇诇讗 讛转 讛转讞讬讬讘讜转</p>
</div>
<div class="flex flex-col md:flex-row gap-12">
<div class="md:w-1/2 rtl">
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">砖诐 诪诇讗</label>
<input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="讛讝谉 讗转 砖诪讱">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">讗讬诪讬讬诇</label>
<input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="讛讛讝谉 讗转 讻转讜讘转 讛讗讬讬诪讬讬诇 砖诇讱">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">讟诇驻讜谉</label>
<input type="tel" id="phone" name="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="讛讝谉 讗转 诪住驻专 讛讟诇驻讜谉 砖诇 砖诇讱">
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">谞讜砖讗</label>
<select id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
<option value="">讘讞专 谞讜砖讗</option>
<option value="math">砖讬注讜专讬 诪转诪讟讬拽讛</option>
<option value="physics">砖讬注讜专讬 驻讬讝讬拽讛</option>
<option value="online">砖讬注讜专讬诐 诪拽讜讜谞讬诐</option>
<option value="other">讗讞专</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">讛讜讚注讛</label>
<textarea id="message" name="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="讻转讜讘 讗转 讛讜讚注转讱 讻讗谉..."></textarea>
</div>
<div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">砖诇讞 讛讜讚注讛</button>
</div>
</form>
</div>
<div class="md:w-1/2 rtl">
<div class="bg-white p-8 rounded-lg shadow-md h-full">
<h3 class="text-2xl font-bold text-gray-900 mb-6">驻专讟讬 讬爪讬专转 拽砖专</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-phone-alt text-blue-600"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">讟诇驻讜谉</h4>
<p class="text-gray-600">050-1234567</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-envelope text-blue-600"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">讗讬诪讬讬诇</h4>
<p class="text-gray-600">aldin.math.physics@gmail.com</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt text-blue-600"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">诪讬拽讜诐</h4>
<p class="text-gray-600">砖讬注讜专讬诐 驻专讜谞讟诇讬讬诐 讘转诇 讗讘讬讘 讜 讜住讘讬讘讛 讗讜 讗讜谞诇讬讬谉 诪 诪讻诇 诪拽讜诐</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-clock text-blue-600"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900">砖注讜转 驻注讬诇讜转</h4>
<p class="text-gray-600">讗'-讛': 08:00-20:00<br>讜': 08:00-14:00</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="text-lg font-semibold text-gray-900 mb-4">注拽讘讜 讗讞专讬讬 讘专 讘专砖转讜转 讛讞讘专转讬讜转</h4>
<div class="flex space-x-4 space-x-reverse">
<a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition duration-300">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition duration-300">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition duration-300">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="bg-gray-800 text-white p-3 rounded-full hover:bg-gray-900 transition duration-300">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 rtl">
<h2 class="text-3xl font-bold text-gray-900 mb-4">砖讗诇讜转 谞 谞驻讜爪讜转</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">讛讛转砖讜讘讜转 诇 诇砖讗诇讜转 砖讗 砖讗转诐 砖讜讗诇讬诐 讛讻讬 讛专讘讛</p>
</div>
<div class="max-w-3xl mx-auto rtl">
<div class="space-y-6">
<!-- FAQ Item 1 -->
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-btn w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 focus:outline-none">
<h3 class="text-lg font-semibold text-gray-900">讻讻诪讛 讝诪谉 谞 谞诪砖讱 砖讬注讜专 讟讬驻讜住讬?</h3>
<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
</button>
<div class="faq-content hidden px-6 pb-6">
<p class="text-gray-600">砖讬注讜专 住讟谞讚专讟讬 谞 谞诪砖讱 60 讚拽讜转. 注诐 讝讗转, 讗谞讬 诪爪讬注 讙诐 砖讬注讜专讬诐 砖诇 90 讚拽讜转 诇转诇诪讬讚讬诐 砖诪注讜谞讬讬谞讬诐 讘讻讱, 讘 讘诪讬讜讞讚 诇拽专讗转 诪讘讞谞讬诐 讗讜 讻讗砖专 注讜讘讚讬诐 注诇 谞讜砖讗讬诐 诪讜专讻讘讬诐 讬讜转专. 谞讬转谉 诇讛转 诇讛转讗讬诐 讗转 诪砖讱 讛砖讬注讜专 诇爪专讻讬诐 讛讗讬砖讬讬诐 砖诇 讻诇 转诇诪讬讚.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-btn w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 focus:outline-none">
<h3 class="text-lg font-semibold text-gray-900">诪讛 讛诪 讛诪讞讬专 砖诇 砖讬注讜专 驻专讟讬?</h3>
<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
</button>
<div class="faq-content hidden px-6 pb-6">
<p class="text-gray-600">讛诪讞讬专 诪砖转谞讛 讘讛 讘讛转讗诐 诇专专诪转 讛拽讜砖讬 砖诇 讛讞讜诪专 讛谞诇诪讚, 诪砖 诪砖讱 讛砖讬注讜专 讜 讜住讜讙 讛砖讬注讜专 (驻专讜谞讟诇讬/诪诪拽讜讜谉). 讘讗讜驻谉 讻诇诇讬, 诪讞讬专讬 讛砖讬注讜专讬诐 谞注讬诐 讘讬谉 150-250 砖"讞 诇砖讬注讜专 砖诇 60 讚拽讜转. 讗谞讬 诪爪讬注 讛谞 讛谞讞讜转 诇讞讘讬诇讜转 砖诇 诪住驻专 砖讬注讜专讬诐. 谞讬转谉 诇拽讘诇 讛爪注转 诪讞讬专 诪讚讜讬拽转 诇讗讞专 砖讬讞转 讛讬讻专讜转 拽爪专讛 砖讘讛 谞 谞讘讬谉 讗转 讛爪专讻讬诐 讛住 讛住驻爪讬驻讬讬诐.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-btn w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 focus:outline-none">
<h3 class="text-lg font-semibold text-gray-900">讛讗诐 讗 讗转诐 注讜讘讚讬诐 讙诐 注诐 转诇诪讬讚讬诐 注诐 诇拽讜讬讜转 诇 诇诪讬讚讛?</h3>
<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
</button>
<div class="faq-content hidden px-6 pb-6">
<p class="text-gray-600">讻谉, 讬砖 诇讬 谞讬住讬讜谉 专讘 讘注讘讜讚讛 注诐 转诇诪讬讚讬诐 注诐 诇拽讜讬讜转 诇诪讬讚讛 讻 讻讙讜谉 讚讬住诇拽爪讬讛, 讚讬讬住拽诇拽讜诇讬讛, ADHD 讜讗 讜讗讞专讜转. 讗谞讬 诪转讗讬诐 讗转 砖讬讟转 讛讛讜专讗讛 诇爪专讻讬诐 讛住 讛住驻爪讬驻讬讬诐 砖诇 讻诇 转诇诪讬讚, 转讜讱 砖讬诪讜砖 讘讻诇讬诐 讜讬讝讜讗诇讬讬诐, 讚讜讙诪诪讗讜转 诪注砖讬讜转 讜讟讻谞讬拽讜转 讛讜专讗讛 诪讜转讗诪讜转. 讞砖讜讘 诇讬 诇爪讬讬谉 砖诇 砖诇讻诇 转诇诪讬讚 讬砖 讗转 讛讚专讱 讛讬讬讞讜讚讬转 砖诇讜 诇诇 诇诇诪讜讚, 讜讗谞讬 诪砖拽讬注 讝诪谉 讘讛 讘讛讘谞转 讛讚专讱 讛诪转 讛诪转讗讬诪讛 讘讬讜转专 诇讻诇 讗讞讚.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-btn w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 focus:outline-none">
<h3 class="text-lg font-semibold text-gray-900">讻讻诪讛 讝诪谉 诪专 诪专讗砖 爪专讬讱 诇转讗诐 砖讬注讜专?</h3>
<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
</button>
<div class="faq-content hidden px-6 pb-6">
<p class="text-gray-600">讗讗谞讬 诪诪 诪诪诇讬抓 诇转讗诐 砖讬注讜专讬诐 诇驻 诇驻讞讜转 48 砖注讜转 诪专讗砖 讻讚讬 诇讛讘讟讬讞 诪拽讜诐 讘诇讜讞 讛讝诪谞讬诐 砖诇讬. 注诐 讝讗转, 讘诪拽专讬诐 讚讞讜驻讬诐 (讻讙讜谉 注专讘 诇驻谞讬 诪讘讞谉), 讗谞讬 诪砖 诪砖转讚诇 诇诪 诇诪爪讜讗 驻转专讜谉 讜诇 讜诇驻注诪讬诐 谞讬转谉 诇转 诇转讗诐 砖讬注讜专 讙诐 讘讛转专讗讛 拽爪专讛 讬讜转专, 讘讛 讘讛转讗诐 诇讝诪讬谞讜转. 诇转诇诪讬讚讬诐 拽讘讜注讬诐 讬砖 注讚讬驻讜转 讘拽讘讬注转 砖讬注讜专讬诐.</p>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="border border-gray-200 rounded-lg overflow-hidden">
<button class="faq-btn w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 focus:outline-none">
<h3 class="text-lg font-semibold text-gray-900">诪讛 诪讚讬谞讬讜转 讛讘讬讟讜诇讬诐?</h3>
<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
</button>
<div class="faq-content hidden px-6 pb-6">
<p class="text-gray-600">谞讬转谉 诇讘 诇讘讟诇 砖讬注讜专 诇诇讗 转 转砖诇讜诐 注讚 24 砖 砖注讜转 诇驻谞讬 讛诪讜 讛诪讜注讚 讛诪 讛诪转讜讻讜讻谞谉. 讘讬讟讜诇 讘转讜讱 驻 驻讞讜转 诪-24 砖注讜转 讬讞讜讬讘 讘-50% 诪注专讱 讛砖讬注讜专. 讘诪拽专讛 砖诇 讗讬-讛讛转讬讬讬讬爪讘讜转 诇砖讬注讜专 诇诇讗 讛讜讚注讛 诪专 诪专讗砖, 讬讞讜讬讘 诪 诪诇讜讗 住 住讻讜诐 讛砖讬注讜专. 讗谞讬 诪讘讬谉 砖诪 砖诪爪讘讬诐 讘诇转讬 爪驻讜讬讬诐 讬讻讜诇讬诐 诇拽专讜转, 讜诇讻谉 讗 讗砖转讚诇 诇讙诇讜转 讙诪讬砖讜转 讘诪拽专讬诐 诪讬讜讞讚讬诐.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-blue-600 text-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="mb-8 md:mb-0 rtl">
<h2 class="text-2xl md:text-3xl font-bold mb-2">诪讜诪讜讻谉 诇讛转 诇讛转讞讬诇 讗转 讛诪 讛诪住注 讛诪转诪讟讬 砖诇 砖诇讱?</h2>
<p class="text-lg opacity-90">拽拽讘注讜 砖讬注讜专 谞讬住讬讜谉 诇诇讗 讛转 讛转讞讬讬讘讜转 讜转专讗讜 讗转 讛讛 讛讛讘讚诇</p>
</div>
<div>
<a href="#contact" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg transition duration-300 inline-block">讛讛转讞讬诇讜 注讻砖讬讜</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12">
<div class="rtl">
<h3 class="text-xl font-bold mb-4">讗诇讚讬谉</h3>
<p class="text-gray-400">诪讜专讛 驻专 驻专讟讬 诇诪 诇诪转诪讟讬拽讛 讜驻讬讝讬拽讛 注诐 谞讬住讬讜谉 砖诇 诇诪注诇讛 诪注砖讜专 讘讛讜专讗讛 驻专 驻专讟讬转 讜拽讘讜爪转讬转. 诪讜 诪讜诪讞讛 讘讛注讘专转 砖讬注讜专讬诐 讘注讘专讬转, 住 住驻专讚讬转 讜讗 讜讗谞讙诇讬转.</p>
</div>
<div class="rtl">
<h4 class="text-lg font-semibold mb-4">拽讬砖讜专讬诐 诪讛讬专讬诐</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">讘讬转</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">讗讜讚讜转</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">砖讬专讜转讬诐</a></li>
<li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300">讛讛诪诇爪讜转</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">讬爪讬专转 拽砖专</a></li>
</ul>
</div>
<div class="rtl">
<h4 class="text-lg font-semibold mb-4">砖讬专讜转讬诐</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">砖讬注讜专讬 诪转诪讟讬拽讛</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">砖讬注讜专讬 驻讬讝讬拽讛</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">砖讬注讜专讬诐 诪拽讜讜谞讬诐</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">讛讻谞讛 诇讘 诇讘讙专讜讬讜转</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">住讚谞谞讗讜转 拽讬抓</a></li>
</ul>
</div>
<div class="rtl">
<h4 class="text-lg font-semibold mb-4">讬爪讬专转 拽砖专</h4>
<ul class="space-y-2">
<li class="flex items-center">
<i class="fas fa-phone-alt text-gray-400 mr-2"></i>
<span class="text-gray-400">050-1234567</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope text-gray-400 mr-2"></i>
<span class="text-gray-400">aldin.math.physics@gmail.com</span>
</li>
<li class="flex items-center">
<i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
<span class="text-gray-400">转诇 讗讘讬讘, 讬砖专讗诇</span>
</li>
</ul>
<div class="mt-4 flex space-x-4 space-x-reverse">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400 rtl">
<p>漏 2023 讗诇讚讬谉 - 诪讜专讛 驻专讟讬 诇诪转诪讟讬拽讛 讜 讜驻讬讝讬拽讛. 讻诇 讛讝讻讜讬讜转 砖诪讜专讜转.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
if (menu.classList.contains('hidden')) {
menu.classList.remove('hidden');
} else {
menu.classList.add('hidden');
}
});
// FAQ accordion
const faqButtons = document.querySelectorAll('.faq-btn');
faqButtons.forEach(button => {
button.addEventListener('click', () => {
const content = button.nextElementSibling;
const icon = button.querySelector('i');
// Toggle content
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
icon.style.transform = 'rotate(180deg)';
} else {
content.classList.add('hidden');
icon.style.transform = 'rotate(0deg)';
}
});
});
// Form submission
const form = document.querySelector('form');
if (form) {
form.addEventListener('submit', function(e) {
e.preventDefault();
alert('转讜讚讛 注诇 驻 驻谞讬讬转讬转讱! 谞讬爪讜专 讗讬转讱 拽砖专 讘讛拽讚诐.');
form.reset();
});
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
});
});
</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=Baobab/bjhmvekv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |