Skip to content

Commit 7592708

Browse files
sukru-can1claude
sukru-can1
and
claude
committed
feat: redesign landing page with AIO messaging, attribution, frameworks section
- Hero: "Is your website invisible to AI?" — leads with visibility - Problem: invisible to AI, scraped without credit, HTML soup - New AIO section: AI Visibility, AI Attribution, AI Monetization tiers - Solution: updated code example with attribution + access fields - New Frameworks section: all 6 npm packages with CLI demo - Roadmap: reflects current progress (spec + plugins done) - flyweb.json: updated with attribution fields Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 80f112d commit 7592708

8 files changed

Lines changed: 262 additions & 58 deletions

File tree

‎public/.well-known/flyweb.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,20 @@
33
"entity": "FlyWeb Protocol",
44
"type": "docs",
55
"url": "https://flyweb.io",
6-
"description": "The open protocol that makes the internet machine-readable.",
6+
"description": "The open protocol that makes the internet machine-readable. SEO for the AI era.",
7+
"attribution": {
8+
"required": true,
9+
"format": "Source: {entity} — {url}",
10+
"license": "MIT",
11+
"must_link": true
12+
},
713
"resources": {
814
"spec": {
915
"path": "/.flyweb/spec",
1016
"format": "json",
1117
"fields": ["version", "title", "description", "layers", "schema"],
12-
"description": "The FlyWeb protocol specification"
18+
"description": "The FlyWeb protocol specification",
19+
"access": "free"
1320
}
1421
}
1522
}

‎src/components/AIO.astro‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<section id="aio" class="section-container">
2+
<div class="fade-in text-center mb-16">
3+
<p class="text-xs font-mono text-fw-mint mb-4 tracking-widest uppercase">AI Optimization</p>
4+
<h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
5+
SEO took 20 years. <span class="text-fw-mint">AIO takes 5 minutes.</span>
6+
</h2>
7+
<p class="text-fw-muted text-lg max-w-2xl mx-auto">FlyWeb does three things for your website. Pick one. Pick all three. Start free.</p>
8+
</div>
9+
10+
<div class="grid md:grid-cols-3 gap-5 max-w-5xl mx-auto">
11+
<div class="fade-in bg-fw-surface/40 border border-fw-border rounded-xl p-7 hover:border-fw-mint/30 transition-colors relative overflow-hidden">
12+
<div class="absolute top-0 right-0 w-24 h-24 bg-fw-mint/[0.04] rounded-bl-full"></div>
13+
<div class="text-3xl mb-4">&#128269;</div>
14+
<h3 class="font-display text-xl font-bold mb-3 text-fw-mint">AI Visibility</h3>
15+
<p class="text-sm text-fw-muted leading-relaxed mb-4">
16+
AI agents find and cite your content. When someone asks "best engagement ring under $2000" &mdash;
17+
<span class="text-fw-text">your product is in the answer.</span>
18+
</p>
19+
<div class="flex items-center gap-2 text-xs font-mono text-fw-mint/70">
20+
<span class="w-1.5 h-1.5 rounded-full bg-fw-mint"></span>
21+
Free tier
22+
</div>
23+
</div>
24+
25+
<div class="fade-in bg-fw-surface/40 border border-fw-border rounded-xl p-7 hover:border-fw-mint/30 transition-colors relative overflow-hidden">
26+
<div class="absolute top-0 right-0 w-24 h-24 bg-fw-indigo/[0.04] rounded-bl-full"></div>
27+
<div class="text-3xl mb-4">&#128737;</div>
28+
<h3 class="font-display text-xl font-bold mb-3 text-fw-mint">AI Attribution</h3>
29+
<p class="text-sm text-fw-muted leading-relaxed mb-4">
30+
Every AI response <span class="text-fw-text">must credit you</span>. Machine-enforced attribution at the protocol level.
31+
Your words, your name. Always.
32+
</p>
33+
<div class="flex items-center gap-2 text-xs font-mono text-fw-mint/70">
34+
<span class="w-1.5 h-1.5 rounded-full bg-fw-mint"></span>
35+
Always on &mdash; non-negotiable
36+
</div>
37+
</div>
38+
39+
<div class="fade-in bg-fw-surface/40 border border-fw-border rounded-xl p-7 hover:border-fw-mint/30 transition-colors relative overflow-hidden">
40+
<div class="absolute top-0 right-0 w-24 h-24 bg-fw-mint/[0.04] rounded-bl-full"></div>
41+
<div class="text-3xl mb-4">&#128176;</div>
42+
<h3 class="font-display text-xl font-bold mb-3 text-fw-mint">AI Monetization</h3>
43+
<p class="text-sm text-fw-muted leading-relaxed mb-4">
44+
When you're ready, flip one config line from <code class="text-fw-mint text-xs font-mono">"free"</code> to <code class="text-fw-mint text-xs font-mono">"paid"</code>.
45+
Get paid when AI reads your content.
46+
</p>
47+
<div class="flex items-center gap-2 text-xs font-mono text-fw-muted/50">
48+
<span class="w-1.5 h-1.5 rounded-full bg-fw-muted/40"></span>
49+
Coming soon
50+
</div>
51+
</div>
52+
</div>
53+
54+
<!-- Who benefits grid -->
55+
<div class="mt-16 grid sm:grid-cols-2 lg:grid-cols-4 gap-4 max-w-5xl mx-auto">
56+
<div class="fade-in text-center py-5 px-4 bg-fw-surface/20 border border-fw-border/50 rounded-lg">
57+
<div class="text-sm font-bold text-fw-text mb-1">Bloggers</div>
58+
<div class="text-xs text-fw-muted">Get cited. Get traffic.</div>
59+
</div>
60+
<div class="fade-in text-center py-5 px-4 bg-fw-surface/20 border border-fw-border/50 rounded-lg">
61+
<div class="text-sm font-bold text-fw-text mb-1">E-Commerce</div>
62+
<div class="text-xs text-fw-muted">Products in AI answers.</div>
63+
</div>
64+
<div class="fade-in text-center py-5 px-4 bg-fw-surface/20 border border-fw-border/50 rounded-lg">
65+
<div class="text-sm font-bold text-fw-text mb-1">News Publishers</div>
66+
<div class="text-xs text-fw-muted">Attribution + traffic back.</div>
67+
</div>
68+
<div class="fade-in text-center py-5 px-4 bg-fw-surface/20 border border-fw-border/50 rounded-lg">
69+
<div class="text-sm font-bold text-fw-text mb-1">Science &amp; Academics</div>
70+
<div class="text-xs text-fw-muted">Proper citations, always.</div>
71+
</div>
72+
</div>
73+
</section>

‎src/components/Frameworks.astro‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<section id="get-started" class="section-container">
2+
<div class="fade-in text-center mb-16">
3+
<p class="text-xs font-mono text-fw-mint mb-4 tracking-widest uppercase">Get started</p>
4+
<h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
5+
Your framework. <span class="text-fw-mint">5 minutes.</span>
6+
</h2>
7+
<p class="text-fw-muted text-lg max-w-2xl mx-auto">Install the plugin. AI agents discover your site. That's it.</p>
8+
</div>
9+
10+
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-5xl mx-auto mb-12">
11+
<!-- Next.js -->
12+
<a href="https://www.npmjs.com/package/next-flyweb" target="_blank" rel="noopener noreferrer"
13+
class="fade-in group bg-fw-surface/40 border border-fw-border rounded-xl p-6 hover:border-fw-mint/30 transition-all hover:-translate-y-0.5">
14+
<div class="flex items-center gap-3 mb-4">
15+
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center text-lg font-bold">N</div>
16+
<div>
17+
<div class="font-mono text-sm font-bold text-fw-text">next-flyweb</div>
18+
<div class="text-[11px] text-fw-muted font-mono">Next.js</div>
19+
</div>
20+
</div>
21+
<code class="text-[11px] text-fw-mint font-mono bg-fw-bg/50 px-2 py-1 rounded block">npm i next-flyweb</code>
22+
</a>
23+
24+
<!-- Astro -->
25+
<a href="https://www.npmjs.com/package/astro-flyweb" target="_blank" rel="noopener noreferrer"
26+
class="fade-in group bg-fw-surface/40 border border-fw-border rounded-xl p-6 hover:border-fw-mint/30 transition-all hover:-translate-y-0.5">
27+
<div class="flex items-center gap-3 mb-4">
28+
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center text-lg font-bold">A</div>
29+
<div>
30+
<div class="font-mono text-sm font-bold text-fw-text">astro-flyweb</div>
31+
<div class="text-[11px] text-fw-muted font-mono">Astro</div>
32+
</div>
33+
</div>
34+
<code class="text-[11px] text-fw-mint font-mono bg-fw-bg/50 px-2 py-1 rounded block">npm i astro-flyweb</code>
35+
</a>
36+
37+
<!-- SvelteKit -->
38+
<a href="https://www.npmjs.com/package/sveltekit-flyweb" target="_blank" rel="noopener noreferrer"
39+
class="fade-in group bg-fw-surface/40 border border-fw-border rounded-xl p-6 hover:border-fw-mint/30 transition-all hover:-translate-y-0.5">
40+
<div class="flex items-center gap-3 mb-4">
41+
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center text-lg font-bold">S</div>
42+
<div>
43+
<div class="font-mono text-sm font-bold text-fw-text">sveltekit-flyweb</div>
44+
<div class="text-[11px] text-fw-muted font-mono">SvelteKit</div>
45+
</div>
46+
</div>
47+
<code class="text-[11px] text-fw-mint font-mono bg-fw-bg/50 px-2 py-1 rounded block">npm i sveltekit-flyweb</code>
48+
</a>
49+
50+
<!-- Nuxt -->
51+
<a href="https://www.npmjs.com/package/nuxt-flyweb" target="_blank" rel="noopener noreferrer"
52+
class="fade-in group bg-fw-surface/40 border border-fw-border rounded-xl p-6 hover:border-fw-mint/30 transition-all hover:-translate-y-0.5">
53+
<div class="flex items-center gap-3 mb-4">
54+
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center text-lg font-bold">N</div>
55+
<div>
56+
<div class="font-mono text-sm font-bold text-fw-text">nuxt-flyweb</div>
57+
<div class="text-[11px] text-fw-muted font-mono">Nuxt / Vue</div>
58+
</div>
59+
</div>
60+
<code class="text-[11px] text-fw-mint font-mono bg-fw-bg/50 px-2 py-1 rounded block">npm i nuxt-flyweb</code>
61+
</a>
62+
63+
<!-- Express -->
64+
<a href="https://www.npmjs.com/package/express-flyweb" target="_blank" rel="noopener noreferrer"
65+
class="fade-in group bg-fw-surface/40 border border-fw-border rounded-xl p-6 hover:border-fw-mint/30 transition-all hover:-translate-y-0.5">
66+
<div class="flex items-center gap-3 mb-4">
67+
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center text-lg font-bold">E</div>
68+
<div>
69+
<div class="font-mono text-sm font-bold text-fw-text">express-flyweb</div>
70+
<div class="text-[11px] text-fw-muted font-mono">Express / Node.js</div>
71+
</div>
72+
</div>
73+
<code class="text-[11px] text-fw-mint font-mono bg-fw-bg/50 px-2 py-1 rounded block">npm i express-flyweb</code>
74+
</a>
75+
76+
<!-- Any site -->
77+
<div class="fade-in bg-fw-surface/40 border border-fw-border rounded-xl p-6 hover:border-fw-mint/30 transition-all">
78+
<div class="flex items-center gap-3 mb-4">
79+
<div class="w-8 h-8 rounded-lg bg-fw-mint/10 border border-fw-mint/20 flex items-center justify-center text-lg">&#9889;</div>
80+
<div>
81+
<div class="font-mono text-sm font-bold text-fw-text">flyweb CLI</div>
82+
<div class="text-[11px] text-fw-muted font-mono">Any website</div>
83+
</div>
84+
</div>
85+
<code class="text-[11px] text-fw-mint font-mono bg-fw-bg/50 px-2 py-1 rounded block">npx flyweb init</code>
86+
</div>
87+
</div>
88+
89+
<!-- CLI demo -->
90+
<div class="fade-in max-w-2xl mx-auto">
91+
<div class="bg-fw-surface/60 border border-fw-border rounded-xl overflow-hidden">
92+
<div class="flex items-center gap-2 px-4 py-3 border-b border-fw-border/60 bg-fw-bg/30">
93+
<div class="flex gap-1.5">
94+
<div class="w-2.5 h-2.5 rounded-full bg-[#ff5f57]"></div>
95+
<div class="w-2.5 h-2.5 rounded-full bg-[#febc2e]"></div>
96+
<div class="w-2.5 h-2.5 rounded-full bg-[#28c840]"></div>
97+
</div>
98+
<span class="text-fw-muted text-[11px] font-mono ml-2">terminal</span>
99+
</div>
100+
<div class="p-5 font-mono text-[13px] leading-[1.8]">
101+
<div><span class="text-fw-muted">$</span> <span class="text-fw-text">npx flyweb check https://flyweb.io</span></div>
102+
<div class="mt-2"><span class="text-green-400">&#10003;</span> <span class="text-fw-muted">Found /.well-known/flyweb.json</span></div>
103+
<div><span class="text-green-400">&#10003;</span> <span class="text-fw-muted">Valid FlyWeb v1.0 config</span></div>
104+
<div><span class="text-green-400">&#10003;</span> <span class="text-fw-muted">Entity:</span> <span class="text-fw-text font-bold">FlyWeb</span> <span class="text-fw-muted">(docs)</span></div>
105+
<div><span class="text-green-400">&#10003;</span> <span class="text-fw-muted">Attribution:</span> <span class="text-yellow-400">required</span></div>
106+
<div><span class="text-green-400">&#10003;</span> <span class="text-fw-muted">Resources: spec, examples</span></div>
107+
<div class="mt-2"><span class="text-green-400 font-bold">All checks passed!</span></div>
108+
</div>
109+
</div>
110+
</div>
111+
</section>

‎src/components/Hero.astro‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,32 @@
1414
</div>
1515

1616
<h1 class="font-display text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-800 tracking-tight leading-[1.08] mb-6">
17-
Make the internet<br />
18-
<span class="text-fw-mint">machine-readable.</span>
17+
Is your website<br />
18+
<span class="text-fw-mint">invisible to AI?</span>
1919
</h1>
2020

2121
<p class="text-base sm:text-lg text-fw-muted leading-relaxed mb-8 max-w-lg">
22-
<span class="text-fw-text font-medium">robots.txt</span> tells machines where <span class="text-red-400">not</span> to go.
23-
<span class="text-fw-mint font-medium">flyweb.json</span> tells them <span class="text-fw-mint">what you have</span>.
22+
AI reads your content, gives you <span class="text-red-400 font-medium">nothing</span>.
23+
No credit. No traffic. No payment.
24+
<span class="text-fw-mint font-medium">FlyWeb</span> is the open protocol that makes your site
25+
<span class="text-fw-mint">discoverable, readable, and cited</span> by every AI agent.
2426
</p>
2527

2628
<div class="flex flex-wrap gap-2.5 mb-10">
27-
<span class="px-3 py-1.5 rounded-md border border-fw-border bg-fw-surface/60 text-xs text-fw-muted font-mono">universal discovery</span>
28-
<span class="px-3 py-1.5 rounded-md border border-fw-border bg-fw-surface/60 text-xs text-fw-muted font-mono">structured data</span>
29-
<span class="px-3 py-1.5 rounded-md border border-fw-border bg-fw-surface/60 text-xs text-fw-muted font-mono">zero API keys</span>
29+
<span class="px-3 py-1.5 rounded-md border border-fw-border bg-fw-surface/60 text-xs text-fw-muted font-mono">AI visibility</span>
30+
<span class="px-3 py-1.5 rounded-md border border-fw-border bg-fw-surface/60 text-xs text-fw-muted font-mono">enforced attribution</span>
31+
<span class="px-3 py-1.5 rounded-md border border-fw-border bg-fw-surface/60 text-xs text-fw-muted font-mono">5 min setup</span>
3032
</div>
3133

3234
<div class="flex flex-col sm:flex-row gap-3">
3335
<a
34-
href="#solution"
36+
href="#get-started"
3537
class="bg-fw-mint text-fw-bg font-semibold px-7 py-3 rounded-lg text-sm hover:brightness-110 transition-all text-center"
3638
>
37-
Read the Spec
39+
Get Started Free
3840
</a>
3941
<a
40-
href="https://github.com/flywebprotocol"
42+
href="https://github.com/flywebprotocol/flyweb"
4143
target="_blank"
4244
rel="noopener noreferrer"
4345
class="border border-fw-border text-fw-text font-medium px-7 py-3 rounded-lg text-sm hover:border-fw-mint/40 hover:text-fw-mint transition-all flex items-center justify-center gap-2"
@@ -85,16 +87,16 @@
8587
<!-- Bottom stat bar -->
8688
<div class="mt-20 pt-10 border-t border-fw-border/30 grid grid-cols-1 sm:grid-cols-3 gap-6">
8789
<div class="code-line text-center" style="animation-delay: 3.6s">
88-
<div class="text-2xl font-display font-bold text-fw-text mb-1">1 file</div>
89-
<div class="text-xs text-fw-muted font-mono">your whole site, structured</div>
90+
<div class="text-2xl font-display font-bold text-fw-mint mb-1">AI-Readable</div>
91+
<div class="text-xs text-fw-muted font-mono">structured data AI understands</div>
9092
</div>
9193
<div class="code-line text-center" style="animation-delay: 3.8s">
92-
<div class="text-2xl font-display font-bold text-fw-text mb-1">any AI</div>
93-
<div class="text-xs text-fw-muted font-mono">universal agent compatibility</div>
94+
<div class="text-2xl font-display font-bold text-fw-mint mb-1">AI-Visible</div>
95+
<div class="text-xs text-fw-muted font-mono">discovered by every AI agent</div>
9496
</div>
9597
<div class="code-line text-center" style="animation-delay: 4.0s">
96-
<div class="text-2xl font-display font-bold text-fw-text mb-1">5 min</div>
97-
<div class="text-xs text-fw-muted font-mono">add to any website</div>
98+
<div class="text-2xl font-display font-bold text-fw-mint mb-1">AI-Attributed</div>
99+
<div class="text-xs text-fw-muted font-mono">your content, your credit</div>
98100
</div>
99101
</div>
100102
</div>

