Files
loyaly/solutions_page.php
R-Bharathraj 49e3a4e836 first commit
2026-04-13 11:37:10 +05:30

758 lines
51 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<?php include 'includes/head.php'; ?>
<body style="background-color: #fffdf5;"
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 = 'Solutions';
include 'includes/header.php';
include 'includes/offcanvas.php';
?>
<!-- PAGE CONTENT HERE -->
<main>
<div class="page-title-container has-additional-text has-decoration">
<div class="page-title-bg"></div>
<div class="page-title-decoration-tl">
<div class="page-title-decoration-tl-inner"></div>
</div>
<div class="page-title-decoration-br">
<div class="page-title-decoration-br-inner"></div>
</div>
<div class="page-title-row">
<div class="page-title-wrapper">
<div class="page-title-box">
<h1 class="page-title">Solutions</h1>
<div class="elementor-element elementor-element-5e13830 elementor-widget elementor-widget-aiero_heading"
data-id="5e13830" data-element_type="widget"
data-widget_type="aiero_heading.default">
<div class="elementor-widget-container">
<div class="aiero-heading-widget">
<h1 style="text-align: center;" class="aiero-heading"><span
class="aiero-heading-content has_gradient_color_text"><del>Loyaly</del>
is future</span></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-title-additional">Loyaly</div>
<div class="breadcrumbs-wrapper">
<nav class="breadcrumbs">
<a href="../index.html">Home</a>
<span class='delimiter'></span>
<span class="current">Solutions</span>
</nav>
</div>
</div>
<div class="content">
<div class="content-inner">
<div data-elementor-type="wp-page" data-elementor-id="8591" class="elementor elementor-8591">
<!-- <section
class="elementor-section elementor-top-section elementor-element elementor-element-e1194d7 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default"
data-id="e1194d7" data-element_type="section"
data-settings="{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8517e7e"
data-id="8517e7e" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-5d841c7 elementor-absolute elementor-widget elementor-widget-image"
data-id="5d841c7" data-element_type="widget"
data-settings="{&quot;_position&quot;:&quot;absolute&quot;}"
data-widget_type="image.default">
<div class="elementor-widget-container">
<img fetchpriority="high" decoding="async" width="1860" height="1190"
src="/loyaly_php/assets/images/Group-18432-1.svg"
class="attachment-full size-full wp-image-5144" alt="" />
</div>
</div>
<div class="elementor-element elementor-element-5e13830 elementor-widget elementor-widget-aiero_heading"
data-id="5e13830" 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"><del>Loyaly</del>
is future</span></h1>
</div>
</div>
</div>
<div class="elementor-element elementor-element-71f5e7e elementor-widget elementor-widget-text-editor"
data-id="71f5e7e" data-element_type="widget"
data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>A unified AI suite that transforms every aspect of your retail
operations.</p>
</div>
</div>
<div class="elementor-element elementor-element-4e63876 aiero-button-border-style-solid aiero-button-bakground-style-gradient elementor-widget elementor-widget-aiero_button"
data-id="4e63876" data-element_type="widget"
data-widget_type="aiero_button.default">
<div class="elementor-widget-container">
<div class="button-widget" >
<div class="button-container" >
<a class="aiero-button" href="#" target="_blank" >Get Started
<span class="icon-button-arrow"></span><span
class="button-inner"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- need to change -->
<section class="pt-32 pb-24">
<div class="container_1 mx-auto px-4">
<div class="solutions-nav-bar">
<a href="#footfall" class="solutions-nav-btn">Footfall</a>
<a href="#journey" class="solutions-nav-btn">Journey</a>
<a href="#engagement" class="solutions-nav-btn">Engagement</a>
<a href="#loyalty" class="solutions-nav-btn">Loyalty</a>
<a href="#revenue" class="solutions-nav-btn">Revenue</a>
</div>
<div class="space-y-8">
<div id="footfall"
class="grid lg:grid-cols-2 gap-8 items-center p-8 rounded-3xl premium-feature-card">
<div>
<div
class="w-16 h-16 rounded-2xl bg-gradient-gold flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-message-square w-8 h-8 text-primary-foreground">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
</path>
</svg>
</div>
<h2 class="font-display text-3xl font-bold mb-4">Footfall Intelligence</h2>
<p class="text-lg text-muted-foreground mb-6">Track and analyze store traffic
with
AI-powered computer vision</p>
<div class="elementor-element elementor-element-21e8f2f elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="21e8f2f" data-element_type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Real-time visitor counting</span> Instantly track how many customers enter and exit your store.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Traffic pattern analysis</span> Understand when and where customers spend their time in your store.</span>
</li>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Peak hour identification</span> Identify the busiest times in your store to optimize staffing and inventory.</span>
</li>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Staff optimization</span> Allocate resources effectively based on traffic insights.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Zone-based heatmaps</span> Visualize customer movement and engagement within different areas of your store.</span>
</li>
</ul>
</div>
</div>
<!-- <div class="elementor-element elementor-element-9f54ccc aiero-button-border-style-gradient aiero-button-bakground-style-gradient elementor-widget elementor-widget-aiero_button" data-id="9f54ccc" data-element_type="widget" data-widget_type="aiero_button.default">
<div class="elementor-widget-container">
<div class="button-widget">
<div class="button-container">
<a class="aiero-button" href="../services-page/index.html" target="_blank">
Explore more <span class="icon-button-arrow"></span>
<span class="button-inner"></span>
</a>
</div>
</div>
</div>
</div> -->
</div>
<div class="relative">
<div
class="aspect-video rounded-2xl bg-gradient-to-br from-primary/20 via-card to-gold-deep/20 border border-border flex items-center justify-center">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up w-24 h-24 text-primary/30">
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline>
</svg> -->
<img width="auto" height="auto"
src="/loyaly_php/assets/images/Solution-1.png" alt="">
</div>
</div>
</div>
<div id="journey"
class="grid lg:grid-cols-2 gap-8 items-center p-8 rounded-3xl premium-feature-card" >
<div class="lg:order-2">
<div
class="w-16 h-16 rounded-2xl bg-gradient-gold flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-map w-8 h-8 text-primary-foreground">
<polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"></polygon>
<line x1="9" x2="9" y1="3" y2="18"></line>
<line x1="15" x2="15" y1="6" y2="21"></line>
</svg>
</div>
<h2 class="font-display text-3xl font-bold mb-4">Customer Journey</h2>
<p class="text-lg text-muted-foreground mb-6">Map the complete in-store customer
path from
entry to exit</p>
<div class="elementor-element elementor-element-21e8f2f elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="21e8f2f" data-element_type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Path visualization</span> - Track and visualize the complete customer movement inside your store.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Dwell time analysis</span> - Measure how long customers spend in specific areas or zones.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Conversion funnels</span> - Identify and analyze the steps customers take to complete a purchase.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Hot zone identification</span> - Discover the most popular and engaging areas of your store.</span>
</li>
</ul>
</div>
</div>
<!-- <div class="elementor-element elementor-element-9f54ccc aiero-button-border-style-gradient aiero-button-bakground-style-gradient elementor-widget elementor-widget-aiero_button" data-id="9f54ccc" data-element_type="widget" data-widget_type="aiero_button.default">
<div class="elementor-widget-container">
<div class="button-widget">
<div class="button-container">
<a class="aiero-button" href="../services-page/index.html" target="_blank">
Explore more <span class="icon-button-arrow"></span>
<span class="button-inner"></span>
</a>
</div>
</div>
</div>
</div> -->
</div>
<div class="relative lg:order-1">
<div
class="aspect-video rounded-2xl bg-gradient-to-br from-primary/20 via-card to-gold-deep/20 border border-border flex items-center justify-center">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column w-24 h-24 text-primary/30">
<path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path>
</svg> -->
<img width="auto" height="auto"
src="/loyaly_php/assets/images/Solution-2.png" alt="">
</div>
</div>
</div>
<div id="engagement"
class="grid lg:grid-cols-2 gap-8 items-center p-8 rounded-3xl premium-feature-card">
<div>
<div
class="w-16 h-16 rounded-2xl bg-gradient-gold flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-message-square w-8 h-8 text-primary-foreground">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
</path>
</svg>
</div>
<h2 class="font-display text-3xl font-bold mb-4">Customer Engagement</h2>
<p class="text-lg text-muted-foreground mb-6">
Deliver personalized interactions at the perfect moment
</p>
<div class="elementor-element elementor-element-21e8f2f elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="21e8f2f" data-element_type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Contextual messaging</span> - Deliver relevant messages based on customer behavior and in-store context.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Real-time notifications</span> - Send instant alerts and updates to engage customers at the right moment.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Personalized offers</span> - Provide tailored promotions to increase engagement and drive conversions.</span>
</li>
</ul>
</div>
</div>
<!-- <div class="elementor-element elementor-element-9f54ccc aiero-button-border-style-gradient aiero-button-bakground-style-gradient elementor-widget elementor-widget-aiero_button" data-id="9f54ccc" data-element_type="widget" data-widget_type="aiero_button.default">
<div class="elementor-widget-container">
<div class="button-widget">
<div class="button-container">
<a class="aiero-button" href="../services-page/index.html" target="_blank">
Explore more <span class="icon-button-arrow"></span>
<span class="button-inner"></span>
</a>
</div>
</div>
</div>
</div> -->
</div>
<div class="relative">
<div
class="aspect-video rounded-2xl bg-gradient-to-br from-primary/20 via-card to-gold-deep/20 border border-border flex items-center justify-center">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up w-24 h-24 text-primary/30">
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline>
</svg> -->
<img width="auto" height="auto"
src="/loyaly_php/assets/images/Solution-3.png" alt="">
</div>
</div>
</div>
<!-- <div id="footfall"
class="grid lg:grid-cols-2 gap-8 items-center p-8 rounded-3xl premium-feature-card">
<div
class="w-16 h-16 rounded-2xl bg-gradient-gold flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-footprints w-8 h-8 text-primary-foreground">
<path d="M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z"></path>
<path d="M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z"></path>
<path d="M16 17h4"></path>
<path d="M4 13h4"></path>
</svg>
</div>
<h2 class="font-display text-3xl font-bold mb-4">Footfall Intelligence</h2>
<p class="text-lg text-muted-foreground mb-6">Track and analyze store traffic
with
AI-powered computer vision</p>
<div class="elementor-element elementor-element-21e8f2f elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="21e8f2f" data-element_type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text">Real-time visitor counting</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text">Traffic pattern analysis</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text">Peak hour identification</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text">Staff optimization </span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text">Zone-based heatmaps </span>
</li>
</ul>
</div>
</div> -->
<!-- <div class="elementor-element elementor-element-f51e8ba aiero-button-border-style-gradient aiero-button-bakground-style-gradient elementor-widget elementor-widget-aiero_button" data-id="f51e8ba" data-element_type="widget" data-widget_type="aiero_button.default">
<div class="elementor-widget-container">
<div class="button-widget">
<div class="button-container">
<a class="aiero-button" href="../services-page/index.html" target="_blank">Explore more </a>
</div>
</div>
</div>
</div>
<div class="relative">
<div
class="aspect-video rounded-2xl bg-gradient-to-br from-primary/20 via-card to-gold-deep/20 border border-border flex items-center justify-center">
<img width="auto" height="auto"
src="/loyaly_php/assets/images/Solution-1.png" alt="">
</div>
</div>
</div> -->
<div id="loyalty"
class="grid lg:grid-cols-2 gap-8 items-center p-8 rounded-3xl premium-feature-card lg:flex-row-reverse">
<div class="lg:order-2">
<div
class="w-16 h-16 rounded-2xl bg-gradient-gold flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-crown w-8 h-8 text-primary-foreground">
<path
d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z">
</path>
<path d="M5 21h14"></path>
</svg>
</div>
<h2 class="font-display text-3xl font-bold mb-4">Loyalty Management</h2>
<p class="text-lg text-muted-foreground mb-6">
Build emotional loyalty without plastic cards
</p>
<div class="elementor-element elementor-element-21e8f2f elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="21e8f2f" data-element_type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">App-less loyalty</span> - Enable seamless loyalty experiences without requiring customers to install an app.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Automatic recognition</span> - Identify and acknowledge loyal customers in real-time.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Tier management</span> - Create and manage different loyalty tiers with unique benefits.</span>
</li>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Reward automation</span> - Streamline the distribution of rewards based on customer actions.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">VIP experiences</span> - Provide exclusive opportunities and personalized service to top-tier customers.</span>
</li>
</ul>
</div>
</div>
<!-- <div class="elementor-element elementor-element-9f54ccc aiero-button-border-style-gradient aiero-button-bakground-style-gradient elementor-widget elementor-widget-aiero_button" data-id="9f54ccc" data-element_type="widget" data-widget_type="aiero_button.default">
<div class="elementor-widget-container">
<div class="button-widget">
<div class="button-container">
<a class="aiero-button" href="../services-page/index.html" target="_blank">
Explore more <span class="icon-button-arrow"></span>
<span class="button-inner"></span>
</a>
</div>
</div>
</div>
</div> -->
</div>
<div class="relative lg:order-1">
<div
class="aspect-video rounded-2xl bg-gradient-to-br from-primary/20 via-card to-gold-deep/20 border border-border flex items-center justify-center">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-crown w-24 h-24 text-primary/30">
<path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"></path>
<path d="M5 21h14"></path>
</svg> -->
<img width="auto" height="auto" src="/loyaly_php/assets/images/Solution-4.png"
alt="">
</div>
</div>
</div>
<div id="revenue"
class="grid lg:grid-cols-2 gap-8 items-center p-8 rounded-3xl premium-feature-card">
<div>
<div
class="w-16 h-16 rounded-2xl bg-gradient-gold flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-trending-up w-8 h-8 text-primary-foreground">
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline>
</svg>
</div>
<h2 class="font-display text-3xl font-bold mb-4">Revenue Optimization</h2>
<p class="text-lg text-muted-foreground mb-6">
Maximize every transaction with smart pricing
</p>
<div class="elementor-element elementor-element-21e8f2f elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="21e8f2f" data-element_type="widget" data-widget_type="icon-list.default">
<div class="elementor-widget-container">
<ul class="elementor-icon-list-items">
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Dynamic pricing</span> - Adjust prices in real-time based on demand, competition, and other market factors.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Smart discounts</span> - Offer personalized discount opportunities based on customer behavior and preferences.</span>
</li>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Basket optimization</span> - Maximize the value of each customer purchase through intelligent product recommendations.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Upsell triggers</span> - Identify and present relevant cross-selling opportunities at the point of sale.</span>
</li>
<li class="elementor-icon-list-item">
<span class="elementor-icon-list-icon">
<i aria-hidden="true" class="fontello icon-accordion-arrow-right"></i> </span>
<span class="elementor-icon-list-text"><span style="font-weight: 700;">Margin protection</span> - Implement strategies to safeguard profit margins while offering competitive pricing.</span>
</li>
</ul>
</div>
</div>
<!-- <div class="elementor-element elementor-element-9f54ccc aiero-button-border-style-gradient aiero-button-bakground-style-gradient elementor-widget elementor-widget-aiero_button" data-id="9f54ccc" data-element_type="widget" data-widget_type="aiero_button.default">
<div class="elementor-widget-container">
<div class="button-widget">
<div class="button-container">
<a class="aiero-button" href="../services-page/index.html" target="_blank">
Explore more <span class="icon-button-arrow"></span>
<span class="button-inner"></span>
</a>
</div>
</div>
</div>
</div> -->
</div>
<div class="relative">
<div
class="aspect-video rounded-2xl bg-gradient-to-br from-primary/20 via-card to-gold-deep/20 border border-border flex items-center justify-center">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up w-24 h-24 text-primary/30">
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline>
</svg> -->
<img width="auto" height="auto" src="/loyaly_php/assets/images/Solution-5.png"
alt="">
</div>
</div>
</div>
</div>
</section>
<?php include 'components/get_in_touch.php'; ?>
<!-- </div>
</div> -->
</main>
<style>
.page-title-container .page-title-bg {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.page-title-container .page-title-bg {
background-image: url("/loyaly_php/assets/images/page-title-bg-min.jpg");
}
/* Premium Feature Card Styles */
.premium-feature-card {
background: linear-gradient(145deg, #ffffff, #fafafa);
border: 1px solid rgba(245, 166, 35, 0.2);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03), inset 0 0 0 1px rgba(245, 166, 35, 0.05);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
z-index: 3;
}
.premium-feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(245, 166, 35, 0.08), inset 0 0 0 1px rgba(245, 166, 35, 0.2);
border-color: rgba(245, 166, 35, 0.3);
}
/* Glowing Orb Effect */
.premium-feature-card::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245, 166, 35, 0.12) 0%, transparent 60%);
opacity: 0.5;
z-index: 0;
transition: all 0.6s ease;
pointer-events: none;
}
.premium-feature-card:hover::before {
transform: scale(1.3);
opacity: 1;
}
/* Keep content above the orb */
.premium-feature-card>* {
position: relative;
z-index: 1;
}
/* Elevate the image wrapper on hover */
.premium-feature-card .aspect-video {
transition: all 0.5s ease;
}
.premium-feature-card:hover .aspect-video {
transform: scale(1.03);
box-shadow: 0 20px 40px rgba(245, 166, 35, 0.15);
border-color: rgba(245, 166, 35, 0.3);
}
/* Solutions Custom Navigation */
.solutions-nav-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 4rem;
margin-left: auto;
margin-right: auto;
width: fit-content;
position: sticky;
top: 7rem;
z-index: 3;
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 0.75rem 1.5rem;
border-radius: 9999px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.solutions-nav-btn {
padding: 0.6rem 1.8rem;
background: linear-gradient(to right, #cc9a1f, #a17409);
color: #ffffff;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border-radius: 9999px;
border: none;
box-shadow: 0 8px 20px rgba(204, 154, 31, 0.3);
transition: all 0.3s ease;
}
.solutions-nav-btn:hover {
background: linear-gradient(to right, #b88a1a, #8f6506);
color: #ffffff;
box-shadow: 0 12px 25px rgba(204, 154, 31, 0.4);
transform: translateY(-2px);
}
html {
scroll-behavior: smooth;
scroll-padding-top: 140px;
}
</style>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
function getstart() {
window.location.href = "/loyaly_php/contacts.php";
}
// GSAP Scroll Animations
document.addEventListener("DOMContentLoaded", (event) => {
if (typeof gsap !== "undefined") {
gsap.registerPlugin(ScrollTrigger);
const cards = document.querySelectorAll('.premium-feature-card');
cards.forEach((card) => {
// Select text content elements to animate
const textElements = card.querySelectorAll("h2, p.text-muted-foreground, li, .gap-4");
// Initial hidden state
gsap.set(textElements, { y: 30, opacity: 0 });
// Create animation that triggers on scroll
gsap.to(textElements, {
scrollTrigger: {
trigger: card,
start: "top 85%",
toggleActions: "play none none reverse"
},
y: 0,
opacity: 1,
duration: 0.8,
stagger: 0.15,
ease: "power3.out"
});
});
}
});
</script>
<?php include 'includes/footer.php'; ?>
</body>
</html>