Skip to content

Commit e018c5d

Browse files
sukru-can1claude
sukru-can1
and
claude
committed
redesign: clean, professional landing page for mass appeal
- Typography: Bricolage Grotesque + Figtree (distinctive, readable) - Layout: centered hero, tighter max-width, softer rounded-2xl cards - Icons: emoji/text replaced with SVG icon boxes throughout - Animations: staggered transition-delay on card grids - Benefits: audience grid replaced with pill tags - Removed Roadmap from main page (dev-focused, not mass-appeal) - Refined color palette: deeper bg, warmer muted tones - Neutral terminal dots, cleaner code preview cards Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 49b1f9f commit e018c5d

13 files changed

Lines changed: 296 additions & 302 deletions

‎src/components/AIO.astro‎

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,72 @@
11
<section id="aio" class="section-container">
22
<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">
3+
<p class="text-xs font-mono text-fw-mint/70 mb-4 tracking-widest uppercase">Benefits</p>
4+
<h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mb-5">
55
What FlyWeb does <span class="text-fw-mint">for your website.</span>
66
</h2>
7-
<p class="text-fw-muted text-lg max-w-2xl mx-auto">Structure your content once. Get discovered, cited, and credited by every AI agent on the web.</p>
7+
<p class="text-fw-muted text-lg max-w-xl mx-auto leading-relaxed">Structure your content once. Get discovered, cited, and credited by every AI agent.</p>
88
</div>
99

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>
10+
<div class="grid md:grid-cols-3 gap-4 max-w-4xl mx-auto">
11+
<div class="fade-in bg-fw-surface/30 border border-fw-border/70 rounded-2xl p-8 hover:border-fw-mint/20 transition-colors">
12+
<div class="w-10 h-10 rounded-xl bg-fw-mint/10 flex items-center justify-center mb-5">
13+
<svg class="w-5 h-5 text-fw-mint" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
14+
</div>
15+
<h3 class="font-display text-lg font-bold mb-3 text-fw-text">AI Visibility</h3>
1516
<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>
17+
AI agents find and understand your content. When someone asks a question about your domain —
18+
<span class="text-fw-text">your content is in the answer.</span>
1819
</p>
19-
<div class="flex items-center gap-2 text-xs font-mono text-fw-mint/70">
20+
<div class="flex items-center gap-2 text-xs text-fw-mint/60">
2021
<span class="w-1.5 h-1.5 rounded-full bg-fw-mint"></span>
2122
Free tier
2223
</div>
2324
</div>
2425

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>
26+
<div class="fade-in bg-fw-surface/30 border border-fw-border/70 rounded-2xl p-8 hover:border-fw-mint/20 transition-colors" style="transition-delay: 80ms">
27+
<div class="w-10 h-10 rounded-xl bg-fw-mint/10 flex items-center justify-center mb-5">
28+
<svg class="w-5 h-5 text-fw-mint" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" /></svg>
29+
</div>
30+
<h3 class="font-display text-lg font-bold mb-3 text-fw-text">AI Attribution</h3>
2931
<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+
Every AI response <span class="text-fw-text">must credit you</span>. Machine-enforced at the protocol level.
33+
Your content, your name. Always.
3234
</p>
33-
<div class="flex items-center gap-2 text-xs font-mono text-fw-mint/70">
35+
<div class="flex items-center gap-2 text-xs text-fw-mint/60">
3436
<span class="w-1.5 h-1.5 rounded-full bg-fw-mint"></span>
35-
Always on &mdash; non-negotiable
37+
Non-negotiable
3638
</div>
3739
</div>
3840

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>
41+
<div class="fade-in bg-fw-surface/30 border border-fw-border/70 rounded-2xl p-8 hover:border-fw-mint/20 transition-colors" style="transition-delay: 160ms">
42+
<div class="w-10 h-10 rounded-xl bg-fw-mint/10 flex items-center justify-center mb-5">
43+
<svg class="w-5 h-5 text-fw-mint" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
44+
</div>
45+
<h3 class="font-display text-lg font-bold mb-3 text-fw-text">AI Monetization</h3>
4346
<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>.
47+
When ready, flip one 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>.
4548
Get paid when AI reads your content.
4649
</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>
50+
<div class="flex items-center gap-2 text-xs text-fw-muted/40">
51+
<span class="w-1.5 h-1.5 rounded-full bg-fw-muted/30"></span>
4952
Coming soon
5053
</div>
5154
</div>
5255
</div>
5356

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>
57+
<!-- Audience pills -->
58+
<div class="mt-12 flex flex-wrap gap-3 justify-center max-w-3xl mx-auto">
59+
<div class="fade-in px-4 py-2.5 bg-fw-surface/20 border border-fw-border/40 rounded-full text-sm text-fw-muted">
60+
<span class="text-fw-text font-medium">Bloggers</span> &mdash; get cited, get traffic
5961
</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>
62+
<div class="fade-in px-4 py-2.5 bg-fw-surface/20 border border-fw-border/40 rounded-full text-sm text-fw-muted" style="transition-delay: 60ms">
63+
<span class="text-fw-text font-medium">E-Commerce</span> &mdash; products in AI answers
6364
</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>
65+
<div class="fade-in px-4 py-2.5 bg-fw-surface/20 border border-fw-border/40 rounded-full text-sm text-fw-muted" style="transition-delay: 120ms">
66+
<span class="text-fw-text font-medium">News</span> &mdash; attribution + traffic back
6767
</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>
68+
<div class="fade-in px-4 py-2.5 bg-fw-surface/20 border border-fw-border/40 rounded-full text-sm text-fw-muted" style="transition-delay: 180ms">
69+
<span class="text-fw-text font-medium">Science</span> &mdash; proper citations, always
7170
</div>
7271
</div>
7372
</section>

