Skip to content

Commit 2518b92

Browse files
sukru-can1claude
sukru-can1
and
claude
committed
redesign: new color palette, typography, and animated hero
Complete visual overhaul with electric mint (#00ffc8) on midnight base, Syne + Outfit + JetBrains Mono typography, and animated hero terminal that reveals flyweb.json line-by-line with code comments fading in. Added fixed navigation bar, grid background pattern, and glow effects. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 8321dae commit 2518b92

14 files changed

Lines changed: 398 additions & 253 deletions

‎public/favicon.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎src/components/BeforeAfter.astro‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
<section class="section-container">
22
<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">
3+
<p class="text-xs font-mono text-fw-mint mb-4 tracking-widest uppercase">Comparison</p>
4+
<h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
45
Before &amp; After
56
</h2>
6-
<p class="text-gray-400 text-lg">Same content. Completely different experience for machines.</p>
7+
<p class="text-fw-muted text-lg">Same content. Completely different experience for machines.</p>
78
</div>
89

9-
<div class="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto">
10-
<!-- Before: HTML scraping -->
10+
<div class="grid md:grid-cols-2 gap-5 max-w-5xl mx-auto">
11+
<!-- Before -->
1112
<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>
13+
<div class="text-center mb-3">
14+
<span class="text-red-400 font-display font-bold text-sm">Without FlyWeb</span>
1415
</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>
16+
<div class="bg-fw-surface/50 border border-red-400/20 rounded-xl overflow-hidden h-full">
17+
<div class="px-4 py-2.5 border-b border-fw-border/40 bg-fw-bg/30">
18+
<span class="text-fw-muted text-[11px] font-mono">Scraping HTML...</span>
1819
</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+
<pre class="p-5 overflow-x-auto text-[12px] sm:text-[13px] leading-relaxed text-fw-muted/80"><code>&lt;div class="post-container mx-4"&gt;
2021
&lt;div class="flex items-center gap-2"&gt;
2122
&lt;img src="/avatars/sarah.jpg" /&gt;
2223
&lt;span class="text-sm"&gt;Sarah Chen&lt;/span&gt;
@@ -26,35 +27,34 @@
2627
&lt;/h2&gt;
2728
&lt;div class="prose mt-2"&gt;
2829
&lt;p&gt;The web was built for...&lt;/p&gt;
29-
&lt;!-- ads, popups, nav, sidebar... --&gt;
3030
&lt;div class="ad-banner"&gt;...&lt;/div&gt;
3131
&lt;/div&gt;
3232
&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>
33+
<span class="text-red-400/70">// Which part is the article?
34+
// Where does content end?
35+
// Is "Sarah Chen" the author?</span></code></pre>
3636
</div>
3737
</div>
3838

39-
<!-- After: FlyWeb -->
39+
<!-- After -->
4040
<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>
41+
<div class="text-center mb-3">
42+
<span class="text-fw-mint font-display font-bold text-sm">With FlyWeb</span>
4343
</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>
44+
<div class="bg-fw-surface/50 border border-fw-mint/20 rounded-xl overflow-hidden h-full glow-mint">
45+
<div class="px-4 py-2.5 border-b border-fw-border/40 bg-fw-bg/30">
46+
<span class="text-fw-muted text-[11px] font-mono">GET /.flyweb/articles/ai-agents-need-structure</span>
4747
</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.
48+
<pre class="p-5 overflow-x-auto text-[12px] sm:text-[13px] leading-relaxed"><code><span class="text-fw-muted">&#123;</span>
49+
<span class="text-fw-indigo">"title"</span>: <span class="text-fw-mint">"AI Agents Need Structure"</span>,
50+
<span class="text-fw-indigo">"author"</span>: <span class="text-fw-mint">"Sarah Chen"</span>,
51+
<span class="text-fw-indigo">"date"</span>: <span class="text-fw-mint">"2026-02-15"</span>,
52+
<span class="text-fw-indigo">"tags"</span>: <span class="text-fw-muted">[</span><span class="text-fw-mint">"ai"</span>, <span class="text-fw-mint">"web"</span>, <span class="text-fw-mint">"standards"</span><span class="text-fw-muted">]</span>,
53+
<span class="text-fw-indigo">"summary"</span>: <span class="text-fw-mint">"The web was built for..."</span>,
54+
<span class="text-fw-indigo">"content"</span>: <span class="text-fw-mint">"The web was built for..."</span>,
55+
<span class="text-fw-indigo">"url"</span>: <span class="text-fw-mint">"https://example.com/posts/42"</span>
56+
<span class="text-fw-muted">&#125;</span>
57+
<span class="text-[#555570]">// Clean. Structured. Unambiguous.
5858
// Zero parsing. Zero guessing.</span></code></pre>
5959
</div>
6060
</div>

‎src/components/Hero.astro‎

Lines changed: 96 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,101 @@
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>
1+
<section class="min-h-screen flex items-center relative overflow-hidden pt-14">
2+
<!-- Background effects -->
3+
<div class="absolute inset-0 grid-bg"></div>
4+
<div class="absolute top-1/3 -left-40 w-[500px] h-[500px] bg-fw-mint/[0.04] rounded-full blur-[150px]"></div>
5+
<div class="absolute bottom-1/4 -right-40 w-[400px] h-[400px] bg-fw-indigo/[0.06] rounded-full blur-[130px]"></div>
6+
7+
<div class="relative max-w-6xl mx-auto px-6 py-16 w-full">
8+
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
9+
<!-- Left: Text -->
10+
<div>
11+
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-fw-border bg-fw-surface/80 text-xs font-mono text-fw-muted mb-8">
12+
<span class="w-1.5 h-1.5 rounded-full bg-fw-mint animate-pulse"></span>
13+
open protocol v1.0
14+
</div>
15+
16+
<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>
19+
</h1>
20+
21+
<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>.
24+
</p>
25+
26+
<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>
30+
</div>
2431

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>
32+
<div class="flex flex-col sm:flex-row gap-3">
33+
<a
34+
href="#solution"
35+
class="bg-fw-mint text-fw-bg font-semibold px-7 py-3 rounded-lg text-sm hover:brightness-110 transition-all text-center"
36+
>
37+
Read the Spec
38+
</a>
39+
<a
40+
href="https://github.com/flywebprotocol"
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
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"
44+
>
45+
<svg class="w-4.5 h-4.5" 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>
46+
Star on GitHub
47+
</a>
48+
</div>
49+
</div>
50+
51+
<!-- Right: Terminal animation -->
52+
<div class="relative">
53+
<div class="bg-fw-surface/80 border border-fw-border rounded-xl overflow-hidden glow-mint backdrop-blur-sm">
54+
<!-- Terminal chrome -->
55+
<div class="flex items-center gap-2 px-4 py-3 border-b border-fw-border/60 bg-fw-bg/40">
56+
<div class="flex gap-1.5">
57+
<div class="w-2.5 h-2.5 rounded-full bg-[#ff5f57]"></div>
58+
<div class="w-2.5 h-2.5 rounded-full bg-[#febc2e]"></div>
59+
<div class="w-2.5 h-2.5 rounded-full bg-[#28c840]"></div>
60+
</div>
61+
<span class="text-fw-muted text-[11px] font-mono ml-2">/.well-known/flyweb.json</span>
62+
</div>
63+
64+
<!-- Code content -->
65+
<div class="p-5 font-mono text-[13px] sm:text-sm leading-[1.7]">
66+
<div class="code-line" style="animation-delay: 0.2s"><span class="text-fw-muted">&#123;</span></div>
67+
<div class="code-line" style="animation-delay: 0.45s; padding-left: 2ch"><span class="text-fw-indigo">"flyweb"</span><span class="text-fw-muted">:</span> <span class="text-fw-mint">"1.0"</span><span class="text-fw-muted">,</span> <span class="code-comment" style="animation-delay: 0.9s; color: #555570">// version</span></div>
68+
<div class="code-line" style="animation-delay: 0.7s; padding-left: 2ch"><span class="text-fw-indigo">"entity"</span><span class="text-fw-muted">:</span> <span class="text-fw-mint">"TechCrunch"</span><span class="text-fw-muted">,</span></div>
69+
<div class="code-line" style="animation-delay: 0.95s; padding-left: 2ch"><span class="text-fw-indigo">"type"</span><span class="text-fw-muted">:</span> <span class="text-fw-mint">"news"</span><span class="text-fw-muted">,</span></div>
70+
<div class="code-line" style="animation-delay: 1.2s; padding-left: 2ch"><span class="text-fw-indigo">"resources"</span><span class="text-fw-muted">: &#123;</span></div>
71+
<div class="code-line" style="animation-delay: 1.45s; padding-left: 4ch"><span class="text-fw-indigo">"articles"</span><span class="text-fw-muted">: &#123;</span></div>
72+
<div class="code-line" style="animation-delay: 1.7s; padding-left: 6ch"><span class="text-fw-indigo">"path"</span><span class="text-fw-muted">:</span> <span class="text-fw-mint">"/.flyweb/articles"</span><span class="text-fw-muted">,</span> <span class="code-comment" style="animation-delay: 2.1s; color: #555570">// where</span></div>
73+
<div class="code-line" style="animation-delay: 1.95s; padding-left: 6ch"><span class="text-fw-indigo">"format"</span><span class="text-fw-muted">:</span> <span class="text-fw-mint">"jsonl"</span><span class="text-fw-muted">,</span></div>
74+
<div class="code-line" style="animation-delay: 2.2s; padding-left: 6ch"><span class="text-fw-indigo">"fields"</span><span class="text-fw-muted">: [</span><span class="text-fw-mint">"title"</span><span class="text-fw-muted">,</span> <span class="text-fw-mint">"author"</span><span class="text-fw-muted">,</span> <span class="code-comment" style="animation-delay: 2.6s; color: #555570">// what</span></div>
75+
<div class="code-line" style="animation-delay: 2.45s; padding-left: 14ch"><span class="text-fw-mint">"date"</span><span class="text-fw-muted">,</span> <span class="text-fw-mint">"content"</span><span class="text-fw-muted">],</span></div>
76+
<div class="code-line" style="animation-delay: 2.7s; padding-left: 6ch"><span class="text-fw-indigo">"query"</span><span class="text-fw-muted">:</span> <span class="text-fw-mint">"?tag=&#123;tag&#125;"</span> <span class="code-comment" style="animation-delay: 3.1s; color: #555570">// search</span></div>
77+
<div class="code-line" style="animation-delay: 2.95s; padding-left: 4ch"><span class="text-fw-muted">&#125;</span></div>
78+
<div class="code-line" style="animation-delay: 3.1s; padding-left: 2ch"><span class="text-fw-muted">&#125;</span></div>
79+
<div class="code-line" style="animation-delay: 3.25s"><span class="text-fw-muted">&#125;</span><span class="inline-block w-[7px] h-[18px] bg-fw-mint ml-0.5 -mb-0.5 cursor-blink" style="animation-delay: 3.5s"></span></div>
80+
</div>
81+
</div>
82+
</div>
4083
</div>
41-
</div>
4284

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>
85+
<!-- Bottom stat bar -->
86+
<div class="mt-20 pt-10 border-t border-fw-border/30 grid grid-cols-1 sm:grid-cols-3 gap-6">
87+
<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>
91+
<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>
95+
<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>
99+
</div>
47100
</div>
48101
</section>

0 commit comments

Comments
 (0)