@extends('layouts.app')

@section('title', 'Our Services')

@section('content')
<section class="page-hero">
    <div class="container">
        <span class="section-label">Services</span>
        <h1>Our Services</h1>
        <p>We provide various software development and consulting development services. Our services are not limited to these…</p>
    </div>
</section>

<section class="section services-section">
    <div class="container">
        <div class="services-grid">
            @php
            $services = [
                ['slug' => 'web-design', 'icon' => 'fa-layer-group', 'title' => 'Website Design', 'desc' => 'Website designing is one of the main factors to success in this internet dominated world.', 'color' => 'teal'],
                ['slug' => 'ecommerce', 'icon' => 'fa-store', 'title' => 'E Commerce Solutions', 'desc' => 'Design and develop dynamic E-commerce websites to upgrade your business.', 'color' => 'blue'],
                ['slug' => 'seo', 'icon' => 'fa-chart-line', 'title' => 'Search Engine Optimization', 'desc' => 'SEO is integral when your brand\'s website goes live on the internet.', 'color' => 'blue'],
                ['slug' => 'mobile', 'icon' => 'fa-mobile-screen-button', 'title' => 'Mobile Application Development', 'desc' => 'Android apps displayed properly across shapes and sizes for success.', 'color' => 'cyan'],
                ['slug' => 'api', 'icon' => 'fa-plug', 'title' => 'API Integration', 'desc' => 'E-commerce, cab booking, school education booking API integration.', 'color' => 'blue'],
            ];
            @endphp
            @foreach($services as $service)
            <article class="service-card reveal service-{{ $service['color'] }}">
                <div class="service-icon"><i class="fas {{ $service['icon'] }}"></i></div>
                <h3>{{ $service['title'] }}</h3>
                <p>{{ $service['desc'] }}</p>
                <a href="{{ route('services.show', $service['slug']) }}" class="service-link">Explore <i class="fas fa-arrow-right"></i></a>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endsection