__________________________________________________________________________________ تصميم احترافي
السكريبت الذي تم إنشاؤه يمثل موقعًا احترافيًا لبيع منتجات الإضاءة، وهو يحتوي على العديد من المميزات التي تجعل منه تصميمًا قويًا وجذابًا. إليك أبرز المميزات:
1. تصميم حديث وسهل الاستخدام
- واجهة جذابة: تصميم بسيط ونظيف مع استخدام صور جذابة وألوان متناسقة.
- تجاوب كامل: السكربت مصمم ليعمل على جميع الأجهزة، بما في ذلك الهواتف الذكية والأجهزة اللوحية.
2. أقسام واضحة ومنظمة
- شريط التنقل: يوفر سهولة الوصول إلى الأقسام الرئيسية: "من نحن"، "منتجاتنا"، و"اتصل بنا".
- قسم الأبطال (Hero Section): عرض مميز للعنوان الرئيسي مع زر يدعو المستخدمين لتصفح المنتجات.
- قسم المنتجات: عرض المنتجات بشكل جذاب مع الصور، الأوصاف، والأسعار.
3. عرض المنتجات
- كل منتج يتم عرضه في بطاقة منفصلة تحتوي على:
- صورة واضحة.
- وصف قصير يبرز المميزات.
- السعر.
- زر "أضف إلى السلة" لإمكانية التكامل مع نظام طلبات مستقبلي.
4. قسم اتصل بنا
- نموذج اتصال بسيط يتيح للعملاء إرسال استفساراتهم مباشرة.
- حقول شاملة (الاسم، البريد الإلكتروني، الرسالة) لجمع المعلومات اللازمة من المستخدم.
5. أسلوب تصميم احترافي
- تأثيرات متجاوبة: استخدام تأثيرات مثل تحريك البطاقات عند التمرير عليها.
- ألوان متناسقة: مزيج من الألوان الداكنة والفاتحة لراحة العين.
- خطوط عربية: الخط المستخدم (Cairo) يجعل النصوص واضحة وجذابة.
6. قابلية التوسع والتخصيص
- إمكانية إضافة المزيد من المنتجات بسهولة.
- يمكن دمج أنظمة دفع أو تسجيل حسابات مستقبلًا.
- إمكانية إضافة لغات أخرى بجانب العربية.
7. استخدام مكتبات حديثة
- السكربت يعتمد على Bootstrap 5 لتسهيل التصميم وضمان التجاوب.
8. قسم حقوق الملكية
- يوجد قسم حقوق الطبع والنشر (Footer)، مع نص مخصص لحماية الملكية الفكرية.
9. مناسب لمحركات البحث (SEO)
- جميع العناصر مهيأة لتكون صديقة لمحركات البحث من حيث بنية الموقع.
إذا كنت ترغب في تحسين هذه المميزات أو إضافة أخرى مثل التكامل مع أنظمة الدفع أو قاعدة بيانات لإدارة الطلبات، فأخبرني!
________________________________________________________________________________
<!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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
<style>
body {
background-color: #f9f9f9;
font-family: 'Cairo', sans-serif;
}
.navbar {
background-color: #333;
}
.navbar-brand, .nav-link {
color: #fff !important;
}
.hero {
background: url('light-banner.jpg') no-repeat center center/cover;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.hero h1 {
font-size: 3rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.product-card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.product-card:hover {
transform: translateY(-10px);
}
footer {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">متجر الإضاءة</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#about">من نحن</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#products">منتجاتنا</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">اتصل بنا</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="hero">
<div class="container">
<h1>جودة وإبداع في عالم الإضاءة</h1>
<p>اكتشف تشكيلتنا الواسعة من الحلول الإضائية لتناسب جميع احتياجاتك.</p>
<a href="#products" class="btn btn-primary btn-lg">تصفح المنتجات</a>
</div>
</section>
<section id="about" class="py-5">
<div class="container text-center">
<h2 class="mb-4">من نحن</h2>
<p>نحن متخصصون في تقديم أحدث تقنيات وحلول الإضاءة التي تضيف جمالًا وفعالية لكل مساحة.</p>
</div>
</section>
<section id="products" class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">منتجاتنا</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="light1.jpg" class="card-img-top" alt="منتج 1">
<div class="card-body">
<h5 class="card-title">إضاءة سقف LED</h5>
<p class="card-text">إضاءة موفرة للطاقة بجودة عالية وتصميم أنيق.</p>
<p class="text-primary">السعر: 100 ريال</p>
<button class="btn btn-success">أضف إلى السلة</button>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="light2.jpg" class="card-img-top" alt="منتج 2">
<div class="card-body">
<h5 class="card-title">مصباح طاولة حديث</h5>
<p class="card-text">مصباح عملي وأنيق يناسب جميع الاحتياجات.</p>
<p class="text-primary">السعر: 75 ريال</p>
<button class="btn btn-success">أضف إلى السلة</button>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card product-card">
<img src="light3.jpg" class="card-img-top" alt="منتج 3">
<div class="card-body">
<h5 class="card-title">إضاءة حائط فاخرة</h5>
<p class="card-text">إضاءة تضيف لمسة من الفخامة لأي غرفة.</p>
<p class="text-primary">السعر: 150 ريال</p>
<button class="btn btn-success">أضف إلى السلة</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="py-5">
<div class="container">
<h2 class="text-center mb-4">اتصل بنا</h2>
<form>
<div class="mb-3">
<label for="name" class="form-label">الاسم</label>
<input type="text" class="form-control" id="name" placeholder="أدخل اسمك">
</div>
<div class="mb-3">
<label for="email" class="form-label">البريد الإلكتروني</label>
<input type="email" class="form-control" id="email" placeholder="أدخل بريدك الإلكتروني">
</div>
<div class="mb-3">
<label for="message" class="form-label">الرسالة</label>
<textarea class="form-control" id="message" rows="5" placeholder="أدخل رسالتك"></textarea>
</div>
<button type="submit" class="btn btn-primary">إرسال</button>
</form>
</div>
</section>
<footer>
<p>© 2025 متجر الإضاءة. جميع الحقوق محفوظة.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
