571 lines
29 KiB
HTML
571 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ShubraVeil - زيوت طبيعية عطرية</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="logo">
|
|
<a href="/" class="brand-name">
|
|
<span class="brand-first">Veil</span>
|
|
<span class="brand-second">Shubra</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="header-search">
|
|
<div class="search-container">
|
|
<input type="text" class="search-input" placeholder="ابحث عن منتجاتنا الطبيعية...">
|
|
<i class="fas fa-search search-icon"></i>
|
|
<button class="voice-search-btn" title="البحث الصوتي">
|
|
<i class="fas fa-microphone"></i>
|
|
</button>
|
|
<div class="search-results">
|
|
<div class="search-filters">
|
|
<div class="filter-group">
|
|
<h3>الفئات</h3>
|
|
<div class="category-filters">
|
|
<label class="category-filter">
|
|
<input type="checkbox" name="category" value="essential-oils">
|
|
زيوت عطرية
|
|
</label>
|
|
<label class="category-filter">
|
|
<input type="checkbox" name="category" value="fixed-oils">
|
|
زيوت ثابتة
|
|
</label>
|
|
<label class="category-filter">
|
|
<input type="checkbox" name="category" value="hydrosols">
|
|
ماء الزهر
|
|
</label>
|
|
<label class="category-filter">
|
|
<input type="checkbox" name="category" value="natural-cosmetics">
|
|
مستحضرات تجميل طبيعية
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="nav-links">
|
|
<a href="/" class="active">الرئيسية</a>
|
|
<a href="/about">من نحن</a>
|
|
<div class="dropdown">
|
|
<a href="/products" class="dropdown-toggle">منتجاتنا</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="/products/essential-oils">الزيوت العطرية</a></li>
|
|
<li><a href="/products/fixed-oils">الزيوت الثابتة</a></li>
|
|
<li><a href="/products/hydrosols">ماء الزهر</a></li>
|
|
<li><a href="/products/natural-cosmetics">مستحضرات تجميل طبيعية</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="dropdown">
|
|
<a href="/benefits" class="dropdown-toggle">فوائد الزيوت</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="/benefits/skin">العناية بالبشرة</a></li>
|
|
<li><a href="/benefits/hair">العناية بالشعر</a></li>
|
|
<li><a href="/benefits/health">الفوائد الصحية</a></li>
|
|
<li><a href="/benefits/aromatherapy">العلاج بالعطور</a></li>
|
|
</ul>
|
|
</div>
|
|
<a href="/contact">تواصل معنا</a>
|
|
</nav>
|
|
|
|
<div class="nav-actions">
|
|
<div class="user-account">
|
|
<a href="/account" class="account-btn">
|
|
<i class="fas fa-user"></i>
|
|
<span class="btn-text">حسابي</span>
|
|
</a>
|
|
<div class="account-dropdown">
|
|
<a href="/login">تسجيل الدخول</a>
|
|
<a href="/register">حساب جديد</a>
|
|
<a href="/profile">الملف الشخصي</a>
|
|
<a href="/orders">طلباتي</a>
|
|
<a href="/wishlist">المفضلة</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shopping-cart">
|
|
<a href="/cart" class="cart-btn">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
<span class="cart-count">0</span>
|
|
<span class="btn-text">السلة</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="hero" class="hero">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<h1>زيوت طبيعية نقية 100%</h1>
|
|
<p>نقدم لكم أجود أنواع الزيوت العطرية المستخلصة من أراضي شبرا بلولة الخصبة</p>
|
|
<div class="hero-buttons">
|
|
<a href="#products" class="btn primary">تصفح منتجاتنا</a>
|
|
<a href="#about" class="btn secondary">تعرف علينا</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features" class="features">
|
|
<div class="container">
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<i class="fas fa-leaf"></i>
|
|
<h3>طبيعي 100%</h3>
|
|
<p>زيوت مستخلصة بطريقة طبيعية</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<i class="fas fa-certificate"></i>
|
|
<h3>جودة عالية</h3>
|
|
<p>معتمدة من أفضل المختبرات</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<i class="fas fa-shipping-fast"></i>
|
|
<h3>شحن سريع</h3>
|
|
<p>توصيل لجميع المناطق</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="featured" class="featured-section">
|
|
<div class="container">
|
|
<h2 class="section-title">منتجاتنا المميزة</h2>
|
|
<div class="featured-products">
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<img src="images/products/lavender.jpg" alt="زيت اللافندر">
|
|
<span class="badge">الأكثر مبيعاً</span>
|
|
</div>
|
|
<div class="product-info">
|
|
<h3>زيت اللافندر العطري</h3>
|
|
<p>زيت عطري طبيعي 100% للاسترخاء والعناية بالبشرة</p>
|
|
<button class="btn">اطلب الآن</button>
|
|
</div>
|
|
</div>
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<img src="images/products/rosemary.jpg" alt="زيت إكليل الجبل">
|
|
<span class="badge">جديد</span>
|
|
</div>
|
|
<div class="product-info">
|
|
<h3>زيت إكليل الجبل</h3>
|
|
<p>يساعد على تنشيط الذهن وتقوية الشعر</p>
|
|
<button class="btn">اطلب الآن</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="special-offers" class="special-offers">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>عروض خاصة</h2>
|
|
<p>اكتشف أفضل العروض والتخفيضات على منتجاتنا</p>
|
|
</div>
|
|
|
|
<div class="offers-grid">
|
|
<!-- العرض الرئيسي -->
|
|
<div class="main-offer">
|
|
<div class="offer-card featured">
|
|
<div class="offer-badge">خصم 30%</div>
|
|
<img src="images/products/lavender-oil.jpg" alt="زيت اللافندر">
|
|
<div class="offer-content">
|
|
<h3>زيت اللافندر الأصلي</h3>
|
|
<p>استمتع بخصم حصري على زيت اللافندر النقي 100%</p>
|
|
<div class="price">
|
|
<span class="old-price">300 ج.م</span>
|
|
<span class="new-price">210 ج.م</span>
|
|
</div>
|
|
<button class="btn primary">أضف للسلة</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- العروض الفرعية -->
|
|
<div class="offers-list">
|
|
<div class="offer-card">
|
|
<div class="offer-badge">جديد</div>
|
|
<img src="images/products/rosemary-oil.jpg" alt="زيت إكليل الجبل">
|
|
<div class="offer-content">
|
|
<h3>زيت إكليل الجبل</h3>
|
|
<p>منتج جديد - عرض خاص لفترة محدودة</p>
|
|
<div class="price">
|
|
<span class="new-price">180 ج.م</span>
|
|
</div>
|
|
<button class="btn primary">أضف للسلة</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="offer-card">
|
|
<div class="offer-badge">خصم 20%</div>
|
|
<img src="images/products/tea-tree-oil.jpg" alt="زيت شجرة الشاي">
|
|
<div class="offer-content">
|
|
<h3>زيت شجرة الشاي</h3>
|
|
<p>العرض ساري حتى نفاذ الكمية</p>
|
|
<div class="price">
|
|
<span class="old-price">250 ج.م</span>
|
|
<span class="new-price">200 ج.م</span>
|
|
</div>
|
|
<button class="btn primary">أضف للسلة</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="offer-card">
|
|
<div class="offer-badge">عرض خاص</div>
|
|
<img src="images/products/peppermint-oil.jpg" alt="زيت النعناع">
|
|
<div class="offer-content">
|
|
<h3>زيت النعناع الطبيعي</h3>
|
|
<p>اشترِ قارورتين واحصل على الثالثة مجاناً</p>
|
|
<div class="price">
|
|
<span class="new-price">150 ج.م</span>
|
|
</div>
|
|
<button class="btn primary">أضف للسلة</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- شريط العروض المتحرك -->
|
|
<div class="offers-ticker">
|
|
<div class="ticker-content">
|
|
<span>🌟 خصم 15% على جميع المنتجات للأعضاء الجدد</span>
|
|
<span>🚚 شحن مجاني للطلبات أكثر من 500 ج.م</span>
|
|
<span>🎁 هدية مجانية مع كل طلب أكثر من 1000 ج.م</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="products" class="products">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>منتجاتنا</h2>
|
|
<p>مجموعة متنوعة من الزيوت العطرية الطبيعية</p>
|
|
</div>
|
|
<div class="products-grid">
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<img src="images/products 2.jpg" alt="زيت الياسمين المطلق">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3>زيت الياسمين المطلق</h3>
|
|
<p>زيت عطري طبيعي 100% من زهور الياسمين</p>
|
|
<div class="product-features">
|
|
<span>طبيعي 100%</span>
|
|
<span>استخلاص مباشر</span>
|
|
</div>
|
|
<a href="#contact" class="btn primary">اطلب الآن</a>
|
|
</div>
|
|
</div>
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<img src="images/proudctus.jpg" alt="زيت إكليل الجبل">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3>زيت إكليل الجبل</h3>
|
|
<p>زيت عطري نقي مستخلص من نبات إكليل الجبل</p>
|
|
<div class="product-features">
|
|
<span>طبيعي 100%</span>
|
|
<span>استخلاص مباشر</span>
|
|
</div>
|
|
<a href="#contact" class="btn primary">اطلب الآن</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="about">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>قرية شبرا بلولة</h2>
|
|
<p>مصدر الكنوز العطرية الطبيعية</p>
|
|
</div>
|
|
<div class="about-content">
|
|
<div class="about-text">
|
|
<p>تعد قرية شبرا بلولة مصدراً للكنوز العطرية التي تنمو بين أراضيها الخصبة. من هنا، تستخلص شركتنا زيوتها، معتمدة على هذا المورد الطبيعي الثمين لتقديم منتجات عالية الجودة، تتميز برائحة الياسمين الفريدة، التي تساهم في تعزيز الصحة والجمال.</p>
|
|
<ul class="about-features">
|
|
<li>استخلاص طبيعي 100%</li>
|
|
<li>زراعة عضوية مستدامة</li>
|
|
<li>جودة عالمية</li>
|
|
</ul>
|
|
</div>
|
|
<div class="about-image">
|
|
<img src="images/1.jpg" alt="حقول شبرا بلولة">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="benefits" class="benefits">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>فوائد الزيوت العطرية</h2>
|
|
<p>اكتشف الفوائد الصحية والجمالية لزيوتنا الطبيعية</p>
|
|
</div>
|
|
<div class="benefits-grid">
|
|
<div class="benefit-card">
|
|
<i class="fas fa-heart"></i>
|
|
<h3>الصحة النفسية</h3>
|
|
<p>تساعد على الاسترخاء وتحسين المزاج</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<i class="fas fa-spa"></i>
|
|
<h3>العناية بالبشرة</h3>
|
|
<p>تغذية وترطيب طبيعي للبشرة</p>
|
|
</div>
|
|
<div class="benefit-card">
|
|
<i class="fas fa-wind"></i>
|
|
<h3>تعطير المنزل</h3>
|
|
<p>روائح طبيعية منعشة للمنزل</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="testimonials" class="testimonials-section">
|
|
<div class="container">
|
|
<h2 class="section-title">آراء عملائنا</h2>
|
|
<div class="testimonials-slider">
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-content">
|
|
<div class="rating">
|
|
<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>
|
|
<p>"زيوت عطرية رائعة وطبيعية 100%. استخدمت زيت اللافندر للاسترخاء وكانت النتائج مذهلة!"</p>
|
|
<div class="testimonial-author">
|
|
<img src="images/testimonials/user1.jpg" alt="سارة أحمد">
|
|
<div class="author-info">
|
|
<h4>سارة أحمد</h4>
|
|
<span>عميلة منذ 2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-content">
|
|
<div class="rating">
|
|
<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>
|
|
<p>"جودة استثنائية وخدمة عملاء ممتازة. أنصح بشدة بزيت إكليل الجبل لتقوية الشعر."</p>
|
|
<div class="testimonial-author">
|
|
<img src="images/testimonials/user2.jpg" alt="محمد علي">
|
|
<div class="author-info">
|
|
<h4>محمد علي</h4>
|
|
<span>عميل منذ 2024</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="newsletter" class="newsletter-section">
|
|
<div class="container">
|
|
<div class="newsletter-content">
|
|
<h2>اشترك في نشرتنا البريدية</h2>
|
|
<p>احصل على آخر العروض والأخبار عن منتجاتنا</p>
|
|
<form id="newsletter-form" class="newsletter-form">
|
|
<div class="form-group">
|
|
<input type="email" id="email" name="email" placeholder="أدخل بريدك الإلكتروني" required>
|
|
<button type="submit" class="btn">اشترك الآن</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>تواصل معنا</h2>
|
|
<p>نحن هنا للإجابة على استفساراتكم</p>
|
|
</div>
|
|
<div class="contact-content">
|
|
<div class="contact-info">
|
|
<div class="info-item">
|
|
<i class="fas fa-phone"></i>
|
|
<h3>اتصل بنا</h3>
|
|
<p>+20 123 456 789</p>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-envelope"></i>
|
|
<h3>راسلنا</h3>
|
|
<p>info@shubraveil.com</p>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<h3>زورنا</h3>
|
|
<p>شبرا بلولة، مصر</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="reviews-section">
|
|
<h2>مراجعات العملاء</h2>
|
|
|
|
<div class="review-summary">
|
|
<div class="average-rating">
|
|
<h3>التقييم العام</h3>
|
|
<div class="rating-value">4.5</div>
|
|
<div class="rating-stars">
|
|
<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>
|
|
<span class="total-reviews">125 مراجعة</span>
|
|
</div>
|
|
|
|
<div class="rating-breakdown">
|
|
<div class="rating-bar">
|
|
<span>5 نجوم</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 70%"></div>
|
|
</div>
|
|
<span>70%</span>
|
|
</div>
|
|
<div class="rating-bar">
|
|
<span>4 نجوم</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 20%"></div>
|
|
</div>
|
|
<span>20%</span>
|
|
</div>
|
|
<div class="rating-bar">
|
|
<span>3 نجوم</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 5%"></div>
|
|
</div>
|
|
<span>5%</span>
|
|
</div>
|
|
<div class="rating-bar">
|
|
<span>2 نجوم</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 3%"></div>
|
|
</div>
|
|
<span>3%</span>
|
|
</div>
|
|
<div class="rating-bar">
|
|
<span>1 نجمة</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 2%"></div>
|
|
</div>
|
|
<span>2%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="review-controls">
|
|
<div class="review-filters">
|
|
<button class="review-filter active" data-rating="all">الكل</button>
|
|
<button class="review-filter" data-rating="5">5 نجوم</button>
|
|
<button class="review-filter" data-rating="4">4 نجوم</button>
|
|
<button class="review-filter" data-rating="3">3 نجوم</button>
|
|
<button class="review-filter" data-rating="2">2 نجوم</button>
|
|
<button class="review-filter" data-rating="1">نجمة واحدة</button>
|
|
</div>
|
|
|
|
<select id="review-sort" class="review-sort">
|
|
<option value="newest">الأحدث</option>
|
|
<option value="highest">الأعلى تقييماً</option>
|
|
<option value="lowest">الأقل تقييماً</option>
|
|
<option value="helpful">الأكثر إفادة</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="reviews-container">
|
|
<!-- سيتم ملء هذا القسم ديناميكياً بالمراجعات -->
|
|
</div>
|
|
|
|
<form id="review-form" class="review-form">
|
|
<h3>أضف مراجعتك</h3>
|
|
|
|
<div class="rating-input-container">
|
|
<label>تقييمك:</label>
|
|
<div class="rating-stars">
|
|
<i class="far fa-star" data-rating="1"></i>
|
|
<i class="far fa-star" data-rating="2"></i>
|
|
<i class="far fa-star" data-rating="3"></i>
|
|
<i class="far fa-star" data-rating="4"></i>
|
|
<i class="far fa-star" data-rating="5"></i>
|
|
</div>
|
|
<input type="hidden" id="rating-input" name="rating" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="review-content">مراجعتك:</label>
|
|
<textarea id="review-content" name="content" placeholder="اكتب رأيك في المنتج..." required></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="review-images">إضافة صور:</label>
|
|
<input type="file" id="review-images" name="images[]" multiple accept="image/*">
|
|
</div>
|
|
|
|
<button type="submit" class="submit-review">نشر المراجعة</button>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-about">
|
|
<img src="images/logo.jpg" alt="ShubraVeil" class="footer-logo">
|
|
<p>نقدم أجود أنواع الزيوت العطرية الطبيعية المستخلصة من أراضي شبرا بلولة الخصبة</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<h4>روابط سريعة</h4>
|
|
<ul>
|
|
<li><a href="#home">الرئيسية</a></li>
|
|
<li><a href="#about">من نحن</a></li>
|
|
<li><a href="#products">منتجاتنا</a></li>
|
|
<li><a href="#contact">تواصل معنا</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-social">
|
|
<h4>تابعنا</h4>
|
|
<div class="social-links">
|
|
<a href="#"><i class="fab fa-facebook"></i></a>
|
|
<a href="#"><i class="fab fa-instagram"></i></a>
|
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>جميع الحقوق محفوظة © 2024 ShubraVeil</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|