ondc-campaign-sdk
Version:
[](https://www.npmjs.com/package/ondc-campaign-sdk) [](LICENSE) [ • 94.1 kB
HTML
<style>
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
background: #f8fafc;
}
.campaigns-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
padding: 16px;
}
.campaign-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
flex: 0 0 421px;
max-width: 421px;
}
.campaign-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
border-color: #d1d5db;
}
/* Template-specific styles for cards */
.campaign-card .banner-showcase {
position: relative;
overflow: hidden;
}
.campaign-card .banner-container {
width: 100%;
position: relative;
overflow: hidden;
}
.campaign-card .banner-container img {
width: 100%;
height: auto;
display: block;
}
.campaign-card .banner-content-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
z-index: 2;
}
/* Ensure text content is visible and properly sized */
.campaign-card .banner-text-content {
max-width: 100%;
width: 100%;
}
.campaign-card .banner-headline {
margin: 0 0 0.5rem 0;
line-height: 1.2;
word-wrap: break-word;
}
.campaign-card .banner-description-text {
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
}
.campaign-card .banner-cta-button {
margin: 0;
white-space: nowrap;
}
.campaign-card .banner-content-wrapper.template-centered {
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.campaign-card .banner-content-wrapper.template-left-aligned {
align-items: center !important;
justify-content: flex-start !important;
}
.campaign-card .banner-content-wrapper.template-overlay {
align-items: center !important;
justify-content: center !important;
}
.campaign-card .banner-content-wrapper.template-card-style {
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.campaign-card .banner-content-wrapper.template-left-text .banner-text-content {
text-align: left !important;
}
.campaign-card .banner-content-wrapper.template-left-text .banner-headline {
text-align: left !important;
}
.campaign-card .banner-content-wrapper.template-left-text .banner-description-text {
text-align: left !important;
}
.campaign-card .banner-content-wrapper.template-left-text .banner-cta-button {
margin: 0 !important;
}
.campaign-card .banner-content-wrapper.template-overlay-text .banner-text-content {
text-align: center !important;
}
.campaign-card .banner-content-wrapper.template-overlay-text .banner-headline {
text-align: center !important;
}
.campaign-card .banner-content-wrapper.template-overlay-text .banner-description-text {
text-align: center !important;
}
.campaign-card .banner-content-wrapper.template-overlay-text .banner-cta-button {
margin: 0 auto !important;
}
.campaign-card .banner-cta-button:hover svg {
transform: translateX(3px) !important;
}
@media (max-width: 1200px) {
.campaigns-grid {
display: block !important;
max-width: 100% !important;
padding: 0 16px !important;
}
.campaign-card {
display: block !important;
width: 100% !important;
margin: 0 0 20px 0 !important;
flex: none !important;
max-width: 100% !important;
}
.campaign-card .banner-content-wrapper {
padding: 1rem !important;
}
.campaign-card .banner-content-wrapper.template-left-aligned .banner-text-content,
.campaign-card .banner-content-wrapper.template-overlay .banner-text-content,
.campaign-card .banner-content-wrapper.template-card-style .banner-text-content {
max-width: 100% !important;
width: 100% !important;
padding: 1rem !important;
}
.campaign-card .banner-content-wrapper.template-overlay .banner-text-content,
.campaign-card .banner-content-wrapper.template-card-style .banner-text-content {
padding: 1rem !important;
}
}
</style>
<div class="campaigns-grid">
<div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '688777910d5c9d2271abe3f1';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688777910d5c9d2271abe3f1?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" active" onclick="
(function(event) {
event.preventDefault();
var campaignId = '688777910d5c9d2271abe3f1';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688777910d5c9d2271abe3f1?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1ULBKQyrAtS63D8VyamGIoKzUHTcHWX0U"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-centered" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: center;
text-align: center;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 80%;
width: 100%;
text-align: center;
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #b90e58;
font-weight: bold;
margin: 0 0 0.75rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: center;
">Summer Sale</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #e2e8f0;
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
text-align: center;
opacity: 0.9;
">test</p>
<button type="button" class="banner-cta-button" style="
background-color: #f73b57;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0 auto;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Shop Now
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '688775c40d5c9d2271abd8c0';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688775c40d5c9d2271abd8c0?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" " onclick="
(function(event) {
event.preventDefault();
var campaignId = '688775c40d5c9d2271abd8c0';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688775c40d5c9d2271abd8c0?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1g8eIzCA6VqN01lV9St-OwJyE9MVQ8n-2"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-centered" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: center;
text-align: center;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 80%;
width: 100%;
text-align: center;
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #ffffff;
font-weight: bold;
margin: 0 0 0.75rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: center;
">Beauty and Personal Care</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #e2e8f0;
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
text-align: center;
opacity: 0.9;
">test</p>
<button type="button" class="banner-cta-button" style="
background-color: #ae370f;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0 auto;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Shop Now
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '68876cf20d5c9d2271abbb14';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/68876cf20d5c9d2271abbb14?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" " onclick="
(function(event) {
event.preventDefault();
var campaignId = '68876cf20d5c9d2271abbb14';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/68876cf20d5c9d2271abbb14?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1tlRwlmYbECG02fkMaAzHw3TI3xyP-nMn"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-centered" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: center;
text-align: center;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 80%;
width: 100%;
text-align: center;
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #590d0d;
font-weight: bold;
margin: 0 0 0.75rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: center;
">EOSS</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #e2e8f0;
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
text-align: center;
opacity: 0.9;
">Explore the wide range of the products</p>
<button type="button" class="banner-cta-button" style="
background-color: #3b82f6;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0 auto;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Shop Now
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '688765d60d5c9d2271aba3a6';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688765d60d5c9d2271aba3a6?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" " onclick="
(function(event) {
event.preventDefault();
var campaignId = '688765d60d5c9d2271aba3a6';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688765d60d5c9d2271aba3a6?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1VxCmLBpUA8DRbcbKU5jyBTrD36VwaxKQ"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-centered" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: center;
text-align: center;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 80%;
width: 100%;
text-align: center;
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #090206;
font-weight: bold;
margin: 0 0 0.75rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: center;
">Season Special</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #e2e8f0;
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
text-align: center;
opacity: 0.9;
">Test</p>
<button type="button" class="banner-cta-button" style="
background-color: #072b64;
color: #ffffff;
border: none;
border-radius: 30px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0 auto;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Check Now
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '6887644a0d5c9d2271aba099';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/6887644a0d5c9d2271aba099?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" " onclick="
(function(event) {
event.preventDefault();
var campaignId = '6887644a0d5c9d2271aba099';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/6887644a0d5c9d2271aba099?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: transparent;
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1H38rGFhYNG7DZ0TI3M9slJbZaoyJWYMh"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-right-aligned" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: flex-end;
text-align: right;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 60%;
width: 100%;
text-align: right;
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #ffffff;
font-weight: bolder;
margin: 0 0 0.75rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: right;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
">Offers on Grocery</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #e2e8f0;
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
text-align: right;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
opacity: 0.9;
">Test</p>
<button type="button" class="banner-cta-button" style="
background-color: #1b417e;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Shop Now
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '688763660d5c9d2271ab9dbc';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688763660d5c9d2271ab9dbc?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" " onclick="
(function(event) {
event.preventDefault();
var campaignId = '688763660d5c9d2271ab9dbc';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688763660d5c9d2271ab9dbc?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: transparent;
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1ct5D3Wf7k7Dv4qFZ9XqLcleBFaHCJ2oC"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-right-aligned" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: flex-end;
text-align: right;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 60%;
width: 100%;
text-align: right;
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #e61e1e;
font-weight: normal;
margin: 0 0 0.75rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: right;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
">Rakhi Gifts Sale</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #ffffff;
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
text-align: right;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
opacity: 0.9;
">Test</p>
<button type="button" class="banner-cta-button" style="
background-color: #dd2c2c;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Shop Now
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '688760310d5c9d2271ab9a25';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688760310d5c9d2271ab9a25?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" " onclick="
(function(event) {
event.preventDefault();
var campaignId = '688760310d5c9d2271ab9a25';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688760310d5c9d2271ab9a25?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: transparent;
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1wpYr6t6RyEhz3KfnzmvaHYsRst93WOYC"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-left-aligned" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: flex-start;
text-align: left;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 60%;
width: 100%;
text-align: left;
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #ffffff;
font-weight: bold;
margin: 0 0 0.75rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: left;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
">Check out GOAT deals here</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #e2e8f0;
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
text-align: left;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
opacity: 0.9;
">Test Check out GOAT deals here</p>
<button type="button" class="banner-cta-button" style="
background-color: #232173;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Shop Now
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '688758810d5c9d2271ab964a';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688758810d5c9d2271ab964a?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" " onclick="
(function(event) {
event.preventDefault();
var campaignId = '688758810d5c9d2271ab964a';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688758810d5c9d2271ab964a?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: transparent;
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1wqbQEtm2wKAsxFO-bJmbTreNzUBaN-gq"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-left-aligned" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: flex-start;
text-align: left;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 60%;
width: 100%;
text-align: left;
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #ffffff;
font-weight: bold;
margin: 0 0 0.75rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: left;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
">Featured Products with Offers</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #e2e8f0;
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
text-align: left;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
opacity: 0.9;
">Test Featured Products with Offers</p>
<button type="button" class="banner-cta-button" style="
background-color: #3b6af7;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Shop Now
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '688757fb0d5c9d2271ab95e3';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688757fb0d5c9d2271ab95e3?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" " onclick="
(function(event) {
event.preventDefault();
var campaignId = '688757fb0d5c9d2271ab95e3';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/688757fb0d5c9d2271ab95e3?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: transparent;
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1Nw96cN8sPGL2N0YGQPCpzd4gzbyohHtk"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-right-aligned" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: flex-end;
text-align: right;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 60%;
width: 100%;
text-align: right;
">
<h2 class="banner-headline" style="
font-size: 1.5rem;
color: #ffffff;
font-weight: bold;
margin: 0 0 0.75rem 0;
line-height: 1.2;
word-wrap: break-word;
white-space: normal;
text-align: right;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
">Additional discounted products!</h2>
<p class="banner-description-text" style="
font-size: 0.875rem;
color: #e2e8f0;
margin: 0 0 1rem 0;
line-height: 1.4;
word-wrap: break-word;
white-space: normal;
text-align: right;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
opacity: 0.9;
">Test Additional discounted products!</p>
<button type="button" class="banner-cta-button" style="
background-color: #f73b4e;
color: #ffffff;
border: none;
border-radius: 30px;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
margin: 0;
"
onmouseover="
this.style.transform='translateY(-2px)';
this.style.boxShadow='0 8px 24px rgba(0,0,0,0.4)';
"
onmouseout="
this.style.transform='translateY(0)';
this.style.boxShadow='0 4px 16px rgba(0,0,0,0.3)';
">
Shop Now
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div><div class="campaign-card" onclick="
(function(event) {
event.preventDefault();
var campaignId = '6887566d0d5c9d2271ab94bc';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/6887566d0d5c9d2271ab94bc?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
">
<div class=" " onclick="
(function(event) {
event.preventDefault();
var campaignId = '6887566d0d5c9d2271ab94bc';
var affiliateId = '';
var userId = '';
var campaignUrl = 'https://samhitabazaar.com/campaign/6887566d0d5c9d2271ab94bc?affiliate_id=undefined&user_id=undefined';
window.open(campaignUrl, '_blank');
return false;
})(event);
" style="cursor: pointer;">
<div class="banner-showcase">
<div class="banner-container" style="
background-color: transparent;
position: relative;
height: 236px;
overflow: hidden;
border-radius: 12px;
">
<img src="https://lh3.googleusercontent.com/d/1VtYOevF-EVUp1RA6Xabi8hfLCIxwpaZv"
alt="Campaign banner"
style="
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 0;
"
onerror="this.style.display='none';" />
<div class="banner-content-wrapper template-left-aligned" style="
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding: 1.5rem;
pointer-events: none;
z-index: 2;
align-items: center;
justify-content: flex-start;
text-align: left;
">
<div class="banner-text-content" style="
pointer-events: auto;
z-index: 10;
max-width: 60%;
width: 100%;
text-align: left;