Created
February 9, 2026 10:12
-
-
Save unforced/39e9d005cd6e9bfcf7337aa64da4cdac to your computer and use it in GitHub Desktop.
typif.ai landing page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>typif.ai — See what's really in there.</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=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-deep: #0a0908; | |
| --bg-surface: #131210; | |
| --bg-card: #1a1916; | |
| --bg-card-hover: #21201c; | |
| --amber: #d4a053; | |
| --amber-bright: #e8b86d; | |
| --amber-dim: #8a6a3a; | |
| --amber-glow: rgba(212, 160, 83, 0.08); | |
| --amber-glow-strong: rgba(212, 160, 83, 0.15); | |
| --text-primary: #e8e4dc; | |
| --text-secondary: #9e9a90; | |
| --text-dim: #5e5b54; | |
| --border: rgba(212, 160, 83, 0.1); | |
| --border-strong: rgba(212, 160, 83, 0.2); | |
| --rose: #c47a7a; | |
| --sage: #7a9e7a; | |
| --sky: #7a8fc4; | |
| --lavender: #9e7ab8; | |
| --coral: #c4907a; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| background: var(--bg-deep); | |
| } | |
| body { | |
| font-family: 'DM Sans', sans-serif; | |
| background: var(--bg-deep); | |
| color: var(--text-primary); | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* ===== NOISE TEXTURE OVERLAY ===== */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); | |
| pointer-events: none; | |
| z-index: 9999; | |
| } | |
| /* ===== NAV ===== */ | |
| nav { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; | |
| z-index: 100; | |
| padding: 1.25rem 2.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| backdrop-filter: blur(20px); | |
| background: rgba(10, 9, 8, 0.8); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-logo { | |
| font-family: 'Instrument Serif', serif; | |
| font-size: 1.5rem; | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| letter-spacing: -0.02em; | |
| } | |
| .nav-logo span { | |
| color: var(--amber); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2.5rem; | |
| align-items: center; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| font-weight: 400; | |
| letter-spacing: 0.02em; | |
| transition: color 0.3s; | |
| } | |
| .nav-links a:hover { | |
| color: var(--text-primary); | |
| } | |
| .nav-cta { | |
| padding: 0.5rem 1.25rem; | |
| background: var(--amber); | |
| color: var(--bg-deep) !important; | |
| border-radius: 6px; | |
| font-weight: 500 !important; | |
| transition: background 0.3s, transform 0.2s !important; | |
| } | |
| .nav-cta:hover { | |
| background: var(--amber-bright) !important; | |
| transform: translateY(-1px); | |
| } | |
| /* ===== HERO ===== */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8rem 2.5rem 6rem; | |
| position: relative; | |
| text-align: center; | |
| } | |
| .hero-bg { | |
| position: absolute; | |
| inset: 0; | |
| overflow: hidden; | |
| } | |
| .hero-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 20%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 800px; | |
| height: 800px; | |
| background: radial-gradient(ellipse, rgba(212, 160, 83, 0.06) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero-label { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.4rem 1rem; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 100px; | |
| font-size: 0.8rem; | |
| color: var(--amber); | |
| letter-spacing: 0.05em; | |
| margin-bottom: 2.5rem; | |
| opacity: 0; | |
| animation: fadeUp 0.8s ease 0.2s forwards; | |
| } | |
| .hero-label::before { | |
| content: ''; | |
| width: 6px; | |
| height: 6px; | |
| background: var(--amber); | |
| border-radius: 50%; | |
| animation: pulse 2s ease infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| .hero h1 { | |
| font-family: 'Instrument Serif', serif; | |
| font-size: clamp(3.5rem, 8vw, 7rem); | |
| line-height: 1.05; | |
| letter-spacing: -0.03em; | |
| font-weight: 400; | |
| max-width: 900px; | |
| position: relative; | |
| opacity: 0; | |
| animation: fadeUp 0.8s ease 0.4s forwards; | |
| } | |
| .hero h1 em { | |
| font-style: italic; | |
| color: var(--amber); | |
| } | |
| .hero-sub { | |
| font-size: 1.2rem; | |
| color: var(--text-secondary); | |
| max-width: 520px; | |
| line-height: 1.7; | |
| margin-top: 1.75rem; | |
| font-weight: 300; | |
| opacity: 0; | |
| animation: fadeUp 0.8s ease 0.6s forwards; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 2.5rem; | |
| opacity: 0; | |
| animation: fadeUp 0.8s ease 0.8s forwards; | |
| } | |
| .btn-primary { | |
| padding: 0.875rem 2rem; | |
| background: var(--amber); | |
| color: var(--bg-deep); | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-decoration: none; | |
| font-family: 'DM Sans', sans-serif; | |
| } | |
| .btn-primary:hover { | |
| background: var(--amber-bright); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(212, 160, 83, 0.2); | |
| } | |
| .btn-secondary { | |
| padding: 0.875rem 2rem; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| border: 1px solid var(--border-strong); | |
| border-radius: 8px; | |
| font-size: 0.95rem; | |
| font-weight: 400; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-decoration: none; | |
| font-family: 'DM Sans', sans-serif; | |
| } | |
| .btn-secondary:hover { | |
| color: var(--text-primary); | |
| border-color: var(--text-dim); | |
| background: var(--amber-glow); | |
| } | |
| @keyframes fadeUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ===== DEMO SECTION ===== */ | |
| .demo { | |
| padding: 4rem 2.5rem 8rem; | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| .demo-container { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| opacity: 0; | |
| transform: translateY(40px); | |
| transition: all 0.8s ease; | |
| } | |
| .demo-container.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .demo-header { | |
| padding: 1rem 1.5rem; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .demo-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--text-dim); | |
| } | |
| .demo-dot:nth-child(1) { background: #c47a7a; } | |
| .demo-dot:nth-child(2) { background: #d4a053; } | |
| .demo-dot:nth-child(3) { background: #7a9e7a; } | |
| .demo-body { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| min-height: 420px; | |
| } | |
| .demo-input { | |
| padding: 2rem; | |
| border-right: 1px solid var(--border); | |
| position: relative; | |
| } | |
| .demo-input-label { | |
| font-size: 0.7rem; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| margin-bottom: 1rem; | |
| } | |
| .demo-text { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.78rem; | |
| line-height: 1.9; | |
| color: var(--text-secondary); | |
| } | |
| .demo-text .entry { | |
| padding: 0.4rem 0; | |
| border-bottom: 1px solid rgba(255,255,255,0.03); | |
| opacity: 0; | |
| animation: fadeIn 0.3s ease forwards; | |
| } | |
| .demo-text .entry:nth-child(1) { animation-delay: 1.2s; } | |
| .demo-text .entry:nth-child(2) { animation-delay: 1.4s; } | |
| .demo-text .entry:nth-child(3) { animation-delay: 1.6s; } | |
| .demo-text .entry:nth-child(4) { animation-delay: 1.8s; } | |
| .demo-text .entry:nth-child(5) { animation-delay: 2.0s; } | |
| .demo-text .entry:nth-child(6) { animation-delay: 2.2s; } | |
| .demo-text .entry:nth-child(7) { animation-delay: 2.4s; } | |
| .demo-text .entry:nth-child(8) { animation-delay: 2.6s; } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .demo-output { | |
| padding: 2rem; | |
| background: var(--bg-card); | |
| } | |
| .demo-output-label { | |
| font-size: 0.7rem; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| margin-bottom: 1.25rem; | |
| } | |
| .type-card { | |
| padding: 0.875rem 1rem; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| margin-bottom: 0.75rem; | |
| opacity: 0; | |
| transform: translateX(20px); | |
| transition: all 0.3s; | |
| } | |
| .type-card.visible { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .type-card:hover { | |
| border-color: var(--border-strong); | |
| background: var(--bg-card-hover); | |
| } | |
| .type-card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 0.4rem; | |
| } | |
| .type-card-name { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| } | |
| .type-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| } | |
| .type-card-count { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| } | |
| .type-card-bar { | |
| height: 3px; | |
| border-radius: 3px; | |
| background: var(--border); | |
| margin-top: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .type-card-bar-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| transition: width 1s ease; | |
| width: 0; | |
| } | |
| .type-card-bar-fill.animated { /* widths set inline */ } | |
| .type-card-examples { | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| line-height: 1.5; | |
| margin-top: 0.35rem; | |
| } | |
| /* ===== HOW IT WORKS ===== */ | |
| .how { | |
| padding: 8rem 2.5rem; | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| .section-label { | |
| font-size: 0.7rem; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--amber-dim); | |
| margin-bottom: 1rem; | |
| } | |
| .section-title { | |
| font-family: 'Instrument Serif', serif; | |
| font-size: clamp(2rem, 4vw, 3.25rem); | |
| letter-spacing: -0.02em; | |
| font-weight: 400; | |
| line-height: 1.15; | |
| max-width: 600px; | |
| } | |
| .section-title em { | |
| font-style: italic; | |
| color: var(--amber); | |
| } | |
| .steps { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1.5rem; | |
| margin-top: 4rem; | |
| } | |
| .step { | |
| padding: 2rem 1.5rem; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| transition: all 0.4s; | |
| position: relative; | |
| } | |
| .step:hover { | |
| border-color: var(--border-strong); | |
| background: var(--bg-card); | |
| transform: translateY(-4px); | |
| } | |
| .step-number { | |
| font-family: 'Instrument Serif', serif; | |
| font-size: 3rem; | |
| color: var(--amber-dim); | |
| line-height: 1; | |
| margin-bottom: 1.25rem; | |
| opacity: 0.5; | |
| } | |
| .step-title { | |
| font-size: 1.05rem; | |
| font-weight: 600; | |
| margin-bottom: 0.6rem; | |
| letter-spacing: -0.01em; | |
| } | |
| .step-desc { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| line-height: 1.65; | |
| font-weight: 300; | |
| } | |
| .step-arrow { | |
| position: absolute; | |
| right: -1.1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-dim); | |
| font-size: 1.2rem; | |
| z-index: 2; | |
| } | |
| .step:last-child .step-arrow { display: none; } | |
| /* ===== USE CASES ===== */ | |
| .usecases { | |
| padding: 4rem 2.5rem 8rem; | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| .usecase-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| margin-top: 4rem; | |
| } | |
| .usecase { | |
| padding: 2.25rem; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| transition: all 0.4s; | |
| } | |
| .usecase:hover { | |
| border-color: var(--border-strong); | |
| transform: translateY(-3px); | |
| } | |
| .usecase-icon { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| .usecase:nth-child(1) .usecase-icon { background: rgba(196, 122, 122, 0.12); } | |
| .usecase:nth-child(2) .usecase-icon { background: rgba(122, 158, 122, 0.12); } | |
| .usecase:nth-child(3) .usecase-icon { background: rgba(122, 143, 196, 0.12); } | |
| .usecase:nth-child(4) .usecase-icon { background: rgba(158, 122, 184, 0.12); } | |
| .usecase-title { | |
| font-size: 1.05rem; | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| letter-spacing: -0.01em; | |
| } | |
| .usecase-desc { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| line-height: 1.65; | |
| font-weight: 300; | |
| } | |
| .usecase-quote { | |
| margin-top: 1rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--border); | |
| font-family: 'Instrument Serif', serif; | |
| font-style: italic; | |
| font-size: 0.95rem; | |
| color: var(--amber-dim); | |
| line-height: 1.5; | |
| } | |
| /* ===== PRICING ===== */ | |
| .pricing { | |
| padding: 8rem 2.5rem; | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| .pricing-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1.5rem; | |
| margin-top: 4rem; | |
| } | |
| .price-card { | |
| padding: 2.5rem 2rem; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| transition: all 0.4s; | |
| position: relative; | |
| } | |
| .price-card:hover { | |
| border-color: var(--border-strong); | |
| transform: translateY(-4px); | |
| } | |
| .price-card.featured { | |
| border-color: var(--amber-dim); | |
| background: linear-gradient(180deg, rgba(212, 160, 83, 0.04) 0%, var(--bg-surface) 100%); | |
| } | |
| .price-badge { | |
| position: absolute; | |
| top: -0.7rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 0.25rem 0.875rem; | |
| background: var(--amber); | |
| color: var(--bg-deep); | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| letter-spacing: 0.05em; | |
| border-radius: 100px; | |
| text-transform: uppercase; | |
| } | |
| .price-name { | |
| font-size: 0.8rem; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| margin-bottom: 0.75rem; | |
| } | |
| .price-amount { | |
| font-family: 'Instrument Serif', serif; | |
| font-size: 3rem; | |
| letter-spacing: -0.03em; | |
| } | |
| .price-amount span { | |
| font-size: 1rem; | |
| color: var(--text-dim); | |
| font-family: 'DM Sans', sans-serif; | |
| } | |
| .price-desc { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-top: 0.5rem; | |
| margin-bottom: 2rem; | |
| line-height: 1.5; | |
| } | |
| .price-features { | |
| list-style: none; | |
| margin-bottom: 2rem; | |
| } | |
| .price-features li { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| padding: 0.5rem 0; | |
| border-bottom: 1px solid rgba(255,255,255,0.03); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| } | |
| .price-features li::before { | |
| content: '~'; | |
| color: var(--amber-dim); | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.8rem; | |
| } | |
| .price-btn { | |
| display: block; | |
| width: 100%; | |
| padding: 0.75rem; | |
| border-radius: 8px; | |
| border: 1px solid var(--border-strong); | |
| background: transparent; | |
| color: var(--text-primary); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-align: center; | |
| text-decoration: none; | |
| font-family: 'DM Sans', sans-serif; | |
| } | |
| .price-btn:hover { | |
| background: var(--amber-glow); | |
| border-color: var(--amber-dim); | |
| } | |
| .price-card.featured .price-btn { | |
| background: var(--amber); | |
| color: var(--bg-deep); | |
| border-color: var(--amber); | |
| font-weight: 600; | |
| } | |
| .price-card.featured .price-btn:hover { | |
| background: var(--amber-bright); | |
| } | |
| /* ===== CTA FOOTER ===== */ | |
| .cta-section { | |
| padding: 8rem 2.5rem; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .cta-section::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 800px; | |
| height: 400px; | |
| background: radial-gradient(ellipse, rgba(212, 160, 83, 0.05) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .cta-section h2 { | |
| font-family: 'Instrument Serif', serif; | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| letter-spacing: -0.03em; | |
| font-weight: 400; | |
| max-width: 650px; | |
| margin: 0 auto; | |
| line-height: 1.1; | |
| } | |
| .cta-section h2 em { | |
| font-style: italic; | |
| color: var(--amber); | |
| } | |
| .cta-section p { | |
| color: var(--text-secondary); | |
| margin-top: 1.25rem; | |
| font-size: 1.05rem; | |
| font-weight: 300; | |
| } | |
| .cta-section .btn-primary { | |
| margin-top: 2rem; | |
| display: inline-block; | |
| } | |
| /* ===== FOOTER ===== */ | |
| footer { | |
| padding: 3rem 2.5rem; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| } | |
| footer .nav-logo { | |
| font-size: 1.2rem; | |
| } | |
| footer p { | |
| font-size: 0.8rem; | |
| color: var(--text-dim); | |
| } | |
| /* ===== RESPONSIVE ===== */ | |
| @media (max-width: 900px) { | |
| .steps { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .step-arrow { display: none !important; } | |
| .pricing-grid { | |
| grid-template-columns: 1fr; | |
| max-width: 400px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| } | |
| @media (max-width: 700px) { | |
| nav { padding: 1rem 1.5rem; } | |
| .nav-links { gap: 1.25rem; } | |
| .nav-links li:not(:last-child) { display: none; } | |
| .hero { padding: 7rem 1.5rem 4rem; } | |
| .hero-sub { font-size: 1.05rem; } | |
| .demo-body { grid-template-columns: 1fr; } | |
| .demo-input { border-right: none; border-bottom: 1px solid var(--border); } | |
| .steps { grid-template-columns: 1fr; } | |
| .usecase-grid { grid-template-columns: 1fr; } | |
| .how, .usecases, .pricing, .demo, .cta-section { padding-left: 1.5rem; padding-right: 1.5rem; } | |
| footer { flex-direction: column; gap: 1rem; text-align: center; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <nav> | |
| <a href="#" class="nav-logo">typif<span>.ai</span></a> | |
| <ul class="nav-links"> | |
| <li><a href="#how">How it works</a></li> | |
| <li><a href="#usecases">Use cases</a></li> | |
| <li><a href="#pricing">Pricing</a></li> | |
| <li><a href="#cta" class="nav-cta">Get started</a></li> | |
| </ul> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="hero"> | |
| <div class="hero-bg"></div> | |
| <div class="hero-label">Now in early access</div> | |
| <h1>See what's <em>really</em> in there.</h1> | |
| <p class="hero-sub">Upload your unstructured text — journals, transcripts, notes, conversations. Typif.ai discovers the hidden themes and patterns you couldn't see yourself.</p> | |
| <div class="hero-actions"> | |
| <a href="#cta" class="btn-primary">Try it free</a> | |
| <a href="#how" class="btn-secondary">See how it works</a> | |
| </div> | |
| </section> | |
| <!-- DEMO --> | |
| <section class="demo"> | |
| <div class="demo-container" id="demoContainer"> | |
| <div class="demo-header"> | |
| <div class="demo-dot"></div> | |
| <div class="demo-dot"></div> | |
| <div class="demo-dot"></div> | |
| </div> | |
| <div class="demo-body"> | |
| <div class="demo-input"> | |
| <div class="demo-input-label">Your raw data</div> | |
| <div class="demo-text"> | |
| <div class="entry">Feeling stuck on the rebrand again today. Can't decide on direction. Met with Sara about it...</div> | |
| <div class="entry">Great call with investor. They want to see more traction before Series A. Need to focus on growth...</div> | |
| <div class="entry">Couldn't sleep last night. Thinking about whether this is the right path. Morning run helped clear my head...</div> | |
| <div class="entry">Workshop went well. The team is aligned on Q2 goals. Shipping the new onboarding flow next week...</div> | |
| <div class="entry">Dinner with Mom. She asked about the company again. Hard to explain what we do sometimes...</div> | |
| <div class="entry">Breakthrough on the product — realized we should cut half the features. Less is more...</div> | |
| <div class="entry">Anxiety about the pitch deck. Rehearsed 3 times. Ben gave good feedback on the narrative...</div> | |
| <div class="entry">Took the afternoon off. Walked by the river. Need to do this more often...</div> | |
| </div> | |
| </div> | |
| <div class="demo-output"> | |
| <div class="demo-output-label">Discovered types</div> | |
| <div class="type-card" id="tc1"> | |
| <div class="type-card-header"> | |
| <div class="type-card-name"><div class="type-dot" style="background: var(--rose)"></div> Emotional Processing</div> | |
| <div class="type-card-count">34%</div> | |
| </div> | |
| <div class="type-card-examples">"Feeling stuck..." "Couldn't sleep..." "Anxiety about..."</div> | |
| <div class="type-card-bar"><div class="type-card-bar-fill" style="background: var(--rose)" data-width="34%"></div></div> | |
| </div> | |
| <div class="type-card" id="tc2"> | |
| <div class="type-card-header"> | |
| <div class="type-card-name"><div class="type-dot" style="background: var(--sage)"></div> Product & Strategy</div> | |
| <div class="type-card-count">28%</div> | |
| </div> | |
| <div class="type-card-examples">"Breakthrough on the product..." "Cut half the features..."</div> | |
| <div class="type-card-bar"><div class="type-card-bar-fill" style="background: var(--sage)" data-width="28%"></div></div> | |
| </div> | |
| <div class="type-card" id="tc3"> | |
| <div class="type-card-header"> | |
| <div class="type-card-name"><div class="type-dot" style="background: var(--sky)"></div> Fundraising</div> | |
| <div class="type-card-count">22%</div> | |
| </div> | |
| <div class="type-card-examples">"Investor wants more traction..." "Pitch deck..."</div> | |
| <div class="type-card-bar"><div class="type-card-bar-fill" style="background: var(--sky)" data-width="22%"></div></div> | |
| </div> | |
| <div class="type-card" id="tc4"> | |
| <div class="type-card-header"> | |
| <div class="type-card-name"><div class="type-dot" style="background: var(--lavender)"></div> Relationships</div> | |
| <div class="type-card-count">16%</div> | |
| </div> | |
| <div class="type-card-examples">"Dinner with Mom..." "Met with Sara..."</div> | |
| <div class="type-card-bar"><div class="type-card-bar-fill" style="background: var(--lavender)" data-width="16%"></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- HOW IT WORKS --> | |
| <section class="how" id="how"> | |
| <div class="section-label">How it works</div> | |
| <h2 class="section-title">From chaos to <em>clarity</em> in four steps.</h2> | |
| <div class="steps"> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-title">Upload</div> | |
| <div class="step-desc">Drag in your files, paste text, or import from a source. CSVs, text files, transcripts — whatever you have.</div> | |
| <div class="step-arrow">→</div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">2</div> | |
| <div class="step-title">Discover</div> | |
| <div class="step-desc">AI reads everything and surfaces the types and themes hiding in your data. No predefined categories — it finds what's actually there.</div> | |
| <div class="step-arrow">→</div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-title">Refine</div> | |
| <div class="step-desc">Merge, split, and rename types until the taxonomy feels right to you. Your language, your structure.</div> | |
| <div class="step-arrow">→</div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">4</div> | |
| <div class="step-title">Organize</div> | |
| <div class="step-desc">Everything gets classified. Export your tagged data, save your taxonomy for next time, or keep exploring.</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- USE CASES --> | |
| <section class="usecases" id="usecases"> | |
| <div class="section-label">Use cases</div> | |
| <h2 class="section-title">A mirror for your <em>unstructured</em> thinking.</h2> | |
| <div class="usecase-grid"> | |
| <div class="usecase"> | |
| <div class="usecase-icon">✎</div> | |
| <div class="usecase-title">Journal entries</div> | |
| <div class="usecase-desc">Upload a year of journaling. Discover what you've actually been thinking about — the themes you return to, the patterns you can't see day-to-day.</div> | |
| <div class="usecase-quote">"I had no idea how much I was writing about the same three things."</div> | |
| </div> | |
| <div class="usecase"> | |
| <div class="usecase-icon">🎤</div> | |
| <div class="usecase-title">Meeting transcripts</div> | |
| <div class="usecase-desc">Feed in months of meetings. See what topics actually consume your team's time versus what you think you're focused on.</div> | |
| <div class="usecase-quote">"We say we prioritize product, but 40% of our meetings are about process."</div> | |
| </div> | |
| <div class="usecase"> | |
| <div class="usecase-icon">💬</div> | |
| <div class="usecase-title">Customer feedback</div> | |
| <div class="usecase-desc">Drop in survey responses, support tickets, or reviews. Discover what your customers actually care about — not what you assumed.</div> | |
| <div class="usecase-quote">"3,000 NPS responses, organized in 30 seconds. Found issues we'd missed for months."</div> | |
| </div> | |
| <div class="usecase"> | |
| <div class="usecase-icon">📚</div> | |
| <div class="usecase-title">Research notes</div> | |
| <div class="usecase-desc">Interviews, field notes, literature reviews. Let the themes emerge from the data instead of forcing your hypotheses onto it.</div> | |
| <div class="usecase-quote">"It found a pattern across 20 interviews that I completely overlooked."</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PRICING --> | |
| <section class="pricing" id="pricing"> | |
| <div class="section-label">Pricing</div> | |
| <h2 class="section-title">Start free. Scale when <em>you're ready.</em></h2> | |
| <div class="pricing-grid"> | |
| <div class="price-card"> | |
| <div class="price-name">Free</div> | |
| <div class="price-amount">$0</div> | |
| <div class="price-desc">See what typif.ai can find.</div> | |
| <ul class="price-features"> | |
| <li>1 dataset</li> | |
| <li>Up to 100 rows</li> | |
| <li>Type discovery</li> | |
| <li>CSV export</li> | |
| </ul> | |
| <a href="#" class="price-btn">Get started</a> | |
| </div> | |
| <div class="price-card featured"> | |
| <div class="price-badge">Most popular</div> | |
| <div class="price-name">Pro</div> | |
| <div class="price-amount">$29<span>/mo</span></div> | |
| <div class="price-desc">For ongoing sense-making.</div> | |
| <ul class="price-features"> | |
| <li>Unlimited datasets</li> | |
| <li>10,000 rows per month</li> | |
| <li>Saved taxonomies</li> | |
| <li>Re-typify with new data</li> | |
| <li>Priority processing</li> | |
| </ul> | |
| <a href="#" class="price-btn">Start free trial</a> | |
| </div> | |
| <div class="price-card"> | |
| <div class="price-name">Business</div> | |
| <div class="price-amount">$79<span>/mo</span></div> | |
| <div class="price-desc">For teams and integrations.</div> | |
| <ul class="price-features"> | |
| <li>100,000 rows per month</li> | |
| <li>API access</li> | |
| <li>Team taxonomies</li> | |
| <li>Bulk processing</li> | |
| <li>Dedicated support</li> | |
| </ul> | |
| <a href="#" class="price-btn">Contact us</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="cta-section" id="cta"> | |
| <h2>Your data has a shape.<br>Let's <em>find it.</em></h2> | |
| <p>Upload your first dataset for free. No credit card required.</p> | |
| <a href="#" class="btn-primary">Try typif.ai free</a> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer> | |
| <a href="#" class="nav-logo">typif<span>.ai</span></a> | |
| <p>© 2026 typif.ai</p> | |
| </footer> | |
| <script> | |
| // Intersection observer for animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { threshold: 0.2 }); | |
| // Observe demo container | |
| observer.observe(document.getElementById('demoContainer')); | |
| // Animate type cards with stagger | |
| const typeCards = document.querySelectorAll('.type-card'); | |
| const cardObserver = new IntersectionObserver((entries) => { | |
| entries.forEach((entry, i) => { | |
| if (entry.isIntersecting) { | |
| const cards = entry.target.parentElement.querySelectorAll('.type-card'); | |
| cards.forEach((card, index) => { | |
| setTimeout(() => { | |
| card.classList.add('visible'); | |
| // Animate bar fill | |
| const fill = card.querySelector('.type-card-bar-fill'); | |
| if (fill) { | |
| setTimeout(() => { | |
| fill.style.width = fill.dataset.width; | |
| }, 200); | |
| } | |
| }, 300 + index * 200); | |
| }); | |
| cardObserver.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.3 }); | |
| const demoOutput = document.querySelector('.demo-output'); | |
| if (demoOutput) cardObserver.observe(demoOutput); | |
| // Smooth scroll for anchor links | |
| 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' }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment