SEO overhaul, OG image, sitemap/robots, cloud provider entry guides (DO/AWS/GCP/Azure)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
85af50886b
commit
c44f1856d4
@ -1,13 +1,77 @@
|
|||||||
import './globals.css'
|
import './globals.css'
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'Fibe — Your entire stack, live in seconds.',
|
metadataBase: new URL('https://fibe.me'),
|
||||||
description: 'Fibe orchestrates fullstack environments from any git repo. Web apps, APIs, databases, AI agents, preview envs and jobs — on your infra, zero DevOps.',
|
title: {
|
||||||
|
default: 'Fibe — Idea to Live App in 60 Seconds. No Code Required.',
|
||||||
|
template: '%s | Fibe',
|
||||||
|
},
|
||||||
|
description:
|
||||||
|
'Turn any idea into a live app in 60 seconds — no coding experience needed. ' +
|
||||||
|
'AI Genies write the code. Fibe handles servers, SSL and deploys on DigitalOcean, AWS, GCP, Azure or any VPS. Zero DevOps.',
|
||||||
|
keywords: [
|
||||||
|
'no-code platform', 'AI app builder', 'deploy app without coding',
|
||||||
|
'fullstack hosting', 'AI agent development', 'docker orchestration',
|
||||||
|
'DevOps automation', 'DigitalOcean app deploy', 'AWS app hosting',
|
||||||
|
'GCP deployment', 'Azure app deployment', 'fibe platform',
|
||||||
|
'AI code generation', 'live preview environment', 'self-hosted deployment',
|
||||||
|
],
|
||||||
|
authors: [{ name: 'Fibe', url: 'https://fibe.me' }],
|
||||||
|
creator: 'Fibe',
|
||||||
|
publisher: 'Fibe',
|
||||||
|
robots: {
|
||||||
|
index: true,
|
||||||
|
follow: true,
|
||||||
|
googleBot: { index: true, follow: true, 'max-image-preview': 'large' },
|
||||||
|
},
|
||||||
|
openGraph: {
|
||||||
|
type: 'website',
|
||||||
|
locale: 'en_US',
|
||||||
|
url: 'https://fibe.me',
|
||||||
|
siteName: 'Fibe',
|
||||||
|
title: 'Fibe — Idea to Live App in 60 Seconds.',
|
||||||
|
description:
|
||||||
|
'No code required. AI Genies write the code. Fibe ships it — SSL, subdomains, deploys — on DigitalOcean, AWS, GCP, Azure or any VPS.',
|
||||||
|
},
|
||||||
|
twitter: {
|
||||||
|
card: 'summary_large_image',
|
||||||
|
site: '@fibegg',
|
||||||
|
creator: '@fibegg',
|
||||||
|
title: 'Fibe — Idea to Live App in 60 Seconds.',
|
||||||
|
description:
|
||||||
|
'No code required. AI Genies write the code. Fibe ships it on your own infrastructure.',
|
||||||
|
},
|
||||||
|
alternates: {
|
||||||
|
canonical: 'https://fibe.me',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RootLayout({ children }) {
|
export default function RootLayout({ children }) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" className="dark">
|
<html lang="en" className="dark">
|
||||||
|
<head>
|
||||||
|
<script
|
||||||
|
type="application/ld+json"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: JSON.stringify({
|
||||||
|
'@context': 'https://schema.org',
|
||||||
|
'@type': 'SoftwareApplication',
|
||||||
|
name: 'Fibe',
|
||||||
|
url: 'https://fibe.me',
|
||||||
|
applicationCategory: 'DeveloperApplication',
|
||||||
|
operatingSystem: 'Any',
|
||||||
|
description:
|
||||||
|
'Fibe orchestrates fullstack environments from any idea or git repo. AI Genies write the code. Deploy to DigitalOcean, AWS, GCP, Azure or any VPS in 60 seconds.',
|
||||||
|
offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
|
||||||
|
publisher: {
|
||||||
|
'@type': 'Organization',
|
||||||
|
name: 'Fibe',
|
||||||
|
url: 'https://fibe.me',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
<body>{children}</body>
|
<body>{children}</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|||||||
133
app/opengraph-image.jsx
Normal file
133
app/opengraph-image.jsx
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
import { ImageResponse } from 'next/og'
|
||||||
|
|
||||||
|
export const runtime = 'nodejs'
|
||||||
|
export const alt = 'Fibe — Idea to live app in 60 seconds. No code required.'
|
||||||
|
export const size = { width: 1200, height: 630 }
|
||||||
|
export const contentType = 'image/png'
|
||||||
|
|
||||||
|
export default function Image() {
|
||||||
|
return new ImageResponse(
|
||||||
|
(
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: 'linear-gradient(135deg, #0b0916 0%, #0f0c29 30%, #1a1540 60%, #1e1a42 100%)',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
fontFamily: 'system-ui, -apple-system, sans-serif',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Grid overlay */}
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', inset: 0,
|
||||||
|
backgroundImage: 'linear-gradient(rgba(139,92,246,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.06) 1px, transparent 1px)',
|
||||||
|
backgroundSize: '52px 52px',
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{/* Glow orb */}
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute',
|
||||||
|
width: 700, height: 700,
|
||||||
|
borderRadius: '50%',
|
||||||
|
background: 'radial-gradient(circle, rgba(139,92,246,0.18) 0%, transparent 70%)',
|
||||||
|
top: -200, right: -100,
|
||||||
|
}} />
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute',
|
||||||
|
width: 500, height: 500,
|
||||||
|
borderRadius: '50%',
|
||||||
|
background: 'radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%)',
|
||||||
|
bottom: -150, left: -100,
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative', zIndex: 1 }}>
|
||||||
|
|
||||||
|
{/* Logo */}
|
||||||
|
<div style={{
|
||||||
|
width: 80, height: 80, borderRadius: 20,
|
||||||
|
background: 'linear-gradient(135deg, #8b5cf6, #a78bfa)',
|
||||||
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
|
fontSize: 42, color: 'white', fontWeight: 900,
|
||||||
|
marginBottom: 36,
|
||||||
|
boxShadow: '0 0 60px rgba(139,92,246,0.6)',
|
||||||
|
}}>
|
||||||
|
f
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Headline */}
|
||||||
|
<div style={{
|
||||||
|
fontSize: 76,
|
||||||
|
fontWeight: 700,
|
||||||
|
color: 'white',
|
||||||
|
letterSpacing: '-3px',
|
||||||
|
lineHeight: 1.05,
|
||||||
|
textAlign: 'center',
|
||||||
|
marginBottom: 8,
|
||||||
|
}}>
|
||||||
|
Idea to live app.
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: 76,
|
||||||
|
fontWeight: 700,
|
||||||
|
letterSpacing: '-3px',
|
||||||
|
lineHeight: 1.05,
|
||||||
|
textAlign: 'center',
|
||||||
|
marginBottom: 36,
|
||||||
|
background: 'linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #818cf8 100%)',
|
||||||
|
backgroundClip: 'text',
|
||||||
|
color: 'transparent',
|
||||||
|
}}>
|
||||||
|
Sixty seconds.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sub */}
|
||||||
|
<div style={{
|
||||||
|
fontSize: 26,
|
||||||
|
color: 'rgba(161,161,170,0.65)',
|
||||||
|
textAlign: 'center',
|
||||||
|
maxWidth: 740,
|
||||||
|
lineHeight: 1.5,
|
||||||
|
marginBottom: 40,
|
||||||
|
}}>
|
||||||
|
No code required. AI Genies build it. Fibe ships it.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Provider pills */}
|
||||||
|
<div style={{ display: 'flex', gap: 12 }}>
|
||||||
|
{['DigitalOcean', 'AWS', 'GCP', 'Azure', 'Any VPS'].map((p) => (
|
||||||
|
<div key={p} style={{
|
||||||
|
padding: '8px 18px',
|
||||||
|
borderRadius: 999,
|
||||||
|
border: '1px solid rgba(139,92,246,0.3)',
|
||||||
|
background: 'rgba(139,92,246,0.1)',
|
||||||
|
color: '#c4b5fd',
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: 500,
|
||||||
|
}}>
|
||||||
|
{p}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Domain */}
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute', bottom: 36,
|
||||||
|
fontSize: 22,
|
||||||
|
color: 'rgba(139,92,246,0.45)',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
letterSpacing: '0.05em',
|
||||||
|
}}>
|
||||||
|
fibe.me
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
{ ...size }
|
||||||
|
)
|
||||||
|
}
|
||||||
147
app/page.jsx
147
app/page.jsx
@ -27,8 +27,8 @@ export default function Home() {
|
|||||||
<a href="#manifesto" className="hover:text-white transition-colors">Why Fibe</a>
|
<a href="#manifesto" className="hover:text-white transition-colors">Why Fibe</a>
|
||||||
<a href="#features" className="hover:text-white transition-colors">Platform</a>
|
<a href="#features" className="hover:text-white transition-colors">Platform</a>
|
||||||
<a href="#genies" className="hover:text-white transition-colors">Genies</a>
|
<a href="#genies" className="hover:text-white transition-colors">Genies</a>
|
||||||
|
<a href="#clouds" className="hover:text-white transition-colors">Deploy</a>
|
||||||
<a href="#everything" className="hover:text-white transition-colors">Everything</a>
|
<a href="#everything" className="hover:text-white transition-colors">Everything</a>
|
||||||
<a href="#stack" className="hover:text-white transition-colors">Stack</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
@ -265,6 +265,151 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* ── CLOUD PROVIDER GUIDES ── */}
|
||||||
|
<section id="clouds" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<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)'}}>
|
||||||
|
Works on any cloud
|
||||||
|
</p>
|
||||||
|
<h2 className="font-display text-4xl md:text-5xl font-normal mb-4" style={{letterSpacing:'-0.02em'}}>
|
||||||
|
Your cloud. 5 minutes to ready.
|
||||||
|
</h2>
|
||||||
|
<p className="max-w-xl mx-auto" style={{color:'rgba(161,161,170,0.65)'}}>
|
||||||
|
No prior cloud experience needed. Pick your provider, spin up a server,
|
||||||
|
connect it to Fibe. Same three steps everywhere.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Shared steps callout */}
|
||||||
|
<div className="glass rounded-2xl p-5 mb-8 max-w-2xl mx-auto"
|
||||||
|
style={{borderColor:'rgba(139,92,246,0.15)',background:'rgba(139,92,246,0.04)'}}>
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-widest mb-3 text-center"
|
||||||
|
style={{color:'rgba(139,92,246,0.6)'}}>
|
||||||
|
Steps 2 & 3 are identical on every provider
|
||||||
|
</p>
|
||||||
|
<div className="font-mono text-xs leading-7 text-center" style={{color:'rgba(161,161,170,0.6)'}}>
|
||||||
|
<span style={{color:'rgba(255,255,255,0.2)'}}>$</span>{' '}
|
||||||
|
<span className="text-emerald-400">curl -fsSL https://get.docker.com | sh</span>
|
||||||
|
{' '}<span style={{color:'rgba(255,255,255,0.2)'}}>← install Docker</span>
|
||||||
|
<br />
|
||||||
|
<span style={{color:'rgba(255,255,255,0.2)'}}>$</span>{' '}
|
||||||
|
<span style={{color:'#a78bfa'}}>fibe marquees connect</span>{' '}
|
||||||
|
<span style={{color:'rgba(255,255,255,0.35)'}}>--host YOUR_IP</span>
|
||||||
|
{' '}<span className="text-emerald-400">✓ done</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-5">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
name: 'DigitalOcean',
|
||||||
|
badge: 'Easiest to start',
|
||||||
|
badgeColor: '#34d399',
|
||||||
|
color: '#0080ff',
|
||||||
|
step1: 'Create a Droplet',
|
||||||
|
step1desc: 'Dashboard → Create → Droplet → Ubuntu 22.04 → Basic → 2 vCPU / 4 GB ($24/mo) → Create',
|
||||||
|
step1link: 'https://cloud.digitalocean.com/droplets/new',
|
||||||
|
tip: 'Enable "Add SSH key" during creation — you\'ll need it to connect.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Amazon AWS',
|
||||||
|
badge: 'Most popular',
|
||||||
|
badgeColor: '#fb923c',
|
||||||
|
color: '#f90',
|
||||||
|
step1: 'Launch an EC2 instance',
|
||||||
|
step1desc: 'Console → EC2 → Launch instance → Ubuntu 22.04 → t3.medium → Create key pair → Launch',
|
||||||
|
step1link: 'https://console.aws.amazon.com/ec2/v2/home#LaunchInstances:',
|
||||||
|
tip: 'In Security Group, open port 22 (SSH), 80 (HTTP) and 443 (HTTPS).',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Google Cloud',
|
||||||
|
badge: 'Great free tier',
|
||||||
|
badgeColor: '#60a5fa',
|
||||||
|
color: '#4285f4',
|
||||||
|
step1: 'Create a Compute Engine VM',
|
||||||
|
step1desc: 'Console → Compute Engine → Create instance → e2-medium → Ubuntu 22.04 LTS → Allow HTTP & HTTPS → Create',
|
||||||
|
step1link: 'https://console.cloud.google.com/compute/instancesAdd',
|
||||||
|
tip: 'Under "Firewall" check both "Allow HTTP traffic" and "Allow HTTPS traffic".',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Microsoft Azure',
|
||||||
|
badge: '$200 free credit',
|
||||||
|
badgeColor: '#c4b5fd',
|
||||||
|
color: '#0078d4',
|
||||||
|
step1: 'Create a Virtual Machine',
|
||||||
|
step1desc: 'Portal → Create resource → Virtual Machine → Ubuntu 22.04 → Standard B2s (2 vCPU / 4 GB) → SSH public key → Review + create',
|
||||||
|
step1link: 'https://portal.azure.com/#create/Microsoft.VirtualMachine-ARM',
|
||||||
|
tip: 'In "Networking", add inbound rules for ports 80 and 443 after creation.',
|
||||||
|
},
|
||||||
|
].map(({ name, badge, badgeColor, color, step1, step1desc, step1link, tip }) => (
|
||||||
|
<div key={name} className="glass rounded-2xl p-6" style={{borderColor:'rgba(139,92,246,0.12)'}}>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between mb-5">
|
||||||
|
<h3 className="font-bold text-white text-lg">{name}</h3>
|
||||||
|
<span className="text-xs font-semibold px-2.5 py-1 rounded-full"
|
||||||
|
style={{color: badgeColor, background: badgeColor + '18', border: `1px solid ${badgeColor}35`}}>
|
||||||
|
{badge}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 1 */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<span className="w-5 h-5 rounded-full text-xs font-black flex items-center justify-center shrink-0"
|
||||||
|
style={{background:'rgba(139,92,246,0.2)',color:'#a78bfa'}}>1</span>
|
||||||
|
<span className="text-sm font-semibold text-white">{step1}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs leading-relaxed pl-7 mb-2" style={{color:'rgba(161,161,170,0.6)'}}>{step1desc}</p>
|
||||||
|
<a href={step1link} target="_blank" rel="noopener noreferrer"
|
||||||
|
className="text-xs pl-7 inline-flex items-center gap-1 transition-colors hover:opacity-80"
|
||||||
|
style={{color}}>
|
||||||
|
Open {name} Console ↗
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 2 */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<span className="w-5 h-5 rounded-full text-xs font-black flex items-center justify-center shrink-0"
|
||||||
|
style={{background:'rgba(139,92,246,0.2)',color:'#a78bfa'}}>2</span>
|
||||||
|
<span className="text-sm font-semibold text-white">Install Docker</span>
|
||||||
|
</div>
|
||||||
|
<div className="ml-7 font-mono text-xs px-3 py-2 rounded-lg"
|
||||||
|
style={{background:'rgba(0,0,0,0.3)',color:'rgba(52,211,153,0.8)',border:'1px solid rgba(139,92,246,0.1)'}}>
|
||||||
|
curl -fsSL https://get.docker.com | sh
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 3 */}
|
||||||
|
<div className="mb-5">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<span className="w-5 h-5 rounded-full text-xs font-black flex items-center justify-center shrink-0"
|
||||||
|
style={{background:'rgba(139,92,246,0.2)',color:'#a78bfa'}}>3</span>
|
||||||
|
<span className="text-sm font-semibold text-white">Connect to Fibe</span>
|
||||||
|
</div>
|
||||||
|
<div className="ml-7 font-mono text-xs px-3 py-2 rounded-lg"
|
||||||
|
style={{background:'rgba(0,0,0,0.3)',color:'#a78bfa',border:'1px solid rgba(139,92,246,0.1)'}}>
|
||||||
|
fibe marquees connect --host YOUR_IP
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tip */}
|
||||||
|
<div className="rounded-xl px-4 py-3 text-xs leading-relaxed"
|
||||||
|
style={{background:'rgba(139,92,246,0.06)',border:'1px solid rgba(139,92,246,0.1)',color:'rgba(196,181,253,0.6)'}}>
|
||||||
|
<span style={{color:'rgba(167,139,250,0.7)'}}>Tip:</span> {tip}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-center text-sm mt-8" style={{color:'rgba(161,161,170,0.4)'}}>
|
||||||
|
Have a different provider or bare metal server?{' '}
|
||||||
|
<span style={{color:'rgba(167,139,250,0.6)'}}>If it runs Ubuntu + Docker, it works.</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* ── PLATFORM FEATURES ── */}
|
{/* ── PLATFORM FEATURES ── */}
|
||||||
<section id="features" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
<section id="features" className="py-28 px-6" style={{borderTop:'1px solid rgba(139,92,246,0.08)'}}>
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
|
|||||||
7
app/robots.js
Normal file
7
app/robots.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export default function robots() {
|
||||||
|
return {
|
||||||
|
rules: [{ userAgent: '*', allow: '/' }],
|
||||||
|
sitemap: 'https://fibe.me/sitemap.xml',
|
||||||
|
host: 'https://fibe.me',
|
||||||
|
}
|
||||||
|
}
|
||||||
10
app/sitemap.js
Normal file
10
app/sitemap.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export default function sitemap() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
url: 'https://fibe.me',
|
||||||
|
lastModified: new Date(),
|
||||||
|
changeFrequency: 'weekly',
|
||||||
|
priority: 1,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user