Skip to content

Commit 83c6ba8

Browse files
sukru-can1claude
sukru-can1
and
claude
committed
feat: add complete FlyWeb landing page
- Layout with meta tags, Google Fonts, grain overlay, scroll animations - Hero: "The Internet Can't Speak Machine" with tagline and CTAs - Problem: HTML soup, scrape & guess, no discovery - Solution: flyweb.json code example with syntax highlighting - How It Works: 3 layers (Discovery, Structure, Query) - Before/After: HTML scraping vs structured FlyWeb data - Who Benefits: Publishers, AI Companies, Developers - Roadmap: Spec → Tools → Adoption → Structured Web - Join CTA with GitHub and X links, footer - GitHub Actions workflow for Pages deployment Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 4b638d8 commit 83c6ba8

12 files changed

Lines changed: 559 additions & 15 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [master]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: true
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- uses: actions/checkout@v4
22+
- uses: actions/setup-node@v4
23+
with:
24+
node-version: 20
25+
cache: npm
26+
- run: npm ci
27+
- run: npm run build
28+
- uses: actions/upload-pages-artifact@v3
29+
with:
30+
path: dist
31+
32+
deploy:
33+
needs: build
34+
runs-on: ubuntu-latest
35+
environment:
36+
name: github-pages
37+
url: ${{ steps.deployment.outputs.page_url }}
38+
steps:
39+
- id: deployment
40+
uses: actions/deploy-pages@v4

‎src/components/BeforeAfter.astro‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<section class="section-container">
2+
<div class="fade-in text-center mb-16">
3+
<h2 class="font-display text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
4+
Before &amp; After
5+
</h2>
6+
<p class="text-gray-400 text-lg">Same content. Completely different experience for machines.</p>
7+
</div>
8+
9+
<div class="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto">
10+
<!-- Before: HTML scraping -->
11+
<div class="fade-in">
12+
<div class="text-center mb-4">
13+
<span class="text-red-400 font-display font-bold text-lg">Without FlyWeb</span>
14+
</div>
15+
<div class="bg-flyweb-dark border border-red-400/30 rounded-xl overflow-hidden">
16+
<div class="px-4 py-2 border-b border-gray-700 bg-black/30">
17+
<span class="text-gray-500 text-sm font-mono">Scraping HTML...</span>
18+
</div>
19+
<pre class="p-4 overflow-x-auto text-xs sm:text-sm leading-relaxed text-gray-400"><code>&lt;div class="post-container mx-4"&gt;
20+
&lt;div class="flex items-center gap-2"&gt;
21+
&lt;img src="/avatars/sarah.jpg" /&gt;
22+
&lt;span class="text-sm"&gt;Sarah Chen&lt;/span&gt;
23+
&lt;/div&gt;
24+
&lt;h2 class="font-bold mt-4"&gt;
25+
AI Agents Need Structure
26+
&lt;/h2&gt;
27+
&lt;div class="prose mt-2"&gt;
28+
&lt;p&gt;The web was built for...&lt;/p&gt;
29+
&lt;!-- ads, popups, nav, sidebar... --&gt;
30+
&lt;div class="ad-banner"&gt;...&lt;/div&gt;
31+
&lt;/div&gt;
32+
&lt;/div&gt;
33+
<span class="text-red-400">// Which part is the article?
34+
// Where does content end and ads begin?
35+
// Is "Sarah Chen" the author or a comment?</span></code></pre>
36+
</div>
37+
</div>
38+
39+
<!-- After: FlyWeb -->
40+
<div class="fade-in">
41+
<div class="text-center mb-4">
42+
<span class="text-green-400 font-display font-bold text-lg">With FlyWeb</span>
43+
</div>
44+
<div class="bg-flyweb-dark border border-green-400/30 rounded-xl overflow-hidden">
45+
<div class="px-4 py-2 border-b border-gray-700 bg-black/30">
46+
<span class="text-gray-500 text-sm font-mono">GET /.flyweb/articles/ai-agents-need-structure</span>
47+
</div>
48+
<pre class="p-4 overflow-x-auto text-xs sm:text-sm leading-relaxed"><code><span class="text-gray-500">&#123;</span>
49+
<span class="text-flyweb-amber">"title"</span>: <span class="text-green-400">"AI Agents Need Structure"</span>,
50+
<span class="text-flyweb-amber">"author"</span>: <span class="text-green-400">"Sarah Chen"</span>,
51+
<span class="text-flyweb-amber">"date"</span>: <span class="text-green-400">"2026-02-15"</span>,
52+
<span class="text-flyweb-amber">"tags"</span>: <span class="text-gray-500">[</span><span class="text-green-400">"ai"</span>, <span class="text-green-400">"web"</span>, <span class="text-green-400">"standards"</span><span class="text-gray-500">]</span>,
53+
<span class="text-flyweb-amber">"summary"</span>: <span class="text-green-400">"The web was built for humans..."</span>,
54+
<span class="text-flyweb-amber">"content"</span>: <span class="text-green-400">"The web was built for..."</span>,
55+
<span class="text-flyweb-amber">"url"</span>: <span class="text-green-400">"https://example.com/posts/42"</span>
56+
<span class="text-gray-500">&#125;</span>
57+
<span class="text-green-400">// Clean. Structured. Unambiguous.
58+
// Zero parsing. Zero guessing.</span></code></pre>
59+
</div>
60+
</div>
61+
</div>
62+
</section>

‎src/components/Hero.astro‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<section class="min-h-screen flex flex-col items-center justify-center text-center px-6 relative">
2+
<div class="max-w-4xl">
3+
<h1 class="font-display text-5xl sm:text-7xl md:text-8xl font-bold tracking-tight leading-none mb-8">
4+
The Internet Can't<br />
5+
<span class="text-flyweb-amber">Speak Machine.</span>
6+
</h1>
7+
8+
<p class="text-lg sm:text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto mb-6 leading-relaxed">
9+
5 billion web pages. Zero structure.<br />
10+
AI scrapes, guesses, and hallucinates its way through HTML soup.
11+
</p>
12+
13+
<p class="font-display text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-12">
14+
FlyWeb fixes it.
15+
</p>
16+
17+
<div class="bg-flyweb-dark border border-gray-800 rounded-lg px-6 py-4 inline-block mb-12">
18+
<code class="text-flyweb-amber font-mono text-sm sm:text-base md:text-lg">
19+
robots.txt tells machines where <span class="text-red-400">NOT</span> to go.
20+
<br class="sm:hidden" />
21+
flyweb.json tells them <span class="text-green-400">what you have</span>.
22+
</code>
23+
</div>
24+
25+
<div class="flex flex-col sm:flex-row gap-4 justify-center">
26+
<a
27+
href="#solution"
28+
class="bg-flyweb-amber text-flyweb-black font-semibold px-8 py-4 rounded-lg text-lg hover:bg-flyweb-amber-light transition-colors"
29+
>
30+
See How It Works
31+
</a>
32+
<a
33+
href="https://github.com/flywebprotocol"
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
class="border border-gray-600 text-white font-semibold px-8 py-4 rounded-lg text-lg hover:border-flyweb-amber hover:text-flyweb-amber transition-colors"
37+
>
38+
Star on GitHub
39+
</a>
40+
</div>
41+
</div>
42+
43+
<div class="absolute bottom-8 animate-bounce">
44+
<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
45+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
46+
</svg>
47+
</div>
48+
</section>

‎src/components/HowItWorks.astro‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<section class="section-container">
2+
<div class="fade-in text-center mb-16">
3+
<h2 class="font-display text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
4+
Three Layers. <span class="text-flyweb-amber">One Protocol.</span>
5+
</h2>
6+
</div>
7+
8+
<div class="space-y-8 max-w-3xl mx-auto">
9+
<div class="fade-in flex gap-6 items-start">
10+
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-flyweb-amber/10 border border-flyweb-amber/30 flex items-center justify-center">
11+
<span class="text-flyweb-amber font-display font-bold text-lg">1</span>
12+
</div>
13+
<div>
14+
<h3 class="font-display text-xl font-bold mb-2">Discovery</h3>
15+
<p class="text-gray-400 leading-relaxed">
16+
Every website publishes <code class="text-flyweb-amber text-sm font-mono">/.well-known/flyweb.json</code>.
17+
AI agents check this file first — like <code class="text-gray-300 text-sm font-mono">robots.txt</code> but the opposite.
18+
Instead of "stay away," it says <span class="text-flyweb-amber">"here's what I have."</span>
19+
</p>
20+
</div>
21+
</div>
22+
23+
<div class="fade-in flex gap-6 items-start">
24+
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-flyweb-amber/10 border border-flyweb-amber/30 flex items-center justify-center">
25+
<span class="text-flyweb-amber font-display font-bold text-lg">2</span>
26+
</div>
27+
<div>
28+
<h3 class="font-display text-xl font-bold mb-2">Structure</h3>
29+
<p class="text-gray-400 leading-relaxed">
30+
Content is served as clean, structured data — JSON, JSONL, or any machine-readable format.
31+
No more parsing HTML. No more guessing what's a headline vs. a sidebar ad.
32+
<span class="text-flyweb-amber">Just data.</span>
33+
</p>
34+
</div>
35+
</div>
36+
37+
<div class="fade-in flex gap-6 items-start">
38+
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-flyweb-amber/10 border border-flyweb-amber/30 flex items-center justify-center">
39+
<span class="text-flyweb-amber font-display font-bold text-lg">3</span>
40+
</div>
41+
<div>
42+
<h3 class="font-display text-xl font-bold mb-2">Query</h3>
43+
<p class="text-gray-400 leading-relaxed">
44+
Standard URL-based queries any AI agent can construct. No SDK. No API key.
45+
Just <code class="text-gray-300 text-sm font-mono">GET /.flyweb/articles?tag=ai&amp;limit=10</code>.
46+
<span class="text-flyweb-amber">Learnable in 5 minutes.</span>
47+
</p>
48+
</div>
49+
</div>
50+
</div>
51+
</section>

‎src/components/JoinCTA.astro‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<section class="section-container text-center">
2+
<div class="fade-in max-w-3xl mx-auto">
3+
<h2 class="font-display text-3xl sm:text-4xl md:text-5xl font-bold mb-6">
4+
Make Your Website<br /><span class="text-flyweb-amber">Speak Machine.</span>
5+
</h2>
6+
<p class="text-xl text-gray-400 mb-12 leading-relaxed">
7+
The web was built for human eyes.<br />
8+
It's time to give machines a way in &mdash; <span class="text-flyweb-amber">a structured way.</span>
9+
</p>
10+
11+
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-16">
12+
<a
13+
href="https://github.com/flywebprotocol"
14+
target="_blank"
15+
rel="noopener noreferrer"
16+
class="bg-white text-flyweb-black font-semibold px-8 py-4 rounded-lg text-lg hover:bg-gray-200 transition-colors flex items-center justify-center gap-3"
17+
>
18+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
19+
Star on GitHub
20+
</a>
21+
<a
22+
href="https://x.com/flywebprotocol"
23+
target="_blank"
24+
rel="noopener noreferrer"
25+
class="border border-gray-600 text-white font-semibold px-8 py-4 rounded-lg text-lg hover:border-flyweb-amber hover:text-flyweb-amber transition-colors flex items-center justify-center gap-3"
26+
>
27+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
28+
Follow on X
29+
</a>
30+
</div>
31+
</div>
32+
</section>
33+
34+
<footer class="border-t border-gray-800 py-8">
35+
<div class="max-w-5xl mx-auto px-6 flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-gray-500">
36+
<div class="flex items-center gap-2">
37+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5">
38+
<circle cx="16" cy="16" r="15" fill="#0a0a0a" stroke="#F59E0B" stroke-width="2"/>
39+
<path d="M18 4L10 18h6l-2 10 8-14h-6z" fill="#F59E0B"/>
40+
</svg>
41+
<span>FlyWeb Protocol</span>
42+
</div>
43+
<div>
44+
<a href="https://github.com/flywebprotocol" class="hover:text-flyweb-amber transition-colors">GitHub</a>
45+
<span class="mx-2">&middot;</span>
46+
<a href="https://x.com/flywebprotocol" class="hover:text-flyweb-amber transition-colors">X/Twitter</a>
47+
<span class="mx-2">&middot;</span>
48+
<a href="#solution" class="hover:text-flyweb-amber transition-colors">Spec</a>
49+
</div>
50+
</div>
51+
</footer>

‎src/components/Problem.astro‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<section class="section-container">
2+
<div class="fade-in text-center mb-16">
3+
<h2 class="font-display text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
4+
The Web Wasn't Built for Machines
5+
</h2>
6+
<p class="text-gray-400 text-lg">And it's breaking everything.</p>
7+
</div>
8+
9+
<div class="grid md:grid-cols-3 gap-8">
10+
<div class="fade-in bg-flyweb-dark border border-gray-800 rounded-xl p-8 text-center">
11+
<div class="text-4xl mb-6 text-red-400 font-mono">&lt;/&gt;</div>
12+
<h3 class="font-display text-xl font-bold mb-4">HTML Soup</h3>
13+
<p class="text-gray-400 leading-relaxed">
14+
Every website is a unique snowflake of divs, classes, and JavaScript. Machines can't tell a product price from a footnote. There's no universal structure.
15+
</p>
16+
</div>
17+
18+
<div class="fade-in bg-flyweb-dark border border-gray-800 rounded-xl p-8 text-center">
19+
<div class="text-4xl mb-6 text-red-400">?</div>
20+
<h3 class="font-display text-xl font-bold mb-4">Scrape &amp; Guess</h3>
21+
<p class="text-gray-400 leading-relaxed">
22+
AI agents scrape raw HTML, guess what's content vs. navigation, and hallucinate when they get it wrong. Fragile. Error-prone. Wasteful.
23+
</p>
24+
</div>
25+
26+
<div class="fade-in bg-flyweb-dark border border-gray-800 rounded-xl p-8 text-center">
27+
<div class="text-4xl mb-6 text-red-400">&#x1f512;</div>
28+
<h3 class="font-display text-xl font-bold mb-4">No Discovery</h3>
29+
<p class="text-gray-400 leading-relaxed">
30+
There's no standard way for a machine to ask a website: "What content do you have? How can I read it?" Every API is bespoke. Every integration is custom.
31+
</p>
32+
</div>
33+
</div>
34+
35+
<div class="fade-in mt-16 text-center">
36+
<p class="text-xl text-gray-300">
37+
The result? AI that <span class="text-red-400">hallucinates</span>, publishers that get <span class="text-red-400">scraped</span>,
38+
and a web that <span class="text-red-400">no machine can reliably read</span>.
39+
</p>
40+
</div>
41+
</section>

‎src/components/Roadmap.astro‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<section class="section-container">
2+
<div class="fade-in text-center mb-16">
3+
<h2 class="font-display text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
4+
The Road Ahead
5+
</h2>
6+
<p class="text-gray-400 text-lg">Open standard. Open source. Open to everyone.</p>
7+
</div>
8+
9+
<div class="max-w-2xl mx-auto">
10+
<div class="relative">
11+
<!-- Vertical line -->
12+
<div class="absolute left-6 top-0 bottom-0 w-px bg-gray-800"></div>
13+
14+
<div class="space-y-12">
15+
<div class="fade-in flex gap-6">
16+
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-flyweb-amber flex items-center justify-center relative z-10">
17+
<span class="text-flyweb-black font-bold">1</span>
18+
</div>
19+
<div>
20+
<h3 class="font-display text-xl font-bold mb-2">The Spec</h3>
21+
<p class="text-gray-400">
22+
Publish the <code class="text-flyweb-amber text-sm font-mono">flyweb.json</code> specification.
23+
Open source everything. Define the standard for how websites describe their content to machines.
24+
</p>
25+
<span class="inline-block mt-2 text-sm text-flyweb-amber font-semibold border border-flyweb-amber/30 rounded-full px-3 py-1">Now</span>
26+
</div>
27+
</div>
28+
29+
<div class="fade-in flex gap-6">
30+
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center relative z-10">
31+
<span class="text-gray-300 font-bold">2</span>
32+
</div>
33+
<div>
34+
<h3 class="font-display text-xl font-bold mb-2">Tools &amp; Plugins</h3>
35+
<p class="text-gray-400">
36+
Reference implementations. WordPress and Shopify plugins. A validator tool.
37+
Make it trivially easy to add FlyWeb to any site in minutes.
38+
</p>
39+
</div>
40+
</div>
41+
42+
<div class="fade-in flex gap-6">
43+
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center relative z-10">
44+
<span class="text-gray-300 font-bold">3</span>
45+
</div>
46+
<div>
47+
<h3 class="font-display text-xl font-bold mb-2">Adoption</h3>
48+
<p class="text-gray-400">
49+
1,000+ sites FlyWeb-enabled. First AI company integration.
50+
Leaderboard of FlyWeb-ready sites. Prove the standard works at scale.
51+
</p>
52+
</div>
53+
</div>
54+
55+
<div class="fade-in flex gap-6">
56+
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center relative z-10">
57+
<span class="text-gray-300 font-bold">4</span>
58+
</div>
59+
<div>
60+
<h3 class="font-display text-xl font-bold mb-2">The Structured Web</h3>
61+
<p class="text-gray-400">
62+
Every website speaks machine. AI agents discover, read, and cite content reliably.
63+
No more scraping. No more guessing. The web becomes intelligent infrastructure.
64+
</p>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</section>

0 commit comments

Comments
 (0)