Files
abigail-site/v1/index.html

477 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Abigail — AI-native O-1 &amp; EB-1 representation</title>
<meta name="description" content="Attorney-led O-1A, EB-1A, and EB-2 NIW representation, powered by AI. Evidence-building services, flat fees, no retainers.">
<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">
<link rel="stylesheet" href="styles.css">
<style>
/* Homepage-specific styles */
.hero {
padding: 96px 0 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: -200px; left: 50%;
transform: translateX(-50%);
width: 800px; height: 400px;
background: radial-gradient(ellipse at center, rgba(46,107,255,0.12) 0%, transparent 65%);
pointer-events: none;
}
.hero h1 {
font-size: 72px;
line-height: 1.02;
letter-spacing: -0.03em;
margin: 0 auto 24px;
max-width: 920px;
position: relative;
}
.hero p.lead {
font-size: 19px;
color: var(--mute);
max-width: 620px;
margin: 0 auto 36px;
position: relative;
}
.hero-ctas {
display: inline-flex; gap: 12px;
margin-bottom: 24px;
position: relative;
flex-wrap: wrap;
justify-content: center;
}
.hero-trust {
font-family: "JetBrains Mono", monospace;
font-size: 13px;
color: var(--mute);
letter-spacing: 0.02em;
position: relative;
}
.hero-trust span { color: var(--signal); font-weight: 600; }
/* Pillars */
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.pillar {
background: #FFFFFF;
border: 1px solid var(--rule);
border-radius: 18px;
padding: 32px;
position: relative;
transition: transform 0.15s, border-color 0.15s;
}
html.dark .pillar { background: var(--ink-2); }
.pillar:hover { transform: translateY(-3px); border-color: var(--signal); }
.pillar-num {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--signal);
letter-spacing: 0.08em;
margin-bottom: 16px;
font-weight: 600;
}
.pillar h3 {
font-size: 22px; font-weight: 700;
letter-spacing: -0.015em;
margin: 0 0 12px;
}
.pillar p {
font-size: 15px;
color: var(--mute);
line-height: 1.6;
margin: 0 0 20px;
}
.pillar-link {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink);
display: inline-flex; align-items: center; gap: 6px;
}
.pillar:hover .pillar-link { color: var(--signal); }
/* Credential strip */
.credentials-strip {
background: var(--ink);
color: var(--paper);
padding: 48px 0;
}
.cred-strip-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.cred-strip-item .num {
font-size: 36px;
font-weight: 700;
color: var(--signal);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 6px;
}
.cred-strip-item .label {
font-size: 13px;
color: var(--mute-2);
}
/* Evidence services */
.evidence-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.ev-card {
background: var(--paper-2);
border-radius: 16px;
padding: 28px;
border: 1px solid transparent;
transition: all 0.15s;
}
html.dark .ev-card { background: var(--ink-2); }
.ev-card:hover {
border-color: var(--signal);
background: #FFFFFF;
}
html.dark .ev-card:hover { background: var(--ink-2); }
.ev-card .crit {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--signal);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
font-weight: 600;
}
.ev-card h3 {
font-size: 18px; font-weight: 600;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.ev-card p {
font-size: 14px;
color: var(--mute);
margin: 0 0 16px;
line-height: 1.55;
}
.ev-card .arrow {
font-size: 12px;
font-weight: 600;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.ev-card:hover .arrow { color: var(--signal); }
/* Process row */
.process-row {
background: var(--paper-2);
border-radius: 24px;
padding: 56px 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
html.dark .process-row { background: var(--ink-2); }
.process-row h2 {
font-size: 32px; font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 20px;
}
.process-row p {
font-size: 16px;
color: var(--mute);
line-height: 1.6;
margin: 0 0 24px;
}
.step-list {
list-style: none; padding: 0; margin: 0;
}
.step-list li {
display: flex; gap: 16px;
padding: 16px 0;
border-top: 1px solid var(--rule);
font-size: 14px;
}
.step-list li:first-child { border-top: 0; padding-top: 0; }
.step-list .num {
font-family: "JetBrains Mono", monospace;
color: var(--signal);
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
width: 28px;
}
.step-list .step-content {
font-weight: 500;
}
.step-list .step-content small {
display: block;
color: var(--mute);
font-weight: 400;
margin-top: 2px;
}
@media (max-width: 880px) {
.hero h1 { font-size: 44px; }
.pillars, .evidence-grid, .cred-strip-grid {
grid-template-columns: 1fr;
}
.cred-strip-grid { gap: 32px; }
.process-row { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; }
}
</style>
</head>
<body>
<nav>
<div class="container">
<a class="brand" href="/">Abigail<span class="brand-dot">.</span></a>
<div class="nav-links">
<a href="press.html">Press</a>
<a href="judging.html">Judging</a>
<a href="services.html">Services</a>
<a href="attorneys.html">Attorneys</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="petitions.html">Petitions</a>
<a href="#">Articles</a>
<a href="#">Events</a>
<a href="#">Careers</a>
</div>
</div>
<a href="login.html" class="nav-login">Log in</a>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
</button>
<a href="login.html#signup" class="nav-cta">Sign up</a>
</div>
</div>
</nav>
<section class="hero">
<div class="container">
<h1>Attorney-led O-1 &amp; EB-1.<br>Powered by <em>AI.</em></h1>
<p class="lead">Abigail combines an AI drafting engine with Ivy / BigLaw-trained attorneys. Flat fees, 5-business-day prep, no retainers — for extraordinary-ability cases.</p>
<div class="hero-ctas">
<a href="login.html#signup" class="btn btn-primary">Sign up</a>
<a href="services.html" class="btn btn-secondary">See services</a>
</div>
<div class="hero-trust">
<span>Flat fees.</span> &nbsp; No retainers. &nbsp; <span>Ivy / BigLaw attorneys.</span>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-head">
<h2>What we do.</h2>
<p>Three coordinated layers — filing, evidence, lifecycle — under one engagement.</p>
</div>
<div class="pillars">
<div class="pillar">
<div class="pillar-num">PILLAR 01</div>
<h3>Filing</h3>
<p>AI builds the petition narrative, evidence map, support letter frameworks, and forms. An Ivy / BigLaw-trained attorney reviews, annotates, and signs. 5-business-day turnaround.</p>
<a class="pillar-link" href="services.html">See filing tiers →</a>
</div>
<div class="pillar">
<div class="pillar-num">PILLAR 02</div>
<h3>Evidence</h3>
<p>Optional services that strengthen the criteria where applicants commonly fall short — press placement for Criterion 3 and peer-review intros for Criterion 4.</p>
<a class="pillar-link" href="press.html">See evidence services →</a>
</div>
<div class="pillar">
<div class="pillar-num">PILLAR 03</div>
<h3>Lifecycle</h3>
<p>Continuous attorney representation from intake to filing to RFE response to extension. One named attorney across the entire arc, not a rotating cast.</p>
<a class="pillar-link" href="attorneys.html">Meet the network →</a>
</div>
</div>
</div>
</section>
<section class="credentials-strip">
<div class="container">
<div class="cred-strip-grid">
<div class="cred-strip-item">
<div class="num">5 days</div>
<div class="label">Target prep, intake to attorney-ready</div>
</div>
<div class="cred-strip-item">
<div class="num">Ivy / BigLaw</div>
<div class="label">The credential floor for every reviewing attorney</div>
</div>
<div class="cred-strip-item">
<div class="num">Flat fees</div>
<div class="label">No retainers, no hourly billing, no scope creep</div>
</div>
<div class="cred-strip-item">
<div class="num">150+</div>
<div class="label">Founder's in-house immigration matters managed</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-head">
<h2>The evidence layer.</h2>
<p>Most O-1A and EB-1A denials trace to two criteria: <strong>published material</strong> and <strong>judging</strong>. We help close the gap before filing.</p>
</div>
<div class="evidence-grid">
<a class="ev-card" href="press.html">
<div class="crit">Criterion 3</div>
<h3>Press &amp; Media Support</h3>
<p>Editorial outreach to publications that qualify for USCIS — no paid placements, no fake bylines.</p>
<span class="arrow">Learn more →</span>
</a>
<a class="ev-card" href="judging.html">
<div class="crit">Criterion 4</div>
<h3>Peer-Review Intros</h3>
<p>Matched introductions to journals, conferences, and grant panels actively recruiting reviewers in your field.</p>
<span class="arrow">Learn more →</span>
</a>
<a class="ev-card" href="petitions.html">
<div class="crit">Resource</div>
<h3>Petition Anatomy</h3>
<p>Browse every petition type we cover — what USCIS wants, where filings go wrong, and our exhibit-mapping playbook.</p>
<span class="arrow">Browse petitions →</span>
</a>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="process-row">
<div>
<h2>From intake to filing-ready in five business days.</h2>
<p>Most attorney-only firms quote 46 weeks. Even AI-assisted firms quote 2 weeks. Abigail's AI does the work in parallel with evidence collection — your package is ready when your last document arrives.</p>
<a href="services.html" class="btn btn-primary">See how it works</a>
</div>
<ul class="step-list">
<li>
<span class="num">01</span>
<div class="step-content">Intake &amp; document upload<small>AI classifies, extracts, and runs consistency checks the moment you upload.</small></div>
</li>
<li>
<span class="num">02</span>
<div class="step-content">AI drafts your package<small>Petition narrative, support letter frameworks, evidence map, cover letter — all grounded in your facts.</small></div>
</li>
<li>
<span class="num">03</span>
<div class="step-content">Attorney reviews &amp; signs<small>35 business-day turnaround. Engagement via Abigail Legal Services, P.C.</small></div>
</li>
<li>
<span class="num">04</span>
<div class="step-content">Filed &amp; tracked<small>USCIS receipt tracked. Alerts proactive. RFE response capability built in.</small></div>
</li>
</ul>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="cta-band">
<h2>Ready when you are.</h2>
<p>Sign up to be matched with an attorney and start your filing. Or read the services overview first.</p>
<div class="cta-buttons">
<a href="login.html#signup" class="btn btn-primary">Sign up</a>
<a href="services.html" class="btn btn-secondary">See services</a>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div>
<div class="brand" style="color:var(--ink); margin-bottom:8px;">Abigail<span class="brand-dot">.</span></div>
<div>Attorney-led, AI-powered</div>
</div>
<div class="footer-links">
<div>
<div style="color:var(--ink); font-weight:600; margin-bottom:8px;">Services</div>
<div><a href="services.html">All services</a></div>
<div><a href="press.html">Press</a></div>
<div><a href="judging.html">Judging</a></div>
<div><a href="attorneys.html">Attorneys</a></div>
</div>
<div>
<div style="color:var(--ink); font-weight:600; margin-bottom:8px;">Resources</div>
<div><a href="petitions.html">Petitions</a></div>
<div><a href="#">Articles</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;">Account</div>
<div><a href="login.html">Log in</a></div>
<div><a href="login.html#signup">Sign up</a></div>
<div><a href="#">Terms</a></div>
<div><a href="#">Privacy</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. Evidence-building services are non-legal professional services and do not guarantee specific outcomes. Use of the platform does not constitute legal advice or create an attorney-client relationship.
</div>
</div>
</footer>
<script>
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());
}
// Theme toggle with localStorage
const THEME_KEY = "abigail-theme";
const root = document.documentElement;
const stored = localStorage.getItem(THEME_KEY);
if (stored === "dark") root.classList.add("dark");
const toggle = document.getElementById("themeToggle");
if (toggle) {
toggle.addEventListener("click", () => {
root.classList.toggle("dark");
localStorage.setItem(THEME_KEY, root.classList.contains("dark") ? "dark" : "light");
});
}
</script>
</body>
</html>