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