mirror of
https://github.com/thecyberlearn/quantum-website-2026.git
synced 2026-08-18 07:43:20 +00:00
bd738f9183
The Site Auditor moved to the new AI Marketplace hub at marketplace.quantumtaskai.com. Update all outbound links across the static site so visitors land on the hub instead of going through the audit.* 301 redirect. Also adds the Marketplace nav entry to shared-header.js (already present locally, now reaffirmed alongside the link updates). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
795 lines
32 KiB
HTML
795 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>AI Tools Marketplace — Quantum Tasks AI</title>
|
|
<meta name="description" content="Explore our growing suite of AI tools and services. Free site audits, product intelligence, branding, automation — built for businesses that run on data." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="Quantum Tasks AI" />
|
|
<meta property="og:title" content="AI Tools Marketplace — Quantum Tasks AI" />
|
|
<meta property="og:description" content="Explore our growing suite of AI tools and services for modern businesses." />
|
|
<meta property="og:url" content="https://quantumtaskai.com/marketplace.html" />
|
|
<meta property="og:image" content="https://quantumtaskai.com/img/og-image.png" />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="AI Tools Marketplace — Quantum Tasks AI" />
|
|
<meta name="twitter:description" content="Explore our growing suite of AI tools and services for modern businesses." />
|
|
<meta name="twitter:image" content="https://quantumtaskai.com/img/og-image.png" />
|
|
<link rel="canonical" href="https://quantumtaskai.com/marketplace.html" />
|
|
<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png" />
|
|
<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=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
|
|
|
<style>
|
|
/* ── Reset ───────────────────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--navy: #0a0f1e;
|
|
--navy2: #111827;
|
|
--navy3: #1e293b;
|
|
--indigo: #6366f1;
|
|
--indigo2: #818cf8;
|
|
--violet: #a855f7;
|
|
--orange: #f97316;
|
|
--orange2: #fb923c;
|
|
--cyan: #06b6d4;
|
|
--green: #22c55e;
|
|
--white: #ffffff;
|
|
--gray50: #f8fafc;
|
|
--gray100: #f1f5f9;
|
|
--gray200: #e2e8f0;
|
|
--gray400: #94a3b8;
|
|
--gray500: #64748b;
|
|
--gray700: #334155;
|
|
--text: #0f172a;
|
|
--r: 12px;
|
|
--shadow: 0 4px 24px rgba(0,0,0,0.08);
|
|
--shadow-lg: 0 20px 60px rgba(0,0,0,0.14);
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
color: var(--text);
|
|
background: var(--white);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
}
|
|
img { max-width: 100%; display: block; }
|
|
a { text-decoration: none; color: inherit; }
|
|
|
|
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
|
|
|
|
.section-label {
|
|
font-size: 12px; font-weight: 700;
|
|
letter-spacing: 0.12em; text-transform: uppercase;
|
|
color: var(--indigo); margin-bottom: 14px;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.section-label::before {
|
|
content: ''; width: 20px; height: 2px;
|
|
background: var(--indigo); border-radius: 2px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(30px, 3.6vw, 46px);
|
|
font-weight: 800; line-height: 1.12;
|
|
color: var(--navy); letter-spacing: -0.025em;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
font-family: inherit; font-size: 15px; font-weight: 700;
|
|
padding: 13px 26px; border-radius: 10px; cursor: pointer;
|
|
border: none; transition: all .2s; white-space: nowrap;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.btn::after {
|
|
content: ''; position: absolute; inset: 0;
|
|
background: rgba(255,255,255,0); transition: background .2s;
|
|
}
|
|
.btn:hover::after { background: rgba(255,255,255,0.08); }
|
|
.btn:hover { transform: translateY(-2px); }
|
|
.btn:active { transform: translateY(0); }
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--orange), #ef4444);
|
|
color: var(--white);
|
|
box-shadow: 0 4px 20px rgba(249,115,22,0.4);
|
|
}
|
|
.btn-primary:hover { box-shadow: 0 8px 30px rgba(249,115,22,0.55); }
|
|
.btn-ghost {
|
|
background: rgba(255,255,255,0.08);
|
|
color: var(--white);
|
|
border: 1px solid rgba(255,255,255,0.18);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.btn-ghost:hover { background: rgba(255,255,255,0.14); }
|
|
|
|
/* ════════════ HERO ════════════ */
|
|
.mp-hero {
|
|
background: var(--navy);
|
|
position: relative; overflow: hidden;
|
|
padding: 48px 0 36px;
|
|
text-align: center;
|
|
}
|
|
.mp-hero::before {
|
|
content: ''; position: absolute; inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-orb {
|
|
position: absolute; border-radius: 50%;
|
|
filter: blur(80px); pointer-events: none;
|
|
}
|
|
.hero-orb-1 {
|
|
width: 600px; height: 600px;
|
|
background: radial-gradient(circle, rgba(99,102,241,0.28) 0%, transparent 65%);
|
|
top: -250px; left: -100px;
|
|
animation: orbFloat1 12s ease-in-out infinite;
|
|
}
|
|
.hero-orb-2 {
|
|
width: 400px; height: 400px;
|
|
background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, transparent 65%);
|
|
bottom: -150px; right: 0;
|
|
animation: orbFloat2 15s ease-in-out infinite;
|
|
}
|
|
.hero-orb-3 {
|
|
width: 280px; height: 280px;
|
|
background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, transparent 65%);
|
|
top: 20%; right: 8%;
|
|
animation: orbFloat1 10s ease-in-out infinite reverse;
|
|
}
|
|
@keyframes orbFloat1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-40px); } }
|
|
@keyframes orbFloat2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-25px,30px); } }
|
|
|
|
.mp-hero-inner { position: relative; z-index: 2; }
|
|
|
|
.mp-pill {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: rgba(99,102,241,0.12);
|
|
border: 1px solid rgba(99,102,241,0.3);
|
|
border-radius: 999px; padding: 6px 18px;
|
|
margin-bottom: 24px;
|
|
font-size: 13px; font-weight: 600; color: var(--indigo2);
|
|
}
|
|
.mp-pill-dot {
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: var(--indigo2);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
|
|
|
|
.mp-h1 {
|
|
font-size: clamp(28px, 4vw, 46px);
|
|
font-weight: 900; line-height: 1.1;
|
|
letter-spacing: -0.03em;
|
|
color: var(--white);
|
|
margin-bottom: 14px;
|
|
}
|
|
.mp-h1 .grad {
|
|
background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #fb923c 100%);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.mp-sub {
|
|
font-size: 15px; color: rgba(255,255,255,0.55);
|
|
max-width: 480px; margin: 0 auto 28px; line-height: 1.7;
|
|
}
|
|
|
|
.mp-stats {
|
|
display: flex; align-items: center; justify-content: center;
|
|
gap: 32px; flex-wrap: wrap;
|
|
padding-top: 20px;
|
|
border-top: 1px solid rgba(255,255,255,0.07);
|
|
}
|
|
.mp-stat {
|
|
display: flex; align-items: center; gap: 8px;
|
|
font-size: 13px; font-weight: 600;
|
|
color: rgba(255,255,255,0.45);
|
|
}
|
|
.mp-stat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
|
|
|
/* ════════════ FILTER TABS ════════════ */
|
|
.filter-section {
|
|
background: var(--white);
|
|
border-bottom: 1px solid var(--gray100);
|
|
position: sticky; top: 77px; z-index: 100;
|
|
}
|
|
.filter-inner {
|
|
display: flex; align-items: center;
|
|
gap: 4px; padding: 12px 0;
|
|
overflow-x: auto;
|
|
}
|
|
.filter-inner::-webkit-scrollbar { display: none; }
|
|
|
|
.filter-tab {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
font-size: 14px; font-weight: 600;
|
|
color: var(--gray500);
|
|
background: transparent;
|
|
border: 1.5px solid transparent;
|
|
border-radius: 8px; padding: 7px 16px;
|
|
cursor: pointer; white-space: nowrap;
|
|
transition: all .15s; font-family: inherit;
|
|
}
|
|
.filter-tab:hover { color: var(--indigo); background: rgba(99,102,241,0.06); }
|
|
.filter-tab.active {
|
|
color: var(--indigo);
|
|
background: rgba(99,102,241,0.08);
|
|
border-color: rgba(99,102,241,0.2);
|
|
}
|
|
.filter-count {
|
|
background: var(--gray100); color: var(--gray500);
|
|
font-size: 11px; font-weight: 700;
|
|
padding: 2px 7px; border-radius: 999px;
|
|
}
|
|
.filter-tab.active .filter-count {
|
|
background: rgba(99,102,241,0.15); color: var(--indigo);
|
|
}
|
|
|
|
/* ════════════ TOOLS GRID ════════════ */
|
|
.tools-section {
|
|
background: var(--gray50);
|
|
padding: 44px 0 80px;
|
|
}
|
|
|
|
.tools-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 22px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.tool-card {
|
|
background: var(--white);
|
|
border: 1px solid var(--gray200);
|
|
border-radius: 16px; padding: 32px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
|
transition: box-shadow .25s, transform .25s, border-color .25s;
|
|
position: relative; overflow: hidden;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.tool-card::before {
|
|
content: ''; position: absolute;
|
|
top: 0; left: 0; right: 0; height: 0;
|
|
background: linear-gradient(135deg, var(--indigo), var(--violet));
|
|
transition: height .25s; opacity: 0.06;
|
|
pointer-events: none;
|
|
}
|
|
.tool-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: transparent; }
|
|
.tool-card:hover::before { height: 100%; }
|
|
|
|
.tool-card.featured {
|
|
background: linear-gradient(135deg, var(--navy), #1a1040);
|
|
border-color: rgba(99,102,241,0.3);
|
|
}
|
|
.tool-card.featured::before { background: linear-gradient(135deg, var(--indigo), var(--violet)); opacity: 0.1; }
|
|
.tool-card.featured:hover { box-shadow: 0 20px 60px rgba(99,102,241,0.3); }
|
|
|
|
.tool-card.coming-soon { opacity: 0.88; }
|
|
.tool-card.coming-soon:hover { transform: translateY(-3px); }
|
|
|
|
/* Status badge */
|
|
.tool-badge {
|
|
position: absolute; top: 18px; right: 18px;
|
|
font-size: 9px; font-weight: 800;
|
|
text-transform: uppercase; letter-spacing: .07em;
|
|
padding: 3px 9px; border-radius: 6px;
|
|
border: 1px solid;
|
|
}
|
|
.badge-live { background: rgba(34,197,94,0.12); color: #16a34a; border-color: rgba(34,197,94,0.3); }
|
|
.badge-service { background: rgba(99,102,241,0.1); color: var(--indigo); border-color: rgba(99,102,241,0.25); }
|
|
.badge-soon { background: rgba(249,115,22,0.12); color: var(--orange); border-color: rgba(249,115,22,0.3); }
|
|
|
|
/* Card body */
|
|
.tool-icon {
|
|
width: 56px; height: 56px; border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 26px; margin-bottom: 18px; flex-shrink: 0;
|
|
}
|
|
.tool-title {
|
|
font-size: 20px; font-weight: 800;
|
|
color: var(--navy); margin-bottom: 8px;
|
|
letter-spacing: -0.015em;
|
|
}
|
|
.tool-card.featured .tool-title { color: var(--white); }
|
|
.tool-desc {
|
|
font-size: 14px; color: var(--gray500); line-height: 1.7;
|
|
margin-bottom: 18px; flex: 1;
|
|
}
|
|
.tool-card.featured .tool-desc { color: rgba(255,255,255,0.6); }
|
|
|
|
.tool-features {
|
|
list-style: none; margin-bottom: 20px;
|
|
display: flex; flex-direction: column; gap: 7px;
|
|
}
|
|
.tool-features li {
|
|
display: flex; align-items: flex-start; gap: 8px;
|
|
font-size: 13px; color: var(--gray700); line-height: 1.4;
|
|
}
|
|
.tool-card.featured .tool-features li { color: rgba(255,255,255,0.7); }
|
|
.tool-features li::before {
|
|
content: '✓';
|
|
font-size: 11px; font-weight: 800; color: var(--green);
|
|
flex-shrink: 0; margin-top: 1px;
|
|
}
|
|
.tool-card.featured .tool-features li::before { color: #4ade80; }
|
|
.tool-card.coming-soon .tool-features li::before {
|
|
content: '·'; color: var(--gray400);
|
|
font-size: 18px; line-height: 1; margin-top: -1px;
|
|
}
|
|
|
|
.tool-divider {
|
|
height: 1px; background: var(--gray100); margin-bottom: 20px;
|
|
}
|
|
.tool-card.featured .tool-divider { background: rgba(255,255,255,0.1); }
|
|
|
|
.tool-cta {
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.tool-cta-btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
font-size: 14px; font-weight: 700; font-family: inherit;
|
|
padding: 10px 18px; border-radius: 9px; cursor: pointer;
|
|
border: none; transition: transform .2s, box-shadow .2s; white-space: nowrap;
|
|
}
|
|
.btn-green {
|
|
background: var(--green); color: var(--white);
|
|
box-shadow: 0 4px 16px rgba(34,197,94,0.3);
|
|
}
|
|
.btn-green:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(34,197,94,0.4); }
|
|
.btn-indigo-solid {
|
|
background: var(--indigo); color: var(--white);
|
|
box-shadow: 0 4px 16px rgba(99,102,241,0.3);
|
|
}
|
|
.btn-indigo-solid:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(99,102,241,0.4); }
|
|
.btn-muted {
|
|
background: var(--gray100); color: var(--gray400);
|
|
border: 1.5px solid var(--gray200); cursor: default;
|
|
}
|
|
.tool-cta-link {
|
|
font-size: 13px; font-weight: 600; color: var(--indigo2);
|
|
display: flex; align-items: center; gap: 4px;
|
|
transition: gap .15s; text-decoration: none;
|
|
}
|
|
.tool-cta-link:hover { gap: 7px; }
|
|
|
|
/* "More coming" banner */
|
|
.coming-banner {
|
|
margin-top: 48px;
|
|
background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(168,85,247,0.05));
|
|
border: 1.5px dashed rgba(99,102,241,0.22);
|
|
border-radius: 16px; padding: 36px 32px;
|
|
text-align: center;
|
|
}
|
|
.coming-banner-title { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
|
|
.coming-banner-text { font-size: 14px; color: var(--gray500); margin-bottom: 22px; line-height: 1.65; }
|
|
.btn-indigo-outline {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 11px 24px; border-radius: 9px;
|
|
font-size: 14px; font-weight: 700; font-family: inherit;
|
|
background: rgba(99,102,241,0.08); color: var(--indigo);
|
|
border: 1.5px solid rgba(99,102,241,0.25);
|
|
transition: background .2s, box-shadow .2s, transform .2s;
|
|
text-decoration: none;
|
|
}
|
|
.btn-indigo-outline:hover {
|
|
background: rgba(99,102,241,0.14);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px rgba(99,102,241,0.2);
|
|
}
|
|
|
|
/* ════════════ CTA BANNER ════════════ */
|
|
.cta-banner {
|
|
background: var(--navy); padding: 88px 0;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.cta-banner::before {
|
|
content: ''; position: absolute; inset: 0;
|
|
background:
|
|
radial-gradient(ellipse at 30% 50%, rgba(99,102,241,0.2) 0%, transparent 60%),
|
|
radial-gradient(ellipse at 70% 50%, rgba(249,115,22,0.15) 0%, transparent 60%);
|
|
}
|
|
.cta-inner { position: relative; z-index: 1; text-align: center; }
|
|
.cta-pill {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.25);
|
|
border-radius: 999px; padding: 6px 16px; margin-bottom: 24px;
|
|
font-size: 13px; font-weight: 600; color: #4ade80;
|
|
}
|
|
.cta-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
|
|
.cta-title {
|
|
font-size: clamp(28px, 4.5vw, 52px);
|
|
font-weight: 900; color: var(--white);
|
|
letter-spacing: -0.03em; margin-bottom: 16px; line-height: 1.1;
|
|
}
|
|
.cta-title .grad {
|
|
background: linear-gradient(135deg, var(--indigo2), var(--orange2));
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.cta-sub {
|
|
font-size: 17px; color: rgba(255,255,255,0.55);
|
|
max-width: 480px; margin: 0 auto 36px; line-height: 1.7;
|
|
}
|
|
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
|
|
.cta-note { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,0.3); }
|
|
|
|
/* ════════════ CONTACT / WAITLIST ════════════ */
|
|
.waitlist { padding: 88px 0; background: var(--white); }
|
|
.waitlist-header { text-align: center; margin-bottom: 52px; }
|
|
.waitlist-header .section-sub {
|
|
font-size: 17px; color: var(--gray500);
|
|
max-width: 480px; margin: 12px auto 0; line-height: 1.75;
|
|
}
|
|
|
|
.waitlist-form-wrap {
|
|
max-width: 600px; margin: 0 auto;
|
|
background: var(--white);
|
|
border: 1px solid var(--gray200);
|
|
border-radius: 20px; padding: 40px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
|
.form-group { margin-bottom: 16px; }
|
|
.form-label { display: block; font-size: 13px; font-weight: 700; color: var(--navy2); margin-bottom: 6px; }
|
|
.form-input, .form-textarea {
|
|
width: 100%; font-family: inherit; font-size: 15px;
|
|
color: var(--text); background: var(--gray50);
|
|
border: 1.5px solid var(--gray200);
|
|
border-radius: 10px; padding: 12px 14px;
|
|
transition: border-color .15s, box-shadow .15s; outline: none;
|
|
}
|
|
.form-input:focus, .form-textarea:focus {
|
|
border-color: var(--indigo);
|
|
box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
|
|
}
|
|
.form-textarea { resize: vertical; min-height: 100px; }
|
|
.form-submit {
|
|
width: 100%; font-family: inherit; font-size: 15px; font-weight: 700;
|
|
color: var(--white);
|
|
background: linear-gradient(135deg, var(--orange), #ef4444);
|
|
border: none; border-radius: 10px; padding: 14px;
|
|
cursor: pointer; transition: transform .2s, box-shadow .2s;
|
|
box-shadow: 0 4px 20px rgba(249,115,22,0.35);
|
|
margin-top: 4px;
|
|
}
|
|
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(249,115,22,0.45); }
|
|
|
|
/* ════════════ FOOTER ════════════ */
|
|
.footer { background: var(--navy); padding: 72px 0 32px; }
|
|
.footer-main {
|
|
display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr;
|
|
gap: 48px; margin-bottom: 56px;
|
|
}
|
|
.footer-logo-img { height: 65px; width: auto; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: 0.8; }
|
|
.footer-desc { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 24px; }
|
|
.footer-contact-link {
|
|
display: flex; align-items: center; gap: 8px;
|
|
font-size: 13px; color: rgba(255,255,255,0.4);
|
|
margin-bottom: 8px; transition: color .15s;
|
|
}
|
|
.footer-contact-link:hover { color: var(--white); }
|
|
.footer-col-title {
|
|
font-size: 12px; font-weight: 700; text-transform: uppercase;
|
|
letter-spacing: .1em; color: var(--white); margin-bottom: 20px;
|
|
}
|
|
.footer-links { display: flex; flex-direction: column; gap: 10px; }
|
|
.footer-link { font-size: 14px; color: rgba(255,255,255,0.65); transition: color .15s; }
|
|
.footer-link:hover { color: var(--white); }
|
|
.footer-bottom {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding-top: 28px;
|
|
border-top: 1px solid rgba(255,255,255,0.08);
|
|
font-size: 13px; color: rgba(255,255,255,0.3);
|
|
}
|
|
.footer-bottom-links { display: flex; gap: 20px; }
|
|
|
|
/* ════════════ RESPONSIVE ════════════ */
|
|
@media (max-width: 1024px) {
|
|
.tools-grid { grid-template-columns: 1fr 1fr; }
|
|
.footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.mp-hero { padding: 36px 0 28px; }
|
|
.mp-h1 { font-size: 28px; }
|
|
.tools-grid { grid-template-columns: 1fr; }
|
|
.mp-stats { gap: 18px; }
|
|
.form-row { grid-template-columns: 1fr; }
|
|
.footer-main { grid-template-columns: 1fr; }
|
|
.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script src="/shared-header.js"></script>
|
|
|
|
<main id="main-content">
|
|
|
|
<!-- ══════════════════════════════════════ HERO -->
|
|
<section class="mp-hero">
|
|
<div class="hero-orb hero-orb-1"></div>
|
|
<div class="hero-orb hero-orb-2"></div>
|
|
<div class="hero-orb hero-orb-3"></div>
|
|
|
|
<div class="container">
|
|
<div class="mp-hero-inner">
|
|
<div class="mp-pill">
|
|
<span class="mp-pill-dot"></span>
|
|
Growing toolkit — new tools ship every month
|
|
</div>
|
|
|
|
<h1 class="mp-h1">
|
|
AI Tools Built for<br>
|
|
<span class="grad">Real Business Results</span>
|
|
</h1>
|
|
|
|
<p class="mp-sub">
|
|
From free site audits to product intelligence — every tool is powered by AI and built to save time, cut guesswork, and drive measurable growth.
|
|
</p>
|
|
|
|
<div class="mp-stats">
|
|
<span class="mp-stat">
|
|
<span class="mp-stat-dot" style="background:#22c55e;"></span>
|
|
1 Free Live Tool
|
|
</span>
|
|
<span class="mp-stat">
|
|
<span class="mp-stat-dot" style="background:#6366f1;"></span>
|
|
1 AI Service
|
|
</span>
|
|
<span class="mp-stat">
|
|
<span class="mp-stat-dot" style="background:#a855f7;"></span>
|
|
More Coming Soon
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════════════════════════════════════ FILTER TABS -->
|
|
<div class="filter-section">
|
|
<div class="container">
|
|
<div class="filter-inner">
|
|
<button class="filter-tab active" data-filter="all">
|
|
All Tools <span class="filter-count">2</span>
|
|
</button>
|
|
<button class="filter-tab" data-filter="free-tool">
|
|
Free Tools <span class="filter-count">1</span>
|
|
</button>
|
|
<button class="filter-tab" data-filter="ai-service">
|
|
AI Services <span class="filter-count">1</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ══════════════════════════════════════ TOOLS GRID -->
|
|
<section class="tools-section">
|
|
<div class="container">
|
|
|
|
<div class="tools-grid" id="tools-grid">
|
|
|
|
<!-- ── 1. AI Site Auditor — FREE · LIVE ── -->
|
|
<div class="tool-card featured" data-cat="free-tool">
|
|
<span class="tool-badge badge-live">Free · Live</span>
|
|
<div class="tool-icon" style="background:rgba(99,102,241,0.2);color:#818cf8;">🔍</div>
|
|
<div class="tool-title">AI Site Auditor</div>
|
|
<div class="tool-desc">
|
|
See exactly how ChatGPT, Perplexity, and Google AI see your website. GEO + SEO audit with prioritised fixes — in under 5 minutes, free.
|
|
</div>
|
|
<ul class="tool-features">
|
|
<li>AI Visibility Score (GEO)</li>
|
|
<li>Full SEO health check</li>
|
|
<li>Schema & structured data audit</li>
|
|
<li>Prioritised fix recommendations</li>
|
|
</ul>
|
|
<div class="tool-divider"></div>
|
|
<div class="tool-cta">
|
|
<a href="https://marketplace.quantumtaskai.com" class="tool-cta-btn btn-green">Run Free Audit →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── 2. Marketplace Listing Audit — AI SERVICE ── -->
|
|
<div class="tool-card" data-cat="ai-service">
|
|
<span class="tool-badge badge-service">AI Service</span>
|
|
<div class="tool-icon" style="background:rgba(249,115,22,0.1);color:#f97316;">📦</div>
|
|
<div class="tool-title">Marketplace Listing Audit</div>
|
|
<div class="tool-desc">
|
|
Paste your product details — get AI-rewritten copy, live Google Trends keyword insights, competitor analysis, and a full PDF report emailed to you. 50 AED flat.
|
|
</div>
|
|
<ul class="tool-features">
|
|
<li>AI-rewritten title, bullets & description</li>
|
|
<li>Live Google Trends keyword insights</li>
|
|
<li>Competitor landscape analysis</li>
|
|
<li>Supports Noon, Amazon UAE & Etsy</li>
|
|
</ul>
|
|
<div class="tool-divider"></div>
|
|
<div class="tool-cta">
|
|
<a href="https://marketplace.quantumtaskai.com/marketplace-audit/" class="tool-cta-btn btn-indigo-solid">Start Audit →</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /tools-grid -->
|
|
|
|
<!-- More coming banner -->
|
|
<div class="coming-banner">
|
|
<div class="coming-banner-title">More tools on the roadmap ✦</div>
|
|
<div class="coming-banner-text">
|
|
We ship new AI tools every month. Join the waitlist below to get early access before each public launch.
|
|
</div>
|
|
<a href="#waitlist" class="btn-indigo-outline">Join the Waitlist →</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════════════════════════════════════ CTA BANNER -->
|
|
<section class="cta-banner">
|
|
<div class="container">
|
|
<div class="cta-inner">
|
|
<div class="cta-pill">
|
|
<span class="cta-pill-dot"></span>
|
|
Free — no credit card required
|
|
</div>
|
|
<h2 class="cta-title">
|
|
Start with the free audit.<br>
|
|
<span class="grad">Results in under 5 minutes.</span>
|
|
</h2>
|
|
<p class="cta-sub">No setup, no account needed. Get a full AI + SEO report for your site, free.</p>
|
|
<div class="cta-buttons">
|
|
<a href="https://marketplace.quantumtaskai.com" class="btn btn-primary">Run My Free Audit →</a>
|
|
<a href="#waitlist" class="btn btn-ghost">Talk to an Expert</a>
|
|
</div>
|
|
<p class="cta-note">Or email us at <a href="mailto:info@quantumtaskai.com" style="color:rgba(255,255,255,0.85);text-decoration:underline;">info@quantumtaskai.com</a></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════════════════════════════════════ WAITLIST / CONTACT -->
|
|
<section id="waitlist" class="waitlist">
|
|
<div class="container">
|
|
<div class="waitlist-header">
|
|
<p class="section-label" style="justify-content:center;">Early Access</p>
|
|
<h2 class="section-title">Get notified when<br>new tools launch</h2>
|
|
<p class="section-sub">Tell us which tool you're most interested in and we'll reach out before the public launch — early users get priority access.</p>
|
|
</div>
|
|
|
|
<div class="waitlist-form-wrap">
|
|
<form method="POST" action="https://formsubmit.co/info@quantumtaskai.com">
|
|
<input type="hidden" name="_subject" value="Marketplace — early access request" />
|
|
<input type="hidden" name="_template" value="table" />
|
|
<input type="hidden" name="_captcha" value="false" />
|
|
<input type="text" name="_honey" style="display:none" />
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Full Name *</label>
|
|
<input class="form-input" type="text" name="name" required maxlength="100" placeholder="Your name" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Email *</label>
|
|
<input class="form-input" type="email" name="email" required maxlength="254" placeholder="you@company.com" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Company</label>
|
|
<input class="form-input" type="text" name="company" maxlength="100" placeholder="Your company name" />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Which tool are you most interested in? *</label>
|
|
<textarea class="form-input form-textarea" name="message" required minlength="5" maxlength="500"
|
|
placeholder="e.g. Product Info Enhancer — we sell on Amazon and need better listings with search trend data…"></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="form-submit">Request Early Access →</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- ══════════════════════════════════════ FOOTER -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-main">
|
|
<div>
|
|
<img src="img/logo.png" alt="Quantum Tasks AI" class="footer-logo-img" width="217" height="65" />
|
|
<p class="footer-desc">AI-powered automation, cybersecurity, and digital growth — built for businesses ready to move faster and compete smarter.</p>
|
|
<a href="mailto:info@quantumtaskai.com" class="footer-contact-link">✉ info@quantumtaskai.com</a>
|
|
<span class="footer-contact-link">📍 Dubai, UAE</span>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-title">Free Tools</div>
|
|
<div class="footer-links">
|
|
<a href="https://marketplace.quantumtaskai.com" class="footer-link">AI Site Auditor</a>
|
|
<a href="#waitlist" class="footer-link" style="opacity:0.5;">Product Info Enhancer</a>
|
|
<a href="#waitlist" class="footer-link" style="opacity:0.5;">AI Blog Writer</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-title">Services</div>
|
|
<div class="footer-links">
|
|
<a href="digital-branding.html" class="footer-link">AI Digital Branding</a>
|
|
<a href="https://quantumtaskai.com/#services" class="footer-link">Cybersecurity</a>
|
|
<a href="https://quantumtaskai.com/#services" class="footer-link">AI Automation</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-title">Company</div>
|
|
<div class="footer-links">
|
|
<a href="https://quantumtaskai.com/#about" class="footer-link">About Us</a>
|
|
<a href="https://blog.quantumtaskai.com/" class="footer-link">Blog</a>
|
|
<a href="https://quantumtaskai.com/#contact" class="footer-link">Contact</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<span>© 2025 Quantum Task AI LLC FZ · Dubai, UAE</span>
|
|
<div class="footer-bottom-links">
|
|
<a href="privacy.html" class="footer-link">Privacy Policy</a>
|
|
<a href="terms.html" class="footer-link">Terms of Service</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Filter tabs
|
|
const tabs = document.querySelectorAll('.filter-tab');
|
|
const cards = document.querySelectorAll('.tool-card');
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
|
|
const filter = tab.dataset.filter;
|
|
cards.forEach(card => {
|
|
const show = filter === 'all' || card.dataset.cat === filter;
|
|
card.style.display = show ? 'flex' : 'none';
|
|
if (show) {
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// Scroll fade-in on initial load
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(el => {
|
|
if (el.isIntersecting) {
|
|
el.target.style.opacity = '1';
|
|
el.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, { threshold: 0.08 });
|
|
|
|
cards.forEach(el => {
|
|
el.style.opacity = '0';
|
|
el.style.transform = 'translateY(20px)';
|
|
el.style.transition = 'opacity .5s ease, transform .5s ease';
|
|
observer.observe(el);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|