init: fibe.me promo site (Next.js + Tailwind)
This commit is contained in:
commit
a2c15be705
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
node_modules/
|
||||
.next/
|
||||
.env*
|
||||
*.log
|
||||
12
Dockerfile
Normal file
12
Dockerfile
Normal file
@ -0,0 +1,12 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["npm", "run", "dev"]
|
||||
19
app/globals.css
Normal file
19
app/globals.css
Normal file
@ -0,0 +1,19 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Inter', sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
color: #ffffff;
|
||||
}
|
||||
14
app/layout.jsx
Normal file
14
app/layout.jsx
Normal file
@ -0,0 +1,14 @@
|
||||
import './globals.css'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Fibe — Ship faster. Break less.',
|
||||
description: 'Fibe is a fullstack playground orchestrator. Spin up production-like environments in seconds.',
|
||||
}
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
189
app/page.jsx
Normal file
189
app/page.jsx
Normal file
@ -0,0 +1,189 @@
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen bg-[#0a0a0a] text-white">
|
||||
|
||||
{/* Nav */}
|
||||
<nav className="fixed top-0 w-full z-50 border-b border-white/5 bg-[#0a0a0a]/80 backdrop-blur-md">
|
||||
<div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<span className="text-xl font-bold tracking-tight">fibe</span>
|
||||
<div className="hidden md:flex items-center gap-8 text-sm text-white/60">
|
||||
<a href="#features" className="hover:text-white transition-colors">Features</a>
|
||||
<a href="#how" className="hover:text-white transition-colors">How it works</a>
|
||||
<a href="#stack" className="hover:text-white transition-colors">Stack</a>
|
||||
</div>
|
||||
<a
|
||||
href="https://next.fibe.live"
|
||||
className="text-sm bg-white text-black font-semibold px-4 py-2 rounded-lg hover:bg-white/90 transition-colors"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero */}
|
||||
<section className="pt-40 pb-24 px-6">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 text-xs font-medium text-white/50 border border-white/10 rounded-full px-4 py-1.5 mb-8">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></span>
|
||||
Docker-native fullstack orchestration
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-7xl font-black tracking-tight leading-[1.05] mb-6">
|
||||
Ship faster.<br />
|
||||
<span className="text-white/30">Break less.</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-white/50 max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
Fibe spins up production-like fullstack environments in seconds.
|
||||
Git push. Done. No DevOps degree required.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<a
|
||||
href="https://next.fibe.live"
|
||||
className="bg-white text-black font-bold px-8 py-3.5 rounded-xl hover:bg-white/90 transition-all hover:scale-[1.02] text-sm"
|
||||
>
|
||||
Start for free
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/fibegg"
|
||||
className="border border-white/15 text-white/70 font-semibold px-8 py-3.5 rounded-xl hover:border-white/30 hover:text-white transition-all text-sm"
|
||||
>
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Terminal snippet */}
|
||||
<section className="pb-24 px-6">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
|
||||
<div className="flex items-center gap-1.5 px-4 py-3 border-b border-white/5">
|
||||
<span className="w-3 h-3 rounded-full bg-red-500/60"></span>
|
||||
<span className="w-3 h-3 rounded-full bg-yellow-500/60"></span>
|
||||
<span className="w-3 h-3 rounded-full bg-green-500/60"></span>
|
||||
<span className="ml-3 text-xs text-white/30 font-mono">terminal</span>
|
||||
</div>
|
||||
<div className="p-6 font-mono text-sm leading-7">
|
||||
<p><span className="text-white/30">$</span> <span className="text-green-400">brew install fibegg/sdk/fibe</span></p>
|
||||
<p><span className="text-white/30">$</span> <span className="text-blue-400">fibe pg create</span> <span className="text-white/60">--name my-app</span></p>
|
||||
<p className="text-white/40"> Launching playground... <span className="text-green-400">done</span></p>
|
||||
<p className="text-white/40"> URL: <span className="text-white/70">https://my-app.fibe.me</span></p>
|
||||
<p><span className="text-white/30">$</span> <span className="text-purple-400">git push</span> <span className="text-white/60">&& done.</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section id="features" className="py-24 px-6 border-t border-white/5">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<p className="text-xs font-semibold text-white/30 uppercase tracking-widest text-center mb-4">Features</p>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-16">Everything you need. Nothing you don't.</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
icon: '⚡',
|
||||
title: 'Instant Playgrounds',
|
||||
desc: 'Full docker-compose environments live in under 60 seconds. Every branch, every PR.'
|
||||
},
|
||||
{
|
||||
icon: '🔀',
|
||||
title: 'Git-native workflow',
|
||||
desc: 'Connect any GitHub or Gitea repo. Push code, watch it live. No config files to fight.'
|
||||
},
|
||||
{
|
||||
icon: '🌐',
|
||||
title: 'Auto SSL & routing',
|
||||
desc: 'Traefik-powered subdomains with Let\'s Encrypt SSL out of the box. Zero ops.'
|
||||
},
|
||||
{
|
||||
icon: '🐳',
|
||||
title: 'Docker all the way',
|
||||
desc: 'Your compose file is the spec. Fibe orchestrates the rest — on your own VPS or ours.'
|
||||
},
|
||||
{
|
||||
icon: '🤖',
|
||||
title: 'AI Genies',
|
||||
desc: 'Autonomous agents that build, debug and deploy inside your Playgrounds.'
|
||||
},
|
||||
{
|
||||
icon: '🔒',
|
||||
title: 'Secrets management',
|
||||
desc: 'Encrypted key-value store. Inject env vars into any service without touching code.'
|
||||
},
|
||||
].map(({ icon, title, desc }) => (
|
||||
<div key={title} className="p-6 rounded-xl border border-white/8 bg-white/[0.02] hover:bg-white/[0.04] transition-colors">
|
||||
<div className="text-2xl mb-4">{icon}</div>
|
||||
<h3 className="font-semibold text-white mb-2">{title}</h3>
|
||||
<p className="text-sm text-white/50 leading-relaxed">{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How it works */}
|
||||
<section id="how" className="py-24 px-6 border-t border-white/5">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<p className="text-xs font-semibold text-white/30 uppercase tracking-widest text-center mb-4">How it works</p>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-16">Three steps to live.</h2>
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ n: '01', title: 'Connect a repo', desc: 'Link your GitHub or Gitea repository as a Prop. Fibe tracks every branch.' },
|
||||
{ n: '02', title: 'Launch a Playground', desc: 'Pick a Marquee (your VPS), choose a Playspec, hit launch. Docker does the rest.' },
|
||||
{ n: '03', title: 'Push and iterate', desc: 'Your Playground hot-reloads on every push. Share the URL with your team instantly.' },
|
||||
].map(({ n, title, desc }) => (
|
||||
<div key={n} className="flex gap-6 p-6 rounded-xl border border-white/8 bg-white/[0.02]">
|
||||
<span className="text-3xl font-black text-white/10 shrink-0 w-12">{n}</span>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white mb-1">{title}</h3>
|
||||
<p className="text-sm text-white/50 leading-relaxed">{desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stack */}
|
||||
<section id="stack" className="py-24 px-6 border-t border-white/5">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<p className="text-xs font-semibold text-white/30 uppercase tracking-widest mb-4">Built on boring tech</p>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Battle-tested stack.</h2>
|
||||
<p className="text-white/50 mb-12">We don't chase hype. We chase reliability.</p>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{['Docker', 'docker-compose', 'Traefik', 'Let\'s Encrypt', 'Go', 'PostgreSQL', 'Git', 'SSH'].map(t => (
|
||||
<span key={t} className="px-4 py-2 rounded-lg border border-white/10 text-sm text-white/60 font-mono">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-24 px-6 border-t border-white/5">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<h2 className="text-4xl md:text-5xl font-black mb-4">Ready to fibe?</h2>
|
||||
<p className="text-white/50 mb-8">Your first Playground is free. No credit card.</p>
|
||||
<a
|
||||
href="https://next.fibe.live"
|
||||
className="inline-block bg-white text-black font-bold px-10 py-4 rounded-xl hover:bg-white/90 transition-all hover:scale-[1.02] text-base"
|
||||
>
|
||||
Start building
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 px-6 border-t border-white/5">
|
||||
<div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-white/30">
|
||||
<span className="font-bold text-white/50">fibe</span>
|
||||
<span>© 2026 Fibe. Ship faster. Break less.</span>
|
||||
<div className="flex gap-6">
|
||||
<a href="https://github.com/fibegg" className="hover:text-white transition-colors">GitHub</a>
|
||||
<a href="https://next.fibe.live" className="hover:text-white transition-colors">App</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
)
|
||||
}
|
||||
18
docker-compose.yml
Normal file
18
docker-compose.yml
Normal file
@ -0,0 +1,18 @@
|
||||
x-fibe.gg:
|
||||
production: false
|
||||
|
||||
services:
|
||||
web:
|
||||
build: .
|
||||
ports:
|
||||
- "3000"
|
||||
volumes:
|
||||
- .:/app
|
||||
- /app/node_modules
|
||||
- /app/.next
|
||||
environment:
|
||||
- NODE_ENV=development
|
||||
labels:
|
||||
- "fibe.gg/name=web"
|
||||
- "fibe.gg/port=3000"
|
||||
- "fibe.gg/production=false"
|
||||
6
next.config.js
Normal file
6
next.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
allowedDevOrigins: ['*'],
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
20
package.json
Normal file
20
package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "fibe-me",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 3000",
|
||||
"build": "next build",
|
||||
"start": "next start -p 3000"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "14.2.29",
|
||||
"react": "^18",
|
||||
"react-dom": "^18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
10
tailwind.config.js
Normal file
10
tailwind.config.js
Normal file
@ -0,0 +1,10 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user