[ LOADING ]
Before Sailop: average score across 7 dimensions.
43 rules across 7 dimensions of analysis.
| Dimension | Rules | Weight | Example patterns | Severity |
|---|---|---|---|---|
| Layout | 8 | 14% | centered-hero, sym-grid, 3-col cards | high |
| Color | 7 | 12% | blue-500, indigo-gradient, gray-600 | med |
| Typography | 6 | 13% | Inter, Roboto, Poppins defaults | high |
| Animation | 5 | 11% | fade-up, pulse, ease-in-out 300 | med |
| Components | 8 | 18% | blur-nav, glass-card, 3-dot terminal | high |
| Structure | 5 | 16% | div-soup, no ::selection, no a11y | low |
| Patterns | 4 | 16% | template-sequence, uniform spacing | med |
Side-by-side: what the scanner finds, what the transformer outputs.
// page.tsx — before sailop
export default function Landing() {
return (
<main className="min-h-screen bg-white">
<section className="text-center py-20">
<h1 className="text-5xl font-bold
bg-gradient-to-r from-blue-500
to-indigo-600 bg-clip-text
text-transparent">
Welcome to Our Platform
</h1>
<p className="mt-4 text-gray-600">
The all-in-one solution for teams.
</p>
<button className="mt-8 px-8 py-3
bg-blue-500 rounded-xl">
npx sailop install
</button>
</section>
</main>
);
}// page.tsx — after sailop
export default function Landing() {
return (
<main style={{
minHeight: '100vh',
background: '#0c0f14',
fontFamily: 'Work Sans',
}}>
<section style={{
padding: '120px 40px 80px',
borderBottom: '1px solid #1e2430',
}}>
<h1 style={{
fontFamily: 'Space Mono',
fontSize: 'clamp(2.4rem, 5vw, 3.6rem)',
color: '#d4dae6',
}}>
Every site looks the same.
</h1>
<button style={{
marginTop: '40px',
padding: '14px 32px',
background: '#e07a3a',
color: '#0c0f14',
}}>
Scan your code
</button>
</section>
</main>
);
}Free scanner. $39/mo for pro. Done.