pingaxai-com / index.html
vipra's picture
Add 2 files
d83e174 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pingax AI | Enterprise AI/ML Services & Solutions</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #4361EE;
--primary-dark: #3A0CA3;
--secondary: #3A86FF;
--accent: #7209B7;
--dark: #14213D;
--light: #F8F9FA;
--gray: #6C757D;
--success: #4CC9F0;
--danger: #F72585;
--warning: #FF9F1C;
--gradient: linear-gradient(135deg, #4361EE 0%, #3A0CA3 50%, #7209B7 100%);
--gradient-accent: linear-gradient(135deg, #4361EE 0%, #7209B7 100%);
--shadow: 0 4px 30px rgba(67, 97, 238, 0.15);
--shadow-hover: 0 10px 40px rgba(67, 97, 238, 0.25);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--dark);
line-height: 1.6;
background-color: var(--light);
}
h1, h2, h3, h4 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header Styles */
header {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
z-index: 1000;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
display: flex;
align-items: center;
font-family: 'Space Grotesk', sans-serif;
font-weight: 800;
font-size: 26px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.logo i {
margin-right: 10px;
color: var(--primary);
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
text-decoration: none;
color: var(--dark);
font-weight: 500;
transition: all 0.3s;
position: relative;
}
.nav-links a:after {
content: '';
position: absolute;
width: 0;
height: 3px;
background: var(--gradient-accent);
bottom: -5px;
left: 0;
transition: width 0.3s;
border-radius: 3px;
}
.nav-links a:hover:after {
width: 100%;
}
.nav-links a:hover {
color: var(--primary);
}
.menu-toggle {
display: none;
cursor: pointer;
font-size: 24px;
color: var(--primary);
}
/* Hero Section */
.hero {
padding: 180px 0 100px;
background: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
position: relative;
color: white;
text-align: center;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20, 33, 61, 0.8);
background: linear-gradient(135deg, rgba(58, 12, 163, 0.9) 0%, rgba(67, 97, 238, 0.8) 100%);
}
.hero-content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.hero h1 {
font-size: 56px;
margin-bottom: 20px;
line-height: 1.2;
}
.hero p {
font-size: 20px;
margin-bottom: 30px;
opacity: 0.9;
}
.btn {
display: inline-block;
padding: 14px 32px;
background: var(--gradient);
color: white;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
border: none;
cursor: pointer;
font-size: 16px;
box-shadow: var(--shadow);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.btn-outline {
background: transparent;
border: 2px solid white;
margin-left: 15px;
}
.btn-outline:hover {
background: white;
color: var(--primary);
box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}
/* Features Section */
.section {
padding: 100px 0;
}
.section-title {
text-align: center;
margin-bottom: 60px;
}
.section-title h2 {
font-size: 42px;
margin-bottom: 15px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-title p {
max-width: 700px;
margin: 0 auto;
color: var(--gray);
font-size: 18px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s;
border: 1px solid rgba(67, 97, 238, 0.1);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
border-color: rgba(67, 97, 238, 0.2);
}
.feature-icon {
width: 70px;
height: 70px;
background: var(--gradient);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
color: white;
font-size: 28px;
}
.feature-card h3 {
font-size: 22px;
margin-bottom: 15px;
color: var(--dark);
}
.feature-card p {
color: var(--gray);
}
/* Cloud Platforms */
.cloud-platforms {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin: 50px 0;
}
.platform {
display: flex;
align-items: center;
gap: 10px;
background: white;
padding: 12px 25px;
border-radius: 8px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s;
}
.platform:hover {
transform: translateY(-5px);
}
.platform i {
font-size: 24px;
}
.platform.aws i {
color: #FF9900;
}
.platform.azure i {
color: #0089D6;
}
.platform.gcp i {
color: #4285F4;
}
/* How It Works */
.works-section {
background: linear-gradient(to bottom, #f9fafb 0%, white 100%);
}
.steps {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
padding-top: 50px;
}
.step {
flex: 1;
min-width: 250px;
max-width: 300px;
padding: 0 20px 40px;
position: relative;
}
.step-number {
width: 60px;
height: 60px;
background: var(--gradient);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 0 auto 20px;
position: relative;
z-index: 2;
font-size: 24px;
font-family: 'Space Grotesk', sans-serif;
}
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 30px;
height: 3px;
width: calc(100% - 100px);
background: linear-gradient(to right, var(--primary), var(--accent));
left: calc(50% + 30px);
opacity: 0.3;
}
.step-content {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
height: 100%;
border: 1px solid rgba(67, 97, 238, 0.1);
}
.step-content h3 {
margin-bottom: 15px;
color: var(--dark);
}
/* Stats Section */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
text-align: center;
}
.stat-item {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.stat-item h3 {
font-size: 56px;
font-family: 'Space Grotesk', sans-serif;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
}
/* Demo Section */
.demo-section {
background-color: #f1f4f8;
padding: 80px 0;
}
.demo-container {
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
}
.demo-tab-container {
display: flex;
gap: 15px;
margin-bottom: 30px;
justify-content: center;
flex-wrap: wrap;
}
.demo-tab {
min-width: 250px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.3s;
border: 2px solid transparent;
text-align: center;
cursor: pointer;
}
.demo-tab:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.1);
}
.demo-tab.active {
border-color: var(--primary);
background: rgba(67, 97, 238, 0.05);
}
.demo-tab h3 {
font-size: 18px;
margin-bottom: 10px;
color: var(--dark);
}
.demo-tab p {
font-size: 14px;
color: var(--gray);
}
.demo-content {
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.demo-frame {
width: 100%;
height: 600px;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
}
/* Testimonials */
.testimonials {
background: linear-gradient(to bottom, white 0%, #f9fafb 100%);
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.testimonial-card {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(67, 97, 238, 0.1);
}
.testimonial-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
}
.testimonial-name h4 {
font-size: 18px;
margin-bottom: 5px;
}
.testimonial-name p {
color: var(--gray);
font-size: 14px;
}
.testimonial-content {
color: var(--gray);
font-style: italic;
line-height: 1.7;
}
.testimonial-rating {
color: #FFC107;
margin-top: 15px;
font-size: 16px;
}
/* CTA Section */
.cta {
background: var(--gradient);
color: white;
text-align: center;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
top: -100px;
right: -100px;
border-radius: 50%;
}
.cta::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);
bottom: -300px;
left: -300px;
border-radius: 50%;
}
.cta-content {
position: relative;
z-index: 1;
}
.cta h2 {
font-size: 42px;
margin-bottom: 20px;
}
.cta p {
max-width: 600px;
margin: 0 auto 30px;
opacity: 0.9;
font-size: 18px;
}
.cta .btn-outline {
background: transparent;
border: 2px solid white;
color: white;
}
.cta .btn-outline:hover {
background: white;
color: var(--primary);
}
/* Contact Section */
.contact-section {
padding: 80px 0;
background: #f9fafb;
}
.contact-container {
display: flex;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 30px rgba(0,0,0,0.05);
}
.contact-info {
flex: 1;
padding: 40px;
background: var(--dark);
color: white;
}
.contact-info h3 {
font-size: 28px;
margin-bottom: 20px;
color: white;
}
.contact-info p {
opacity: 0.8;
margin-bottom: 30px;
}
.contact-details {
margin-top: 40px;
}
.contact-detail {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.contact-detail i {
font-size: 20px;
margin-right: 15px;
color: var(--secondary);
}
.contact-form {
flex: 1;
padding: 40px;
}
.contact-form h3 {
font-size: 28px;
margin-bottom: 20px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Footer */
footer {
background: var(--dark);
color: white;
padding: 100px 0 30px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.footer-column h3 {
margin-bottom: 25px;
font-size: 20px;
position: relative;
display: inline-block;
}
.footer-column h3::after {
content: '';
position: absolute;
width: 40px;
height: 3px;
background: var(--gradient-accent);
bottom: -10px;
left: 0;
border-radius: 3px;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #CBD5E0;
text-decoration: none;
transition: all 0.3s;
}
.footer-links a:hover {
color: white;
padding-left: 5px;
}
.social-links {
display: flex;
margin-top: 20px;
}
.social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
color: white;
transition: all 0.3s;
}
.social-links a:hover {
background: var(--gradient-accent);
transform: translateY(-3px);
}
.footer-bottom {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 14px;
color: #CBD5E0;
}
/* Responsive */
@media (max-width: 1200px) {
.hero h1 {
font-size: 48px;
}
}
@media (max-width: 992px) {
.hero h1 {
font-size: 42px;
}
.section-title h2 {
font-size: 36px;
}
.step {
max-width: 250px;
}
.feature-card, .testimonial-card {
padding: 30px;
}
.contact-container {
flex-direction: column;
}
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-links {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: white;
flex-direction: column;
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
transform: translateY(-150%);
transition: all 0.3s;
border-radius: 0 0 12px 12px;
}
.nav-links.active {
transform: translateY(0);
}
.nav-links li {
margin: 15px 0;
}
.hero {
padding: 150px 0 80px;
}
.hero h1 {
font-size: 36px;
}
.hero p {
font-size: 18px;
}
.hero-buttons {
display: flex;
flex-direction: column;
align-items: center;
}
.btn-outline {
margin-left: 0;
margin-top: 15px;
}
.step {
max-width: 100%;
margin-bottom: 30px;
}
.step:not(:last-child)::after {
display: none;
}
.cta h2 {
font-size: 32px;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 32px;
}
.section {
padding: 80px 0;
}
.demo-tab-container {
flex-direction: column;
}
.demo-tab {
min-width: 100%;
}
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
opacity: 0;
animation: fadeIn 0.8s ease forwards;
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
</style>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">
<i class="fas fa-atom"></i>
<span>Pingax AI</span>
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="nav-links">
<li><a href="#services">Solutions</a></li>
<li><a href="#use-cases">Demos</a></li>
<li><a href="#mlops">MLOps</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<div class="hero-content">
<h1 class="fade-in">AI-Powered Ecommerce Solutions</h1>
<p class="fade-in delay-1">Transform your online business with our cutting-edge AI solutions for personalization, search, chat, and analytics.</p>
<div class="hero-buttons">
<a href="#use-cases" class="btn fade-in delay-2">View Demos</a>
<a href="#contact" class="btn btn-outline fade-in delay-3">Book Consultation</a>
</div>
</div>
</div>
</section>
<section id="services" class="section">
<div class="container">
<div class="section-title">
<h2>Ecommerce AI Solutions</h2>
<p>Specialized AI solutions designed to boost your ecommerce performance across key metrics</p>
</div>
<div class="features-grid">
<div class="feature-card fade-in">
<div class="feature-icon">
<i class="fas fa-search-dollar"></i>
</div>
<h3>Product Recommendations</h3>
<p>Personalized, real-time product recommendations that increase AOV and conversion rates using collaborative filtering and deep learning.</p>
</div>
<div class="feature-card fade-in delay-1">
<div class="feature-icon">
<i class="fas fa-images"></i>
</div>
<h3>Multimodal Search</h3>
<p>Visual search that connects text, images and voice to help customers find exactly what they're looking for.</p>
</div>
<div class="feature-card fade-in delay-2">
<div class="feature-icon">
<i class="fas fa-robot"></i>
</div>
<h3>AI Shopping Assistant</h3>
<p>Conversational AI that helps customers discover products, check inventory and answer questions 24/7.</p>
</div>
<div class="feature-card fade-in delay-3">
<div class="feature-icon">
<i class="fas fa-users"></i>
</div>
<h3>Customer Segmentation</h3>
<p>Advanced clustering to identify high-value segments and personalize marketing strategies accordingly.</p>
</div>
<div class="feature-card fade-in delay-1">
<div class="feature-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3>LTV Prediction</h3>
<p>Predict customer lifetime value to optimize acquisition costs and retention strategies.</p>
</div>
<div class="feature-card fade-in delay-2">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Fraud Detection</h3>
<p>Real-time fraud scoring that reduces false positives while catching more fraudulent transactions.</p>
</div>
<div class="feature-card fade-in delay-3">
<div class="feature-icon">
<i class="fas fa-box"></i>
</div>
<h3>Demand Forecasting</h3>
<p>Accurate demand predictions to optimize inventory and reduce stockouts or overstocking.</p>
</div>
<div class="feature-card fade-in delay-1">
<div class="feature-icon">
<i class="fas fa-random"></i>
</div>
<h3>Cross-Sell/Upsell</h3>
<p>Contextual recommendations for complementary products that maximize basket size.</p>
</div>
</div>
<div class="section-title" style="margin-top: 80px;">
<h2>Cloud Platform Expertise</h2>
<p>We deploy and manage AI solutions across all major cloud providers</p>
</div>
<div class="cloud-platforms fade-in">
<div class="platform aws">
<i class="fab fa-aws"></i>
<span>AWS AI/ML Services</span>
</div>
<div class="platform azure">
<i class="fab fa-microsoft"></i>
<span>Azure Machine Learning</span>
</div>
<div class="platform gcp">
<i class="fab fa-google"></i>
<span>Google Vertex AI</span>
</div>
</div>
</div>
</section>
<section id="use-cases" class="demo-section">
<div class="container">
<div class="section-title">
<h2>Interactive AI Demos</h2>
<p>Explore our working AI implementations for ecommerce applications</p>
</div>
<div class="demo-container">
<div class="demo-tab-container">
<div class="demo-tab active" onclick="showDemo('similar')">
<h3>Similar Products</h3>
<p>Personalized recommendations engine using deep learning</p>
</div>
<div class="demo-tab" onclick="showDemo('multimodal')">
<h3>Multimodal Search</h3>
<p>Search across text, images and voice with unified results</p>
</div>
<div class="demo-tab" onclick="showDemo('chat')">
<h3>AI Shopping Assistant</h3>
<p>Conversational AI for product discovery and support</p>
</div>
</div>
<div class="demo-content">
<iframe id="similarDemo" class="demo-frame" src="https://huggingface.co/spaces/recsys/fashion-product-recommendation" frameborder="0"></iframe>
<iframe id="multimodalDemo" class="demo-frame" src="https://huggingface.co/spaces/multimodal-search/product-visual-search" style="display:none;" frameborder="0"></iframe>
<iframe id="chatDemo" class="demo-frame" src="https://huggingface.co/spaces/conversational-ai/shopping-assistant" style="display:none;" frameborder="0"></iframe>
</div>
<div class="demo-tab-container" style="margin-top: 30px;">
<div class="demo-tab" onclick="showDemo('segmentation')">
<h3>Customer Segmentation</h3>
<p>Identify high-value customer segments automatically</p>
</div>
<div class="demo-tab" onclick="showDemo('ltv')">
<h3>LTV Prediction</h3>
<p>Forecast customer lifetime value with machine learning</p>
</div>
<div class="demo-tab" onclick="showDemo('fraud')">
<h3>Fraud Detection</h3>
<p>Real-time scoring to identify suspicious transactions</p>
</div>
<div class="demo-tab" onclick="showDemo('forecasting')">
<h3>Demand Forecasting</h3>
<p>Predict product demand with time-series analysis</p>
</div>
</div>
</div>
</div>
</section>
<section id="mlops" class="section works-section">
<div class="container">
<div class="section-title">
<h2>MLOps & AIOps Framework</h2>
<p>Our proven methodology for deploying and managing AI at scale</p>
</div>
<div class="steps">
<div class="step fade-in">
<div class="step-number">1</div>
<div class="step-content">
<h3>Model Development</h3>
<p>Custom AI model development with proper version control, experiment tracking, and reproducibility using MLflow/DVC.</p>
</div>
</div>
<div class="step fade-in delay-1">
<div class="step-number">2</div>
<div class="step-content">
<h3>CI/CD Pipelines</h3>
<p>Automated testing, containerization, and deployment pipelines with GitHub Actions, Jenkins, or cloud-native tools.</p>
</div>
</div>
<div class="step fade-in delay-2">
<div class="step-number">3</div>
<div class="step-content">
<h3>Monitoring & Governance</h3>
<p>Performance monitoring, data drift detection, model explainability, and compliance tracking in production.</p>
</div>
</div>
<div class="step fade-in delay-3">
<div class="step-number">4</div>
<div class="step-content">
<h3>Auto-Retraining</h3>
<p>Scheduled and trigger-based model retraining with automated A/B testing and canary deployments.</p>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="stats">
<div class="stat-item fade-in">
<h3>42%</h3>
<p>Average conversion rate increase from recommendations</p>
</div>
<div class="stat-item fade-in delay-1">
<h3>35%</h3>
<p>Reduction in support costs with AI shopping assistants</p>
</div>
<div class="stat-item fade-in delay-2">
<h3>60%</h3>
<p>Fewer false positives in fraud detection</p>
</div>
<div class="stat-item fade-in delay-3">
<h3>3x</h3>
<p>ROI on AI investments within 6 months</p>
</div>
</div>
</div>
</section>
<section id="testimonials" class="section testimonials">
<div class="container">
<div class="section-title">
<h2>Client Success Stories</h2>
<p>Business leaders share their experiences with Pingax AI solutions</p>
</div>
<div class="testimonial-grid">
<div class="testimonial-card fade-in">
<div class="testimonial-header">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Amanda Chen" class="testimonial-avatar">
<div class="testimonial-name">
<h4>Amanda Chen</h4>
<p>CTO, StyleHub</p>
</div>
</div>
<div class="testimonial-content">
"Pingax's recommendation engine increased our conversion rate by 42% while reducing our infrastructure costs through their optimized MLOps approach on AWS. Their team seamlessly integrated with our ecommerce platform."
</div>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="testimonial-card fade-in delay-1">
<div class="testimonial-header">
<img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Raj Patel" class="testimonial-avatar">
<div class="testimonial-name">
<h4>Raj Patel</h4>
<p>Head of AI, Global Retail Corp</p>
</div>
</div>
<div class="testimonial-content">
"Their multimodal search implementation reduced our product search abandonment by 35%. Customers can now find products using images from social media or vague descriptions."
</div>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="testimonial-card fade-in delay-2">
<div class="testimonial-header">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sophia Williams" class="testimonial-avatar">
<div class="testimonial-name">
<h4>Sophia Williams</h4>
<p>CEO, LuxeHome</p>
</div>
</div>
<div class="testimonial-content">
"The AI shopping assistant Pingax developed reduced our customer service costs by 60% while improving satisfaction scores. Their expertise in conversational AI was evident throughout the project."
</div>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<div class="cta-content">
<h2 class="fade-in">Ready to Transform Your Ecommerce Business?</h2>
<p class="fade-in delay-1">Our team of AI specialists will help you implement proven solutions to increase conversions, AOV and customer loyalty.</p>
<a href="#use-cases" class="btn fade-in delay-2">View All Demos</a>
<a href="#contact" class="btn btn-outline fade-in delay-3">Schedule Consultation</a>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="container">
<div class="section-title">
<h2>Get Started with Pingax AI</h2>
<p>Book a discovery call to discuss how we can help implement AI solutions for your business</p>
</div>
<div class="contact-container">
<div class="contact-info">
<h3>AI Strategy Session</h3>
<p>During this 30-minute consultation, we'll:</p>
<ul style="list-style-type: none; margin-left: 0;">
<li style="margin-bottom: 15px; position: relative; padding-left: 25px;">
<i class="fas fa-check-circle" style="position: absolute; left: 0; color: var(--success);"></i>
Assess your current ecommerce metrics
</li>
<li style="margin-bottom: 15px; position: relative; padding-left: 25px;">
<i class="fas fa-check-circle" style="position: absolute; left: 0; color: var(--success);"></i>
Identify high-impact AI opportunities
</li>
<li style="margin-bottom: 15px; position: relative; padding-left: 25px;">
<i class="fas fa-check-circle" style="position: absolute; left: 0; color: var(--success);"></i>
Outline project scope & timeline
</li>
<li style="margin-bottom: 15px; position: relative; padding-left: 25px;">
<i class="fas fa-check-circle" style="position: absolute; left: 0; color: var(--success);"></i>
Provide estimated ROI projection
</li>
</ul>
<div class="contact-details">
<div class="contact-detail">
<i class="fas fa-map-marker-alt"></i>
<span>San Francisco, CA</span>
</div>
<div class="contact-detail">
<i class="fas fa-envelope"></i>
<span>hello@pingax.ai</span>
</div>
<div class="contact-detail">
<i class="fas fa-phone"></i>
<span>(555) 123-4567</span>
</div>
</div>
</div>
<div class="contact-form">
<h3>Schedule Your Consultation</h3>
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/vignesh2066/ai-strategy-get-your-poc-demo-pingax" style="min-width:320px;height:700px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>Pingax AI</h3>
<p>Enterprise AI services and MLOps solutions to power your ecommerce transformation across cloud platforms.</p>
<div class="social-links">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Solutions</h3>
<ul class="footer-links">
<li><a href="#">Product Recommendations</a></li>
<li><a href="#">Multimodal Search</a></li>
<li><a href="#">AI Shopping Assistants</a></li>
<li><a href="#">Customer Segmentation</a></li>
<li><a href="#">LTV Prediction</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Platforms</h3>
<ul class="footer-links">
<li><a href="#">AWS Machine Learning</a></li>
<li><a href="#">Azure AI Services</a></li>
<li><a href="#">Google Vertex AI</a></li>
<li><a href="#">Hugging Face</a></li>
<li><a href="#">OpenAI Integration</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Company</h3>
<ul class="footer-links">
<li><a href="#">About Us</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2023 Pingax AI Technologies. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
</div>
</div>
</footer>
<script>
// Mobile Menu Toggle
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
menuToggle.innerHTML = navLinks.classList.contains('active') ?
'<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
});
// Close menu when clicking on links
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Demo tabs functionality
function showDemo(demoId) {
// Hide all demo frames
document.querySelectorAll('.demo-frame').forEach(frame => {
frame.style.display = 'none';
});
// Remove active class from all tabs
document.querySelectorAll('.demo-tab').forEach(tab => {
tab.classList.remove('active');
});
// Show selected demo and mark tab as active
document.getElementById(demoId + 'Demo').style.display = 'block';
event.currentTarget.classList.add('active');
// For second row of tabs that don't have iframes
if(demoId === 'segmentation') {
document.getElementById('similarDemo').style.display = 'block';
document.getElementById('similarDemo').src = "https://huggingface.co/spaces/clustering/customer-segmentation";
} else if(demoId === 'ltv') {
document.getElementById('similarDemo').style.display = 'block';
document.getElementById('similarDemo').src = "https://huggingface.co/spaces/prediction/customer-ltv";
} else if(demoId === 'fraud') {
document.getElementById('similarDemo').style.display = 'block';
document.getElementById('similarDemo').src = "https://huggingface.co/spaces/fraud/fraud-detection";
} else if(demoId === 'forecasting') {
document.getElementById('similarDemo').style.display = 'block';
document.getElementById('similarDemo').src = "https://huggingface.co/spaces/forecasting/demand-prediction";
}
}
// Animation on scroll
function checkScroll() {
const elements = document.querySelectorAll('.fade-in');
elements.forEach(element => {
const elementPosition = element.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.2;
if (elementPosition < screenPosition) {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}
});
}
window.addEventListener('scroll', checkScroll);
window.addEventListener('load', checkScroll);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
</html>