// Create section element
const servicesSection = document.createElement('section');
servicesSection.classList.add('services-section');
// Create container div
const servicesContainer = document.createElement('div');
servicesContainer.classList.add('services-container');
// Create grid div
const servicesGrid = document.createElement('div');
servicesGrid.classList.add('services-grid');
// Service items data (could be dynamic)
const serviceItems = [
{
imageUrl: 'https://i.postimg.cc/3wGrrzcP/4.png',
title: 'خدمة التوصيل السريع لجميع المملكة',
description: 'نحن نضمن لك توصيل سريع وآمن إلى جميع أنحاء المملكة.'
},
{
imageUrl: 'https://i.postimg.cc/Yqyt6pc5/3.png',
title: 'دعم فني واستشاري مجاني',
description: 'نوفر لك استشارة فنية متخصصة مجانًا لضمان أفضل تجربة.'
},
{
imageUrl: 'https://i.ibb.co/RGs2Tqvx/2.png',
title: 'تشكيلة واسعة من الطابعات والأحبار',
description: 'اختر من بين العديد من الخيارات المتنوعة التي تناسب احتياجاتك.'
},
{
imageUrl: 'https://i.ibb.co/zWT3XV1g/1.png',
title: 'جودة مضمونة بأسعار تنافسية',
description: 'نقدم لك منتجات عالية الجودة بأسعار تناسب ميزانيتك.'
},
];
// Create service items and add content
serviceItems.forEach(serviceItem => {
const serviceItemElement = document.createElement('div');
serviceItemElement.classList.add('service-item');
// Create image
const serviceImage = document.createElement('img');
serviceImage.src = serviceItem.imageUrl;
serviceImage.alt = serviceItem.title;
// Create title
const serviceTitle = document.createElement('h2');
serviceTitle.textContent = serviceItem.title;
// Create description
const serviceDescription = document.createElement('p');
serviceDescription.textContent = serviceItem.description;
// Append elements to service item
serviceItemElement.appendChild(serviceImage);
serviceItemElement.appendChild(serviceTitle);
serviceItemElement.appendChild(serviceDescription);
// Add service item to grid
servicesGrid.appendChild(serviceItemElement);
});
// Add grid to container
servicesContainer.appendChild(servicesGrid);
// Add container to section
servicesSection.appendChild(servicesContainer);
// Find existing section
const testimonialsSection = document.querySelector('section.s-block.s-block--testimonials.container.overflow-hidden');
// Insert new section after existing section
if (testimonialsSection) {
testimonialsSection.after(servicesSection);
} else {
console.error('Testimonials section not found');
}
// Add CSS styles
const styleElement = document.createElement('style');
styleElement.textContent = `
.services-section {
background-color: #f9f9f9;
padding: 10px 0;
}
.services-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.services-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}
.service-item {
flex: 1 1 calc(25% - 20px);
text-align: center;
padding: 10px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.service-item img {
width: 80px;
height: 80px;
margin-bottom: 15px;
}
.service-item h2 {
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
.service-item p {
font-size: 14px;
color: #666;
}
`;
// Add style to head
document.head.appendChild(styleElement);
setTimeout(() => {
const contactsContainer = document.querySelector(".s-contacts-list");
if (contactsContainer) {
contactsContainer.innerHTML = `
`;
} else {
console.error('Contacts container not found');
}
}, 1000);
// Icon helper functions
function getWhatsAppIcon() {
return `
`;
}
function getPhoneIcon() {
return `
`;
}
function getEmailIcon() {
return `
`;
}
const sections = document.querySelectorAll('.s-block,section.s-block.s-block--testimonials.container.overflow-hidden.fade-in.section-visible,.services-section'); // تحديد السكشنات اللي عايزين نراقبها
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('section-visible'); // لما السكشن يظهر في الشاشة، نضيف الكلاس
}
});
}, { threshold: 0.5 }); // 50% من العنصر لازم يظهر في الـ viewport عشان يتحقق التأثير
sections.forEach(section => {
section.classList.add('fade-in'); // إضافة الكلاس fade-in لكل سكشن
observer.observe(section); // مراقبة السكشنات
});