Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | index.html |
| Date | Not specified in source |
| Path or archive member | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/deploy_69810eb5563c0cf3e4c27795/index.html |
| Original SHA-256 | dbf9fb0b141565bdeaaf8076528d4f811309b46c26d2434cd8206442029f5177 |
| Reading-copy SHA-256 | 49f220eccdac64449be7fe64284261f4b358eade13c5d1c08f0e07eb7c549f96 |
| Archive source | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/deploy_69810eb5563c0cf3e4c27795/index.html"} |
Every recorded occurrence
These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.
| Original record | Branch or archive | Revision / identifier | Original location |
|---|---|---|---|
| index.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/deploy_69810eb5563c0cf3e4c27795/index.html"} | libsrc-69ff7917a1bb | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/deploy_69810eb5563c0cf3e4c27795/index.html |
| e267899221df857620f99cd22bf3c580c3d334c0 | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/.content_store/e2/e267899221df857620f99cd22bf3c580c3d334c0"} | libsrc-14bfdc190dfa | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy__675a8388-d7a2-4f94-be5f-d98cf4a19694/originals/.content_store/e2/e267899221df857620f99cd22bf3c580c3d334c0 |
Recovered source transcript
Download complete source text ↓1,798 lines · 60.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>That AI Guy - AI Development & Tools Platform</title>
<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@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--border-color: #30363d;
--text-primary: #f0f6fc;
--text-secondary: #8b949e;
--text-muted: #6e7681;
--cyan: #58a6ff;
--green: #3fb950;
--orange: #d29922;
--purple: #a371f7;
--red: #f85149;
--pink: #db61a2;
--syntax-keyword: #ff7b72;
--syntax-string: #a5d6ff;
--syntax-function: #d2a8ff;
--syntax-variable: #ffa657;
--syntax-comment: #8b949e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
code, pre, .mono {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
a {
color: var(--cyan);
text-decoration: none;
transition: all 0.2s ease;
}
a:hover {
text-decoration: underline;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Gradient Border Utility */
.gradient-border {
position: relative;
background: var(--bg-secondary);
border-radius: 12px;
}
.gradient-border::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 13px;
background: linear-gradient(135deg, var(--cyan), var(--green), var(--orange));
z-index: -1;
opacity: 0.5;
transition: opacity 0.3s ease;
}
.gradient-border:hover::before {
opacity: 1;
}
/* Glow Effect */
.glow {
box-shadow: 0 0 40px rgba(88, 166, 255, 0.15);
}
.glow-green {
box-shadow: 0 0 40px rgba(63, 185, 80, 0.15);
}
.glow-orange {
box-shadow: 0 0 40px rgba(210, 153, 34, 0.15);
}
/* Navigation */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(13, 17, 23, 0.8);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
max-width: 1200px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 1.25rem;
color: var(--text-primary);
}
.logo-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--cyan), var(--green));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.nav-links a {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--text-primary);
text-decoration: none;
}
.nav-cta {
display: flex;
align-items: center;
gap: 12px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--cyan), #1f6feb);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(88, 166, 255, 0.3);
text-decoration: none;
}
.btn-secondary {
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: var(--border-color);
text-decoration: none;
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
}
.btn-ghost:hover {
color: var(--text-primary);
text-decoration: none;
}
/* Hero Section */
.hero {
padding: 160px 0 100px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(88, 166, 255, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-text {
position: relative;
z-index: 1;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(63, 185, 80, 0.1);
border: 1px solid rgba(63, 185, 80, 0.3);
border-radius: 100px;
color: var(--green);
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 24px;
}
.hero-badge::before {
content: '';
width: 8px;
height: 8px;
background: var(--green);
border-radius: 50%;
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.hero h1 {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
background: linear-gradient(135deg, var(--text-primary) 0%, var(--cyan) 50%, var(--green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-tagline {
font-size: 1.25rem;
color: var(--text-secondary);
margin-bottom: 32px;
max-width: 500px;
}
.hero-tagline strong {
color: var(--text-primary);
}
.hero-cta {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 48px;
}
.hero-stats {
display: flex;
gap: 40px;
}
.stat {
text-align: left;
}
.stat-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
}
.stat-label {
font-size: 0.85rem;
color: var(--text-muted);
}
/* Terminal Animation */
.terminal-wrapper {
position: relative;
}
.terminal {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.terminal-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-color);
}
.terminal-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.terminal-dot.red { background: var(--red); }
.terminal-dot.yellow { background: var(--orange); }
.terminal-dot.green { background: var(--green); }
.terminal-title {
flex: 1;
text-align: center;
font-size: 0.8rem;
color: var(--text-muted);
}
.terminal-body {
padding: 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.9rem;
line-height: 1.8;
min-height: 300px;
}
.terminal-line {
display: flex;
margin-bottom: 8px;
}
.terminal-prompt {
color: var(--green);
margin-right: 12px;
}
.terminal-command {
color: var(--text-primary);
}
.terminal-output {
color: var(--text-secondary);
margin-left: 24px;
}
.terminal-cursor {
display: inline-block;
width: 10px;
height: 20px;
background: var(--cyan);
animation: blink 1s step-end infinite;
vertical-align: middle;
margin-left: 4px;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.typing-text {
overflow: hidden;
white-space: nowrap;
animation: typing 2s steps(40) forwards;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
/* Tools Section */
.tools-section {
padding: 100px 0;
background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-label {
display: inline-block;
padding: 6px 12px;
background: rgba(88, 166, 255, 0.1);
border: 1px solid rgba(88, 166, 255, 0.3);
border-radius: 6px;
color: var(--cyan);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 16px;
}
.section-desc {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.tool-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 32px 24px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.tool-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--cyan), var(--green));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.tool-card:hover {
transform: translateY(-8px);
border-color: var(--cyan);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.tool-card:hover::before {
transform: scaleX(1);
}
.tool-icon {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
}
.tool-icon.chat { background: linear-gradient(135deg, rgba(88, 166, 255, 0.2), rgba(88, 166, 255, 0.1)); color: var(--cyan); }
.tool-icon.code { background: linear-gradient(135deg, rgba(63, 185, 80, 0.2), rgba(63, 185, 80, 0.1)); color: var(--green); }
.tool-icon.image { background: linear-gradient(135deg, rgba(163, 113, 247, 0.2), rgba(163, 113, 247, 0.1)); color: var(--purple); }
.tool-icon.voice { background: linear-gradient(135deg, rgba(210, 153, 34, 0.2), rgba(210, 153, 34, 0.1)); color: var(--orange); }
.tool-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 12px;
}
.tool-card p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 20px;
}
.tool-features {
list-style: none;
}
.tool-features li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 8px;
}
.tool-features li::before {
content: '>';
color: var(--green);
font-family: 'JetBrains Mono', monospace;
}
/* API Docs Section */
.api-section {
padding: 100px 0;
background: var(--bg-secondary);
}
.api-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
.api-info h2 {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 20px;
}
.api-info p {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 32px;
}
.api-endpoints {
list-style: none;
}
.api-endpoint {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 12px;
transition: all 0.2s ease;
}
.api-endpoint:hover {
border-color: var(--cyan);
}
.api-method {
padding: 4px 10px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
font-weight: 600;
}
.api-method.get { background: rgba(63, 185, 80, 0.2); color: var(--green); }
.api-method.post { background: rgba(88, 166, 255, 0.2); color: var(--cyan); }
.api-path {
font-family: 'JetBrains Mono', monospace;
font-size: 0.9rem;
color: var(--text-primary);
}
.code-block {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
}
.code-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-color);
}
.code-lang {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--text-muted);
}
.code-lang-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--orange);
}
.copy-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-secondary);
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s ease;
}
.copy-btn:hover {
background: var(--border-color);
color: var(--text-primary);
}
.copy-btn.copied {
background: rgba(63, 185, 80, 0.2);
border-color: var(--green);
color: var(--green);
}
.code-content {
padding: 20px;
overflow-x: auto;
}
.code-content pre {
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
line-height: 1.7;
}
.code-content .keyword { color: var(--syntax-keyword); }
.code-content .string { color: var(--syntax-string); }
.code-content .function { color: var(--syntax-function); }
.code-content .variable { color: var(--syntax-variable); }
.code-content .comment { color: var(--syntax-comment); }
.code-content .number { color: var(--cyan); }
/* Live Demo Section */
.demo-section {
padding: 100px 0;
background: var(--bg-primary);
}
.demo-container {
max-width: 800px;
margin: 0 auto;
}
.demo-window {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.demo-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-color);
}
.demo-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.demo-title-icon {
width: 24px;
height: 24px;
background: linear-gradient(135deg, var(--cyan), var(--green));
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.demo-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--green);
}
.demo-status::before {
content: '';
width: 8px;
height: 8px;
background: var(--green);
border-radius: 50%;
}
.demo-body {
padding: 24px;
min-height: 400px;
}
.demo-messages {
margin-bottom: 24px;
}
.demo-message {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.demo-avatar {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
flex-shrink: 0;
}
.demo-avatar.user {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
}
.demo-avatar.ai {
background: linear-gradient(135deg, var(--cyan), var(--green));
}
.demo-bubble {
flex: 1;
}
.demo-bubble-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.demo-name {
font-weight: 600;
font-size: 0.9rem;
}
.demo-time {
font-size: 0.75rem;
color: var(--text-muted);
}
.demo-text {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
}
.demo-text code {
background: var(--bg-tertiary);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
color: var(--cyan);
}
.demo-input-area {
display: flex;
gap: 12px;
padding: 16px;
background: var(--bg-tertiary);
border-radius: 12px;
}
.demo-input {
flex: 1;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 12px 16px;
color: var(--text-primary);
font-size: 0.95rem;
font-family: inherit;
}
.demo-input:focus {
outline: none;
border-color: var(--cyan);
}
.demo-input::placeholder {
color: var(--text-muted);
}
.demo-send {
padding: 12px 24px;
background: linear-gradient(135deg, var(--cyan), #1f6feb);
border: none;
border-radius: 8px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.demo-send:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(88, 166, 255, 0.3);
}
/* Contribution Graph */
.activity-section {
padding: 80px 0;
background: var(--bg-secondary);
}
.activity-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.activity-title {
font-size: 1.25rem;
font-weight: 600;
}
.activity-legend {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: var(--text-muted);
}
.legend-scale {
display: flex;
gap: 3px;
}
.legend-box {
width: 12px;
height: 12px;
border-radius: 2px;
}
.contribution-graph {
display: flex;
gap: 3px;
overflow-x: auto;
padding-bottom: 16px;
}
.contribution-week {
display: flex;
flex-direction: column;
gap: 3px;
}
.contribution-day {
width: 12px;
height: 12px;
border-radius: 2px;
background: var(--bg-tertiary);
}
.contribution-day.level-1 { background: rgba(63, 185, 80, 0.25); }
.contribution-day.level-2 { background: rgba(63, 185, 80, 0.5); }
.contribution-day.level-3 { background: rgba(63, 185, 80, 0.75); }
.contribution-day.level-4 { background: var(--green); }
/* Pricing Section */
.pricing-section {
padding: 100px 0;
background: var(--bg-primary);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 60px;
}
.pricing-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 40px 32px;
position: relative;
transition: all 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-8px);
}
.pricing-card.featured {
border-color: var(--cyan);
box-shadow: 0 0 60px rgba(88, 166, 255, 0.15);
}
.pricing-card.featured::before {
content: 'Most Popular';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 6px 16px;
background: linear-gradient(135deg, var(--cyan), #1f6feb);
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pricing-tier {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 8px;
}
.pricing-desc {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 24px;
}
.pricing-price {
margin-bottom: 32px;
}
.pricing-amount {
font-size: 3rem;
font-weight: 700;
}
.pricing-period {
color: var(--text-muted);
font-size: 0.9rem;
}
.pricing-features {
list-style: none;
margin-bottom: 32px;
}
.pricing-features li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
color: var(--text-secondary);
font-size: 0.95rem;
border-bottom: 1px solid var(--border-color);
}
.pricing-features li:last-child {
border-bottom: none;
}
.pricing-features li::before {
content: '✓';
color: var(--green);
font-weight: 700;
}
.pricing-card .btn {
width: 100%;
justify-content: center;
}
/* Footer */
footer {
padding: 60px 0 30px;
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
margin-bottom: 60px;
}
.footer-brand .logo {
margin-bottom: 16px;
}
.footer-brand p {
color: var(--text-muted);
font-size: 0.9rem;
max-width: 280px;
margin-bottom: 24px;
}
.social-links {
display: flex;
gap: 12px;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.2s ease;
}
.social-link:hover {
background: var(--border-color);
color: var(--text-primary);
}
.footer-column h4 {
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 20px;
}
.footer-column ul {
list-style: none;
}
.footer-column li {
margin-bottom: 12px;
}
.footer-column a {
color: var(--text-secondary);
font-size: 0.9rem;
transition: color 0.2s ease;
}
.footer-column a:hover {
color: var(--text-primary);
text-decoration: none;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 30px;
border-top: 1px solid var(--border-color);
font-size: 0.85rem;
color: var(--text-muted);
}
.footer-legal {
display: flex;
gap: 24px;
}
.footer-legal a {
color: var(--text-muted);
}
.footer-legal a:hover {
color: var(--text-secondary);
}
/* Mobile Menu */
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.mobile-menu-btn span {
width: 24px;
height: 2px;
background: var(--text-primary);
transition: all 0.3s ease;
}
/* Responsive */
@media (max-width: 1024px) {
.hero-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-text {
order: 1;
}
.terminal-wrapper {
order: 2;
}
.hero-tagline {
margin: 0 auto 32px;
}
.hero-cta {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
.tools-grid {
grid-template-columns: repeat(2, 1fr);
}
.api-grid {
grid-template-columns: 1fr;
}
.pricing-grid {
grid-template-columns: 1fr;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.footer-content {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.nav-links, .nav-cta {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.hero h1 {
font-size: 2.5rem;
}
.tools-grid {
grid-template-columns: 1fr;
}
.hero-stats {
flex-direction: column;
gap: 20px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<div class="nav-content">
<a href="https://thataiguy.org" class="logo">
<div class="logo-icon">AI</div>
That AI Guy
</a>
<ul class="nav-links">
<li><a href="#tools">Tools</a></li>
<li><a href="#api">API</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="https://thataiguy.org">Blog</a></li>
</ul>
<div class="nav-cta">
<a href="#" class="btn btn-ghost">Sign In</a>
<a href="#pricing" class="btn btn-primary">Get Started</a>
</div>
<button class="mobile-menu-btn">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<div class="hero-badge">
<span>Now Available</span>
</div>
<h1>Build Smarter with AI-Powered Dev Tools</h1>
<p class="hero-tagline">
<strong>Built by developers, for developers.</strong> Access powerful AI models through a simple API. Ship faster with intelligent code assistance, generation, and automation.
</p>
<div class="hero-cta">
<a href="#pricing" class="btn btn-primary">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0L6.59 1.41 12.17 7H0v2h12.17l-5.58 5.59L8 16l8-8-8-8z"/></svg>
Start Building Free
</a>
<a href="#api" class="btn btn-secondary">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 4h12v1H4V4zm0 3h12v1H4V7zm0 3h12v1H4v-1zm0 3h8v1H4v-1zM0 4h2v1H0V4zm0 3h2v1H0V7zm0 3h2v1H0v-1zm0 3h2v1H0v-1z"/></svg>
View Documentation
</a>
</div>
<div class="hero-stats">
<div class="stat">
<div class="stat-value">50M+</div>
<div class="stat-label">API Requests / Day</div>
</div>
<div class="stat">
<div class="stat-value">12K+</div>
<div class="stat-label">Active Developers</div>
</div>
<div class="stat">
<div class="stat-value">99.9%</div>
<div class="stat-label">Uptime SLA</div>
</div>
</div>
</div>
<div class="terminal-wrapper">
<div class="terminal glow">
<div class="terminal-header">
<div class="terminal-dot red"></div>
<div class="terminal-dot yellow"></div>
<div class="terminal-dot green"></div>
<div class="terminal-title">Terminal - thatAIguy</div>
</div>
<div class="terminal-body" id="terminal-content">
<div class="terminal-line">
<span class="terminal-prompt">$</span>
<span class="terminal-command">npm install @thataiguy/sdk</span>
</div>
<div class="terminal-output">+ @thataiguy/sdk@2.4.1</div>
<div class="terminal-output">added 12 packages in 2.1s</div>
<br>
<div class="terminal-line">
<span class="terminal-prompt">$</span>
<span class="terminal-command">thataiguy init</span>
</div>
<div class="terminal-output" style="color: var(--green);">✔ API key configured</div>
<div class="terminal-output" style="color: var(--green);">✔ Project initialized</div>
<br>
<div class="terminal-line">
<span class="terminal-prompt">$</span>
<span class="terminal-command">thataiguy generate --model gpt-4</span>
</div>
<div class="terminal-output" style="color: var(--cyan);">Generating response...</div>
<div class="terminal-output" style="color: var(--green);">✔ Response generated in 1.2s</div>
<br>
<div class="terminal-line">
<span class="terminal-prompt">$</span>
<span class="terminal-cursor"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Tools Section -->
<section class="tools-section" id="tools">
<div class="container">
<div class="section-header">
<span class="section-label">AI Tools</span>
<h2 class="section-title">Everything You Need to Build with AI</h2>
<p class="section-desc">A complete suite of AI-powered tools designed to accelerate your development workflow.</p>
</div>
<div class="tools-grid">
<div class="tool-card">
<div class="tool-icon chat">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/></svg>
</div>
<h3>AI Chat</h3>
<p>Conversational AI with context awareness and memory for complex multi-turn dialogues.</p>
<ul class="tool-features">
<li>Multi-model support</li>
<li>Streaming responses</li>
<li>Context management</li>
<li>Custom personas</li>
</ul>
</div>
<div class="tool-card">
<div class="tool-icon code">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
</div>
<h3>Code Assistant</h3>
<p>Intelligent code completion, refactoring, and generation across 50+ programming languages.</p>
<ul class="tool-features">
<li>Auto-completion</li>
<li>Bug detection</li>
<li>Code explanation</li>
<li>Test generation</li>
</ul>
</div>
<div class="tool-card">
<div class="tool-icon image">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
</div>
<h3>Image Generator</h3>
<p>Create stunning visuals from text descriptions using state-of-the-art diffusion models.</p>
<ul class="tool-features">
<li>Text-to-image</li>
<li>Image editing</li>
<li>Style transfer</li>
<li>Upscaling</li>
</ul>
</div>
<div class="tool-card">
<div class="tool-icon voice">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
</div>
<h3>Voice AI</h3>
<p>Speech-to-text, text-to-speech, and voice cloning with natural sounding results.</p>
<ul class="tool-features">
<li>Real-time transcription</li>
<li>Voice synthesis</li>
<li>Speaker diarization</li>
<li>Accent support</li>
</ul>
</div>
</div>
</div>
</section>
<!-- API Documentation Section -->
<section class="api-section" id="api">
<div class="container">
<div class="api-grid">
<div class="api-info">
<span class="section-label">API Reference</span>
<h2>Simple, Powerful API</h2>
<p>Get started in minutes with our RESTful API. Comprehensive SDKs available for Python, JavaScript, Go, and more.</p>
<ul class="api-endpoints">
<li class="api-endpoint">
<span class="api-method post">POST</span>
<span class="api-path">/v1/chat/completions</span>
</li>
<li class="api-endpoint">
<span class="api-method post">POST</span>
<span class="api-path">/v1/images/generate</span>
</li>
<li class="api-endpoint">
<span class="api-method post">POST</span>
<span class="api-path">/v1/audio/transcribe</span>
</li>
<li class="api-endpoint">
<span class="api-method get">GET</span>
<span class="api-path">/v1/models</span>
</li>
</ul>
<a href="#" class="btn btn-secondary" style="margin-top: 24px;">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 4h12v1H4V4zm0 3h12v1H4V7zm0 3h12v1H4v-1zm0 3h8v1H4v-1zM0 4h2v1H0V4zm0 3h2v1H0V7zm0 3h2v1H0v-1zm0 3h2v1H0v-1z"/></svg>
Full Documentation
</a>
</div>
<div class="code-block glow">
<div class="code-header">
<div class="code-lang">
<div class="code-lang-dot"></div>
<span>JavaScript</span>
</div>
<button class="copy-btn" onclick="copyCode(this)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
Copy
</button>
</div>
<div class="code-content">
<pre><code><span class="keyword">import</span> { ThatAIGuy } <span class="keyword">from</span> <span class="string">'@thataiguy/sdk'</span>;
<span class="keyword">const</span> <span class="variable">client</span> = <span class="keyword">new</span> <span class="function">ThatAIGuy</span>({
<span class="variable">apiKey</span>: process.env.<span class="variable">THATAIGUY_API_KEY</span>
});
<span class="keyword">const</span> <span class="variable">response</span> = <span class="keyword">await</span> client.chat.<span class="function">create</span>({
<span class="variable">model</span>: <span class="string">'gpt-4-turbo'</span>,
<span class="variable">messages</span>: [
{
<span class="variable">role</span>: <span class="string">'user'</span>,
<span class="variable">content</span>: <span class="string">'Explain quantum computing'</span>
}
],
<span class="variable">stream</span>: <span class="keyword">true</span>
});
<span class="keyword">for await</span> (<span class="keyword">const</span> <span class="variable">chunk</span> <span class="keyword">of</span> response) {
process.stdout.<span class="function">write</span>(chunk.content);
}</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Live Demo Section -->
<section class="demo-section" id="demo">
<div class="container">
<div class="section-header">
<span class="section-label">Try It Now</span>
<h2 class="section-title">Experience AI in Action</h2>
<p class="section-desc">See how our AI responds to prompts in real-time. No signup required.</p>
</div>
<div class="demo-container">
<div class="demo-window gradient-border glow">
<div class="demo-header">
<div class="demo-title">
<div class="demo-title-icon">AI</div>
<span>AI Chat Demo</span>
</div>
<div class="demo-status">Online</div>
</div>
<div class="demo-body">
<div class="demo-messages" id="demo-messages">
<div class="demo-message">
<div class="demo-avatar user">U</div>
<div class="demo-bubble">
<div class="demo-bubble-header">
<span class="demo-name">You</span>
<span class="demo-time">just now</span>
</div>
<div class="demo-text">Write a Python function to calculate the Fibonacci sequence</div>
</div>
</div>
<div class="demo-message">
<div class="demo-avatar ai">AI</div>
<div class="demo-bubble">
<div class="demo-bubble-header">
<span class="demo-name">That AI Guy</span>
<span class="demo-time">just now</span>
</div>
<div class="demo-text">
Here's an efficient Python function using dynamic programming:
<br><br>
<code>def fibonacci(n):</code><br>
<code> if n <= 1: return n</code><br>
<code> fib = [0, 1]</code><br>
<code> for i in range(2, n + 1):</code><br>
<code> fib.append(fib[i-1] + fib[i-2])</code><br>
<code> return fib[n]</code>
<br><br>
This runs in O(n) time with O(n) space. Want me to show a more memory-efficient version?
</div>