2727 lines
183 KiB
PHP
2727 lines
183 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<?php include 'includes/head.php'; ?>
|
||
|
||
<body style="background-color: white;"
|
||
class="wp-singular page-template-default page page-id-2983 wp-theme-aiero theme-aiero woocommerce-no-js mega-menu-main elementor-default elementor-kit-6 elementor-page elementor-page-2983">
|
||
|
||
<?php
|
||
$current_page = 'home';
|
||
include 'includes/header.php';
|
||
include 'includes/offcanvas.php';
|
||
?>
|
||
|
||
<!-- PAGE CONTENT HERE -->
|
||
<main>
|
||
<div class="content">
|
||
<div class="content-inner">
|
||
<div data-elementor-type="wp-page" data-elementor-id="10863" class="elementor elementor-10863">
|
||
<!-- hero section -->
|
||
<section
|
||
class="elementor-section elementor-top-section elementor-element elementor-element-aaa9419 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default"
|
||
data-id="aaa9419" data-element_type="section"
|
||
data-settings="{"stretch_section":"section-stretched"}">
|
||
<div class="elementor-container elementor-column-gap-no">
|
||
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-5c1335c"
|
||
data-id="5c1335c" data-element_type="column" ;>
|
||
<div class="elementor-widget-wrap elementor-element-populated">
|
||
<div class="elementor-element elementor-element-55f3e96 elementor-widget elementor-widget-aiero_heading"
|
||
data-id="55f3e96" data-element_type="widget"
|
||
data-widget_type="aiero_heading.default">
|
||
<div class="elementor-widget-container">
|
||
<div class="aiero-heading-widget">
|
||
<h1 class="aiero-heading">
|
||
<span class="aiero-heading-content has_gradient_color_text">
|
||
Turn Every Visit<del> Into a Loyal </del>Customer
|
||
</span>
|
||
</h1>
|
||
<div class="elementor-widget-container">
|
||
<p>Loyaly.ai is an AI-powered retail intelligence platform that
|
||
helps businesses understand footfall,
|
||
engage customers in real-time, and drive repeat revenue.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="elementor-element elementor-element-520d0b9 mailchimp-button-border-style-solid mailchimp-button-bakground-style-solid elementor-widget elementor-widget-aiero_mailchimp"
|
||
data-id="520d0b9" data-element_type="widget"
|
||
data-widget_type="aiero_mailchimp.default">
|
||
<div class="elementor-widget-container">
|
||
<div class="aiero-mailchimp-widget">
|
||
<!-- Mailchimp for WordPress v4.10.4 - https://wordpress.org/plugins/mailchimp-for-wp/ -->
|
||
<div class="mc4wp-form">
|
||
<div class="mc4wp-form-fields">
|
||
<div class="form-field">
|
||
<!-- <input type="email" name="EMAIL" placeholder="Enter your email" required/> -->
|
||
<button type="button" onclick="getstart()">Get
|
||
Started</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- / Mailchimp for WordPress Plugin -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-7e8a7d2"
|
||
data-id="7e8a7d2" data-element_type="column">
|
||
<div class="elementor-widget-wrap elementor-element-populated">
|
||
<div class="elementor-element elementor-element-bb1e9c1 elementor-widget elementor-widget-image"
|
||
data-id="bb1e9c1" data-element_type="widget" data-widget_type="image.default">
|
||
<div class="elementor-widget-container">
|
||
<img decoding="async" width="964" height="800"
|
||
src="assets/images/Hero_section.png"
|
||
class="attachment-large size-large wp-image-3060" alt=""
|
||
srcset="assets/images/Hero_section.png 964w, assets/images/Hero_section.png 300w, assets/images/Hero_section.png 768w, assets/images/Hero_section.png 600w"
|
||
sizes="(max-width: 964px) 100vw, 964px" />
|
||
</div>
|
||
</div>
|
||
<div class="elementor-element elementor-element-c494027 elementor-absolute elementor-widget elementor-widget-image"
|
||
data-id="c494027" data-element_type="widget"
|
||
data-settings="{"_position":"absolute"}"
|
||
data-widget_type="image.default">
|
||
<div class="elementor-widget-container">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3 Images Template Section -->
|
||
<section class="three-images-template-section"
|
||
style="padding: 60px 30px; background-color: #ffffff;">
|
||
<div class="elementor-container">
|
||
<div class="tit-container">
|
||
<div class="tit-img-wrapper">
|
||
<img src="assets/images/1st_image.png" alt="Loyaly Feature 1">
|
||
</div>
|
||
<div class="tit-img-wrapper">
|
||
<img src="assets/images/2nd_image.png" alt="Loyaly Feature 2">
|
||
</div>
|
||
<div class="tit-img-wrapper">
|
||
<img src="assets/images/3rd_image.png" alt="Loyaly Feature 3">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.tit-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: stretch;
|
||
gap: 30px;
|
||
width: 100%;
|
||
perspective: 1400px;
|
||
}
|
||
|
||
.tit-img-wrapper {
|
||
--portal-x: 50%;
|
||
--portal-y: 50%;
|
||
--portal-glow: 0;
|
||
aspect-ratio: 1 / 1;
|
||
border-radius: 30px;
|
||
overflow: hidden;
|
||
box-shadow: 0 20px 50px rgba(16, 12, 3, 0.08), inset 0 0 0 1px rgba(255, 210, 86, 0.16);
|
||
background: linear-gradient(145deg, #fffdf6 0%, #fff 48%, #fff8dc 100%);
|
||
display: flex;
|
||
position: relative;
|
||
transform-style: preserve-3d;
|
||
will-change: transform, opacity, filter;
|
||
isolation: isolate;
|
||
}
|
||
|
||
.tit-img-wrapper::before,
|
||
.tit-img-wrapper::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
border-radius: inherit;
|
||
z-index: 2;
|
||
}
|
||
|
||
.tit-img-wrapper::before {
|
||
background:
|
||
radial-gradient(circle at var(--portal-x) var(--portal-y), rgba(255, 224, 124, 0.28) 0%, rgba(255, 201, 53, 0.14) 18%, transparent 44%),
|
||
linear-gradient(115deg, transparent 18%, rgba(255, 241, 180, 0) 34%, rgba(255, 241, 180, 0.48) 46%, rgba(255, 182, 24, 0.18) 56%, transparent 72%);
|
||
opacity: var(--portal-glow);
|
||
mix-blend-mode: screen;
|
||
transform: translateZ(28px);
|
||
}
|
||
|
||
.tit-img-wrapper::after {
|
||
border: 1px solid rgba(255, 211, 93, 0.28);
|
||
box-shadow:
|
||
inset 0 0 28px rgba(255, 215, 90, 0.12),
|
||
0 0 34px rgba(255, 197, 47, 0.08);
|
||
}
|
||
|
||
.tit-img-wrapper.is-portal-ready {
|
||
opacity: 0;
|
||
}
|
||
|
||
.tit-img-wrapper.is-portal-revealed {
|
||
opacity: 1;
|
||
}
|
||
|
||
.tit-img-wrapper:nth-child(1),
|
||
.tit-img-wrapper:nth-child(2) {
|
||
flex: 1;
|
||
/* 40% */
|
||
}
|
||
|
||
.tit-img-wrapper:nth-child(3) {
|
||
flex: 1;
|
||
/* 20% */
|
||
}
|
||
|
||
.tit-img-wrapper img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
border-radius: 30px;
|
||
transform-origin: center;
|
||
transform: translateZ(18px) scale(1.01);
|
||
will-change: transform;
|
||
transition: filter 0.45s ease;
|
||
z-index: 1;
|
||
}
|
||
|
||
.tit-img-wrapper:hover img {
|
||
filter: saturate(1.06) contrast(1.03);
|
||
}
|
||
|
||
/* Media Queries for Responsive Design */
|
||
@media (max-width: 1200px) {
|
||
.tit-container {
|
||
gap: 20px;
|
||
}
|
||
|
||
.tit-img-wrapper {
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.tit-img-wrapper img {
|
||
border-radius: 20px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.three-images-template-section {
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.tit-container {
|
||
gap: 15px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.tit-container {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 30px;
|
||
}
|
||
|
||
.tit-img-wrapper,
|
||
.tit-img-wrapper:nth-child(1),
|
||
.tit-img-wrapper:nth-child(2),
|
||
.tit-img-wrapper:nth-child(3) {
|
||
flex: none;
|
||
width: 100%;
|
||
max-width: 500px;
|
||
}
|
||
}
|
||
</style>
|
||
</section>
|
||
|
||
<!-- One Platform. Two Experiences. (Template 2: Dark Fusion Hub) -->
|
||
<section class="experiences-dark-hub" id="experiences"
|
||
style="margin: 30px; border-radius: 20px; padding: 120px 0; background: #080808; font-family: 'Manrope', sans-serif; overflow: hidden; position: relative; color: white;">
|
||
|
||
<!-- Background Ambient Elements -->
|
||
<div class="glow-bg"
|
||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(255, 204, 0, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 204, 0, 0.05) 0%, transparent 50%); pointer-events: none; ">
|
||
</div>
|
||
|
||
<div class="container"
|
||
style="max-width: 1400px; margin: 0 auto; padding: 0 30px; position: relative;">
|
||
|
||
<!-- Premium Header -->
|
||
<div class="hub-header" style="text-align: center; margin-bottom: 100px;">
|
||
<div class="badge-pill"
|
||
style="display: inline-block; background: rgba(255, 204, 0, 0.1); border: 1px solid rgba(255, 204, 0, 0.2); color: #ffaa00; padding: 10px 25px; border-radius: 100px; font-weight: 800; font-size: 0.85rem; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px;">
|
||
Next-Gen Retail Ecosystem</div>
|
||
<h2
|
||
style="font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -2px; margin-bottom: 30px;">
|
||
One Platform. <br>
|
||
<span
|
||
style="background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Two
|
||
Dynamic Experiences.</span>
|
||
</h2>
|
||
<p
|
||
style="font-size: 1.35rem; color: #888; max-width: 900px; margin: 0 auto; line-height: 1.6;">
|
||
Bridging the gap between consumer delight and business intelligence through a
|
||
unified, AI-driven rewards loop.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Fusion Grid -->
|
||
<div class="fusion-grid" style="display: flex; gap: 40px; position: relative;">
|
||
|
||
<!-- Left Block: Shoppers -->
|
||
<div class="fusion-card shopper-fusion"
|
||
style="flex: 1; background: linear-gradient(145deg, #111 0%, #0a0a0a 100%); border: 1px solid rgba(255,255,255,0.05); border-radius: 40px; padding: 60px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);">
|
||
<div class="card-glow"
|
||
style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(255,204,0,0.03) 0%, transparent 60%); pointer-events: none;">
|
||
</div>
|
||
|
||
<div class="experience-label"
|
||
style="display: flex; align-items: center; gap: 12px; margin-bottom: 40px;">
|
||
<div
|
||
style="width: 50px; height: 50px; background: rgba(255,170,0,0.1); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
|
||
👤</div>
|
||
<span
|
||
style="font-weight: 800; color: #ffaa00; text-transform: uppercase; font-size: 1rem;">The
|
||
Shopper Loop</span>
|
||
</div>
|
||
|
||
<div style="position: relative;">
|
||
<h3
|
||
style="font-size: 3rem; font-weight: 800; margin-bottom: 25px; line-height: 1.1;">
|
||
Experience <br><span style="color: #ffaa00;">Pure Rewards.</span></h3>
|
||
<p
|
||
style="color: #888; font-size: 1.15rem; line-height: 1.7; margin-bottom: 45px;">
|
||
Empowering shoppers with AI-driven personalization, instant gratification,
|
||
and a universal loyalty identity.</p>
|
||
|
||
<div class="feature-bullets"
|
||
style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 60px;">
|
||
<div
|
||
style="display: flex; align-items: center; gap: 12px; color: #ddd; font-weight: 700;">
|
||
<span style="color: #ffaa00;">✦</span> Hyper-local deals
|
||
</div>
|
||
<div
|
||
style="display: flex; align-items: center; gap: 12px; color: #ddd; font-weight: 700;">
|
||
<span style="color: #ffaa00;">✦</span> AI Price Drop alerts
|
||
</div>
|
||
<div
|
||
style="display: flex; align-items: center; gap: 12px; color: #ddd; font-weight: 700;">
|
||
<span style="color: #ffaa00;">✦</span> Instant eCash
|
||
</div>
|
||
<div
|
||
style="display: flex; align-items: center; gap: 12px; color: #ddd; font-weight: 700;">
|
||
<span style="color: #ffaa00;">✦</span> Smart Wishlists
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#" class="fusion-btn"
|
||
style="display: inline-flex; align-items: center; gap: 15px; background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%); color: #000; padding: 20px 45px; border-radius: 20px; font-weight: 800; text-decoration: none; transition: 0.3s; box-shadow: 0 20px 40px rgba(255,170,0,0.2);">
|
||
GET THE APP <span style="font-size: 1.2rem;">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Visual Overlap -->
|
||
<div class="card-visual"
|
||
style="position: absolute;bottom: 10px;right: -30px;width: 250px;opacity: 0.9;transform: rotate(-10deg) translateY(50px);transition: 0.5s ease-out;">
|
||
<img src="assets/images/loyaly_app_ui.png" alt="Loyaly App"
|
||
style="width: 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5)); border-radius: 40px;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Block: Business -->
|
||
<div class="fusion-card business-fusion"
|
||
style="flex: 1; background: linear-gradient(145deg, #111 0%, #0a0a0a 100%); border: 1px solid rgba(255,255,255,0.05); border-radius: 40px; padding: 60px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);">
|
||
<div class="card-glow"
|
||
style="position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(255,204,0,0.03) 0%, transparent 60%); pointer-events: none;">
|
||
</div>
|
||
|
||
<div class="experience-label"
|
||
style="display: flex; align-items: center; gap: 12px; margin-bottom: 40px;">
|
||
<div
|
||
style="width: 50px; height: 50px; background: rgba(255,170,0,0.1); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
|
||
💼</div>
|
||
<span
|
||
style="font-weight: 800; color: #ffaa00; text-transform: uppercase; font-size: 1rem;">The
|
||
Business Engine</span>
|
||
</div>
|
||
|
||
<div style="position: relative;">
|
||
<h3
|
||
style="font-size: 3rem; font-weight: 800; margin-bottom: 25px; line-height: 1.1;">
|
||
Scale with <br><span style="color: #ffaa00;">Precision AI.</span></h3>
|
||
<p
|
||
style="color: #888; font-size: 1.15rem; line-height: 1.7; margin-bottom: 45px;">
|
||
Transforming physical footfall into digital intelligence, optimized margins,
|
||
and long-term customer lifetime value.</p>
|
||
|
||
<div class="feature-bullets"
|
||
style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 60px;">
|
||
<div
|
||
style="display: flex; align-items: center; gap: 12px; color: #ddd; font-weight: 700;">
|
||
<span style="color: #ffaa00;">✦</span> Behavior Analytics
|
||
</div>
|
||
<div
|
||
style="display: flex; align-items: center; gap: 12px; color: #ddd; font-weight: 700;">
|
||
<span style="color: #ffaa00;">✦</span> Revenue Optimizer
|
||
</div>
|
||
<div
|
||
style="display: flex; align-items: center; gap: 12px; color: #ddd; font-weight: 700;">
|
||
<span style="color: #ffaa00;">✦</span> Campaign Engine
|
||
</div>
|
||
<div
|
||
style="display: flex; align-items: center; gap: 12px; color: #ddd; font-weight: 700;">
|
||
<span style="color: #ffaa00;">✦</span> CRM Integration
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#" class="fusion-btn btn-outline"
|
||
style="display: inline-flex; align-items: center; gap: 15px; background: transparent; border: 2px solid #ffaa00; color: #ffaa00; padding: 18px 43px; border-radius: 20px; font-weight: 800; text-decoration: none; transition: 0.3s;">
|
||
GROW YOUR BUSINESS <span style="font-size: 1.2rem;">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Visual Overlap -->
|
||
<div class="card-visual"
|
||
style="position: absolute; bottom: -80px; left: -80px; width: 450px; opacity: 0.8; transform: rotate(5deg) translateY(50px); transition: 0.5s ease-out; ">
|
||
<img src="assets/images/loyaly_dashboard_ui.png" alt="Loyaly Dashboard"
|
||
style="width: 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)); border-radius: 20px;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Central Mascot: The Connector -->
|
||
<div class="fusion-mascot"
|
||
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 220px; filter: drop-shadow(0 0 30px rgba(255, 204, 0, 0.4)); animation: floatingMascot 4s ease-in-out infinite;">
|
||
<img src="assets/images/connector.png" alt="Loyaly Connector" style="width: 100%;">
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Futuristic Bottom Bar -->
|
||
<div class="fusion-footer"
|
||
style="margin-top: 100px; padding: 40px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 30px; display: flex; align-items: center; justify-content: center; gap: 40px; text-align: center; position: relative; overflow: hidden;">
|
||
<div
|
||
style="position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #f9f9f9, transparent);">
|
||
</div>
|
||
<div class="footer-icon"
|
||
style="background: linear-gradient(135deg, #ffd700 0%, #ffffff 100%); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #000;">
|
||
🤝</div>
|
||
<div class="footer-text">
|
||
<h4 style="margin: 0; font-size: 1.5rem; font-weight: 800; color: #fff;">Closing the
|
||
Loyalty Loop.</h4>
|
||
<p style="margin: 10px 0 0 0; color: #888; font-size: 1.1rem;">Where consumer intent
|
||
meets data-driven execution for shared exponential growth.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<style>
|
||
@keyframes floatingMascot {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translate(-50%, -50%) translateY(0) scale(1);
|
||
}
|
||
|
||
50% {
|
||
transform: translate(-50%, -50%) translateY(-20px) scale(1.05);
|
||
}
|
||
}
|
||
|
||
.fusion-card:hover {
|
||
transform: translateY(-10px);
|
||
border-color: rgba(255, 204, 0, 0.3);
|
||
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.fusion-card:hover .card-visual {
|
||
transform: rotate(0) translateY(0) scale(1.05) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
.fusion-btn:hover {
|
||
transform: scale(1.05);
|
||
background: #fff !important;
|
||
color: #000 !important;
|
||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: #ffaa00 !important;
|
||
color: #000 !important;
|
||
border-color: #ffaa00 !important;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.experiences-dark-hub {
|
||
padding: 80px 0 !important;
|
||
margin: 20px !important;
|
||
}
|
||
|
||
.fusion-grid {
|
||
flex-direction: column;
|
||
gap: 40px;
|
||
}
|
||
|
||
.fusion-mascot {
|
||
display: none;
|
||
}
|
||
|
||
.card-visual {
|
||
position: relative !important;
|
||
bottom: 0 !important;
|
||
right: 0 !important;
|
||
left: 0 !important;
|
||
width: 100% !important;
|
||
margin-top: 40px;
|
||
transform: none !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
.fusion-card {
|
||
padding: 40px !important;
|
||
}
|
||
|
||
.fusion-card h3 {
|
||
font-size: 2.5rem !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.experiences-dark-hub {
|
||
padding: 60px 0 !important;
|
||
margin: 15px !important;
|
||
}
|
||
|
||
.hub-header {
|
||
margin-bottom: 60px !important;
|
||
}
|
||
|
||
.hub-header h2 {
|
||
font-size: 2.5rem !important;
|
||
}
|
||
|
||
.hub-header p {
|
||
font-size: 1.1rem !important;
|
||
}
|
||
|
||
.fusion-card {
|
||
padding: 30px !important;
|
||
border-radius: 30px !important;
|
||
}
|
||
|
||
.fusion-card h3 {
|
||
font-size: 2rem !important;
|
||
}
|
||
|
||
.feature-bullets {
|
||
grid-template-columns: 1fr !important;
|
||
gap: 12px !important;
|
||
margin-bottom: 40px !important;
|
||
}
|
||
|
||
.fusion-btn {
|
||
width: 100%;
|
||
justify-content: center;
|
||
padding: 18px 30px !important;
|
||
}
|
||
|
||
.fusion-footer {
|
||
flex-direction: column;
|
||
gap: 20px !important;
|
||
padding: 30px 20px !important;
|
||
margin-top: 60px !important;
|
||
}
|
||
|
||
.footer-text h4 {
|
||
font-size: 1.25rem !important;
|
||
}
|
||
|
||
.footer-text p {
|
||
font-size: 1rem !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.experiences-dark-hub {
|
||
margin: 10px !important;
|
||
}
|
||
|
||
.hub-header h2 {
|
||
font-size: 2rem !important;
|
||
}
|
||
|
||
.fusion-card h3 {
|
||
font-size: 1.75rem !important;
|
||
}
|
||
|
||
.experience-label span {
|
||
font-size: 0.9rem !important;
|
||
}
|
||
|
||
.experience-label div {
|
||
width: 40px !important;
|
||
height: 40px !important;
|
||
font-size: 1.2rem !important;
|
||
}
|
||
}
|
||
</style>
|
||
</section>
|
||
|
||
<!-- The Problem Section -->
|
||
<section class="the-problem-section elementor-top-section elementor-section-boxed"
|
||
style=" padding: 30px; position: relative;">
|
||
<div class="elementor-container">
|
||
<div class="problem-container"
|
||
style="width: 100%; border-radius: 30px; padding: 60px 50px; position: relative; background: #111111; border: 2px solid rgba(255, 204, 0, 0.4); box-shadow: 0 10px 40px rgba(255, 204, 0, 0.15), inset 0 0 30px rgba(255, 204, 0, 0.05); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; overflow: hidden;">
|
||
|
||
<!-- Background Glow -->
|
||
<!-- <div
|
||
style="position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: radial-gradient(circle at top left, rgb(0, 0, 0) 0%, transparent 70%); pointer-events: none; ">
|
||
</div> -->
|
||
|
||
<!-- Left Column: Text & List -->
|
||
<div class="problem-left"
|
||
style="flex: 1; min-width: 300px; position: relative; padding-right: 30px;">
|
||
|
||
<!-- Badge -->
|
||
<div
|
||
style="display: inline-flex; align-items: center; background: #ffcc00; padding: 8px 20px; border-radius: 30px; font-weight: 700; color: #111; margin-bottom: 25px; font-family: 'Manrope', sans-serif; box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);">
|
||
<span
|
||
style="background-color: white; padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
|
||
<img src="assets/images/loyalyai-logo.png" alt="LoyalyAI Logo"
|
||
style="width: 20px; height: 20px;">
|
||
</span>
|
||
The Problem
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<h2
|
||
style="font-size: 4.2rem; color: #ffffff; font-family: 'Sora', sans-serif; line-height: 1.1; font-weight: 400; letter-spacing: -1.5px; margin-bottom: 35px; margin-top: 0;">
|
||
Retail is Busy.<br>
|
||
But <span style="color: #ffaa00;">Blind.</span>
|
||
</h2>
|
||
|
||
<!-- List Items -->
|
||
<div style="display: flex; flex-direction: column; gap: 15px;">
|
||
|
||
<!-- Item 1 -->
|
||
<div class="problem-item"
|
||
style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 15px; padding: 15px 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.3rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-walking"></i>
|
||
</div>
|
||
<div
|
||
style="color: #cccccc; font-family: 'Manrope', sans-serif; font-size: 1.05rem; line-height: 1.5;">
|
||
Thousands walk into your store every day—but how many <span
|
||
style="color: #ffaa00; font-weight: 700;">convert?</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Item 2 -->
|
||
<div class="problem-item"
|
||
style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 15px; padding: 15px 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.3rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-sync-alt"></i>
|
||
</div>
|
||
<div
|
||
style="color: #cccccc; font-family: 'Manrope', sans-serif; font-size: 1.05rem; line-height: 1.5;">
|
||
How many <span style="color: #ffaa00; font-weight: 700;">return?</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Item 3 -->
|
||
<div class="problem-item"
|
||
style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 15px; padding: 15px 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.3rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-sign-out-alt"></i>
|
||
</div>
|
||
<div
|
||
style="color: #cccccc; font-family: 'Manrope', sans-serif; font-size: 1.05rem; line-height: 1.5;">
|
||
And how many <span style="color: #ffaa00; font-weight: 700;">leave
|
||
without a trace?</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Item 4 -->
|
||
<div class="problem-item"
|
||
style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 15px; padding: 15px 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.3rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-frown"></i>
|
||
</div>
|
||
<div
|
||
style="color: #ffffff; font-family: 'Manrope', sans-serif; font-size: 1.05rem; line-height: 1.5; font-weight: 600;">
|
||
Retailers don’t lack customers.<br>
|
||
<span style="color: #ffaa00;">They lack visibility, intelligence, and
|
||
control.</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Column: Image -->
|
||
<div class="problem-right"
|
||
style="flex: 1; min-width: 300px; display: flex; justify-content: flex-end; align-items: center; position: relative;">
|
||
<img src="assets/images/Problems.png" alt="Problem Illustration"
|
||
style="object-fit: contain; filter: drop-shadow(0 20px 40px rgba(255,204,0,0.15));">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hover effects and Media Queries -->
|
||
<style>
|
||
.the-problem-section .problem-item:hover {
|
||
transform: translateX(10px);
|
||
border-color: rgba(255, 204, 0, 0.6) !important;
|
||
background: rgba(255, 255, 255, 0.06) !important;
|
||
box-shadow: 0 10px 25px rgba(255, 204, 0, 0.15) !important;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.the-problem-section {
|
||
padding: 40px 24px !important;
|
||
}
|
||
|
||
.the-problem-section .problem-container {
|
||
flex-direction: column !important;
|
||
align-items: stretch !important;
|
||
gap: 34px !important;
|
||
padding: 44px 32px !important;
|
||
text-align: center;
|
||
}
|
||
|
||
.the-problem-section .problem-left {
|
||
width: 100% !important;
|
||
min-width: 0 !important;
|
||
padding-right: 0 !important;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.the-problem-section .problem-item {
|
||
text-align: left;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.the-problem-section .problem-right {
|
||
width: 100% !important;
|
||
min-width: 0 !important;
|
||
justify-content: center !important;
|
||
}
|
||
|
||
.the-problem-section .problem-right img {
|
||
width: min(100%, 420px) !important;
|
||
height: auto !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.the-problem-section {
|
||
padding: 34px 18px !important;
|
||
}
|
||
|
||
.the-problem-section .problem-container {
|
||
padding: 34px 22px !important;
|
||
border-radius: 24px !important;
|
||
}
|
||
|
||
.the-problem-section .problem-left h2 {
|
||
font-size: clamp(2.2rem, 10vw, 3rem) !important;
|
||
letter-spacing: 0 !important;
|
||
margin-bottom: 28px !important;
|
||
}
|
||
|
||
.the-problem-section .problem-item {
|
||
align-items: flex-start !important;
|
||
gap: 14px !important;
|
||
}
|
||
|
||
.the-problem-section .problem-item:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 425px) {
|
||
.the-problem-section {
|
||
padding: 28px 12px !important;
|
||
}
|
||
|
||
.the-problem-section .problem-container {
|
||
padding: 26px 14px !important;
|
||
border-radius: 20px !important;
|
||
}
|
||
|
||
.the-problem-section .problem-left h2 {
|
||
font-size: 2rem !important;
|
||
line-height: 1.15 !important;
|
||
}
|
||
|
||
.the-problem-section .problem-item {
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
text-align: center !important;
|
||
padding: 16px 14px !important;
|
||
}
|
||
|
||
.the-problem-section .problem-item>div:first-child {
|
||
width: 42px !important;
|
||
height: 42px !important;
|
||
font-size: 1.1rem !important;
|
||
}
|
||
|
||
.the-problem-section .problem-right img {
|
||
width: min(100%, 300px) !important;
|
||
}
|
||
}
|
||
</style>
|
||
</section>
|
||
|
||
<!-- The Shift Section -->
|
||
<section class="the-shift-section elementor-top-section elementor-section-boxed"
|
||
style="background-color: #ffffff; padding: 30px; position: relative;">
|
||
<div class="elementor-container">
|
||
<div class="shift-container"
|
||
style="width: 100%; border-radius: 30px; padding: 60px 50px; position: relative; background: #ffffff; border: 2px solid rgba(255, 204, 0, 0.4); box-shadow: 0 10px 40px rgba(255, 204, 0, 0.15), inset 0 0 30px rgba(255, 204, 0, 0.05); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;">
|
||
|
||
<!-- Background Glow -->
|
||
<!-- <div
|
||
style="position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(255,204,0,0.08) 0%, transparent 70%); transform: translate(-50%, -50%); pointer-events: none; border-radius: 30px;">
|
||
</div> -->
|
||
|
||
<!-- Left Column -->
|
||
<div class="shift-left" style="flex: 1; position: relative;">
|
||
<!-- Badge -->
|
||
<div
|
||
style="display: inline-flex; align-items: center; background: #ffcc00; padding: 8px 20px; border-radius: 30px; font-weight: 700; color: #111; margin-bottom: 30px; font-family: 'Manrope', sans-serif; box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);">
|
||
<span
|
||
style="background-color: white; padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
|
||
<img src="assets/images/loyalyai-logo.png" alt="LoyalyAI Logo"
|
||
style="width: 20px; height: 20px;">
|
||
</span>
|
||
The Shift
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<h2
|
||
style="font-size: 3.8rem; color: #111; font-family: 'Sora', sans-serif; line-height: 1.1; margin-bottom: 40px; font-weight: 400; letter-spacing: -1.5px;">
|
||
Offline is <br> the New <span style="color: #ffaa00;">Online</span>
|
||
</h2>
|
||
|
||
<!-- Points -->
|
||
<div style="display: flex; flex-direction: column; gap: 20px;">
|
||
<!-- Point 1 -->
|
||
<div
|
||
style="display: flex; align-items: center; background: #fffdf5; border: 1px solid rgba(255, 204, 0, 0.3); padding: 18px 25px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: transform 0.3s ease;">
|
||
<div
|
||
style="background: #ffcc00; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.3rem; margin-right: 15px; flex-shrink: 0; box-shadow: 0 0 10px rgba(255,204,0,0.4);">
|
||
<i class="fas fa-wifi"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 1.1rem; color: #444; line-height: 1.5; font-family: 'Manrope', sans-serif;">
|
||
Customers discover online—but they still <span
|
||
style="color: #ffaa00; font-weight: 700;">shop offline.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Point 2 -->
|
||
<div
|
||
style="display: flex; align-items: center; background: #fffdf5; border: 1px solid rgba(255, 204, 0, 0.3); padding: 18px 25px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: transform 0.3s ease;">
|
||
<div
|
||
style="background: #ffcc00; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.3rem; margin-right: 15px; flex-shrink: 0; box-shadow: 0 0 10px rgba(255,204,0,0.4);">
|
||
<i class="fas fa-database"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 1.1rem; color: #444; line-height: 1.5; font-family: 'Manrope', sans-serif;">
|
||
Yet, physical stores lack the tools to <span
|
||
style="color: #ffaa00; font-weight: 700;">track, analyze, and
|
||
engage</span> customers like digital platforms do.
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Point 3 -->
|
||
<div
|
||
style="display: flex; align-items: center; background: #fffdf5; border: 1px solid rgba(255, 204, 0, 0.3); padding: 18px 25px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: transform 0.3s ease;">
|
||
<div
|
||
style="background: #ffcc00; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.3rem; margin-right: 15px; flex-shrink: 0; box-shadow: 0 0 10px rgba(255,204,0,0.4);">
|
||
<i class="fas fa-link"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 1.1rem; color: #444; line-height: 1.5; font-family: 'Manrope', sans-serif;">
|
||
<span style="color: #ffaa00; font-weight: 700;">Loyaly.ai</span> bridges
|
||
this gap.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Center Image (Robot) -->
|
||
<div class="shift-center"
|
||
style="flex: 1; display: flex; justify-content: center; align-items: center; position: relative;margin: 0 -50px; min-width: 300px;">
|
||
<img src="assets/images/Shift.png" alt="Loyaly AI Robot"
|
||
style="max-width: 120%; height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15)); transform: scale(1.1); position: relative;">
|
||
<div
|
||
style="position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,204,0,0.3) 0%, transparent 60%);">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Column (Graphics) -->
|
||
<div class="shift-right"
|
||
style="flex: 1; min-width: 350px; max-width: 380px; display: flex; flex-direction: column; align-items: flex-end; position: relative; gap: 30px;">
|
||
|
||
<!-- Online vs Offline Graphic -->
|
||
<div
|
||
style="background: linear-gradient(#111, #111) padding-box, linear-gradient(135deg, #ffe270 0%, #ffaa00 100%) border-box; border: 1px solid transparent; border-radius: 20px; padding: 25px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 15px 30px rgba(255, 204, 0, 0.1); width: 100%;">
|
||
|
||
<!-- Online Box -->
|
||
<div style="text-align: center; flex: 1; margin-top: 5px;">
|
||
<div
|
||
style="font-weight: 800; font-family: 'Sora', sans-serif; color: #ffffff; margin-bottom: 15px; font-size: 1rem;">
|
||
ONLINE</div>
|
||
<!-- Tech Dashboard UI -->
|
||
<div
|
||
style="width: 100%; max-width: 110px; height: 180px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 5px 15px rgba(0,0,0,0.2); padding: 12px; display: flex; flex-direction: column; align-items: center; position: relative; margin: 0 auto;">
|
||
<!-- UI Header -->
|
||
<div
|
||
style="width: 100%; display: flex; justify-content: space-between; margin-bottom: 12px;">
|
||
<div
|
||
style="width: 25px; height: 4px; background: #444; border-radius: 2px;">
|
||
</div>
|
||
<div
|
||
style="width: 10px; height: 4px; background: #ffaa00; border-radius: 2px;">
|
||
</div>
|
||
</div>
|
||
<!-- Analytics Chart -->
|
||
<div
|
||
style="width: 100%; height: 50px; border-radius: 6px; background: rgba(255, 204, 0, 0.05); border: 1px dashed rgba(255, 204, 0, 0.4); display: flex; align-items: flex-end; justify-content: space-between; padding: 4px; margin-bottom: 15px;">
|
||
<div
|
||
style="width: 12px; height: 40%; background: #ffcc00; border-radius: 2px;">
|
||
</div>
|
||
<div
|
||
style="width: 12px; height: 70%; background: #ffcc00; border-radius: 2px;">
|
||
</div>
|
||
<div
|
||
style="width: 12px; height: 100%; background: #ffaa00; border-radius: 2px;">
|
||
</div>
|
||
<div
|
||
style="width: 12px; height: 50%; background: #ffcc00; border-radius: 2px;">
|
||
</div>
|
||
</div>
|
||
<!-- Data Nodes -->
|
||
<div style="display: flex; gap: 8px; margin-bottom: auto;">
|
||
<div
|
||
style="width: 22px; height: 22px; border-radius: 4px; background: rgba(255,204,0,0.1); color: #ffaa00; font-size: 0.6rem; display: flex; align-items: center; justify-content: center;">
|
||
<i class="fas fa-crosshairs"></i>
|
||
</div>
|
||
<div
|
||
style="width: 22px; height: 22px; border-radius: 4px; background: rgba(255,204,0,0.1); color: #ffaa00; font-size: 0.6rem; display: flex; align-items: center; justify-content: center;">
|
||
<i class="fas fa-fingerprint"></i>
|
||
</div>
|
||
</div>
|
||
<!-- Status -->
|
||
<div
|
||
style="width: 100%; background: rgba(255, 204, 0, 0.1); padding: 5px; border-radius: 4px; text-align: center;">
|
||
<span
|
||
style="font-size: 0.6rem; font-weight: 800; color: #ffaa00; letter-spacing: 1px;">TRACKING</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VS Badge -->
|
||
<div class="vs-badge"
|
||
style="background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #ffe270 0%, #ffaa00 100%) border-box; border: 2px solid transparent; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #ffaa00; box-shadow: 0 5px 15px rgba(255,204,0,0.1); flex-shrink: 0; margin: 0 -15px;">
|
||
<i class="fas fa-exchange-alt"></i>
|
||
</div>
|
||
|
||
<!-- Offline Box -->
|
||
<div style="text-align: center; flex: 1; margin-top: 5px;">
|
||
<div
|
||
style="font-weight: 800; font-family: 'Sora', sans-serif; color: #ffffff; margin-bottom: 15px; font-size: 1rem;">
|
||
OFFLINE</div>
|
||
<!-- Untracked Space Graphic -->
|
||
<div
|
||
style="width: 100%; max-width: 110px; height: 180px; background: rgba(255, 255, 255, 0.02); border-radius: 12px; position: relative; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px; margin: 0 auto; box-shadow: inset 0 0 10px rgba(0,0,0,0.2); overflow: hidden;">
|
||
<!-- Grid Background -->
|
||
<div
|
||
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(#444 1px, transparent 1px); background-size: 10px 10px; opacity: 0.5;">
|
||
</div>
|
||
|
||
<i class="fas fa-store-alt"
|
||
style="font-size: 2.2rem; color: #555; margin-top: 15px; position: relative;"></i>
|
||
|
||
<!-- Disconnected Nodes -->
|
||
<div
|
||
style="display: flex; gap: 12px; margin-bottom: 15px; position: relative;">
|
||
<div
|
||
style="width: 6px; height: 6px; border-radius: 50%; background: #555;">
|
||
</div>
|
||
<div
|
||
style="width: 6px; height: 6px; border-radius: 50%; background: #555;">
|
||
</div>
|
||
<div
|
||
style="width: 6px; height: 6px; border-radius: 50%; background: #555;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Status -->
|
||
<div
|
||
style="width: 100%; padding: 5px; border-radius: 4px; text-align: center; border: 1px dashed #555; position: relative; background: rgba(0,0,0,0.4);">
|
||
<span
|
||
style="font-size: 0.6rem; font-weight: 800; color: #999; letter-spacing: 1px;">BLIND
|
||
SPOT</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loyaly.ai Features Card -->
|
||
<div
|
||
style="background: linear-gradient(#111, #111) padding-box, linear-gradient(135deg, #ffe270 0%, #ffaa00 100%) border-box; border: 1px solid transparent; border-radius: 20px; padding: 30px 25px; box-shadow: 0 15px 40px rgba(255, 204, 0, 0.05); width: 100%;">
|
||
<div
|
||
style="display: flex; align-items: center; justify-content: center; margin-bottom: 25px;">
|
||
<span>
|
||
<img src="assets/images/loyalyai-logo.png" alt="Loyaly.ai Logo"
|
||
style="width: 40px; height: 40px; margin-right: 10px;">
|
||
</span>
|
||
<span
|
||
style="font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.6rem; color: #ffffff;">Loyaly.ai</span>
|
||
</div>
|
||
|
||
<div
|
||
style="display: flex; justify-content: space-between; margin-bottom: 30px;">
|
||
<div style="text-align: center;">
|
||
<div
|
||
style="background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #ffe270 0%, #ffaa00 100%) border-box; border: 1px solid transparent; width: 55px; height: 55px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: #ffaa00; font-size: 1.4rem; transition: all 0.3s ease;">
|
||
<i class="fas fa-crosshairs"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.85rem; font-weight: 700; color: #cccccc; font-family: 'Manrope', sans-serif;">
|
||
Track</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div
|
||
style="background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #ffe270 0%, #ffaa00 100%) border-box; border: 1px solid transparent; width: 55px; height: 55px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: #ffaa00; font-size: 1.4rem; transition: all 0.3s ease;">
|
||
<i class="fas fa-project-diagram"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.85rem; font-weight: 700; color: #cccccc; font-family: 'Manrope', sans-serif;">
|
||
Analyze</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div
|
||
style="background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #ffe270 0%, #ffaa00 100%) border-box; border: 1px solid transparent; width: 55px; height: 55px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: #ffaa00; font-size: 1.4rem; transition: all 0.3s ease;">
|
||
<i class="fas fa-bolt"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.85rem; font-weight: 700; color: #cccccc; font-family: 'Manrope', sans-serif;">
|
||
Engage</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div
|
||
style="background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #ffe270 0%, #ffaa00 100%) border-box; border: 1px solid transparent; width: 55px; height: 55px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: #ffaa00; font-size: 1.4rem; transition: all 0.3s ease;">
|
||
<i class="fas fa-sync-alt"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.85rem; font-weight: 700; color: #cccccc; font-family: 'Manrope', sans-serif;">
|
||
Convert</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
style="background: linear-gradient(90deg, #ffcc00, #ffaa00); color: #111; text-align: center; padding: 15px; border-radius: 30px; font-weight: 800; font-family: 'Sora', sans-serif; font-size: 1.2rem; box-shadow: 0 5px 20px rgba(255, 170, 0, 0.4); cursor: pointer; transition: transform 0.2s ease;">
|
||
<i class="fas fa-microchip" style="margin-right: 8px;"></i> Offline, But
|
||
Smarter.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<style>
|
||
.the-shift-section .shift-container>div>div>div:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.the-shift-section .shift-right>div:last-child>div:last-child:hover {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.the-shift-section {
|
||
padding: 40px 24px !important;
|
||
}
|
||
|
||
.shift-container {
|
||
flex-direction: column !important;
|
||
align-items: stretch !important;
|
||
gap: 34px !important;
|
||
padding: 44px 32px !important;
|
||
}
|
||
|
||
.shift-left,
|
||
.shift-center,
|
||
.shift-right {
|
||
max-width: 100% !important;
|
||
min-width: 0 !important;
|
||
width: 100% !important;
|
||
flex: 1 1 100% !important;
|
||
}
|
||
|
||
.shift-left,
|
||
.shift-right {
|
||
align-items: center !important;
|
||
text-align: center !important;
|
||
}
|
||
|
||
.shift-left h2 {
|
||
text-align: center !important;
|
||
}
|
||
|
||
.shift-left>div {
|
||
text-align: left !important;
|
||
}
|
||
|
||
.shift-center {
|
||
margin: 0 !important;
|
||
order: -1;
|
||
}
|
||
|
||
.shift-center img {
|
||
width: min(100%, 340px) !important;
|
||
max-width: 100% !important;
|
||
transform: scale(1) !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
.shift-center>div {
|
||
width: min(70vw, 260px) !important;
|
||
height: min(70vw, 260px) !important;
|
||
}
|
||
|
||
.shift-right {
|
||
gap: 24px !important;
|
||
}
|
||
|
||
.shift-right>div {
|
||
width: 100% !important;
|
||
max-width: 620px !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.the-shift-section {
|
||
padding: 34px 18px !important;
|
||
}
|
||
|
||
.shift-container {
|
||
padding: 34px 22px !important;
|
||
border-radius: 24px !important;
|
||
}
|
||
|
||
.the-shift-section h2 {
|
||
font-size: clamp(2.15rem, 10vw, 2.8rem) !important;
|
||
letter-spacing: 0 !important;
|
||
line-height: 1.12 !important;
|
||
}
|
||
|
||
.shift-right>div:first-child {
|
||
flex-direction: column !important;
|
||
align-items: stretch !important;
|
||
gap: 18px !important;
|
||
}
|
||
|
||
.shift-right>div:first-child>div.vs-badge {
|
||
margin: 0 auto !important;
|
||
transform: rotate(90deg) !important;
|
||
}
|
||
|
||
.shift-right>div:nth-child(2)>div:nth-child(2) {
|
||
flex-wrap: wrap !important;
|
||
gap: 20px !important;
|
||
justify-content: center !important;
|
||
}
|
||
|
||
.shift-right>div:nth-child(2)>div:nth-child(2)>div {
|
||
flex: 1 1 40% !important;
|
||
}
|
||
|
||
.shift-left>div:nth-child(3)>div {
|
||
align-items: flex-start !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 425px) {
|
||
.the-shift-section {
|
||
padding: 28px 12px !important;
|
||
}
|
||
|
||
.the-shift-section .shift-container {
|
||
padding: 26px 14px !important;
|
||
border-radius: 20px !important;
|
||
gap: 26px !important;
|
||
}
|
||
|
||
.the-shift-section h2 {
|
||
font-size: 2rem !important;
|
||
line-height: 1.15 !important;
|
||
}
|
||
|
||
.shift-right {
|
||
min-width: 100% !important;
|
||
}
|
||
|
||
.shift-right>div {
|
||
padding: 16px 14px !important;
|
||
}
|
||
|
||
.shift-right>div:nth-child(2)>div:nth-child(2)>div {
|
||
flex: 1 1 45% !important;
|
||
min-width: 90px !important;
|
||
}
|
||
|
||
.the-shift-section .shift-left>div:nth-child(3)>div {
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
text-align: center !important;
|
||
padding: 16px 14px !important;
|
||
}
|
||
|
||
.the-shift-section .shift-left>div:nth-child(3)>div>div:first-child {
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
.shift-center img {
|
||
width: min(100%, 260px) !important;
|
||
}
|
||
|
||
.shift-right>div:first-child>div:not(.vs-badge) {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.shift-right>div:last-child>div:nth-child(2) {
|
||
flex-wrap: wrap !important;
|
||
gap: 16px !important;
|
||
}
|
||
|
||
.shift-right>div:last-child>div:nth-child(2)>div {
|
||
flex: 1 1 45% !important;
|
||
}
|
||
}
|
||
</style>
|
||
</section>
|
||
|
||
<!-- What We Do Section -->
|
||
<section class="what-we-do-section elementor-top-section elementor-section-boxed"
|
||
style=" padding: 30px; position: relative;">
|
||
<div class="elementor-container">
|
||
<div class="wwd-container"
|
||
style="width: 100%; border-radius: 30px; padding: 60px 50px; position: relative; background: #111111; border: 2px solid rgba(255, 204, 0, 0.4); box-shadow: 0 10px 40px rgba(255, 204, 0, 0.15), inset 0 0 30px rgba(255, 204, 0, 0.05); display: flex; flex-direction: column; overflow: hidden;">
|
||
|
||
<!-- Background Glow -->
|
||
<!-- <div
|
||
style="position: absolute; top: 0; right: 0; width: 60%; height: 100%; pointer-events: none;">
|
||
</div> -->
|
||
|
||
<!-- Top Row: Text + Image -->
|
||
<div
|
||
style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; margin-bottom: 50px;">
|
||
|
||
<!-- Text Area -->
|
||
<div class="wwd-text" style="flex: 1; min-width: 300px; padding-right: 30px;">
|
||
<!-- Badge -->
|
||
<div
|
||
style="display: inline-flex; align-items: center; background: #ffcc00; padding: 8px 20px; border-radius: 30px; font-weight: 700; color: #111; margin-bottom: 30px; font-family: 'Manrope', sans-serif; box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);">
|
||
<span
|
||
style="background-color: white; padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
|
||
<img src="assets/images/loyalyai-logo.png" alt="LoyalyAI Logo"
|
||
style="width: 20px; height: 20px;">
|
||
</span>
|
||
What We Do
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<h2
|
||
style="font-size: 4.2rem; color: #ffffff; font-family: 'Sora', sans-serif; line-height: 1.1; font-weight: 400; letter-spacing: -1.5px; margin: 0;">
|
||
Understand. Engage.<br>
|
||
Convert. <span style="color: #ffaa00;">Retain.</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<!-- Image Area -->
|
||
<div class="wwd-image"
|
||
style="flex: 1; display: flex; justify-content: flex-end; align-items: center; position: relative;">
|
||
<img src="assets/images/What_we_do.png" alt="AI Robot"
|
||
style=" object-fit: contain;">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom Row: 4 Cards -->
|
||
<div class="wwd-cards"
|
||
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; position: relative;">
|
||
|
||
<!-- Desktop Connection Arrow (CSS) -->
|
||
<style>
|
||
@media (min-width: 1024px) {
|
||
.wwd-card-wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.wwd-card-wrapper:not(:last-child)::after {
|
||
content: '\f061';
|
||
font-family: 'Font Awesome 5 Free';
|
||
font-weight: 900;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -18px;
|
||
transform: translateY(-50%);
|
||
color: rgba(255, 204, 0, 0.6);
|
||
font-size: 1.2rem;
|
||
z-index: 10;
|
||
}
|
||
}
|
||
|
||
.wwd-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 204, 0, 0.3);
|
||
border-radius: 20px;
|
||
padding: 40px 25px;
|
||
text-align: center;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||
transition: all 0.3s ease;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.wwd-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 35px rgba(255, 204, 0, 0.15);
|
||
border-color: rgba(255, 204, 0, 0.6);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.wwd-text h2 {
|
||
font-size: 3rem !important;
|
||
}
|
||
|
||
.wwd-image {
|
||
justify-content: center !important;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.wwd-container {
|
||
padding: 40px 30px !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 425px) {
|
||
.wwd-container {
|
||
padding: 30px 20px !important;
|
||
}
|
||
|
||
.wwd-text h2 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
|
||
.wwd-cards {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
.wwd-card {
|
||
padding: 30px 20px !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Card 1 -->
|
||
<div class="wwd-card-wrapper">
|
||
<div class="wwd-card">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 2rem; color: #111; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-chart-bar"></i>
|
||
</div>
|
||
<h3
|
||
style="font-size: 1.4rem; color: #ffffff; font-family: 'Sora', sans-serif; font-weight: 800; margin-bottom: 15px;">
|
||
Understand</h3>
|
||
<p
|
||
style="color: #cccccc; font-family: 'Manrope', sans-serif; font-size: 1rem; line-height: 1.6; margin: 0;">
|
||
Track footfall, behavior, and in-store movement with AI.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2 -->
|
||
<div class="wwd-card-wrapper">
|
||
<div class="wwd-card">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 2rem; color: #111; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-bullhorn"></i>
|
||
</div>
|
||
<h3
|
||
style="font-size: 1.4rem; color: #ffffff; font-family: 'Sora', sans-serif; font-weight: 800; margin-bottom: 15px;">
|
||
Engage</h3>
|
||
<p
|
||
style="color: #cccccc; font-family: 'Manrope', sans-serif; font-size: 1rem; line-height: 1.6; margin: 0;">
|
||
Deliver personalized offers and rewards in real-time.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 3 -->
|
||
<div class="wwd-card-wrapper">
|
||
<div class="wwd-card">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 2rem; color: #111; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-shopping-cart"></i>
|
||
</div>
|
||
<h3
|
||
style="font-size: 1.4rem; color: #ffffff; font-family: 'Sora', sans-serif; font-weight: 800; margin-bottom: 15px;">
|
||
Convert</h3>
|
||
<p
|
||
style="color: #cccccc; font-family: 'Manrope', sans-serif; font-size: 1rem; line-height: 1.6; margin: 0;">
|
||
Turn visitors into paying customers with targeted actions.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 4 -->
|
||
<div class="wwd-card-wrapper">
|
||
<div class="wwd-card">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 2rem; color: #111; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-heart"></i>
|
||
</div>
|
||
<h3
|
||
style="font-size: 1.4rem; color: #ffffff; font-family: 'Sora', sans-serif; font-weight: 800; margin-bottom: 15px;">
|
||
Retain</h3>
|
||
<p
|
||
style="color: #cccccc; font-family: 'Manrope', sans-serif; font-size: 1rem; line-height: 1.6; margin: 0;">
|
||
Build loyalty and drive repeat purchases effortlessly.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="elementor-section elementor-top-section elementor-element elementor-element-9e885ce elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default"
|
||
data-id="9e885ce" data-element_type="section"
|
||
data-settings="{"stretch_section":"section-stretched"}">
|
||
<div class="elementor-container elementor-column-gap-no">
|
||
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6d176be"
|
||
data-id="6d176be" data-element_type="column">
|
||
<div class="elementor-widget-wrap elementor-element-populated">
|
||
<div class="elementor-element elementor-element-9b40dad elementor-widget elementor-widget-aiero_special_text"
|
||
data-id="9b40dad" data-element_type="widget"
|
||
data-widget_type="aiero_special_text.default">
|
||
<div class="elementor-widget-container">
|
||
<div class="special-text-wrapper animate animated animation-direction-left">
|
||
<div class="special-text">/ Loyaly.AI Into a Lasting Relationship
|
||
</div>
|
||
<div class="special-text">/ Loyaly.AI Into a Lasting Relationship
|
||
. </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Our Products Section -->
|
||
<section class="our-products-section elementor-top-section elementor-section-boxed"
|
||
style="background-color: #ffffff; padding: 50px 30px; position: relative;">
|
||
<div class="elementor-container">
|
||
<div class="products-container"
|
||
style="width: 100%;background-position: center; background-size: cover; border-radius: 30px; padding: 60px 40px; position: relative; background: #fffdf5; border: 2px solid rgba(255, 204, 0, 0.3); box-shadow: 0 15px 50px rgba(255, 204, 0, 0.1), inset 0 0 40px rgba(255, 204, 0, 0.05); display: flex; flex-direction: column; align-items: center; overflow: hidden;">
|
||
|
||
<!-- Background Glow -->
|
||
<!-- <div
|
||
style="position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,204,0,0.1) 0%, transparent 60%); transform: translate(-50%, -50%); pointer-events: none;">
|
||
</div> -->
|
||
|
||
<!-- Badge -->
|
||
<div
|
||
style="display: inline-flex; align-items: center; background: #ffcc00; padding: 10px 25px; border-radius: 30px; font-weight: 800; font-size: 1.1rem; color: #111; margin-bottom: 50px; font-family: 'Sora', sans-serif; box-shadow: 0 5px 20px rgba(255, 204, 0, 0.4); position: relative;">
|
||
<span
|
||
style="background-color: white; padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
|
||
<img src="assets/images/loyalyai-logo.png" alt="LoyalyAI Logo"
|
||
style="width: 22px; height: 22px;">
|
||
</span>
|
||
Powered by Loyaly.AI
|
||
</div>
|
||
|
||
<!-- 3-Column Layout -->
|
||
<div class="products-layout"
|
||
style="display: flex; flex-wrap: wrap; width: 100%; gap: 30px; align-items: center; justify-content: center; position: relative;">
|
||
|
||
<!-- Left Column (2 Cards) -->
|
||
<div class="products-col-side"
|
||
style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 30px;">
|
||
|
||
<!-- Card 1: Behavision -->
|
||
<div class="product-card"
|
||
style="background: #ffffff; border: 1px solid rgba(255, 204, 0, 0.3); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(255, 204, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
<div style="display: flex; align-items: center; margin-bottom: 20px;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 2rem; margin-right: 20px; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3); position: relative;">
|
||
<i class="fas fa-video"></i>
|
||
<span
|
||
style="position: absolute; bottom: -5px; right: -5px; background: #111; color: #ffcc00; font-size: 0.6rem; font-weight: 800; padding: 3px 6px; border-radius: 6px;">AI</span>
|
||
</div>
|
||
<h3
|
||
style="font-size: 1.8rem; color: #111; font-family: 'Sora', sans-serif; font-weight: 800; margin: 0; letter-spacing: -0.5px;">
|
||
Beha<span style="color: #ffaa00;">vision</span></h3>
|
||
</div>
|
||
<p
|
||
style="color: #555; font-family: 'Manrope', sans-serif; font-size: 1.05rem; line-height: 1.6; margin-bottom: 25px; font-weight: 500;">
|
||
AI-powered footfall analytics and behavioral intelligence.
|
||
</p>
|
||
<!-- Widget -->
|
||
<div
|
||
style="background: #fffdf5; border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 12px; padding: 15px; display: flex; align-items: center; justify-content: space-between;">
|
||
<!-- Mock Line Chart -->
|
||
<div style="flex: 1; display: flex; align-items: center;">
|
||
<svg width="100%" height="100%" viewBox="0 0 100 40"
|
||
preserveAspectRatio="none">
|
||
<defs>
|
||
<linearGradient id="chartGradientBeha" x1="0%" y1="0%"
|
||
x2="0%" y2="100%">
|
||
<stop offset="0%" stop-color="#ffaa00"
|
||
stop-opacity="0.6" />
|
||
<stop offset="100%" stop-color="#ffaa00"
|
||
stop-opacity="0" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path
|
||
d="M 0 35 L 20 15 L 40 25 L 60 5 L 80 18 L 100 8 L 100 40 L 0 40 Z"
|
||
fill="url(#chartGradientBeha)" />
|
||
<path d="M 0 35 L 20 15 L 40 25 L 60 5 L 80 18 L 100 8"
|
||
fill="none" stroke="#ffaa00" stroke-width="2.5"
|
||
stroke-linecap="round" stroke-linejoin="round" />
|
||
<circle cx="20" cy="15" r="3" fill="#ffffff" stroke="#ffaa00"
|
||
stroke-width="1.5" />
|
||
<circle cx="40" cy="25" r="3" fill="#ffffff" stroke="#ffaa00"
|
||
stroke-width="1.5" />
|
||
<circle cx="60" cy="5" r="3" fill="#ffffff" stroke="#ffaa00"
|
||
stroke-width="1.5" />
|
||
<circle cx="80" cy="18" r="3" fill="#ffffff" stroke="#ffaa00"
|
||
stroke-width="1.5" />
|
||
<circle cx="100" cy="8" r="4" fill="#ffffff" stroke="#ffaa00"
|
||
stroke-width="2" />
|
||
</svg>
|
||
</div>
|
||
<div style="text-align: right; padding-left: 15px;">
|
||
<div
|
||
style="font-size: 1.4rem; font-weight: 800; font-family: 'Sora', sans-serif; color: #111; display: flex; align-items: center; justify-content: flex-end; gap: 5px;">
|
||
<i class="fas fa-users"
|
||
style="color:#ffcc00; font-size:1rem;"></i> 1,246
|
||
</div>
|
||
<div
|
||
style="font-size: 0.75rem; color: #777; font-weight: 600; text-transform: uppercase;">
|
||
Total Visitors</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2: SpendSense -->
|
||
<div class="product-card spend-sense-card"
|
||
style="background: #ffffff; border: 1px solid rgba(255, 204, 0, 0.3); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(255, 204, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
<div style="display: flex; align-items: center; margin-bottom: 20px;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 2rem; margin-right: 20px; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3); position: relative;">
|
||
<i class="fas fa-shopping-cart"></i>
|
||
<span
|
||
style="position: absolute; bottom: 0; right: -5px; background: #fff; border: 2px solid #ffcc00; color: #111; font-size: 0.7rem; font-weight: 800; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%;"><i
|
||
class="fas fa-rupee-sign"></i></span>
|
||
</div>
|
||
<h3
|
||
style="font-size: 1.8rem; color: #111; font-family: 'Sora', sans-serif; font-weight: 800; margin: 0; letter-spacing: -0.5px;">
|
||
Spend<span style="color: #ffaa00;">Sense</span></h3>
|
||
</div>
|
||
<p
|
||
style="color: #555; font-family: 'Manrope', sans-serif; font-size: 1.05rem; line-height: 1.6; margin-bottom: 25px; font-weight: 500;">
|
||
Deep insights into customer spending patterns.
|
||
</p>
|
||
<!-- Widget -->
|
||
<div class="spend-sense-widget"
|
||
style="background: #fffdf5; border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 12px; padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px;">
|
||
<div class="spend-sense-total">
|
||
<div
|
||
style="font-size: 0.75rem; color: #777; font-weight: 600; text-transform: uppercase;">
|
||
Total Spend</div>
|
||
<div
|
||
style="font-size: 1.5rem; font-weight: 800; font-family: 'Sora', sans-serif; color: #ffaa00;">
|
||
₹2,432.50</div>
|
||
<div
|
||
style="font-size: 0.75rem; color: #28a745; font-weight: 700; margin-top: 5px;">
|
||
<i class="fas fa-caret-up"></i> 8.5% <span
|
||
style="color: #999; font-weight: 500;">vs last month</span>
|
||
</div>
|
||
</div>
|
||
<div class="spend-sense-breakdown" style="display: flex; align-items: center; gap: 15px;">
|
||
<!-- CSS Donut Chart -->
|
||
<div class="spend-sense-donut"
|
||
style="width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(#ffaa00 0% 45%, #4285f4 45% 70%, #9b51e0 70% 90%, #28a745 90% 100%); position: relative; display: flex; align-items: center; justify-content: center;">
|
||
<div
|
||
style="width: 30px; height: 30px; background: #fffdf5; border-radius: 50%;">
|
||
</div>
|
||
</div>
|
||
<!-- Legend -->
|
||
<div class="spend-sense-legend" style="display: flex; flex-direction: column; gap: 3px;">
|
||
<div
|
||
style="font-size: 0.65rem; color: #555; display: flex; align-items: center;">
|
||
<span
|
||
style="width: 6px; height: 6px; background: #ffaa00; border-radius: 50%; margin-right: 5px;"></span>
|
||
Fashion <span
|
||
style="margin-left:auto; font-weight: 700; padding-left: 10px;">45%</span>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.65rem; color: #555; display: flex; align-items: center;">
|
||
<span
|
||
style="width: 6px; height: 6px; background: #4285f4; border-radius: 50%; margin-right: 5px;"></span>
|
||
Tech <span
|
||
style="margin-left:auto; font-weight: 700; padding-left: 10px;">25%</span>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.65rem; color: #555; display: flex; align-items: center;">
|
||
<span
|
||
style="width: 6px; height: 6px; background: #9b51e0; border-radius: 50%; margin-right: 5px;"></span>
|
||
Home <span
|
||
style="margin-left:auto; font-weight: 700; padding-left: 10px;">20%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Center Column (Robot) -->
|
||
<div class="products-col-center"
|
||
style="display: flex; justify-content: center; position: relative;">
|
||
<!-- Top Icon -->
|
||
<div
|
||
style="position: absolute; top: -40px; background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px rgba(255,204,0,0.3); transform: rotate(-10deg); border: 3px solid #fff;">
|
||
<i class="fas fa-heart"
|
||
style="color: #ffffff; font-size: 2.5rem; text-shadow: 0 2px 5px rgba(0,0,0,0.2);"></i>
|
||
</div>
|
||
<img src="assets/images/Our products.png" alt="Loyaly Products Robot"
|
||
style="width: 100%; max-width: 400px; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(255,204,0,0.2)); margin-top: 30px;">
|
||
</div>
|
||
|
||
<!-- Right Column (2 Cards) -->
|
||
<div class="products-col-side"
|
||
style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 30px;">
|
||
|
||
<!-- Card 3: Dyscount -->
|
||
<div class="product-card"
|
||
style="background: #ffffff; border: 1px solid rgba(255, 204, 0, 0.3); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(255, 204, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
<div style="display: flex; align-items: center; margin-bottom: 20px;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; font-size: 2rem; margin-right: 20px; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-tags"></i>
|
||
</div>
|
||
<h3
|
||
style="font-size: 1.8rem; color: #111; font-family: 'Sora', sans-serif; font-weight: 800; margin: 0; letter-spacing: -0.5px;">
|
||
Dys<span style="color: #ffaa00;">count</span></h3>
|
||
</div>
|
||
<p
|
||
style="color: #555; font-family: 'Manrope', sans-serif; font-size: 1.05rem; line-height: 1.6; margin-bottom: 25px; font-weight: 500;">
|
||
Smart discount engine that maximizes conversions without killing
|
||
margins.
|
||
</p>
|
||
<!-- Widget -->
|
||
<div
|
||
style="background: #fffdf5; border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 12px; padding: 15px; display: flex; align-items: center; justify-content: space-between;">
|
||
<div style="display: flex; align-items: center; gap: 10px;">
|
||
<div
|
||
style="width: 30px; height: 30px; background: #ffaa00; color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem;">
|
||
%</div>
|
||
<div
|
||
style="font-size: 0.75rem; color: #333; font-weight: 700; line-height: 1.2;">
|
||
Smart Discount<br><span style="color: #28a745;">Applied</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="text-align: right; border-left: 1px dashed rgba(255,204,0,0.4); padding-left: 15px;">
|
||
<div style="font-size: 0.7rem; color: #777; font-weight: 600;">Lift
|
||
in Conversions</div>
|
||
<div
|
||
style="display: flex; align-items: baseline; justify-content: flex-end; gap: 5px;">
|
||
<span
|
||
style="color: #28a745; font-weight: 800; font-size: 1.1rem;"><i
|
||
class="fas fa-arrow-up"></i> 28%</span>
|
||
<!-- Mini Bar Chart -->
|
||
<div
|
||
style="display: flex; align-items: flex-end; gap: 3px; height: 20px; margin-left: 5px;">
|
||
<div
|
||
style="width: 5px; height: 40%; background: #ffcc00; border-radius: 2px;">
|
||
</div>
|
||
<div
|
||
style="width: 5px; height: 70%; background: #ffaa00; border-radius: 2px;">
|
||
</div>
|
||
<div
|
||
style="width: 5px; height: 100%; background: #28a745; border-radius: 2px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 4: Loyaly App -->
|
||
<div class="product-card"
|
||
style="background: #ffffff; border: 1px solid rgba(255, 204, 0, 0.3); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(255, 204, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
<div style="display: flex; align-items: center; margin-bottom: 20px;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 2rem; margin-right: 20px; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3); position: relative;">
|
||
<i class="fas fa-mobile-alt"></i>
|
||
<span
|
||
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffaa00; font-size: 0.9rem;"><i
|
||
class="fas fa-heart"></i></span>
|
||
</div>
|
||
<h3
|
||
style="font-size: 1.8rem; color: #111; font-family: 'Sora', sans-serif; font-weight: 800; margin: 0; letter-spacing: -0.5px;">
|
||
Loyaly <span style="color: #ffaa00;">App</span></h3>
|
||
</div>
|
||
<p
|
||
style="color: #555; font-family: 'Manrope', sans-serif; font-size: 1.05rem; line-height: 1.6; margin-bottom: 25px; font-weight: 500;">
|
||
A consumer platform that connects shoppers with offers, rewards, and
|
||
experiences.
|
||
</p>
|
||
<!-- Widget -->
|
||
<div
|
||
style="background: #fffdf5; border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 12px; padding: 15px; display: flex; justify-content: space-between;">
|
||
<div style="text-align: center; flex: 1;">
|
||
<div
|
||
style="background: #fff; width: 35px; height: 35px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: #ffaa00; margin: 0 auto 5px; font-size: 1.1rem;">
|
||
<i class="fas fa-tag"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.6rem; color: #555; font-weight: 700; line-height: 1.2;">
|
||
Exclusive<br>Offers</div>
|
||
</div>
|
||
<div style="text-align: center; flex: 1;">
|
||
<div
|
||
style="background: #fff; width: 35px; height: 35px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: #ffaa00; margin: 0 auto 5px; font-size: 1.1rem;">
|
||
<i class="fas fa-gift"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.6rem; color: #555; font-weight: 700; line-height: 1.2;">
|
||
Rewards</div>
|
||
</div>
|
||
<div style="text-align: center; flex: 1;">
|
||
<div
|
||
style="background: #fff; width: 35px; height: 35px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: #ffaa00; margin: 0 auto 5px; font-size: 1.1rem;">
|
||
<i class="fas fa-trophy"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.6rem; color: #555; font-weight: 700; line-height: 1.2;">
|
||
Challenges</div>
|
||
</div>
|
||
<div style="text-align: center; flex: 1;">
|
||
<div
|
||
style="background: #fff; width: 35px; height: 35px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; color: #ffaa00; margin: 0 auto 5px; font-size: 1.1rem;">
|
||
<i class="fas fa-star"></i>
|
||
</div>
|
||
<div
|
||
style="font-size: 0.6rem; color: #555; font-weight: 700; line-height: 1.2;">
|
||
Experiences</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.product-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 15px 40px rgba(255, 204, 0, 0.2) !important;
|
||
border-color: rgba(255, 204, 0, 0.6) !important;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.products-col-center {
|
||
order: -1;
|
||
flex: 0 0 100% !important;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.products-col-side {
|
||
min-width: 100% !important;
|
||
}
|
||
|
||
.spend-sense-widget {
|
||
align-items: stretch !important;
|
||
}
|
||
|
||
.spend-sense-breakdown {
|
||
flex-shrink: 0 !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.spend-sense-widget {
|
||
flex-direction: column !important;
|
||
align-items: stretch !important;
|
||
gap: 18px !important;
|
||
}
|
||
|
||
.spend-sense-total {
|
||
text-align: center !important;
|
||
}
|
||
|
||
.spend-sense-breakdown {
|
||
justify-content: center !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.spend-sense-legend {
|
||
min-width: 120px !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 425px) {
|
||
.products-container {
|
||
padding: 30px 15px !important;
|
||
}
|
||
|
||
.our-products-section .product-card {
|
||
padding: 20px !important;
|
||
}
|
||
|
||
.our-products-section .product-card h3 {
|
||
font-size: 1.5rem !important;
|
||
}
|
||
|
||
.products-col-side {
|
||
min-width: 100% !important;
|
||
}
|
||
|
||
.our-products-section .product-card>div:last-child {
|
||
flex-wrap: wrap;
|
||
justify-content: center !important;
|
||
gap: 15px;
|
||
}
|
||
|
||
.our-products-section .product-card>div:last-child>div {
|
||
border-left: none !important;
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
.spend-sense-card {
|
||
padding: 18px !important;
|
||
}
|
||
|
||
.spend-sense-widget {
|
||
padding: 14px !important;
|
||
}
|
||
|
||
.spend-sense-breakdown {
|
||
flex-direction: column !important;
|
||
gap: 12px !important;
|
||
}
|
||
|
||
.spend-sense-donut {
|
||
width: 58px !important;
|
||
height: 58px !important;
|
||
}
|
||
|
||
.spend-sense-donut>div {
|
||
width: 34px !important;
|
||
height: 34px !important;
|
||
}
|
||
|
||
.spend-sense-legend {
|
||
width: 100% !important;
|
||
max-width: 190px !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
}
|
||
</style>
|
||
</section>
|
||
|
||
<!-- The Loop Section -->
|
||
<section class="the-loop-section elementor-top-section elementor-section-boxed"
|
||
style=" padding: 50px 30px; position: relative; overflow: hidden;">
|
||
<div class="elementor-container">
|
||
<div class="loop-container"
|
||
style="width: 100%; border-radius: 30px; padding: 60px 50px; position: relative; background: #1a1a1a; border: 2px solid rgba(255, 204, 0, 0.4); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(255, 204, 0, 0.05); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between;">
|
||
|
||
<!-- Background Glow -->
|
||
<!-- <div
|
||
style="position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(255,204,0,0.1) 0%, transparent 60%); transform: translate(-50%, -50%); pointer-events: none; z-index: 0;">
|
||
</div> -->
|
||
|
||
<!-- Left Content -->
|
||
<div class="loop-left" style="flex: 1; min-width: 300px; position: relative;">
|
||
<!-- Badge -->
|
||
<div
|
||
style="display: inline-flex; align-items: center; background: #ffcc00; padding: 8px 20px; border-radius: 30px; font-weight: 800; color: #111; margin-bottom: 30px; font-family: 'Sora', sans-serif; box-shadow: 0 5px 20px rgba(255, 204, 0, 0.4);">
|
||
<span
|
||
style="background-color: white; padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
|
||
<img src="assets/images/loyalyai-logo.png" alt="LoyalyAI Logo"
|
||
style="width: 20px; height: 20px;">
|
||
</span>
|
||
The Loop
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<h2
|
||
style="font-size: 4rem; color: #ffffff; font-family: 'Sora', sans-serif; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 40px; margin-top: 0;">
|
||
A Smarter<br>
|
||
<span style="color: #ffaa00;">Retail Cycle</span>
|
||
</h2>
|
||
|
||
<!-- Mini Flow -->
|
||
<div
|
||
style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 20px; padding: 25px; margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 10px;">
|
||
<div style="text-align: center; flex: 1;">
|
||
<div style="color: #ffaa00; font-size: 1.8rem; margin-bottom: 10px;"><i
|
||
class="fas fa-gift"></i></div>
|
||
<div
|
||
style="color: #ccc; font-size: 0.85rem; font-weight: 700; font-family: 'Manrope', sans-serif;">
|
||
Earn<br>online</div>
|
||
</div>
|
||
<div style="color: #555; font-size: 1.2rem;"><i class="fas fa-arrow-right"></i>
|
||
</div>
|
||
<div style="text-align: center; flex: 1;">
|
||
<div style="color: #ffaa00; font-size: 1.8rem; margin-bottom: 10px;"><i
|
||
class="fas fa-store"></i></div>
|
||
<div
|
||
style="color: #ccc; font-size: 0.85rem; font-weight: 700; font-family: 'Manrope', sans-serif;">
|
||
Engage<br>in-store</div>
|
||
</div>
|
||
<div style="color: #555; font-size: 1.2rem;"><i class="fas fa-arrow-right"></i>
|
||
</div>
|
||
<div style="text-align: center; flex: 1;">
|
||
<div style="color: #ffaa00; font-size: 1.8rem; margin-bottom: 10px;"><i
|
||
class="fas fa-shopping-bag"></i></div>
|
||
<div
|
||
style="color: #ccc; font-size: 0.85rem; font-weight: 700; font-family: 'Manrope', sans-serif;">
|
||
Spend<br>offline</div>
|
||
</div>
|
||
<div style="color: #555; font-size: 1.2rem;"><i class="fas fa-arrow-right"></i>
|
||
</div>
|
||
<div style="text-align: center; flex: 1;">
|
||
<div style="color: #ffaa00; font-size: 1.8rem; margin-bottom: 10px;"><i
|
||
class="fas fa-sync-alt"></i></div>
|
||
<div
|
||
style="color: #ccc; font-size: 0.85rem; font-weight: 700; font-family: 'Manrope', sans-serif;">
|
||
Repeat<br> </div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Description -->
|
||
<div
|
||
style="background: rgba(255, 204, 0, 0.05); border: 1px solid rgba(255, 204, 0, 0.3); border-radius: 20px; padding: 25px; display: flex; align-items: flex-start; gap: 20px;">
|
||
<div style="color: #ffaa00; font-size: 2.5rem; flex-shrink: 0;"><i
|
||
class="fas fa-heart"></i></div>
|
||
<p
|
||
style="color: #ddd; font-family: 'Manrope', sans-serif; font-size: 1.1rem; line-height: 1.6; margin: 0; font-weight: 500;">
|
||
We create a <span style="color: #ffaa00; font-weight: 700;">continuous loop
|
||
of engagement</span> that benefits both customers and businesses.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Content (Diagram) -->
|
||
<div class="loop-right"
|
||
style="flex: 1.2; min-width: 400px; position: relative; display: flex; justify-content: center; align-items: center; min-height: 550px;">
|
||
|
||
<div class="loop-circle-container"
|
||
style="position: relative; width: 100%; max-width: 450px; aspect-ratio: 1/1;">
|
||
|
||
<!-- SVG Ring -->
|
||
<svg viewBox="0 0 100 100"
|
||
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;">
|
||
<defs>
|
||
<linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" stop-color="#ffcc00" />
|
||
<stop offset="100%" stop-color="#ffaa00" />
|
||
</linearGradient>
|
||
<marker id="arrowHead" markerWidth="6" markerHeight="6" refX="5"
|
||
refY="3" orient="auto">
|
||
<path d="M0,0 L0,6 L6,3 z" fill="#ffaa00" />
|
||
</marker>
|
||
</defs>
|
||
<circle cx="50" cy="50" r="48" fill="none" stroke="url(#ringGrad)"
|
||
stroke-width="1.5" opacity="0.4" />
|
||
|
||
<!-- Animated rotating ring -->
|
||
<circle cx="50" cy="50" r="48" fill="none" stroke="#ffaa00" stroke-width="2"
|
||
stroke-dasharray="80 220" opacity="0.8">
|
||
<animateTransform attributeName="transform" type="rotate" from="0 50 50"
|
||
to="360 50 50" dur="10s" repeatCount="indefinite" />
|
||
</circle>
|
||
</svg>
|
||
|
||
<!-- Center Robot Image -->
|
||
<div class="robot-center"
|
||
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;display: flex; align-items: center; justify-content: center;">
|
||
<div
|
||
style="position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,204,0,0.2) 0%, transparent 70%); border-radius: 50%;">
|
||
</div>
|
||
<img src="assets/images/loop.png" alt="Loyaly Robot"
|
||
style="width: 100%; position: relative; filter: drop-shadow(0 15px 25px rgba(255,204,0,0.3));">
|
||
</div>
|
||
|
||
<!-- Node 1: Earn Online (Top) -->
|
||
<div class="loop-node loop-node-1"
|
||
style="position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: rgba(26, 26, 26, 0.9); backdrop-filter: blur(10px); border: 2px solid rgba(255, 204, 0, 0.4); border-radius: 20px; padding: 15px; width: 240px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; align-items: flex-start; gap: 15px; transition: transform 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-mobile-alt"></i>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
style="color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 0.95rem; margin: 0 0 5px 0;">
|
||
1. Earn Online</h4>
|
||
<p
|
||
style="color: #aaa; font-family: 'Manrope', sans-serif; font-size: 0.75rem; line-height: 1.4; margin: 0;">
|
||
Customers discover offers, earn rewards, and build loyalty.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Node 2: Engage In-Store (Right) -->
|
||
<div class="loop-node loop-node-2"
|
||
style="position: absolute; top: 50%; right: -15%; transform: translate(50%, -50%); background: rgba(26, 26, 26, 0.9); backdrop-filter: blur(10px); border: 2px solid rgba(255, 204, 0, 0.4); border-radius: 20px; padding: 15px; width: 240px; box-shadow: 0 10px 25px rgba(0,0,0,0.5);display: flex; align-items: flex-start; gap: 15px; transition: transform 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-store"></i>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
style="color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 0.95rem; margin: 0 0 5px 0;">
|
||
2. Engage In-Store</h4>
|
||
<p
|
||
style="color: #aaa; font-family: 'Manrope', sans-serif; font-size: 0.75rem; line-height: 1.4; margin: 0;">
|
||
They visit your store and engage with personalized experiences.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Node 3: Spend Offline (Bottom) -->
|
||
<div class="loop-node loop-node-3"
|
||
style="position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); background: rgba(26, 26, 26, 0.9); backdrop-filter: blur(10px); border: 2px solid rgba(255, 204, 0, 0.4); border-radius: 20px; padding: 15px; width: 240px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; align-items: flex-start; gap: 15px; transition: transform 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-shopping-cart"></i>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
style="color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 0.95rem; margin: 0 0 5px 0;">
|
||
3. Spend Offline</h4>
|
||
<p
|
||
style="color: #aaa; font-family: 'Manrope', sans-serif; font-size: 0.75rem; line-height: 1.4; margin: 0;">
|
||
They make purchases in-store and enjoy exclusive benefits.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Node 4: Repeat (Left) -->
|
||
<div class="loop-node loop-node-4"
|
||
style="position: absolute; top: 50%; left: -15%; transform: translate(-50%, -50%); background: rgba(26, 26, 26, 0.9); backdrop-filter: blur(10px); border: 2px solid rgba(255, 204, 0, 0.4); border-radius: 20px; padding: 15px; width: 240px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; align-items: flex-start; gap: 15px; transition: transform 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #111; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-sync-alt"></i>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
style="color: #fff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 0.95rem; margin: 0 0 5px 0;">
|
||
4. Repeat</h4>
|
||
<p
|
||
style="color: #aaa; font-family: 'Manrope', sans-serif; font-size: 0.75rem; line-height: 1.4; margin: 0;">
|
||
They return, earn more, and continue the cycle.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.loop-node:hover {
|
||
border-color: #ffaa00 !important;
|
||
box-shadow: 0 15px 35px rgba(255, 204, 0, 0.2) !important;
|
||
}
|
||
|
||
.loop-node-1:hover {
|
||
transform: translate(-50%, -50%) scale(1.05) !important;
|
||
}
|
||
|
||
.loop-node-2:hover {
|
||
transform: translate(50%, -50%) scale(1.05) !important;
|
||
}
|
||
|
||
.loop-node-3:hover {
|
||
transform: translate(-50%, 50%) scale(1.05) !important;
|
||
}
|
||
|
||
.loop-node-4:hover {
|
||
transform: translate(-50%, -50%) scale(1.05) !important;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
|
||
|
||
.loop-circle-container {
|
||
max-width: 380px !important;
|
||
}
|
||
|
||
.loop-right {
|
||
min-height: 450px !important;
|
||
min-width: 360px !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
|
||
.loop-container {
|
||
flex-direction: column !important;
|
||
padding: 40px 30px !important;
|
||
gap: 32px !important;
|
||
align-items: stretch !important;
|
||
}
|
||
|
||
.loop-left {
|
||
width: 100% !important;
|
||
min-width: 0 !important;
|
||
text-align: center !important;
|
||
}
|
||
|
||
.loop-right {
|
||
margin-top: 10px !important;
|
||
width: 100% !important;
|
||
min-width: 0 !important;
|
||
min-height: auto !important;
|
||
display: block !important;
|
||
}
|
||
|
||
.loop-node {
|
||
position: relative !important;
|
||
top: auto !important;
|
||
left: auto !important;
|
||
right: auto !important;
|
||
bottom: auto !important;
|
||
transform: none !important;
|
||
width: min(100%, 540px) !important;
|
||
max-width: 100% !important;
|
||
margin-bottom: 20px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
.loop-circle-container {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
aspect-ratio: auto !important;
|
||
max-width: 100% !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
.loop-circle-container>svg {
|
||
display: none !important;
|
||
}
|
||
|
||
.loop-left h2 {
|
||
font-size: 3rem !important;
|
||
}
|
||
|
||
.loop-node-1:hover,
|
||
.loop-node-2:hover,
|
||
.loop-node-3:hover,
|
||
.loop-node-4:hover {
|
||
transform: translateY(-5px) !important;
|
||
}
|
||
|
||
/* Adjust the robot on mobile */
|
||
.robot-center {
|
||
position: relative !important;
|
||
top: auto !important;
|
||
left: auto !important;
|
||
transform: none !important;
|
||
width: min(72vw, 280px) !important;
|
||
margin: 0 auto 30px auto !important;
|
||
}
|
||
|
||
.robot-center img {
|
||
width: 100% !important;
|
||
max-width: 280px !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
}
|
||
|
||
|
||
@media (max-width: 768px) {
|
||
.the-loop-section {
|
||
padding: 40px 20px !important;
|
||
}
|
||
|
||
.loop-container {
|
||
padding: 36px 22px !important;
|
||
border-radius: 24px !important;
|
||
}
|
||
|
||
.loop-left h2 {
|
||
font-size: 2.5rem !important;
|
||
letter-spacing: 0 !important;
|
||
margin-bottom: 28px !important;
|
||
}
|
||
|
||
/* Hide mini flow on small screens if it gets too cramped */
|
||
.loop-left>div:nth-of-type(2) {
|
||
flex-wrap: wrap !important;
|
||
justify-content: center !important;
|
||
gap: 14px !important;
|
||
padding: 18px !important;
|
||
}
|
||
|
||
.loop-left>div:nth-of-type(2)>div {
|
||
flex: 1 1 calc(50% - 14px) !important;
|
||
min-width: 120px !important;
|
||
}
|
||
|
||
.loop-left>div:nth-of-type(2)>div:nth-child(even) {
|
||
display: none !important;
|
||
}
|
||
|
||
.loop-left>div:nth-of-type(3) {
|
||
text-align: left !important;
|
||
padding: 20px !important;
|
||
}
|
||
|
||
.loop-node {
|
||
width: 100% !important;
|
||
padding: 16px !important;
|
||
border-radius: 16px !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 425px) {
|
||
.the-loop-section {
|
||
padding: 30px 15px !important;
|
||
}
|
||
|
||
.loop-container {
|
||
padding: 30px 15px !important;
|
||
border-radius: 20px !important;
|
||
gap: 24px !important;
|
||
}
|
||
|
||
.loop-left h2 {
|
||
font-size: 1.8rem !important;
|
||
line-height: 1.15 !important;
|
||
margin-bottom: 24px !important;
|
||
}
|
||
|
||
.loop-node {
|
||
width: 100% !important;
|
||
box-sizing: border-box !important;
|
||
max-width: 100% !important;
|
||
padding: 15px !important;
|
||
gap: 12px !important;
|
||
}
|
||
|
||
.loop-left>div:nth-of-type(2) {
|
||
padding: 15px !important;
|
||
flex-wrap: wrap !important;
|
||
justify-content: center !important;
|
||
gap: 15px !important;
|
||
}
|
||
|
||
.loop-left>div:nth-of-type(2)>div {
|
||
flex: 1 1 40% !important;
|
||
min-width: 95px !important;
|
||
margin-bottom: 5px !important;
|
||
}
|
||
|
||
.loop-left>div:nth-of-type(2)>div:nth-child(even) {
|
||
display: none !important;
|
||
}
|
||
|
||
.loop-left>div:nth-of-type(3) {
|
||
flex-direction: column !important;
|
||
align-items: center !important;
|
||
text-align: center !important;
|
||
gap: 12px !important;
|
||
}
|
||
|
||
.robot-center {
|
||
width: min(78vw, 230px) !important;
|
||
margin-bottom: 24px !important;
|
||
}
|
||
|
||
.robot-center img {
|
||
width: 100% !important;
|
||
max-width: 230px !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
}
|
||
</style>
|
||
</section>
|
||
|
||
<!-- Driving Measurable Retail Impact Section -->
|
||
<section class="retail-impact-section elementor-top-section elementor-section-boxed"
|
||
style="background-color: #ffffff; padding: 50px 30px; position: relative; overflow: hidden;">
|
||
<div class="elementor-container">
|
||
<div class="impact-container"
|
||
style="width: 100%; border-radius: 30px; padding: 60px 40px; position: relative; background: #fffdf5; border: 2px solid rgba(255, 204, 0, 0.3); box-shadow: 0 15px 50px rgba(255, 204, 0, 0.1), inset 0 0 40px rgba(255, 204, 0, 0.05); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px;">
|
||
|
||
<!-- Left Content: Badge, Heading, Cards -->
|
||
<div class="impact-left"
|
||
style="flex: 1; min-width: 320px; max-width: 500px;">
|
||
<!-- Badge -->
|
||
<div
|
||
style="display: inline-flex; align-items: center; background: #ffcc00; padding: 8px 20px; border-radius: 30px; font-weight: 800; color: #111; margin-bottom: 25px; font-family: 'Sora', sans-serif; box-shadow: 0 5px 20px rgba(255, 204, 0, 0.4);">
|
||
<span
|
||
style="background-color: white; padding: 5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
|
||
<img src="assets/images/loyalyai-logo.png" alt="LoyalyAI Logo"
|
||
style="width: 20px; height: 20px;">
|
||
</span>
|
||
Impact
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<h2
|
||
style="font-size: 3.5rem; color: #111; font-family: 'Sora', sans-serif; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 40px; margin-top: 0; font-weight: 800;">
|
||
Driving Measurable<br>Retail <span style="color: #ffaa00;">Impact</span>
|
||
</h2>
|
||
|
||
<!-- Features List -->
|
||
<div style="display: flex; flex-direction: column; gap: 20px;">
|
||
<!-- Card 1 -->
|
||
<div class="impact-card"
|
||
style="background: #ffffff; border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 16px; padding: 20px; display: flex; align-items: flex-start; gap: 20px; box-shadow: 0 5px 15px rgba(255, 204, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-chart-line"></i>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
style="font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.1rem; color: #111; margin: 0 0 8px 0;">
|
||
Increase <span style="color: #ffaa00;">conversion</span> rates</h4>
|
||
<p
|
||
style="font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: #555; line-height: 1.5; margin: 0; font-weight: 500;">
|
||
Turn more visitors into paying customers with data-driven insights.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Card 2 -->
|
||
<div class="impact-card"
|
||
style="background: #ffffff; border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 16px; padding: 20px; display: flex; align-items: flex-start; gap: 20px; box-shadow: 0 5px 15px rgba(255, 204, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-users-cog"></i>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
style="font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.1rem; color: #111; margin: 0 0 8px 0;">
|
||
Boost <span style="color: #ffaa00;">repeat</span> customers</h4>
|
||
<p
|
||
style="font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: #555; line-height: 1.5; margin: 0; font-weight: 500;">
|
||
Build loyalty and keep customers coming back for more.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Card 3 -->
|
||
<div class="impact-card"
|
||
style="background: #ffffff; border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 16px; padding: 20px; display: flex; align-items: flex-start; gap: 20px; box-shadow: 0 5px 15px rgba(255, 204, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-tags"></i>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
style="font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.1rem; color: #111; margin: 0 0 8px 0;">
|
||
Optimize <span style="color: #ffaa00;">discount</span> spend</h4>
|
||
<p
|
||
style="font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: #555; line-height: 1.5; margin: 0; font-weight: 500;">
|
||
Run smarter promotions that maximize ROI without eroding margins.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Card 4 -->
|
||
<div class="impact-card"
|
||
style="background: #ffffff; border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 16px; padding: 20px; display: flex; align-items: flex-start; gap: 20px; box-shadow: 0 5px 15px rgba(255, 204, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;">
|
||
<div
|
||
style="background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.5rem; flex-shrink: 0; box-shadow: 0 5px 15px rgba(255,204,0,0.3);">
|
||
<i class="fas fa-stopwatch"></i>
|
||
</div>
|
||
<div>
|
||
<h4
|
||
style="font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.1rem; color: #111; margin: 0 0 8px 0;">
|
||
Unlock <span style="color: #ffaa00;">real-time</span> decision
|
||
making</h4>
|
||
<p
|
||
style="font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: #555; line-height: 1.5; margin: 0; font-weight: 500;">
|
||
Access instant insights to act fast and stay ahead of the
|
||
competition.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Content: Robot & Floating Badges -->
|
||
<div class="impact-right"
|
||
style="flex: 1; min-width: 350px; position: relative; display: flex; justify-content: center; align-items: center; min-height: 500px;">
|
||
|
||
<!-- Glowing Arrow Background Effect -->
|
||
<!-- <svg viewBox="0 0 400 400" style="position: absolute; width: 120%; height: 120%; top: -10%; left: -10%; z-index: 0; pointer-events: none;">
|
||
<defs>
|
||
<linearGradient id="glowArrow" x1="0%" y1="100%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#ffcc00" stop-opacity="0" />
|
||
<stop offset="50%" stop-color="#ffaa00" stop-opacity="0.5" />
|
||
<stop offset="100%" stop-color="#ffcc00" stop-opacity="1" />
|
||
</linearGradient>
|
||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||
<feGaussianBlur stdDeviation="8" result="blur" />
|
||
<feComposite in="SourceGraphic" in2="blur" operator="over" />
|
||
</filter>
|
||
</defs>
|
||
<path d="M 50 350 Q 200 300, 350 50" fill="none" stroke="url(#glowArrow)" stroke-width="12" stroke-linecap="round" filter="url(#glow)"/>
|
||
<path d="M 310 50 L 360 40 L 350 90" fill="none" stroke="#ffcc00" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/> -->
|
||
|
||
<!-- Decorative bars -->
|
||
<rect x="50" y="320" width="20" height="40" fill="#ffcc00" opacity="0.6" rx="2" />
|
||
<rect x="80" y="280" width="20" height="80" fill="#ffaa00" opacity="0.6" rx="2" />
|
||
<rect x="110" y="240" width="20" height="120" fill="#ffcc00" opacity="0.8" rx="2" />
|
||
</svg>
|
||
|
||
<!-- Circular podium base -->
|
||
<!-- <div
|
||
style="position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); width: 250px; height: 50px; background: radial-gradient(ellipse at center, rgba(255,204,0,0.3) 0%, rgba(255,204,0,0) 70%); border-radius: 50%; z-index: 0;">
|
||
</div>
|
||
<div
|
||
style="position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); width: 200px; height: 40px; background: linear-gradient(135deg, #ffe270 0%, #ffaa00 100%); border-radius: 50%; z-index: 1; box-shadow: 0 10px 20px rgba(255,204,0,0.4); border: 2px solid #fff;">
|
||
</div> -->
|
||
|
||
<!-- Robot -->
|
||
<img src="assets/images/Our products.png" alt="Loyaly Impact Robot"
|
||
style="width: 100%; position: relative; filter: drop-shadow(0 20px 30px rgba(255,204,0,0.3)); margin-bottom: 20px;">
|
||
|
||
<!-- Floating Badges -->
|
||
<!-- Badge 1: More Customers -->
|
||
<div class="impact-badge ib-1"
|
||
style="position: absolute; top: 5%; left: 5%; background: #ffffff; border: 2px solid #fff; border-radius: 50%; width: 90px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(255, 204, 0, 0.2), inset 0 0 15px rgba(255,204,0,0.1); transition: transform 0.3s ease;">
|
||
<div style="color: #ffaa00; font-size: 1.6rem; margin-bottom: 5px;"><i
|
||
class="fas fa-users"></i></div>
|
||
<div
|
||
style="font-family: 'Manrope', sans-serif; font-size: 0.65rem; font-weight: 800; color: #111; text-align: center; line-height: 1.2;">
|
||
More<br>Customers</div>
|
||
</div>
|
||
|
||
<!-- Badge 2: Higher Conversions -->
|
||
<div class="impact-badge ib-2"
|
||
style="position: absolute; top: 0%; right: 15%; background: #ffffff; border: 2px solid #fff; border-radius: 50%; width: 90px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(255, 204, 0, 0.2), inset 0 0 15px rgba(255,204,0,0.1); transition: transform 0.3s ease;">
|
||
<div style="color: #ffaa00; font-size: 1.6rem; margin-bottom: 5px;"><i
|
||
class="fas fa-chart-line"></i></div>
|
||
<div
|
||
style="font-family: 'Manrope', sans-serif; font-size: 0.65rem; font-weight: 800; color: #111; text-align: center; line-height: 1.2;">
|
||
Higher<br>Conversions</div>
|
||
</div>
|
||
|
||
<!-- Badge 3: Smarter Spending -->
|
||
<div class="impact-badge ib-3"
|
||
style="position: absolute; top: 40%; right: -5%; background: #ffffff; border: 2px solid #fff; border-radius: 50%; width: 90px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(255, 204, 0, 0.2), inset 0 0 15px rgba(255,204,0,0.1); transition: transform 0.3s ease;">
|
||
<div style="color: #ffaa00; font-size: 1.6rem; margin-bottom: 5px;"><i
|
||
class="fas fa-tags"></i></div>
|
||
<div
|
||
style="font-family: 'Manrope', sans-serif; font-size: 0.65rem; font-weight: 800; color: #111; text-align: center; line-height: 1.2;">
|
||
Smarter<br>Spending</div>
|
||
</div>
|
||
|
||
<!-- Badge 4: Faster Decisions -->
|
||
<div class="impact-badge ib-4"
|
||
style="position: absolute; bottom: 25%; right: 0%; background: #ffffff; border: 2px solid #fff; border-radius: 50%; width: 90px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(255, 204, 0, 0.2), inset 0 0 15px rgba(255,204,0,0.1); transition: transform 0.3s ease;">
|
||
<div style="color: #ffaa00; font-size: 1.6rem; margin-bottom: 5px;"><i
|
||
class="fas fa-stopwatch"></i></div>
|
||
<div
|
||
style="font-family: 'Manrope', sans-serif; font-size: 0.65rem; font-weight: 800; color: #111; text-align: center; line-height: 1.2;">
|
||
Faster<br>Decisions</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.impact-card:hover {
|
||
transform: translateX(10px);
|
||
border-color: #ffaa00 !important;
|
||
box-shadow: 0 10px 25px rgba(255, 204, 0, 0.15) !important;
|
||
}
|
||
|
||
.impact-badge {
|
||
animation: floatBadge 6s ease-in-out infinite;
|
||
}
|
||
|
||
.ib-1 {
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.ib-2 {
|
||
animation-delay: 1.5s;
|
||
}
|
||
|
||
.ib-3 {
|
||
animation-delay: 3s;
|
||
}
|
||
|
||
.ib-4 {
|
||
animation-delay: 4.5s;
|
||
}
|
||
|
||
@keyframes floatBadge {
|
||
0% {
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-10px);
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0px);
|
||
}
|
||
}
|
||
|
||
.impact-badge:hover {
|
||
transform: scale(1.1) !important;
|
||
animation-play-state: paused;
|
||
border-color: #ffcc00 !important;
|
||
box-shadow: 0 15px 30px rgba(255, 204, 0, 0.3) !important;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.impact-container {
|
||
flex-direction: column;
|
||
padding: 40px 20px !important;
|
||
}
|
||
|
||
.impact-right {
|
||
width: 100%;
|
||
margin-top: 40px;
|
||
min-height: 400px !important;
|
||
}
|
||
|
||
.impact-left {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.impact-left h2 {
|
||
font-size: 2.8rem !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.impact-left h2 {
|
||
font-size: 2.2rem !important;
|
||
}
|
||
|
||
.impact-badge {
|
||
width: 70px !important;
|
||
height: 70px !important;
|
||
}
|
||
|
||
.impact-badge i {
|
||
font-size: 1.2rem !important;
|
||
}
|
||
|
||
.impact-badge div {
|
||
font-size: 0.55rem !important;
|
||
}
|
||
|
||
.ib-1 {
|
||
top: 0%;
|
||
left: -5%;
|
||
}
|
||
|
||
.ib-2 {
|
||
top: -5%;
|
||
right: 5%;
|
||
}
|
||
|
||
.ib-3 {
|
||
top: 35%;
|
||
right: -10%;
|
||
}
|
||
|
||
.ib-4 {
|
||
bottom: 15%;
|
||
right: -5%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 425px) {
|
||
.retail-impact-section {
|
||
padding: 30px 15px !important;
|
||
}
|
||
|
||
.impact-container {
|
||
padding: 30px 15px !important;
|
||
gap: 20px !important;
|
||
}
|
||
|
||
.impact-left h2 {
|
||
font-size: 1.8rem !important;
|
||
margin-bottom: 25px !important;
|
||
}
|
||
|
||
.impact-card {
|
||
flex-direction: column !important;
|
||
text-align: center !important;
|
||
align-items: center !important;
|
||
padding: 15px !important;
|
||
gap: 10px !important;
|
||
}
|
||
|
||
.impact-right {
|
||
min-height: 280px !important;
|
||
margin-top: 20px !important;
|
||
min-width: 100% !important;
|
||
}
|
||
|
||
.impact-right img {
|
||
max-width: 75% !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
.impact-badge {
|
||
width: 60px !important;
|
||
height: 60px !important;
|
||
}
|
||
|
||
.impact-badge i {
|
||
font-size: 1rem !important;
|
||
margin-bottom: 2px !important;
|
||
}
|
||
|
||
.impact-badge div {
|
||
font-size: 0.5rem !important;
|
||
}
|
||
|
||
.ib-1 {
|
||
top: 0%;
|
||
left: 0%;
|
||
}
|
||
|
||
.ib-2 {
|
||
top: -5%;
|
||
right: 0%;
|
||
}
|
||
|
||
.ib-3 {
|
||
top: 40%;
|
||
right: -5%;
|
||
}
|
||
|
||
.ib-4 {
|
||
bottom: 10%;
|
||
right: 0%;
|
||
}
|
||
}
|
||
</style>
|
||
</section>
|
||
|
||
<!-- Meet the crew (ecosystem) -->
|
||
|
||
|
||
<!-- services -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<section
|
||
class="elementor-section elementor-top-section elementor-element elementor-element-b5ae2e3 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default"
|
||
data-id="b5ae2e3" data-element_type="section"
|
||
data-settings="{"stretch_section":"section-stretched"}">
|
||
<div class="elementor-container elementor-column-gap-no">
|
||
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8a3696e"
|
||
data-id="8a3696e" data-element_type="column">
|
||
<div class="elementor-widget-wrap elementor-element-populated">
|
||
<div class="elementor-element elementor-element-3e88642 elementor-absolute elementor-widget elementor-widget-image"
|
||
data-id="3e88642" data-element_type="widget"
|
||
data-settings="{"_position":"absolute"}"
|
||
data-widget_type="image.default">
|
||
<div class="elementor-widget-container">
|
||
<!-- <img decoding="async" width="1133" height="1376" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201133%201376'%3E%3C/svg%3E" class="attachment-full size-full wp-image-5170" alt="" data-lazy-src="assets/images/Group-18435.png"/> -->
|
||
<noscript>
|
||
<img loading="lazy" decoding="async" width="1133" height="1376"
|
||
src="assets/images/Group-18435.svg"
|
||
class="attachment-full size-full wp-image-5170" alt="" />
|
||
</noscript>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
<!-- features -->
|
||
|
||
|
||
|
||
|
||
|
||
<!-- About -->
|
||
|
||
|
||
|
||
|
||
|
||
<!-- testimonial -->
|
||
|
||
|
||
|
||
<!-- FAQ -->
|
||
|
||
|
||
|
||
|
||
<!-- Solutions -->
|
||
|
||
|
||
<!-- partners -->
|
||
|
||
|
||
<!-- Blog-->
|
||
|
||
<!-- Get in touch -->
|
||
<?php include 'components/get_in_touch.php'; ?>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/home-animations.js"></script>
|
||
|
||
|
||
<?php include 'includes/footer.php'; ?>
|