Professional Services Page - Copy this Html, Tailwind Component to your project
<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"-rel="stylesheet">-<style>-:root-{---primary-bg:-#2C3E50;---secondary-bg:-#34495E;---accent-color:-#1ABC9C;---hover-color:-#E67E22;---text-color:-white;-}-*-{-margin:-0;-padding:-0;-box-sizing:-border-box;-}-body-{-font-family:-'Arial',-sans-serif;-background-color:-var(--primary-bg);-color:-var(--text-color);-transition:-background-color-0.3s,-color-0.3s;-padding-bottom:-70px;-}-header-{-background-color:-var(--secondary-bg);-padding:-15px;-position:-sticky;-top:-0;-z-index:-1000;-}-.header-content-{-display:-flex;-justify-content:-space-between;-align-items:-center;-padding:-0-20px;-}-.header-content-i-{-font-size:-24px;-cursor:-pointer;-transition:-color-0.3s;-}-.header-content-i:hover-{-color:-var(--accent-color);-}-.main-content-{-padding:-20px;-max-width:-1200px;-margin:-0-auto;-}-.search-bar-{-position:-relative;-margin:-20px-0;-}-.search-bar-input-{-width:-100%;-padding:-12px-40px-12px-12px;-border:-none;-border-radius:-8px;-background-color:-var(--secondary-bg);-color:-var(--text-color);-font-size:-16px;-}-.search-bar-i-{-position:-absolute;-right:-12px;-top:-50%;-transform:-translateY(-50%);-color:-var(--text-color);-}-.filter-buttons-{-display:-flex;-gap:-10px;-margin:-20px-0;-overflow-x:-auto;-padding-bottom:-10px;-}-.filter-button-{-padding:-8px-16px;-border:-none;-border-radius:-20px;-background-color:-var(--secondary-bg);-color:-var(--text-color);-cursor:-pointer;-transition:-background-color-0.3s;-white-space:-nowrap;-}-.filter-button.active-{-background-color:-var(--accent-color);-}-.services-grid-{-display:-grid;-grid-template-columns:-repeat(auto-fill,-minmax(300px,-1fr));-gap:-20px;-margin-top:-20px;-}-.service-card-{-background-color:-var(--secondary-bg);-border-radius:-12px;-overflow:-hidden;-transition:-transform-0.3s;-}-.service-card:hover-{-transform:-translateY(-5px);-}-.service-image-{-width:-100%;-height:-200px;-object-fit:-cover;-}-.service-content-{-padding:-15px;-}-.service-title-{-font-size:-18px;-margin-bottom:-8px;-}-.service-provider-{-color:-#95a5a6;-font-size:-14px;-}-.service-location-{-margin:-10px-0;-color:-#95a5a6;-}-.service-rating-{-display:-flex;-align-items:-center;-gap:-5px;-}-.service-rating-i-{-color:-#f1c40f;-}-.book-button-{-padding:-8px-16px;-border:-none;-border-radius:-20px;-background-color:-var(--accent-color);-color:-white;-cursor:-pointer;-transition:-background-color-0.3s;-}-.book-button:hover-{-background-color:-var(--hover-color);-}-.footer-{-background-color:-var(--secondary-bg);-position:-fixed;-bottom:-0;-width:-100%;-padding:-10px;-display:-flex;-justify-content:-space-around;-z-index:-1000;-}-.footer-item-{-display:-flex;-flex-direction:-column;-align-items:-center;-gap:-5px;-cursor:-pointer;-transition:-color-0.3s;-}-.footer-item:hover-{-color:-var(--accent-color);-}-.footer-item-i-{-font-size:-24px;-}-.footer-item-span-{-font-size:-12px;-}-.section-{-margin:-20px-0;-background-color:-var(--secondary-bg);-border-radius:-12px;-padding:-15px;-}-.section-title-{-font-size:-18px;-margin-bottom:-15px;-color:-var(--accent-color);-}-ul-{-list-style:-none;-}-li-{-display:-flex;-align-items:-center;-gap:-10px;-padding:-15px;-margin:-10px-0;-background-color:-var(--primary-bg);-border-radius:-8px;-cursor:-pointer;-transition:-background-color-0.3s;-}-li:hover-{-background-color:-var(--hover-color);-}-.trending-tag-{-background-color:-var(--accent-color);-color:-white;-padding:-4px-8px;-border-radius:-12px;-font-size:-12px;-display:-inline-flex;-align-items:-center;-gap:-4px;-}-</style>-</head>-<body>-<header>-<div-class="header-content">-<i-class="fas-fa-user"></i>-<h1>خدماتنا</h1>-<i-class="fas-fa-cog"></i>-</div>-</header>-<div-class="main-content">-<div-class="search-bar">-<input-type="text"-id="serviceSearch"-placeholder="ابحث-عن-خدمة...">-<i-class="fas-fa-search"></i>-</div>-<div-class="filter-buttons">-<button-class="filter-button-active"-data-category="all">الكل</button>-<button-class="filter-button"-data-category="category1">فئة-1</button>-<button-class="filter-button"-data-category="category2">فئة-2</button>-<button-class="filter-button"-data-category="category3">فئة-3</button>-</div>-<div-class="services-grid"-id="servicesGrid">-<!---Example-Service-Card--->-<div-class="service-card">-<img-src="service-image.jpg"-alt="Service"-class="service-image">-<div-class="service-content">-<h2-class="service-title">عنوان-الخدمة</h2>-<p-class="service-provider">مزود-الخدمة</p>-<p-class="service-location">الموقع</p>-<div-class="service-rating">-<i-class="fas-fa-star"></i>-<span>4.5</span>-</div>-<button-class="book-button">احجز-الآن</button>-</div>-</div>-<!---Other-service-cards-will-be-rendered-here--->-</div>-</div>-<footer-class="footer">-<div-class="footer-item">-<i-class="fas-fa-home"></i>-<span>الرئيسية</span>-</div>-<div-class="footer-item">-<i-class="fas-fa-heart"></i>-<span>المفضلة</span>-</div>-<div-class="footer-item">-<i-class="fas-fa-user"></i>-<span>حسابي</span>-</div>-</footer>-<script>-function-initializeApp()-{-showHome();-//-Function-needs-to-be-defined-updateTime();-initializeServices();-//-Function-needs-to-be-defined-setupEventListeners();-}-function-updateTime()-{-setInterval(()-=>-{-const-now-=-new-Date();-document.getElementById('time').textContent-=-now.toLocaleTimeString('ar-SA');-},-1000);-}-function-setupEventListeners()-{-document.querySelectorAll('.filter-button').forEach(button-=>-{-button.addEventListener('click',-(e)-=>-{-document.querySelectorAll('.filter-button').forEach(btn-=>-btn.classList.remove('active'));-e.target.classList.add('active');-filterServices(e.target.dataset.category);-});-});-document.getElementById('serviceSearch').addEventListener('input',-handleSearch);-}-function-handleSearch(e)-{-const-searchTerm-=-e.target.value.trim().toLowerCase();-filterServices(-document.querySelector('.filter-button.active').dataset.category,-searchTerm-);-}-function-filterServices(category,-searchTerm-=-'')-{-const-grid-=-document.getElementById('servicesGrid');-let-filteredServices-=-services;-//-Assume-services-is-defined-globally-if-(category-!==-'all')-{-filteredServices-=-filteredServices.filter(service-=>-service.category-===-category);-}-if-(searchTerm)-{-filteredServices-=-filteredServices.filter(service-=>-service.title.toLowerCase().includes(searchTerm)-||-service.provider.toLowerCase().includes(searchTerm)-||-service.location.toLowerCase().includes(searchTerm)-);-}-grid.innerHTML-=-filteredServices.map(createServiceCard).join('');-//-Function-needs-to-be-defined-}-window.addEventListener('load',-initializeApp);-</script>-</body>-</html>-improve
