@extends('users.layout.layout')

@section('title', 'Fan Club | Deals')

@section('main-content')

    <style>
        body {
            overflow-x: hidden;
        }
    </style>

    <section class="banner deal-banner">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-heading">
                        <h1>Local Deals</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="portfolio-sec">
        <div class="harry-port">
            <div class="first-row">
                <div class="portfolio-img">
                    <div class="demo">
                        <div class="box">
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <div class="box-contents">
                                <a class="category-name">case study</a>
                                <img width="510" height="300" alt="" decoding="async"
                                    src="{{ asset('user-assets') }}/website/images/Garlics.jpg"
                                    class="attachment-full size-full lazyload" />
                                <a class="project-name">Alloy</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portfolio-img">
                    <div class="demo">
                        <div class="box">
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <div class="box-contents">
                                <a class="category-name">case study</a>
                                <img width="510" height="300" alt="" decoding="async"
                                    src="{{ asset('user-assets') }}/website/images/Appiell-1.jpg"
                                    class="attachment-full size-full lazyload" />
                                <a class="project-name">Appiell</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portfolio-img">
                    <div class="demo">
                        <div class="box">
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <div class="box-contents">
                                <a class="category-name">case study</a>
                                <img width="510" height="300" alt="" decoding="async"
                                    src="{{ asset('user-assets') }}/website/images/Zadashe.jpg"
                                    class="attachment-full size-full lazyload" />
                                <a class="project-name">Khodry</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="second-row">
                <div class="portfolio-img">
                    <div class="demo">
                        <div class="box">
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <div class="box-contents">
                                <a class="category-name">case study</a>
                                <img width="510" height="300" alt="" decoding="async"
                                    src="{{ asset('user-assets') }}/website/images/Melanin-1.jpg"
                                    class="attachment-full size-full lazyload" />
                                <a class="project-name">Melanin</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portfolio-img">
                    <div class="demo">
                        <div class="box">
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <div class="box-contents">
                                <a class="category-name">case study</a>
                                <img width="510" height="300" alt="" decoding="async"
                                    src="{{ asset('user-assets') }}/website/images/One-Of.jpg"
                                    class="attachment-full size-full lazyload" />
                                <a class="project-name">One of</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portfolio-img">
                    <div class="demo">
                        <div class="box">
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <div class="box-contents">
                                <a class="category-name">case study</a>
                                <img width="510" height="300" alt="" decoding="async"
                                    src="{{ asset('user-assets') }}/website/images/Zadashe-1.jpg"
                                    class="attachment-full size-full lazyload" />
                                <a class="project-name">Zadashe</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="first-row">
                <div class="portfolio-img">
                    <div class="demo">
                        <div class="box">
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <div class="box-contents">
                                <a class="category-name">Websites</a>
                                <img width="651" height="450" alt="" decoding="async"
                                    src="{{ asset('user-assets') }}/website/images/Royaly_Full-scaled-1.jpg"
                                    class="attachment-full size-full lazyload" />
                                <a class="project-name">Royalty by B.Green</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portfolio-img">
                    <div class="demo">
                        <div class="box">
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <div class="box-contents">
                                <a class="category-name">branding</a>
                                <img width="704" height="534" alt="" decoding="async"
                                    src="{{ asset('user-assets') }}/website/images/Southshell-scaled-1.jpg"
                                    class="attachment-full size-full lazyload" />
                                <a class="project-name">Southshell</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portfolio-img">
                    <div class="demo">
                        <div class="box">
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <a href="#" class="hover-point"></a>
                            <div class="box-contents">
                                <a class="category-name">digital </a>
                                <img width="528" height="510" alt="" decoding="async"
                                    src="{{ asset('user-assets') }}/website/images/Forever_2-1-scaled-1.jpg"
                                    class="attachment-full size-full lazyload" />
                                <a class="project-name">Forever</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cstm-left"></div>
        <div class="cstm-right"></div>
    </div>

    <section id="section-2">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-heading text-center">
                        <h4>Browse by Category</h4>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/2users.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/2users_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/book.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/book_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/bookwithPen.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/bookwithPen_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/bookwithworld.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/bookwithworld_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/camera.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/camera_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="w-100"></div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/coat1.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/coat1_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/crane.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/crane_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/dish.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/dish_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/dollarcard.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/dollarcard_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/filewithPaper.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/filewithPaper_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="w-100"></div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/football.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/football_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/gearwithHelmet.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/gearwithHelmet_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/glasses.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/glasses_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/handwithHeart.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/handwithHeart_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/jacket.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/jacket_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="w-100"></div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/letterhead.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/letterhead_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/loudspeaker.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/loudspeaker_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/medicines.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/medicines_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/screen.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/screen_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/star1.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/star1_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="w-100"></div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/tableflag.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/tableflag_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/van.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/van_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/dollarcard.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/dollarcard_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/jacket.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/jacket_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="cat_box">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/screen.png"
                            style="width: 80px !important" alt="cat_icon" class="unhover_img">
                        <img src="https://superdevelopers.tech/FanClubCard/public/assets/front/images/othericons/screen_white.png"
                            style="width: 80px !important" alt="cat_icon" class="hover_img">
                    </div>
                </div>
            </div>
    </section>

    <section id="section-3">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="reach-member">
                        <h1 class="text-white">Reach Member-Based Customers with FanClubCard</h1>
                        <h5 class="text-white">Some of the main benefits include</h5>
                        <p class="text-white">
                            <b>For You:</b> Gain instant access to a wide network of consumers <b>For Your Customers:</b>
                            Exclusive offers and discounts at your business. They save money while supporting their favorite
                            organization. <b>For the Community:</b> Helps local organizations raise much needed funds
                        </p>
                        <p class="text-white">Complete the form to have someone from our Team connect with you to discuss
                            how you get your Business Marketing with FanClubCard today!</p>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="form-box">
                        <div class="row">
                            <div class="col-md-12 centerForm">
                                <form>
                                    <div class="row" style="margin-bottom:20px !important">
                                        <div class="col-md-4">
                                            <label for="first_name">First Name</label>
                                            <input name="first_name" id="first_name" class="form-control"
                                                style="padding-left: 10px;" type="text" placeholder="Your First Name">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="last_name">Last Name</label>
                                            <input name="last_name" id="last_name" class="form-control"
                                                style="padding-left: 10px;" type="text" placeholder="Your Last Name">
                                        </div>
                                    </div>
                                    <div class="row" style="margin-bottom:20px !important">
                                        <div class="col-md-4">
                                            <label for="full_name">Full Name</label>
                                            <input name="full_name" id="full_name" class="form-control"
                                                style="padding-left: 10px;" type="text" placeholder="Your Full Name">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="email">Email</label>
                                            <input name="email" id="email" class="form-control"
                                                style="padding-left: 10px;" type="email" placeholder="Your Email">
                                        </div>
                                    </div>
                                    <div class="row" style="margin-bottom:20px !important">
                                        <div class="col-md-4">
                                            <label for="contact">Telephone Number</label>
                                            <input name="contact" id="contact" class="form-control"
                                                style="padding-left: 10px;" type="text">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="website">Website</label>
                                            <input name="website" id="website" class="form-control"
                                                style="padding-left: 10px;" type="url" placeholder="https://">
                                        </div>
                                    </div>
                                    <div class="row" style="margin-bottom:20px !important">
                                        <div class="col-md-8">
                                            <label for="business_type">Business Type</label>
                                            <select name="business_type" id="business_type" class="form-control"
                                                style="padding-left: 15px;width: 101%" style="height: 37px !important">
                                                <option>Select One</option>
                                                <option value="">Option-1</option>
                                                <option value="">Option-2</option>
                                                <option value="">Option-3</option>
                                                <option value="">Option-4</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-bottom:20px !important">
                                        <div class="col-md-8">
                                            <button class="btn btn-submit"> Submit </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection