QH SMART AI #3407
Description
<title>QH SMART AI | آموزشیار هوشمند افغان</title>
<style>
:root {
--color-primary: #c0c0c0;
--color-secondary: #909090;
--color-accent: #e0e0e0;
--color-dark: #0a0a0a;
--color-darker: #050505;
--color-light: #f0f0f0;
--color-metal: linear-gradient(135deg, #434343 0%, #c0c0c0 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: 'Tajawal', sans-serif;
background-color: var(--color-dark);
color: var(--color-light);
min-height: 100vh;
line-height: 1.6;
overflow-x: hidden;
background: radial-gradient(circle, #000000 0%, #0a0a0a 100%);
}
.tech-font {
font-family: 'Orbitron', sans-serif;
}
.section {
min-height: 100vh;
padding: 80px 20px;
display: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.section.active {
display: block;
opacity: 1;
}
.gradient-text {
background: linear-gradient(90deg, #c0c0c0, #e0e0e0, #ffffff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 10px rgba(192, 192, 192, 0.3);
}
.gradient-border {
position: relative;
}
.gradient-border::before {
content: '';
position: absolute;
inset: -2px;
z-index: -1;
background: var(--color-metal);
border-radius: inherit;
padding: 2px;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.floating {
animation: floating 8s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-30px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.metallic {
background: linear-gradient(135deg, rgba(67, 67, 67, 0.2) 0%, rgba(192, 192, 192, 0.2) 100%);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(192, 192, 192, 0.2);
position: relative;
overflow: hidden;
}
.pulse {
animation: pulse 3s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(192, 192, 192, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(192, 192, 192, 0); }
100% { box-shadow: 0 0 0 0 rgba(192, 192, 192, 0); }
}
.nav-link {
position: relative;
transition: all 0.3s ease;
color: #c0c0c0;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
background: var(--color-metal);
transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
.nav-link.active {
color: #e0e0e0;
text-shadow: 0 0 8px rgba(224, 224, 224, 0.7);
}
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) translateX(-50%);
}
40% {
transform: translateY(-20px) translateX(-50%);
}
60% {
transform: translateY(-10px) translateX(-50%);
}
}
.feature-panel {
transform: translateY(50px);
opacity: 0;
transition: all 0.6s ease-out;
}
.feature-panel.visible {
transform: translateY(0);
opacity: 1;
}
.tech-card {
transition: all 0.3s ease;
transform: translateY(0);
}
.tech-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
}
.mobile-menu {
transition: transform 0.5s ease;
transform: translateX(100%);
background: linear-gradient(135deg, rgba(10,10,10,0.95) 0%, rgba(30,30,30,0.95) 100%);
backdrop-filter: blur(15px);
border-left: 1px solid rgba(192, 192, 192, 0.2);
}
.mobile-menu.open {
transform: translateX(0);
}
.btn-metal {
background: linear-gradient(135deg, #2c2c2c 0%, #5a5a5a 100%);
border: 1px solid rgba(192, 192, 192, 0.3);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-metal:hover {
background: linear-gradient(135deg, #3a3a3a 0%, #6a6a6a 100%);
box-shadow: 0 0 20px rgba(192, 192, 192, 0.3);
}
.metal-card {
background: linear-gradient(135deg, rgba(30,30,30,0.8) 0%, rgba(50,50,50,0.8) 100%);
border: 1px solid rgba(192, 192, 192, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.metal-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, #c0c0c0, transparent);
}
.metal-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(192, 192, 192, 0.2);
}
@keyframes floatText {
0% { transform: translateY(0); text-shadow: 0 0 5px rgba(192, 192, 192, 0.3); }
50% { transform: translateY(-10px); text-shadow: 0 10px 15px rgba(192, 192, 192, 0.5); }
100% { transform: translateY(0); text-shadow: 0 0 5px rgba(192, 192, 192, 0.3); }
}
.floating-text {
animation: floatText 4s ease-in-out infinite;
}
</style>
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center space-x-8" aria-label="Main navigation">
<a href="#home" class="nav-link active tech-font" data-section="home">
خانه
</a>
<a href="#services" class="nav-link tech-font" data-section="services">
خدمات
</a>
<a href="#about" class="nav-link tech-font" data-section="about">
درباره ما
</a>
<a href="#contact" class="nav-link tech-font" data-section="contact">
تماس
</a>
</nav>
<div class="flex items-center">
<!-- Mobile Menu Button -->
<div class="md:hidden ml-4">
<button id="mobile-menu-button" class="text-silver-300 focus:outline-none" aria-label="Open mobile menu" aria-expanded="false" aria-controls="mobile-menu">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Mobile Navigation Menu -->
<div id="mobile-menu" class="mobile-menu fixed top-0 right-0 h-full w-64 z-50 p-6 shadow-lg" aria-label="Mobile navigation" aria-hidden="true">
<div class="flex justify-end mb-8">
<button id="close-menu" class="text-silver-300 focus:outline-none" aria-label="Close mobile menu">
<i class="fas fa-times text-2xl"></i>
</button>
</div>
<nav class="flex flex-col space-y-6">
<a href="#home" class="nav-link active tech-font text-lg" data-section="home">
خانه
</a>
<a href="#services" class="nav-link tech-font text-lg" data-section="services">
خدمات
</a>
<a href="#about" class="nav-link tech-font text-lg" data-section="about">
درباره ما
</a>
<a href="#contact" class="nav-link tech-font text-lg" data-section="contact">
تماس
</a>
</nav>
<div class="mt-8">
<div class="flex space-x-4">
<a href="https://www.youtube.com/@AfghanTreasures" target="_blank" class="text-silver-300 hover:text-red-500 transition-colors">
<i class="fab fa-youtube text-2xl"></i>
</a>
<a href="https://x.com/QhVision" target="_blank" class="text-silver-300 hover:text-blue-400 transition-colors">
<i class="fab fa-twitter text-2xl"></i>
</a>
<a href="https://www.instagram.com/17841474002610954/" target="_blank" class="text-silver-300 hover:text-pink-500 transition-colors">
<i class="fab fa-instagram text-2xl"></i>
</a>
<a href="https://www.linkedin.com/feed/" target="_blank" class="text-silver-300 hover:text-blue-500 transition-colors">
<i class="fab fa-linkedin-in text-2xl"></i>
</a>
</div>
</div>
</div>
<!-- Main Content -->
<main>
<!-- HOME Section -->
<section id="home" class="section active" aria-labelledby="home-heading">
<div class="container mx-auto px-6 min-h-screen flex flex-col justify-center items-center text-center">
<div class="floating mb-8">
<div class="w-48 h-48 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mx-auto border-4 border-gray-700 shadow-2xl">
<i class="fas fa-brain text-6xl text-silver-400"></i>
</div>
</div>
<h1 id="home-heading" class="text-4xl md:text-6xl font-bold tech-font gradient-text mb-6 floating-text">
QH SMART AI
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl text-silver-300">
هوش مصنوعی پیشرفته برای آموزش و توانمندسازی جوانان افغانستان
</p>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<a href="#services" class="btn-metal px-8 py-3 rounded-full tech-font">
مشاهده خدمات
</a>
<a href="#contact" class="px-8 py-3 rounded-full tech-font border border-silver-500 hover:bg-gray-800 transition-all">
تماس با ما
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl w-full">
<div class="metal-card p-6 rounded-xl tech-card">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center mx-auto mb-4">
<i class="fas fa-graduation-cap text-2xl text-silver-300"></i>
</div>
<h3 class="text-xl font-semibold tech-font mb-3 text-silver-200">
آموزش هوشمند
</h3>
<p class="text-silver-400">
سیستم آموزشی تطبیقی با قابلیت شخصیسازی برای هر دانشآموز
</p>
</div>
<div class="metal-card p-6 rounded-xl tech-card">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center mx-auto mb-4">
<i class="fas fa-language text-2xl text-silver-300"></i>
</div>
<h3 class="text-xl font-semibold tech-font mb-3 text-silver-200">
پشتیبانی چندزبانه
</h3>
<p class="text-silver-400">
پشتیبانی از زبانهای دری، پشتو و انگلیسی با گویش محلی
</p>
</div>
<div class="metal-card p-6 rounded-xl tech-card">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center mx-auto mb-4">
<i class="fas fa-wifi-slash text-2xl text-silver-300"></i>
</div>
<h3 class="text-xl font-semibold tech-font mb-3 text-silver-200">
عملکرد آفلاین
</h3>
<p class="text-silver-400">
قابلیت استفاده در مناطق کمدسترس بدون نیاز به اینترنت
</p>
</div>
</div>
<div class="scroll-down" aria-hidden="true">
<i class="fas fa-chevron-down text-2xl text-silver-400 pulse"></i>
</div>
</div>
</section>
<!-- SERVICES Section -->
<section id="services" class="section" aria-labelledby="services-heading">
<div class="container mx-auto px-6 py-24">
<div class="text-center mb-16">
<h2 id="services-heading" class="text-4xl md:text-5xl font-bold tech-font gradient-text mb-4">
خدمات هوشمند
</h2>
<p class="text-xl max-w-3xl mx-auto text-silver-300">
راهکارهای آموزشی پیشرفته برای نیازهای متنوع دانشآموزان افغان
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<div class="metal-card p-8 rounded-xl feature-panel">
<div class="flex items-start mb-6">
<div class="w-12 h-12 rounded-lg bg-gradient-to-r from-gray-700 to-gray-800 flex items-center justify-center mr-4" aria-hidden="true">
<i class="fas fa-book text-xl text-silver-300"></i>
</div>
<h3 class="text-2xl font-semibold tech-font text-silver-200">
آموزش درسی
</h3>
</div>
<p class="text-silver-400 mb-6">
آموزش تعاملی دروس ریاضی، علوم و ادبیات با روشهای نوین
</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center text-silver-400">
<i class="fas fa-check text-silver-300 mr-2" aria-hidden="true"></i>
آموزش ریاضی به زبان ساده
</li>
<li class="flex items-center text-silver-400">
<i class="fas fa-check text-silver-300 mr-2" aria-hidden="true"></i>
آزمایشگاه مجازی علوم
</li>
<li class="flex items-center text-silver-400">
<i class="fas fa-check text-silver-300 mr-2" aria-hidden="true"></i>
آموزش ادبیات فارسی و پشتو
</li>
</ul>
</div>
<div class="metal-card p-8 rounded-xl feature-panel">
<div class="flex items-start mb-6">
<div class="w-12 h-12 rounded-lg bg-gradient-to-r from-gray-700 to-gray-800 flex items-center justify-center mr-4" aria-hidden="true">
<i class="fas fa-chalkboard-teacher text-xl text-silver-300"></i>
</div>
<h3 class="text-2xl font-semibold tech-font text-silver-200">
مشاوره تحصیلی
</h3>
</div>
<p class="text-silver-400 mb-6">
راهنمایی و برنامهریزی تحصیلی متناسب با استعدادها و علایق
</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center text-silver-400">
<i class="fas fa-check text-silver-300 mr-2" aria-hidden="true"></i>
انتخاب رشته هوشمند
</li>
<li class="flex items-center text-silver-400">
<i class="fas fa-check text-silver-300 mr-2" aria-hidden="true"></i>
برنامهریزی درسی شخصیسازی شده
</li>
<li class="flex items-center text-silver-400">
<i class="fas fa-check text-silver-300 mr-2" aria-hidden="true"></i>
مشاوره تحصیلی 24/7
</li>
</ul>
</div>
<div class="metal-card p-8 rounded-xl feature-panel">
<div class="flex items-start mb-6">
<div class="w-12 h-12 rounded-lg bg-gradient-to-r from-gray-700 to-gray-800 flex items-center justify-center mr-4" aria-hidden="true">
<i class="fas fa-mobile-alt text-xl text-silver-300"></i>
</div>
<h3 class="text-2xl font-semibold tech-font text-silver-200">
اپلیکیشن موبایل
</h3>
</div>
<p class="text-silver-400 mb-6">
دسترسی آسان از طریق موبایل در هر زمان و مکان
</p>
<ul class="space-y-2 mb-6">
<li class="flex items-center text-silver-400">
<i class="fas fa-check text-silver-300 mr-2" aria-hidden="true"></i>
سازگار با دستگاههای اندرویدی
</li>
<li class="flex items-center text-silver-400">
<i class="fas fa-check text-silver-300 mr-2" aria-hidden="true"></i>
حجم کم (کمتر از 50MB)
</li>
<li class="flex items-center text-silver-400">
<i class="fas fa-check text-silver-300 mr-2" aria-hidden="true"></i>
عملکرد بدون نیاز به اینترنت
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ABOUT Section -->
<section id="about" class="section" aria-labelledby="about-heading">
<div class="container mx-auto px-6 py-24">
<div class="text-center mb-16">
<h2 id="about-heading" class="text-4xl md:text-5xl font-bold tech-font gradient-text mb-4">
درباره ما
</h2>
<p class="text-xl max-w-3xl mx-auto text-silver-300">
توانمندسازی نسل جوان افغانستان از طریق آموزش دیجیتال
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
<div class="feature-panel">
<h3 class="text-2xl font-semibold tech-font gradient-text mb-6">
مأموریت ما
</h3>
<p class="text-silver-400 mb-4">
QH SMART AI با هدف ایجاد دسترسی عادلانه به آموزش با کیفیت برای همه جوانان افغانستان ایجاد شده است. ما معتقدیم هر کودک افغان سزاوار دسترسی به بهترین ابزارهای آموزشی است.
</p>
<p class="text-silver-400">
با تمرکز بر مناطق محروم و کمبرخوردار، سیستم آموزشی هوشمندی طراحی کردهایم که بدون نیاز به زیرساختهای پیچیده و اینترنت پرسرعت قابل استفاده است.
</p>
</div>
<div class="feature-panel">
<h3 class="text-2xl font-semibold tech-font gradient-text mb-6">
رویکرد ما
</h3>
<p class="text-silver-400 mb-4">
ترکیب هوش مصنوعی پیشرفته با محتوای آموزشی بومیسازی شده برای نیازهای خاص دانشآموزان افغان. سیستم ما با درک چالشهای منحصر به فرد آموزش در افغانستان طراحی شده است.
</p>
<p class="text-silver-400">
با همکاری معلمان و متخصصان آموزشی افغان، محتوایی تولید کردهایم که هم از نظر علمی دقیق و هم از نظر فرهنگی مناسب است.
</p>
</div>
</div>
<div class="metal-card rounded-xl p-8 mb-16 feature-panel">
<h3 class="text-2xl font-semibold tech-font text-center gradient-text mb-8">
آمارهای کلیدی
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="text-center">
<div class="text-4xl font-bold tech-font gradient-text mb-2">
50,000+
</div>
<h4 class="text-lg font-semibold tech-font mb-2 text-silver-200">
کاربر فعال
</h4>
</div>
<div class="text-center">
<div class="text-4xl font-bold tech-font gradient-text mb-2">
12
</div>
<h4 class="text-lg font-semibold tech-font mb-2 text-silver-200">
استان تحت پوشش
</h4>
</div>
<div class="text-center">
<div class="text-4xl font-bold tech-font gradient-text mb-2">
500+
</div>
<h4 class="text-lg font-semibold tech-font mb-2 text-silver-200">
ساعت محتوای آموزشی
</h4>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT Section -->
<section id="contact" class="section" aria-labelledby="contact-heading">
<div class="container mx-auto px-6 py-24">
<div class="text-center mb-16">
<h2 id="contact-heading" class="text-4xl md:text-5xl font-bold tech-font gradient-text mb-4">
تماس با ما
</h2>
<p class="text-xl max-w-3xl mx-auto text-silver-300">
برای همکاری یا دریافت اطلاعات بیشتر با ما در تماس باشید
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-6xl mx-auto">
<div class="feature-panel">
<h3 class="text-2xl font-semibold tech-font gradient-text mb-6">
اطلاعات تماس
</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-gray-700 to-gray-800 flex items-center justify-center mr-4 flex-shrink-0" aria-hidden="true">
<i class="fas fa-envelope text-lg text-silver-300"></i>
</div>
<div>
<h4 class="text-lg font-semibold mb-1 text-silver-200">
ایمیل
</h4>
<a href="mailto:[email protected]" class="text-silver-400 hover:text-silver-200 transition-colors">[email protected]</a>
</div>
</div>
<div class="flex items-start">
<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-gray-700 to-gray-800 flex items-center justify-center mr-4 flex-shrink-0" aria-hidden="true">
<i class="fas fa-phone-alt text-lg text-silver-300"></i>
</div>
<div>
<h4 class="text-lg font-semibold mb-1 text-silver-200">
تلفن
</h4>
<a href="tel:+93799687687" class="text-silver-400 hover:text-silver-200 transition-colors">+93 799 687 687</a>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="text-lg font-semibold mb-4 text-silver-200">
شبکههای اجتماعی
</h4>
<div class="flex space-x-4">
<a href="https://x.com/QhVision" target="_blank" class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-800 flex items-center justify-center hover:opacity-80 transition-opacity" aria-label="Twitter">
<i class="fab fa-twitter text-silver-300"></i>
</a>
<a href="https://www.linkedin.com/feed/" target="_blank" class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-800 flex items-center justify-center hover:opacity-80 transition-opacity" aria-label="LinkedIn">
<i class="fab fa-linkedin-in text-silver-300"></i>
</a>
<a href="https://www.instagram.com/17841474002610954/" target="_blank" class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-800 flex items-center justify-center hover:opacity-80 transition-opacity" aria-label="Instagram">
<i class="fab fa-instagram text-silver-300"></i>
</a>
<a href="https://www.youtube.com/@AfghanTreasures" target="_blank" class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-800 flex items-center justify-center hover:opacity-80 transition-opacity" aria-label="YouTube">
<i class="fab fa-youtube text-silver-300"></i>
</a>
</div>
</div>
</div>
<div class="feature-panel">
<h3 class="text-2xl font-semibold tech-font gradient-text mb-6">
ارسال پیام
</h3>
<form action="#" method="POST" class="space-y-6" aria-label="Contact form">
<div>
<label for="name" class="block text-sm font-medium mb-2 text-silver-300">
نام
</label>
<input type="text" id="name" name="name" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-silver-400 text-silver-300" placeholder="نام شما" required>
</div>
<div>
<label for="email" class="block text-sm font-medium mb-2 text-silver-300">
ایمیل
</label>
<input type="email" id="email" name="email" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-silver-400 text-silver-300" placeholder="ایمیل شما" required>
</div>
<div>
<label for="message" class="block text-sm font-medium mb-2 text-silver-300">
پیام
</label>
<textarea id="message" name="message" rows="5" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-silver-400 text-silver-300" placeholder="پیام شما" required></textarea>
</div>
<button type="submit" class="btn-metal px-8 py-3 rounded-full tech-font w-full">
ارسال پیام
</button>
</form>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-900 py-12 border-t border-gray-800">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<div>
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center mr-3">
<i class="fas fa-robot text-xl text-silver-300"></i>
</div>
<h3 class="text-xl font-bold tech-font gradient-text">QH SMART AI</h3>
</div>
<p class="text-silver-400 mb-6">
آموزش هوشمند برای آیندهسازان افغانستان
</p>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold tech-font mb-6 text-silver-200">
لینکهای سریع
</h3>
<ul class="space-y-3">
<li><a href="#home" class="text-silver-400 hover:text-silver-200 transition-colors">
خانه
</a></li>
<li><a href="#services" class="text-silver-400 hover:text-silver-200 transition-colors">
خدمات
</a></li>
<li><a href="#about" class="text-silver-400 hover:text-silver-200 transition-colors">
درباره ما
</a></li>
<li><a href="#contact" class="text-silver-400 hover:text-silver-200 transition-colors">
تماس
</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-silver-400 text-sm mb-4 md:mb-0">
© 2023 QH SMART AI. تمامی حقوق محفوظ است.
</p>
<div class="flex space-x-6">
<a href="#" class="text-silver-400 text-sm hover:text-silver-200 transition-colors">
حریم خصوصی
</a>
<a href="#" class="text-silver-400 text-sm hover:text-silver-200 transition-colors">
شرایط استفاده
</a>
</div>
</div>
</div>
</div>
</footer>
<script>
// SPA Navigation
document.addEventListener('DOMContentLoaded', function() {
const sections = document.querySelectorAll('.section');
const navLinks = document.querySelectorAll('.nav-link');
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const closeMenuButton = document.getElementById('close-menu');
// Mobile menu toggle
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.add('open');
});
closeMenuButton.addEventListener('click', function() {
mobileMenu.classList.remove('open');
});
// Navigation
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetSectionId = this.getAttribute('data-section');
// Update active nav link
navLinks.forEach(link => {
link.classList.remove('active');
});
this.classList.add('active');
// Show target section
sections.forEach(section => {
section.classList.remove('active');
if (section.id === targetSectionId) {
section.classList.add('active');
window.scrollTo(0, 0);
}
});
// Close mobile menu if open
mobileMenu.classList.remove('open');
});
});
// Animate feature panels on scroll
const featurePanels = document.querySelectorAll('.feature-panel');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
featurePanels.forEach(panel => {
observer.observe(panel);
});
});
</script>