From c9554e8197de8c20b719edffca70a159207b0f64 Mon Sep 17 00:00:00 2001
From: Edmond Lang <edmond_wuiming@hotmail.com>
Date: Tue, 3 Mar 2026 14:41:50 +0800
Subject: [PATCH] 1688 vip advertisement

---
 .../NewServiceAnnouncementComponent.vue       |   1 +
 .../elements/AdvertisementComponent.vue       | 146 ++++++++++++++++++
 2 files changed, 147 insertions(+)
 create mode 100644 resources/assets/vue/components/general/elements/AdvertisementComponent.vue

diff --git a/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue b/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue
index 19c5ecf5..bd61392c 100644
--- a/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue
+++ b/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue
@@ -69,6 +69,7 @@
                     </div>
                 </div>
             </div>
+            <advertisement-component class="m-b-15 m-t-15" v-if="!isLoading"></advertisement-component>
             <!-- C2C consent -->
             <div class="row m-l-0 m-r-0 m-b-15 animate__animated animate__tada animate__repeat-2 animate__delay-3s" v-if="!data.segments.some(item => item.id === 29)">
                 <div class="col bg-white padding-15">
diff --git a/resources/assets/vue/components/general/elements/AdvertisementComponent.vue b/resources/assets/vue/components/general/elements/AdvertisementComponent.vue
new file mode 100644
index 00000000..aef5ff4f
--- /dev/null
+++ b/resources/assets/vue/components/general/elements/AdvertisementComponent.vue
@@ -0,0 +1,146 @@
+<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>