|
|
<!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 { |
|
|
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 { |
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
.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 { |
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
.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 { |
|
|
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 { |
|
|
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-tabs { |
|
|
display: flex; |
|
|
margin-bottom: 30px; |
|
|
border-bottom: 1px solid #eee; |
|
|
} |
|
|
|
|
|
.demo-tab { |
|
|
padding: 12px 24px; |
|
|
cursor: pointer; |
|
|
margin-right: 10px; |
|
|
font-weight: 500; |
|
|
border-bottom: 3px solid transparent; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.demo-tab.active { |
|
|
border-bottom: 3px solid var(--primary); |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.demo-content { |
|
|
min-height: 500px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.demo-frame { |
|
|
width: 100%; |
|
|
height: 500px; |
|
|
border: 1px solid #eee; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
.pricing-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.pricing-card { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
padding: 40px 30px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
text-align: center; |
|
|
transition: all 0.3s; |
|
|
border: 1px solid rgba(67, 97, 238, 0.1); |
|
|
} |
|
|
|
|
|
.pricing-card.popular { |
|
|
border: 2px solid var(--primary); |
|
|
position: relative; |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.popular-tag { |
|
|
position: absolute; |
|
|
top: -15px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
background: var(--gradient); |
|
|
color: white; |
|
|
padding: 5px 20px; |
|
|
border-radius: 50px; |
|
|
font-size: 14px; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.pricing-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: var(--shadow-hover); |
|
|
} |
|
|
|
|
|
.pricing-card h3 { |
|
|
font-size: 24px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.price { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
font-size: 48px; |
|
|
margin-bottom: 20px; |
|
|
background: var(--gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.price span { |
|
|
font-size: 16px; |
|
|
color: var(--gray); |
|
|
} |
|
|
|
|
|
.pricing-features { |
|
|
margin: 30px 0; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.pricing-features li { |
|
|
margin-bottom: 10px; |
|
|
position: relative; |
|
|
padding-left: 25px; |
|
|
color: var(--gray); |
|
|
} |
|
|
|
|
|
.pricing-features li::before { |
|
|
content: '\f00c'; |
|
|
font-family: 'Font Awesome 6 Free'; |
|
|
font-weight: 900; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
|
|
|
.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); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
@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, .pricing-card, .testimonial-card { |
|
|
padding: 30px; |
|
|
} |
|
|
} |
|
|
|
|
|
@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-tabs { |
|
|
flex-direction: column; |
|
|
border-bottom: none; |
|
|
} |
|
|
|
|
|
.demo-tab { |
|
|
border-bottom: 1px solid #eee; |
|
|
margin-right: 0; |
|
|
border-left: 3px solid transparent; |
|
|
} |
|
|
|
|
|
.demo-tab.active { |
|
|
border-bottom: 1px solid #eee; |
|
|
border-left: 3px solid var(--primary); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@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">Services</a></li> |
|
|
<li><a href="#use-cases">Use Cases</a></li> |
|
|
<li><a href="#mlops">MLOps</a></li> |
|
|
<li><a href="#testimonials">Testimonials</a></li> |
|
|
<li><a href="#pricing">Pricing</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">Enterprise AI Services & MLOps Solutions</h1> |
|
|
<p class="fade-in delay-1">We architect, deploy and manage cutting-edge AI systems to transform your business operations and customer experiences.</p> |
|
|
<div class="hero-buttons"> |
|
|
<a href="#services" class="btn fade-in delay-2">Explore Services</a> |
|
|
<a href="#use-cases" class="btn btn-outline fade-in delay-3">See Demos</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="services" class="section"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>Our AI/ML Services</h2> |
|
|
<p>Comprehensive artificial intelligence and machine learning solutions tailored to your business needs</p> |
|
|
</div> |
|
|
<div class="features-grid"> |
|
|
<div class="feature-card fade-in"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3>AI Agents Development</h3> |
|
|
<p>Custom AI agents for customer service, sales automation, and business process optimization powered by LLMs and reinforcement learning.</p> |
|
|
</div> |
|
|
<div class="feature-card fade-in delay-1"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-cloud"></i> |
|
|
</div> |
|
|
<h3>Cloud MLOps</h3> |
|
|
<p>End-to-end machine learning operations on AWS, Azure, and GCP with CI/CD pipelines, model monitoring, and automated retraining.</p> |
|
|
</div> |
|
|
<div class="feature-card fade-in delay-2"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
</div> |
|
|
<h3>Ecommerce AI</h3> |
|
|
<p>Recommendation engines, dynamic pricing, visual search, and personalized marketing to boost conversions and customer LTV.</p> |
|
|
</div> |
|
|
<div class="feature-card fade-in delay-3"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-chart-network"></i> |
|
|
</div> |
|
|
<h3>Predictive Analytics</h3> |
|
|
<p>Forecast demand, predict churn, and optimize inventory with our time-series and predictive modeling expertise.</p> |
|
|
</div> |
|
|
<div class="feature-card fade-in delay-1"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-comments"></i> |
|
|
</div> |
|
|
<h3>Conversational AI</h3> |
|
|
<p>Chatbots, voice assistants, and contact center automation using NLP and generative AI technologies.</p> |
|
|
</div> |
|
|
<div class="feature-card fade-in delay-2"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-cogs"></i> |
|
|
</div> |
|
|
<h3>AI Optimization</h3> |
|
|
<p>Performance tuning, model compression, and hardware acceleration for production-grade AI applications.</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>AI Use Case Demonstrations</h2> |
|
|
<p>Explore interactive demos of our AI solutions for ecommerce and beyond</p> |
|
|
</div> |
|
|
|
|
|
<div class="demo-container"> |
|
|
<div class="demo-tabs"> |
|
|
<div class="demo-tab active" onclick="showDemo('similar')">Similar Product Recommendations</div> |
|
|
<div class="demo-tab" onclick="showDemo('crosssell')">Cross-Sell/Upsell Engine</div> |
|
|
<div class="demo-tab" onclick="showDemo('segmentation')">Customer Segmentation</div> |
|
|
<div class="demo-tab" onclick="showDemo('chatbot')">AI Shopping Assistant</div> |
|
|
<div class="demo-tab" onclick="showDemo('pricing')">Dynamic Pricing Model</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="crosssellDemo" class="demo-frame" src="https://huggingface.co/spaces/recsys/cross-sell-recommender" style="display:none;" frameborder="0"></iframe> |
|
|
<iframe id="segmentationDemo" class="demo-frame" src="https://huggingface.co/spaces/clustering/customer-segmentation" style="display:none;" frameborder="0"></iframe> |
|
|
<iframe id="chatbotDemo" class="demo-frame" src="https://huggingface.co/spaces/conversational-ai/shopping-assistant" style="display:none;" frameborder="0"></iframe> |
|
|
<iframe id="pricingDemo" class="demo-frame" src="https://huggingface.co/spaces/pricing/dynamic-pricing-simulator" style="display:none;" frameborder="0"></iframe> |
|
|
</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>10x</h3> |
|
|
<p>Faster deployment than in-house solutions</p> |
|
|
</div> |
|
|
<div class="stat-item fade-in delay-1"> |
|
|
<h3>99.9%</h3> |
|
|
<p>Model uptime SLA across deployments</p> |
|
|
</div> |
|
|
<div class="stat-item fade-in delay-2"> |
|
|
<h3>50+</h3> |
|
|
<p>Production AI models deployed</p> |
|
|
</div> |
|
|
<div class="stat-item fade-in delay-3"> |
|
|
<h3>3x</h3> |
|
|
<p>ROI on AI investments</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 MLOps framework standardized our machine learning lifecycle across regions. We now have 18 models in production with automated monitoring and retraining, something that took us years to achieve internally." |
|
|
</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 id="pricing" class="section"> |
|
|
<div class="container"> |
|
|
<div class="section-title"> |
|
|
<h2>Flexible Engagement Models</h2> |
|
|
<p>Choose the planning that fits your AI adoption stage</p> |
|
|
</div> |
|
|
<div class="pricing-grid"> |
|
|
<div class="pricing-card fade-in"> |
|
|
<h3>Starter Package</h3> |
|
|
<div class="price">$4,999<span>/month</span></div> |
|
|
<p>For businesses beginning AI adoption</p> |
|
|
<ul class="pricing-features"> |
|
|
<li>1 AI use case implementation</li> |
|
|
<li>Basic MLOps setup</li> |
|
|
<li>Monthly model monitoring</li> |
|
|
<li>Email & ticket support</li> |
|
|
<li>5 consulting hours/month</li> |
|
|
</ul> |
|
|
<a href="#contact" class="btn">Get Started</a> |
|
|
</div> |
|
|
<div class="pricing-card popular fade-in delay-1"> |
|
|
<div class="popular-tag">Most Popular</div> |
|
|
<h3>Enterprise Scale</h3> |
|
|
<div class="price">$14,999<span>/month</span></div> |
|
|
<p>For scaling AI across organization</p> |
|
|
<ul class="pricing-features"> |
|
|
<li>Up to 3 AI use cases</li> |
|
|
<li>Advanced MLOps/AIOps</li> |
|
|
<li>Real-time monitoring</li> |
|
|
<li>24/7 support SLA</li> |
|
|
<li>20 consulting hours/month</li> |
|
|
<li>Dedicated CSM</li> |
|
|
</ul> |
|
|
<a href="#contact" class="btn">Contact Sales</a> |
|
|
</div> |
|
|
<div class="pricing-card fade-in delay-2"> |
|
|
<h3>Custom AI Factory</h3> |
|
|
<div class="price">Let's Talk</div> |
|
|
<p>Tailored solutions for large deployments</p> |
|
|
<ul class="pricing-features"> |
|
|
<li>Custom AI solutions</li> |
|
|
<li>End-to-end MLOps</li> |
|
|
<li>Cloud architecture</li> |
|
|
<li>Dedicated AI team</li> |
|
|
<li>Training & knowledge transfer</li> |
|
|
<li>Enterprise security</li> |
|
|
</ul> |
|
|
<a href="#contact" class="btn">Schedule Consultation</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="cta"> |
|
|
<div class="container"> |
|
|
<div class="cta-content"> |
|
|
<h2 class="fade-in">Ready to Transform Your Business with AI?</h2> |
|
|
<p class="fade-in delay-1">Our team of AI specialists will help you design, deploy and manage cutting-edge solutions tailored to your needs.</p> |
|
|
<a href="#pricing" class="btn fade-in delay-2">View Plans</a> |
|
|
<a href="#contact" class="btn btn-outline fade-in delay-3">Book Discovery Call</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer id="contact"> |
|
|
<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 digital 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>Services</h3> |
|
|
<ul class="footer-links"> |
|
|
<li><a href="#">AI Agents Development</a></li> |
|
|
<li><a href="#">MLOps Implementation</a></li> |
|
|
<li><a href="#">Ecommerce AI</a></li> |
|
|
<li><a href="#">Predictive Analytics</a></li> |
|
|
<li><a href="#">Conversational AI</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 Us</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="footer-column"> |
|
|
<h3>Contact</h3> |
|
|
<ul class="footer-links"> |
|
|
<li><i class="fas fa-map-marker-alt"></i> San Francisco, CA</li> |
|
|
<li><i class="fas fa-phone"></i> (555) 123-4567</li> |
|
|
<li><i class="fas fa-envelope"></i> hello@pingax.ai</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-bottom"> |
|
|
<p>© 2023 Pingax AI Technologies. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
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>'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-links a').forEach(link => { |
|
|
link.addEventListener('click', () => { |
|
|
navLinks.classList.remove('active'); |
|
|
menuToggle.innerHTML = '<i class="fas fa-bars"></i>'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function showDemo(demoId) { |
|
|
|
|
|
document.querySelectorAll('.demo-frame').forEach(frame => { |
|
|
frame.style.display = 'none'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.demo-tab').forEach(tab => { |
|
|
tab.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(demoId + 'Demo').style.display = 'block'; |
|
|
event.currentTarget.classList.add('active'); |
|
|
} |
|
|
|
|
|
|
|
|
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></body> |
|
|
</html> |
