@extends('website.layouts.app')
@section('content')
    <section id="breadcrumb">
        <div class="container-fluid fixedwidth">
            <div class="row d-flex justify-content-lg-center justify-content-md-start align-item-center">
                <div class="col-md-9">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mt-lg-3 pt-4 pt-lg-0">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active"><a href="#">Customer loyalty plans</a></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <section id="customer-plan">
        <div class="container-fluid fixedwidth mb-md-5 mb-4 ">

            <div class="row d-flex align-items-center justify-content-center">
                <div class="col-lg-9">
                    <div class="top-title">
                        <h3 class="text-start">Customer Loyalty Plans</h3>
                    </div>

                    <div class="plan">
                        <div class="row  d-flex justify-content-center">
                            <div class="col-lg-12">
                                <div class="text-center">
                                    <div class="top-title">
                                        <h2>Loyalty Program</h2>
                                    </div>

                                    <p>Gain points and turn them into rewards</p>
                                </div>
                            </div>
                        </div>



                    </div>



                    <div class="customer-summary">
                        <div class="row  align-items-stretch mt-lg-4 mt-3">
                            <!-- Card 1 -->
                            <div class="col-lg-4 col-md-4 col-12 mb-4 ">
                                <div class="customer-card d-flex flex-column justify-content-between text-center h-100 p-3">
                                    <div>

                                        <h5 class="mb-1">01</h5>
                                        <h4 class="mb-2">Sign Up</h4>
                                    </div>

                                    <p class="flex-grow-1 mb-3">
                                        Sign up as a member to start enjoying the loyalty program.
                                    </p>


                                </div>
                            </div>

                            <!-- Card 2 -->
                            <div class="col-lg-4 col-md-4 col-12 mb-4 ">
                                <div
                                    class="customer-card d-flex flex-column justify-content-between text-center h-100 p-3 custom-border-md-s custom-border-md-e ">

                                    <div class="content ">
                                        <h5 class="mb-1">02</h5>
                                        <h4 class="mb-2">Earn Points</h4>
                                    </div>

                                    <p class="flex-grow-1 mb-3">
                                        Make a purchase get 1 point for every 20$ spent
                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-12 mb-4">
                                <div class="customer-card d-flex flex-column justify-content-between text-center h-100 p-3">

                                    <div>
                                        <h5 class="mb-1">03</h5>
                                        <h4 class="mb-2">Redeem Rewards</h4>
                                    </div>

                                    <p class="flex-grow-1 mb-3">
                                        10% off for all products
                                        10 Points=10% off for all
                                        products
                                    </p>


                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        </div>
    </section>

    <section id="footer-delivery">
        <div class="container-fluid fd-bg py-4 ">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-11">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="{{asset('website/images/l1.svg')}}" alt="" class="img-fluid deliveryimg me-2" />
                                <h5 class="mt-3">Express Delivery</h5>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="{{asset('website/images/l3.svg')}}" alt="" class="img-fluid deliveryimg me-2" />
                                <h5 class="mt-3">No Address Hassle</h5>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-12">
                            <div
                                class="c-detail d-flex justify-content-lg-center justify-content-start align-items-center">
                                <img src="{{asset('website/images/l2.svg')}}" alt="" class="img-fluid deliveryimg me-2" />
                                <h5 class="mt-3">Premium Flowers & Gifts</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection