<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SM Cablages</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/framer-motion@4.1.17/dist/framer-motion.min.js"></script>
</head>
<body>
<header id="header" class="fixed inset-x-0 top-0 z-50 transition-all duration-300">
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">SM Cablages</span>
<div class="text-[#00FF99] font-bold text-xl">SM Cablages</div>
</a>
</div>
<div class="flex lg:hidden">
<button type="button" class="mobile-menu-button -m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12 nav-items">
<!-- Navigation items will be inserted here by JavaScript -->
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end lg:gap-x-4">
<div class="relative">
<button id="language-switcher" class="inline-flex items-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-white/20">
العربية
<svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div id="language-dropdown" class="absolute left-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="language-switcher" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">English</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Français</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">العربية</a>
</div>
</div>
</div>
<a href="#contact" class="inline-flex items-center rounded-md bg-[#00FF99] px-3 py-2 text-sm font-semibold text-[#151618] shadow-sm hover:bg-[#00FF99]/90">اتصل بنا</a>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden hidden">
<!-- Mobile menu items will be inserted here by JavaScript -->
</div>
</header>
<main>
<!-- Hero Section -->
<section id="hero" class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-gradient-to-b from-[#151618]/80 via-[#151618]/50 to-[#151618]"></div>
<div class="absolute inset-0 bg-gradient-to-t from-[#151618] via-[#151618]/30 to-transparent"></div>
<div class="absolute inset-0 bg-gradient-to-r from-[#151618] via-transparent to-[#151618]"></div>
<img src="https://images.unsplash.com/photo-1616763355603-9755a640a287?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80" alt="Structured Cabling Infrastructure" class="object-cover w-full h-full opacity-30">
</div>
<div class="relative z-10 text-center px-6">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6" data-i18n="hero.title">حلول الكابلات الهيكلية المهنية</h1>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto" data-i18n="hero.subtitle">تركيب وصيانة خبيرة للبنية التحتية للشبكات للشركات من جميع الأحجام.</p>
<a href="#contact" class="inline-flex items-center rounded-md bg-[#00FF99] px-4 py-2 text-sm font-semibold text-[#151618] shadow-sm hover:bg-[#00FF99]/90" data-i18n="hero.cta">ابدأ الآن</a>
</div>
</section>
<!-- Services Section -->
<section id="services" class="relative bg-[#151618] py-24">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-base font-semibold text-[#00FF99] mb-3" data-i18n="services.title">خدماتنا</h2>
<h3 class="text-3xl font-bold text-white mb-4" data-i18n="services.subtitle">حلول شاملة للبنية التحتية للشبكات</h3>
<p class="text-gray-300 max-w-2xl mx-auto" data-i18n="services.description">
نقدم خدمات كابلات هيكلية شاملة لتلبية جميع احتياجات البنية التحتية للشبكات الخاصة بك.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8" id="services-grid">
<!-- Service items will be inserted here by JavaScript -->
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="relative py-24 bg-[#151618]">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="relative h-[400px] rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80" alt="Network Infrastructure" class="object-cover w-full h-full">
</div>
<div>
<h2 class="text-base font-semibold text-[#00FF99] mb-3" data-i18n="about.title">عن الشركة</h2>
<h3 class="text-3xl font-bold text-white mb-4" data-i18n="about.subtitle">التميز في الكابلات الهيكلية</h3>
<p class="text-gray-300 mb-6" data-i18n="about.description">
مع سنوات من الخبرة في الصناعة، نقدم حلول كابلات هيكلية من الدرجة الأولى تضمن بنية تحتية شبكية موثوقة وفعالة للشركات من جميع الأحجام.
</p>
<ul class="space-y-4" id="about-items">
<!-- About items will be inserted here by JavaScript -->
</ul>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="relative py-24 bg-[#151618]">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-base font-semibold text-[#00FF99] mb-3" data-i18n="testimonials.title">آراء العملاء</h2>
<h3 class="text-3xl font-bold text-white mb-4" data-i18n="testimonials.subtitle">ماذا يقول عملاؤنا</h3>
</div>
<div class="grid md:grid-cols-3 gap-8" id="testimonials-grid">
<!-- Testimonial items will be inserted here by JavaScript -->
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="relative py-24 bg-[#151618]">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12">
<div>
<form id="contact-form" class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-300" data-i18n="contact.form.name">الاسم</label>
<input type="text" id="name" name="name" class="mt-1 block w-full rounded-md bg-white/5 border border-white/10 px-3 py-2 text-white placeholder-gray-400 focus:border-[#00FF99] focus:ring-[#00FF99]">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-300" data-i18n="contact.form.email">البريد الإلكتروني</label>
<input type="email" id="email" name="email" class="mt-1 block w-full rounded-md bg-white/5 border border-white/10 px-3 py-2 text-white placeholder-gray-400 focus:border-[#00FF99] focus:ring-[#00FF99]">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-300" data-i18n="contact.form.message">الرسالة</label>
<textarea id="message" name="message" rows="4" class="mt-1 block w-full rounded-md bg-white/5 border border-white/10 px-3 py-2 text-white placeholder-gray-400 focus:border-[#00FF99] focus:ring-[#00FF99]"></textarea>
</div>
<button type="submit" class="w-full bg-[#00FF99] text-[#151618] hover:bg-[#00FF99]/90 px-4 py-2 rounded-md" data-i18n="contact.form.send">إرسال الرسالة</button>
</form>
</div>
<div>
<h2 class="text-base font-semibold text-[#00FF99] mb-3" data-i18n="contact.title">اتصل بنا</h2>
<h3 class="text-3xl font-bold text-white mb-4" data-i18n="contact.subtitle">تواصل معنا</h3>
<p class="text-gray-300 mb-8" data-i18n="contact.description">
هل أنت مستعد لترقية البنية التحتية لشبكتك؟ اتصل بنا اليوم للحصول على استشارة.
</p>
<div class="space-y-4">
<div class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-[#00FF99] ml-3" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
</svg>
<span>+1 234-567-8900</span>
</div>
<div class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-[#00FF99] ml-3"<cut_off_point>
gray-300">
<svg class="h-5 w-5 text-[#00FF99] ml-3"
</cut_off_point>
viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
<span>contact@smcablages.com</span>
</div>
<div class="flex items-center text-gray-300">
<svg class="h-5 w-5 text-[#00FF99] ml-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
<span>123 Business Street, City, Country</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-[#151618] border-t border-[#00FF99]/10">
<div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
<div class="mt-8 md:order-1 md:mt-0">
<p class="text-center text-xs leading-5 text-gray-400">© 2023 SM Cablages. All rights reserved.</p>
</div>
<div class="flex justify-center space-x-6 md:order-2">
<a href="#" class="text-[#00FF99] font-bold text-lg">
SM Cablages
</a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>