‎src/components/BeforeAfter.astro‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<section class="section-container">
22
<div class="fade-in text-center mb-16">
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">
3+
<p class="text-xs font-mono text-fw-mint/70 mb-4 tracking-widest uppercase">Comparison</p>
4+
<h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mb-5">
55
Before &amp; After
66
</h2>
77
<p class="text-fw-muted text-lg">Same content. Completely different experience for machines.</p>
88
</div>
99

10-
<div class="grid md:grid-cols-2 gap-5 max-w-5xl mx-auto">
10+
<div class="grid md:grid-cols-2 gap-4 max-w-4xl mx-auto">
1111
<!-- Before -->
1212
<div class="fade-in">
1313
<div class="text-center mb-3">
14-
<span class="text-red-400 font-display font-bold text-sm">Without FlyWeb</span>
14+
<span class="text-red-400/80 font-display font-bold text-sm">Without FlyWeb</span>
1515
</div>
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>
16+
<div class="bg-fw-surface/40 border border-red-400/15 rounded-2xl overflow-hidden h-full">
17+
<div class="px-5 py-3 border-b border-fw-border/30">
18+
<span class="text-fw-muted text-xs font-mono">Scraping HTML...</span>
1919
</div>
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;
20+
<pre class="p-5 overflow-x-auto text-[12px] sm:text-[13px] leading-relaxed text-fw-muted/70"><code>&lt;div class="post-container mx-4"&gt;
2121
&lt;div class="flex items-center gap-2"&gt;
2222
&lt;img src="/avatars/sarah.jpg" /&gt;
2323
&lt;span class="text-sm"&gt;Sarah Chen&lt;/span&gt;
@@ -30,32 +30,30 @@
3030
&lt;div class="ad-banner"&gt;...&lt;/div&gt;
3131
&lt;/div&gt;
3232
&lt;/div&gt;
33-
<span class="text-red-400/70">// Which part is the article?
33+
<span class="text-red-400/50">// Which part is the article?
3434
// Where does content end?
3535
// Is "Sarah Chen" the author?</span></code></pre>
3636
</div>
3737
</div>
3838

3939
<!-- After -->
40-
<div class="fade-in">
40+
<div class="fade-in" style="transition-delay: 100ms">
4141
<div class="text-center mb-3">
4242
<span class="text-fw-mint font-display font-bold text-sm">With FlyWeb</span>
4343
</div>
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>
44+
<div class="bg-fw-surface/40 border border-fw-mint/15 rounded-2xl overflow-hidden h-full glow-mint">
45+
<div class="px-5 py-3 border-b border-fw-border/30">
46+
<span class="text-fw-muted text-xs font-mono">GET /.flyweb/articles/ai-agents-need-structure</span>
4747
</div>
4848
<pre class="p-5 overflow-x-auto text-[12px] sm:text-[13px] leading-relaxed"><code><span class="text-fw-muted">&#123;</span>
4949
<span class="text-fw-indigo">"title"</span>: <span class="text-fw-mint">"AI Agents Need Structure"</span>,
5050
<span class="text-fw-indigo">"author"</span>: <span class="text-fw-mint">"Sarah Chen"</span>,
5151
<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>,
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-muted">]</span>,
5453
<span class="text-fw-indigo">"content"</span>: <span class="text-fw-mint">"The web was built for..."</span>,
5554
<span class="text-fw-indigo">"url"</span>: <span class="text-fw-mint">"https://example.com/posts/42"</span>
5655
<span class="text-fw-muted">&#125;</span>
57-
<span class="text-[#555570]">// Clean. Structured. Unambiguous.
58-
// Zero parsing. Zero guessing.</span></code></pre>
56+
<span class="text-fw-muted/40">// Clean. Structured. Zero guessing.</span></code></pre>
5957
</div>
6058
</div>
6159
</div>

0 commit comments

Comments
 (0)