@extends('front.layout.app')
@section('content')
<div class="mouse-cursor cursor-outer"></div>
<div class="mouse-cursor cursor-inner"></div>


<section class="customization">
    <div class="container-fluid">
        <div class="select-gender">
            <a href="{{route('customization-measurements.front')}}" class="back"><i class="fal fa-angle-left"></i>Back</a>
            <a href="{{route('customization-cart.front')}}" class="themeBtn next">FINISH</a>
        </div>
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="title text-center mb-5">
                    <h2 class="heading">Choose your designer</h2>
                    <p class="para">The designers at Harewa are professional in the African fashion industry</p>
                </div>
                <div class="customization-search">
                    <form action="">
                        <button type="submit"><i class="fas fa-search"></i></button>
                        <input type="text" placeholder="“Search designers”">
                    </form>
                    <ul class="nav nav-tabs unit-tab" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">All</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Male designer</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="female-tab" data-toggle="tab" href="#female" role="tab" aria-controls="female" aria-selected="false">Female designer</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <ul class="designer-container">
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer1.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer2.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer3.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer4.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <ul class="designer-container">
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer1.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer2.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer3.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer4.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="female" role="tabpanel" aria-labelledby="female-tab">
                        <ul class="designer-container">
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer1.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer2.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer3.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <figure class="designer-container__img">
                                    <img src="{{asset('assets/images/designer4.png')}}" alt="image" class="img-fluid">
                                </figure>
                                <div class="designer-containerDetails">
                                    <h4 class="title">Maria Davies</h4>
                                    <h5 class="designation">Fashionista | Aso Ebi | Bridal </h5>
                                    <h6 class="location"><i class="fas fa-map-marker-alt"></i> Lagos</h6>
                                </div>
                                <div class="designer-container__rating">
                                    <button class="themeBtn">SELECT</button>
                                    <div class="star">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection