Initial site: landing, individuals, employers, library, pricing
This commit is contained in:
seven
14
.gitignore
vendored
Normal file
14
.gitignore
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
# macOS
|
||||
.DS_Store
|
||||
|
||||
# Internal / non-public artifacts
|
||||
*.docx
|
||||
Abigail_Demo_Deck_Brief.pdf
|
||||
|
||||
# Node / Vercel
|
||||
node_modules/
|
||||
.vercel/
|
||||
|
||||
# Editor
|
||||
.vscode/
|
||||
.idea/
|
||||
1211
abigail_employers.html
Normal file
1211
abigail_employers.html
Normal file
File diff suppressed because it is too large
Load Diff
1192
abigail_individuals.html
Normal file
1192
abigail_individuals.html
Normal file
File diff suppressed because it is too large
Load Diff
656
abigail_library.html
Normal file
656
abigail_library.html
Normal file
@@ -0,0 +1,656 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Library — Abigail</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@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--ink: #0A0E1A;
|
||||
--ink-2: #1A1F2E;
|
||||
--paper: #FAFAF7;
|
||||
--paper-2: #F2F2EE;
|
||||
--signal: #2E6BFF;
|
||||
--signal-2: #1E50CC;
|
||||
--caution: #E8A33D;
|
||||
--mute: #8A8F99;
|
||||
--mute-2: #C7C9CE;
|
||||
--rule: #E5E5E0;
|
||||
--rule-dark: #2A2F3D;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
background: rgba(250,250,247,0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
nav .container {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
height: 64px;
|
||||
}
|
||||
.brand { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
|
||||
.brand-dot { color: var(--signal); }
|
||||
.nav-links { display: flex; gap: 32px; font-size: 14px; align-items: center; }
|
||||
.nav-links > a:hover, .nav-trigger:hover { color: var(--signal); }
|
||||
.nav-links a.active, .nav-trigger.active { color: var(--signal); font-weight: 500; }
|
||||
.nav-cta {
|
||||
background: var(--ink); color: var(--paper);
|
||||
padding: 8px 16px; border-radius: 8px;
|
||||
font-size: 14px; font-weight: 500;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--ink-2); }
|
||||
|
||||
/* Resources dropdown */
|
||||
.nav-dropdown { position: relative; }
|
||||
.nav-trigger {
|
||||
background: transparent; border: 0;
|
||||
font: inherit; font-size: 14px; color: var(--ink);
|
||||
cursor: pointer;
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
.nav-trigger svg { transition: transform 0.2s; }
|
||||
.nav-dropdown.open .nav-trigger svg { transform: rotate(180deg); }
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-4px);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border: 1px solid var(--rule-dark);
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
min-width: 240px;
|
||||
box-shadow: 0 12px 40px rgba(10,14,26,0.2);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
}
|
||||
.nav-dropdown.open .dropdown-menu {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
.dropdown-menu a {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 14px;
|
||||
color: var(--paper);
|
||||
border-radius: 8px;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.dropdown-menu a:hover {
|
||||
background: var(--ink-2);
|
||||
color: var(--signal);
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 80px 0 56px;
|
||||
text-align: center;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 12px; font-weight: 600;
|
||||
color: var(--signal);
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 0 0 20px;
|
||||
max-width: 760px;
|
||||
margin-left: auto; margin-right: auto;
|
||||
}
|
||||
.hero h1 em { font-style: normal; color: var(--signal); }
|
||||
.hero p {
|
||||
font-size: 18px; color: var(--mute);
|
||||
max-width: 620px; margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Toolbar: search + filters */
|
||||
.toolbar {
|
||||
margin-top: 40px;
|
||||
display: flex; flex-direction: column;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
.search-wrap {
|
||||
width: 100%; max-width: 560px;
|
||||
position: relative;
|
||||
}
|
||||
.search-wrap input {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 999px;
|
||||
padding: 14px 20px 14px 48px;
|
||||
font: inherit;
|
||||
font-size: 15px;
|
||||
color: var(--ink);
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.search-wrap input:focus {
|
||||
outline: none;
|
||||
border-color: var(--signal);
|
||||
box-shadow: 0 0 0 4px rgba(46,107,255,0.1);
|
||||
}
|
||||
.search-wrap svg {
|
||||
position: absolute; left: 18px; top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--mute);
|
||||
}
|
||||
.filter-chips {
|
||||
display: flex; flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
max-width: 920px;
|
||||
}
|
||||
.chip {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 999px;
|
||||
padding: 8px 16px;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
color: var(--mute);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.chip:hover { color: var(--ink); border-color: var(--mute-2); }
|
||||
.chip.active {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
/* Posts grid */
|
||||
.posts {
|
||||
padding: 64px 0 80px;
|
||||
}
|
||||
.posts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.post-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.post-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 32px rgba(10,14,26,0.08);
|
||||
}
|
||||
.post-cover {
|
||||
aspect-ratio: 16 / 9;
|
||||
background: var(--ink);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.post-cover.tint-1 { background: linear-gradient(135deg, #1A1F2E 0%, #2E6BFF 100%); }
|
||||
.post-cover.tint-2 { background: linear-gradient(135deg, #0A0E1A 0%, #1E50CC 100%); }
|
||||
.post-cover.tint-3 { background: linear-gradient(135deg, #1A1F2E 0%, #E8A33D 100%); }
|
||||
.post-cover.tint-4 { background: linear-gradient(135deg, #0A0E1A 0%, #5B6BFF 100%); }
|
||||
.post-cover.tint-5 { background: linear-gradient(135deg, #1A1F2E 0%, #9B6BFF 100%); }
|
||||
.post-cover.tint-6 { background: linear-gradient(135deg, #0A0E1A 0%, #2E6BFF 100%); }
|
||||
.post-cover-mono {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex; align-items: flex-end;
|
||||
padding: 20px;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: var(--paper);
|
||||
letter-spacing: -0.02em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.post-body {
|
||||
padding: 24px;
|
||||
display: flex; flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.post-meta {
|
||||
display: flex; gap: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--mute);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.post-meta .tag {
|
||||
color: var(--signal);
|
||||
font-weight: 600;
|
||||
}
|
||||
.post-meta .sep::before { content: "·"; margin: 0 4px; }
|
||||
.post-card h3 {
|
||||
font-size: 18px; font-weight: 600;
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.post-card p {
|
||||
font-size: 14px;
|
||||
color: var(--mute);
|
||||
margin: 0 0 20px;
|
||||
line-height: 1.55;
|
||||
flex: 1;
|
||||
}
|
||||
.post-read {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.post-card:hover .post-read { color: var(--signal); }
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 56px;
|
||||
}
|
||||
.pagination button {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
width: 40px; height: 40px;
|
||||
border-radius: 8px;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--mute);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.pagination button:hover {
|
||||
border-color: var(--rule);
|
||||
color: var(--ink);
|
||||
}
|
||||
.pagination button.active {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
.pagination .ellipsis {
|
||||
color: var(--mute);
|
||||
padding: 0 6px;
|
||||
}
|
||||
.pagination .nav-btn {
|
||||
width: auto; padding: 0 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Newsletter */
|
||||
.newsletter {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-radius: 24px;
|
||||
padding: 64px 48px;
|
||||
text-align: center;
|
||||
margin: 0 0 96px;
|
||||
}
|
||||
.newsletter h2 {
|
||||
font-size: 32px; font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
.newsletter p {
|
||||
color: var(--mute-2);
|
||||
font-size: 16px;
|
||||
max-width: 520px;
|
||||
margin: 0 auto 28px;
|
||||
}
|
||||
.news-form {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.news-form input {
|
||||
flex: 1;
|
||||
background: var(--ink-2);
|
||||
border: 1px solid var(--rule-dark);
|
||||
color: var(--paper);
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
.news-form input:focus {
|
||||
outline: none;
|
||||
border-color: var(--signal);
|
||||
}
|
||||
.news-form input::placeholder { color: var(--mute); }
|
||||
.news-form button {
|
||||
background: var(--signal); color: white;
|
||||
border: 0;
|
||||
padding: 12px 22px;
|
||||
border-radius: 10px;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.news-form button:hover { background: var(--signal-2); }
|
||||
.news-fine {
|
||||
font-size: 12px;
|
||||
color: var(--mute);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top: 1px solid var(--rule);
|
||||
padding: 48px 0 64px;
|
||||
color: var(--mute);
|
||||
font-size: 13px;
|
||||
}
|
||||
footer .container {
|
||||
display: flex; justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap; gap: 32px;
|
||||
}
|
||||
.footer-links { display: flex; gap: 32px; }
|
||||
.disclaimer {
|
||||
border-top: 1px dashed var(--rule);
|
||||
margin-top: 32px; padding-top: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.hero h1 { font-size: 40px; }
|
||||
.posts-grid { grid-template-columns: 1fr; }
|
||||
.news-form { flex-direction: column; }
|
||||
.nav-links { display: none; }
|
||||
.newsletter { padding: 48px 24px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a class="brand" href="abigail_pricing.html">Abigail<span class="brand-dot">.</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="abigail_individuals.html">Individuals</a>
|
||||
<a href="abigail_employers.html">Employers</a>
|
||||
<div class="nav-dropdown" id="resourcesDropdown">
|
||||
<button class="nav-trigger active" aria-haspopup="true">
|
||||
Resources
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 3.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<a href="abigail_library.html">Library</a>
|
||||
<a href="#">Case Studies</a>
|
||||
<a href="abigail_individuals.html#how-it-works">Visa Pathways</a>
|
||||
<a href="#">Events</a>
|
||||
<a href="#">Careers</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="abigail_pricing.html">Pricing</a>
|
||||
</div>
|
||||
<a href="abigail_individuals.html#hero" class="nav-cta">Start screener</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="eyebrow">Library</div>
|
||||
<h1>Immigration, <em>explained.</em></h1>
|
||||
<p>Guides, breakdowns, and walkthroughs across the visa categories we cover. Written by attorneys, reviewed before publishing.</p>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="search-wrap">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M13 13l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<input type="search" placeholder="Search guides, visas, topics…">
|
||||
</div>
|
||||
<div class="filter-chips" id="chips">
|
||||
<button class="chip active" data-tag="all">All resources</button>
|
||||
<button class="chip" data-tag="o1a">O-1A</button>
|
||||
<button class="chip" data-tag="eb1a">EB-1A</button>
|
||||
<button class="chip" data-tag="niw">EB-2 NIW</button>
|
||||
<button class="chip" data-tag="h1b">H-1B</button>
|
||||
<button class="chip" data-tag="green-card">Green cards</button>
|
||||
<button class="chip" data-tag="rfe">RFE</button>
|
||||
<button class="chip" data-tag="employer">Employers</button>
|
||||
<button class="chip" data-tag="founder">Founders</button>
|
||||
<button class="chip" data-tag="documents">Documents</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- POSTS -->
|
||||
<section class="posts">
|
||||
<div class="container">
|
||||
<div class="posts-grid">
|
||||
|
||||
<!-- 1 -->
|
||||
<a href="#" class="post-card" data-tags="o1a documents">
|
||||
<div class="post-cover tint-1"><div class="post-cover-mono">O-1A</div></div>
|
||||
<div class="post-body">
|
||||
<div class="post-meta">
|
||||
<span class="tag">O-1A</span>
|
||||
<span class="sep"></span>
|
||||
<span>Guide</span>
|
||||
<span class="sep"></span>
|
||||
<span>Jun 26, 2026</span>
|
||||
</div>
|
||||
<h3>The eight O-1A criteria, decoded</h3>
|
||||
<p>What each criterion means in practice, what evidence USCIS actually accepts, and how to prove the three you need.</p>
|
||||
<span class="post-read">Read guide →</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 2 -->
|
||||
<a href="#" class="post-card" data-tags="eb1a green-card">
|
||||
<div class="post-cover tint-2"><div class="post-cover-mono">EB-1A</div></div>
|
||||
<div class="post-body">
|
||||
<div class="post-meta">
|
||||
<span class="tag">EB-1A</span>
|
||||
<span class="sep"></span>
|
||||
<span>Guide</span>
|
||||
<span class="sep"></span>
|
||||
<span>Jun 18, 2026</span>
|
||||
</div>
|
||||
<h3>EB-1A self-petition: the full playbook</h3>
|
||||
<p>Why EB-1A is the strongest self-petition path for high-skill applicants — and what separates a strong package from a denial.</p>
|
||||
<span class="post-read">Read guide →</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 3 -->
|
||||
<a href="#" class="post-card" data-tags="o1a h1b">
|
||||
<div class="post-cover tint-3"><div class="post-cover-mono">H1B</div></div>
|
||||
<div class="post-body">
|
||||
<div class="post-meta">
|
||||
<span class="tag">H-1B vs O-1A</span>
|
||||
<span class="sep"></span>
|
||||
<span>Comparison</span>
|
||||
<span class="sep"></span>
|
||||
<span>Jun 12, 2026</span>
|
||||
</div>
|
||||
<h3>H-1B or O-1A: which one to file</h3>
|
||||
<p>The lottery problem, the salary floor, the documentation lift — a side-by-side breakdown for engineers and researchers.</p>
|
||||
<span class="post-read">Read guide →</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 4 -->
|
||||
<a href="#" class="post-card" data-tags="rfe">
|
||||
<div class="post-cover tint-4"><div class="post-cover-mono">RFE</div></div>
|
||||
<div class="post-body">
|
||||
<div class="post-meta">
|
||||
<span class="tag">RFE</span>
|
||||
<span class="sep"></span>
|
||||
<span>Walkthrough</span>
|
||||
<span class="sep"></span>
|
||||
<span>Jun 5, 2026</span>
|
||||
</div>
|
||||
<h3>When the RFE arrives: a response framework</h3>
|
||||
<p>The five most common RFE patterns, what USCIS is actually asking, and how to build a response that closes the issue cleanly.</p>
|
||||
<span class="post-read">Read guide →</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 5 -->
|
||||
<a href="#" class="post-card" data-tags="niw green-card">
|
||||
<div class="post-cover tint-5"><div class="post-cover-mono">NIW</div></div>
|
||||
<div class="post-body">
|
||||
<div class="post-meta">
|
||||
<span class="tag">EB-2 NIW</span>
|
||||
<span class="sep"></span>
|
||||
<span>Guide</span>
|
||||
<span class="sep"></span>
|
||||
<span>May 28, 2026</span>
|
||||
</div>
|
||||
<h3>National Interest Waiver: the three-prong test</h3>
|
||||
<p>Substantial merit, national importance, well-positioned — translating the Dhanasar framework into evidence USCIS will credit.</p>
|
||||
<span class="post-read">Read guide →</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 6 -->
|
||||
<a href="#" class="post-card" data-tags="employer h1b">
|
||||
<div class="post-cover tint-6"><div class="post-cover-mono">LCA</div></div>
|
||||
<div class="post-body">
|
||||
<div class="post-meta">
|
||||
<span class="tag">Employer</span>
|
||||
<span class="sep"></span>
|
||||
<span>Guide</span>
|
||||
<span class="sep"></span>
|
||||
<span>May 20, 2026</span>
|
||||
</div>
|
||||
<h3>Building a defensible Public Access File</h3>
|
||||
<p>The 5-year retention clock, what belongs in the file, and what every people team gets wrong before the audit shows up.</p>
|
||||
<span class="post-read">Read guide →</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<button class="nav-btn" disabled>← Prev</button>
|
||||
<button class="active">1</button>
|
||||
<button>2</button>
|
||||
<button>3</button>
|
||||
<span class="ellipsis">…</span>
|
||||
<button>8</button>
|
||||
<button class="nav-btn">Next →</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- NEWSLETTER -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="newsletter">
|
||||
<h2>News, updates, and best practices.</h2>
|
||||
<p>One email a month. Policy changes, new guides, and the occasional Abigail product update. No spam.</p>
|
||||
<form class="news-form" onsubmit="event.preventDefault(); alert('Subscribed — thanks.');">
|
||||
<input type="email" placeholder="you@company.com" required>
|
||||
<button type="submit">Subscribe</button>
|
||||
</form>
|
||||
<div class="news-fine">By subscribing you agree to receive emails from Abigail. Unsubscribe any time.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="brand" style="color:var(--ink); margin-bottom:8px;">Abigail<span class="brand-dot">.</span></div>
|
||||
<div>AI-native immigration platform</div>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<div>
|
||||
<div style="color:var(--ink); font-weight:600; margin-bottom:8px;">Product</div>
|
||||
<div><a href="abigail_individuals.html">Individuals</a></div>
|
||||
<div><a href="abigail_employers.html">Employers</a></div>
|
||||
<div><a href="abigail_pricing.html">Pricing</a></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="color:var(--ink); font-weight:600; margin-bottom:8px;">Resources</div>
|
||||
<div><a href="abigail_library.html">Library</a></div>
|
||||
<div><a href="#">Case Studies</a></div>
|
||||
<div><a href="#">Events</a></div>
|
||||
<div><a href="#">Careers</a></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="color:var(--ink); font-weight:600; margin-bottom:8px;">Legal</div>
|
||||
<div><a href="#">Terms</a></div>
|
||||
<div><a href="#">Privacy</a></div>
|
||||
<div><a href="#">Legal services</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="disclaimer">
|
||||
Abigail Technologies, Inc. operates an AI-native immigration platform and does not provide legal services. Library content is for general informational purposes and is not legal advice; reading it does not create an attorney-client relationship.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Resources dropdown
|
||||
const dd = document.getElementById("resourcesDropdown");
|
||||
if (dd) {
|
||||
const trigger = dd.querySelector(".nav-trigger");
|
||||
trigger.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
dd.classList.toggle("open");
|
||||
});
|
||||
document.addEventListener("click", () => dd.classList.remove("open"));
|
||||
dd.querySelector(".dropdown-menu").addEventListener("click", (e) => e.stopPropagation());
|
||||
}
|
||||
|
||||
// Filter chips
|
||||
const chips = document.querySelectorAll("#chips .chip");
|
||||
const cards = document.querySelectorAll(".post-card");
|
||||
chips.forEach(c => c.addEventListener("click", () => {
|
||||
chips.forEach(x => x.classList.toggle("active", x === c));
|
||||
const tag = c.dataset.tag;
|
||||
cards.forEach(card => {
|
||||
const tags = (card.dataset.tags || "").split(/\s+/);
|
||||
card.style.display = (tag === "all" || tags.includes(tag)) ? "" : "none";
|
||||
});
|
||||
}));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
960
abigail_pricing.html
Normal file
960
abigail_pricing.html
Normal file
@@ -0,0 +1,960 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Pricing — Abigail</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@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--ink: #0A0E1A;
|
||||
--ink-2: #1A1F2E;
|
||||
--paper: #FAFAF7;
|
||||
--paper-2: #F2F2EE;
|
||||
--signal: #2E6BFF;
|
||||
--signal-2: #1E50CC;
|
||||
--caution: #E8A33D;
|
||||
--halt: #D7423F;
|
||||
--mute: #8A8F99;
|
||||
--mute-2: #C7C9CE;
|
||||
--rule: #E5E5E0;
|
||||
--rule-dark: #2A2F3D;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
background: rgba(250,250,247,0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
nav .container {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
height: 64px;
|
||||
}
|
||||
.brand { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
|
||||
.brand-dot { color: var(--signal); }
|
||||
.nav-links { display: flex; gap: 32px; font-size: 14px; color: var(--ink); }
|
||||
.nav-links a:hover { color: var(--signal); }
|
||||
.nav-cta {
|
||||
background: var(--ink); color: var(--paper);
|
||||
padding: 8px 16px; border-radius: 8px;
|
||||
font-size: 14px; font-weight: 500;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.nav-cta:hover { background: var(--ink-2); }
|
||||
.nav-links { align-items: center; }
|
||||
.nav-dropdown { position: relative; }
|
||||
.nav-trigger {
|
||||
background: transparent; border: 0;
|
||||
font: inherit; font-size: 14px; color: var(--ink);
|
||||
cursor: pointer;
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
.nav-trigger:hover { color: var(--signal); }
|
||||
.nav-trigger svg { transition: transform 0.2s; }
|
||||
.nav-dropdown.open .nav-trigger svg { transform: rotate(180deg); }
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-4px);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border: 1px solid var(--rule-dark);
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
min-width: 240px;
|
||||
box-shadow: 0 12px 40px rgba(10,14,26,0.2);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
}
|
||||
.nav-dropdown.open .dropdown-menu {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
.dropdown-menu a {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 14px;
|
||||
color: var(--paper);
|
||||
border-radius: 8px;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
.dropdown-menu a:hover {
|
||||
background: var(--ink-2);
|
||||
color: var(--signal);
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 96px 0 56px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-eyebrow {
|
||||
font-size: 12px; font-weight: 600;
|
||||
color: var(--signal);
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 0 0 20px;
|
||||
max-width: 880px;
|
||||
margin-left: auto; margin-right: auto;
|
||||
}
|
||||
.hero h1 em { font-style: normal; color: var(--signal); }
|
||||
.hero p {
|
||||
font-size: 18px; color: var(--mute);
|
||||
max-width: 620px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* TOGGLE */
|
||||
.toggle-wrap {
|
||||
display: flex; justify-content: center;
|
||||
margin: 40px 0 48px;
|
||||
}
|
||||
.toggle {
|
||||
display: inline-flex;
|
||||
background: var(--paper-2);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 999px;
|
||||
padding: 4px;
|
||||
}
|
||||
.toggle button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 10px 24px;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--mute);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.toggle button.active {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* TIER CARDS */
|
||||
.tiers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
.tier {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
display: flex; flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.tier.featured {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
.tier-badge {
|
||||
position: absolute; top: -12px; right: 24px;
|
||||
background: var(--signal); color: white;
|
||||
font-size: 11px; font-weight: 600;
|
||||
letter-spacing: 0.06em; text-transform: uppercase;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.tier-name {
|
||||
font-size: 14px; font-weight: 600;
|
||||
color: var(--mute);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.tier.featured .tier-name { color: var(--mute-2); }
|
||||
.tier-tagline {
|
||||
font-size: 17px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 24px;
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
}
|
||||
.tier.featured .tier-tagline { color: var(--paper); }
|
||||
.tier-price {
|
||||
display: flex; align-items: baseline; gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.tier-price .amount {
|
||||
font-size: 40px; font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
.tier-price .unit {
|
||||
font-size: 14px; color: var(--mute);
|
||||
}
|
||||
.tier.featured .tier-price .unit { color: var(--mute-2); }
|
||||
.tier-price-note {
|
||||
font-size: 13px; color: var(--mute);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.tier.featured .tier-price-note { color: var(--mute-2); }
|
||||
.tier-cta {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px; font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.15s;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--ink);
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
.tier-cta:hover { background: var(--ink); color: var(--paper); }
|
||||
.tier.featured .tier-cta {
|
||||
background: var(--signal); border-color: var(--signal); color: white;
|
||||
}
|
||||
.tier.featured .tier-cta:hover { background: var(--signal-2); }
|
||||
.tier-features {
|
||||
list-style: none; padding: 0; margin: 0;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
.tier-features li {
|
||||
padding: 8px 0 8px 26px;
|
||||
position: relative;
|
||||
line-height: 1.45;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.tier-features li:first-child { border-top: 0; }
|
||||
.tier.featured .tier-features li { border-color: var(--rule-dark); }
|
||||
.tier-features li::before {
|
||||
content: "";
|
||||
position: absolute; left: 0; top: 13px;
|
||||
width: 16px; height: 16px;
|
||||
background: var(--signal);
|
||||
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
|
||||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
|
||||
}
|
||||
.tier-features li.dim {
|
||||
color: var(--mute);
|
||||
}
|
||||
.tier-features li.dim::before {
|
||||
background: var(--mute-2);
|
||||
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") no-repeat center;
|
||||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") no-repeat center;
|
||||
}
|
||||
|
||||
/* CASE-TYPE PRICING TABLE */
|
||||
.section { padding: 80px 0; }
|
||||
.section-head {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-eyebrow {
|
||||
font-size: 12px; font-weight: 600;
|
||||
color: var(--signal);
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-head h2 {
|
||||
font-size: 36px; font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
.section-head p {
|
||||
font-size: 17px; color: var(--mute);
|
||||
max-width: 600px; margin: 0 auto;
|
||||
}
|
||||
.case-table {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.case-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.6fr 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
padding: 20px 28px;
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.case-row:first-child { border-top: 0; }
|
||||
.case-row.head {
|
||||
background: var(--paper-2);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--mute);
|
||||
}
|
||||
.case-name {
|
||||
font-weight: 600; font-size: 15px;
|
||||
}
|
||||
.case-name small {
|
||||
display: block;
|
||||
font-weight: 400; color: var(--mute);
|
||||
font-size: 13px; margin-top: 2px;
|
||||
}
|
||||
.case-price {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 15px;
|
||||
}
|
||||
.case-price.featured {
|
||||
color: var(--signal); font-weight: 600;
|
||||
}
|
||||
.case-price small { color: var(--mute); }
|
||||
|
||||
/* COMPARISON */
|
||||
.compare-table {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.compare-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr repeat(4, 1fr);
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--rule);
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
.compare-row:first-child { border-top: 0; }
|
||||
.compare-row.head {
|
||||
background: var(--paper-2);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--mute);
|
||||
}
|
||||
.compare-row.head .col-abigail {
|
||||
color: var(--signal);
|
||||
}
|
||||
.col-feat { font-weight: 500; }
|
||||
.col-abigail {
|
||||
color: var(--signal);
|
||||
font-weight: 600;
|
||||
}
|
||||
.compare-cell-icon {
|
||||
display: inline-block; width: 16px; height: 16px;
|
||||
}
|
||||
|
||||
/* FAQ */
|
||||
.faq {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.faq-item {
|
||||
border-top: 1px solid var(--rule);
|
||||
}
|
||||
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
|
||||
.faq-q {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
padding: 24px 0;
|
||||
font: inherit;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
color: var(--ink);
|
||||
}
|
||||
.faq-q .plus {
|
||||
width: 20px; height: 20px;
|
||||
position: relative;
|
||||
transition: transform 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.faq-q .plus::before, .faq-q .plus::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--ink);
|
||||
}
|
||||
.faq-q .plus::before {
|
||||
left: 0; right: 0; top: 9px; height: 2px;
|
||||
}
|
||||
.faq-q .plus::after {
|
||||
top: 0; bottom: 0; left: 9px; width: 2px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.faq-item.open .plus::after { transform: scaleY(0); }
|
||||
.faq-a {
|
||||
max-height: 0; overflow: hidden;
|
||||
color: var(--mute);
|
||||
font-size: 15px; line-height: 1.6;
|
||||
transition: max-height 0.25s ease, padding 0.25s ease;
|
||||
}
|
||||
.faq-item.open .faq-a {
|
||||
max-height: 400px;
|
||||
padding: 0 0 24px;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-band {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-radius: 24px;
|
||||
padding: 72px 48px;
|
||||
text-align: center;
|
||||
margin: 0 0 96px;
|
||||
}
|
||||
.cta-band h2 {
|
||||
font-size: 40px; font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 16px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.cta-band p {
|
||||
color: var(--mute-2);
|
||||
font-size: 17px;
|
||||
max-width: 540px; margin: 0 auto 32px;
|
||||
}
|
||||
.cta-buttons {
|
||||
display: inline-flex; gap: 12px;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--signal); color: white;
|
||||
padding: 14px 24px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600; font-size: 15px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn-primary:hover { background: var(--signal-2); }
|
||||
.btn-secondary {
|
||||
background: transparent; color: var(--paper);
|
||||
border: 1px solid var(--rule-dark);
|
||||
padding: 14px 24px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600; font-size: 15px;
|
||||
}
|
||||
.btn-secondary:hover { background: var(--ink-2); }
|
||||
|
||||
/* FOOTER */
|
||||
footer {
|
||||
border-top: 1px solid var(--rule);
|
||||
padding: 48px 0 64px;
|
||||
color: var(--mute);
|
||||
font-size: 13px;
|
||||
}
|
||||
footer .container {
|
||||
display: flex; justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap; gap: 32px;
|
||||
}
|
||||
.footer-links { display: flex; gap: 32px; }
|
||||
.disclaimer {
|
||||
border-top: 1px dashed var(--rule);
|
||||
margin-top: 32px; padding-top: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 880px) {
|
||||
.hero h1 { font-size: 40px; }
|
||||
.tiers { grid-template-columns: 1fr; }
|
||||
.case-row, .compare-row { grid-template-columns: 1fr; gap: 6px; }
|
||||
.case-row.head, .compare-row.head { display: none; }
|
||||
.case-row > div::before, .compare-row > div::before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--mute);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.nav-links { display: none; }
|
||||
.cta-band { padding: 48px 24px; }
|
||||
.section { padding: 56px 0; }
|
||||
}
|
||||
|
||||
.panel { display: none; }
|
||||
.panel.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a class="brand" href="#">Abigail<span class="brand-dot">.</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="abigail_individuals.html">Individuals</a>
|
||||
<a href="abigail_employers.html">Employers</a>
|
||||
<div class="nav-dropdown" id="resourcesDropdown">
|
||||
<button class="nav-trigger" aria-haspopup="true">
|
||||
Resources
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 3.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<a href="abigail_library.html">Library</a>
|
||||
<a href="#">Case Studies</a>
|
||||
<a href="abigail_individuals.html#how-it-works">Visa Pathways</a>
|
||||
<a href="#">Events</a>
|
||||
<a href="#">Careers</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" style="color:var(--signal); font-weight:500;">Pricing</a>
|
||||
</div>
|
||||
<a href="#cta" class="nav-cta">Join beta</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-eyebrow">Pricing</div>
|
||||
<h1>BigLaw quality.<br>Without the <em>billable hours.</em></h1>
|
||||
<p>Flat-fee, AI-native immigration filings. Pick the level of attorney involvement that matches your case — from self-serve to full lifecycle representation.</p>
|
||||
|
||||
<div class="toggle-wrap">
|
||||
<div class="toggle" role="tablist">
|
||||
<button data-panel="individual" class="active">For individuals</button>
|
||||
<button data-panel="employer">For employers</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- INDIVIDUAL PANEL -->
|
||||
<section class="panel active" data-panel="individual">
|
||||
<div class="container">
|
||||
|
||||
<div class="tiers">
|
||||
<!-- Tier 1 -->
|
||||
<div class="tier">
|
||||
<div class="tier-name">Self-serve</div>
|
||||
<div class="tier-tagline">AI builds your full filing package. You review and file.</div>
|
||||
<div class="tier-price">
|
||||
<span class="amount">$1,500</span>
|
||||
<span class="unit">starting · flat fee</span>
|
||||
</div>
|
||||
<div class="tier-price-note">Per filing · excludes USCIS government fees</div>
|
||||
<button class="tier-cta">Start a case</button>
|
||||
<ul class="tier-features">
|
||||
<li>AI Visa Intelligence Screener + green-card roadmap</li>
|
||||
<li>TurboTax-style guided intake</li>
|
||||
<li>Document upload + AI classification & consistency check</li>
|
||||
<li>AI-drafted petition narrative, support letter framework, cover letter</li>
|
||||
<li>Evidence-map against USCIS criteria</li>
|
||||
<li>USCIS receipt tracking + status alerts</li>
|
||||
<li class="dim">Attorney review</li>
|
||||
<li class="dim">RFE response support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tier 2 - featured -->
|
||||
<div class="tier featured">
|
||||
<div class="tier-badge">Most popular</div>
|
||||
<div class="tier-name">Attorney-reviewed</div>
|
||||
<div class="tier-tagline">AI does the work. Ivy / BigLaw-trained attorneys ensure the quality.</div>
|
||||
<div class="tier-price">
|
||||
<span class="amount">$5,500</span>
|
||||
<span class="unit">starting · flat fee</span>
|
||||
</div>
|
||||
<div class="tier-price-note">Per filing · excludes USCIS government fees</div>
|
||||
<button class="tier-cta">Talk to us</button>
|
||||
<ul class="tier-features">
|
||||
<li>Everything in Self-serve</li>
|
||||
<li>Licensed attorney reviews, annotates, and signs off</li>
|
||||
<li>Structured 3–5 business-day turnaround</li>
|
||||
<li>Engagement via Abigail Legal Services, P.C.</li>
|
||||
<li>Attorney-client privilege</li>
|
||||
<li>One round of revisions included</li>
|
||||
<li>Initial RFE assessment included</li>
|
||||
<li class="dim">Continuous lifecycle representation</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tier 3 -->
|
||||
<div class="tier">
|
||||
<div class="tier-name">Lifecycle</div>
|
||||
<div class="tier-tagline">Continuous attorney representation across the full case lifecycle.</div>
|
||||
<div class="tier-price">
|
||||
<span class="amount">Custom</span>
|
||||
<span class="unit">contact for quote</span>
|
||||
</div>
|
||||
<div class="tier-price-note">Annual engagement · multi-case & family options</div>
|
||||
<button class="tier-cta">Contact us</button>
|
||||
<ul class="tier-features">
|
||||
<li>Everything in Attorney-reviewed</li>
|
||||
<li>Dedicated attorney + paralegal team</li>
|
||||
<li>Full RFE / NOID response handling</li>
|
||||
<li>Status-change strategy + employer transitions</li>
|
||||
<li>Renewals & extensions auto-initiated</li>
|
||||
<li>Green-card pathway planning</li>
|
||||
<li>Family-linked petitions (H-4, L-2, O-3)</li>
|
||||
<li>Priority response SLA</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Case-type pricing -->
|
||||
<div class="section-head">
|
||||
<div class="section-eyebrow">By case type</div>
|
||||
<h2>Flat fees, case by case</h2>
|
||||
<p>Self-serve and Attorney-reviewed pricing across the visa types we currently support.</p>
|
||||
</div>
|
||||
|
||||
<div class="case-table">
|
||||
<div class="case-row head">
|
||||
<div>Case type</div>
|
||||
<div>Self-serve</div>
|
||||
<div>Attorney-reviewed</div>
|
||||
<div>BigLaw benchmark</div>
|
||||
</div>
|
||||
<div class="case-row">
|
||||
<div class="case-name" data-label="Case type">O-1A · New petition<small>Extraordinary ability</small></div>
|
||||
<div class="case-price" data-label="Self-serve">$1,500–$2,500</div>
|
||||
<div class="case-price featured" data-label="Attorney-reviewed">$5,500–$6,500</div>
|
||||
<div class="case-price" data-label="BigLaw"><small>$15,000–$25,000</small></div>
|
||||
</div>
|
||||
<div class="case-row">
|
||||
<div class="case-name" data-label="Case type">EB-1A / EB-2 NIW<small>Green-card petitions</small></div>
|
||||
<div class="case-price" data-label="Self-serve">$2,500–$3,500</div>
|
||||
<div class="case-price featured" data-label="Attorney-reviewed">$5,500–$6,500</div>
|
||||
<div class="case-price" data-label="BigLaw"><small>$15,000–$25,000</small></div>
|
||||
</div>
|
||||
<div class="case-row">
|
||||
<div class="case-name" data-label="Case type">H-1B · Cap petition<small>Specialty occupation</small></div>
|
||||
<div class="case-price" data-label="Self-serve">$1,500–$2,000</div>
|
||||
<div class="case-price featured" data-label="Attorney-reviewed">$2,500</div>
|
||||
<div class="case-price" data-label="BigLaw"><small>$5,000–$10,000</small></div>
|
||||
</div>
|
||||
<div class="case-row">
|
||||
<div class="case-name" data-label="Case type">N-400 / I-90<small>Naturalization & green-card renewal</small></div>
|
||||
<div class="case-price" data-label="Self-serve">$299</div>
|
||||
<div class="case-price featured" data-label="Attorney-reviewed">$699</div>
|
||||
<div class="case-price" data-label="BigLaw"><small>Not primary focus</small></div>
|
||||
</div>
|
||||
<div class="case-row">
|
||||
<div class="case-name" data-label="Case type">RFE Response<small>USCIS Request for Evidence</small></div>
|
||||
<div class="case-price" data-label="Self-serve"><small>Included assessment</small></div>
|
||||
<div class="case-price featured" data-label="Attorney-reviewed">$799–$1,999</div>
|
||||
<div class="case-price" data-label="BigLaw"><small>$2,000–$5,000+</small></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-size:13px; color:var(--mute); margin-top:16px; max-width:760px;">
|
||||
All prices exclude USCIS government filing fees and premium processing ($2,965 if elected). Final fee confirmed after intake; complex cases may carry adjustment.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- EMPLOYER PANEL -->
|
||||
<section class="panel" data-panel="employer">
|
||||
<div class="container">
|
||||
|
||||
<div class="tiers">
|
||||
<!-- Tier 1 -->
|
||||
<div class="tier">
|
||||
<div class="tier-name">Starter</div>
|
||||
<div class="tier-tagline">For companies with 1–10 foreign-national employees.</div>
|
||||
<div class="tier-price">
|
||||
<span class="amount">$3,000</span>
|
||||
<span class="unit">/ year</span>
|
||||
</div>
|
||||
<div class="tier-price-note">Plus per-filing fees</div>
|
||||
<button class="tier-cta">Talk to sales</button>
|
||||
<ul class="tier-features">
|
||||
<li>HR system integration (Rippling, BambooHR, Gusto)</li>
|
||||
<li>Company Master Profile</li>
|
||||
<li>Auto-populated I-129 / LCA forms</li>
|
||||
<li>Public Access File generation</li>
|
||||
<li>5-year retention tracking</li>
|
||||
<li>Status-expiration alerts</li>
|
||||
<li class="dim">Workday / SAP integration</li>
|
||||
<li class="dim">SSO + custom roles</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tier 2 - featured -->
|
||||
<div class="tier featured">
|
||||
<div class="tier-badge">Most popular</div>
|
||||
<div class="tier-name">Growth</div>
|
||||
<div class="tier-tagline">For Series B+ companies scaling global mobility.</div>
|
||||
<div class="tier-price">
|
||||
<span class="amount">$10,000</span>
|
||||
<span class="unit">/ year</span>
|
||||
</div>
|
||||
<div class="tier-price-note">Plus per-filing fees · volume discounts</div>
|
||||
<button class="tier-cta">Talk to sales</button>
|
||||
<ul class="tier-features">
|
||||
<li>Everything in Starter</li>
|
||||
<li>Workday + SAP integration</li>
|
||||
<li>Up to 50 active sponsored employees</li>
|
||||
<li>Embedded employee intake (no email coordination)</li>
|
||||
<li>Compliance dashboard + audit-ready reporting</li>
|
||||
<li>AI Screener for new-hire candidates</li>
|
||||
<li>Dedicated implementation manager</li>
|
||||
<li class="dim">SOC 2 Type II report</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tier 3 -->
|
||||
<div class="tier">
|
||||
<div class="tier-name">Enterprise</div>
|
||||
<div class="tier-tagline">For Fortune 1000 and high-volume sponsors.</div>
|
||||
<div class="tier-price">
|
||||
<span class="amount">Custom</span>
|
||||
<span class="unit">contact for quote</span>
|
||||
</div>
|
||||
<div class="tier-price-note">Starts at $20,000 / year</div>
|
||||
<button class="tier-cta">Contact sales</button>
|
||||
<ul class="tier-features">
|
||||
<li>Everything in Growth</li>
|
||||
<li>Unlimited sponsored employees</li>
|
||||
<li>SSO (Okta, Azure AD) + custom roles</li>
|
||||
<li>SOC 2 Type II report</li>
|
||||
<li>Data residency options</li>
|
||||
<li>Custom HRIS connectors</li>
|
||||
<li>Quarterly compliance review</li>
|
||||
<li>Named legal partner attorney</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-size:13px; color:var(--mute); max-width:760px;">
|
||||
Per-filing fees follow the Individual case-type schedule above. Enterprise tiers can bundle prepaid filing volume for further savings.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- COMPARISON SECTION -->
|
||||
<section class="section" id="how-it-works" style="background:var(--paper-2); margin-top: 80px; scroll-margin-top: 80px;">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<div class="section-eyebrow">vs. the market</div>
|
||||
<h2>Same attorney quality. Half the price.</h2>
|
||||
<p>How Abigail's Attorney-reviewed tier compares to existing options for an O-1A petition.</p>
|
||||
</div>
|
||||
|
||||
<div class="compare-table">
|
||||
<div class="compare-row head">
|
||||
<div>Feature</div>
|
||||
<div class="col-abigail">Abigail</div>
|
||||
<div>Alma</div>
|
||||
<div>BigLaw</div>
|
||||
<div>SimpleCitizen</div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="col-feat" data-label="Feature">O-1A flat fee</div>
|
||||
<div class="col-abigail" data-label="Abigail">$5,500</div>
|
||||
<div data-label="Alma">$8,000</div>
|
||||
<div data-label="BigLaw">$15K–$25K</div>
|
||||
<div data-label="SimpleCitizen">Not offered</div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="col-feat" data-label="Feature">Self-serve AI tier</div>
|
||||
<div class="col-abigail" data-label="Abigail">Yes</div>
|
||||
<div data-label="Alma">No</div>
|
||||
<div data-label="BigLaw">No</div>
|
||||
<div data-label="SimpleCitizen">Form-prep only</div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="col-feat" data-label="Feature">Attorney credential</div>
|
||||
<div class="col-abigail" data-label="Abigail">Ivy / BigLaw</div>
|
||||
<div data-label="Alma">Mixed network</div>
|
||||
<div data-label="BigLaw">BigLaw</div>
|
||||
<div data-label="SimpleCitizen">Fragomen-affiliated</div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="col-feat" data-label="Feature">Prep turnaround</div>
|
||||
<div class="col-abigail" data-label="Abigail">5 business days</div>
|
||||
<div data-label="Alma">2 weeks</div>
|
||||
<div data-label="BigLaw">4–6 weeks</div>
|
||||
<div data-label="SimpleCitizen">N/A</div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="col-feat" data-label="Feature">Multi-visa screener</div>
|
||||
<div class="col-abigail" data-label="Abigail">Yes (all major types)</div>
|
||||
<div data-label="Alma">No</div>
|
||||
<div data-label="BigLaw">Manual consult</div>
|
||||
<div data-label="SimpleCitizen">No</div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="col-feat" data-label="Feature">HR API integration</div>
|
||||
<div class="col-abigail" data-label="Abigail">Yes — feeds AI</div>
|
||||
<div data-label="Alma">Yes — feeds attorney</div>
|
||||
<div data-label="BigLaw">No</div>
|
||||
<div data-label="SimpleCitizen">No</div>
|
||||
</div>
|
||||
<div class="compare-row">
|
||||
<div class="col-feat" data-label="Feature">Post-filing case mgmt</div>
|
||||
<div class="col-abigail" data-label="Abigail">Included</div>
|
||||
<div data-label="Alma">Partial</div>
|
||||
<div data-label="BigLaw">Billed separately</div>
|
||||
<div data-label="SimpleCitizen">Limited</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<div class="section-eyebrow">FAQ</div>
|
||||
<h2>Common questions about pricing</h2>
|
||||
</div>
|
||||
|
||||
<div class="faq">
|
||||
<div class="faq-item">
|
||||
<button class="faq-q">Are USCIS government filing fees included? <span class="plus"></span></button>
|
||||
<div class="faq-a">No. All prices on this page are platform fees only. USCIS filing fees (which vary by petition type and employer size) and optional premium processing ($2,965) are paid separately, directly to USCIS.</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-q">What's the difference between Self-serve and Attorney-reviewed? <span class="plus"></span></button>
|
||||
<div class="faq-a">Self-serve gives you the full AI-prepared filing package — petition narrative, evidence map, support letter frameworks, completed forms — for you to review and file yourself. Attorney-reviewed adds an Ivy / BigLaw-trained attorney who audits the package, annotates, and signs off before you file. Attorney engagement is via Abigail Legal Services, P.C. and establishes attorney-client privilege.</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-q">Is Abigail a law firm? <span class="plus"></span></button>
|
||||
<div class="faq-a">No. Abigail is an AI-native immigration platform. Self-serve users use Abigail as a document-preparation tool — no legal services are provided. Users who elect the Attorney-reviewed tier engage Abigail Legal Services, P.C. (a separately constituted attorney practice) for the legal review and sign-off.</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-q">Why is this so much cheaper than BigLaw? <span class="plus"></span></button>
|
||||
<div class="faq-a">Because AI handles the production work — intake, evidence mapping, drafting, form population — and our attorneys focus on review and judgment, not 20-plus hours of drafting per case. The cost structure of an AI-primary workflow is fundamentally different from a billable-hour model.</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-q">What happens if I receive an RFE after filing? <span class="plus"></span></button>
|
||||
<div class="faq-a">Attorney-reviewed tier includes an initial RFE assessment. Full RFE responses are $799–$1,999 (attorney-reviewed). Lifecycle tier includes full RFE / NOID handling at no additional cost.</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-q">How does enterprise pricing work for employers? <span class="plus"></span></button>
|
||||
<div class="faq-a">Employer plans are annual SaaS subscriptions covering HR integration, compliance infrastructure, and the Company Master Profile. Per-filing fees (using the Individual case-type schedule) are charged on top. Enterprise tier can bundle prepaid filing volume for additional savings.</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-q">Can I upgrade from Self-serve to Attorney-reviewed later? <span class="plus"></span></button>
|
||||
<div class="faq-a">Yes. Any AI-prepared package can be elevated to attorney review at any time before filing — you pay the difference between tiers. Once you elect attorney review, a separate engagement letter with Abigail Legal Services, P.C. is signed.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section style="padding-top:0">
|
||||
<div class="container">
|
||||
<div class="cta-band" id="cta">
|
||||
<h2>Filing in 5 business days.<br>Not 5 weeks.</h2>
|
||||
<p>Join the beta. Start with a free AI visa screener — see your candidate pathways before paying a dollar.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="#" class="btn-primary">Start free screener</a>
|
||||
<a href="#" class="btn-secondary">Talk to founder</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="brand" style="color:var(--ink); margin-bottom:8px;">Abigail<span class="brand-dot">.</span></div>
|
||||
<div>AI-native immigration platform</div>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<div>
|
||||
<div style="color:var(--ink); font-weight:600; margin-bottom:8px;">Product</div>
|
||||
<div><a href="#">Individuals</a></div>
|
||||
<div><a href="#">Employers</a></div>
|
||||
<div><a href="#">Screener</a></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="color:var(--ink); font-weight:600; margin-bottom:8px;">Company</div>
|
||||
<div><a href="#">About</a></div>
|
||||
<div><a href="#">Security</a></div>
|
||||
<div><a href="#">Contact</a></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="color:var(--ink); font-weight:600; margin-bottom:8px;">Legal</div>
|
||||
<div><a href="#">Terms</a></div>
|
||||
<div><a href="#">Privacy</a></div>
|
||||
<div><a href="#">Legal services</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="disclaimer">
|
||||
Abigail Technologies, Inc. operates an AI-native immigration platform and does not provide legal services. Legal services, where elected, are provided by Abigail Legal Services, P.C. through a separate engagement letter. Information on this site is for general informational purposes and is not legal advice. Use of the platform's screener output does not constitute an attorney-client relationship.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Resources dropdown
|
||||
const dd = document.getElementById("resourcesDropdown");
|
||||
if (dd) {
|
||||
const trigger = dd.querySelector(".nav-trigger");
|
||||
trigger.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
dd.classList.toggle("open");
|
||||
});
|
||||
document.addEventListener("click", () => dd.classList.remove("open"));
|
||||
dd.querySelector(".dropdown-menu").addEventListener("click", (e) => e.stopPropagation());
|
||||
}
|
||||
|
||||
// Toggle between Individual / Employer
|
||||
const buttons = document.querySelectorAll(".toggle button");
|
||||
const panels = document.querySelectorAll(".panel");
|
||||
function activatePanel(target) {
|
||||
buttons.forEach(b => b.classList.toggle("active", b.dataset.panel === target));
|
||||
panels.forEach(p => p.classList.toggle("active", p.dataset.panel === target));
|
||||
}
|
||||
buttons.forEach(btn => {
|
||||
btn.addEventListener("click", () => activatePanel(btn.dataset.panel));
|
||||
});
|
||||
|
||||
// Nav links → drive the toggle + scroll to hero
|
||||
document.querySelectorAll("[data-nav-panel]").forEach(link => {
|
||||
link.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
activatePanel(link.dataset.navPanel);
|
||||
document.querySelector(".hero").scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
});
|
||||
|
||||
// FAQ accordion
|
||||
document.querySelectorAll(".faq-q").forEach(q => {
|
||||
q.addEventListener("click", () => {
|
||||
q.parentElement.classList.toggle("open");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
234
index.html
Normal file
234
index.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Abigail — AI-native immigration platform</title>
|
||||
<meta name="description" content="AI does the work. Attorneys ensure the quality. Clients pay for the result, not the hours.">
|
||||
<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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--ink: #0A0E1A;
|
||||
--ink-2: #1A1F2E;
|
||||
--paper: #FAFAF7;
|
||||
--paper-2: #F2F2EE;
|
||||
--signal: #2E6BFF;
|
||||
--signal-2: #1E50CC;
|
||||
--mute: #8A8F99;
|
||||
--mute-2: #C7C9CE;
|
||||
--rule: #E5E5E0;
|
||||
--rule-dark: #2A2F3D;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||||
|
||||
nav {
|
||||
border-bottom: 1px solid var(--rule-dark);
|
||||
}
|
||||
nav .container {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
height: 64px;
|
||||
}
|
||||
.brand { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
|
||||
.brand-dot { color: var(--signal); }
|
||||
.nav-links { display: flex; gap: 32px; font-size: 14px; }
|
||||
.nav-links a { color: var(--mute-2); transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--paper); }
|
||||
|
||||
.hero {
|
||||
padding: 120px 0 80px;
|
||||
text-align: center;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 12px; font-weight: 600;
|
||||
color: var(--signal);
|
||||
letter-spacing: 0.12em; text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
font-weight: 700;
|
||||
line-height: 1.04;
|
||||
letter-spacing: -0.03em;
|
||||
margin: 0 0 24px;
|
||||
max-width: 920px;
|
||||
margin-left: auto; margin-right: auto;
|
||||
}
|
||||
h1 em { font-style: normal; color: var(--signal); }
|
||||
.lead {
|
||||
font-size: 19px;
|
||||
color: var(--mute-2);
|
||||
max-width: 640px;
|
||||
margin: 0 auto 16px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.three-lines {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 13px;
|
||||
color: var(--mute);
|
||||
letter-spacing: 0.02em;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.three-lines span { color: var(--signal); }
|
||||
|
||||
.ctas {
|
||||
display: inline-flex; gap: 12px;
|
||||
margin-bottom: 80px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn {
|
||||
padding: 16px 28px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600; font-size: 15px;
|
||||
transition: all 0.15s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--signal); color: white;
|
||||
}
|
||||
.btn-primary:hover { background: var(--signal-2); }
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--paper);
|
||||
border-color: var(--rule-dark);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--mute-2);
|
||||
background: var(--ink-2);
|
||||
}
|
||||
|
||||
.doors {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
max-width: 880px;
|
||||
margin-left: auto; margin-right: auto;
|
||||
}
|
||||
.door {
|
||||
background: var(--ink-2);
|
||||
border: 1px solid var(--rule-dark);
|
||||
border-radius: 20px;
|
||||
padding: 36px;
|
||||
text-align: left;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
.door:hover {
|
||||
border-color: var(--signal);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.door-label {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 11px;
|
||||
color: var(--signal);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.door h2 {
|
||||
font-size: 26px; font-weight: 700;
|
||||
letter-spacing: -0.015em;
|
||||
margin: 0 0 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.door p {
|
||||
font-size: 15px;
|
||||
color: var(--mute-2);
|
||||
margin: 0 0 24px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.door-link {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--paper);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.door:hover .door-link { color: var(--signal); }
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--rule-dark);
|
||||
padding: 32px 0;
|
||||
margin-top: 96px;
|
||||
font-size: 12px;
|
||||
color: var(--mute);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
h1 { font-size: 44px; }
|
||||
.hero { padding: 64px 0 48px; }
|
||||
.doors { grid-template-columns: 1fr; }
|
||||
.nav-links { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a class="brand" href="/">Abigail<span class="brand-dot">.</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="/individuals">Individuals</a>
|
||||
<a href="/employers">Employers</a>
|
||||
<a href="/library">Library</a>
|
||||
<a href="/pricing">Pricing</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="eyebrow">AI-native immigration platform</div>
|
||||
<h1>Immigration, <em>rebuilt</em> for the people doing the work.</h1>
|
||||
<p class="lead">For high-skill individuals and the companies that hire them.</p>
|
||||
<div class="three-lines">
|
||||
<span>AI does the work.</span> Attorneys ensure the quality. <span>Clients pay for the result, not the hours.</span>
|
||||
</div>
|
||||
|
||||
<div class="ctas">
|
||||
<a href="/individuals" class="btn btn-primary">Start with the free screener</a>
|
||||
<a href="/employers" class="btn btn-secondary">Book an enterprise demo</a>
|
||||
</div>
|
||||
|
||||
<div class="doors">
|
||||
<a class="door" href="/individuals">
|
||||
<div class="door-label">For individuals</div>
|
||||
<h2>Find your visa. Build your filing.</h2>
|
||||
<p>Multi-visa AI screener, TurboTax-style intake, AI-drafted petition narrative, optional attorney review by Ivy / BigLaw-trained counsel.</p>
|
||||
<span class="door-link">Explore individuals →</span>
|
||||
</a>
|
||||
<a class="door" href="/employers">
|
||||
<div class="door-label">For employers</div>
|
||||
<h2>Run immigration as infrastructure.</h2>
|
||||
<p>Live HRIS integration, zero-touch form generation, automated 5-year compliance. Replace the data courier between HR and outside counsel.</p>
|
||||
<span class="door-link">Explore employers →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
© 2026 Abigail Technologies, Inc. · Not a law firm. Legal services where elected provided by Abigail Legal Services, P.C. under separate engagement.
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
20
vercel.json
Normal file
20
vercel.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"cleanUrls": true,
|
||||
"trailingSlash": false,
|
||||
"rewrites": [
|
||||
{ "source": "/pricing", "destination": "/abigail_pricing" },
|
||||
{ "source": "/individuals", "destination": "/abigail_individuals" },
|
||||
{ "source": "/employers", "destination": "/abigail_employers" },
|
||||
{ "source": "/library", "destination": "/abigail_library" }
|
||||
],
|
||||
"headers": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"headers": [
|
||||
{ "key": "X-Content-Type-Options", "value": "nosniff" },
|
||||
{ "key": "X-Frame-Options", "value": "SAMEORIGIN" },
|
||||
{ "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user