|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const faqButtons = document.querySelectorAll('.faq-btn'); |
|
|
faqButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const content = button.nextElementSibling; |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
|
|
|
if (content.classList.contains('hidden')) { |
|
|
content.classList.remove('hidden'); |
|
|
icon.style.transform = 'rotate(180deg)'; |
|
|
} else { |
|
|
content.classList.add('hidden'); |
|
|
icon.style.transform = 'rotate(0deg)'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const form = document.querySelector('form'); |
|
|
if (form) { |
|
|
form.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('转讜讚讛 注诇 驻 驻谞讬讬转讬转讱! 谞讬爪讜专 讗讬转讱 拽砖专 讘讛拽讚诐.'); |
|
|
form.reset(); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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> |
