exchange-2.0/resources/assets/vue/components/general/elements/AdvertisementComponent.vue

<template>
    <div class="row m-b-15 animate__animated animate__tada animate__repeat-2 animate__delay-3s">
        <div class="col">
            <div class="vip-ad-card">
                <div class="row align-items-center">
                    <div class="col-12 m-b-10">
                        <div class="vip-badge">EXCLUSIVE ACCESS</div>
                        <h3 class="vip-title m-t-10 m-b-10">Experience the new way to execute 1688 orders. Free Upgrade to 1688 VIP.</h3>
                        <p class="vip-subtitle m-b-0">
                            Unlock better support, better pricing, and faster execution for your 1688 orders.
                        </p>
                    </div>
                </div>

                <div class="row m-t-20">
                    <div class="col-md-6 m-b-10">
                        <div class="vip-benefit-item">
                            <i class="fa fa-check-circle text-success m-r-5"></i>
                            Priority order handling
                        </div>
                    </div>
                    <div class="col-md-6 m-b-10">
                        <div class="vip-benefit-item">
                            <i class="fa fa-check-circle text-success m-r-5"></i>
                            Competitive exchange rates
                        </div>
                    </div>
                    <div class="col-md-6 m-b-10">
                        <div class="vip-benefit-item">
                            <i class="fa fa-check-circle text-success m-r-5"></i>
                            Dedicated customer support
                        </div>
                    </div>
                    <div class="col-md-6 m-b-10">
                        <div class="vip-benefit-item">
                            <i class="fa fa-check-circle text-success m-r-5"></i>
                            VIP-Only Campaigns & Rebates
                        </div>
                    </div>
                </div>

                <div class="row m-t-5">
                    <div class="col">
                        <p class="vip-footer-text m-b-0">
                            Grow your business with a smoother 1688 payment experience and higher confidence in every transaction.
                        </p>
                    </div>
                </div>

                <div class="row m-t-20">
                    <div class="col">
                        <a class="btn vip-cta-btn w-100" type="button" href="https://wa.link/y4ph0l?utm_campaign=1688-VIP" target="_blank">
                            Activate My 1688 VIP Access
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.vip-ad-card {
    position: relative;
    padding: 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fff9 0%, #eff8ff 100%);
    box-shadow: 0 10px 24px rgba(20, 46, 36, 0.08);
    transform: scale(1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vip-ad-card:hover {
    transform: scale(1.02);
    box-shadow: 0 14px 30px rgba(20, 46, 36, 0.12);
}

.vip-ad-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    z-index: -1;
    box-shadow: 0 0 0 1px rgba(33, 181, 255, 0.25), 0 0 18px rgba(33, 181, 255, 0.3);
}

.vip-badge {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 20px;
    background: linear-gradient(120deg, #00a86b 0%, #1c9ed8 100%);
}

.vip-title {
    color: #1a2d3a;
    font-weight: 700;
}

.vip-subtitle {
    color: #4f5f69;
    font-size: 14px;
}

.vip-benefit-item {
    color: #2e3d45;
    font-size: 14px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 10px 12px;
}

.vip-cta-btn {
    position: relative;
    z-index: 2;
    display: inline-block;
    min-width: 150px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #d5a300 !important;
    color: #1a2d3a !important;
    background-color: #ffd24a !important;
    font-weight: 700;
    border-radius: 30px;
    background-image: none !important;
    box-shadow: 0 10px 22px rgba(213, 163, 0, 0.32), 0 4px 10px rgba(26, 45, 58, 0.2);
}

.vip-cta-btn:hover,
.vip-cta-btn:focus {
    color: #1a2d3a !important;
    background-color: #ffdf7a !important;
    border-color: #d5a300 !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(213, 163, 0, 0.4), 0 6px 12px rgba(26, 45, 58, 0.25);
}

.vip-footer-text {
    color: #4f5f69;
    font-size: 13px;
}
</style>