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'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Fibe — Your entire stack, live in seconds.',
|
||||
description: 'Fibe orchestrates fullstack environments from any git repo. Web apps, APIs, databases, AI agents, preview envs and jobs — on your infra, zero DevOps.',
|
||||
metadataBase: new URL('https://fibe.me'),
|
||||
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 }) {
|
||||
return (
|
||||
<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>
|
||||
</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="#features" className="hover:text-white transition-colors">Platform</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="#stack" className="hover:text-white transition-colors">Stack</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
@ -265,6 +265,151 @@ export default function Home() {
|
||||
</div>
|
||||
</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 ── */}
|
||||
<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">
|
||||
|
||||
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