Services Section Component
A clean, grid-based section to showcase services, featuring animated cards with distinct icons, descriptive text, and a bulleted list of key features for each service.
LTR
RTL
<section class="py-20 bg-white dark:bg-gray-900" x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-16 text-center">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white">
Our Services
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
Comprehensive solutions designed to accelerate your business growth and digital transformation.
</p>
</div>
</div>
<div class="grid gap-8 mb-20 md:grid-cols-2 lg:grid-cols-3">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="group transition-all duration-1000 ease-out delay-200 p-8 rounded-2xl bg-gray-50 dark:bg-gray-800">
<div class="items-center justify-center group-hover:bg-blue-600 transition-colors duration-300 flex w-[64px] h-[64px] mb-6 rounded-full bg-blue-100 dark:bg-blue-900">
<div>
<svg class="w-8 h-8 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
</div>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
Web Development
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Custom websites and web applications built with modern technologies for optimal performance and user experience.
</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="items-center flex">
<svg class="w-4 h-4 text-blue-600 mr-2 rtl:ml-2 rtl:mr-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-300">Responsive Design</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-blue-600 mr-2 rtl:ml-2 rtl:mr-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-300">SEO Optimization</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-blue-600 mr-2 rtl:ml-2 rtl:mr-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-300">Performance Optimization</span>
</li>
</ul>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="group transition-all duration-1000 ease-out delay-400 p-8 rounded-2xl bg-gray-50 dark:bg-gray-800">
<div class="items-center justify-center group-hover:bg-green-600 transition-colors duration-300 flex w-[64px] h-[64px] mb-6 rounded-full bg-green-100 dark:bg-green-900">
<div>
<svg class="w-8 h-8 text-green-600 dark:text-green-400 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
</div>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
Mobile Apps
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Native and cross-platform mobile applications that deliver exceptional user experiences on iOS and Android.
</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="items-center flex">
<svg class="w-4 h-4 text-green-600 mr-2 rtl:ml-2 rtl:mr-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-300">iOS & Android</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-green-600 mr-2 rtl:ml-2 rtl:mr-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-300">Cross-platform</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-green-600 mr-2 rtl:ml-2 rtl:mr-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-300">App Store Ready</span>
</li>
</ul>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="group transition-all duration-1000 ease-out delay-600 p-8 rounded-2xl bg-gray-50 dark:bg-gray-800">
<div class="items-center justify-center group-hover:bg-purple-600 transition-colors duration-300 flex w-[64px] h-[64px] mb-6 rounded-full bg-purple-100 dark:bg-purple-900">
<div>
<svg class="w-8 h-8 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
</div>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
Cloud Solutions
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Scalable cloud infrastructure and services to ensure your applications run smoothly and securely at any scale.
</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="items-center flex">
<svg class="w-4 h-4 text-purple-600 mr-2 rtl:ml-2 rtl:mr-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-300">AWS & Azure</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-purple-600 mr-2 rtl:ml-2 rtl:mr-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-300">Auto-scaling</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-purple-600 mr-2 rtl:ml-2 rtl:mr-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-300">Security First</span>
</li>
</ul>
</div>
</div>
</div>
</section>