Spaces:

MeemAdam
/

voiceover

Running

App Files Files Community

voiceover / index.html

MeemAdam

Add 2 files

71b1aa6 verified about 1 year ago

Raw

History Blame Contribute Delete

62.5 kB

	<!DOCTYPE html>
	<html lang="ar" 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=Tajawal:wght@400;500;700;900&display=swap');

	body {
	font-family: 'Tajawal', sans-serif;
	background-color: #f8fafc;
	}

	.hero-gradient {
	background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
	}

	.voice-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);
	}

	.play-button {
	transition: all 0.3s ease;
	}

	.play-button:hover {
	transform: scale(1.1);
	}

	.voice-sample {
	transition: all 0.3s ease;
	}

	.voice-sample:hover {
	background-color: #eff6ff;
	}

	.nav-link {
	position: relative;
	}

	.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -2px;
	right: 0;
	background-color: #3b82f6;
	transition: width 0.3s ease;
	}

	.nav-link:hover:after {
	width: 100%;
	}

	.floating {
	animation: floating 3s ease-in-out infinite;
	}

	@keyframes floating {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
	}
	</style>
	</head>
	<body>
	<!-- Header -->
	<header class="bg-white shadow-sm sticky top-0 z-50">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center">
	<div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xl mr-3">ق</div>
	<h1 class="text-xl font-bold text-blue-800">قوة الصوت</h1>
	</div>

	<nav class="hidden md:flex space-x-8 space-x-reverse">
	<a href="#home" class="nav-link text-gray-700 hover:text-blue-600">الرئيسية</a>
	<a href="#services" class="nav-link text-gray-700 hover:text-blue-600">خدماتنا</a>
	<a href="#voices" class="nav-link text-gray-700 hover:text-blue-600">الأصوات</a>
	<a href="#portfolio" class="nav-link text-gray-700 hover:text-blue-600">أعمالنا</a>
	<a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">اتصل بنا</a>
	</nav>

	<div class="flex items-center space-x-4 space-x-reverse">
	<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition duration-300">اطلب خدمتك</a>
	<button class="md:hidden text-gray-700">
	<i class="fas fa-bars text-xl"></i>
	</button>
	</div>
	</div>
	</header>

	<!-- Hero Section -->
	<section id="home" class="hero-gradient text-white py-20">
	<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
	<div class="md:w-1/2 mb-10 md:mb-0">
	<h1 class="text-4xl md:text-5xl font-bold mb-6">تعليق صوتي احترافي لأعمالك</h1>
	<p class="text-xl mb-8 opacity-90">أصوات متعددة تناسب إعلاناتك، وثائقياتك، موادك التعليمية والسردية. بالإضافة إلى خدمات التسويق الإلكتروني وإنشاء الفيديو المتحرك والتصاميم الترويجية.</p>
	<div class="flex space-x-4 space-x-reverse">
	<a href="#contact" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold transition duration-300">ابدأ مشروعك</a>
	<a href="#voices" class="border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-bold transition duration-300">استمع للأصوات</a>
	</div>
	</div>
	<div class="md:w-1/2 relative">
	<img src="https://images.unsplash.com/photo-1558002038-1055827d30b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Microphone" class="rounded-xl shadow-2xl w-full max-w-lg mx-auto">
	<div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-full shadow-lg floating">
	<div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center">
	<i class="fas fa-play text-white text-2xl"></i>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Services Section -->
	<section id="services" class="py-20 bg-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-800 mb-4">خدماتنا المتكاملة</h2>
	<p class="text-gray-600 max-w-2xl mx-auto">نقدم حزمة متكاملة من الخدمات الصوتية والمرئية لتعزيز وجودك الرقمي وجذب عملائك</p>
	</div>

	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Voice Over Service -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300 voice-card">
	<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-microphone text-blue-600 text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-800 mb-3">التعليق الصوتي</h3>
	<p class="text-gray-600 mb-4">أصوات احترافية بمختلف الأنماط (إعلاني، وثائقي، تعليمي، سردي) بلغات متعددة وبجودة استوديو احترافية.</p>
	<ul class="space-y-2 text-gray-600">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-blue-500 mr-2"></i>
	<span>أصوات ذكور وإناث</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-blue-500 mr-2"></i>
	<span>تسجيل وإنتاج احترافي</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-blue-500 mr-2"></i>
	<span>تعديلات صوتية متقدمة</span>
	</li>
	</ul>
	</div>

	<!-- Digital Marketing -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300 voice-card">
	<div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-bullseye text-green-600 text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-800 mb-3">التسويق الإلكتروني</h3>
	<p class="text-gray-600 mb-4">حلول تسويقية متكاملة لتعزيز وجودك الرقمي وزيادة مبيعاتك عبر مختلف المنصات.</p>
	<ul class="space-y-2 text-gray-600">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	<span>إدارة الحملات الإعلانية</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	<span>تحسين محركات البحث (SEO)</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	<span>إدارة وسائل التواصل الاجتماعي</span>
	</li>
	</ul>
	</div>

	<!-- Video Production -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300 voice-card">
	<div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-video text-purple-600 text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-800 mb-3">إنتاج الفيديو</h3>
	<p class="text-gray-600 mb-4">تصميم وإنتاج فيديوهات احترافية مع التعليق الصوتي المناسب لتعزيز رسالتك التسويقية.</p>
	<ul class="space-y-2 text-gray-600">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-purple-500 mr-2"></i>
	<span>فيديوهات إعلانية</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-purple-500 mr-2"></i>
	<span>فيديوهات تعليمية</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-purple-500 mr-2"></i>
	<span>موشن جرافيك</span>
	</li>
	</ul>
	</div>

	<!-- Graphic Design -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300 voice-card">
	<div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-paint-brush text-yellow-600 text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-800 mb-3">التصميم الجرافيكي</h3>
	<p class="text-gray-600 mb-4">تصاميم احترافية لجذب انتباه عملائك وتعزيز هويتك البصرية.</p>
	<ul class="space-y-2 text-gray-600">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-yellow-500 mr-2"></i>
	<span>تصميم الشعارات</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-yellow-500 mr-2"></i>
	<span>تصميم المواد الترويجية</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-yellow-500 mr-2"></i>
	<span>تصميم العبوات</span>
	</li>
	</ul>
	</div>

	<!-- Audio Branding -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300 voice-card">
	<div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-music text-red-600 text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-800 mb-3">الهوية الصوتية</h3>
	<p class="text-gray-600 mb-4">إنشاء هوية صوتية مميزة لعلامتك التجارية تشمل الجينجل والموسيقى التصويرية.</p>
	<ul class="space-y-2 text-gray-600">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-red-500 mr-2"></i>
	<span>تصميم الجينجل الإعلاني</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-red-500 mr-2"></i>
	<span>الموسيقى التصويرية</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-red-500 mr-2"></i>
	<span>أصوات الانتظار الهاتفي</span>
	</li>
	</ul>
	</div>

	<!-- Script Writing -->
	<div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300 voice-card">
	<div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-pen-fancy text-indigo-600 text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-800 mb-3">كتابة النصوص</h3>
	<p class="text-gray-600 mb-4">كتابة نصوص احترافية مخصصة للتعليق الصوتي والفيديوهات بمختلف أنواعها.</p>
	<ul class="space-y-2 text-gray-600">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-indigo-500 mr-2"></i>
	<span>نصوص إعلانية</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-indigo-500 mr-2"></i>
	<span>نصوص تعليمية</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-indigo-500 mr-2"></i>
	<span>نصوص وثائقية</span>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<!-- Voice Samples Section -->
	<section id="voices" class="py-20 bg-gray-50">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-800 mb-4">عينة من أصواتنا</h2>
	<p class="text-gray-600 max-w-2xl mx-auto">استمع إلى مجموعة من أصواتنا الاحترافية المناسبة لمختلف الأغراض</p>
	</div>

	<div class="flex justify-center mb-10">
	<div class="inline-flex rounded-md shadow-sm">
	<button type="button" class="px-6 py-3 text-sm font-medium rounded-r-lg border border-gray-200 bg-white text-gray-900 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700 voice-filter active" data-filter="all">
	الكل
	</button>
	<button type="button" class="px-6 py-3 text-sm font-medium border-t border-b border-gray-200 bg-white text-gray-900 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700 voice-filter" data-filter="commercial">
	إعلاني
	</button>
	<button type="button" class="px-6 py-3 text-sm font-medium border-t border-b border-gray-200 bg-white text-gray-900 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700 voice-filter" data-filter="documentary">
	وثائقي
	</button>
	<button type="button" class="px-6 py-3 text-sm font-medium border-t border-b border-gray-200 bg-white text-gray-900 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700 voice-filter" data-filter="narrative">
	سردي
	</button>
	<button type="button" class="px-6 py-3 text-sm font-medium rounded-l-lg border border-gray-200 bg-white text-gray-900 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-700 voice-filter" data-filter="educational">
	تعليمي
	</button>
	</div>
	</div>

	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="voice-samples-container">
	<!-- Commercial Voice 1 -->
	<div class="bg-white rounded-xl p-5 shadow-md voice-sample" data-category="commercial">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3">
	<i class="fas fa-male text-blue-600 text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-gray-800">صوت إعلاني - ذكر</h4>
	<p class="text-sm text-gray-500">نبرة حماسية جذابة</p>
	</div>
	</div>
	<div class="bg-gray-100 rounded-lg p-3 mb-4">
	<div class="flex items-center justify-between mb-2">
	<span class="text-sm text-gray-600">إعلان تجاري</span>
	<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">30 ثانية</span>
	</div>
	<audio controls class="w-full">
	<source src="#" type="audio/mpeg">
	متصفحك لا يدعم تشغيل الصوت.
	</audio>
	</div>
	<button class="play-button w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg flex items-center justify-center">
	<i class="fas fa-play mr-2"></i> استمع الآن
	</button>
	</div>

	<!-- Documentary Voice -->
	<div class="bg-white rounded-xl p-5 shadow-md voice-sample" data-category="documentary">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-3">
	<i class="fas fa-female text-green-600 text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-gray-800">صوت وثائقي - أنثى</h4>
	<p class="text-sm text-gray-500">نبرة هادئة ومعبرة</p>
	</div>
	</div>
	<div class="bg-gray-100 rounded-lg p-3 mb-4">
	<div class="flex items-center justify-between mb-2">
	<span class="text-sm text-gray-600">فيلم وثائقي</span>
	<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">45 ثانية</span>
	</div>
	<audio controls class="w-full">
	<source src="#" type="audio/mpeg">
	متصفحك لا يدعم تشغيل الصوت.
	</audio>
	</div>
	<button class="play-button w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg flex items-center justify-center">
	<i class="fas fa-play mr-2"></i> استمع الآن
	</button>
	</div>

	<!-- Educational Voice -->
	<div class="bg-white rounded-xl p-5 shadow-md voice-sample" data-category="educational">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-3">
	<i class="fas fa-male text-purple-600 text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-gray-800">صوت تعليمي - ذكر</h4>
	<p class="text-sm text-gray-500">نبرة واضحة ومسموعة</p>
	</div>
	</div>
	<div class="bg-gray-100 rounded-lg p-3 mb-4">
	<div class="flex items-center justify-between mb-2">
	<span class="text-sm text-gray-600">درس تعليمي</span>
	<span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">1 دقيقة</span>
	</div>
	<audio controls class="w-full">
	<source src="#" type="audio/mpeg">
	متصفحك لا يدعم تشغيل الصوت.
	</audio>
	</div>
	<button class="play-button w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg flex items-center justify-center">
	<i class="fas fa-play mr-2"></i> استمع الآن
	</button>
	</div>

	<!-- Narrative Voice -->
	<div class="bg-white rounded-xl p-5 shadow-md voice-sample" data-category="narrative">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
	<i class="fas fa-female text-yellow-600 text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-gray-800">صوت سردي - أنثى</h4>
	<p class="text-sm text-gray-500">نبرة قصصية جذابة</p>
	</div>
	</div>
	<div class="bg-gray-100 rounded-lg p-3 mb-4">
	<div class="flex items-center justify-between mb-2">
	<span class="text-sm text-gray-600">قصة قصيرة</span>
	<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">2 دقيقة</span>
	</div>
	<audio controls class="w-full">
	<source src="#" type="audio/mpeg">
	متصفحك لا يدعم تشغيل الصوت.
	</audio>
	</div>
	<button class="play-button w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 rounded-lg flex items-center justify-center">
	<i class="fas fa-play mr-2"></i> استمع الآن
	</button>
	</div>

	<!-- Commercial Voice 2 -->
	<div class="bg-white rounded-xl p-5 shadow-md voice-sample" data-category="commercial">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-3">
	<i class="fas fa-female text-red-600 text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-gray-800">صوت إعلاني - أنثى</h4>
	<p class="text-sm text-gray-500">نبرة أنيقة وجذابة</p>
	</div>
	</div>
	<div class="bg-gray-100 rounded-lg p-3 mb-4">
	<div class="flex items-center justify-between mb-2">
	<span class="text-sm text-gray-600">إعلان تجاري</span>
	<span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">25 ثانية</span>
	</div>
	<audio controls class="w-full">
	<source src="#" type="audio/mpeg">
	متصفحك لا يدعم تشغيل الصوت.
	</audio>
	</div>
	<button class="play-button w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded-lg flex items-center justify-center">
	<i class="fas fa-play mr-2"></i> استمع الآن
	</button>
	</div>

	<!-- Documentary Voice 2 -->
	<div class="bg-white rounded-xl p-5 shadow-md voice-sample" data-category="documentary">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
	<i class="fas fa-male text-indigo-600 text-xl"></i>
	</div>
	<div>
	<h4 class="font-bold text-gray-800">صوت وثائقي - ذكر</h4>
	<p class="text-sm text-gray-500">نبرة عميقة وموثوقة</p>
	</div>
	</div>
	<div class="bg-gray-100 rounded-lg p-3 mb-4">
	<div class="flex items-center justify-between mb-2">
	<span class="text-sm text-gray-600">فيلم وثائقي</span>
	<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">50 ثانية</span>
	</div>
	<audio controls class="w-full">
	<source src="#" type="audio/mpeg">
	متصفحك لا يدعم تشغيل الصوت.
	</audio>
	</div>
	<button class="play-button w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg flex items-center justify-center">
	<i class="fas fa-play mr-2"></i> استمع الآن
	</button>
	</div>
	</div>

	<div class="text-center mt-10">
	<a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
	اطلب صوتك المخصص
	<i class="fas fa-arrow-left ml-2"></i>
	</a>
	</div>
	</div>
	</section>

	<!-- Portfolio Section -->
	<section id="portfolio" class="py-20 bg-white">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-800 mb-4">أعمالنا السابقة</h2>
	<p class="text-gray-600 max-w-2xl mx-auto">بعض المشاريع التي نفخر بها والتي أظهرت مدى احترافيتنا في مجال التعليق الصوتي والخدمات المرافقة</p>
	</div>

	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Project 1 -->
	<div class="relative group overflow-hidden rounded-xl shadow-lg">
	<img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Commercial Project" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
	<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
	<div class="absolute bottom-0 left-0 p-6 w-full">
	<h3 class="text-xl font-bold text-white mb-2">حملة إعلانية لشركة تقنية</h3>
	<p class="text-gray-200 mb-3">تعليق صوتي احترافي مع موشن جرافيك لإعلان تلفزيوني</p>
	<div class="flex flex-wrap gap-2">
	<span class="bg-blue-600 bg-opacity-80 text-white text-xs px-3 py-1 rounded-full">صوت إعلاني</span>
	<span class="bg-purple-600 bg-opacity-80 text-white text-xs px-3 py-1 rounded-full">موشن جرافيك</span>
	</div>
	</div>
	<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-50">
	<a href="#" class="bg-white text-blue-600 rounded-full w-14 h-14 flex items-center justify-center hover:bg-blue-600 hover:text-white transition duration-300">
	<i class="fas fa-play text-xl"></i>
	</a>
	</div>
	</div>

	<!-- Project 2 -->
	<div class="relative group overflow-hidden rounded-xl shadow-lg">
	<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Documentary Project" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
	<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
	<div class="absolute bottom-0 left-0 p-6 w-full">
	<h3 class="text-xl font-bold text-white mb-2">فيلم وثائقي عن الحياة البرية</h3>
	<p class="text-gray-200 mb-3">تعليق صوتي وثائقي مع موسيقى تصويرية مخصصة</p>
	<div class="flex flex-wrap gap-2">
	<span class="bg-green-600 bg-opacity-80 text-white text-xs px-3 py-1 rounded-full">صوت وثائقي</span>
	<span class="bg-red-600 bg-opacity-80 text-white text-xs px-3 py-1 rounded-full">موسيقى تصويرية</span>
	</div>
	</div>
	<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-50">
	<a href="#" class="bg-white text-green-600 rounded-full w-14 h-14 flex items-center justify-center hover:bg-green-600 hover:text-white transition duration-300">
	<i class="fas fa-play text-xl"></i>
	</a>
	</div>
	</div>

	<!-- Project 3 -->
	<div class="relative group overflow-hidden rounded-xl shadow-lg">
	<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Educational Project" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
	<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
	<div class="absolute bottom-0 left-0 p-6 w-full">
	<h3 class="text-xl font-bold text-white mb-2">سلسلة دروس تعليمية</h3>
	<p class="text-gray-200 mb-3">تعليق صوتي تعليمي مع رسوم متحركة توضيحية</p>
	<div class="flex flex-wrap gap-2">
	<span class="bg-purple-600 bg-opacity-80 text-white text-xs px-3 py-1 rounded-full">صوت تعليمي</span>
	<span class="bg-yellow-600 bg-opacity-80 text-white text-xs px-3 py-1 rounded-full">رسوم متحركة</span>
	</div>
	</div>
	<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300 bg-black bg-opacity-50">
	<a href="#" class="bg-white text-purple-600 rounded-full w-14 h-14 flex items-center justify-center hover:bg-purple-600 hover:text-white transition duration-300">
	<i class="fas fa-play text-xl"></i>
	</a>
	</div>
	</div>
	</div>

	<div class="text-center mt-12">
	<a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
	عرض المزيد من الأعمال
	<i class="fas fa-arrow-left ml-2"></i>
	</a>
	</div>
	</div>
	</section>

	<!-- Testimonials Section -->
	<section class="py-20 bg-gray-50">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-800 mb-4">آراء عملائنا</h2>
	<p class="text-gray-600 max-w-2xl mx-auto">ما يقوله عملاؤنا عن جودة خدماتنا واحترافيتنا</p>
	</div>

	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Testimonial 1 -->
	<div class="bg-white p-6 rounded-xl shadow-md">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-xl mr-3">م</div>
	<div>
	<h4 class="font-bold text-gray-800">محمد العلي</h4>
	<p class="text-sm text-gray-500">مدير تسويق - شركة التقنية المتطورة</p>
	</div>
	</div>
	<p class="text-gray-600 mb-4">"تعاملت مع فريق قوة الصوت لإنتاج التعليق الصوتي لحملتنا الإعلانية وكانت النتيجة ممتازة. الصوت كان احترافياً تماماً ونال إعجاب الجميع. نوصي بهم بشدة."</p>
	<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="bg-white p-6 rounded-xl shadow-md">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold text-xl mr-3">س</div>
	<div>
	<h4 class="font-bold text-gray-800">سارة عبدالله</h4>
	<p class="text-sm text-gray-500">منتجة أفلام وثائقية</p>
	</div>
	</div>
	<p class="text-gray-600 mb-4">"استعنت بخدمات قوة الصوت للتعليق الصوتي لفيلمي الوثائقي الأخير وكان اختياراً رائعاً. الصوت الأنثوي الذي قدمته كان معبراً جداً وساعد في إيصال الرسالة بشكل قوي."</p>
	<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="bg-white p-6 rounded-xl shadow-md">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold text-xl mr-3">خ</div>
	<div>
	<h4 class="font-bold text-gray-800">خالد الحربي</h4>
	<p class="text-sm text-gray-500">مؤسس منصة تعليمية</p>
	</div>
	</div>
	<p class="text-gray-600 mb-4">"فريق قوة الصوت قدم لنا خدمة متكاملة شملت كتابة النص التعليمي، التسجيل الصوتي وإنتاج الفيديو. كانت النتيجة احترافية جداً وساهمت في زيادة تفاعل طلابنا مع المحتوى."</p>
	<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-half-alt"></i>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact" class="py-20 bg-white">
	<div class="container mx-auto px-4">
	<div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-md overflow-hidden">
	<div class="md:flex">
	<div class="md:w-1/2 bg-blue-600 text-white p-8">
	<h2 class="text-2xl font-bold mb-6">تواصل معنا</h2>
	<p class="mb-6 opacity-90">نرحب باستفساراتك وأسئلتك حول خدماتنا. فريقنا جاهز لمساعدتك في اختيار الحل الأمثل لاحتياجاتك.</p>

	<div class="space-y-4">
	<div class="flex items-start">
	<div class="flex-shrink-0 bg-blue-700 rounded-full p-2 mr-3">
	<i class="fas fa-phone-alt text-white"></i>
	</div>
	<div>
	<h4 class="font-bold">الهاتف</h4>
	<p class="opacity-90">+966 12 345 6789</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex-shrink-0 bg-blue-700 rounded-full p-2 mr-3">
	<i class="fas fa-envelope text-white"></i>
	</div>
	<div>
	<h4 class="font-bold">البريد الإلكتروني</h4>
	<p class="opacity-90">info@qowat-al-sout.com</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="flex-shrink-0 bg-blue-700 rounded-full p-2 mr-3">
	<i class="fas fa-map-marker-alt text-white"></i>
	</div>
	<div>
	<h4 class="font-bold">العنوان</h4>
	<p class="opacity-90">الرياض، المملكة العربية السعودية</p>
	</div>
	</div>
	</div>

	<div class="mt-8">
	<h4 class="font-bold mb-4">تابعنا على</h4>
	<div class="flex space-x-4 space-x-reverse">
	<a href="#" class="w-10 h-10 rounded-full bg-blue-700 flex items-center justify-center hover:bg-blue-800 transition duration-300">
	<i class="fab fa-twitter"></i>
	</a>
	<a href="#" class="w-10 h-10 rounded-full bg-blue-700 flex items-center justify-center hover:bg-blue-800 transition duration-300">
	<i class="fab fa-instagram"></i>
	</a>
	<a href="#" class="w-10 h-10 rounded-full bg-blue-700 flex items-center justify-center hover:bg-blue-800 transition duration-300">
	<i class="fab fa-linkedin-in"></i>
	</a>
	<a href="#" class="w-10 h-10 rounded-full bg-blue-700 flex items-center justify-center hover:bg-blue-800 transition duration-300">
	<i class="fab fa-youtube"></i>
	</a>
	</div>
	</div>
	</div>

	<div class="md:w-1/2 p-8">
	<h3 class="text-xl font-bold text-gray-800 mb-6">أرسل لنا رسالة</h3>
	<form>
	<div class="mb-4">
	<label for="name" class="block text-gray-700 font-medium mb-2">الاسم</label>
	<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
	</div>

	<div class="mb-4">
	<label for="email" class="block text-gray-700 font-medium mb-2">البريد الإلكتروني</label>
	<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
	</div>

	<div class="mb-4">
	<label for="phone" class="block text-gray-700 font-medium mb-2">رقم الهاتف</label>
	<input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
	</div>

	<div class="mb-4">
	<label for="service" class="block text-gray-700 font-medium mb-2">نوع الخدمة</label>
	<select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
	<option value="">اختر الخدمة</option>
	<option value="voice-over">تعليق صوتي</option>
	<option value="commercial">إعلان تجاري</option>
	<option value="documentary">فيلم وثائقي</option>
	<option value="educational">محتوى تعليمي</option>
	<option value="narrative">سرد قصصي</option>
	<option value="marketing">تسويق إلكتروني</option>
	<option value="video">إنتاج فيديو</option>
	<option value="design">تصميم جرافيك</option>
	</select>
	</div>

	<div class="mb-4">
	<label for="message" class="block text-gray-700 font-medium mb-2">الرسالة</label>
	<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
	</div>

	<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-bold transition duration-300">
	إرسال الرسالة
	<i class="fas fa-paper-plane mr-2"></i>
	</button>
	</form>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- FAQ Section -->
	<section class="py-20 bg-gray-50">
	<div class="container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-3xl font-bold text-gray-800 mb-4">أسئلة شائعة</h2>
	<p class="text-gray-600 max-w-2xl mx-auto">إجابات على أكثر الأسئلة التي تردنا من عملائنا</p>
	</div>

	<div class="max-w-3xl mx-auto space-y-4">
	<!-- FAQ Item 1 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
	<h3 class="font-bold text-gray-800">كم تستغرق عملية تسجيل التعليق الصوتي؟</h3>
	<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
	</button>
	<div class="faq-content px-6 pb-6 hidden">
	<p class="text-gray-600">المدة تعتمد على طول النص وتعقيد المشروع. بشكل عام، التسجيل الأساسي لنص مدته 5 دقائق يمكن أن يستغرق حوالي ساعة من وقت الاستوديو. ثم يأتي وقت المونتاج والإنتاج الذي قد يستغرق من 1-3 أيام عمل حسب تعقيد المشروع.</p>
	</div>
	</div>

	<!-- FAQ Item 2 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
	<h3 class="font-bold text-gray-800">هل يمكنكم كتابة النص الإعلاني أيضاً؟</h3>
	<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
	</button>
	<div class="faq-content px-6 pb-6 hidden">
	<p class="text-gray-600">نعم، لدينا فريق من كتاب المحتوى المحترفين الذين يمكنهم كتابة نصوص إعلانية، تعليمية، وثائقية وسردية احترافية تناسب التعليق الصوتي. نضمن لك نصاً جذاباً وفعالاً يحقق أهدافك التواصلية.</p>
	</div>
	</div>

	<!-- FAQ Item 3 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
	<h3 class="font-bold text-gray-800">ما هي أنواع الملفات التي تقدمونها؟</h3>
	<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
	</button>
	<div class="faq-content px-6 pb-6 hidden">
	<p class="text-gray-600">نقدم الملفات الصوتية بجميع الصيغ الشائعة مثل MP3، WAV، AIFF وغيرها حسب احتياجك. كما يمكننا تزويدك بملفات الفيديو بصيغ MP4، MOV، AVI وغيرها. نضمن جودة عالية تناسب جميع المنصات والاستخدامات.</p>
	</div>
	</div>

	<!-- FAQ Item 4 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
	<h3 class="font-bold text-gray-800">هل لديكم سياسة لإعادة التسجيل إذا لم أكن راضياً عن النتيجة؟</h3>
	<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
	</button>
	<div class="faq-content px-6 pb-6 hidden">
	<p class="text-gray-600">نعم، نقدم تعديلات مجانية حتى تصل إلى النتيجة التي ترضيك. في حال احتجت إلى إعادة تسجيل كاملة، نقدم خيارين: إما إعادة التسجيل بنفس الصوت أو اختيار صوت آخر من فريقنا دون تكلفة إضافية.</p>
	</div>
	</div>

	<!-- FAQ Item 5 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden">
	<button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
	<h3 class="font-bold text-gray-800">هل تقدمون خدمات الترجمة والتعليق الصوتي بلغات أخرى؟</h3>
	<i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i>
	</button>
	<div class="faq-content px-6 pb-6 hidden">
	<p class="text-gray-600">نعم، لدينا شراكات مع مترجمين محترفين ويمكننا تقديم خدمة متكاملة تشمل الترجمة ثم التعليق الصوتي بلغات متعددة مثل الإنجليزية، الفرنسية، الإسبانية وغيرها. نضمن لك ترجمة احترافية وصوتاً مناسباً للغة والثقافة المستهدفة.</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- CTA Section -->
	<section class="py-16 bg-blue-600 text-white">
	<div class="container mx-auto px-4 text-center">
	<h2 class="text-3xl font-bold mb-6">جاهزون لبدء مشروعك؟</h2>
	<p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">اتصل بنا الآن واحصل على عرض سعر مجاني لخدمات التعليق الصوتي والحلول التسويقية المتكاملة</p>
	<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 sm:space-x-reverse">
	<a href="#contact" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold transition duration-300">اطلب خدمتك الآن</a>
	<a href="tel:+966123456789" class="border-2 border-white hover:bg-white hover:bg-opacity-10 px-8 py-3 rounded-lg font-bold transition duration-300">
	<i class="fas fa-phone-alt mr-2"></i> اتصل بنا
	</a>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white pt-16 pb-8">
	<div class="container mx-auto px-4">
	<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
	<!-- About -->
	<div>
	<div class="flex items-center mb-4">
	<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-lg mr-2">ق</div>
	<h3 class="text-xl font-bold">قوة الصوت</h3>
	</div>
	<p class="text-gray-400 mb-4">متخصصون في تقديم خدمات التعليق الصوتي الاحترافي والحلول التسويقية المتكاملة لتعزيز وجودك الرقمي وجذب عملائك.</p>
	<div class="flex space-x-4 space-x-reverse">
	<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>
	<a href="#" class="text-gray-400 hover:text-white transition duration-300">
	<i class="fab fa-youtube"></i>
	</a>
	</div>
	</div>

	<!-- Quick Links -->
	<div>
	<h4 class="text-lg font-bold 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="#services" class="text-gray-400 hover:text-white transition duration-300">خدماتنا</a></li>
	<li><a href="#voices" class="text-gray-400 hover:text-white transition duration-300">الأصوات</a></li>
	<li><a href="#portfolio" 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>

	<!-- Services -->
	<div>
	<h4 class="text-lg font-bold 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>

	<!-- Contact Info -->
	<div>
	<h4 class="text-lg font-bold mb-4">معلومات الاتصال</h4>
	<ul class="space-y-3 text-gray-400">
	<li class="flex items-start">
	<i class="fas fa-map-marker-alt mt-1 mr-2 text-blue-500"></i>
	<span>الرياض، المملكة العربية السعودية</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-phone-alt mt-1 mr-2 text-blue-500"></i>
	<span>+966 12 345 6789</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-envelope mt-1 mr-2 text-blue-500"></i>
	<span>info@qowat-al-sout.com</span>
	</li>
	<li class="flex items-start">
	<i class="fas fa-clock mt-1 mr-2 text-blue-500"></i>
	<span>الأحد - الخميس: 9 ص - 5 م</span>
	</li>
	</ul>
	</div>
	</div>

	<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
	<p class="text-gray-400 mb-4 md:mb-0">© 2023 قوة الصوت. جميع الحقوق محفوظة.</p>
	<div class="flex space-x-6 space-x-reverse">
	<a href="#" class="text-gray-400 hover:text-white transition duration-300">سياسة الخصوصية</a>
	<a href="#" class="text-gray-400 hover:text-white transition duration-300">شروط الخدمة</a>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Voice Filter Functionality
	const voiceFilters = document.querySelectorAll('.voice-filter');
	const voiceSamples = document.querySelectorAll('.voice-sample');

	voiceFilters.forEach(filter => {
	filter.addEventListener('click', () => {
	// Remove active class from all filters
	voiceFilters.forEach(f => f.classList.remove('active', 'bg-blue-600', 'text-white'));

	// Add active class to clicked filter
	filter.classList.add('active', 'bg-blue-600', 'text-white');

	const filterValue = filter.getAttribute('data-filter');

	// Show all samples if 'all' is selected
	if(filterValue === 'all') {
	voiceSamples.forEach(sample => {
	sample.style.display = 'block';
	});
	return;
	}

	// Filter samples based on category
	voiceSamples.forEach(sample => {
	if(sample.getAttribute('data-category') === filterValue) {
	sample.style.display = 'block';
	} else {
	sample.style.display = 'none';
	}
	});
	});
	});

	// FAQ Toggle Functionality
	const faqToggles = document.querySelectorAll('.faq-toggle');

	faqToggles.forEach(toggle => {
	toggle.addEventListener('click', () => {
	const content = toggle.nextElementSibling;
	const icon = toggle.querySelector('i');

	content.classList.toggle('hidden');
	icon.classList.toggle('rotate-180');
	});
	});

	// Play Button Functionality
	const playButtons = document.querySelectorAll('.play-button');

	playButtons.forEach(button => {
	button.addEventListener('click', (e) => {
	e.preventDefault();
	const audioPlayer = button.parentElement.querySelector('audio');

	if(audioPlayer.paused) {
	audioPlayer.play();
	button.innerHTML = '<i class="fas fa-pause mr-2"></i> إيقاف';
	} else {
	audioPlayer.pause();
	button.innerHTML = '<i class="fas fa-play mr-2"></i> استمع الآن';
	}
	});
	});

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

	document.querySelector(this.getAttribute('href')).scrollIntoView({
	behavior: 'smooth'
	});
	});
	});

	// Mobile Menu Toggle (would need additional HTML and CSS for full functionality)
	const mobileMenuButton = document.querySelector('.md\\:hidden');
	mobileMenuButton.addEventListener('click', () => {
	// This would toggle a mobile menu - implementation depends on your design
	console.log('Mobile menu clicked - implement your menu toggle here');
	});
	</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=MeemAdam/voiceover" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>