@extends('layouts.master')

@section('styles')

@endsection

@section('content')

    <!-- PAGE-HEADER -->
    <div class="page-header">
        <h1 class="page-title">{{ __('menu.about') }}</h1>
    </div>
    <!-- PAGE-HEADER END -->

    <div class="row">
        @php
            // Faker'ı kullanmak için
            $faker = Faker\Factory::create();
        @endphp
        @for($i = 0; $i < 6; $i++)
            @php
                $name = $faker->name;
                $job = $faker->jobTitle;
                $image = $faker->imageUrl(128, 128, 'people');
            @endphp
            <div class="col-md-4 col-xl-4">
                <div class="card ">
                    <div class="card-body text-center">
                        <span class="avatar avatar-xxl brround cover-image cover-image" data-bs-image-src="https://laravelui.spruko.com/volgh/build/assets/images/users/18.jpg" style="background: url('https://laravelui.spruko.com/volgh/build/assets/images/users/18.jpg') center center;"></span>
                        <h4 class="h4 mb-0 mt-3">{{ $name }}</h4>
                        <p class="card-text">{{ $job }}</p>
                    </div>
                    <div class="card-footer text-center">
                        <div class="user-social-detail">
                            <div class="">
                                <a href="javascript:void(0);"><i class="fa fa-facebook text-info" aria-hidden="true"></i></a>
                            </div>
                            <div class="">
                                <a href="javascript:void(0);" class="google-plus"><i class="fa fa-google-plus text-danger" aria-hidden="true"></i></a>
                            </div>
                            <div class="">
                                <a href="javascript:void(0);"><i class="fa fa-twitter text-info" aria-hidden="true"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- COL END -->
        @endfor
    </div>

@endsection