<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q-Leap AI - Complete Platform</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<style>
/* === GLOBAL STYLES === */
:root {
--primary-blue: #1a365d;
--accent-gold: #d4af37;
--ai-purple: #8b5cf6;
--success-green: #10b981;
--warning-orange: #f59e0b;
--light-bg: #f8fafc;
--white: #ffffff;
--text-dark: #2d3748;
--border-light: #e2e8f0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: var(--light-bg);
color: var(--text-dark);
line-height: 1.6;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--primary-blue);
margin-bottom: 15px;
}
.section-title p {
font-size: 1.1rem;
color: #718096;
max-width: 600px;
margin: 0 auto;
}
.cta-button {
display: inline-block;
background: var(--accent-gold);
color: var(--primary-blue);
padding: 12px 30px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}
/* === HORIZONTAL HEADER === */
.horizontal-header {
background: var(--white);
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
padding: 0;
}
.main-nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
font-size: 2rem;
font-weight: 700;
color: var(--primary-blue);
text-decoration: none;
display: flex;
align-items: center;
}
.logo span {
color: var(--accent-gold);
}
.logo-badge {
background: var(--ai-purple);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.7rem;
margin-left: 10px;
font-weight: normal;
}
.nav-center {
display: flex;
list-style: none;
}
.nav-center li {
margin: 0 15px;
}
.nav-center a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
padding: 25px 0;
display: block;
transition: color 0.3s ease;
border-bottom: 3px solid transparent;
}
.nav-center a:hover, .nav-center a.active {
color: var(--primary-blue);
border-bottom: 3px solid var(--accent-gold);
}
.nav-right {
display: flex;
align-items: center;
}
.nav-cta {
background: var(--accent-gold);
color: var(--primary-blue);
padding: 10px 25px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
margin-left: 15px;
transition: all 0.3s ease;
}
.nav-cta:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}
/* === HERO SECTION === */
.hero {
background: linear-gradient(135deg, var(--primary-blue) 0%, #2d4a80 100%);
color: var(--white);
padding: 180px 0 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
font-weight: 700;
}
.hero p {
font-size: 1.3rem;
margin-bottom: 30px;
opacity: 0.9;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* === AI FEATURES SECTION === */
.ai-features {
padding: 100px 0;
background: var(--light-bg);
}
.ai-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.ai-feature-card {
background: var(--white);
padding: 40px 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s ease;
}
.ai-feature-card:hover {
transform: translateY(-10px);
}
.ai-feature-icon {
font-size: 3rem;
color: var(--ai-purple);
margin-bottom: 20px;
}
.ai-feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--primary-blue);
}
/* === PAYMENT SYSTEM SECTION === */
.payment-system {
padding: 100px 0;
background: var(--white);
}
.payment-container {
max-width: 800px;
margin: 0 auto;
background: var(--white);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
overflow: hidden;
}
.payment-tabs {
display: flex;
background: var(--light-bg);
}
.payment-tab {
flex: 1;
padding: 20px;
text-align: center;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.payment-tab.active {
background: var(--primary-blue);
color: white;
}
.payment-content {
padding: 40px;
}
.payment-form {
display: none;
}
.payment-form.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--primary-blue);
}
.form-group input, .form-group select {
width: 100%;
padding: 12px;
border: 1px solid var(--border-light);
border-radius: 5px;
font-size: 16px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.payment-status {
padding: 15px;
border-radius: 5px;
margin-top: 20px;
display: none;
}
.payment-success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.payment-error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* === AFFILIATE PROGRAM SECTION === */
.affiliate-program {
padding: 100px 0;
background: var(--light-bg);
}
.affiliate-tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.affiliate-tier {
background: var(--white);
padding: 40px 30px;
border-radius: 15px;
text-align: center;
position: relative;
transition: transform 0.3s ease;
border: 2px solid transparent;
}
.affiliate-tier:hover {
transform: translateY(-10px);
border-color: var(--accent-gold);
}
.affiliate-tier.featured {
background: linear-gradient(135deg, var(--primary-blue) 0%, #2d4a80 100%);
color: white;
transform: scale(1.05);
}
.affiliate-tier.featured:hover {
transform: scale(1.05) translateY(-10px);
}
.tier-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--accent-gold);
color: var(--primary-blue);
padding: 5px 20px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
}
.tier-commission {
font-size: 2.5rem;
font-weight: 700;
color: var(--ai-purple);
margin: 20px 0;
}
.affiliate-tier.featured .tier-commission {
color: var(--accent-gold);
}
.tier-features {
list-style: none;
text-align: left;
margin: 30px 0;
}
.tier-features li {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.tier-features li i {
color: var(--success-green);
margin-right: 10px;
}
/* === AI CHATBOT === */
.ai-assistant {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999;
}
.ai-toggle {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--ai-purple) 0%, #6d28d9 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
animation: ai-pulse 3s infinite;
position: relative;
}
@keyframes ai-pulse {
0% { transform: scale(1); box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 15px 35px rgba(139, 92, 246, 0.5); }
100% { transform: scale(1); box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3); }
}
.ai-toggle::after {
content: 'AI';
position: absolute;
top: -5px;
right: -5px;
background: var(--success-green);
color: white;
border-radius: 50%;
width: 25px;
height: 25px;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
}
.ai-panel {
position: absolute;
bottom: 80px;
right: 0;
width: 400px;
height: 500px;
background: white;
border-radius: 15px;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
display: none;
flex-direction: column;
}
.ai-header {
background: linear-gradient(135deg, var(--ai-purple) 0%, #6d28d9 100%);
color: white;
padding: 20px;
border-radius: 15px 15px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.ai-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
background: var(--light-bg);
}
.ai-input {
display: flex;
padding: 15px;
border-top: 1px solid var(--border-light);
}
.ai-input input {
flex: 1;
padding: 12px;
border: 1px solid var(--border-light);
border-radius: 25px;
margin-right: 10px;
}
.message {
margin-bottom: 15px;
max-width: 80%;
}
.message.ai {
align-self: flex-start;
background: white;
padding: 12px 18px;
border-radius: 18px 18px 18px 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.message.user {
align-self: flex-end;
background: var(--ai-purple);
color: white;
padding: 12px 18px;
border-radius: 18px 18px 5px 18px;
margin-left: auto;
}
/* === HORIZONTAL FOOTER === */
.horizontal-footer {
background: var(--primary-blue);
color: var(--white);
padding: 60px 0 30px;
}
.footer-columns {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-main {
padding-right: 40px;
}
.footer-logo {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 15px;
display: block;
}
.footer-logo span {
color: var(--accent-gold);
}
.footer-description {
color: #cbd5e0;
margin-bottom: 20px;
line-height: 1.6;
}
.footer-social {
display: flex;
gap: 15px;
}
.footer-social a {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: all 0.3s ease;
}
.footer-social a:hover {
background: var(--accent-gold);
color: var(--primary-blue);
transform: translateY(-3px);
}
.footer-column h3 {
font-size: 1.2rem;
margin-bottom: 20px;
color: var(--accent-gold);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #cbd5e0;
text-decoration: none;
transition: color 0.3s ease;
display: flex;
align-items: center;
}
.footer-links a:hover {
color: var(--accent-gold);
padding-left: 5px;
}
.footer-links a i {
margin-right: 8px;
font-size: 0.8rem;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid #2d3748;
color: #cbd5e0;
font-size: 0.9rem;
}
.footer-bottom-links {
display: flex;
gap: 20px;
}
.footer-bottom-links a {
color: #cbd5e0;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-bottom-links a:hover {
color: var(--accent-gold);
}
/* === RESPONSIVE DESIGN === */
@media (max-width: 1200px) {
.nav-center {
display: none;
}
.footer-columns {
grid-template-columns: 1fr 1fr;
}
.footer-main {
grid-column: 1 / -1;
text-align: center;
padding-right: 0;
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.main-nav {
flex-direction: column;
padding: 15px 20px;
}
.logo {
margin-bottom: 15px;
}
.nav-right {
width: 100%;
justify-content: center;
}
.hero {
padding: 150px 0 80px;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.footer-columns {
grid-template-columns: 1fr;
}
.ai-panel {
width: 350px;
}
.affiliate-tiers {
grid-template-columns: 1fr;
}
.affiliate-tier.featured {
transform: scale(1);
}
.affiliate-tier.featured:hover {
transform: translateY(-10px);
}
}
</style>
</head>
<body>
<!-- HORIZONTAL HEADER -->
<header class="horizontal-header">
<div class="main-nav">
<div class="logo-section">
<a href="#" class="logo">Q-<span>Leap</span> <span class="logo-badge">AI</span></a>
</div>
<ul class="nav-center">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#ai-features">AI Features</a></li>
<li><a href="#payment">Payments</a></li>
<li><a href="#affiliate">Affiliate Program</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="nav-right">
<a href="#login" style="color: var(--text-dark); text-decoration: none; margin-right: 15px;">
<i class="fas fa-user"></i> Login
</a>
<a href="#affiliate" class="nav-cta">
<i class="fas fa-rocket"></i> Join Affiliate
</a>
</div>
</div>
</header>
<!-- HERO SECTION -->
<section class="hero" id="home">
<div class="container">
<h1>AI-Powered Software Development Platform</h1>
<p>Bridging African Businesses with World-Class Digital Solutions through cutting-edge artificial intelligence and expert development.</p>
<a href="#payment" class="cta-button">Start Your Project</a>
<a href="#ai-features" class="cta-button" style="background: transparent; border: 2px solid var(--accent-gold); color: var(--accent-gold); margin-left: 15px;">Explore AI Features</a>
</div>
</section>
<!-- AI FEATURES SECTION -->
<section class="ai-features" id="ai-features">
<div class="container">
<div class="section-title">
<h2>Advanced AI-Powered Features</h2>
<p>Comprehensive AI capabilities that transform software development</p>
</div>
<div class="ai-feature-grid">
<div class="ai-feature-card">
<div class="ai-feature-icon"><i class="fas fa-code"></i></div>
<h3>AI Code Generation</h3>
<p>Advanced machine learning models that write, review, and optimize code automatically.</p>
</div>
<div class="ai-feature-card">
<div class="ai-feature-icon"><i class="fas fa-vial"></i></div>
<h3>Automated Testing</h3>
<p>AI-driven testing frameworks that learn from your application and create comprehensive test suites.</p>
</div>
<div class="ai-feature-card">
<div class="ai-feature-icon"><i class="fas fa-chart-line"></i></div>
<h3>Performance Optimization</h3>
<p>AI analyzes and optimizes your application for maximum speed and efficiency.</p>
</div>
<div class="ai-feature-card">
<div class="ai-feature-icon"><i class="fas fa-shield-alt"></i></div>
<h3>Security AI</h3>
<p>Advanced threat detection and prevention systems powered by machine learning.</p>
</div>
<div class="ai-feature-card">
<div class="ai-feature-icon"><i class="fas fa-brain"></i></div>
<h3>Predictive Analytics</h3>
<p>AI-driven insights for project success prediction and risk assessment.</p>
</div>
<div class="ai-feature-card">
<div class="ai-feature-icon"><i class="fas fa-robot"></i></div>
<h3>AI Assistant</h3>
<p>24/7 AI-powered assistance for project planning and technical guidance.</p>
</div>
</div>
</div>
</section>
<!-- PAYMENT SYSTEM SECTION -->
<section class="payment-system" id="payment">
<div class="container">
<div class="section-title">
<h2>Secure Payment System</h2>
<p>Handle affiliate payments and transactions with our integrated TAKpay system</p>
</div>
<div class="payment-container">
<div class="payment-tabs">
<div class="payment-tab active" data-tab="affiliate">Affiliate Payment</div>
<div class="payment-tab" data-tab="service">Service Payment</div>
<div class="payment-tab" data-tab="invoice">Invoice Payment</div>
</div>
<div class="payment-content">
<!-- Affiliate Payment Form -->
<div class="payment-form active" id="affiliate-form">
<h3>Affiliate Commission Payment</h3>
<p>Process commission payments for your affiliate partners</p>
<form id="affiliatePaymentForm">
<div class="form-group">
<label for="affiliateCode">Affiliate Code *</label>
<input type="text" id="affiliateCode" name="affiliateCode" required>
</div>
<div class="form-group">
<label for="affiliateName">Affiliate Name *</label>
<input type="text" id="affiliateName" name="affiliateName" required>
</div>
<div class="form-group">
<label for="affiliateAmount">Payment Amount ($) *</label>
<input type="number" id="affiliateAmount" name="affiliateAmount" min="1" step="0.01" required>
</div>
<div class="form-group">
<label for="affiliateDescription">Payment Description</label>
<input type="text" id="affiliateDescription" name="affiliateDescription" placeholder="e.g., Q1 Commission Payment">
</div>
<div class="form-group">
<label for="affiliateEmail">Affiliate Email *</label>
<input type="email" id="affiliateEmail" name="affiliateEmail" required>
</div>
<button type="submit" class="cta-button" style="width: 100%;">Process Affiliate Payment</button>
</form>
<div id="affiliateStatus" class="payment-status"></div>
</div>
<!-- Service Payment Form -->
<div class="payment-form" id="service-form">
<h3>Service Payment</h3>
<p>Pay for software development services and consultations</p>
<form id="servicePaymentForm">
<div class="form-group">
<label for="serviceType">Service Type *</label>
<select id="serviceType" name="serviceType" required>
<option value="">-- Select Service --</option>
<option value="web_development">Web Development</option>
<option value="mobile_app">Mobile Application</option>
<option value="ecommerce">E-Commerce Solution</option>
<option value="consultation">Technical Consultation</option>
<option value="maintenance">Maintenance & Support</option>
</select>
</div>
<div class="form-group">
<label for="serviceAmount">Payment Amount ($) *</label>
<input type="number" id="serviceAmount" name="serviceAmount" min="1" step="0.01" required>
</div>
<div class="form-group">
<label for="clientName">Your Name *</label>
<input type="text" id="clientName" name="clientName" required>
</div>
<div class="form-group">
<label for="clientEmail">Your Email *</label>
<input type="email" id="clientEmail" name="clientEmail" required>
</div>
<div class="form-group">
<label for="serviceDescription">Project Description</label>
<input type="text" id="serviceDescription" name="serviceDescription" placeholder="Brief description of your project">
</div>
<button type="submit" class="cta-button" style="width: 100%;">Pay for Service</button>
</form>
<div id="serviceStatus" class="payment-status"></div>
</div>
<!-- Invoice Payment Form -->
<div class="payment-form" id="invoice-form">
<h3>Invoice Payment</h3>
<p>Pay an existing invoice by entering your invoice number</p>
<form id="invoicePaymentForm">
<div class="form-group">
<label for="invoiceNumber">Invoice Number *</label>
<input type="text" id="invoiceNumber" name="invoiceNumber" required>
</div>
<div class="form-group">
<label for="invoiceAmount">Amount Due ($)</label>
<input type="text" id="invoiceAmount" name="invoiceAmount" readonly>
</div>
<div class="form-group">
<label for="payerName">Your Name *</label>
<input type="text" id="payerName" name="payerName" required>
</div>
<div class="form-group">
<label for="payerEmail">Your Email *</label>
<input type="email" id="payerEmail" name="payerEmail" required>
</div>
<button type="submit" class="cta-button" style="width: 100%;">Pay Invoice</button>
</form>
<div id="invoiceStatus" class="payment-status"></div>
</div>
</div>
</div>
</div>
</section>
<!-- AFFILIATE PROGRAM SECTION -->
<section class="affiliate-program" id="affiliate">
<div class="container">
<div class="section-title">
<h2>Affiliate Program</h2>
<p>Earn commissions by referring clients to our AI-powered development platform</p>
</div>
<div class="affiliate-tiers">
<div class="affiliate-tier">
<div class="tier-badge">Starter</div>
<h3>Basic Affiliate</h3>
<div class="tier-commission">15%</div>
<p>Commission on all referrals</p>
<ul class="tier-features">
<li><i class="fas fa-check"></i> Basic referral tracking</li>
<li><i class="fas fa-check"></i> Standard commission rate</li>
<li><i class="fas fa-check"></i> Monthly payments</li>
<li><i class="fas fa-check"></i> Email support</li>
<li><i class="fas fa-times"></i> Advanced marketing tools</li>
<li><i class="fas fa-times"></i> Priority support</li>
</ul>
<a href="#" class="cta-button">Join Starter</a>
</div>
<div class="affiliate-tier featured">
<div class="tier-badge">Professional</div>
<h3>Pro Affiliate</h3>
<div class="tier-commission">25%</div>
<p>Commission + Bonuses</p>
<ul class="tier-features">
<li><i class="fas fa-check"></i> Advanced analytics dashboard</li>
<li><i class="fas fa-check"></i> 25% commission rate</li>
<li><i class="fas fa-check"></i> Bi-weekly payments</li>
<li><i class="fas fa-check"></i> Dedicated account manager</li>
<li><i class="fas fa-check"></i> Marketing materials</li>
<li><i class="fas fa-check"></i> Priority support</li>
</ul>
<a href="#" class="cta-button" style="background: white; color: var(--primary-blue);">Join Professional</a>
</div>
<div class="affiliate-tier">
<div class="tier-badge">Enterprise</div>
<h3>Enterprise Partner</h3>
<div class="tier-commission">30%</div>
<p>Maximum Earnings</p>
<ul class="tier-features">
<li><i class="fas fa-check"></i> White-label solutions</li>
<li><i class="fas fa-check"></i> 30% commission rate</li>
<li><i class="fas fa-check"></i> Weekly payments</li>
<li><i class="fas fa-check"></i> Dedicated support team</li>
<li><i class="fas fa-check"></i> Custom marketing tools</li>
<li><i class="fas fa-check"></i> Exclusive deals</li>
</ul>
<a href="#" class="cta-button">Contact Sales</a>
</div>
</div>
</div>
</section>
<!-- AI ASSISTANT -->
<div class="ai-assistant">
<div class="ai-toggle">
<i class="fas fa-robot"></i>
</div>
<div class="ai-panel">
<div class="ai-header">
<div>
<h3>Q-Leap AI Assistant</h3>
<p>How can I help you today?</p>
</div>
<i class="fas fa-times close-ai"></i>
</div>
<div class="ai-messages">
<div class="message ai">
<p>Hello! I'm your AI assistant. I can help you with:</p>
<ul>
<li>Payment processing questions</li>
<li>Affiliate program information</li>
<li>Technical support</li>
<li>Project planning</li>
</ul>
<p>What would you like to know?</p>
</div>
</div>
<div class="ai-input">
<input type="text" placeholder="Ask me anything...">
<button class="cta-button" style="padding: 10px 20px; border-radius: 25px;">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<!-- HORIZONTAL FOOTER -->
<footer class="horizontal-footer">
<div class="container">
<div class="footer-columns">
<div class="footer-main">
<a href="#" class="footer-logo">Q-<span>Leap</span> AI</a>
<p class="footer-description">
Africa's premier AI-powered software development platform.
We bridge African businesses with world-class digital solutions
through cutting-edge artificial intelligence and expert development.
</p>
<div class="footer-social">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="footer-column">
<h3>AI Solutions</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> Code Generation</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Automated Testing</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Performance AI</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Security AI</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Predictive Analytics</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Affiliate Program</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> Join Program</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Commission Rates</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Marketing Tools</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Success Stories</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Affiliate Login</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Company</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> About Us</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Our Team</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Case Studies</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Blog</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Careers</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Support</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> Help Center</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Contact Us</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> API Documentation</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Status Page</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> Legal</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="footer-copyright">
© 2024 Q-Leap AI Technologies. All rights reserved.
</div>
<div class="footer-bottom-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
<a href="#">GDPR Compliance</a>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
// Initialize AOS
AOS.init();
// Payment Tabs Functionality
const paymentTabs = document.querySelectorAll('.payment-tab');
const paymentForms = document.querySelectorAll('.payment-form');
paymentTabs.forEach(tab => {
tab.addEventListener('click', () => {
const tabId = tab.getAttribute('data-tab');
// Remove active class from all tabs and forms
paymentTabs.forEach(t => t.classList.remove('active'));
paymentForms.forEach(f => f.classList.remove('active'));
// Add active class to clicked tab and corresponding form
tab.classList.add('active');
document.getElementById(`${tabId}-form`).classList.add('active');
});
});
// AI Assistant Toggle
const aiToggle = document.querySelector('.ai-toggle');
const aiPanel = document.querySelector('.ai-panel');
const closeAI = document.querySelector('.close-ai');
aiToggle.addEventListener('click', function() {
aiPanel.style.display = aiPanel.style.display === 'flex' ? 'none' : 'flex';
});
closeAI.addEventListener('click', function() {
aiPanel.style.display = 'none';
});
// Payment Form Submissions
document.getElementById('affiliatePaymentForm').addEventListener('submit', function(event) {
event.preventDefault();
const statusElement = document.getElementById('affiliateStatus');
// Show processing status
statusElement.textContent = 'Processing affiliate payment...';
statusElement.className = 'payment-status';
statusElement.style.display = 'block';
// Simulate API call
setTimeout(() => {
const amount = document.getElementById('affiliateAmount').value;
const code = document.getElementById('affiliateCode').value;
statusElement.textContent = `Successfully processed $${amount} payment for affiliate ${code}`;
statusElement.className = 'payment-status payment-success';
// Reset form
this.reset();
}, 2000);
});
document.getElementById('servicePaymentForm').addEventListener('submit', function(event) {
event.preventDefault();
const statusElement = document.getElementById('serviceStatus');
// Show processing status
statusElement.textContent = 'Processing service payment...';
statusElement.className = 'payment-status';
statusElement.style.display = 'block';
// Simulate API call
setTimeout(() => {
const amount = document.getElementById('serviceAmount').value;
const service = document.getElementById('serviceType').value;
statusElement.textContent = `Successfully processed $${amount} payment for ${service}`;
statusElement.className = 'payment-status payment-success';
// Reset form
this.reset();
}, 2000);
});
document.getElementById('invoicePaymentForm').addEventListener('submit', function(event) {
event.preventDefault();
const statusElement = document.getElementById('invoiceStatus');
// Show processing status
statusElement.textContent = 'Processing invoice payment...';
statusElement.className = 'payment-status';
statusElement.style.display = 'block';
// Simulate API call
setTimeout(() => {
const invoice = document.getElementById('invoiceNumber').value;
statusElement.textContent = `Successfully processed payment for invoice ${invoice}`;
statusElement.className = 'payment-status payment-success';
// Reset form
this.reset();
}, 2000);
});
// Smooth scrolling for navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Sticky header
window.addEventListener('scroll', function() {
const header = document.querySelector('.horizontal-header');
if (window.scrollY > 100) {
header.style.background = 'rgba(255, 255, 255, 0.95)';
header.style.backdropFilter = 'blur(10px)';
} else {
header.style.background = 'var(--white)';
header.style.backdropFilter = 'none';
}
});
// AI Chat Functionality
const aiInput = document.querySelector('.ai-input input');
const aiMessages = document.querySelector('.ai-messages');
aiInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
function sendMessage() {
const message = aiInput.value.trim();
if (message) {
// Add user message
const userMessage = document.createElement('div');
userMessage.className = 'message user';
userMessage.innerHTML = `<p>${message}</p>`;
aiMessages.appendChild(userMessage);
// Clear input
aiInput.value = '';
// Simulate AI response
setTimeout(() => {
const aiResponse = document.createElement('div');
aiResponse.className = 'message ai';
aiResponse.innerHTML = `<p>${getAIResponse(message)}</p>`;
aiMessages.appendChild(aiResponse);
aiMessages.scrollTop = aiMessages.scrollHeight;
}, 1000);
}
}
function getAIResponse(message) {
const responses = {
'payment': 'Our payment system supports affiliate commissions, service payments, and invoice payments. Which type are you interested in?',
'affiliate': 'Our affiliate program offers 15-30% commissions. We have three tiers: Starter (15%), Professional (25%), and Enterprise (30%).',
'ai': 'Our AI features include code generation, automated testing, performance optimization, security AI, predictive analytics, and an AI assistant.',
'contact': 'You can reach us at contact@qleapsofts.com or through our contact form. Our support team is available 24/7.'
};
message = message.toLowerCase();
for (const [key, response] of Object.entries(responses)) {
if (message.includes(key)) {
return response;
}
}
return 'I understand you\'re interested in Q-Leap Softs. Could you provide more specific details about your question?';
}
</script>
</body>
</html>