‎src/components/Problem.astro‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,42 @@
22
<div class="fade-in text-center mb-16">
33
<p class="text-xs font-mono text-fw-mint mb-4 tracking-widest uppercase">The problem</p>
44
<h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
5-
The web wasn't built for machines
5+
AI uses your content. <span class="text-red-400">Gives you nothing.</span>
66
</h2>
7-
<p class="text-fw-muted text-lg max-w-xl mx-auto">And it's breaking everything AI tries to do.</p>
7+
<p class="text-fw-muted text-lg max-w-xl mx-auto">Three problems destroying the relationship between publishers and AI.</p>
88
</div>
99

1010
<div class="grid md:grid-cols-3 gap-5">
1111
<div class="fade-in group bg-fw-surface/50 border border-fw-border rounded-xl p-7 hover:border-red-400/30 transition-colors">
1212
<div class="font-mono text-2xl mb-5 text-red-400/80">&lt;/&gt;</div>
13-
<h3 class="font-display text-lg font-bold mb-3 text-fw-text">HTML Soup</h3>
13+
<h3 class="font-display text-lg font-bold mb-3 text-fw-text">Invisible to AI</h3>
1414
<p class="text-sm text-fw-muted leading-relaxed">
15-
Every website is a unique snowflake of divs, classes, and JavaScript. Machines can't tell a product price from a footnote.
15+
When someone asks an AI assistant for a recommendation, your site may never appear. There's no way to optimize for AI discovery. No sitemap. No structured data. <span class="text-red-400">Zero control.</span>
1616
</p>
1717
</div>
1818

1919
<div class="fade-in group bg-fw-surface/50 border border-fw-border rounded-xl p-7 hover:border-red-400/30 transition-colors">
20-
<div class="font-mono text-2xl mb-5 text-red-400/80">???</div>
21-
<h3 class="font-display text-lg font-bold mb-3 text-fw-text">Scrape &amp; Guess</h3>
20+
<div class="font-mono text-2xl mb-5 text-red-400/80">&#x2715;</div>
21+
<h3 class="font-display text-lg font-bold mb-3 text-fw-text">Scraped Without Credit</h3>
2222
<p class="text-sm text-fw-muted leading-relaxed">
23-
AI agents scrape raw HTML, guess what's content vs. navigation, and hallucinate when they get it wrong. Fragile. Error-prone.
23+
AI scrapes your content, generates answers from it, and gives <span class="text-red-400">zero attribution</span> to the original creator. Your words. Their profit. Your name? Nowhere to be found.
2424
</p>
2525
</div>
2626

2727
<div class="fade-in group bg-fw-surface/50 border border-fw-border rounded-xl p-7 hover:border-red-400/30 transition-colors">
28-
<div class="font-mono text-2xl mb-5 text-red-400/80">&#x2715;</div>
29-
<h3 class="font-display text-lg font-bold mb-3 text-fw-text">No Discovery</h3>
28+
<div class="font-mono text-2xl mb-5 text-red-400/80">???</div>
29+
<h3 class="font-display text-lg font-bold mb-3 text-fw-text">HTML Soup</h3>
3030
<p class="text-sm text-fw-muted leading-relaxed">
31-
There's no standard way for a machine to ask: "What content do you have?" Every API is bespoke. Every integration is custom.
31+
Every website is a unique mess of divs, classes, and JavaScript. AI agents scrape raw HTML, guess what's content, and <span class="text-red-400">hallucinate</span> when they get it wrong.
3232
</p>
3333
</div>
3434
</div>
3535

3636
<div class="fade-in mt-14 text-center">
3737
<p class="text-lg text-fw-muted">
38-
The result? AI that <span class="text-red-400 font-medium">hallucinates</span>, publishers that get <span class="text-red-400 font-medium">scraped</span>,
39-
and a web that <span class="text-red-400 font-medium">no machine can reliably read</span>.
38+
Google had <span class="text-fw-text font-medium">SEO</span>.
39+
The AI era needs <span class="text-fw-mint font-medium">AIO</span> &mdash; AI Optimization.
40+
<span class="text-fw-mint font-medium">FlyWeb is how you rank.</span>
4041
</p>
4142
</div>
4243
</section>

0 commit comments

Comments
 (0)