Add ownership/security section, competitor comparison table, updated stats
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
422421ac56
commit
723483ea55
@ -2,12 +2,13 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
const LINKS = [
|
||||
{ href: '#manifesto', label: 'Why Fibe' },
|
||||
{ href: '#features', label: 'Platform' },
|
||||
{ href: '#genies', label: 'Genies' },
|
||||
{ href: '#clouds', label: 'Cloud guides' },
|
||||
{ href: '#everything',label: 'Everything included' },
|
||||
{ href: '#stack', label: 'Stack' },
|
||||
{ href: '#manifesto', label: 'Why Fibe' },
|
||||
{ href: '#features', label: 'Platform' },
|
||||
{ href: '#genies', label: 'Genies' },
|
||||
{ href: '#ownership', label: 'Security & Ownership' },
|
||||
{ href: '#clouds', label: 'Cloud guides' },
|
||||
{ href: '#everything', label: 'Everything included' },
|
||||
{ href: '#stack', label: 'Stack' },
|
||||
]
|
||||
|
||||
export default function Nav() {
|
||||
|
||||
108
app/page.jsx
108
app/page.jsx
@ -482,6 +482,108 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── OWN EVERYTHING ── */}
|
||||
<section id="ownership" className="py-28 px-6 relative overflow-hidden" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||||
<div className="glow-orb" style={{width:700,height:700,background:'radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 70%)',top:'50%',left:'50%',transform:'translate(-50%,-50%)'}} />
|
||||
<div className="max-w-6xl mx-auto relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>Security & Ownership</p>
|
||||
<h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
|
||||
Your code. Your data.<br />
|
||||
<em className="gradient-text not-italic">Your servers. Always.</em>
|
||||
</h2>
|
||||
<p className="max-w-xl mx-auto" style={{color:'rgba(161,161,170,0.65)'}}>
|
||||
Fibe never stores, scans or touches your application data. It orchestrates — your infrastructure, your rules, your jurisdiction.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-5">
|
||||
{[
|
||||
{icon:'🔒', title:'Zero vendor access', desc:'Your code runs on your servers. Fibe connects via SSH to orchestrate — it never reads, stores or processes your application data.'},
|
||||
{icon:'🌍', title:'Data sovereignty', desc:'Deploy in any region worldwide. Your data stays in your jurisdiction. GDPR, HIPAA, enterprise compliance — by architecture, not policy.'},
|
||||
{icon:'💰', title:'No compute markup', desc:'You pay AWS, DigitalOcean, GCP or Hetzner directly. Fibe never touches your cloud bill. No bandwidth fees. No egress charges. Ever.'},
|
||||
{icon:'🏗️', title:'Isolated by design', desc:'Every environment is fully isolated. No shared resources, no noisy neighbors. Complete separation between projects, teams and branches.'},
|
||||
{icon:'🔑', title:'You hold the keys', desc:'SSH into any server at any time. Your infrastructure works with or without Fibe — no dependency trap, no hostage situation.'},
|
||||
{icon:'👁️', title:'No black boxes', desc:'Open SDK. Inspect every compose file Fibe generates. Audit, modify, run anywhere. Nothing hidden, nothing proprietary.'},
|
||||
].map(({icon, title, desc}) => (
|
||||
<div key={title} className="glass rounded-2xl p-6 transition-all hover:scale-[1.01] hover:brightness-105"
|
||||
style={{borderColor:'rgba(139,92,246,0.12)'}}>
|
||||
<div className="text-2xl mb-4">{icon}</div>
|
||||
<h3 className="font-semibold text-white mb-2">{title}</h3>
|
||||
<p className="text-sm leading-relaxed" style={{color:'rgba(161,161,170,0.65)'}}>{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pricing hint */}
|
||||
<div className="mt-8 glass rounded-2xl px-8 py-5 flex flex-col md:flex-row items-center justify-between gap-4"
|
||||
style={{borderColor:'rgba(139,92,246,0.1)',background:'rgba(139,92,246,0.03)'}}>
|
||||
<p className="text-sm" style={{color:'rgba(161,161,170,0.6)'}}>
|
||||
<span className="text-white font-medium">Start from ~$12/month</span> on a DigitalOcean Droplet.
|
||||
Scale to whatever your project needs. Pay your cloud provider — not us.
|
||||
</p>
|
||||
<a href="https://next.fibe.live/register"
|
||||
className="shrink-0 text-sm font-semibold px-5 py-2 rounded-xl transition-all hover:brightness-110"
|
||||
style={{background:'linear-gradient(135deg, #7c3aed, #a78bfa)'}}>
|
||||
Start free
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── COMPARISON ── */}
|
||||
<section className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-14">
|
||||
<p className="text-xs font-semibold uppercase tracking-widest mb-3" style={{color:'rgba(139,92,246,0.7)'}}>How Fibe compares</p>
|
||||
<h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
|
||||
The platform others can't be.
|
||||
</h2>
|
||||
<p style={{color:'rgba(161,161,170,0.6)'}}>Your infra. Your AI. Your rules. No one else can offer all three.</p>
|
||||
</div>
|
||||
|
||||
<div className="glass rounded-2xl overflow-hidden" style={{borderColor:'rgba(139,92,246,0.12)'}}>
|
||||
{/* Header */}
|
||||
<div className="grid grid-cols-5 text-xs font-semibold uppercase tracking-widest px-6 py-4"
|
||||
style={{borderBottom:'1px solid rgba(139,92,246,0.1)',background:'rgba(139,92,246,0.05)'}}>
|
||||
<div className="col-span-2" style={{color:'rgba(161,161,170,0.4)'}}>Feature</div>
|
||||
<div className="text-center gradient-text">Fibe</div>
|
||||
<div className="text-center" style={{color:'rgba(161,161,170,0.3)'}}>Vercel / Railway</div>
|
||||
<div className="text-center" style={{color:'rgba(161,161,170,0.3)'}}>Kubernetes</div>
|
||||
</div>
|
||||
|
||||
{[
|
||||
['Your own infrastructure', true, false, true ],
|
||||
['Zero vendor lock-in', true, false, true ],
|
||||
['No compute markup', true, false, true ],
|
||||
['No code required (AI agents)', true, false, false],
|
||||
['60-second environment boot', true, false, false],
|
||||
['Data stays on your servers', true, false, true ],
|
||||
['Any Docker workload', true, 'part', true ],
|
||||
['No ops expertise needed', true, true, false],
|
||||
['AI agents with full env access',true, false, false],
|
||||
['SSH access anytime', true, false, true ],
|
||||
['Free to start', true, true, false],
|
||||
].map(([feature, fibe, vercel, k8s], i, arr) => {
|
||||
const cell = (v) => v === true
|
||||
? <span className="text-emerald-400 text-base">✓</span>
|
||||
: v === false
|
||||
? <span style={{color:'rgba(161,161,170,0.18)',fontSize:'1.1rem'}}>—</span>
|
||||
: <span style={{color:'rgba(234,179,8,0.55)',fontSize:'0.75rem'}}>partial</span>
|
||||
return (
|
||||
<div key={feature} className="grid grid-cols-5 px-6 py-3 text-sm items-center"
|
||||
style={{borderBottom: i < arr.length-1 ? '1px solid rgba(139,92,246,0.05)' : 'none'}}>
|
||||
<div className="col-span-2" style={{color:'rgba(161,161,170,0.65)'}}>{feature}</div>
|
||||
<div className="text-center">{cell(fibe)}</div>
|
||||
<div className="text-center">{cell(vercel)}</div>
|
||||
<div className="text-center">{cell(k8s)}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── EVERYTHING INCLUDED ── */}
|
||||
<section id="everything" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||||
<div className="max-w-5xl mx-auto">
|
||||
@ -600,10 +702,10 @@ export default function Home() {
|
||||
<section className="py-20 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||||
<div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-5">
|
||||
{[
|
||||
{n:'~60s', label:'git to live URL'},
|
||||
{n:'∞', label:'Playgrounds per Marquee'},
|
||||
{n:'~60s', label:'idea to live app'},
|
||||
{n:'0', label:'bytes of your code on Fibe servers'},
|
||||
{n:'4', label:'AI providers built-in'},
|
||||
{n:'0', label:'vendor lock-in'},
|
||||
{n:'∞', label:'possibilities'},
|
||||
].map(({n, label}) => (
|
||||
<div key={label} className="glass rounded-2xl p-6 text-center" style={{borderColor:'rgba(139,92,246,0.12)'}}>
|
||||
<div className="font-display text-4xl font-normal mb-1.5 gradient-text" style={{letterSpacing:'-0.02em'}}>{n}</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user