1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281import {
ArrowRight,
BookOpen,
Building2,
Eye,
Globe,
Handshake,
Heading,
Layout,
Scan,
Users,
} from 'lucide-react';
import { Link } from 'react-router-dom';
import reflowIconPng from '../assets/equalify-reflow-icon.png';
export const Home = () => {
return (
<div>
{/* Hero */}
<section className="bg-gradient-to-br from-uic-blue to-uic-blue/90 text-white py-20">
<div className="container mx-auto px-4 text-center">
<img src={reflowIconPng} alt="" className="h-24 mx-auto mb-6 drop-shadow-lg" />
<h1 className="text-4xl md:text-5xl font-bold mb-6">
Equalify Reflow
</h1>
<p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
Escaping static files into semantic freedom. An open-source pipeline that converts PDFs into accessible, reflowable content.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link
to="/docs/how-it-works"
className="inline-flex items-center gap-2 bg-uic-red hover:bg-uic-red/90 text-white px-6 py-3 rounded-lg font-medium transition-colors"
>
<BookOpen className="w-5 h-5" aria-hidden="true" />
How It Works
</Link>
<Link
to="/partner"
className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors border border-white/20"
>
<Handshake className="w-5 h-5" aria-hidden="true" />
Become a Partner
</Link>
</div>
</div>
</section>
{/* The Problem */}
<section className="py-16 bg-white">
<div className="container mx-auto px-4 max-w-4xl">
<h2 className="text-3xl font-bold text-uic-blue text-center mb-4">The Problem</h2>
<p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
PDFs are visual-first documents designed for print fidelity. Accessibility is bolted on after the fact, the spec is controlled by a private company, and every document update means redoing its tagging.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-10">
<StatCard value="200,000+" label="PDFs uploaded at UIC in 2023 alone" />
<StatCard value="$5–12" label="per page for manual remediation" accent />
<StatCard value="$1M+" label="annual cost at even the cheapest rate" />
</div>
</div>
</section>
{/* The Escape */}
<section className="py-16 bg-gray-50">
<div className="container mx-auto px-4 max-w-4xl">
<h2 className="text-3xl font-bold text-uic-blue text-center mb-4">The Escape</h2>
<p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
Stop fixing the container. Extract the content and rebuild it in a format that is natively accessible.
</p>
{/* PDF → Markdown → HTML flow */}
<ol className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 mb-12 list-none p-0 m-0">
<li>
<FormatCard
title="PDF"
subtitle="Visual-first"
detail="Print fidelity"
className="bg-uic-blue text-white"
/>
</li>
<ArrowRight className="w-6 h-6 text-uic-red rotate-90 md:rotate-0 shrink-0" aria-hidden="true" />
<li>
<FormatCard
title="Markdown"
subtitle="Semantic"
detail="Human-readable, open"
className="bg-white text-gray-900 border-2 border-amber-400"
/>
</li>
<ArrowRight className="w-6 h-6 text-uic-red rotate-90 md:rotate-0 shrink-0" aria-hidden="true" />
<li>
<FormatCard
title="HTML"
subtitle="Accessible by"
detail="construction"
className="bg-uic-blue text-white"
/>
</li>
</ol>
<div className="bg-white rounded-lg p-8 border border-gray-200 max-w-2xl mx-auto">
<p className="text-gray-700 text-center">
<strong className="text-uic-blue">AI acting as a semantic translator.</strong> Multimodal AI models can process both images and text, giving them an understanding of visual language and the coding knowledge to express it as semantic structure. This means translating from a visual layout to accessible HTML is a natural fit for what these models already do.
</p>
</div>
</div>
</section>
{/* The Pipeline */}
<section className="py-16 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-uic-blue text-center mb-4">The Pipeline</h2>
<p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
Five stages, from raw PDF to reflowable, accessible content.
</p>
<ol className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 max-w-6xl mx-auto list-none p-0 m-0">
<li>
<PipelineCard
icon={<Scan className="w-7 h-7" aria-hidden="true" />}
stage="1"
title="Docling Extraction"
description="IBM Docling handles the first pass using smaller, efficient models. Produces a first-pass markdown covering text blocks, tables, images, and reading order — roughly 70% of the way there."
/>
</li>
<li>
<PipelineCard
icon={<Eye className="w-7 h-7" aria-hidden="true" />}
stage="2"
title="Structure Analysis"
description="Classifies the document type — poster, paper, syllabus — and flags key elements like columns, tables, and images. This context dynamically tunes how later stages process each page."
/>
</li>
<li>
<PipelineCard
icon={<Heading className="w-7 h-7" aria-hidden="true" />}
stage="3"
title="Headings First"
description="Heading hierarchy is the backbone of document accessibility. A dedicated pass infers heading levels from visual signals: size, weight, position, spacing."
/>
</li>
<li>
<PipelineCard
icon={<Users className="w-7 h-7" aria-hidden="true" />}
stage="4"
title="The Translator"
description="A multimodal LLM compares each visual page to its markdown and makes tool-call edits with reasoning. Alt text and table tasks spawn specialist sub-agents."
/>
</li>
<li>
<PipelineCard
icon={<Layout className="w-7 h-7" aria-hidden="true" />}
stage="5"
title="Escape the Page"
description="Merges all pages into one document. AI fixes boundary artifacts — split words, broken tables and lists — producing reflowable, responsive content."
/>
</li>
</ol>
<div className="text-center mt-8">
<Link
to="/docs/how-it-works"
className="inline-flex items-center gap-2 text-uic-red hover:text-uic-red/80 font-medium transition-colors"
>
Read the full technical overview
<ArrowRight className="w-4 h-4" aria-hidden="true" />
</Link>
</div>
</div>
</section>
{/* The Economics */}
<section className="py-16 bg-gradient-to-br from-uic-blue to-uic-blue/90 text-white">
<div className="container mx-auto px-4 max-w-4xl">
<h2 className="text-3xl font-bold text-center mb-12">The Economics</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div className="bg-white rounded-lg p-8 text-center">
<p className="text-sm text-gray-500 mb-2">Manual Remediation</p>
<p className="text-4xl font-bold text-uic-red mb-2">$5–12 / page</p>
<p className="text-gray-600">= $1,000,000+ annually</p>
<p className="text-sm text-gray-500 mt-2 italic">Recurring cost. Resets with every update.</p>
</div>
<div className="bg-white rounded-lg p-8 text-center">
<p className="text-sm text-gray-500 mb-2">Equalify Reflow</p>
<p className="text-4xl font-bold text-uic-blue mb-2">~$0.20 / page</p>
<p className="text-gray-600">= ~$40,000 annually</p>
<p className="text-sm text-gray-500 mt-2 italic">Improves as models improve. Compounds.</p>
</div>
</div>
<p className="text-center text-3xl font-bold text-cyan-300 mb-6">25x cost reduction</p>
<div className="text-center mt-2">
<Link
to="/docs/sources"
className="inline-flex items-center gap-2 text-cyan-300 hover:text-white font-medium transition-colors text-sm"
>
See pricing sources
<ArrowRight className="w-4 h-4" aria-hidden="true" />
</Link>
</div>
</div>
</section>
{/* Open Source & Partnership */}
<section className="py-16 bg-white">
<div className="container mx-auto px-4 max-w-4xl">
<h2 className="text-3xl font-bold text-uic-blue text-center mb-4">Open Source</h2>
<p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
Built in the open. Shaped by the community. Licensed under AGPL.<br />
Supported by the <a href="https://osf.it.uic.edu/" className="text-uic-blue underline hover:text-uic-red transition-colors">UIC Technology Solutions Open Source Fund</a>.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<PhaseCard
icon={<Building2 className="w-7 h-7" aria-hidden="true" />}
title="Phase 1: UIC"
description="Tight feedback loops, real document collections, iterative improvement."
/>
<PhaseCard
icon={<Handshake className="w-7 h-7" aria-hidden="true" />}
title="Phase 2: Partners"
description="Early access, roadmap influence, pressure-testing across document types."
/>
<PhaseCard
icon={<Globe className="w-7 h-7" aria-hidden="true" />}
title="Phase 3: Public"
description="AGPL license — adopt, run, improve, contribute back."
/>
</div>
<div className="bg-uic-blue rounded-lg p-8 text-white text-center">
<p className="font-bold text-lg mb-2">Partners get: Early access + Roadmap commenting</p>
<p className="text-blue-100 text-sm mb-4">
We need accessibility experts, institutions with real document collections, and practitioners who understand day-to-day remediation.
</p>
<Link
to="/partner"
className="inline-flex items-center gap-2 bg-uic-red hover:bg-uic-red/90 text-white px-6 py-3 rounded-lg font-medium transition-colors"
>
Sign Up for Early Access
<ArrowRight className="w-4 h-4" aria-hidden="true" />
</Link>
</div>
</div>
</section>
</div>
);
};
const StatCard = ({ value, label, accent }: { value: string; label: string; accent?: boolean }) => (
<div className="text-center">
<p className={`text-4xl font-bold mb-2 ${accent ? 'text-uic-red' : 'text-uic-blue'}`}>{value}</p>
<p className="text-sm text-gray-600">{label}</p>
</div>
);
const FormatCard = ({ title, subtitle, detail, className }: { title: string; subtitle: string; detail: string; className: string }) => (
<div className={`rounded-lg p-6 text-center min-w-[160px] ${className}`}>
<p className="text-2xl font-bold mb-1">{title}</p>
<p className="text-sm opacity-80">{subtitle}</p>
<p className="text-sm opacity-80">{detail}</p>
</div>
);
const PipelineCard = ({ icon, stage, title, description }: { icon: React.ReactNode; stage: string; title: string; description: string }) => (
<div className="text-center p-5 bg-gray-50 rounded-lg border border-gray-200 h-full">
<div className="inline-flex items-center justify-center w-14 h-14 bg-uic-blue/10 text-uic-blue rounded-full mb-3">
{icon}
</div>
<p className="text-xs font-semibold text-uic-red uppercase tracking-wide mb-1">Stage {stage}</p>
<h3 className="text-sm font-bold text-gray-900 mb-2">{title}</h3>
<p className="text-xs text-gray-600 leading-relaxed">{description}</p>
</div>
);
const PhaseCard = ({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) => (
<div className="text-center p-6 bg-gray-50 rounded-lg border border-gray-200">
<div className="inline-flex items-center justify-center w-14 h-14 bg-uic-blue/10 text-uic-blue rounded-full mb-3">
{icon}
</div>
<h3 className="font-bold text-gray-900 mb-2">{title}</h3>
<p className="text-sm text-gray-600">{description}</p>
</div>
);